sphinxfndorg/website

# Sphinx Protocol 网站 [](https://opensource.org/licenses/MIT) [](https://pages.cloudflare.com/) ## 在线网站 https://sphinxfnd.org ## 概述 Sphinx Protocol 的单页网站——这是一个用于通用主权身份（USI）的后量子区块链基础设施。 完全使用以下技术构建： ``` Pure HTML Pure CSS Vanilla JavaScript No frameworks No build tools No dependencies ``` ## 网站板块 - 带有实时 SPIF 编码动画的 Hero 区 - 愿景与协议支柱 - 技术栈 - SPIF 地址结构解析 - 实时地址滚动条 - 功能选项卡 - 路线图时间轴 - SPX 币概述 - 基金会与团队 ## 技术栈 ``` HTML5 CSS3 Vanilla JavaScript (ES6+) Google Fonts Intersection Observer API Canvas API Web Animations API Cloudflare Pages ``` ## 项目结构 ``` web/ ├── index.html ├── css/ │ └── styles.css ├── js/ │ └── main.js ├── assets/ │ └── favicon.png ├── robots.txt ├── sitemap.xml ├── site.webmanifest └── llms.txt ``` ## 核心功能 ### 量子画布背景 通过以下方式渲染的动画粒子系统： ``` ``` 功能： - 量子风格的粒子运动 - 动态连接线 - 透明度淡出 - 随机定位 - 轻量级渲染优化 ### SPIF 编码动画 实时公钥编码序列： ``` PUB KEY → ENCODING → SPIF ADDRESS ``` 由以下代码驱动： ``` fpEncodeBlock ``` 位于： ``` main.js ``` ### 实时 SPIF 滚动条 固定页脚滚动条流式传输随机生成的 SPIF 地址及实时状态： ``` VERIFIED ACTIVE PENDING ``` 使用无限循环的 CSS 跑马灯动画。 ### SPIF 结构解析模块 SPIF 地址结构的交互式拆解，包含： - 前缀部分 - 字节分组可视化 - 动画标签 - 滚动地址流 ### 功能选项卡 动态受众过滤： ``` Individual Business Developer ``` 卡片使用以下属性进行过滤： ``` data-categories ``` ### 路线图下拉菜单 可展开的路线图面板： ``` Angel Round Private Sale Public ICO Genesis Supply Distribution ``` 包含用于条款/免责声明的模态弹窗。 ### 深色 / 浅色主题 主题偏好通过以下方式存储： ``` localStorage ``` CSS 变量切换由以下代码控制： ``` [data-theme] ``` ## 本地开发 ``` # Clone 仓库 git clone https://github.com/sphinxfndorg/website.git # 进入项目 cd website # 启动本地服务器 python3 -m http.server 8000 # 替代方案 npx serve # 打开浏览器 http://localhost:8000 ``` 无需构建步骤。 ## 部署 ### Cloudflare Pages ``` git add . git commit -m "update" git push origin main ``` 自动部署已连接至： ``` main branch ``` ### Netlify ``` npm install -g netlify-cli netlify deploy --prod ``` ### Vercel ``` npm install -g vercel vercel --prod ``` ## 性能优化 - 异步样式表预加载 - 延迟加载 JavaScript - 在低端设备上减少粒子数量 - 滚动触发的延迟显示动画 - DNS 预取优化 - 轻量级字体栈 - 零外部 JS 依赖 ## 主题配置 使用以下方式存储： ``` localStorage.setItem('theme', 'dark') localStorage.setItem('theme', 'light') ``` CSS 变量： ``` :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 配置 在以下位置更新： ``` index.html ``` 替换： ``` YOUR_DOMAIN YOUR_IMAGE_URL YOUR_HANDLE YOUR_CODE ``` 已包含结构化数据： ``` Organization WebSite TechArticle ``` ## JavaScript 系统 | 系统 | 用途 | |---|---| | 量子画布 | 粒子背景 | | SPIF 动画 | 公钥编码循环 | | 结构滚动条 | SPIF 滚动流 | | 页脚滚动条 | 无限地址跑马灯 | | 滚动显示 | 延迟动画系统 | | 主题切换 | 深色/浅色切换 | | 汉堡菜单 | 移动端导航 | | 功能选项卡 | 受众过滤 | | 下拉面板 | 融资轮次展开 | | 条款模态框 | SPX 免责声明弹窗 | ## 许可证 MIT 许可证 ## 贡献 ``` # Fork 仓库 # 创建 branch git checkout -b feature/your-feature # 提交更改 git commit -m "Add your feature" # Push branch git push origin feature/your-feature ``` 推送后发起 Pull Request。 ## 免责声明 本项目仅供参考和研究目的。 加密货币、密码学和区块链系统涉及技术和财务风险。 SPX 币不授予对 Sphinx Protocol 平台的所有权、投票权或治理权。 在与去中心化系统交互之前，请务必进行独立研究。 由 Sphinx FND 构建

标签：Cloudflare Pages, HTML/CSS, Web前端, 区块链, 单页应用, 原生JavaScript, 后端开发, 官方网站