wallpapers.joygnu.org/index.html

129 lines
4.1 KiB
HTML
Raw Normal View History

2024-07-16 22:30:25 +02:00
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' type='text/css' href='style.css'>
<title>Gruvbox wallpapers</title>
<script src='app.js' defer></script>
<script src='https://kit.fontawesome.com/13865d7982.js' crossorigin='anonymous' defer></script>
</head>
<body>
<div class='float-btns'>
<a href='https://git.joygnu.org/wallpapers.git' target='_blank' class='btn float-btn' title='Source code' >
<span>
<i class='fa-brands fa-github'></i>
</span>
</a>
<button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
<span>
<i id='light-icon' class='fa-solid fa-sun'></i>
<i id='dark-icon' class='fa-solid fa-moon'></i>
</span>
</button>
</div>
<main>
<h1>Gruvbox Wallpapers</h1>
<h2 class='s1 clickable' onclick='activeSection("anime")' >
ANIME
</h2>
<div class='section' id='anime'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("anime", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("anime", 2)'>2</button>
</div>
<div id='anime-content'>
</div>
</div>
<h2 class='s2 clickable' onclick='activeSection("irl")' >
IRL
</h2>
<div class='section' id='irl'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("irl", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("irl", 2)'>2</button>
<button class='btn pager-btn' onclick='loadPage("irl", 3)'>3</button>
<button class='btn pager-btn' onclick='loadPage("irl", 4)'>4</button>
<button class='btn pager-btn' onclick='loadPage("irl", 5)'>5</button>
<button class='btn pager-btn' onclick='loadPage("irl", 6)'>6</button>
<button class='btn pager-btn' onclick='loadPage("irl", 7)'>7</button>
</div>
<div id='irl-content'>
</div>
</div>
<h2 class='s3 clickable' onclick='activeSection("light")' >
LIGHT
</h2>
<div class='section' id='light'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("light", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("light", 2)'>2</button>
</div>
<div id='light-content'>
</div>
</div>
<h2 class='s4 clickable' onclick='activeSection("minimalistic")' >
MINIMALISTIC
</h2>
<div class='section' id='minimalistic'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 2)'>2</button>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 3)'>3</button>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 4)'>4</button>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 5)'>5</button>
<button class='btn pager-btn' onclick='loadPage("minimalistic", 6)'>6</button>
</div>
<div id='minimalistic-content'>
</div>
</div>
<h2 class='s5 clickable' onclick='activeSection("mix")' >
MIX
</h2>
<div class='section' id='mix'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("mix", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("mix", 2)'>2</button>
<button class='btn pager-btn' onclick='loadPage("mix", 3)'>3</button>
<button class='btn pager-btn' onclick='loadPage("mix", 4)'>4</button>
<button class='btn pager-btn' onclick='loadPage("mix", 5)'>5</button>
</div>
<div id='mix-content'>
</div>
</div>
<h2 class='s6 clickable' onclick='activeSection("pixelart")' >
PIXELART
</h2>
<div class='section' id='pixelart'>
<div class='pager'>
<button class='btn pager-btn' onclick='loadPage("pixelart", 1)'>1</button>
<button class='btn pager-btn' onclick='loadPage("pixelart", 2)'>2</button>
<button class='btn pager-btn' onclick='loadPage("pixelart", 3)'>3</button>
</div>
<div id='pixelart-content'>
</div>
</div>
</main>
<script>
window.onload = () => {
loadPage('anime', 1);
loadPage('irl', 1);
loadPage('light', 1);
loadPage('minimalistic', 1);
loadPage('mix', 1);
loadPage('pixelart', 1);
activeSection('anime');
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
setTheme('dark');
}else{
setTheme('light');
}
}
</script>
</body>
</html>