Tokenbel Financial Data

Contact Refresh - 纯 HTML + Tailwind 4.1 项目

🔗 落地页 — tokenbel.info | 代币聚合器 — dashboard.tokenbel.info

项目概述

本项目已成功从 React + Vite + TypeScript 迁移为纯 HTML + Tailwind CSS 4.1 静态网站。

项目结构

/
├── public/                  # Static assets and additional HTML pages
│   ├── contacts.html        # Contact page
│   ├── favicon.ico          # Favicon
│   └── ...                  # Other static assets
├── index.html              # Main HTML file
├── vite.config.ts          # Vite configuration
├── tailwind.config.ts      # Tailwind CSS configuration
├── postcss.config.js       # PostCSS configuration
└── package.json            # Project dependencies

使用的技术

• Vite - 快速构建工具和开发服务器
• Tailwind CSS 4.1 - 实用优先的 CSS 框架（通过 CDN）
• Alpine.js - 轻量级 JavaScript 交互框架
• HTML5 - 纯 HTML 结构

开始使用

前提条件

• Node.js（v18+）或 Bun
• npm、yarn、pnpm 或 bun

安装

# Clone the repository
git clone <repository-url>
cd contact-refresh

# Install dependencies
bun install
# or
npm install
# or
yarn install
# or
pnpm install

开发

# Start development server
bun run dev
# or
npm run dev

# Server will start at http://localhost:8080

构建生产版本

# Build for production
bun run build
# or
npm run build

# Preview production build
bun run preview
# or
npm run preview

项目特性

✅ 纯 HTML + Tailwind CSS - 无 React 依赖

✅ 快速构建 - 由 Vite 驱动的优化

✅ 响应式设计 - 移动优先方案

✅ 易于维护 - 简洁的文件结构

✅ 可用于生产环境 - 经过优化的资源

可用页面

• 主页（index.html）- 主落地页
• 联系页面（public/contacts.html）- 联系表单和信息

自定义

添加新页面

1. 在 public/ 目录中创建新的 HTML 文件
2. 将页面添加到 vite.config.ts 的 rollupOptions.input 中
3. 使用 Tailwind CSS 类进行样式设置

样式

本项目通过 CDN 使用 Tailwind CSS 4.1。你可以：

• 直接在 HTML 中使用实用类
• 在 <style> 标签中添加自定义 CSS
• 在 tailwind.config.ts 中扩展 Tailwind 配置

部署

本项目可部署到任何静态托管服务：

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages
• AWS S3
• 任何静态文件托管服务

部署示例

# Build for production
bun run build

# Deploy the dist/ folder to your hosting provider

迁移摘要

本项目已成功从以下技术迁移：

• React 18 → 纯 HTML
• TypeScript → JavaScript
• 复杂构建系统 → 简易 Vite 配置
• 多个依赖项 → 最少依赖项

支持

如有任何问题或疑问，请在 GitHub 仓库中提交 issue。