129 lines
4.1 KiB
HTML
129 lines
4.1 KiB
HTML
|
<!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>
|