Upload 10 files

app.py

@@ -0,0 +1,76 @@
+from flask import Flask, render_template, jsonify, request
+import requests
+import logging
+import os
+
+app = Flask(__name__)
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+API_URL = "https://v2.xxapi.cn/api/meinv"
+HEADERS = {
+    'User-Agent': 'xiaoxiaoapi/1.0.0 (https://xxapi.cn)'
+}
+
+@app.route('/')
+def index():
+    """Render the main application page"""
+    return render_template('index.html')
+
+@app.route('/api/videos', methods=['GET'])
+def get_videos():
+    """Fetch videos from the external API"""
+    try:
+        # Get count parameter (default to 1)
+        count = int(request.args.get('count', 1))
+        
+        # Limit count to reasonable number to prevent abuse
+        count = min(count, 5)
+        
+        videos = []
+        for _ in range(count):
+            response = requests.get(API_URL, headers=HEADERS)
+            
+            # Check if request was successful
+            if response.status_code == 200:
+                data = response.json()
+                if data.get('code') == 200 and data.get('data'):
+                    video_url = data.get('data')
+                    videos.append({
+                        'url': video_url,
+                        'timestamp': None  # Client will set this
+                    })
+                else:
+                    logger.warning(f"API returned unexpected data format: {data}")
+            else:
+                logger.error(f"API request failed with status code: {response.status_code}")
+                
+        return jsonify({
+            'success': True,
+            'videos': videos
+        })
+    
+    except Exception as e:
+        logger.error(f"Error fetching videos: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': 'Failed to fetch videos',
+            'message': str(e)
+        }), 500
+
+@app.errorhandler(404)
+def page_not_found(e):
+    """Handle 404 errors"""
+    return render_template('error.html', error='Page not found'), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    """Handle 500 errors"""
+    return render_template('error.html', error='Server error'), 500
+
+if __name__ == '__main__':
+    # Get port from environment variable or default to 7860
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

requirements.txt

@@ -0,0 +1,11 @@
+Flask
+requests
+Werkzeug
+certifi
+charset-normalizer
+click
+idna
+itsdangerous
+Jinja2
+MarkupSafe
+urllib3

static/css/styles.css

@@ -0,0 +1,753 @@
+:root {
+    --primary-color: #FF2C55;
+    --secondary-color: #00F2EA;
+    --dark-color: #121212;
+    --darker-color: #0A0A0A;
+    --light-color: #ffffff;
+    --gray-color: #888888;
+    --light-gray-color: #CCCCCC;
+    --overlay-color: rgba(0, 0, 0, 0.4);
+    --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 40%);
+    --card-background: rgba(255, 255, 255, 0.08);
+    --blur-effect: blur(10px);
+    --transition-normal: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+    --transition-slow: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+    --shadow-normal: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.2);
+    --border-radius: 12px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Nunito', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--dark-color);
+    color: var(--light-color);
+    overflow: hidden;
+    touch-action: pan-y;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.app-container {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Main screens */
+.screen {
+    width: 100%;
+    height: calc(100vh - 60px);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: var(--transition-normal);
+    opacity: 0;
+    visibility: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    background-color: var(--darker-color);
+}
+
+.screen.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Video Feed Screen */
+.video-feed {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: black;
+}
+
+.video-card {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: var(--transition-slow);
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.video-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40%;
+    background: var(--gradient-overlay);
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 20px;
+}
+
+.action-buttons {
+    position: absolute;
+    right: 16px;
+    bottom: 120px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 10;
+ }
+ 
+ .action-button {
+    width: 48px;
+    height: 48px;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    cursor: pointer;
+    backdrop-filter: var(--blur-effect);
+    -webkit-backdrop-filter: var(--blur-effect);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: var(--shadow-normal);
+    transition: var(--transition-normal);
+    position: relative;
+ }
+ 
+ .action-button:hover, .action-button:active {
+    transform: scale(1.1);
+    background-color: rgba(255, 255, 255, 0.25);
+ }
+ 
+ .action-button.like {
+    background-color: rgba(255, 44, 85, 0.2);
+ }
+ 
+ .action-button.like.active {
+    background-color: rgba(255, 44, 85, 0.6);
+ }
+ 
+ .action-button.favorite {
+    background-color: rgba(255, 215, 0, 0.2);
+ }
+ 
+ .action-button.favorite.active {
+    background-color: rgba(255, 215, 0, 0.6);
+ }
+ 
+ .action-count {
+    position: absolute;
+    bottom: -6px;
+    font-size: 12px;
+    font-weight: 600;
+ }
+ 
+ .action-label {
+    font-size: 12px;
+    margin-top: 5px;
+    color: var(--light-color);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+ }
+ 
+ .loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--dark-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+ }
+ 
+ .loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 3px solid transparent;
+    border-top: 3px solid var(--primary-color);
+    border-right: 3px solid var(--secondary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+ }
+ 
+ @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+ }
+ 
+ .loading-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--light-color);
+    text-align: center;
+ }
+ 
+ .swipe-indicator {
+    position: absolute;
+    bottom: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    opacity: 0.8;
+    z-index: 10;
+    animation: pulse 2s infinite;
+ }
+ 
+ @keyframes pulse {
+    0% { opacity: 0.4; transform: translateX(-50%) scale(0.95); }
+    50% { opacity: 0.8; transform: translateX(-50%) scale(1); }
+    100% { opacity: 0.4; transform: translateX(-50%) scale(0.95); }
+ }
+ 
+ .swipe-icon {
+    width: 36px;
+    height: 36px;
+    margin-bottom: 8px;
+ }
+ 
+ .swipe-text {
+    font-size: 14px;
+    color: var(--light-color);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+    font-weight: 600;
+ }
+ 
+ .header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    z-index: 100;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
+ }
+ 
+ .app-title {
+    display: flex;
+    align-items: center;
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--light-color);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+ }
+ 
+ .app-title .accent {
+    color: var(--primary-color);
+ }
+ 
+ .logo-small {
+    width: 28px;
+    height: 28px;
+    margin-right: 8px;
+ }
+ 
+ .progress-bar {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: rgba(255, 255, 255, 0.2);
+    z-index: 100;
+ }
+ 
+ .progress-fill {
+    height: 100%;
+    width: 0;
+    background-color: var(--primary-color);
+    transition: width 0.1s linear;
+ }
+ 
+ .video-info {
+    padding: 12px 16px;
+    position: relative;
+    z-index: 10;
+ }
+ 
+ .video-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+ }
+ 
+ .video-desc {
+    font-size: 14px;
+    opacity: 0.9;
+    margin-bottom: 12px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+ }
+ 
+ .video-meta {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    opacity: 0.7;
+ }
+ 
+ .video-meta-item {
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+ }
+ 
+ .video-meta-item svg {
+    margin-right: 4px;
+    width: 14px;
+    height: 14px;
+ }
+ 
+ .play-pause-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: 80px;
+    height: 80px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 15;
+    opacity: 0;
+    transition: var(--transition-normal);
+    backdrop-filter: var(--blur-effect);
+    -webkit-backdrop-filter: var(--blur-effect);
+ }
+ 
+ .play-pause-overlay.visible {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+ }
+ 
+ .volume-control {
+    position: absolute;
+    right: 16px;
+    top: 80px;
+    width: 40px;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    cursor: pointer;
+    backdrop-filter: var(--blur-effect);
+    -webkit-backdrop-filter: var(--blur-effect);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: var(--shadow-normal);
+ }
+ 
+ /* Navigation Bar */
+ .nav-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background-color: rgba(18, 18, 18, 0.95);
+    backdrop-filter: var(--blur-effect);
+    -webkit-backdrop-filter: var(--blur-effect);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+ 
+ .nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+    width: 25%;
+    cursor: pointer;
+ }
+ 
+ .nav-icon {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 4px;
+    transition: var(--transition-normal);
+    color: var(--gray-color);
+ }
+ 
+ .nav-label {
+    font-size: 12px;
+    transition: var(--transition-normal);
+    color: var(--gray-color);
+ }
+ 
+ .nav-item.active .nav-label {
+    color: var(--primary-color);
+ }
+ 
+ .nav-item.active .nav-icon {
+    color: var(--primary-color);
+ }
+ 
+ /* History Screen */
+ .history-screen, .favorites-screen {
+    background-color: var(--darker-color);
+    padding: 70px 0 20px 0;
+ }
+ 
+ .screen-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    margin-bottom: 20px;
+ }
+ 
+ .section-title {
+    font-size: 24px;
+    font-weight: 700;
+ }
+ 
+ .clear-btn {
+    background-color: rgba(255, 255, 255, 0.1);
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    color: var(--light-gray-color);
+    font-size: 14px;
+    cursor: pointer;
+    transition: var(--transition-normal);
+ }
+ 
+ .clear-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+ }
+ 
+ .video-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    padding: 0 16px 80px 16px;
+ }
+ 
+ .video-item {
+    background-color: var(--card-background);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-normal);
+    transition: var(--transition-normal);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+ 
+ .video-item:hover, .video-item:active {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-elevated);
+ }
+ 
+ .video-thumbnail {
+    position: relative;
+    width: 100%;
+    padding-top: 177.77%; /* 16:9 aspect ratio */
+    overflow: hidden;
+    background-color: #333;
+ }
+ 
+ .video-thumbnail img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+ }
+ 
+ .video-duration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+ }
+ 
+ .video-item-info {
+    padding: 10px;
+ }
+ 
+ .video-item-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+ }
+ 
+ .video-item-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    color: var(--gray-color);
+ }
+ 
+ .time-ago {
+    display: flex;
+    align-items: center;
+ }
+ 
+ .time-ago svg {
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+ }
+ 
+ /* Empty state */
+ .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+    text-align: center;
+    padding: 20px;
+    color: var(--gray-color);
+ }
+ 
+ .empty-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    opacity: 0.5;
+ }
+ 
+ .empty-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 10px;
+ }
+ 
+ .empty-desc {
+    font-size: 14px;
+    max-width: 280px;
+ }
+ 
+ /* Profile Screen */
+ .profile-screen {
+    background-color: var(--darker-color);
+    padding-top: 0;
+ }
+ 
+ .profile-header {
+    height: 200px;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    padding-bottom: 24px;
+ }
+ 
+ .profile-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 4px solid white;
+    overflow: hidden;
+    margin-bottom: 12px;
+    box-shadow: var(--shadow-elevated);
+ }
+ 
+ .profile-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+ }
+ 
+ .profile-name {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 4px;
+ }
+ 
+ .profile-stats {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    padding: 20px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+ 
+ .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+ }
+ 
+ .stat-value {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 4px;
+ }
+ 
+ .stat-label {
+    font-size: 12px;
+    color: var(--gray-color);
+ }
+ 
+ .profile-actions {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 16px 80px 16px;
+ }
+ 
+ .action-row {
+    display: flex;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+ }
+ 
+ .action-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+    opacity: 0.8;
+ }
+ 
+ .action-text {
+    flex: 1;
+    font-size: 16px;
+ }
+ 
+ .action-arrow {
+    width: 20px;
+    height: 20px;
+    opacity: 0.5;
+ }
+ 
+ /* Toast notification */
+ .toast {
+    position: fixed;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 30px;
+    font-size: 14px;
+    z-index: 2000;
+    backdrop-filter: var(--blur-effect);
+    -webkit-backdrop-filter: var(--blur-effect);
+    opacity: 0;
+    transition: var(--transition-normal);
+    pointer-events: none;
+ }
+ 
+ .toast.show {
+    opacity: 1;
+ }
+ 
+ /* Error page */
+ .error-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: var(--darker-color);
+ }
+ 
+ .error-card {
+    background-color: var(--dark-color);
+    border-radius: var(--border-radius);
+    padding: 40px;
+    max-width: 90%;
+    width: 400px;
+    text-align: center;
+    box-shadow: var(--shadow-elevated);
+ }
+ 
+ .logo {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+ }
+ 
+ .button {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: var(--primary-color);
+    color: white;
+    text-decoration: none;
+    border-radius: 30px;
+    font-weight: 600;
+    transition: var(--transition-normal);
+ }
+ 
+ .button:hover {
+    background-color: #ff4d6e;
+    transform: translateY(-2px);
+ }
+ 
+ /* Animation for card transition */
+ @keyframes slideInUp {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+ }
+ 
+ .slide-in {
+    animation: slideInUp 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+ }
+ 
+ /* Responsive adjustments */
+ @media (min-width: 768px) {
+    .video-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+ }
+ 
+ @media (min-width: 1024px) {
+    .video-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+ }

static/js/main.js

@@ -0,0 +1,375 @@
+/**
+ * VideoCharm - Main Application
+ * Core application logic and initialization
+ */
+
+const App = (function() {
+    // DOM Elements
+    let loadingScreen;
+    let toast;
+    let navItems;
+    let screens;
+    let historyList;
+    let favoritesList;
+    let emptyHistory;
+    let emptyFavorites;
+    let clearHistoryBtn;
+    let clearFavoritesBtn;
+    let likesCount;
+    let favoritesCount;
+    let viewsCount;
+    let swipeIndicator;
+    let profileActions;
+    
+    /**
+     * Initialize the application
+     */
+    function init() {
+        // Get DOM elements
+        loadingScreen = document.getElementById('loadingScreen');
+        toast = document.getElementById('toast');
+        navItems = document.querySelectorAll('.nav-item');
+        screens = document.querySelectorAll('.screen');
+        historyList = document.getElementById('historyList');
+        favoritesList = document.getElementById('favoritesList');
+        emptyHistory = document.getElementById('emptyHistory');
+        emptyFavorites = document.getElementById('emptyFavorites');
+        clearHistoryBtn = document.getElementById('clearHistoryBtn');
+        clearFavoritesBtn = document.getElementById('clearFavoritesBtn');
+        likesCount = document.getElementById('likesCount');
+        favoritesCount = document.getElementById('favoritesCount');
+        viewsCount = document.getElementById('viewsCount');
+        swipeIndicator = document.getElementById('swipeIndicator');
+        profileActions = document.querySelectorAll('.action-row');
+        
+        // Initialize storage
+        StorageManager.init();
+        
+        // Initialize video player
+        VideoPlayer.init();
+        
+        // Set up event listeners
+        setupEventListeners();
+        
+        // Load initial videos
+        VideoPlayer.loadVideos(3).then(() => {
+            // Show swipe indicator after initial load
+            setTimeout(() => {
+                swipeIndicator.style.display = 'flex';
+                setTimeout(() => {
+                    swipeIndicator.style.opacity = '0';
+                    setTimeout(() => {
+                        swipeIndicator.style.display = 'none';
+                    }, 500);
+                }, 5000);
+            }, 1000);
+        });
+        
+        // Update statistics
+        updateStats();
+    }
+    
+    /**
+     * Set up event listeners
+     */
+    function setupEventListeners() {
+        // Navigation
+        navItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const targetScreen = this.getAttribute('data-screen');
+                switchToScreen(targetScreen);
+            });
+        });
+        
+        // Clear history button
+        clearHistoryBtn.addEventListener('click', function() {
+            if (confirm('确定要清空所有观看历史吗？')) {
+                StorageManager.clearHistory();
+                loadHistoryList();
+                updateStats();
+                showToast('历史记录已清空');
+            }
+        });
+        
+        // Clear favorites button
+        clearFavoritesBtn.addEventListener('click', function() {
+            if (confirm('确定要清空所有收藏吗？')) {
+                StorageManager.clearFavorites();
+                loadFavoritesList();
+                updateStats();
+                showToast('收藏夹已清空');
+            }
+        });
+        
+        // Profile actions
+        profileActions.forEach(action => {
+            action.addEventListener('click', function() {
+                const actionType = this.getAttribute('data-action');
+                handleProfileAction(actionType);
+            });
+        });
+        
+        // Comment button
+        document.getElementById('commentButton').addEventListener('click', function() {
+            showToast('评论功能开发中，敬请期待！');
+        });
+        
+        // Share button
+        document.getElementById('shareButton').addEventListener('click', function() {
+            showToast('分享功能开发中，敬请期待！');
+        });
+    }
+    
+    /**
+     * Switch to a different screen
+     * @param {String} screenId ID of screen to switch to
+     */
+    function switchToScreen(screenId) {
+        // Update navigation
+        navItems.forEach(item => {
+            item.classList.remove('active');
+            if (item.getAttribute('data-screen') === screenId) {
+                item.classList.add('active');
+            }
+        });
+        
+        // Update screens
+        screens.forEach(screen => {
+            screen.classList.remove('active');
+            if (screen.id === screenId) {
+                screen.classList.add('active');
+            }
+        });
+        
+        // Handle specific screen actions
+        if (screenId === 'historyScreen') {
+            loadHistoryList();
+        } else if (screenId === 'favoritesScreen') {
+            loadFavoritesList();
+        }
+    }
+    
+    /**
+     * Load history list from storage
+     */
+    function loadHistoryList() {
+        const history = StorageManager.getHistory();
+        
+        // Clear list
+        historyList.innerHTML = '';
+        
+        if (history.length === 0) {
+            // Show empty state
+            emptyHistory.style.display = 'flex';
+            historyList.style.display = 'none';
+        } else {
+            // Hide empty state
+            emptyHistory.style.display = 'none';
+            historyList.style.display = 'grid';
+            
+            // Add history items
+            history.forEach(item => {
+                const videoItem = createVideoListItem(item, 'history');
+                historyList.appendChild(videoItem);
+            });
+        }
+    }
+    
+    /**
+     * Load favorites list from storage
+     */
+    function loadFavoritesList() {
+        const favorites = StorageManager.getFavorites();
+        
+        // Clear list
+        favoritesList.innerHTML = '';
+        
+        if (favorites.length === 0) {
+            // Show empty state
+            emptyFavorites.style.display = 'flex';
+            favoritesList.style.display = 'none';
+        } else {
+            // Hide empty state
+            emptyFavorites.style.display = 'none';
+            favoritesList.style.display = 'grid';
+            
+            // Add favorite items
+            favorites.forEach(item => {
+                const videoItem = createVideoListItem(item, 'favorite');
+                favoritesList.appendChild(videoItem);
+            });
+        }
+    }
+    
+    /**
+     * Create a video list item for history or favorites
+     * @param {Object} videoData Video data
+     * @param {String} type Item type ('history' or 'favorite')
+     * @returns {HTMLElement} Video list item element
+     */
+    function createVideoListItem(videoData, type) {
+        const videoItem = document.createElement('div');
+        videoItem.className = 'video-item';
+        videoItem.setAttribute('data-id', videoData.id);
+        
+        // Generate thumbnail (in real app, would use actual video thumbnails)
+        const thumbnailUrl = videoData.thumbnail || generatePlaceholderImage();
+        
+        videoItem.innerHTML = `
+            <div class="video-thumbnail">
+                <img src="${thumbnailUrl}" alt="${videoData.title}">
+                <div class="video-duration">${formatDuration(videoData.duration)}</div>
+            </div>
+            <div class="video-item-info">
+                <div class="video-item-title">${videoData.title}</div>
+                <div class="video-item-meta">
+                    <div class="time-ago">
+                        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z"/>
+                        </svg>
+                        ${formatTimeAgo(videoData.timestamp)}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add click event
+        videoItem.addEventListener('click', function() {
+            VideoPlayer.playVideoFromLibrary(videoData);
+            showToast(`正在播放${type === 'favorite' ? '收藏' : '历史'}视频`);
+        });
+        
+        return videoItem;
+    }
+    
+    /**
+     * Update profile statistics
+     */
+    function updateStats() {
+        const likes = StorageManager.getLikes().length;
+        const favorites = StorageManager.getFavorites().length;
+        const views = StorageManager.getViews();
+        
+        likesCount.textContent = likes;
+        favoritesCount.textContent = favorites;
+        viewsCount.textContent = views;
+    }
+    
+    /**
+     * Handle profile action
+     * @param {String} actionType Type of action
+     */
+    function handleProfileAction(actionType) {
+        switch (actionType) {
+            case 'settings':
+            case 'preferences':
+            case 'about':
+                showToast(`${actionType} 功能开发中，敬请期待`);
+                break;
+            case 'logout':
+                if (confirm('确定要退出登录吗？')) {
+                    showToast('退出登录成功');
+                }
+                break;
+        }
+    }
+    
+    /**
+     * Show loading screen
+     */
+    function showLoading() {
+        loadingScreen.style.display = 'flex';
+    }
+    
+    /**
+     * Hide loading screen
+     */
+    function hideLoading() {
+        loadingScreen.style.display = 'none';
+    }
+    
+    /**
+     * Show toast message
+     * @param {String} message Message to show
+     * @param {Number} duration Duration in ms
+     */
+    function showToast(message, duration = 2000) {
+        toast.textContent = message;
+        toast.classList.add('show');
+        
+        setTimeout(() => {
+            toast.classList.remove('show');
+        }, duration);
+    }
+    
+    /**
+     * Format duration in seconds to MM:SS
+     * @param {Number} seconds Duration in seconds
+     * @returns {String} Formatted duration
+     */
+    function formatDuration(seconds) {
+        if (!seconds) return '00:00';
+        
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+    }
+    
+    /**
+     * Format timestamp to relative time
+     * @param {Number} timestamp Timestamp
+     * @returns {String} Formatted time
+     */
+    function formatTimeAgo(timestamp) {
+        const now = new Date().getTime();
+        const diff = now - timestamp;
+        
+        // Less than 1 minute
+        if (diff < 60 * 1000) {
+            return "刚刚";
+        }
+        
+        // Less than 1 hour
+        if (diff < 60 * 60 * 1000) {
+            return Math.floor(diff / (60 * 1000)) + "分钟前";
+        }
+        
+        // Less than 24 hours
+        if (diff < 24 * 60 * 60 * 1000) {
+            return Math.floor(diff / (60 * 60 * 1000)) + "小时前";
+        }
+        
+        // Less than 7 days
+        if (diff < 7 * 24 * 60 * 60 * 1000) {
+            return Math.floor(diff / (24 * 60 * 60 * 1000)) + "天前";
+        }
+        
+        // Format as date
+        const date = new Date(timestamp);
+        return `${date.getMonth() + 1}月${date.getDate()}日`;
+    }
+    
+    /**
+     * Generate placeholder image URL
+     * @returns {String} Image URL
+     */
+    function generatePlaceholderImage() {
+        const randomId = Math.floor(Math.random() * 1000);
+        return `https://picsum.photos/seed/${randomId}/300/500`;
+    }
+    
+    // Public API
+    return {
+        init: init,
+        showLoading: showLoading,
+        hideLoading: hideLoading,
+        showToast: showToast,
+        switchToScreen: switchToScreen,
+        updateStats: updateStats
+    };
+})();
+
+// Initialize application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    App.init();
+});

static/js/player.js

@@ -0,0 +1,548 @@
+/**
+ * VideoCharm - Video Player
+ * Handles video playback and interaction
+ */
+
+const VideoPlayer = (function() {
+    // DOM Elements
+    let videoFeed;
+    let progressFill;
+    let playPauseOverlay;
+    let playIcon;
+    let pauseIcon;
+    let volumeControl;
+    let volumeOnIcon;
+    let volumeOffIcon;
+    let likeButton;
+    let favoriteButton;
+    let likeCount;
+    let favoriteCount;
+    
+    // State
+    let videos = [];
+    let currentIndex = 0;
+    let touchStartY = 0;
+    let touchEndY = 0;
+    let isLoading = false;
+    let isMuted = false;
+    
+    /**
+     * Initialize the video player
+     */
+    function init() {
+        // Get DOM elements
+        videoFeed = document.getElementById('videoFeed');
+        progressFill = document.getElementById('progressFill');
+        playPauseOverlay = document.getElementById('playPauseOverlay');
+        playIcon = document.getElementById('playIcon');
+        pauseIcon = document.getElementById('pauseIcon');
+        volumeControl = document.getElementById('volumeControl');
+        volumeOnIcon = document.getElementById('volumeOnIcon');
+        volumeOffIcon = document.getElementById('volumeOffIcon');
+        likeButton = document.getElementById('likeButton');
+        favoriteButton = document.getElementById('favoriteButton');
+        likeCount = document.getElementById('likeCount');
+        favoriteCount = document.getElementById('favoriteCount');
+        
+        // Set up event listeners
+        setupEventListeners();
+    }
+    
+    /**
+     * Set up event listeners for player controls
+     */
+    function setupEventListeners() {
+        // Touch swipe detection
+        document.addEventListener('touchstart', handleTouchStart);
+        document.addEventListener('touchend', handleTouchEnd);
+        
+        // Video feed click
+        videoFeed.addEventListener('click', handleVideoClick);
+        
+        // Volume control
+        volumeControl.addEventListener('click', toggleMute);
+        
+        // Action buttons
+        likeButton.addEventListener('click', toggleLike);
+        favoriteButton.addEventListener('click', toggleFavorite);
+    }
+    
+    /**
+     * Load videos from the API
+     * @param {Number} count Number of videos to load
+     * @returns {Promise} Promise that resolves when videos are loaded
+     */
+    function loadVideos(count = 1) {
+        isLoading = true;
+        App.showLoading();
+        
+        return fetch(`/api/videos?count=${count}`)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success && data.videos && data.videos.length > 0) {
+                    data.videos.forEach(videoData => {
+                        createVideoElement(videoData.url);
+                    });
+                    
+                    // Start playing first video if this is initial load
+                    if (videos.length === count) {
+                        playCurrentVideo();
+                    }
+                } else {
+                    throw new Error('No videos returned from API');
+                }
+            })
+            .catch(error => {
+                console.error('Error loading videos:', error);
+                App.showToast('加载视频失败，请检查网络连接');
+            })
+            .finally(() => {
+                isLoading = false;
+                App.hideLoading();
+            });
+    }
+    
+    /**
+     * Create a new video element
+     * @param {String} videoUrl URL of the video
+     */
+    function createVideoElement(videoUrl) {
+        if (!videoUrl) return;
+        
+        // Create container
+        const videoCard = document.createElement('div');
+        videoCard.className = 'video-card';
+        videoCard.style.transform = `translateY(${100 * videos.length}%)`;
+        
+        // Create video element
+        const video = document.createElement('video');
+        video.src = videoUrl;
+        video.loop = true;
+        video.preload = 'auto';
+        video.muted = isMuted;
+        video.playsInline = true;
+        video.setAttribute('webkit-playsinline', '');
+        
+        // Generate random data for the video
+        const videoId = generateVideoId();
+        const videoTitle = `精彩视频 #${videos.length + 1}`;
+        const videoDesc = getRandomDescription();
+        const randomLikes = Math.floor(Math.random() * 1000) + 1;
+        
+        // Create video object
+        const videoObj = {
+            id: videoId,
+            url: videoUrl,
+            title: videoTitle,
+            desc: videoDesc,
+            element: videoCard,
+            video: video,
+            likes: randomLikes,
+            timestamp: new Date().getTime(),
+            duration: 0
+        };
+        
+        // Create video overlay with info
+        const overlay = document.createElement('div');
+        overlay.className = 'video-overlay';
+        
+        const videoInfo = document.createElement('div');
+       videoInfo.className = 'video-info';
+       
+       const titleEl = document.createElement('div');
+       titleEl.className = 'video-title';
+       titleEl.textContent = videoObj.title;
+       
+       const descEl = document.createElement('div');
+       descEl.className = 'video-desc';
+       descEl.textContent = videoObj.desc;
+       
+       const metaEl = document.createElement('div');
+       metaEl.className = 'video-meta';
+       
+       const durationEl = document.createElement('div');
+       durationEl.className = 'video-meta-item duration';
+       durationEl.innerHTML = `
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+               <path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z"/>
+           </svg>
+           <span>00:00</span>
+       `;
+       
+       metaEl.appendChild(durationEl);
+       videoInfo.appendChild(titleEl);
+       videoInfo.appendChild(descEl);
+       videoInfo.appendChild(metaEl);
+       overlay.appendChild(videoInfo);
+       
+       // Add elements to DOM
+       videoCard.appendChild(video);
+       videoCard.appendChild(overlay);
+       videoFeed.appendChild(videoCard);
+       
+       // Add to videos array
+       videos.push(videoObj);
+       
+       // Set up video event listeners
+       setupVideoEvents(video, videoObj, durationEl);
+   }
+   
+   /**
+    * Set up event listeners for a video
+    * @param {HTMLElement} video Video element
+    * @param {Object} videoObj Video object
+    * @param {HTMLElement} durationEl Duration display element
+    */
+   function setupVideoEvents(video, videoObj, durationEl) {
+       // Update duration when metadata is loaded
+       video.addEventListener('loadedmetadata', function() {
+           videoObj.duration = Math.round(video.duration);
+           const durationSpan = durationEl.querySelector('span');
+           if (durationSpan) {
+               durationSpan.textContent = formatDuration(videoObj.duration);
+           }
+       });
+       
+       // Update progress bar
+       video.addEventListener('timeupdate', function() {
+           if (videos.indexOf(videoObj) === currentIndex) {
+               const progress = (video.currentTime / video.duration) * 100;
+               progressFill.style.width = `${progress}%`;
+           }
+       });
+       
+       // Handle video errors
+       video.addEventListener('error', function() {
+           console.error('Video load error:', videoObj.url);
+           App.showToast('视频加载失败，正在尝试下一个');
+           if (videos.indexOf(videoObj) === currentIndex) {
+               switchToVideo(currentIndex + 1);
+           }
+       });
+   }
+   
+   /**
+    * Switch to a different video
+    * @param {Number} index Index of video to switch to
+    */
+   function switchToVideo(index) {
+       if (index < 0 || index >= videos.length || isLoading) return;
+       
+       // Pause all videos
+       videos.forEach(item => {
+           item.video.pause();
+       });
+       
+       // Update current index
+       currentIndex = index;
+       
+       // Update video positions
+       updateVideoPositions();
+       
+       // Play current video
+       playCurrentVideo();
+       
+       // Reset progress bar
+       progressFill.style.width = '0';
+       
+       // Update action buttons
+       updateActionButtons();
+       
+       // Add to history
+       if (videos[currentIndex]) {
+           StorageManager.addToHistory(videos[currentIndex]);
+       }
+       
+       // Load more videos if needed
+       if (currentIndex >= videos.length - 2) {
+           loadVideos(2);
+       }
+   }
+   
+   /**
+    * Play the current video
+    */
+   function playCurrentVideo() {
+       if (!videos[currentIndex]) return;
+       
+       const video = videos[currentIndex].video;
+       
+       // Try to play and handle autoplay restrictions
+       const playPromise = video.play();
+       
+       if (playPromise !== undefined) {
+           playPromise.catch(error => {
+               // Auto-play was prevented, set muted and try again
+               console.log('Autoplay prevented, trying muted playback');
+               video.muted = true;
+               isMuted = true;
+               updateVolumeUI();
+               video.play().catch(e => {
+                   console.error('Failed to play video even with mute:', e);
+               });
+           });
+       }
+   }
+   
+   /**
+    * Update positions of all videos
+    */
+   function updateVideoPositions() {
+       videos.forEach((item, idx) => {
+           item.element.style.transform = `translateY(${(idx - currentIndex) * 100}%)`;
+       });
+   }
+   
+   /**
+    * Update action buttons state based on current video
+    */
+   function updateActionButtons() {
+       if (!videos[currentIndex]) return;
+       
+       const videoId = videos[currentIndex].id;
+       
+       // Update like button
+       if (StorageManager.isLiked(videoId)) {
+           likeButton.classList.add('active');
+       } else {
+           likeButton.classList.remove('active');
+       }
+       
+       // Update favorite button
+       if (StorageManager.isFavorite(videoId)) {
+           favoriteButton.classList.add('active');
+       } else {
+           favoriteButton.classList.remove('active');
+       }
+       
+       // Update counts
+       likeCount.textContent = Math.floor(videos[currentIndex].likes);
+       favoriteCount.textContent = StorageManager.isFavorite(videoId) ? '1' : '0';
+   }
+   
+   /**
+    * Handle touch start event
+    * @param {Event} e Touch event
+    */
+   function handleTouchStart(e) {
+       touchStartY = e.touches[0].clientY;
+   }
+   
+   /**
+    * Handle touch end event
+    * @param {Event} e Touch event
+    */
+   function handleTouchEnd(e) {
+       // Only process touch events on home screen
+       if (!document.getElementById('homeScreen').classList.contains('active')) {
+           return;
+       }
+       
+       touchEndY = e.changedTouches[0].clientY;
+       const deltaY = touchStartY - touchEndY;
+       
+       // If swipe distance is significant
+       if (Math.abs(deltaY) > 50) {
+           if (deltaY > 0) {
+               // Swipe up - next video
+               switchToVideo(currentIndex + 1);
+           } else {
+               // Swipe down - previous video
+               switchToVideo(currentIndex - 1);
+           }
+       }
+   }
+   
+   /**
+    * Handle click on video feed
+    * @param {Event} e Click event
+    */
+   function handleVideoClick(e) {
+       // Ignore clicks on controls
+       if (e.target.closest('.action-button') || 
+           e.target.closest('.volume-control')) {
+           return;
+       }
+       
+       // Toggle play/pause
+       if (!videos[currentIndex]) return;
+       
+       const video = videos[currentIndex].video;
+       
+       if (video.paused) {
+           video.play();
+           playIcon.style.display = 'block';
+           pauseIcon.style.display = 'none';
+       } else {
+           video.pause();
+           playIcon.style.display = 'none';
+           pauseIcon.style.display = 'block';
+       }
+       
+       // Show play/pause overlay
+       playPauseOverlay.classList.add('visible');
+       setTimeout(() => {
+           playPauseOverlay.classList.remove('visible');
+       }, 800);
+   }
+   
+   /**
+    * Toggle mute state
+    */
+   function toggleMute() {
+       isMuted = !isMuted;
+       
+       // Update all videos
+       videos.forEach(item => {
+           item.video.muted = isMuted;
+       });
+       
+       // Update UI
+       updateVolumeUI();
+       
+       // Show toast
+       App.showToast(isMuted ? '已静音' : '已开启声音');
+   }
+   
+   /**
+    * Update volume control UI
+    */
+   function updateVolumeUI() {
+       if (isMuted) {
+           volumeOnIcon.style.display = 'none';
+           volumeOffIcon.style.display = 'block';
+       } else {
+           volumeOnIcon.style.display = 'block';
+           volumeOffIcon.style.display = 'none';
+       }
+   }
+   
+   /**
+    * Toggle like for current video
+    */
+   function toggleLike() {
+       if (!videos[currentIndex]) return;
+       
+       const videoId = videos[currentIndex].id;
+       const newLikeState = StorageManager.toggleLike(videoId);
+       
+       // Update UI
+       if (newLikeState) {
+           likeButton.classList.add('active');
+           videos[currentIndex].likes++;
+           App.showToast('已添加到喜欢');
+       } else {
+           likeButton.classList.remove('active');
+           videos[currentIndex].likes--;
+           App.showToast('已取消喜欢');
+       }
+       
+       // Update count
+       likeCount.textContent = Math.floor(videos[currentIndex].likes);
+       
+       // Update profile stats
+       App.updateStats();
+   }
+   
+   /**
+    * Toggle favorite for current video
+    */
+   function toggleFavorite() {
+       if (!videos[currentIndex]) return;
+       
+       const newFavoriteState = StorageManager.toggleFavorite(videos[currentIndex]);
+       
+       // Update UI
+       if (newFavoriteState) {
+           favoriteButton.classList.add('active');
+           favoriteCount.textContent = '1';
+           App.showToast('已添加到收藏');
+       } else {
+           favoriteButton.classList.remove('active');
+           favoriteCount.textContent = '0';
+           App.showToast('已取消收藏');
+       }
+       
+       // Update profile stats
+       App.updateStats();
+   }
+   
+   /**
+    * Play a video from the history or favorites
+    * @param {Object} videoData Video data from storage
+    */
+   function playVideoFromLibrary(videoData) {
+       if (!videoData || !videoData.url) return;
+       
+       // Check if video is already loaded
+       const existingIndex = videos.findIndex(v => v.id === videoData.id);
+       
+       if (existingIndex !== -1) {
+           // Switch to existing video
+           switchToVideo(existingIndex);
+       } else {
+           // Create new video element
+           createVideoElement(videoData.url);
+           
+           // Switch to the new video
+           switchToVideo(videos.length - 1);
+       }
+       
+       // Switch to home screen
+       App.switchToScreen('homeScreen');
+   }
+   
+   /**
+    * Generate a unique video ID
+    * @returns {String} Unique ID
+    */
+   function generateVideoId() {
+       return 'v_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
+   }
+   
+   /**
+    * Format duration in seconds to MM:SS
+    * @param {Number} seconds Duration in seconds
+    * @returns {String} Formatted duration
+    */
+   function formatDuration(seconds) {
+       if (!seconds) return '00:00';
+       
+       const minutes = Math.floor(seconds / 60);
+       const remainingSeconds = Math.floor(seconds % 60);
+       return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+   }
+   
+   /**
+    * Get random video description
+    * @returns {String} Random description
+    */
+   function getRandomDescription() {
+       const descriptions = [
+           "精选高质量视频，带给你视觉享受",
+           "每日精选，让你流连忘返",
+           "热门推荐，不容错过的精彩瞬间",
+           "探索更多精彩内容，尽在VideoCharm",
+           "发现生活中的美好瞬间",
+           "精彩纷呈，尽在眼前",
+           "让心情放松的精选内容",
+           "视觉盛宴，触手可及"
+       ];
+       
+       return descriptions[Math.floor(Math.random() * descriptions.length)];
+   }
+   
+   // Public API
+   return {
+       init: init,
+       loadVideos: loadVideos,
+       switchToVideo: switchToVideo,
+       playVideoFromLibrary: playVideoFromLibrary,
+       updateVideoPositions: updateVideoPositions
+   };
+})();

static/js/storage.js

@@ -0,0 +1,266 @@
+/**
+ * VideoCharm - Local Storage Management
+ * Handles all local storage operations for history and favorites
+ */
+
+const StorageManager = (function() {
+    // Storage keys
+    const KEYS = {
+        HISTORY: 'videocharm_history',
+        FAVORITES: 'videocharm_favorites',
+        LIKES: 'videocharm_likes',
+        VIEWS: 'videocharm_views'
+    };
+    
+    // Maximum storage age (7 days in milliseconds)
+    const MAX_HISTORY_AGE = 7 * 24 * 60 * 60 * 1000;
+    
+    /**
+     * Initialize storage with default values if not exists
+     */
+    function initStorage() {
+        if (!localStorage.getItem(KEYS.HISTORY)) {
+            localStorage.setItem(KEYS.HISTORY, JSON.stringify([]));
+        }
+        
+        if (!localStorage.getItem(KEYS.FAVORITES)) {
+            localStorage.setItem(KEYS.FAVORITES, JSON.stringify([]));
+        }
+        
+        if (!localStorage.getItem(KEYS.LIKES)) {
+            localStorage.setItem(KEYS.LIKES, JSON.stringify([]));
+        }
+        
+        if (!localStorage.getItem(KEYS.VIEWS)) {
+            localStorage.setItem(KEYS.VIEWS, JSON.stringify(0));
+        }
+        
+        // Clean up old history entries
+        cleanupHistory();
+    }
+    
+    /**
+     * Remove history items older than MAX_HISTORY_AGE
+     */
+    function cleanupHistory() {
+        const history = getHistory();
+        const now = new Date().getTime();
+        
+        const filteredHistory = history.filter(item => {
+            return (now - item.timestamp) < MAX_HISTORY_AGE;
+        });
+        
+        if (filteredHistory.length !== history.length) {
+            localStorage.setItem(KEYS.HISTORY, JSON.stringify(filteredHistory));
+        }
+    }
+    
+    /**
+     * Get all history items
+     * @returns {Array} History items
+     */
+    function getHistory() {
+        try {
+            return JSON.parse(localStorage.getItem(KEYS.HISTORY)) || [];
+        } catch (e) {
+            console.error('Error parsing history from localStorage:', e);
+            return [];
+        }
+    }
+    
+    /**
+     * Get all favorites
+     * @returns {Array} Favorite items
+     */
+    function getFavorites() {
+        try {
+            return JSON.parse(localStorage.getItem(KEYS.FAVORITES)) || [];
+        } catch (e) {
+            console.error('Error parsing favorites from localStorage:', e);
+            return [];
+        }
+    }
+    
+    /**
+     * Get all liked video IDs
+     * @returns {Array} Liked video IDs
+     */
+    function getLikes() {
+        try {
+            return JSON.parse(localStorage.getItem(KEYS.LIKES)) || [];
+        } catch (e) {
+            console.error('Error parsing likes from localStorage:', e);
+            return [];
+        }
+    }
+    
+    /**
+     * Get view count
+     * @returns {Number} Total view count
+     */
+    function getViews() {
+        try {
+            return parseInt(JSON.parse(localStorage.getItem(KEYS.VIEWS))) || 0;
+        } catch (e) {
+            console.error('Error parsing views from localStorage:', e);
+            return 0;
+        }
+    }
+    
+    /**
+     * Add a video to history
+     * @param {Object} video Video object to add
+     */
+    function addToHistory(video) {
+        if (!video || !video.id || !video.url) return;
+        
+        const history = getHistory();
+        
+        // Check if video already exists in history
+        const existingIndex = history.findIndex(item => item.id === video.id);
+        
+        if (existingIndex !== -1) {
+            // Update timestamp of existing item
+            history[existingIndex].timestamp = new Date().getTime();
+        } else {
+            // Create simplified record for storage
+            const historyItem = {
+                id: video.id,
+                url: video.url,
+                title: video.title || '精彩视频',
+                timestamp: new Date().getTime(),
+                duration: video.duration || 0,
+                thumbnail: video.thumbnail || null
+            };
+            
+            // Add to beginning of array
+            history.unshift(historyItem);
+        }
+        
+        // Save updated history
+        localStorage.setItem(KEYS.HISTORY, JSON.stringify(history));
+        
+        // Increment view count
+        incrementViews();
+    }
+    
+    /**
+     * Toggle favorite status for a video
+     * @param {Object} video Video object
+     * @returns {Boolean} New favorite status
+     */
+    function toggleFavorite(video) {
+        if (!video || !video.id) return false;
+        
+        const favorites = getFavorites();
+        const existingIndex = favorites.findIndex(item => item.id === video.id);
+        
+        if (existingIndex !== -1) {
+            // Remove from favorites
+            favorites.splice(existingIndex, 1);
+            localStorage.setItem(KEYS.FAVORITES, JSON.stringify(favorites));
+            return false;
+        } else {
+            // Create simplified record for storage
+            const favoriteItem = {
+                id: video.id,
+                url: video.url,
+                title: video.title || '精彩视频',
+                timestamp: new Date().getTime(),
+                duration: video.duration || 0,
+                thumbnail: video.thumbnail || null
+            };
+            
+            // Add to favorites
+            favorites.unshift(favoriteItem);
+            localStorage.setItem(KEYS.FAVORITES, JSON.stringify(favorites));
+            return true;
+        }
+    }
+    
+    /**
+     * Check if a video is favorited
+     * @param {String} videoId Video ID to check
+     * @returns {Boolean} Whether video is favorited
+     */
+    function isFavorite(videoId) {
+        if (!videoId) return false;
+        
+        const favorites = getFavorites();
+        return favorites.some(item => item.id === videoId);
+    }
+    
+    /**
+     * Toggle like status for a video
+     * @param {String} videoId Video ID
+     * @returns {Boolean} New like status
+     */
+    function toggleLike(videoId) {
+        if (!videoId) return false;
+        
+        const likes = getLikes();
+        const index = likes.indexOf(videoId);
+        
+        if (index !== -1) {
+            // Remove like
+            likes.splice(index, 1);
+            localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
+            return false;
+        } else {
+            // Add like
+            likes.push(videoId);
+            localStorage.setItem(KEYS.LIKES, JSON.stringify(likes));
+            return true;
+        }
+    }
+    
+    /**
+     * Check if a video is liked
+     * @param {String} videoId Video ID to check
+     * @returns {Boolean} Whether video is liked
+     */
+    function isLiked(videoId) {
+        if (!videoId) return false;
+        
+        const likes = getLikes();
+        return likes.includes(videoId);
+    }
+    
+    /**
+     * Increment view count
+     */
+    function incrementViews() {
+        const views = getViews();
+        localStorage.setItem(KEYS.VIEWS, JSON.stringify(views + 1));
+    }
+    
+    /**
+     * Clear all history
+     */
+    function clearHistory() {
+        localStorage.setItem(KEYS.HISTORY, JSON.stringify([]));
+    }
+    
+    /**
+     * Clear all favorites
+     */
+    function clearFavorites() {
+        localStorage.setItem(KEYS.FAVORITES, JSON.stringify([]));
+    }
+    
+    // Public API
+    return {
+        init: initStorage,
+        getHistory: getHistory,
+        getFavorites: getFavorites,
+        getLikes: getLikes,
+        getViews: getViews,
+        addToHistory: addToHistory,
+        toggleFavorite: toggleFavorite,
+        isFavorite: isFavorite,
+        toggleLike: toggleLike,
+        isLiked: isLiked,
+        clearHistory: clearHistory,
+        clearFavorites: clearFavorites
+    };
+})();

templates/error.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="error-container">
+    <div class="error-card">
+        <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="VideoCharm" class="logo">
+        <h1>{{ error }}</h1>
+        <p>很抱歉，发生了一些错误。</p>
+        <a href="/" class="button">返回首页</a>
+    </div>
+</div>
+{% endblock %}

templates/index.html

@@ -0,0 +1,198 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="app-container">
+    <div class="loading-screen" id="loadingScreen">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">加载精彩内容中...</div>
+    </div>
+    
+    <div class="toast" id="toast"></div>
+    
+    <!-- Home/Feed Screen -->
+    <div class="screen active" id="homeScreen">
+        <div class="header">
+            <div class="app-title">
+                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="VideoCharm" class="logo-small">
+                <span>Video<span class="accent">Charm</span></span>
+            </div>
+        </div>
+        
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+        </div>
+        
+        <div class="video-feed" id="videoFeed"></div>
+        
+        <div class="play-pause-overlay" id="playPauseOverlay">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="playPauseIcon">
+                <path d="M8 5V19L19 12L8 5Z" fill="white" id="playIcon"/>
+                <path d="M6 19H10V5H6V19ZM14 5V19H18V5H14Z" fill="white" id="pauseIcon" style="display: none;"/>
+            </svg>
+        </div>
+        
+        <div class="volume-control" id="volumeControl">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 9V15H7L12 20V4L7 9H3Z" fill="white" id="volumeOffIcon" style="display: none;"/>
+                <path d="M3 9V15H7L12 20V4L7 9H3ZM16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C17.95 19.86 21 16.28 21 12C21 7.72 17.95 4.14 14 3.23Z" fill="white" id="volumeOnIcon"/>
+            </svg>
+        </div>
+        
+        <div class="action-buttons">
+            <div class="action-button like" id="likeButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="#FF2C55"/>
+                </svg>
+                <span class="action-count" id="likeCount">0</span>
+            </div>
+            <div class="action-button favorite" id="favoriteButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="#FFD700"/>
+                </svg>
+                <span class="action-count" id="favoriteCount">0</span>
+            </div>
+            <div class="action-button" id="commentButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21 6H19V15H6V17C6 17.55 6.45 18 7 18H18L22 22V7C22 6.45 21.55 6 21 6ZM17 12V3C17 2.45 16.55 2 16 2H3C2.45 2 2 2.45 2 3V17L6 13H16C16.55 13 17 12.55 17 12Z" fill="white"/>
+                </svg>
+            </div>
+            <div class="action-button" id="shareButton">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="white"/>
+                </svg>
+            </div>
+        </div>
+        
+        <div class="swipe-indicator" id="swipeIndicator">
+            <svg class="swipe-icon" width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z" fill="white"/>
+            </svg>
+            <div class="swipe-text">上滑查看下一个</div>
+        </div>
+    </div>
+    
+    <!-- History Screen -->
+    <div class="screen" id="historyScreen">
+        <div class="screen-header">
+            <h2 class="section-title">我的观看历史</h2>
+            <button id="clearHistoryBtn" class="clear-btn">清空历史</button>
+        </div>
+        <div id="historyList" class="video-grid"></div>
+        <div class="empty-state" id="emptyHistory">
+            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 3C8.03 3 4 7.03 4 12H1L4.89 15.89L4.96 16.03L9 12H6C6 8.13 9.13 5 13 5C16.87 5 20 8.13 20 12C20 15.87 16.87 19 13 19C11.07 19 9.32 18.21 8.06 16.94L6.64 18.36C8.27 19.99 10.51 21 13 21C17.97 21 22 16.97 22 12C22 7.03 17.97 3 13 3ZM12 8V13L16.28 15.54L17 14.33L13.5 12.25V8H12Z" fill="currentColor"/>
+            </svg>
+            <div class="empty-title">暂无观看历史</div>
+            <div class="empty-desc">您浏览过的视频将会显示在这里</div>
+        </div>
+    </div>
+    
+    <!-- Favorites Screen -->
+    <div class="screen" id="favoritesScreen">
+        <div class="screen-header">
+            <h2 class="section-title">我的收藏</h2>
+            <button id="clearFavoritesBtn" class="clear-btn">清空收藏</button>
+        </div>
+        <div id="favoritesList" class="video-grid"></div>
+        <div class="empty-state" id="emptyFavorites">
+            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"/>
+            </svg>
+            <div class="empty-title">暂无收藏内容</div>
+            <div class="empty-desc">点击视频右侧的星标图标将视频添加到收藏夹</div>
+        </div>
+    </div>
+    
+    <!-- Profile Screen -->
+    <div class="screen" id="profileScreen">
+        <div class="profile-header">
+            <div class="profile-avatar">
+                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
+            </div>
+            <div class="profile-name">用户123456</div>
+        </div>
+        
+        <div class="profile-stats">
+            <div class="stat-item">
+                <div class="stat-value" id="favoritesCount">0</div>
+                <div class="stat-label">收藏</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value" id="likesCount">0</div>
+                <div class="stat-label">点赞</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value" id="viewsCount">0</div>
+                <div class="stat-label">观看</div>
+            </div>
+        </div>
+        
+        <div class="profile-actions">
+            <div class="action-row" data-action="settings">
+                <svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="white"/>
+                </svg>
+                <div class="action-text">账号设置</div>
+                <svg class="action-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z" fill="white"/>
+                </svg>
+            </div>
+            <div class="action-row" data-action="preferences">
+                <svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.48C21.34 9.34 21.39 9.07 21.28 8.87L19.36 5.55C19.24 5.33 18.99 5.26 18.77 5.33L16.38 6.29C15.88 5.91 15.35 5.59 14.76 5.35L14.4 2.81C14.36 2.57 14.16 2.4 13.92 2.4H10.08C9.84 2.4 9.65 2.57 9.61 2.81L9.25 5.35C8.66 5.59 8.12 5.92 7.63 6.29L5.24 5.33C5.02 5.25 4.77 5.33 4.65 5.55L2.74 8.87C2.62 9.08 2.66 9.34 2.86 9.48L4.89 11.06C4.84 11.36 4.8 11.69 4.8 12C4.8 12.31 4.82 12.64 4.87 12.94L2.84 14.52C2.66 14.66 2.61 14.93 2.72 15.13L4.64 18.45C4.76 18.67 5.01 18.74 5.23 18.67L7.62 17.71C8.12 18.09 8.65 18.41 9.24 18.65L9.6 21.19C9.65 21.43 9.84 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.4 13.98 8.4 12C8.4 10.02 10.02 8.4 12 8.4C13.98 8.4 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z" fill="white"/>
+                </svg>
+                <div class="action-text">偏好设置</div>
+                <svg class="action-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z" fill="white"/>
+                </svg>
+            </div>
+            <div class="action-row" data-action="about">
+                <svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z" fill="white"/>
+                </svg>
+                <div class="action-text">关于我们</div>
+                <svg class="action-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z" fill="white"/>
+                </svg>
+            </div>
+            <div class="action-row" data-action="logout">
+                <svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: #FF4D4F;">
+                    <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
+                </svg>
+                <div class="action-text" style="color: #FF4D4F;">退出登录</div>
+                <svg class="action-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z" fill="white"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Navigation Bar -->
+    <div class="nav-bar">
+        <div class="nav-item active" data-screen="homeScreen">
+            <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z"/>
+            </svg>
+            <div class="nav-label">首页</div>
+        </div>
+        <div class="nav-item" data-screen="historyScreen">
+            <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13 3C8.03 3 4 7.03 4 12H1L4.89 15.89L4.96 16.03L9 12H6C6 8.13 9.13 5 13 5C16.87 5 20 8.13 20 12C20 15.87 16.87 19 13 19C11.07 19 9.32 18.21 8.06 16.94L6.64 18.36C8.27 19.99 10.51 21 13 21C17.97 21 22 16.97 22 12C22 7.03 17.97 3 13 3ZM12 8V13L16.28 15.54L17 14.33L13.5 12.25V8H12Z"/>
+            </svg>
+            <div class="nav-label">历史</div>
+        </div>
+        <div class="nav-item" data-screen="favoritesScreen">
+            <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+            <div class="nav-label">收藏</div>
+        </div>
+        <div class="nav-item" data-screen="profileScreen">
+            <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z"/>
+            </svg>
+            <div class="nav-label">我的</div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>VideoCharm - 精致短视频</title>
+    <meta name="description" content="VideoCharm - 精致视觉体验的短视频应用">
+    
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Main CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    
+    {% block head %}{% endblock %}
+</head>
+<body>
+    {% block content %}{% endblock %}
+    
+    <!-- Load scripts at end of body for performance -->
+    <script src="{{ url_for('static', filename='js/storage.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/player.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>