<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>shirishsir.online</title>
  <meta name="description" content="shirishsir.online — a small corner for learning & tinkering." />
  <meta name="theme-color" content="#0b0f17" />

  <meta property="og:title" content="shirishsir.online" />
  <meta property="og:description" content="A small corner for learning & tinkering." />
  <meta property="og:type" content="website" />

  <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=Cinzel:wght@500;700;900&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

  <style>
    :root{
      --bg0:#070a12;
      --bg1:#0b0f17;
      --text: rgba(255,255,255,.90);
      --muted: rgba(255,255,255,.68);
      --muted2: rgba(255,255,255,.55);
      --stroke: rgba(255,255,255,.12);
      --shadow: 0 20px 80px rgba(0,0,0,.45);
      --radius: 26px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

    body{
      margin:0;
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 800px at 20% 20%, rgba(154,215,255,.10), transparent 55%),
                  radial-gradient(900px 700px at 80% 25%, rgba(216,180,254,.10), transparent 55%),
                  radial-gradient(900px 700px at 60% 85%, rgba(127,255,212,.08), transparent 60%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow:hidden;
    }

    #stars{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:0;
      opacity:.85;
      pointer-events:none;
    }

    .orb{
      position:fixed;
      width:520px;
      height:520px;
      filter: blur(50px);
      opacity:.18;
      border-radius:999px;
      z-index:0;
      pointer-events:none;
      transform: translate3d(0,0,0);
      animation: drift 14s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    .orb.one{
      left:-140px; top:-120px;
      background: radial-gradient(circle at 30% 30%, rgba(154,215,255,.95), transparent 60%);
      animation-duration: 16s;
    }
    .orb.two{
      right:-160px; top: -80px;
      background: radial-gradient(circle at 30% 30%, rgba(216,180,254,.95), transparent 60%);
      animation-duration: 18s;
      animation-delay: -4s;
    }
    .orb.three{
      left: 20%; bottom:-220px;
      background: radial-gradient(circle at 30% 30%, rgba(127,255,212,.90), transparent 60%);
      animation-duration: 20s;
      animation-delay: -7s;
    }

    @keyframes drift{
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(40px, -30px) scale(1.04); }
    }

    .noise{
      position:fixed;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:.07;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    .wrap{
      position:relative;
      z-index:2;
      min-height:100%;
      display:grid;
      place-items:center;
      padding: 28px 18px;
    }

    .card{
      width:min(980px, 92vw);
      padding: 28px 26px 22px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      position:relative;
      overflow:hidden;
    }

    .card::before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 240px at 25% 0%, rgba(154,215,255,.16), transparent 60%),
                  radial-gradient(520px 240px at 78% 5%, rgba(216,180,254,.14), transparent 65%),
                  radial-gradient(520px 240px at 50% 100%, rgba(127,255,212,.10), transparent 65%);
      pointer-events:none;
    }

    .domain{
      margin: 6px 0 10px;
      font-family: Cinzel, ui-serif, Georgia, "Times New Roman", serif;
      text-align:center;
      font-weight: 900;
      letter-spacing: .5px;
      line-height: 1.05;
      font-size: clamp(44px, 7.2vw, 92px);
      cursor: pointer;
      position:relative;
      z-index:2;

      background: linear-gradient(90deg, rgba(154,215,255,.95), rgba(216,180,254,.92), rgba(127,255,212,.92));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 32px rgba(255,255,255,.10);
      transition: transform .18s ease, filter .18s ease;
    }
    .domain:active{ transform: scale(.99); }
    .domain:hover{ filter: drop-shadow(0 0 22px rgba(154,215,255,.12)); }

    .tagline{
      margin: 0 0 16px;
      text-align:center;
      color: var(--muted);
      font-size: clamp(14px, 2.2vw, 18px);
      position:relative;
      z-index:2;
    }

    .info{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 14px 0 16px;
      position:relative;
      z-index:2;
    }

    .pill{
      border-radius: 16px;
      padding: 12px 12px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 10px;
      min-height: 46px;
    }

    .pill .k{
      color: var(--muted2);
      font-size: 12px;
      letter-spacing: .25px;
      white-space:nowrap;
    }

    .pill .v{
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.90);
      font-size: 14px;
      font-weight: 600;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    button.pill{
      cursor:pointer;
      font: inherit;
      text-align:left;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    button.pill:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.14);
      transform: translateY(-1px);
    }
    button.pill:active{ transform: translateY(0); }

    .quote{
      margin: 8px auto 6px;
      max-width: 820px;
      text-align:center;
      position:relative;
      z-index:2;
      padding: 14px 14px 10px;
      border-radius: 18px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.09);
    }
    blockquote{
      margin: 0;
      font-size: clamp(14px, 2.1vw, 18px);
      color: rgba(255,255,255,.86);
      line-height: 1.45;
    }
    figcaption{
      margin-top: 10px;
      color: var(--muted2);
      font-size: 13px;
    }

    .toast{
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%) translateY(16px);
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.90);
      font-size: 13px;
      opacity: 0;
      pointer-events:none;
      z-index: 5;
      transition: opacity .18s ease, transform .18s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .toast.show{
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 720px){
      .info{ grid-template-columns: 1fr; }
      .card{ padding: 22px 18px 18px; }
    }

    @media (prefers-reduced-motion: reduce){
      .orb{ animation:none; }
      #stars{ display:none; }
      button.pill, .domain{ transition:none; }
    }
  </style>
</head>

<body>
  <canvas id="stars" aria-hidden="true"></canvas>
  <div class="orb one" aria-hidden="true"></div>
  <div class="orb two" aria-hidden="true"></div>
  <div class="orb three" aria-hidden="true"></div>
  <div class="noise" aria-hidden="true"></div>

  <main class="wrap">
    <section class="card" aria-label="Landing page">
      <h1 class="domain" id="domain" title="Click to copy">shirishsir.online</h1>
      <p class="tagline" id="tagline">A small corner for learning &amp; tinkering.</p>

      <div class="info" role="group" aria-label="Live info">
        <div class="pill">
          <span class="k">Local time</span>
          <span class="v" id="localTime">--:--:--</span>
        </div>
        <div class="pill">
          <span class="k">Sydney time</span>
          <span class="v" id="sydneyTime">--:--:--</span>
        </div>
        <button class="pill" id="copyBtn" type="button" aria-label="Copy domain to clipboard">
          <span class="k">Copy</span>
          <span class="v">shirishsir.online</span>
        </button>
      </div>

      <div class="info" style="margin-top:10px;">
        <div class="pill">
          <span class="k">Your timezone</span>
          <span class="v" id="tz">—</span>
        </div>
        <div class="pill">
          <span class="k">Today</span>
          <span class="v" id="today">—</span>
        </div>
        <div class="pill">
          <span class="k">Status</span>
          <span class="v">Coming soon</span>
        </div>
      </div>

      <figure class="quote" aria-label="Quote">
        <blockquote id="quoteText">—</blockquote>
        <figcaption id="quoteBy">—</figcaption>
      </figure>
    </section>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite">Copied!</div>

  <script>
    const QUOTES = [
      { text: "We know what we are, but know not what we may be.", by: "William Shakespeare — Hamlet" },
      { text: "All the world's a stage, and all the men and women merely players.", by: "William Shakespeare — As You Like It" },
      { text: "The mind is its own place, and in itself can make a heaven of hell, a hell of heaven.", by: "John Milton — Paradise Lost" },
      { text: "Knowledge is power.", by: "Francis Bacon — Meditationes Sacrae" },
      { text: "Education is the most powerful weapon which you can use to change the world.", by: "Nelson Mandela" },
      { text: "The beautiful thing about learning is that no one can take it away from you.", by: "B.B. King" },
      { text: "Success is not final, failure is not fatal: it is the courage to continue that counts.", by: "Winston Churchill" },
      { text: "The only way to achieve the impossible is to believe it is possible.", by: "Charles Kingsleigh (Alice in Wonderland, paraphrased from Lewis Carroll themes)" },
      { text: "The expert in anything was once a beginner.", by: "Helen Hayes" },
      { text: "There is no substitute for hard work.", by: "Thomas Edison" },
      { text: "It does not matter how slowly you go as long as you do not stop.", by: "Confucius" },
      { text: "Genius is 1% inspiration and 99% perspiration.", by: "Thomas Edison" },
      { text: "The future belongs to those who believe in the beauty of their dreams.", by: "Eleanor Roosevelt" },
      { text: "Hardships often prepare ordinary people for an extraordinary destiny.", by: "C.S. Lewis" },
      { text: "If you can dream it, you can do it.", by: "Walt Disney" },
      { text: "Learning never exhausts the mind.", by: "Leonardo da Vinci" },
      { text: "The secret of getting ahead is getting started.", by: "Mark Twain" },
      { text: "Whether you think you can or think you can’t, you’re right.", by: "Henry Ford" },
      { text: "The man who moves a mountain begins by carrying away small stones.", by: "Confucius" }

    ];

    function pickQuote(){
      const q = QUOTES[Math.floor(Math.random() * QUOTES.length)];
      document.getElementById("quoteText").textContent = "“" + q.text + "”";
      document.getElementById("quoteBy").textContent = "— " + q.by;
    }

    const fmtTime = (date, timeZone) => new Intl.DateTimeFormat(undefined, {
      hour: "2-digit", minute: "2-digit", second: "2-digit",
      hour12: false,
      timeZone
    }).format(date);

    const fmtDate = (date, timeZone) => new Intl.DateTimeFormat(undefined, {
      weekday: "long", year: "numeric", month: "short", day: "2-digit",
      timeZone
    }).format(date);

    function updateClocks(){
      const now = new Date();
      document.getElementById("localTime").textContent = fmtTime(now);
      document.getElementById("sydneyTime").textContent = fmtTime(now, "Australia/Sydney");
      document.getElementById("today").textContent = fmtDate(now);
    }

    const domain = "shirishsir.online";
    const toast = document.getElementById("toast");

    function showToast(msg){
      toast.textContent = msg;
      toast.classList.add("show");
      clearTimeout(showToast._t);
      showToast._t = setTimeout(() => toast.classList.remove("show"), 1300);
    }

    async function copyDomain(){
      try{
        await navigator.clipboard.writeText(domain);
        showToast("Copied: " + domain);
      }catch{
        const ta = document.createElement("textarea");
        ta.value = domain;
        ta.style.position = "fixed";
        ta.style.left = "-9999px";
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
        showToast("Copied: " + domain);
      }
    }

    document.getElementById("copyBtn").addEventListener("click", copyDomain);
    document.getElementById("domain").addEventListener("click", copyDomain);

    document.getElementById("tz").textContent =
      Intl.DateTimeFormat().resolvedOptions().timeZone || "Local";

    // Starfield
    const canvas = document.getElementById("stars");
    const ctx = canvas.getContext("2d", { alpha: true });

    let w, h, dpr;
    function resize(){
      dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
      w = canvas.width = Math.floor(window.innerWidth * dpr);
      h = canvas.height = Math.floor(window.innerHeight * dpr);
      canvas.style.width = window.innerWidth + "px";
      canvas.style.height = window.innerHeight + "px";
    }
    window.addEventListener("resize", resize);
    resize();

    const STAR_COUNT = 90;
    const stars = Array.from({length: STAR_COUNT}, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      r: (Math.random() * 1.2 + 0.3) * dpr,
      v: (Math.random() * 0.28 + 0.06) * dpr,
      a: Math.random() * 0.6 + 0.2
    }));

    function tick(){
      ctx.clearRect(0, 0, w, h);

      for (const s of stars){
        s.y += s.v;
        if (s.y > h + 10) { s.y = -10; s.x = Math.random() * w; }

        ctx.globalAlpha = s.a;
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(255,255,255,1)";
        ctx.fill();
      }
      ctx.globalAlpha = 1;

      requestAnimationFrame(tick);
    }

    pickQuote();
    updateClocks();
    setInterval(updateClocks, 1000);

    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches){
      requestAnimationFrame(tick);
    }
  </script>
</body>
</html>