|
|
@@ -0,0 +1,159 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>Parsell Family</title>
|
|
|
+<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+PHJlY3Qgd2lkdGg9JzMyJyBoZWlnaHQ9JzMyJyByeD0nNycgZmlsbD0nIzFiMTgzMCcvPjxwYXRoIGQ9J00xNiA2IEwyNiAxNC41IEwyMy41IDE0LjUgTDIzLjUgMjUgTDE4LjUgMjUgTDE4LjUgMTguNSBMMTMuNSAxOC41IEwxMy41IDI1IEw4LjUgMjUgTDguNSAxNC41IEw2IDE0LjUgWicgZmlsbD0nI2ZmY2NiOCcvPjwvc3ZnPg==">
|
|
|
+<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
+<style>
|
|
|
+ * { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
+
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 1.5rem;
|
|
|
+ /* Layered: dark tint over the wave-pattern image so the frosted card has
|
|
|
+ reliable contrast regardless of which part of the pattern sits behind it.
|
|
|
+ background-tile.jpg is a 2x2 mirrored arrangement of the original — each
|
|
|
+ edge meets its own mirror, so the pattern tiles seamlessly. Displayed at
|
|
|
+ 960px so each mirror panel is 480px (the original tile size). */
|
|
|
+ background:
|
|
|
+ linear-gradient(rgba(20, 18, 32, 0.45), rgba(20, 18, 32, 0.45)),
|
|
|
+ url('/background.jpg') 0 0 / 960px repeat fixed;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* --- Frosted card --- */
|
|
|
+ .card {
|
|
|
+ max-width: 480px;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(255, 255, 255, 0.06);
|
|
|
+ backdrop-filter: blur(24px) saturate(160%);
|
|
|
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.12);
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 2.75rem 2.25rem;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow:
|
|
|
+ 0 14px 50px rgba(0, 0, 0, 0.4),
|
|
|
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 2.15rem;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ padding-bottom: 1.5rem;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #ffd9c8 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ }
|
|
|
+
|
|
|
+ .services {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 0.75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-btn {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 50%;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-btn:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
+ border-color: rgba(255, 255, 255, 0.28);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-btn .icon {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ background: rgba(255, 255, 255, 0.85);
|
|
|
+ mask: var(--mask) center / contain no-repeat;
|
|
|
+ -webkit-mask: var(--mask) center / contain no-repeat;
|
|
|
+ transition: background 0.15s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-btn:hover .icon {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Full-width hairline that forces a wrap, splitting the row into groups. */
|
|
|
+ .divider {
|
|
|
+ flex-basis: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ margin: 0.25rem 0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="card">
|
|
|
+ <h1>Parsell Family</h1>
|
|
|
+ <div class="services">
|
|
|
+ <a class="service-btn" href="https://mail.proton.me" title="Email" aria-label="Email">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/mail.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://watch.parsell.me" title="Media" aria-label="Media">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/circle-play.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://photos.parsell.me" title="Photos" aria-label="Photos">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/images.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://git.parsell.me" title="Git" aria-label="Git">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/git-branch.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://login.parsell.me" title="Sign in" aria-label="Sign in">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/key-round.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <a class="service-btn" href="http://server.parsell.internal" title="Server" aria-label="Server">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/server.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="http://dns.parsell.internal:5380" title="DNS" aria-label="DNS">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/network.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://crowdsec.parsell.me" title="CrowdSec" aria-label="CrowdSec">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/shield.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://adminer.parsell.me" title="Adminer" aria-label="Adminer">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/database.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <a class="service-btn" href="https://monitor.parsell.me" title="Monitor" aria-label="Monitor">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/activity.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://health.parsell.me" title="Health" aria-label="Health">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/heart-pulse.svg)"></span>
|
|
|
+ </a>
|
|
|
+ <a class="service-btn" href="https://media.parsell.me" title="Medialyze" aria-label="Medialyze">
|
|
|
+ <span class="icon" aria-hidden="true" style="--mask: url(https://cdn.jsdelivr.net/npm/lucide-static/icons/scan-search.svg)"></span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
