|
| 1 | +import"./style-BZky-A1p.js";const a="/";function m(){const t=document.getElementById("app");t.innerHTML=` |
| 2 | + <!-- Loading Screen --> |
| 3 | + <div class="loading-screen" id="loadingScreen"></div> |
| 4 | + |
| 5 | + <!-- Navigation Bar --> |
| 6 | + <nav class="nav-bar" id="navBar"> |
| 7 | + <div class="nav-placeholder" id="navPlaceholder"></div> |
| 8 | + |
| 9 | + <!-- Desktop Nav Links --> |
| 10 | + <ul class="nav-links nav-links-desktop"> |
| 11 | + <li><a href="${a}about.html">About</a></li> |
| 12 | + <li><a href="${a}systems.html">Systems</a></li> |
| 13 | + <li><a href="${a}research.html">Research</a></li> |
| 14 | + <li><a href="${a}contact.html">Contact</a></li> |
| 15 | + </ul> |
| 16 | + |
| 17 | + <!-- Logo link (hidden initially, shown after hero moves to nav) --> |
| 18 | + <a href="${a}" class="nav-logo-link" id="navLogoLink" style="opacity: 0; pointer-events: none;"> |
| 19 | + <div class="nav-logo">MIND THE MATH</div> |
| 20 | + </a> |
| 21 | + |
| 22 | + <!-- Mobile Menu Button --> |
| 23 | + <button class="nav-menu-btn" id="navMenuBtn" aria-label="Toggle menu" aria-expanded="false"> |
| 24 | + <span class="menu-text">MENU</span> |
| 25 | + </button> |
| 26 | + </nav> |
| 27 | + |
| 28 | + <!-- Mobile Navigation Overlay --> |
| 29 | + <div class="mobile-nav-overlay" id="mobileNavOverlay"> |
| 30 | + <ul class="nav-links-mobile"> |
| 31 | + <li><a href="${a}about.html">About</a></li> |
| 32 | + <li><a href="${a}systems.html">Systems</a></li> |
| 33 | + <li><a href="${a}research.html">Research</a></li> |
| 34 | + <li><a href="${a}contact.html">Contact</a></li> |
| 35 | + </ul> |
| 36 | + </div> |
| 37 | + |
| 38 | + <!-- Animated Hero (will move from center to nav) --> |
| 39 | + <a href="${a}" class="animated-hero" id="animatedHero" style="pointer-events: none; text-decoration: none; color: inherit;"> |
| 40 | + <span class="static-text">MIND THE</span> |
| 41 | + <span id="wordRotator" class="word-rotator" data-mode="flip" data-board-bg="black"></span> |
| 42 | + </a> |
| 43 | + |
| 44 | + <!-- Main Content --> |
| 45 | + <main class="main-content" id="mainContent"> |
| 46 | + <section class="content-hero"> |
| 47 | + <h1 class="logo-container"> |
| 48 | + <img src="https://cdn.mindthemath.com/logo-450-cb.png" alt="Mind the Math" class="site-logo" id="siteLogo" onerror="this.style.display='none'; document.getElementById('logoFallback').style.display='block';"> |
| 49 | + <span class="logo-fallback" id="logoFallback" style="display: none;">Mind the Math</span> |
| 50 | + </h1> |
| 51 | + <p class="tagline" align="center">Bridging the Gap</p> |
| 52 | + <div class="divider"></div> |
| 53 | + <p class="description"> |
| 54 | + Mind the Math is a system-driven practice that builds pathways to guide complex ideas into places they can be navigated, inhabited, and understood. |
| 55 | + <br><br> |
| 56 | + Working across disciplines to produce software, visualizations, and physical artifacts, the studio crafts authored systems whose outputs are instances of deeper inquiries. </p> |
| 57 | + </section> |
| 58 | + </main> |
| 59 | + |
| 60 | + <!-- Footer --> |
| 61 | + <footer class="site-footer"> |
| 62 | + <p class="footer-text">© 2026 Mind the Math LLC</p> |
| 63 | + </footer> |
| 64 | + `}function u(){return new Promise(t=>{const e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/mindthemath/text-effects-js@main/text-effects.js",e.onload=()=>{const i=new WordRotator({elementId:"wordRotator",words:["math","science","technology","engineering","art"],mode:"flip",timingMode:"pause",firstWordInterval:3e3,otherWordInterval:500,lastWordInterval:1e3,onLetterLand:(n,v,y,r)=>{const c=r?"oklch(0.9133 0.2195 102.76)":"#666666",l=document.querySelectorAll(".letter-flap");n<l.length&&l[n].querySelectorAll(".flap-content").forEach(d=>{d.style.color=c})}}),o=i.currentIndex===0?"oklch(0.9133 0.2195 102.76)":"#666666";document.querySelectorAll(".flap-content").forEach(n=>{n.style.color=o}),document.querySelectorAll(".letter-flap, .flap-content").forEach(n=>{n.style.fontFamily="'Source Code Pro', monospace"}),t(i)},document.head.appendChild(e)})}async function h(){const t=document.getElementById("loadingScreen"),e=document.getElementById("animatedHero"),i=document.getElementById("navBar"),o=document.getElementById("mainContent");await document.fonts.ready,await u(),await s(100),t.classList.add("fade-out"),e.style.opacity="1",await s(1200),await s(700),i.classList.add("visible"),await s(5300),e.classList.add("in-nav"),await s(200),e.style.pointerEvents="auto";const n=document.getElementById("navPlaceholder");n&&(n.style.display="none"),await s(400),o.classList.add("visible")}function s(t){return new Promise(e=>setTimeout(e,t))}function p(){const t=document.getElementById("navMenuBtn"),e=document.getElementById("mobileNavOverlay"),i=e.querySelectorAll("a");t.addEventListener("click",()=>{const o=e.classList.contains("open");e.classList.toggle("open"),t.setAttribute("aria-expanded",!o),t.querySelector(".menu-text").textContent=o?"MENU":"CLOSE"}),i.forEach(o=>{o.addEventListener("click",()=>{e.classList.remove("open"),t.setAttribute("aria-expanded","false"),t.querySelector(".menu-text").textContent="MENU"})})}document.addEventListener("DOMContentLoaded",()=>{m(),p(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{h()})})}); |
0 commit comments