light and dark theme and other stuff

This commit is contained in:
zyqunix 2024-10-29 21:41:16 +01:00
parent ed0b2f5e66
commit fd698f6ccf
6 changed files with 194 additions and 63 deletions

View file

@ -7,17 +7,14 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="topbar" class="topbar">
<a class="home" href="/index.html" target="_blank" rel="noopener noreferrer">Go Home</a>
<button id="themeToggle" class="theme-button">
<a id="home" class="home" href="/index.html" target="_blank" rel="noopener noreferrer">Go Home</a>
<button id="themeToggle" class="theme-button" title="Change Theme to Dark/Light">
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>
</button>
</button>
</div>
<div class="welcome">
<div id="welcome" class="welcome">
<h1>Welcome!</h1>
<h2>This is my website for tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub!</a></h2>
</div>
@ -25,11 +22,18 @@
<div class="tools-main">
<div id="tool-div" class="click-test">
<h1 class="tool-header">Mouse Test</h1>
<h2>This allows you to test your mouse's keys!</h2>
<img class="toolimage" src="https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3&" alt="Mouse Test Preview">
<a class="visit-tool" href="/click.html">Visit</a>
<h2 class="tool-desc">This allows you to test your mouse's keys!</h2>
<div class="slideshow-container">
<img class="tool-image" src="https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3&" alt="Mouse Test Preview">
<button class="prev" onclick="changeSlide(-1)"></button>
<button class="next" onclick="changeSlide(1)"></button>
</div>
<a id="visit" class="visit-tool" href="/click.html">Visit</a>
</div>
</div>
<script src="theme.js"></script>
<script src="slide.js"></script>
</body>
</html>
</html>