Update index.html

index.html

@@ -8,9 +8,9 @@
 
   <style>
     :root{
-      /* HF-ish dark */
       --bg: #0b0f19;
       --panel: #0f1629;
+      --panel-highlight: #151d33;
       --border: rgba(255,255,255,.08);
       --text: rgba(255,255,255,.92);
       --muted: rgba(255,255,255,.70);
@@ -18,16 +18,29 @@
       --accent: #ffd21e;
     }
 
-    * { box-sizing: border-box; }
+    * {
+      box-sizing: border-box;
+    }
 
     body {
       margin: 0;
       padding: 28px 18px;
       background:
-        radial-gradient(1200px 600px at 50% -120px, rgba(255,210,30,.10), transparent 60%),
+        radial-gradient(
+          1200px 600px at 50% -120px,
+          rgba(255,210,30,.10),
+          transparent 60%
+        ),
         var(--bg);
       color: var(--text);
-      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        Segoe UI,
+        Roboto,
+        Arial,
+        sans-serif;
     }
 
     .container {
@@ -37,7 +50,11 @@
 
     .card {
       background:
-        linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
+        linear-gradient(
+          180deg,
+          rgba(255,255,255,.04),
+          transparent 40%
+        ),
         var(--panel);
       border: 1px solid var(--border);
       border-radius: 16px;
@@ -51,6 +68,12 @@
       letter-spacing: -0.5px;
     }
 
+    h2 {
+      margin: 0 0 6px;
+      font-size: 24px;
+      letter-spacing: -0.3px;
+    }
+
     .pill {
       display: inline-block;
       padding: 6px 10px;
@@ -74,6 +97,48 @@
       font-weight: 600;
     }
 
+    .install-section {
+      margin-top: 24px;
+      padding: 18px;
+      border-radius: 14px;
+      background:
+        linear-gradient(
+          180deg,
+          rgba(255,210,30,.06),
+          rgba(255,255,255,.015)
+        ),
+        var(--panel-highlight);
+      border: 1px solid rgba(255,210,30,.18);
+    }
+
+    .install-label {
+      display: inline-block;
+      margin-bottom: 8px;
+      color: var(--accent);
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: .6px;
+    }
+
+    .install-description {
+      margin: 0 0 14px;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.5;
+    }
+
+    .demos-heading {
+      margin: 28px 0 6px;
+      font-size: 26px;
+    }
+
+    .demos-description {
+      margin: 0 0 18px;
+      color: var(--muted);
+      font-size: 15px;
+    }
+
     .section {
       margin-top: 18px;
     }
@@ -122,19 +187,57 @@
 <body>
   <div class="container">
     <div class="card">
-      <div class="pill">Demo videos + source link</div>
+
+      <div class="pill">Installation guide + demo videos + source link</div>
 
       <h1>Nulla — Demo</h1>
 
       <p class="meta">
         <b>GitHub (download) Nulla v0.0.9:</b>
-        <a href="https://github.com/Tsoxer/nulla" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://github.com/Tsoxer/nulla"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           https://github.com/Tsoxer/nulla
         </a>
       </p>
 
+
+      <!-- Installation Guide -->
+      <div class="install-section">
+
+        <div class="install-label">Installation Guide</div>
+
+        <h2>How to Install Nulla v0.0.9</h2>
+
+        <p class="install-description">
+          Step-by-step installation guide for Nulla v0.0.9.
+        </p>
+
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/Zw-FMh60PLs"
+            title="How to Install Nulla v0.0.9"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen>
+          </iframe>
+        </div>
+
+      </div>
+
+
+      <!-- Demo Videos -->
+      <h2 class="demos-heading">Demo Videos</h2>
+
+      <p class="demos-description">
+        Version-specific demonstrations of Nulla.
+      </p>
+
+
       <div class="section">
         <p class="subtitle">v0.0.9</p>
+
         <div class="video-wrap">
           <iframe
             src="https://www.youtube-nocookie.com/embed/n8MNbeL-WNQ"
@@ -145,10 +248,13 @@
         </div>
       </div>
 
+
       <div class="divider"></div>
 
+
       <div class="section">
         <p class="subtitle">v0.0.8</p>
+
         <div class="video-wrap">
           <iframe
             src="https://www.youtube-nocookie.com/embed/sKnwlFnl7kk"
@@ -159,10 +265,13 @@
         </div>
       </div>
 
+
       <div class="divider"></div>
 
+
       <div class="section">
         <p class="subtitle">v0.0.7</p>
+
         <div class="video-wrap">
           <iframe
             src="https://www.youtube-nocookie.com/embed/OAvTm5ev9Ns"