335 lines
8.9 KiB
HTML
335 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Website Launcher</title>
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #0f1115;
|
|
--card: #171a21;
|
|
--hover: #1f2430;
|
|
--text: #e6e6eb;
|
|
--muted: #9aa0aa;
|
|
--accent: #5da9ff;
|
|
--radius: 1.2rem;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
gap: 6vh;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ===== Containers ===== */
|
|
|
|
.container {
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
text-align: center;
|
|
}
|
|
|
|
h1,
|
|
.collapsible-grid summary {
|
|
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
|
|
font-weight: 600;
|
|
letter-spacing: 0.4px;
|
|
margin-bottom: 3vh;
|
|
}
|
|
|
|
/* ===== Grid ===== */
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 3%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ===== Collapsible ===== */
|
|
|
|
.collapsible-grid summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1%;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.collapsible-grid summary::after {
|
|
content: "▼";
|
|
font-size: 0.9em;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.collapsible-grid[open] summary::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.collapsible-grid summary:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.ghost {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/* ===== Tiles ===== */
|
|
|
|
.tile {
|
|
background: var(--card);
|
|
border-radius: var(--radius);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
padding: 10% 6%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10%;
|
|
|
|
transition:
|
|
transform 0.15s ease,
|
|
box-shadow 0.15s ease,
|
|
background 0.15s ease;
|
|
}
|
|
|
|
.tile:hover {
|
|
background: var(--hover);
|
|
transform: translateY(-4%);
|
|
box-shadow: 0 10% 30% rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/* ===== Icons ===== */
|
|
|
|
.logo {
|
|
width: 70%;
|
|
height: 70%;
|
|
|
|
border-radius: 22%;
|
|
object-fit: contain;
|
|
|
|
background: #0b0d12;
|
|
padding: 8%;
|
|
}
|
|
|
|
.label {
|
|
font-size: clamp(0.8rem, 1vw, 1rem);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== Mobile tweak ===== */
|
|
|
|
@media (max-width: 600px) {
|
|
body {
|
|
justify-content: flex-start;
|
|
padding-top: 4vh;
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
|
|
gap: 5%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ===== Own Websites ===== -->
|
|
<div class="container">
|
|
<h1>Own Websites</h1>
|
|
<div class="grid">
|
|
|
|
<a class="tile" href="https://www.honney333.work/" target="_blank">
|
|
<img class="logo" src="https://www.honney333.work/static/themes/simple/img/favicon.png">
|
|
<div class="label">SearXNG</div>
|
|
</a>
|
|
|
|
<a class="tile" href="http://192.168.1.1/" target="_blank">
|
|
<img class="logo" src="http://192.168.1.1/icon.svg">
|
|
<div class="label">FritzBox!</div>
|
|
</a>
|
|
|
|
<a class="tile" href="http://localhost:14564/" target="_blank">
|
|
<img class="logo" src="http://localhost:14564/favicon.ico">
|
|
<div class="label">GoXLR</div>
|
|
</a>
|
|
|
|
<a class="tile" href="http://192.168.1.22:30022/nginx/proxy" target="_blank">
|
|
<img class="logo" src="https://nginxproxymanager.com/logo.svg">
|
|
<div class="label">Nginx</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://192.168.1.22:30021" target="_blank">
|
|
<img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
|
|
<div class="label">TrueNAS local</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://nas.honney333.work" target="_blank">
|
|
<img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
|
|
<div class="label">TrueNAS net</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://honney333.work/" target="_blank">
|
|
<img class="logo" src="https://honney333.work/favicon-32x32.png">
|
|
<div class="label">Homepage</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://v8-5.foldingathome.org/machines" target="_blank">
|
|
<img class="logo" src="https://foldingathome.org/wp-content/uploads/2016/09/cropped-folding-at-home-logo-1-300x300.png">
|
|
<div class="label">Folding@Home</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== WLED ===== -->
|
|
<div class="container">
|
|
<details class="collapsible-grid">
|
|
<summary>WLED</summary>
|
|
<div class="grid">
|
|
|
|
<div class="ghost"></div>
|
|
<div class="ghost"></div>
|
|
|
|
<a class="tile" href="http://192.168.1.209" target="_blank">
|
|
<img class="logo" src="./wled.png">
|
|
<div class="label">Bett-Decke</div>
|
|
</a>
|
|
|
|
<a class="tile" href="http://192.168.1.124" target="_blank">
|
|
<img class="logo" src="./wled.png">
|
|
<div class="label">PC-Schrank</div>
|
|
</a>
|
|
|
|
<a class="tile" href="http://192.168.1.200" target="_blank">
|
|
<img class="logo" src="./wled.png">
|
|
<div class="label">PC-Decke</div>
|
|
</a>
|
|
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- ===== Frequently Used ===== -->
|
|
<div class="container">
|
|
<h1>Frequently Used Websites</h1>
|
|
<div class="grid">
|
|
|
|
<a class="tile" href="https://www.github.com" target="_blank">
|
|
<img class="logo" src="https://github.githubassets.com/favicons/favicon.svg">
|
|
<div class="label">GitHub</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://www.youtube.com" target="_blank">
|
|
<img class="logo" src="https://www.youtube.com/favicon.ico">
|
|
<div class="label">YouTube</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://www.crunchyroll.com" target="_blank">
|
|
<img class="logo" src="https://www.crunchyroll.com/build/assets/img/favicons/favicon-v2-96x96.png">
|
|
<div class="label">Crunchyroll</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://www.reddit.com" target="_blank">
|
|
<img class="logo" src="https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png">
|
|
<div class="label">Reddit</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://onedrive.live.com" target="_blank">
|
|
<img class="logo" src="https://onedrive.live.com/_layouts/15/images/odbfavicon.ico">
|
|
<div class="label">Onedrive</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://www.chatgpt.com" target="_blank">
|
|
<img class="logo" src="https://chatgpt.com/cdn/assets/favicon-eex17e9e.ico">
|
|
<div class="label">ChatGPT</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://gemini.google.com/app" target="_blank">
|
|
<img class="logo" src="https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg">
|
|
<div class="label">Gemini</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== Proton ===== -->
|
|
<div class="container">
|
|
<details class="collapsible-grid">
|
|
<summary>Proton</summary>
|
|
<div class="grid">
|
|
|
|
<div class="ghost"></div>
|
|
<div class="ghost"></div>
|
|
|
|
<a class="tile" href="https://mail.proton.me/u/1/inbox" target="_blank">
|
|
<img class="logo" src="https://mail.proton.me/assets/favicon.ico">
|
|
<div class="label">Mail</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://calendar.proton.me/u/1/" target="_blank">
|
|
<img class="logo" src="https://calendar.proton.me/assets/favicon.ico">
|
|
<div class="label">Calendar</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://drive.proton.me/u/1" target="_blank">
|
|
<img class="logo" src="https://drive.proton.me/assets/favicon.ico">
|
|
<div class="label">Drive</div>
|
|
</a>
|
|
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- ===== TU Berlin ===== -->
|
|
<div class="container">
|
|
<h1>TU Berlin</h1>
|
|
<div class="grid">
|
|
|
|
<div class="ghost"></div>
|
|
<div class="ghost"></div>
|
|
|
|
<a class="tile" href="https://isis.tu-berlin.de/" target="_blank">
|
|
<img class="logo" src="https://isis.tu-berlin.de/theme/nephthys/pix/favicon-96x96.png">
|
|
<div class="label">ISIS</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://moseskonto.tu-berlin.de/moses/index.html" target="_blank">
|
|
<img class="logo" src="https://moseskonto.tu-berlin.de/moses/docs/images/favicon/apple-touch-icon.png">
|
|
<div class="label">Moses</div>
|
|
</a>
|
|
|
|
<a class="tile" href="https://git.tu-berlin.de" target="_blank">
|
|
<img class="logo" src="https://git.tu-berlin.de/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png">
|
|
<div class="label">Git</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|