light and dark theme and other stuff
This commit is contained in:
zyqunix
parent
ed0b2f5e66
commit
fd698f6ccf
6 changed files with 194 additions and 63 deletions
BIN
epic 5158.mp4
Normal file
BIN
epic 5158.mp4
Normal file
Binary file not shown.
28
index.html
28
index.html
|
|
@ -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>
|
||||
|
|
|
|||
43
script.js
43
script.js
|
|
@ -1,43 +0,0 @@
|
|||
const themeToggle = document.getElementById('themeToggle');
|
||||
const topbar = document.getElementById('topbar')
|
||||
|
||||
let isLightMode = false;
|
||||
|
||||
themeToggle.addEventListener('click', function() {
|
||||
if (!isLightMode) {
|
||||
document.body.style.backgroundColor = '#C8C8C8';
|
||||
container.style.backgroundColor = "#B0B0B0";
|
||||
themeToggle.innerHTML = `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V3C11 2.44772 11.4477 2 12 2Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L17.7071 7.70711C17.3166 8.09763 16.6834 8.09763 16.2929 7.70711C15.9024 7.31658 15.9024 6.68342 16.2929 6.29289L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 11.4477 18.4477 11 19 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H19C18.4477 13 18 12.5523 18 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 16.2929C16.6834 15.9024 17.3166 15.9024 17.7071 16.2929L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L16.2929 17.7071C15.9024 17.3166 15.9024 16.6834 16.2929 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C12.5523 18 13 18.4477 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.4477 11.4477 18 12 18Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 16.2929C8.09763 16.6834 8.09763 17.3166 7.70711 17.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.68342 4.29289 18.2929L6.29289 16.2929C6.68342 15.9024 7.31658 15.9024 7.70711 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H3C2.44772 13 2 12.5523 2 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#141414"></path>
|
||||
</g></svg>`;
|
||||
container.style.color = "#1E1E1E"
|
||||
isLightMode = true;
|
||||
|
||||
let children = container.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.color = "#1E1E1E";
|
||||
}
|
||||
|
||||
} else {
|
||||
let children = container.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.color = "#f0f0f0";
|
||||
}
|
||||
document.body.style.backgroundColor = '#2a2a2a';
|
||||
themeToggle.innerHTML = `<svg fill="#747474" height="24" width="24" 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: #000000;" 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>`;
|
||||
isLightMode = false;
|
||||
container.style.backgroundColor = "#4b4b4b";
|
||||
|
||||
}
|
||||
});
|
||||
24
slide.js
Normal file
24
slide.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
let slideIndex = 0;
|
||||
const images = [
|
||||
"https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3",
|
||||
"https://cdn.discordapp.com/attachments/1281034862391988304/1300921012539490426/image.png?ex=6722989b&is=6721471b&hm=6fc40dd7272e62c4f2cc4cf73433d4c012d9fa939da32a72a5223f8138d4153e&&",
|
||||
"https://cdn.discordapp.com/attachments/1250368193114148907/1285283453595811934/togif.gif?ex=6722657e&is=672113fe&hm=cbc1659cfae2d4b0657cf3d0daf13081923e6ea6dce6030072a2b9c3c560d30b&"
|
||||
];
|
||||
|
||||
function showSlide(n) {
|
||||
const image = document.querySelector(".tool-image");
|
||||
slideIndex = (n + images.length) % images.length;
|
||||
image.src = images[slideIndex];
|
||||
}
|
||||
|
||||
function changeSlide(n) {
|
||||
showSlide(slideIndex + n);
|
||||
}
|
||||
|
||||
function autoScroll() {
|
||||
changeSlide(1);
|
||||
setTimeout(autoScroll, 10000);
|
||||
}
|
||||
|
||||
showSlide(slideIndex);
|
||||
autoScroll();
|
||||
80
style.css
80
style.css
|
|
@ -7,10 +7,14 @@ body {
|
|||
font-family: monospace;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
color: white;
|
||||
color: #f0f0f0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #3c7855;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -28,7 +32,7 @@ body {
|
|||
|
||||
.home {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: #f0f0f0;
|
||||
padding: 10px;
|
||||
background-color: rgba(75, 75, 75, 1);
|
||||
border: 2px solid rgba(80, 80, 80, 1);
|
||||
|
|
@ -36,6 +40,8 @@ body {
|
|||
transition: 0.3s;
|
||||
margin-left: 25px;
|
||||
margin-right: -10px;
|
||||
user-select: none;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
|
|
@ -58,7 +64,7 @@ body {
|
|||
}
|
||||
|
||||
.welcome * {
|
||||
color: white;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
|
|
@ -80,35 +86,93 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
height: 75%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.tool-header {
|
||||
margin-bottom: 0;
|
||||
padding-top: 15px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#tool-div img {
|
||||
height: 200px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.visit-tool {
|
||||
padding: 10px 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 12px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
|
||||
background-color: rgb(60, 120, 85);
|
||||
color: white;
|
||||
color: #f0f0f0;
|
||||
border: 2px solid rgb(75, 135, 100);
|
||||
border-radius: 4px;
|
||||
margin-top: auto;
|
||||
margin-bottom: -10px;
|
||||
transition: 0.1s;
|
||||
font-weight: bolder;
|
||||
font-size: large;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.visit-tool:hover {
|
||||
background-color: rgb(75, 135, 100);
|
||||
border-color: rgb(90, 150, 115);
|
||||
}
|
||||
|
||||
|
||||
.slideshow-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.tool-image {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
top: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #f0f0f0;
|
||||
background-color: #747474;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.1s ease;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
scale: 1.01;
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
|
|||
82
theme.js
Normal file
82
theme.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
const themeToggle = document.getElementById('themeToggle');
|
||||
const topbar = document.getElementById('topbar')
|
||||
const toolContainer = document.getElementById('tool-div')
|
||||
const visit = document.getElementById('visit')
|
||||
const welcome = document.getElementById('welcome')
|
||||
const homeButton = document.getElementById('home')
|
||||
|
||||
let isLightMode = false;
|
||||
|
||||
themeToggle.addEventListener('click', function() {
|
||||
if (!isLightMode) {
|
||||
document.body.style.backgroundColor = '#C8C8C8';
|
||||
topbar.style.backgroundColor = "#B0B0B0";
|
||||
topbar.style.borderColor = "#aeaeae";
|
||||
|
||||
|
||||
home.style.backgroundColor = "#909090";
|
||||
home.style.borderColor = "#858585";
|
||||
|
||||
|
||||
toolContainer.style.backgroundColor = "#B0B0B0";
|
||||
toolContainer.style.borderColor = "#A5A5A5";
|
||||
isLightMode = true;
|
||||
|
||||
let children = toolContainer.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.color = "#1E1E1E";
|
||||
}
|
||||
|
||||
let welcomeChildren = welcome.querySelectorAll('*');
|
||||
for (let o = 0; o< welcomeChildren.length; o++) {
|
||||
welcomeChildren[o].style.color = "#1E1E1E";
|
||||
}
|
||||
|
||||
visit.style.backgroundColor = "#8CC8A5";
|
||||
visit.style.borderColor = "#A0DCB9";
|
||||
|
||||
themeToggle.innerHTML = `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V3C11 2.44772 11.4477 2 12 2Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L17.7071 7.70711C17.3166 8.09763 16.6834 8.09763 16.2929 7.70711C15.9024 7.31658 15.9024 6.68342 16.2929 6.29289L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 11.4477 18.4477 11 19 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H19C18.4477 13 18 12.5523 18 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 16.2929C16.6834 15.9024 17.3166 15.9024 17.7071 16.2929L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L16.2929 17.7071C15.9024 17.3166 15.9024 16.6834 16.2929 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C12.5523 18 13 18.4477 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.4477 11.4477 18 12 18Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 16.2929C8.09763 16.6834 8.09763 17.3166 7.70711 17.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.68342 4.29289 18.2929L6.29289 16.2929C6.68342 15.9024 7.31658 15.9024 7.70711 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H3C2.44772 13 2 12.5523 2 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#141414"></path>
|
||||
</g></svg>`;
|
||||
|
||||
} else {
|
||||
isLightMode = false;
|
||||
|
||||
document.body.style.backgroundColor = '#2a2a2a';
|
||||
|
||||
home.style.backgroundColor = "#4b4b4b";
|
||||
home.style.borderColor = "#505050";
|
||||
|
||||
let children = toolContainer.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.color = "#f0f0f0";
|
||||
}
|
||||
|
||||
let welcomeChildren = welcome.querySelectorAll('*');
|
||||
for (let o = 0; o< welcomeChildren.length; o++) {
|
||||
welcomeChildren[o].style.color = "#f0f0f0";
|
||||
}
|
||||
|
||||
topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)";
|
||||
|
||||
toolContainer.style.backgroundColor = "#4b4b4b";
|
||||
toolContainer.style.borderColor = "#505050";
|
||||
|
||||
visit.style.backgroundColor = "#3c7855";
|
||||
visit.style.borderColor = "#4b8764";
|
||||
|
||||
themeToggle.innerHTML = `<svg fill="#747474" height="24" width="24" 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: #000000;" 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>`;
|
||||
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue