Polish hello world landing page

2026-07-21 22:21:01 +00:00
parent 9a399f7980
commit d07156d1fa
1 changed files with 120 additions and 2 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -3,10 +3,128 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#f3efe7">
    <title>Hello from Minikube</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        color: #1c2925;
+        background: #f3efe7;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        min-height: 100svh;
+        margin: 0;
+        display: grid;
+        place-items: center;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 15% 20%, rgba(248, 166, 127, 0.32), transparent 30rem),
+          radial-gradient(circle at 85% 80%, rgba(91, 153, 129, 0.28), transparent 32rem),
+          #f3efe7;
+      }
+
+      main {
+        position: relative;
+        width: min(90vw, 760px);
+        padding: clamp(2.25rem, 7vw, 5rem);
+        border: 1px solid rgba(28, 41, 37, 0.12);
+        border-radius: 2rem;
+        background: rgba(255, 255, 255, 0.52);
+        box-shadow: 0 2rem 6rem rgba(54, 68, 60, 0.12);
+        backdrop-filter: blur(20px);
+      }
+
+      .eyebrow {
+        display: flex;
+        align-items: center;
+        gap: 0.65rem;
+        margin: 0 0 2rem;
+        color: #53645e;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+
+      .dot {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        background: #3d8b70;
+        box-shadow: 0 0 0 0.35rem rgba(61, 139, 112, 0.13);
+        animation: breathe 2.4s ease-in-out infinite;
+      }
+
+      h1 {
+        max-width: 8ch;
+        margin: 0;
+        font-family: Georgia, "Times New Roman", serif;
+        font-size: clamp(4rem, 14vw, 8.5rem);
+        font-weight: 400;
+        letter-spacing: -0.07em;
+        line-height: 0.82;
+      }
+
+      h1 span {
+        color: #e86f48;
+      }
+
+      .description {
+        max-width: 38rem;
+        margin: 2.25rem 0 0;
+        color: #53645e;
+        font-size: clamp(1rem, 2.5vw, 1.15rem);
+        line-height: 1.65;
+      }
+
+      .tag {
+        display: inline-flex;
+        margin-top: 2rem;
+        padding: 0.65rem 0.9rem;
+        border-radius: 999px;
+        color: #335c4e;
+        background: rgba(61, 139, 112, 0.1);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 0.78rem;
+      }
+
+      .spark {
+        position: absolute;
+        top: clamp(1.5rem, 4vw, 2.5rem);
+        right: clamp(1.5rem, 4vw, 2.5rem);
+        color: #e86f48;
+        font-size: 2rem;
+        line-height: 1;
+        animation: turn 12s linear infinite;
+      }
+
+      @keyframes breathe {
+        50% { transform: scale(0.72); opacity: 0.7; }
+      }
+
+      @keyframes turn {
+        to { transform: rotate(360deg); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .dot,
+        .spark { animation: none; }
+      }
+    </style>
  </head>
  <body>
-    <h1>Hello, world!!</h1>
-    <p>Served by NGINX on Minikube from the direct PVC src mount.</p>
+    <main>
+      <p class="eyebrow"><span class="dot" aria-hidden="true"></span> System online</p>
+      <h1>Hello,<br><span>world!</span></h1>
+      <p class="description">A tiny page with a little more warmth — served by NGINX on Minikube from the direct PVC source mount.</p>
+      <span class="tag">minikube / nginx</span>
+      <span class="spark" aria-hidden="true">✦</span>
+    </main>
  </body>
 </html>