Skip to content

Commit ca3a0a6

Browse files
dacrabdacrab
committed
Move index.html to nord/ and embed image list to fix CORS/previews
1 parent 8cc6243 commit ca3a0a6

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

‎nord/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Nord Wallpapers</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
8+
<style>
9+
:root {
10+
--nord0: #2e3440; --nord1: #3b4252; --nord2: #434c5e; --nord3: #4c566a;
11+
--nord4: #d8dee9; --nord5: #e5e9f0; --nord6: #eceff4;
12+
--nord7: #8fbcbb; --nord8: #88c0d0; --nord9: #81a1c1; --nord10: #5e81ac;
13+
}
14+
body { background-color: var(--nord0); color: var(--nord6); font-family: sans-serif; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; }
15+
header { text-align: center; margin-bottom: 40px; }
16+
h1 { color: var(--nord8); }
17+
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; width: 100%; max-width: 1200px; }
18+
.card { background-color: var(--nord1); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
19+
.card img { width: 100%; height: 160px; object-fit: cover; }
20+
.card-info { padding: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
21+
.download-btn { background-color: var(--nord9); padding: 4px 8px; text-decoration: none; color: var(--nord0); border-radius: 4px; }
22+
#status { margin-top: 10px; color: var(--nord7); min-height: 1.2em; }
23+
.warning { color: #ebcb8b; font-size: 0.8rem; margin-top: 5px; max-width: 600px; text-align: center; }
24+
</style>
25+
</head>
26+
<body>
27+
<header>
28+
<h1>🏔️ Nord Wallpapers</h1>
29+
<p>Optimized 1080p WebP Collection</p>
30+
<div class="controls" style="display:flex; flex-direction:column; align-items:center;">
31+
<button id="downloadAll" style="background:var(--nord8); border:none; padding:10px 20px; cursor:pointer; font-weight:bold; border-radius:4px;">Download All as ZIP</button>
32+
<div id="status"></div>
33+
<p class="warning" id="corsWarning" style="display:none;">Note: The "Download All" feature requires a web server (like GitHub Pages or a local server) because browsers block fetching local files for security. Individual downloads work fine!</p>
34+
</div>
35+
</header>
36+
<div class="grid" id="grid"></div>
37+
<script>
38+
const imageList = ["10.webp","11.webp","12.webp","13.webp","14.webp","15.webp","16.webp","17.webp","1.webp","20.webp","23.webp","24.webp","25.webp","26.webp","28.webp","29.webp","2.webp","31.webp","32.webp","33.webp","35.webp","36.webp","37.webp","38.webp","3.webp","40.webp","41.webp","42.webp","43.webp","44.webp","45.webp","46.webp","47.webp","48.webp","49.webp","4.webp","50.webp","51.webp","52.webp","53.webp","54.webp","55.webp","56.webp","57.webp","58.webp","59.webp","5.webp","60.webp","68.webp","6.webp","70.webp","71.webp","72.webp","73.webp","74.webp","75.webp","76.webp","8.webp","9.webp","Abstract-Nord.webp","archlinux.webp","arctic-landscape.webp","artix-nord.webp","at_the_coffeshop.webp","audio-bunny.webp","BirdNord.webp","chemical_nord.webp","container_ship.webp","cpu_city.webp","CRON-Nord.webp","debian-galaxy.webp","debian.webp","earth-in-space.webp","elementaryos.webp","fedora.webp","FormulaOne_Button_1.webp","FormulaOne_Button_2.webp","FormulaOne_Hamilton_1.webp","FormulaOne_Hamilton_2.webp","FormulaOne_Hamilton_3.webp","FormulaOne_Rosberg_2.webp","FormulaOne_Vettel_1.webp","FormulaOne_Vettel_2.webp","gnu-linux.webp","ign-0000.webp","ign-0001.webp","ign-0002.webp","ign-0003.webp","ign-0008.webp","ign-0009.webp","ign-0011.webp","ign_astronautInTheOcean.webp","ign_astronaut.webp","ign_batman.webp","ign_beyondHillAndDale.webp","ign_black.webp","ign_bratislava.webp","ign_car.webp","ign_chineseIG.webp","ign_chomusuke.webp","ign_cityRainOther.webp","ign_cityRain.webp","ign_city.webp","ign_colorful.webp","ign_desert.webp","ign_dudeOnBuilding2.webp","ign_dudeOnBuilding.webp","ign_endeavour1.webp","ign_endeavour2.webp","ign_endeavour3.webp","ign_endeavour4.webp","ign_evening.webp","ign_farFromTomorrow.webp","ign_ferrari1.webp","ign_ferrari2.webp","ign_ferrari3.webp","ign_ferrari4.webp","ign_furkaPass.webp","ign_gradeintWave.webp","ign_graySpaceship.webp","ign_groot.webp","ign_herakles.webp","ign-hevlettpackard.webp","ign_highTechGlobe.webp","ign_iceAndFire.webp","ign_leafHelmet.webp","ign_legendary.webp","ign_lighthouse.webp","ign_lightning.webp","ign_mandalorian.webp","ign_manInStreet.webp","ign_manjaro.webp","ign_mountains.webp","ign_mountain.webp","ign_nordhills.webp","ign_nordic_rose.webp","ign_nordic_triangle.webp","ign_outer_space.webp","ign_planets.webp","ign_puppyInSpace.webp","ign_racecar.webp","ign_raid_in_the_dark.webp","ign_rick_3840x2160.webp","ign_robots.webp","ign_someGame.webp","ign_soupKong.webp","ign_spiderman.webp","ign_spiral.webp","ign_starWarsThing.webp","ign_starWars.webp","ign_stuff.webp","ign_sunAndClouds.webp","ign_sunGarden.webp","ign_sunset.webp","ign-supertree-grove-singapore.webp","ign_tokyo.webp","ign_travelling.webp","ign_unicorn.webp","ign_unsplash10.webp","ign_unsplash11.webp","ign_unsplash12.webp","ign_unsplash13.webp","ign_unsplash14.webp","ign_unsplash15.webp","ign_unsplash16.webp","ign_unsplash17.webp","ign_unsplash18.webp","ign_unsplash19.webp","ign_unsplash1.webp","ign_unsplash20.webp","ign_unsplash21.webp","ign_unsplash22.webp","ign_unsplash23.webp","ign_unsplash24.webp","ign_unsplash25.webp","ign_unsplash26.webp","ign_unsplash27.webp","ign_unsplash28.webp","ign_unsplash29.webp","ign_unsplash2.webp","ign_unsplash30.webp","ign_unsplash31.webp","ign_unsplash32.webp","ign_unsplash33.webp","ign_unsplash34.webp","ign_unsplash35.webp","ign_unsplash36.webp","ign_unsplash37.webp","ign_unsplash38.webp","ign_unsplash39.webp","ign_unsplash3.webp","ign_unsplash40.webp","ign_unsplash41.webp","ign_unsplash42.webp","ign_unsplash43.webp","ign_unsplash44.webp","ign_unsplash45.webp","ign_unsplash46.webp","ign_unsplash47.webp","ign_unsplash48.webp","ign_unsplash49.webp","ign_unsplash4.webp","ign_unsplash50.webp","ign_unsplash51.webp","ign_unsplash52.webp","ign_unsplash5.webp","ign_unsplash6.webp","ign_unsplash7.webp","ign_unsplash8.webp","ign_unsplash9.webp","ign_vader.webp","ign_vaporWave.webp","ign_venom.webp","ign_waifu.webp","ign_wanderlust.webp","ign_wave.webp","ign_wild_fish.webp","ign_windows_11.webp","ign_witch.webp","ign_yayayayayaya.webp","ign_yourName.webp","ign_zorin.webp","keyboard.webp","kittyboard.webp","linux-be-good-4k.webp","linux-friends-4k.webp","linux-is-coming-4k.webp","linux-tux.webp","Minimal-Nord.webp","misty_mountains.webp","mountain_jaws.webp","murky_peaks.webp","nixos.webp","nord_alone_tree.webp","nord-arctic-fox.webp","nord-balloons.webp","nord_bridge.webp","nord_buildings.webp","nord_design.webp","nordic-12.webp","nordic-139.webp","nordic-140.webp","nordic-177.webp","nordic-179.webp","nordic-194.webp","nordic-215.webp","nordic-216.webp","nordic-5.webp","nordic-74.webp","nordic-75.webp","nordic-80.webp","nordic-83.webp","nordic-84.webp","nordic-86.webp","nordic-91.webp","nordic-92.webp","nordic-96.webp","nordic-97.webp","nordic-9.webp","Nordic-Heroin.webp","nordic-obsession.webp","nord_lake.webp","nord_mountains.webp","nord_naruto_2.webp","nord_roads.webp","nord_scenary.webp","nord_space.webp","nordtest1.webp","nordtheme.webp","nord_triangles.webp","nord_valley.webp","openbsd.webp","opensuse.webp","pixelcity.webp","pixelmoon.webp","plan9.webp","prime-number-spiral.webp","rocket.webp","slackware.webp","street_blues.webp","subtle_ferns.webp","ubuntu-aurora.webp","ubuntu-frost.webp","underwater.webp","utiity.webp","voidlinux-01.webp","voidlinux.webp","waves.webp","wild.webp"];
39+
const grid = document.getElementById("grid");
40+
const status = document.getElementById("status");
41+
const downloadAllBtn = document.getElementById("downloadAll");
42+
43+
if (window.location.protocol === "file:") {
44+
document.getElementById("corsWarning").style.display = "block";
45+
}
46+
47+
imageList.forEach(img => {
48+
const card = document.createElement("div");
49+
card.className = "card";
50+
card.innerHTML = `<img src="${img}" loading="lazy"><div class="card-info"><span>${img}</span><a href="${img}" download="${img}" class="download-btn">Download</a></div>`;
51+
grid.appendChild(card);
52+
});
53+
54+
downloadAllBtn.onclick = async () => {
55+
downloadAllBtn.disabled = true;
56+
const zip = new JSZip();
57+
const folder = zip.folder("nord_wallpapers");
58+
try {
59+
for (let i = 0; i < imageList.length; i++) {
60+
status.innerText = `Adding ${i+1}/${imageList.length}...`;
61+
const res = await fetch(imageList[i]);
62+
if (!res.ok) throw new Error("Fetch failed");
63+
folder.file(imageList[i], await res.blob());
64+
}
65+
status.innerText = "Generating ZIP...";
66+
const content = await zip.generateAsync({type:"blob"});
67+
const a = document.createElement("a");
68+
a.href = URL.createObjectURL(content);
69+
a.download = "wallpapers.zip";
70+
a.click();
71+
status.innerText = "Done!";
72+
} catch (e) {
73+
status.innerText = "Error: ZIP failed (likely CORS on file://)";
74+
console.error(e);
75+
}
76+
downloadAllBtn.disabled = false;
77+
};
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)