MadMikeyB · June 30, 2023 09:39
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 	<title>4chan /wg/ just the wallpapers</title>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body class="has-navbar-fixed-top">

 	<nav class="navbar is-fixed-top">
 		<div class="navbar-brand">
 			<a class="navbar-item" href="https://bulma.io">
 				ImgGrab
 			</a>
 		</div>

 		<div class="navbar-menu">
 			<div class="navbar-start">
 				<nav class="pagination is-small" role="navigation" aria-label="pagination">
 					<ul class="pagination-list">
 						<li>
 							<a href="?page=1" data-page="1" class="pagination-link" aria-label="Page 1" aria-current="page">1</a>
 						</li>
 						<li>
 							<a href="?page=2" data-page="2" class="pagination-link" aria-label="Goto page 2">2</a>
 						</li>
 						<li>
 							<a href="?page=3" data-page="3" class="pagination-link" aria-label="Goto page 3">3</a>
 						</li>
 						<li>
 							<a href="?page=4" data-page="4" class="pagination-link" aria-label="Goto page 4">4</a>
 						</li>
 						<li>
 							<a href="?page=5" data-page="5" class="pagination-link" aria-label="Goto page 5">5</a>
 						</li>
 						<li>
 							<a href="?page=6" data-page="6" class="pagination-link" aria-label="Goto page 6">6</a>
 						</li>
 						<li>
 							<a href="?page=7" data-page="7" class="pagination-link" aria-label="Goto page 7">7</a>
 						</li>
 						<li>
 							<a href="?page=8" data-page="8" class="pagination-link" aria-label="Goto page 8">8</a>
 						</li>
 						<li>
 							<a href="?page=9" data-page="9" class="pagination-link" aria-label="Goto page 9">9</a>
 						</li>
 						<li>
 							<a href="?page=10" data-page="10" class="pagination-link" aria-label="Goto page 10">10</a>
 						</li>
 					</ul>
 				</nav>
 			</div>
 		</div>
 		<div class="navbar-end">
 			<div class="navbar-item">
 				<div class="buttons">
 					<a class="button is-primary" data-download-button>
 						<strong>Download This Page</strong>
 					</a>
 				</div>
 			</div>
 		</div>
 	</nav>

 	<div class="container">
 		<div id="app" class="columns is-variable is-2 is-multiline"></div>
 	</div>


 	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script type="text/javascript">
 		document.addEventListener('DOMContentLoaded', function(e) {
 			console.log('document has loaded.')

 			const urlParams = new URLSearchParams(window.location.search)
 			const page = urlParams.get('page') || 1
 			document.querySelector(`[data-page="${page}"]`).classList.add('is-current')
 			const apiUrl = `https://cors-anywhere.herokuapp.com/https://a.4cdn.org/wg/${page}.json`
 			const apiOptions = {
 				headers: {
 					'Access-Control-Allow-Origin' : '*',
 					'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
 				}
 			}
 			const images = []

 			axios.get(apiUrl, apiOptions)
 				.then(({data}) => {
 					const threads = data.threads
 					threads.map((thread) => {
 						const posts = thread.posts
 						posts.map((post) => {
 							if (post.sticky != 1) {
 								if (post.tim != '1489266876258') {
 									if (post.tim) {
 										const image = {
 											'id': post.tim + post.ext,
 											'url': 'https://i.4cdn.org/wg/' + post.tim + post.ext
 										}

 										images.push(image)
 									}
 								}
 							}
 						})
 					})
 				}).then(() => {
 					// console.log(images)
 					images.map((image) => {
 						const wrapper = document.querySelector('#app')
 						const divEl = document.createElement('div')
 						const anchorEl = document.createElement('a')
 						const figureEl = document.createElement('figure')
 						const imgEl = document.createElement('img')

 						// <div>
 						divEl.classList.add('column')
 						divEl.classList.add('is-one-third')
 						// divEl.classList.add('card')

 						// <a>
 						anchorEl.href = image.url
 						anchorEl.download = image.id
 						anchorEl.target = '_blank'
 						// anchorEl.classList.add('card-image')

 						// <figure>
 						figureEl.classList.add('image')
 						figureEl.classList.add('is-16by9')

 						// <img>
 						imgEl.src = image.url
 						imgEl.alt = image.id
 						// imgEl.setAttribute('crossorigin', 'anonymous')

 						// go go gadget go
 						wrapper.appendChild(divEl)
 						divEl.appendChild(anchorEl)
 						anchorEl.appendChild(figureEl)
 						figureEl.appendChild(imgEl)
 					})
 				})
 		})

 		const downloadAll = async () => {
 			// Create and append a link
 			let link = document.createElement('a')
 			document.documentElement.append(link)
 			const images = document.querySelectorAll('img')
 			for (let i = 0; i < images.length; i++) {
 				const image = images[i]
 				await fetch(`https://cors-anywhere.herokuapp.com/${image.src}`, { 
 					mode: "cors",
 					headers: {
 						'Access-Control-Allow-Origin' : '*',
 						'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
 					}
 				})
 				.then(res => res.blob()) // Gets the response and returns it as a blob
 				.then(blob => {
 					let objectURL = URL.createObjectURL(blob)
 					// Set the download name and href
 					const imageName = image.getAttribute('alt')
 					link.setAttribute("download", imageName)
 					link.href = objectURL
 					// Auto click the link
 					link.click()
 				})
 			}
 		}
 		const downloadButton = document.querySelector('[data-download-button]')
 		downloadButton.addEventListener('click', downloadAll)
 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>4chan /wg/ just the wallpapers</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	</head>
	<body class="has-navbar-fixed-top">

	<nav class="navbar is-fixed-top">
	<div class="navbar-brand">
	<a class="navbar-item" href="https://bulma.io">
	ImgGrab
	</a>
	</div>

	<div class="navbar-menu">
	<div class="navbar-start">
	<nav class="pagination is-small" role="navigation" aria-label="pagination">
	<ul class="pagination-list">
	<li>
	<a href="?page=1" data-page="1" class="pagination-link" aria-label="Page 1" aria-current="page">1</a>
	</li>
	<li>
	<a href="?page=2" data-page="2" class="pagination-link" aria-label="Goto page 2">2</a>
	</li>
	<li>
	<a href="?page=3" data-page="3" class="pagination-link" aria-label="Goto page 3">3</a>
	</li>
	<li>
	<a href="?page=4" data-page="4" class="pagination-link" aria-label="Goto page 4">4</a>
	</li>
	<li>
	<a href="?page=5" data-page="5" class="pagination-link" aria-label="Goto page 5">5</a>
	</li>
	<li>
	<a href="?page=6" data-page="6" class="pagination-link" aria-label="Goto page 6">6</a>
	</li>
	<li>
	<a href="?page=7" data-page="7" class="pagination-link" aria-label="Goto page 7">7</a>
	</li>
	<li>
	<a href="?page=8" data-page="8" class="pagination-link" aria-label="Goto page 8">8</a>
	</li>
	<li>
	<a href="?page=9" data-page="9" class="pagination-link" aria-label="Goto page 9">9</a>
	</li>
	<li>
	<a href="?page=10" data-page="10" class="pagination-link" aria-label="Goto page 10">10</a>
	</li>
	</ul>
	</nav>
	</div>
	</div>
	<div class="navbar-end">
	<div class="navbar-item">
	<div class="buttons">
	<a class="button is-primary" data-download-button>
	<strong>Download This Page</strong>
	</a>
	</div>
	</div>
	</div>
	</nav>

	<div class="container">
	<div id="app" class="columns is-variable is-2 is-multiline"></div>
	</div>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function(e) {
	console.log('document has loaded.')

	const urlParams = new URLSearchParams(window.location.search)
	const page = urlParams.get('page') \|\| 1
	document.querySelector(`[data-page="${page}"]`).classList.add('is-current')
	const apiUrl = `https://cors-anywhere.herokuapp.com/https://a.4cdn.org/wg/${page}.json`
	const apiOptions = {
	headers: {
	'Access-Control-Allow-Origin' : '*',
	'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
	}
	}
	const images = []

	axios.get(apiUrl, apiOptions)
	.then(({data}) => {
	const threads = data.threads
	threads.map((thread) => {
	const posts = thread.posts
	posts.map((post) => {
	if (post.sticky != 1) {
	if (post.tim != '1489266876258') {
	if (post.tim) {
	const image = {
	'id': post.tim + post.ext,
	'url': 'https://i.4cdn.org/wg/' + post.tim + post.ext
	}

	images.push(image)
	}
	}
	}
	})
	})
	}).then(() => {
	// console.log(images)
	images.map((image) => {
	const wrapper = document.querySelector('#app')
	const divEl = document.createElement('div')
	const anchorEl = document.createElement('a')
	const figureEl = document.createElement('figure')
	const imgEl = document.createElement('img')

	// <div>
	divEl.classList.add('column')
	divEl.classList.add('is-one-third')
	// divEl.classList.add('card')

	// <a>
	anchorEl.href = image.url
	anchorEl.download = image.id
	anchorEl.target = '_blank'
	// anchorEl.classList.add('card-image')

	// <figure>
	figureEl.classList.add('image')
	figureEl.classList.add('is-16by9')

	// <img>
	imgEl.src = image.url
	imgEl.alt = image.id
	// imgEl.setAttribute('crossorigin', 'anonymous')

	// go go gadget go
	wrapper.appendChild(divEl)
	divEl.appendChild(anchorEl)
	anchorEl.appendChild(figureEl)
	figureEl.appendChild(imgEl)
	})
	})
	})

	const downloadAll = async () => {
	// Create and append a link
	let link = document.createElement('a')
	document.documentElement.append(link)
	const images = document.querySelectorAll('img')
	for (let i = 0; i < images.length; i++) {
	const image = images[i]
	await fetch(`https://cors-anywhere.herokuapp.com/${image.src}`, {
	mode: "cors",
	headers: {
	'Access-Control-Allow-Origin' : '*',
	'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS'
	}
	})
	.then(res => res.blob()) // Gets the response and returns it as a blob
	.then(blob => {
	let objectURL = URL.createObjectURL(blob)
	// Set the download name and href
	const imageName = image.getAttribute('alt')
	link.setAttribute("download", imageName)
	link.href = objectURL
	// Auto click the link
	link.click()
	})
	}
	}
	const downloadButton = document.querySelector('[data-download-button]')
	downloadButton.addEventListener('click', downloadAll)
	</script>
	</body>
	</html>