templates/index.html

{% 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://img.izv.me/file/1745682782358_IMG_20250426_235148.png" alt="Profile">
            </div>
            <div class="profile-name">Oi小汁</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 %}