justi
/
Parsell-Website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!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>