3 周之前 · a7a0331636
--- a/README.md
+++ b/README.md
@@ -0,0 +1,149 @@
 
				+# vnm6688.com H5单页应用

			
 
				+

			
 
				+这是一个基于图片设计的在线娱乐平台H5单页应用，采用现代化的移动端设计理念。

			
 
				+

			
 
				+## 功能特点

			
 
				+

			
 
				+### 🎨 视觉设计

			
 
				+- **深色主题**：采用渐变深色背景，营造高端娱乐氛围

			
 
				+- **卡片式布局**：五个主要功能模块，每个都有独特的渐变背景

			
 
				+- **响应式设计**：完美适配各种移动设备屏幕尺寸

			
 
				+- **现代化UI**：使用毛玻璃效果、圆角设计和阴影效果

			
 
				+

			
 
				+### 🎮 功能模块

			
 
				+1. **直播美女** (Ve đẹp sống động) - 5834 Sông

			
 
				+2. **老虎机** (máy đánh bạc) - 5834 trò chơi

			
 
				+3. **体育彩票** (Xô số thể thao) - 5834 trò chơi

			
 
				+4. **百家乐** (Baccarat) - 5834 trò chơi

			
 
				+5. **彩票** (Xô số) - 5834 trò chơi

			
 
				+

			
 
				+### ✨ 交互效果

			
 
				+- **点击波纹效果**：点击卡片时产生水波纹动画

			
 
				+- **悬停动画**：鼠标悬停时卡片上浮和缩放

			
 
				+- **滚动动画**：页面滚动时卡片依次出现

			
 
				+- **状态指示器**：红绿圆点表示不同状态

			
 
				+- **实时时间显示**：状态栏显示当前时间

			
 
				+- **LIVE标签**：直播模块带有脉冲动画的LIVE标识

			
 
				+

			
 
				+### 📱 移动端优化

			
 
				+- **触摸反馈**：触摸设备上的即时反馈

			
 
				+- **键盘导航**：支持键盘方向键导航

			
 
				+- **无障碍访问**：支持屏幕阅读器

			
 
				+- **性能优化**：流畅的动画和过渡效果

			
 
				+

			
 
				+## 技术栈

			
 
				+

			
 
				+- **HTML5**：语义化标签和现代HTML特性

			
 
				+- **CSS3**：Flexbox布局、Grid布局、动画和渐变

			
 
				+- **JavaScript ES6+**：现代JavaScript特性

			
 
				+- **响应式设计**：移动优先的设计理念

			
 
				+- **CSS动画**：关键帧动画和过渡效果

			
 
				+

			
 
				+## 文件结构

			
 
				+

			
 
				+```

			
 
				+h5/

			
 
				+├── index.html          # 主HTML文件

			
 
				+├── styles.css          # 样式文件

			
 
				+├── script.js           # JavaScript交互逻辑

			
 
				+└── README.md           # 项目说明文档

			
 
				+```

			
 
				+

			
 
				+## 使用方法

			
 
				+

			
 
				+1. **直接打开**：在浏览器中直接打开 `index.html` 文件

			
 
				+2. **本地服务器**：使用本地服务器运行以获得最佳体验

			
 
				+3. **移动设备**：在手机浏览器中访问，体验最佳效果

			
 
				+

			
 
				+### 本地服务器运行

			
 
				+

			
 
				+```bash

			
 
				+# 使用Python

			
 
				+python -m http.server 8000

			
 
				+

			
 
				+# 使用Node.js

			
 
				+npx serve .

			
 
				+

			
 
				+# 使用PHP

			
 
				+php -S localhost:8000

			
 
				+```

			
 
				+

			
 
				+然后在浏览器中访问 `http://localhost:8000`

			
 
				+

			
 
				+## 浏览器兼容性

			
 
				+

			
 
				+- ✅ Chrome 60+

			
 
				+- ✅ Firefox 55+

			
 
				+- ✅ Safari 12+

			
 
				+- ✅ Edge 79+

			
 
				+- ✅ 移动端浏览器

			
 
				+

			
 
				+## 自定义配置

			
 
				+

			
 
				+### 修改颜色主题

			
 
				+在 `styles.css` 中修改CSS变量：

			
 
				+

			
 
				+```css

			
 
				+:root {

			
 
				+    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

			
 
				+    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

			
 
				+    --background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

			
 
				+}

			
 
				+```

			
 
				+

			
 
				+### 修改游戏数量

			
 
				+在 `index.html` 中修改游戏数量显示：

			
 
				+

			
 
				+```html

			
 
				+<p class="game-count"><span class="dot red"></span>5834 Sông</p>

			
 
				+```

			
 
				+

			
 
				+### 添加新的功能模块

			
 
				+在 `index.html` 的 `main-content` 部分添加新的卡片：

			
 
				+

			
 
				+```html

			
 
				+<div class="card card-new">

			
 
				+    <div class="card-content">

			
 
				+        <div class="card-text">

			
 
				+            <h3>新功能名称</h3>

			
 
				+            <p class="game-count"><span class="dot green"></span>游戏数量</p>

			
 
				+        </div>

			
 
				+        <div class="card-image">

			
 
				+            <!-- 图标内容 -->

			
 
				+        </div>

			
 
				+    </div>

			
 
				+</div>

			
 
				+```

			
 
				+

			
 
				+## 开发说明

			
 
				+

			
 
				+### 添加新动画

			
 
				+在 `script.js` 中添加新的CSS动画：

			
 
				+

			
 
				+```javascript

			
 
				+const newAnimation = `

			
 
				+    @keyframes newAnimation {

			
 
				+        0% { transform: scale(1); }

			
 
				+        50% { transform: scale(1.1); }

			
 
				+        100% { transform: scale(1); }

			
 
				+    }

			
 
				+`;

			
 
				+style.textContent += newAnimation;

			
 
				+```

			
 
				+

			
 
				+### 响应式断点

			
 
				+- **移动端**：< 480px

			
 
				+- **小屏设备**：< 360px

			
 
				+- **桌面端**：> 480px

			
 
				+

			
 
				+## 许可证

			
 
				+

			
 
				+本项目仅供学习和演示使用。

			
 
				+

			
 
				+## 更新日志

			
 
				+

			
 
				+### v1.0.0 (2024-01-01)

			
 
				+- 初始版本发布

			
 
				+- 实现基础UI和交互功能

			
 
				+- 添加响应式设计

			
 
				+- 优化移动端体验 
			
--- a/images/card1.png
+++ b/images/card1.png
--- a/images/card2.png
+++ b/images/card2.png
--- a/images/card3.png
+++ b/images/card3.png
--- a/images/card4.png
+++ b/images/card4.png
--- a/images/card5.png
+++ b/images/card5.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,63 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>vnm6688.com - 世界领先娱乐城市</title>
			
 
				+    <link rel="stylesheet" href="styles.css">
			
 
				+
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 头部 -->
			
 
				+    <header class="header">
			
 
				+        <h1 class="site-title">vnm6688.com</h1>
			
 
				+        <p class="tagline">Tên miền vĩnh viễn<br>
			
 
				+            Thành phố giải trí hàng đầu thế giới</p>
			
 
				+    </header>
			
 
				+
			
 
				+    <!-- 主要内容区域 -->
			
 
				+    <main class="main-content">
			
 
				+        <!-- 第一个卡片 -->
			
 
				+        <a href="https://go.rmhfrtnd.com?userId=c6f2bf0ee6653de231fab8e816e0d76259691a6ec04311c292bcddef73e4d5d4" class="card-link" target="_blank" rel="noopener noreferrer">
			
 
				+            <div class="card">
			
 
				+                <div class="status-dot red"></div>
			
 
				+                <img src="images/card1.png" alt="Card 1" class="card-img">
			
 
				+            </div>
			
 
				+        </a>
			
 
				+
			
 
				+        <!-- 第二个卡片 -->
			
 
				+        <a href="https://xmnylu0l12nymst.com/zehF" class="card-link" target="_blank" rel="noopener noreferrer">
			
 
				+            <div class="card">
			
 
				+                <div class="status-dot green"></div>
			
 
				+                <img src="images/card2.png" alt="Card 2" class="card-img">
			
 
				+            </div>
			
 
				+        </a>
			
 
				+
			
 
				+        <!-- 第三个卡片 -->
			
 
				+        <a href="https://xmnylu0l12nymst.com/zehF" class="card-link" target="_blank" rel="noopener noreferrer">
			
 
				+            <div class="card">
			
 
				+                <div class="status-dot green"></div>
			
 
				+                <img src="images/card3.png" alt="Card 3" class="card-img">
			
 
				+            </div>
			
 
				+        </a>
			
 
				+
			
 
				+        <!-- 第四个卡片 -->
			
 
				+        <a href="https://xmnylu0l12nymst.com/zehF" class="card-link" target="_blank" rel="noopener noreferrer">
			
 
				+            <div class="card">
			
 
				+                <div class="status-dot red"></div>
			
 
				+                <img src="images/card4.png" alt="Card 4" class="card-img">
			
 
				+            </div>
			
 
				+        </a>
			
 
				+
			
 
				+        <!-- 第五个卡片 -->
			
 
				+        <a href="https://xmnylu0l12nymst.com/zehF" class="card-link" target="_blank" rel="noopener noreferrer">
			
 
				+            <div class="card">
			
 
				+                <div class="status-dot green"></div>
			
 
				+                <img src="images/card5.png" alt="Card 5" class="card-img">
			
 
				+            </div>
			
 
				+        </a>
			
 
				+    </main>
			
 
				+
			
 
				+    <script src="script.js"></script>
			
 
				+</body>
			
 
				+</html> 
			
--- a/script.js
+++ b/script.js
@@ -0,0 +1,139 @@
 
				+// 页面加载完成后执行
			
 
				+document.addEventListener('DOMContentLoaded', function() {
			
 
				+    // 添加卡片点击效果
			
 
				+    addCardClickEffects();
			
 
				+    
			
 
				+    // 添加滚动动画
			
 
				+    addScrollAnimations();
			
 
				+    
			
 
				+    // 添加触摸反馈
			
 
				+    addTouchFeedback();
			
 
				+});
			
 
				+
			
 
				+// 添加卡片点击效果
			
 
				+function addCardClickEffects() {
			
 
				+    const cards = document.querySelectorAll('.card');
			
 
				+    
			
 
				+    cards.forEach((card, index) => {
			
 
				+        // 鼠标悬停效果
			
 
				+        card.addEventListener('mouseenter', function() {
			
 
				+            this.style.transform = 'translateY(-4px) scale(1.02)';
			
 
				+        });
			
 
				+        
			
 
				+        card.addEventListener('mouseleave', function() {
			
 
				+            this.style.transform = 'translateY(0) scale(1)';
			
 
				+        });
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+// 添加滚动动画
			
 
				+function addScrollAnimations() {
			
 
				+    const cards = document.querySelectorAll('.card');
			
 
				+    
			
 
				+    const observer = new IntersectionObserver((entries) => {
			
 
				+        entries.forEach((entry, index) => {
			
 
				+            if (entry.isIntersecting) {
			
 
				+                entry.target.style.opacity = '0';
			
 
				+                entry.target.style.transform = 'translateY(30px)';
			
 
				+                
			
 
				+                setTimeout(() => {
			
 
				+                    entry.target.style.transition = 'all 0.6s ease';
			
 
				+                    entry.target.style.opacity = '1';
			
 
				+                    entry.target.style.transform = 'translateY(0)';
			
 
				+                }, index * 100);
			
 
				+            }
			
 
				+        });
			
 
				+    }, {
			
 
				+        threshold: 0.1,
			
 
				+        rootMargin: '0px 0px -50px 0px'
			
 
				+    });
			
 
				+    
			
 
				+    cards.forEach(card => {
			
 
				+        observer.observe(card);
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+// 添加触摸反馈
			
 
				+function addTouchFeedback() {
			
 
				+    const cards = document.querySelectorAll('.card');
			
 
				+    
			
 
				+    cards.forEach(card => {
			
 
				+        card.addEventListener('touchstart', function() {
			
 
				+            this.style.transform = 'scale(0.98)';
			
 
				+        });
			
 
				+        
			
 
				+        card.addEventListener('touchend', function() {
			
 
				+            this.style.transform = 'scale(1)';
			
 
				+        });
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+// 添加CSS动画样式
			
 
				+const style = document.createElement('style');
			
 
				+style.textContent = `
			
 
				+    @keyframes ripple {
			
 
				+        to {
			
 
				+            transform: scale(4);
			
 
				+            opacity: 0;
			
 
				+        }
			
 
				+    }
			
 
				+    
			
 
				+    .card {
			
 
				+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			
 
				+    }
			
 
				+    
			
 
				+    .card:active {
			
 
				+        transform: scale(0.98) !important;
			
 
				+    }
			
 
				+`;
			
 
				+
			
 
				+document.head.appendChild(style);
			
 
				+
			
 
				+// 添加页面加载动画
			
 
				+window.addEventListener('load', function() {
			
 
				+    document.body.style.opacity = '0';
			
 
				+    document.body.style.transition = 'opacity 0.5s ease';
			
 
				+    
			
 
				+    setTimeout(() => {
			
 
				+        document.body.style.opacity = '1';
			
 
				+    }, 100);
			
 
				+});
			
 
				+
			
 
				+// 添加键盘导航支持
			
 
				+document.addEventListener('keydown', function(e) {
			
 
				+    const cards = document.querySelectorAll('.card');
			
 
				+    const currentIndex = Array.from(cards).findIndex(card => 
			
 
				+        card === document.activeElement || card.contains(document.activeElement)
			
 
				+    );
			
 
				+    
			
 
				+    let nextIndex = currentIndex;
			
 
				+    
			
 
				+    switch(e.key) {
			
 
				+        case 'ArrowDown':
			
 
				+            e.preventDefault();
			
 
				+            nextIndex = Math.min(currentIndex + 1, cards.length - 1);
			
 
				+            break;
			
 
				+        case 'ArrowUp':
			
 
				+            e.preventDefault();
			
 
				+            nextIndex = Math.max(currentIndex - 1, 0);
			
 
				+            break;
			
 
				+        case 'Enter':
			
 
				+        case ' ':
			
 
				+            e.preventDefault();
			
 
				+            if (currentIndex >= 0) {
			
 
				+                cards[currentIndex].click();
			
 
				+            }
			
 
				+            break;
			
 
				+    }
			
 
				+    
			
 
				+    if (nextIndex !== currentIndex && nextIndex >= 0) {
			
 
				+        cards[nextIndex].focus();
			
 
				+    }
			
 
				+});
			
 
				+
			
 
				+// 为卡片添加焦点样式
			
 
				+document.querySelectorAll('.card').forEach(card => {
			
 
				+    card.setAttribute('tabindex', '0');
			
 
				+}); 
			
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,131 @@
 
				+/* 重置和基础样式 */
			
 
				+* {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			
 
				+    background: #000000;
			
 
				+    color: white;
			
 
				+    min-height: 100vh;
			
 
				+    overflow-x: hidden;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/* 头部样式 */
			
 
				+.header {
			
 
				+    text-align: center;
			
 
				+    padding: 20px;
			
 
				+    margin-bottom: 20px;
			
 
				+}
			
 
				+
			
 
				+.site-title {
			
 
				+    font-size: 28px;
			
 
				+    font-weight: 700;
			
 
				+    margin-bottom: 8px;
			
 
				+    background: linear-gradient(45deg, #fff, #f0f0f0);
			
 
				+    -webkit-background-clip: text;
			
 
				+    -webkit-text-fill-color: transparent;
			
 
				+    background-clip: text;
			
 
				+}
			
 
				+
			
 
				+.tagline {
			
 
				+    font-size: 14px;
			
 
				+    font-weight: 400;
			
 
				+}
			
 
				+
			
 
				+/* 主要内容区域 */
			
 
				+.main-content {
			
 
				+    padding: 0 20px;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    gap: 16px;
			
 
				+    max-width: 400px;
			
 
				+    margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+/* 卡片基础样式 */
			
 
				+.card {
			
 
				+    border-radius: 16px;
			
 
				+    overflow: hidden;
			
 
				+    transition: all 0.3s ease;
			
 
				+    cursor: pointer;
			
 
				+    margin-bottom: 16px;
			
 
				+    position: relative;
			
 
				+}
			
 
				+
			
 
				+.status-dot {
			
 
				+    margin: 58px 0 0 10px;
			
 
				+    position: absolute;
			
 
				+    top: 8px;
			
 
				+    left: 8px;
			
 
				+    width: 8px;
			
 
				+    height: 8px;
			
 
				+    border-radius: 50%;
			
 
				+    z-index: 10;
			
 
				+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
			
 
				+}
			
 
				+
			
 
				+.status-dot.red {
			
 
				+    background: #ff4757;
			
 
				+    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6);
			
 
				+}
			
 
				+
			
 
				+.status-dot.green {
			
 
				+    background: #2ed573;
			
 
				+    box-shadow: 0 0 10px rgba(46, 213, 115, 0.6);
			
 
				+}
			
 
				+
			
 
				+.card:hover {
			
 
				+    transform: translateY(-2px);
			
 
				+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
			
 
				+}
			
 
				+
			
 
				+.card-link {
			
 
				+    text-decoration: none;
			
 
				+    color: inherit;
			
 
				+    display: block;
			
 
				+}
			
 
				+
			
 
				+.card-img {
			
 
				+    width: 100%;
			
 
				+    height: auto;
			
 
				+    display: block;
			
 
				+    object-fit: contain;
			
 
				+    object-position: center;
			
 
				+    max-width: 100%;
			
 
				+    max-height: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+/* 响应式设计 */
			
 
				+@media (max-width: 480px) {
			
 
				+    .main-content {
			
 
				+        padding: 0 16px;
			
 
				+    }
			
 
				+    
			
 
				+    .site-title {
			
 
				+        font-size: 24px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+/* 滚动条样式 */
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 6px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-track {
			
 
				+    background: rgba(255, 255, 255, 0.1);
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+    background: rgba(255, 255, 255, 0.3);
			
 
				+    border-radius: 3px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+    background: rgba(255, 255, 255, 0.5);
			
 
				+}