My Binance - Cryptocurrency Exchange Clone

在线体验（Live Demo）

https://cokepoppy.github.io/my-binance

打开即可体验站点的 Markets、Trade、Futures、Earn、Wallet、Support 等页面（纯前端静态站点，无需登录与后端）。

A high-fidelity Binance‑style web app built with vanilla HTML, CSS, and JavaScript. Open the live demo above to try it immediately.

🔗 Quick Navigation (Pages)

• Home: index.html — Overview, hero chart, market highlights
• Markets: markets-v3.html — Filters, sorting, table/grid view with sparklines
• Trade: trade.html — Chart, order book, recent trades, buy/sell forms
• Futures: futures-v2.html — Perps overview, pair header, order panel, positions
• Earn: earn.html — Product cards, APY, calculator, portfolio
• Wallet: wallet.html — Balances, transfers, history
• Support: support.html — Search, suggestions, FAQs, quick actions
• News: news.html — Curated articles and categories
• Test: navigation_test.html — Manual nav testing harness

Tip: When served locally, visit http://localhost:8080/<page-name>.html.

🖼️ Screenshots (Previews)

Preview placeholders are included; replace with real screenshots anytime by overwriting files under images/ with the same names.

Home	Markets	Trade

Futures	Earn	Wallet	Support

🚀 Features

✅ Completed Features

• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile

• Modern UI/UX: Clean, professional design matching Binance's visual style

• Interactive Components:

  • Real-time price ticker simulation
  • Market data grid with hover effects
  • Sparkline charts for each cryptocurrency
  • Animated market filters
  • Interactive navigation menu
  • Language selector
  • Call-to-action buttons with ripple effects

• Visual Design:

  • Dark theme with Binance yellow accent (#F0B90B)
  • Professional typography and spacing
  • Smooth animations and transitions
  • Hover effects and micro-interactions
  • Custom scrollbar styling

• JavaScript Features:

  • Real-time price updates simulation
  • Market filtering functionality
  • Scroll animations
  • Notification system
  • Chart rendering with Canvas API
  • Event handling and state management

📱 Responsive Breakpoints

• Desktop: 1200px+ (full functionality)
• Tablet: 768px - 1199px (adapted layout)
• Mobile: 320px - 767px (simplified interface)

🎨 Design System

Color Palette

• Primary: #F0B90B (Binance Yellow)
• Backgrounds: #0B0E11, #1E2329, #2B3139
• Text: #EAECEF, #848E9C, #5E6673
• Success: #0ECB81 (Green)
• Danger: #F6465D (Red)

Typography

• Font Family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
• Base Size: 16px
• Scale: 12px, 14px, 16px, 18px, 20px, 24px, 28px, 32px

📁 Project Structure

my-binance/
├── index.html              # Main HTML file
├── css/
│   └── styles.css          # Main stylesheet
├── js/
│   └── main.js             # JavaScript functionality
├── images/                 # Images and assets
├── doc/
│   └── binance-website-analysis.md  # Original analysis document
├── README.md              # This file
└── server.log             # Server logs

🚀 Getting Started

Local Development

1. Clone or download this repository

2. Navigate to the project directory

   cd my-binance

3. Start a local web server

   # Using Python (recommended)
   python3 -m http.server 8080
   
   # Using Node.js
   npx http-server
   
   # Using PHP
   php -S localhost:8080

4. Open your browser

   http://localhost:8080
   

Using Live Server (VS Code)

If you're using VS Code, you can use the Live Server extension:

1. Right-click on index.html
2. Select "Open with Live Server"
3. The site will open in your default browser

🔧 Technical Implementation

HTML Structure

• Semantic HTML5 elements
• Accessible markup with ARIA labels
• SEO-friendly structure
• Mobile-first responsive design

CSS Features

• CSS Variables for theming
• Flexbox and Grid layouts
• Custom animations and transitions
• Responsive media queries
• Cross-browser compatibility

JavaScript Functionality

• ES6+ JavaScript features
• Event-driven architecture
• Canvas API for charts
• Real-time data simulation
• Modular class-based structure

🎯 Interactive Elements

1. Navigation Menu

• Active state management
• Smooth hover transitions
• Mobile-responsive hamburger menu (planned)

2. Market Data Grid

• Real-time price updates
• Interactive filtering
• Sparkline charts
• Hover effects

3. Hero Section

• Call-to-action buttons
• Chart placeholder
• Responsive layout

4. Feature Cards

• Icon-based design
• Hover animations
• Grid layout

5. Notification System

• Toast-style notifications
• Multiple notification types
• Auto-dismiss functionality

📊 Browser Compatibility

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ Mobile Safari iOS 12+
• ✅ Chrome for Android

🎯 Future Enhancements

Phase 1 (Core Features)

• Trading interface page
• User authentication system
• Real WebSocket connection
• Mobile app navigation

Phase 2 (Advanced Features)

• Advanced charting with TradingView
• Order book and trading history
• User wallet dashboard
• Deposit/withdrawal interface

Phase 3 (Optimization)

• Performance optimization
• PWA features
• Additional languages
• Advanced security features

🛠️ Development Tools

• Editor: VS Code, Sublime Text, or any code editor
• Browser DevTools: For debugging and testing
• Git: For version control
• Design Tool: Figma/Sketch for design assets

📝 License

This project is for educational purposes only. Not affiliated with Binance.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• Original design inspiration from Binance.com
• Font Awesome icons
• Modern CSS and JavaScript techniques

---

Note: This is a educational project created for learning purposes. It's not intended for commercial use or to compete with Binance in any way.