mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
remove some bullshit and change to vars
This commit is contained in:
zyqunix
parent
6316f390d7
commit
3631d57309
14 changed files with 90 additions and 510 deletions
|
|
@ -11,38 +11,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="topbar" class="topbar">
|
||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||
<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>
|
||||
|
||||
<div id="welcome" class="welcome">
|
||||
<h3 id="welcome-title">Welcome!</h3>
|
||||
<h4 id="welcome-description">This is a website for future tools. The source code can be found on my <a
|
||||
href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h4>
|
||||
<h4 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h4>
|
||||
<h4 id="welcome-future">More tools will come in the future.</h4>
|
||||
<select title="Change Language" name="Language" id="langauge-selector">
|
||||
<option value="en">English 🇬🇧</option>
|
||||
<option value="de">Deutsch 🇩🇪</option>
|
||||
</select>
|
||||
|
||||
<h6>why is this one so much worse than /projects T_T T_T T_T</h6>
|
||||
</div>
|
||||
|
||||
<div id="welcome" class="welcome">
|
||||
<h1 id="welcome-title">Welcome!</h1>
|
||||
<h2 id="welcome-description">This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
|
||||
<h3 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h3>
|
||||
<h3 id="welcome-future">More tools will come in the future.</h3>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="tools-main" id="toolsMain"></div>
|
||||
|
|
@ -56,4 +35,4 @@
|
|||
<script src="translate.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,59 +1,13 @@
|
|||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono';
|
||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
@import url(/global.css);
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c099ff;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
#motd {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 2vw;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
background-color: rgba(59, 59, 59, 0.885);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
font-size: large;
|
||||
top: 0;
|
||||
border-bottom: 1px solid rgba(70, 70, 70, 0.885);
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
|
@ -73,14 +27,9 @@ html {
|
|||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2.5vw;
|
||||
justify-content: center;
|
||||
min-height: 10vh;
|
||||
max-width: 80vw;
|
||||
margin-bottom: 100px;
|
||||
.cards {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-div {
|
||||
|
|
@ -98,18 +47,13 @@ html {
|
|||
max-width: 90vw;
|
||||
width: 50vw;
|
||||
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
|
||||
scale: 0.79;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
|
||||
.tool-header {
|
||||
margin-bottom: 0;
|
||||
padding-top: 15px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
margin: 5px;
|
||||
font-weight: normal;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
|
@ -117,24 +61,23 @@ html {
|
|||
.tool-media {
|
||||
max-width: 30vw;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
margin: 25px 10px;
|
||||
}
|
||||
|
||||
.visit-tool {
|
||||
padding: 10px 20px;
|
||||
background-color: rgb(40, 100, 65);
|
||||
color: #fff;
|
||||
color: var(--subtext1);
|
||||
border: 2px solid rgb(75, 135, 100);
|
||||
border-radius: 4px;
|
||||
transition: 0.1s;
|
||||
font-weight: bolder;
|
||||
font-size: large;
|
||||
margin: 5px 0 15px 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.visit-tool:hover {
|
||||
background-color: rgb(35, 95, 60);
|
||||
border-color: rgb(90, 150, 115);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.slideshow-container {
|
||||
|
|
@ -160,8 +103,12 @@ html {
|
|||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#langauge-selector, option {
|
||||
color: var(--surface0) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tools-main {
|
||||
.cards {
|
||||
max-width: 100%;
|
||||
gap: 1.5vw;
|
||||
}
|
||||
|
|
@ -174,7 +121,7 @@ html {
|
|||
}
|
||||
|
||||
.tool-header {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tool-desc {
|
||||
|
|
@ -199,7 +146,7 @@ html {
|
|||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
.cards {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@ function renderTools(filteredTools, language = 'en') {
|
|||
};
|
||||
|
||||
const toolItem = document.createElement("div");
|
||||
toolItem.className = "tool-div";
|
||||
toolItem.className = "cards";
|
||||
|
||||
toolItem.innerHTML = `
|
||||
<h1 class="tool-header">↬ ${toolData.name} ↫</h1>
|
||||
<h2 class="tool-subhead">${toolData.subheader}</h2>
|
||||
<h2 class="tool-desc">${toolData.description}</h2>
|
||||
<h3 class="tool-header">↬ ${toolData.name} ↫</h3>
|
||||
<h4 class="tool-subhead">${toolData.subheader}</h4>
|
||||
<h4 class="tool-desc">${toolData.description}</h4>
|
||||
<img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
|
||||
<a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue