Update index.html

Author: AionSystem

index.html

@@ -88,10 +88,34 @@
 .cta-arrow { font-size: 14px; transition: transform 0.2s; }
 .cta-btn:hover .cta-arrow { transform: translateX(4px); }
 
-.hero-status { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--border); opacity: 0; animation: fadeIn 0.8s var(--ease) 1.1s forwards; }
-.status-item { display: flex; flex-direction: column; gap: 4px; }
-.status-val { font-family: var(--mono); font-size: 22px; color: var(--amber); letter-spacing: 1px; }
-.status-key { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
+/* ── TRIPLE TIME DISPLAY ── */
+.triple-time {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 1px; background: var(--border);
+  border: 1px solid var(--border);
+  margin-top: 60px; padding-top: 0;
+  border-top: none;
+  opacity: 0; animation: fadeIn 0.8s var(--ease) 1.1s forwards;
+  position: relative;
+}
+.triple-time::before {
+  content: ''; position: absolute; top: -32px; left: 0; right: 0;
+  height: 1px; background: var(--border);
+}
+.time-cell {
+  background: var(--bg); padding: 18px 20px; transition: background 0.2s;
+}
+.time-cell:hover { background: var(--surface); }
+.time-sys {
+  font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
+  color: var(--amber-d); text-transform: uppercase; margin-bottom: 6px;
+}
+.time-val {
+  font-family: var(--mono); font-size: 14px; color: var(--amber);
+  letter-spacing: 1px; line-height: 1.3; min-height: 36px;
+  display: flex; align-items: center;
+}
+.time-val.loading { color: var(--dim); font-size: 11px; }
 
 section { position: relative; z-index: 1; padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
 .section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
@@ -144,7 +168,6 @@
 .work-card-coming { opacity: 0.4; pointer-events: none; }
 .coming-pill { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); border: 1px solid var(--dim); padding: 2px 8px; text-transform: uppercase; margin-top: 12px; }
 
-/* Accent border per domain */
 .work-card.live-field  { border-left: 2px solid var(--cyan); }
 .work-card.live-edu    { border-left: 2px solid var(--edu); }
 
@@ -160,6 +183,18 @@
 .m-mod     { background: rgba(240,165,0,0.1); color: var(--amber); border: 1px solid var(--amber-d); }
 .m-nascent { background: rgba(64,196,255,0.08); color: #40c4ff; border: 1px solid #1a4a5a; }
 
+/* Stack path link */
+.stack-path {
+  display: flex; align-items: flex-start; gap: 14px;
+  padding: 16px 20px; background: var(--bg);
+  border: 1px solid var(--border); text-decoration: none;
+  transition: border-color 0.2s, background 0.2s; margin-top: 20px;
+}
+.stack-path:hover { border-color: var(--amber); background: var(--surface); }
+.stack-path-icon { font-size: 18px; flex-shrink: 0; padding-top: 2px; }
+.stack-path-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--amber); text-transform: uppercase; margin-bottom: 3px; }
+.stack-path-desc { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--muted); }
+
 .certify-strip { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 32px 36px; display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
 .certify-strip svg { flex-shrink: 0; }
 .certify-text h3 { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
@@ -183,7 +218,7 @@
   .hero { padding: 80px 20px 60px; }
   section { padding: 60px 20px; }
   footer { padding: 32px 20px; }
-  .hero-status { gap: 20px; }
+  .triple-time { grid-template-columns: 1fr; }
   .services-grid { grid-template-columns: 1fr; }
 }
 </style>
@@ -217,12 +252,21 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
     <a href="/services/" class="cta-btn"><span>Engage Services</span><span class="cta-arrow">→</span></a>
     <a href="/certify/" class="cta-btn"><span>Verify a Certification</span><span class="cta-arrow">→</span></a>
   </div>
-  <div class="hero-status">
-    <div class="status-item"><span class="status-val">AION v3.0</span><span class="status-key">Constitutional Stack</span></div>
-    <div class="status-item"><span class="status-val">STP v2.0</span><span class="status-key">Trace Protocol</span></div>
-    <div class="status-item"><span class="status-val">17+</span><span class="status-key">Frameworks Deployed</span></div>
-    <div class="status-item"><span class="status-val">LEDGER-011</span><span class="status-key">Current Seal</span></div>
-    <div class="status-item"><span class="status-val">Mar 2026</span><span class="status-key">Active Build</span></div>
+
+  <!-- TRIPLE TIME DISPLAY -->
+  <div class="triple-time" style="margin-top:60px;">
+    <div class="time-cell">
+      <div class="time-sys">Gregorian</div>
+      <div class="time-val" id="tt-gregorian">—</div>
+    </div>
+    <div class="time-cell">
+      <div class="time-sys">13 Moon · Dreamspell</div>
+      <div class="time-val" id="tt-dreamspell">—</div>
+    </div>
+    <div class="time-cell">
+      <div class="time-sys">Hebrew Calendar</div>
+      <div class="time-val" id="tt-hebrew">—</div>
+    </div>
   </div>
 </div>
 
@@ -395,9 +439,18 @@ <h2 class="section-title">The AION Stack</h2>
       <tr><td class="fw-name">EIGHT LAWS</td><td class="fw-version">v1.0</td><td class="fw-function">Sovereignty Stack — Laws 1-8 active · Law 9 dark by design</td><td><span class="convergence-badge m-mod">CONSTITUTIONAL</span></td></tr>
     </tbody>
   </table>
-  <div style="margin-top:16px; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px;">
+  <div style="margin-top:16px; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; margin-bottom:4px;">
     M-STRONG: validated · M-MODERATE: tested · M-NASCENT: specified, building · CONSTITUTIONAL: foundational
   </div>
+
+  <!-- Stack path -->
+  <a href="/stack/" class="stack-path">
+    <span class="stack-path-icon">◈</span>
+    <div>
+      <div class="stack-path-label">Full Stack Documentation →</div>
+      <div class="stack-path-desc">All 17 frameworks. Version history. Convergence records. FCL entries. Protocol I registrations. The complete AION Constitutional Stack in one place.</div>
+    </div>
+  </a>
 </section>
 
 <!-- CERTIFICATION -->
@@ -445,6 +498,7 @@ <h3>Sovereign Trace Protocol</h3>
   <ul class="footer-links">
     <li><a href="/simulators/">Simulators</a></li>
     <li><a href="/services/">Services</a></li>
+    <li><a href="/stack/">Stack</a></li>
     <li><a href="/certify/">Certify</a></li>
     <li><a href="/about/">About</a></li>
     <li><a href="https://github.com/AionSystem" target="_blank" rel="noopener">GitHub ↗</a></li>
@@ -453,6 +507,7 @@ <h3>Sovereign Trace Protocol</h3>
 </footer>
 
 <script>
+/* ── CANVAS ─────────────────────────────── */
 const canvas = document.getElementById('hero-canvas');
 const ctx = canvas.getContext('2d');
 let W, H, particles = [], signals = [], t = 0;
@@ -508,6 +563,115 @@ <h3>Sovereign Trace Protocol</h3>
 
 window.addEventListener('resize', resize);
 init(); loop();
+
+/* ── TRIPLE TIME DISPLAY ─────────────────── */
+(function() {
+  // 13 Moon anchor dates (month, day) → moon number and name
+  const MOONS = [
+    { num:1,  name:'Magnetic',    m:7,  d:26 },
+    { num:2,  name:'Lunar',       m:8,  d:23 },
+    { num:3,  name:'Electric',    m:9,  d:20 },
+    { num:4,  name:'Self-Existing',m:10,d:18 },
+    { num:5,  name:'Overtone',    m:11, d:15 },
+    { num:6,  name:'Rhythmic',    m:12, d:13 },
+    { num:7,  name:'Resonant',    m:1,  d:10 },
+    { num:8,  name:'Galactic',    m:2,  d:7  },
+    { num:9,  name:'Solar',       m:3,  d:7  },
+    { num:10, name:'Planetary',   m:4,  d:4  },
+    { num:11, name:'Spectral',    m:5,  d:2  },
+    { num:12, name:'Crystal',     m:5,  d:30 },
+    { num:13, name:'Cosmic',      m:6,  d:27 }
+  ];
+
+  function dreamspell(date) {
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+
+    // Build sorted list of moon start dates for this Dreamspell year
+    // The year runs Jul 26 – Jul 24 next year
+    // Determine which Dreamspell year we're in
+    const isAfterJul26 = (month > 7) || (month === 7 && day >= 26);
+    const dsYear = isAfterJul26 ? year : year - 1;
+
+    const anchors = MOONS.map(m => {
+      let y = dsYear;
+      // Moons 7–13 (Jan–Jul) are in the next calendar year
+      if (m.num >= 7) y = dsYear + 1;
+      return { ...m, date: new Date(y, m.m - 1, m.d) };
+    });
+
+    // Day Out of Time: Jul 25
+    const dot = new Date(dsYear + 1, 6, 25);
+    const dotMs = dot.getTime();
+    const dateMs = date.getTime();
+    if (Math.abs(dateMs - dotMs) < 86400000 / 2) {
+      return { moonNum: 0, moonName: 'Day Out of Time', dayOfMoon: 0 };
+    }
+
+    // Find which moon we're in
+    for (let i = anchors.length - 1; i >= 0; i--) {
+      if (dateMs >= anchors[i].date.getTime()) {
+        const dayOfMoon = Math.floor((dateMs - anchors[i].date.getTime()) / 86400000) + 1;
+        if (dayOfMoon <= 28) {
+          return { moonNum: anchors[i].num, moonName: anchors[i].name, dayOfMoon };
+        }
+      }
+    }
+    return null;
+  }
+
+  function renderGregorian(date) {
+    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+    const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+    const el = document.getElementById('tt-gregorian');
+    el.classList.remove('loading');
+    el.textContent = `${days[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+  }
+
+  function renderDreamspell(date) {
+    const el = document.getElementById('tt-dreamspell');
+    const ds = dreamspell(date);
+    el.classList.remove('loading');
+    if (!ds) { el.textContent = '—'; return; }
+    if (ds.moonNum === 0) { el.textContent = 'Day Out of Time'; return; }
+    el.textContent = `Day ${ds.dayOfMoon}, ${ds.moonName} Moon ${ds.moonNum}/13`;
+  }
+
+  async function renderHebrew(date) {
+    const el = document.getElementById('tt-hebrew');
+    const d = date.getDate();
+    const m = date.getMonth() + 1;
+    const y = date.getFullYear();
+    try {
+      const res = await fetch(`https://www.hebcal.com/converter?gd=${d}&gm=${m}&gy=${y}&g2h=1`);
+      const text = await res.text();
+      // Parse JSON response
+      const data = JSON.parse(text);
+      if (data && data.hebrew) {
+        el.classList.remove('loading');
+        el.textContent = data.hebrew;
+      } else {
+        el.textContent = 'FETCH FAILED';
+      }
+    } catch(e) {
+      el.classList.remove('loading');
+      el.textContent = 'FETCH FAILED';
+    }
+  }
+
+  // Set loading state
+  ['tt-gregorian','tt-dreamspell','tt-hebrew'].forEach(id => {
+    const el = document.getElementById(id);
+    el.classList.add('loading');
+    el.textContent = '· · ·';
+  });
+
+  const now = new Date();
+  renderGregorian(now);
+  renderDreamspell(now);
+  renderHebrew(now);
+})();
 </script>
 
 </body>