diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 276 |
1 files changed, 276 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..e083029 --- /dev/null +++ b/index.html @@ -0,0 +1,276 @@ +<!DOCTYPE html> +<html lang="en"><head> +<link rel="icon" type="image/jpeg" href="assets/favicon.jpg"> +<meta charset="UTF-8"> +<link rel="stylesheet" href="justifiedGallery.css"> +<title>FAGGOOTTTTT</title> +<style> + :root { + --pad: 1.5rem; + --gap: 24px; /* space between the page edge and the terminals: same on top and sides */ + --term-w: 100%; + --term-h: 80vh; + --term-overlay: rgba(55, 45, 65, 0.6); + --term-border: #1a3a4a; + } + + html, body { + margin: 0; + padding: 0; + background: rgb(2, 1, 3); + } + + body { + font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; + font-size: 14px; + color: #eee; + min-height: 100vh; + box-sizing: border-box; + padding: var(--gap); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 24px; + overflow-x: hidden; + } + + img { + max-width: 100%; + height: auto; + } + + a { + color: #6cf; + text-decoration: none; + transition: color 0.15s ease; + } + + a:hover { + color: #9df; + } + + /* both terminals share the exact same size and padding (top == left) */ + .terminal { + position: relative; + flex: 0 0 auto; + width: var(--term-w); + height: var(--term-h); + box-sizing: border-box; + padding: var(--pad); + border: 2px solid var(--term-border); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); + overflow: hidden; + } + + .faggif { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + max-width: none; + object-fit: fill; + z-index: 0; + pointer-events: none; + } + + .background-square { + position: absolute; + inset: 0; + background-color: var(--term-overlay); + z-index: 1; + pointer-events: none; + } + + .terminal-content { + position: relative; + z-index: 2; + height: 100%; + display: flex; + flex-direction: column; + min-height: 0; + } + + .prompt { + margin-bottom: 0.9rem; + white-space: nowrap; + } + .prompt .user { color: #fff; } + .prompt .path { color: #fff; } + + /* fastfetch layout */ + .fetch { + display: flex; + gap: 1.25rem; + align-items: flex-start; + } + + .logo { + flex: 0 0 auto; + width: min(40%, 60vh); + display: block; + } + + .info { + flex: 1; + min-width: 0; + line-height: 1.7; + } + + .terminal-content > .title { + margin-bottom: 0.9rem; + } + + .title { + font-size: 1.1rem; + font-weight: bold; + color: #fff; + } + + .sep { + color: #fff; + overflow: hidden; + white-space: nowrap; + margin-bottom: 0.4rem; + } + + .row { + display: flex; + gap: 0.6em; + overflow-wrap: anywhere; + } + + .key { + color: #fff; + font-weight: bold; + flex: 0 0 auto; + } + + .info a { + color: #fff; + text-decoration: underline; + text-underline-offset: 3px; + } + .info a:hover { + color: #bbb; + } + + .note { + color: #888; + margin-top: 0.6rem; + } + + .footer { + padding: var(--gap) 0; + text-align: center; + font-size: 12px; + color: #1f1c24; /* barely lighter than the page bg */ + user-select: none; + } + + /* image that sits between the terminals */ + .middle-img { + flex: 0 1 auto; + max-width: 220px; + align-self: center; + } +</style> +</head> +<body> + <script src="scripts/oneko.js" data-cat="assets/oneko.gif"></script> + + <div class="terminal"> + <img class="faggif" src="assets/fagotni.gif" alt="if you are seeing this something went horribly wrong"> + <div class="background-square"></div> + <div class="terminal-content"> + <div class="prompt"><span class="user">david@faggot-chan</span>:<span class="path">~</span>$ fastfetch</div> + <div class="fetch"> + <img class="logo" src="assets/bweeeeghg.jpg" alt=""> + <div class="info"> + <div class="title">FAGGOOTTTTT</div> + <div class="sep">---------------</div> + <div class="row"><span class="key">gf twitter</span><a href="https://x.com/FlatchestMoe">FlatchestMoe</a></div> + <div class="row"><span class="key">twitter</span><a href="https://x.com/david_eldios_8">david_eldios_8</a></div> + <div class="row"><span class="key">github</span><a href="https://github.com/davideldios7/">github/davideldios7</a></div> + <div class="row"><span class="key">git</span><a href="https://git.faggot-chan.online">git.faggot-chan</a></div> + <div class="row"><span class="key">jellyfin</span><a href="https://jelly.faggot-chan.online">jelly.faggot-chan</a></div> + <div id="status"></div> + </div> + </div> + </div> + </div> + + <img class="middle-img" src="assets/hiissssssss.png" alt=""> + + <div class="terminal"> + <div class="background-square"></div> + <div class="terminal-content"> + <div class="title">all my twitter bookmarks!!!!!</div> + <div id="gallery-container"> + <div id="gallery"></div> + </div> + <div class="note">(some aren't teto, i still have to cleanup and name them)</div> + </div> + </div> + <div class="footer">i vibecoded all of this</div> + + <dialog id="clickfunction"> + <div id="clickfunction-inner"> + <button id="clickfunction-close" aria-label="Close">×</button> + <img id="clickfunction-img" src="" alt=""> + <div id="clickfunction-desc"></div> + </div> + </dialog> +<script src="scripts/justifiedgallery.js"></script> +<script> +(async () => { + const box = document.getElementById('status'); + if (!box) return; + try { + const r = await fetch('status/status.json', { cache: 'no-store' }); + if (!r.ok) return; + const d = await r.json(); + const h = d.host; + + const row = (k, v) => { + const el = document.createElement('div'); + el.className = 'row'; + const a = document.createElement('span'); + a.className = 'key'; + a.textContent = k; + const b = document.createElement('span'); + b.textContent = v; + el.append(a, b); + box.append(el); + }; + + const sep = document.createElement('div'); + sep.className = 'sep'; + sep.textContent = '---------------'; + box.append(sep); + + const days = Math.floor(h.uptime / 86400); + const hrs = Math.floor((h.uptime % 86400) / 3600); + const mins = Math.floor((h.uptime % 3600) / 60); + row('uptime', days > 0 ? `${days}d ${hrs}h` : `${hrs}h ${mins}m`); + row('kernel', h.kernel); + row('memory', `${(h.mem_used_mib / 1024).toFixed(1)} / ${(h.mem_total_mib / 1024).toFixed(1)} GiB`); + row('disk', `${h.disk_used_gib} / ${h.disk_total_gib} GiB`); + + box.append(sep.cloneNode(true)); + for (const s of d.services) { + row(s.name, s.up ? (s.ms !== null ? `\u25CF ${s.ms}ms` : '\u25CF up') : '\u25CB down'); + } + + const age = Math.max(0, Math.round((Date.now() / 1000 - d.updated) / 60)); + const when = age < 60 ? `${age} min ago` : `${Math.floor(age / 60)}h ago`; + row('updated', age > 120 ? `${when} (stale)` : when); + } catch (e) { + /* no status.json yet: just don't show the rows */ + } +})(); +</script> + + + +</body></html> |