sphinxorg/website

# Sphinx Protocol Website [](https://opensource.org/licenses/MIT) [](https://pages.cloudflare.com/) ## Live Website https://sphinxfnd.org ## Overview Single-page website for the Sphinx Protocol — a post-quantum blockchain infrastructure for Universal Sovereign Identity (USI). Built entirely with: Pure HTML Pure CSS Vanilla JavaScript No frameworks No build tools No dependencies ## Website Sections - Hero section with live SPIF encoding animation - Vision & protocol pillars - Technology stack - SPIF address anatomy - Live address ticker - Feature tabs - Roadmap timeline - SPX coin overview - Foundation & team ## Tech Stack HTML5 CSS3 Vanilla JavaScript (ES6+) Google Fonts Intersection Observer API Canvas API Web Animations API Cloudflare Pages ## Project Structure web/ ├── index.html ├── css/ │ └── styles.css ├── js/ │ └── main.js ├── assets/ │ └── favicon.png ├── robots.txt ├── sitemap.xml ├── site.webmanifest └── llms.txt ## Core Features ### Quantum Canvas Background Animated particle system rendered through: Features: - Quantum-style particle movement - Dynamic connection lines - Opacity fading - Randomized positioning - Lightweight rendering optimizations ### SPIF Encoding Animation Live public-key encoding sequence: PUB KEY → ENCODING → SPIF ADDRESS Driven by: fpEncodeBlock inside: main.js ### Live SPIF Ticker Fixed footer ticker streams randomized SPIF addresses with live statuses: VERIFIED ACTIVE PENDING Uses infinite CSS marquee animation. ### SPIF Anatomy Block Interactive breakdown of SPIF address structure with: - Prefix segments - Byte grouping visualization - Animated labels - Rolling address stream ### Feature Tabs Dynamic audience filtering: Individual Business Developer Cards are filtered using: data-categories attributes. ### Roadmap Dropdowns Expandable roadmap panels: Angel Round Private Sale Public ICO Genesis Supply Distribution Includes modal popup for terms/disclaimers. ### Dark / Light Theme Theme preference stored via: localStorage CSS variable switching controlled through: [data-theme] ## Local Development # Clone repository git clone https://github.com/sphinxorg/website.git # Enter project cd website # Start local server python3 -m http.server 8000 # Alternative npx serve # Open browser http://localhost:8000 No build step required. ## Deployment ### Cloudflare Pages git add . git commit -m "update" git push origin main Automatic deployment connected to: main branch ### Netlify npm install -g netlify-cli netlify deploy --prod ### Vercel npm install -g vercel vercel --prod ## Performance Optimizations - Async stylesheet preloading - Deferred JavaScript loading - Reduced particle count on low-end devices - Lazy scroll reveal animations - DNS prefetch optimization - Lightweight font stack - Zero external JS dependencies ## Theme Configuration Stored using: localStorage.setItem('theme', 'dark') localStorage.setItem('theme', 'light') CSS variables: :root { --bg: #0a0a0f; --bg2: #0e0e16; --surface: #181824; --accent: #4fc3f7; --accent2: #00e5ff; --accent3: #7c4dff; --gold: #ffd54f; --text: #e8e8f0; --text2: #9898b0; --text3: #5a5a72; } [data-theme="light"] { --bg: #f4f4f8; --accent: #0277bd; --gold: #f57f17; } ## SEO Configuration Update inside: index.html Replace: YOUR_DOMAIN YOUR_IMAGE_URL YOUR_HANDLE YOUR_CODE Structured data already included: Organization WebSite TechArticle ## JavaScript Systems | System | Purpose | |---|---| | Quantum canvas | Particle background | | SPIF animation | Public key encoding loop | | Anatomy ticker | Rolling SPIF stream | | Footer ticker | Infinite address marquee | | Scroll reveal | Lazy animation system | | Theme toggle | Dark/light switching | | Hamburger menu | Mobile navigation | | Feature tabs | Audience filtering | | Dropdown panels | Funding round expansion | | Terms modal | SPX disclaimer popup | ## License MIT License ## Disclaimer This project is provided for informational and research purposes only. Cryptocurrency, cryptography, and blockchain systems involve technical and financial risks. SPX coins do not grant ownership, voting rights, or governance authority over the Sphinx Protocol platform. Always perform independent research before interacting with decentralized systems. Built by the Sphinx FND

标签：后端开发