honney/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

% scaling

Browse Source
This commit is contained in:
honney
2026-01-08 18:57:19 +01:00
parent b1bcd1ad2a
commit f7baeafd28
1 changed files with 229 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
home.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Website Launcher</title> <title>Website Launcher</title>
<style> <style>
:root { :root {
--bg: #0f1115; --bg: #0f1115;
@@ -11,285 +12,318 @@
--text: #e6e6eb; --text: #e6e6eb;
--muted: #9aa0aa; --muted: #9aa0aa;
--accent: #5da9ff; --accent: #5da9ff;
--radius: 16px; --radius: 1.2rem;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html { html,
body {
min-height: 100vh; min-height: 100vh;
background: var(--bg); background: var(--bg);
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh;
background: var(--bg);
display: flex; display: flex;
flex-direction: column; /* ← stack containers vertically */ flex-direction: column;
align-items: center; /* horizontal centering */ align-items: center;
justify-content: center; /* vertical centering of whole block */ justify-content: center;
gap: 48px; /* space between the two tables */
gap: 6vh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text); color: var(--text);
} }
/* ===== Containers ===== */
.container { .container {
width: 90%;
max-width: 1200px;
text-align: center; text-align: center;
padding: 24px;
} }
h1 { h1,
margin-bottom: 28px; .collapsible-grid summary {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 600; font-weight: 600;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-bottom: 3vh;
} }
/* ===== Grid ===== */
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(7, 1fr);
gap: 20px; gap: 3%;
max-width: 1000px;
justify-content: center; justify-content: center;
} }
/* Make summary look like your h1 */ /* ===== Collapsible ===== */
.collapsible-grid summary { .collapsible-grid summary {
font-size: 2rem; /* same as h1 */
font-weight: 600;
letter-spacing: 0.4px;
margin-bottom: 0px;
cursor: pointer; cursor: pointer;
color: var(--text); list-style: none;
list-style: none; /* remove default marker */ display: flex;
outline: none;
display: flex; /* to align text and arrow */
align-items: center; align-items: center;
justify-content: center; /* center title + arrow horizontally */ justify-content: center;
gap: 12px; /* space between text and arrow */ gap: 1%;
transition: color 0.2s; transition: color 0.2s ease;
} }
/* Custom arrow using pseudo-element */
.collapsible-grid summary::after { .collapsible-grid summary::after {
content: "▼"; /* down arrow by default */ content: "▼";
font-size: 1.2rem; font-size: 0.9em;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
/* Rotate arrow when expanded */
.collapsible-grid[open] summary::after { .collapsible-grid[open] summary::after {
transform: rotate(180deg); /* up arrow when open */ transform: rotate(180deg);
} }
.collapsible-grid summary:hover { .collapsible-grid summary:hover {
color: var(--accent); color: var(--accent);
} }
.ghost {
visibility: hidden;
}
/* ===== Tiles ===== */
.tile { .tile {
background: var(--card); background: var(--card);
border-radius: var(--radius); border-radius: var(--radius);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
padding: 20px 16px;
padding: 10% 6%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 14px; gap: 10%;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
} }
.tile:hover { .tile:hover {
background: var(--hover); background: var(--hover);
transform: translateY(-3px); transform: translateY(-4%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); box-shadow: 0 10% 30% rgba(0, 0, 0, 0.35);
} }
/* ===== Icons ===== */
.logo { .logo {
width: 56px; width: 70%;
height: 56px; height: 70%;
border-radius: 14px;
border-radius: 22%;
object-fit: contain; object-fit: contain;
background: #0b0d12; background: #0b0d12;
padding: 8px; padding: 8%;
} }
.label { .label {
font-size: 0.95rem; font-size: clamp(0.8rem, 1vw, 1rem);
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
} }
/* ===== Mobile tweak ===== */
@media (max-width: 600px) { @media (max-width: 600px) {
body { body {
padding: 24px; justify-content: flex-start;
padding-top: 4vh;
} }
.logo { .grid {
width: 48px; grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
height: 48px; gap: 5%;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <!-- ===== Own Websites ===== -->
<div class="container">
<h1>Own Websites</h1> <h1>Own Websites</h1>
<div class="grid"> <div class="grid">
<a class="tile" href="https://www.honney333.work/" target="_blank"> <a class="tile" href="https://www.honney333.work/" target="_blank">
<img src="https://www.honney333.work/static/themes/simple/img/favicon.png" alt="SearXNG" class="logo"> <img class="logo" src="https://www.honney333.work/static/themes/simple/img/favicon.png">
<div class="label">SearXNG</div> <div class="label">SearXNG</div>
</a> </a>
<a class="tile" href="http://192.168.1.1/" target="_blank"> <a class="tile" href="http://192.168.1.1/" target="_blank">
<img src="http://192.168.1.1/icon.svg" alt="FritzBox" class="logo"> <img class="logo" src="http://192.168.1.1/icon.svg">
<div class="label">FritzBox!</div> <div class="label">FritzBox!</div>
</a> </a>
<a class="tile" href="http://localhost:14564/" target="_blank"> <a class="tile" href="http://localhost:14564/" target="_blank">
<img src="http://localhost:14564/favicon.ico" alt="GoXLR" class="logo"> <img class="logo" src="http://localhost:14564/favicon.ico">
<div class="label">GoXLR</div> <div class="label">GoXLR</div>
</a> </a>
<a class="tile" href="http://192.168.1.22:30022/nginx/proxy" target="_blank"> <a class="tile" href="http://192.168.1.22:30022/nginx/proxy" target="_blank">
<img src="https://nginxproxymanager.com/logo.svg" alt="Nginx" class="logo"> <img class="logo" src="https://nginxproxymanager.com/logo.svg">
<div class="label">Nginx</div> <div class="label">Nginx</div>
</a> </a>
<a class="tile" href="https://192.168.1.22:30021" target="_blank"> <a class="tile" href="https://192.168.1.22:30021" target="_blank">
<img src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png" alt="TrueNAS" class="logo"> <img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
<div class="label">TrueNAS local</div> <div class="label">TrueNAS local</div>
</a> </a>
<a class="tile" href="https://nas.honney333.work" target="_blank"> <a class="tile" href="https://nas.honney333.work" target="_blank">
<img src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png" alt="TrueNAS" class="logo"> <img class="logo" src="https://www.truenas.com/wp-content/uploads/2020/08/cropped-TN-favicon-100x100.png">
<div class="label">TrueNAS net</div> <div class="label">TrueNAS net</div>
</a> </a>
<a class="tile" href="https://honney333.work/" target="_blank"> <a class="tile" href="https://honney333.work/" target="_blank">
<img src="https://honney333.work/favicon-32x32.png" alt="Homepage" class="logo"> <img class="logo" src="https://honney333.work/favicon-32x32.png">
<div class="label">Homepage</div> <div class="label">Homepage</div>
</a> </a>
</div> </div>
</div> </div>
<div class="container"> <!-- ===== WLED ===== -->
<div class="container">
<details class="collapsible-grid"> <details class="collapsible-grid">
<summary>WLED</summary> <summary>WLED</summary>
<div class="grid"> <div class="grid">
<div class="ghost"></div>
<div class="ghost"></div>
<a class="tile" href="http://192.168.1.209" target="_blank"> <a class="tile" href="http://192.168.1.209" target="_blank">
<img src="./wled.png" alt="Bett-Decke" class="logo"> <img class="logo" src="./wled.png">
<div class="label">Bett-Decke</div> <div class="label">Bett-Decke</div>
</a> </a>
<a class="tile" href="http://192.168.1.124" target="_blank"> <a class="tile" href="http://192.168.1.124" target="_blank">
<img src="./wled.png" alt="PC-Schrank" class="logo"> <img class="logo" src="./wled.png">
<div class="label">PC-Schrank</div> <div class="label">PC-Schrank</div>
</a> </a>
<a class="tile" href="http://192.168.1.200" target="_blank"> <a class="tile" href="http://192.168.1.200" target="_blank">
<img src="./wled.png" alt="PC-Decke" class="logo"> <img class="logo" src="./wled.png">
<div class="label">PC-Decke</div> <div class="label">PC-Decke</div>
</a> </a>
</div>
</div>
</div>
<div class="container"> </div>
</details>
</div>
<!-- ===== Frequently Used ===== -->
<div class="container">
<h1>Frequently Used Websites</h1> <h1>Frequently Used Websites</h1>
<div class="grid"> <div class="grid">
<a class="tile" href="https://www.github.com" target="_blank"> <a class="tile" href="https://www.github.com" target="_blank">
<img src="https://github.githubassets.com/favicons/favicon.svg" alt="GitHub" class="logo"> <img class="logo" src="https://github.githubassets.com/favicons/favicon.svg">
<div class="label">GitHub</div> <div class="label">GitHub</div>
</a> </a>
<a class="tile" href="https://www.youtube.com" target="_blank"> <a class="tile" href="https://www.youtube.com" target="_blank">
<img src="https://www.youtube.com/favicon.ico" alt="YouTube" class="logo"> <img class="logo" src="https://www.youtube.com/favicon.ico">
<div class="label">YouTube</div> <div class="label">YouTube</div>
</a> </a>
<a class="tile" href="https://www.crunchyroll.com" target="_blank"> <a class="tile" href="https://www.crunchyroll.com" target="_blank">
<img src="https://www.crunchyroll.com/build/assets/img/favicons/favicon-v2-96x96.png" alt="Crunchyroll" class="logo"> <img class="logo" src="https://www.crunchyroll.com/build/assets/img/favicons/favicon-v2-96x96.png">
<div class="label">Crunchyroll</div> <div class="label">Crunchyroll</div>
</a> </a>
<a class="tile" href="https://www.reddit.com" target="_blank"> <a class="tile" href="https://www.reddit.com" target="_blank">
<img src="https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png" alt="Reddit" class="logo"> <img class="logo" src="https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png">
<div class="label">Reddit</div> <div class="label">Reddit</div>
</a> </a>
<a class="tile" href="https://onedrive.live.com" target="_blank"> <a class="tile" href="https://onedrive.live.com" target="_blank">
<img src="https://onedrive.live.com/_layouts/15/images/odbfavicon.ico?rev=49" alt="Onedrive" class="logo"> <img class="logo" src="https://onedrive.live.com/_layouts/15/images/odbfavicon.ico">
<div class="label">Onedrive</div> <div class="label">Onedrive</div>
</a> </a>
<a class="tile" href="https://www.chatgpt.com" target="_blank"> <a class="tile" href="https://www.chatgpt.com" target="_blank">
<img src="https://chatgpt.com/cdn/assets/favicon-eex17e9e.ico" alt="ChatGPT" class="logo"> <img class="logo" src="https://chatgpt.com/cdn/assets/favicon-eex17e9e.ico">
<div class="label">ChatGPT</div> <div class="label">ChatGPT</div>
</a> </a>
<a class="tile" href="https://gemini.google.com/app" target="_blank"> <a class="tile" href="https://gemini.google.com/app" target="_blank">
<img src="https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg" alt="Gemini" class="logo"> <img class="logo" src="https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg">
<div class="label">Gemini</div> <div class="label">Gemini</div>
</a> </a>
</div> </div>
</div> </div>
<div class="container"> <!-- ===== Proton ===== -->
<div class="container">
<details class="collapsible-grid"> <details class="collapsible-grid">
<summary>Proton</summary> <summary>Proton</summary>
<div class="grid"> <div class="grid">
<div class="ghost"></div>
<div class="ghost"></div>
<a class="tile" href="https://mail.proton.me/u/1/inbox" target="_blank"> <a class="tile" href="https://mail.proton.me/u/1/inbox" target="_blank">
<img src="https://mail.proton.me/assets/favicon.ico" alt="Mail" class="logo"> <img class="logo" src="https://mail.proton.me/assets/favicon.ico">
<div class="label">Mail</div> <div class="label">Mail</div>
</a> </a>
<a class="tile" href="https://calendar.proton.me/u/1/" target="_blank"> <a class="tile" href="https://calendar.proton.me/u/1/" target="_blank">
<img src="https://calendar.proton.me/assets/favicon.ico" alt="Calendar" class="logo"> <img class="logo" src="https://calendar.proton.me/assets/favicon.ico">
<div class="label">Calendar</div> <div class="label">Calendar</div>
</a> </a>
<a class="tile" href="https://drive.proton.me/u/1" target="_blank"> <a class="tile" href="https://drive.proton.me/u/1" target="_blank">
<img src="https://drive.proton.me/assets/favicon.ico" alt="Drive" class="logo"> <img class="logo" src="https://drive.proton.me/assets/favicon.ico">
<div class="label">Drive</div> <div class="label">Drive</div>
</a> </a>
</div> </div>
</details> </details>
</div> </div>
<div class="container"> <!-- ===== TU Berlin ===== -->
<div class="container">
<h1>TU Berlin</h1> <h1>TU Berlin</h1>
<div class="grid"> <div class="grid">
<div class="ghost"></div>
<div class="ghost"></div>
<a class="tile" href="https://isis.tu-berlin.de/" target="_blank"> <a class="tile" href="https://isis.tu-berlin.de/" target="_blank">
<img src="https://isis.tu-berlin.de/theme/nephthys/pix/favicon-96x96.png" alt="Isis" class="logo"> <img class="logo" src="https://isis.tu-berlin.de/theme/nephthys/pix/favicon-96x96.png">
<div class="label">Isis</div> <div class="label">ISIS</div>
</a> </a>
<a class="tile" href="https://moseskonto.tu-berlin.de/moses/index.html" target="_blank"> <a class="tile" href="https://moseskonto.tu-berlin.de/moses/index.html" target="_blank">
<img src="https://moseskonto.tu-berlin.de/moses/docs/images/favicon/apple-touch-icon.png" alt="Moses" class="logo"> <img class="logo" src="https://moseskonto.tu-berlin.de/moses/docs/images/favicon/apple-touch-icon.png">
<div class="label">Moses</div> <div class="label">Moses</div>
</a> </a>
<a class="tile" href="https://git.tu-berlin.de" target="_blank"> <a class="tile" href="https://git.tu-berlin.de" target="_blank">
<img src="https://git.tu-berlin.de/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png" alt="Git" class="logo"> <img class="logo" src="https://git.tu-berlin.de/assets/apple-touch-icon-b049d4bc0dd9626f31db825d61880737befc7835982586d015bded10b4435460.png">
<div class="label">Git</div> <div class="label">Git</div>
</a> </a>
</div> </div>
</div> </div>
</body> </body>
</html> </html>