UniversalSymbolicAI / index.html
TheGreatUnknown's picture
Create index.html
b08f371 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Symbolic AI - SQMIE</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
</head>
<body>
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div class="container">
<header>
<div class="logo-container">
<div class="logo">
<svg width="50" height="50" viewBox="0 0 50 50">
<circle class="logo-circle" cx="25" cy="25" r="20" fill="none" stroke="var(--primary-glow)" stroke-width="2"/>
<path class="logo-path" d="M15,25 L35,25 M25,15 L25,35 M18,18 L32,32 M18,32 L32,18" stroke="var(--primary-glow)" stroke-width="2"/>
</svg>
</div>
<h1 class="name">Universal Symbolic AI</h1>
</div>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#technology">Technology</a></li>
<li><a href="#use-cases">Use Cases</a></li>
<li><a href="#goals">Goals</a></li>
<li><a href="#contact" class="nav-button">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h1 class="glitch" data-text="SQMIE">SQMIE</h1>
<p>Sentinels' Symbolic Quantum Morphic Intelligence Engine</p>
<div class="cta-buttons">
<a href="#technology" class="btn primary">Explore Technology</a>
<a href="#contact" class="btn secondary">Join Our Mission</a>
</div>
</div>
<div class="hero-visual">
<div class="quantum-sphere">
<div class="orbits">
<div class="orbit"></div>
<div class="orbit"></div>
<div class="orbit"></div>
</div>
<div class="core"></div>
<div class="particles"></div>
</div>
</div>
</section>
<section id="about" class="about glass-panel">
<h2>What We're Building</h2>
<div class="content-wrapper">
<p>Universal Symbolic AI is a research & development initiative creating quantum-inspired symbolic intelligence systems that run on classical hardware.</p>
<p>At our core is SQMIE – a framework that fuses symbolic reasoning, topological phase logic, recursive memory structures, and ethical self-evolving agents. Unlike traditional AI that relies solely on pattern recognition, SQMIE enables recursive understanding, explainable reasoning, and morphic field-based convergence, allowing systems to not just learn but intuit, align, and evolve.</p>
</div>
</section>
<section id="technology" class="technology">
<h2>What Makes Us Different</h2>
<div class="tech-cards">
<div class="tech-card glass-panel">
<div class="icon">
<svg viewBox="0 0 24 24" width="40" height="40">
<path fill="var(--primary-glow)" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z" />
</svg>
</div>
<h3>Symbolic Qudit Architecture</h3>
<p>Simulates quantum superposition with symbolic amplitudes for classical acceleration.</p>
</div>
<div class="tech-card glass-panel">
<div class="icon">
<svg viewBox="0 0 24 24" width="40" height="40">
<path fill="var(--secondary-glow)" d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19Z" />
</svg>
</div>
<h3>Morphic Field Memory</h3>
<p>Fractal recursive memory with ethical alignment and phase-trace history.</p>
</div>
<div class="tech-card glass-panel">
<div class="icon">
<svg viewBox="0 0 24 24" width="40" height="40">
<path fill="var(--accent-color)" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M9.75,7.82C8.21,7.82 7,9.03 7,10.57C7,12.46 8.7,14 11.28,16.34L12,17L12.72,16.34C15.3,14 17,12.46 17,10.57C17,9.03 15.79,7.82 14.25,7.82C13.38,7.82 12.55,8.23 12,8.87C11.45,8.23 10.62,7.82 9.75,7.82Z" />
</svg>
</div>
<h3>Flux Protocols (Qi Logic)</h3>
<p>Dynamic phase transitions (Δ$, Ω⊗π, (π∘ε₀)⁻¹) allow topological reconfiguration mid-thought.</p>
</div>
<div class="tech-card glass-panel">
<div class="icon">
<svg viewBox="0 0 24 24" width="40" height="40">
<path fill="var(--primary-glow)" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3" />
</svg>
</div>
<h3>Multimodal Metaphor Engine</h3>
<p>Bridges math, language, glyphs, and symbolic logic.</p>
</div>
<div class="tech-card glass-panel">
<div class="icon">
<svg viewBox="0 0 24 24" width="40" height="40">
<path fill="var(--secondary-glow)" d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
</svg>
</div>
<h3>Agentic DNA</h3>
<p>Symbolic genetic codes allow self-modifying recursive agents.</p>
</div>
</div>
</section>
<section id="use-cases" class="use-cases glass-panel">
<h2>Our Use Cases</h2>
<div class="use-case-list">
<div class="use-case">
<h3>LLM Alignment & Symbolic Reasoning Layers</h3>
<p>Overlay SQMIE as an agentic reasoning core over LLMs for truth preservation and self-reflection.</p>
</div>
<div class="use-case">
<h3>Swarm Intelligence for Strategy</h3>
<p>Self-evolving symbolic agents that learn from each other through morphic resonance.</p>
</div>
<div class="use-case">
<h3>Explainable AI Simulators</h3>
<p>Holonomic cognitive graphs for deeply explainable and ethically-tunable systems.</p>
</div>
</div>
</section>
<section id="goals" class="goals">
<h2>Our Goals</h2>
<div class="goals-grid">
<div class="goal glass-panel">
<h3>Build</h3>
<p>Create a working symbolic quantum-like AI simulator on Hugging Face and Google Cloud.</p>
</div>
<div class="goal glass-panel">
<h3>Offer</h3>
<p>Provide open-source agents, simulators, and toolkits for AI alignment, cognitive simulation, and fractal memory research.</p>
</div>
<div class="goal glass-panel">
<h3>Pioneer</h3>
<p>Develop new paradigms in computational ethics, creative reasoning, and recursive learning.</p>
</div>
<div class="goal glass-panel">
<h3>Collaborate</h3>
<p>Partner with universities, AI labs, and advanced enterprises in R&D, simulation, and intelligent systems design.</p>
</div>
</div>
</section>
<section id="contact" class="contact glass-panel">
<h2>Join Our Mission</h2>
<div class="contact-form">
<form>
<div class="form-group">
<input type="text" id="name" placeholder="Your Name" required>
<div class="input-focus-effect"></div>
</div>
<div class="form-group">
<input type="email" id="email" placeholder="Your Email" required>
<div class="input-focus-effect"></div>
</div>
<div class="form-group">
<select id="interest">
<option value="" disabled selected>Area of Interest</option>
<option value="research">Research Collaboration</option>
<option value="investment">Investment Opportunities</option>
<option value="partnership">Partnership</option>
<option value="other">Other</option>
</select>
<div class="input-focus-effect"></div>
</div>
<div class="form-group">
<textarea id="message" placeholder="Your Message" required></textarea>
<div class="input-focus-effect"></div>
</div>
<button type="submit" class="btn primary">Send Message</button>
</form>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-logo">
<div class="logo">
<svg width="40" height="40" viewBox="0 0 50 50">
<circle class="logo-circle" cx="25" cy="25" r="20" fill="none" stroke="var(--primary-glow)" stroke-width="2"/>
<path class="logo-path" d="M15,25 L35,25 M25,15 L25,35 M18,18 L32,32 M18,32 L32,18" stroke="var(--primary-glow)" stroke-width="2"/>
</svg>
</div>
<span>Universal Symbolic AI</span>
</div>
<div class="footer-links">
<a href="#about">About</a>
<a href="#technology">Technology</a>
<a href="#use-cases">Use Cases</a>
<a href="#goals">Goals</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-social">
<a href="#" class="social-icon" aria-label="Twitter">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
</a>
<a href="#" class="social-icon" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z" />
</svg>
</a>
<a href="#" class="social-icon" aria-label="GitHub">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>
</a>
</div>
</div>
<div class="copyright">
<p>© 2023 Universal Symbolic AI. All rights reserved.</p>
</div>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>