Spaces:

perryrperry
/

video

Running

App Files Files Community

perryrperry commited on Apr 3, 2025

Commit

7d85f2e

verified ·

1 Parent(s): 386ef1c

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -1561

index.html DELETED Viewed

@@ -1,1561 +0,0 @@
-<!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>VideoFlow - 沉浸式短视频</title>
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --primary-color: #FF2C55;
-            --secondary-color: #00F2EA;
-            --dark-color: #121212;
-            --light-color: #ffffff;
-            --gray-color: #888888;
-            --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);
-        }
-        * {
-            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%;
-        }
-        .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;
-        }
-        .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: 44px;
-            height: 44px;
-            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);
-        }
-        .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.4);
-        }
-        .action-button.favorite {
-            background-color: rgba(255, 215, 0, 0.2);
-        }
-        .action-button.favorite.active {
-            background-color: rgba(255, 215, 0, 0.4);
-        }
-        .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); }
-        }
-        .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 {
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--light-color);
-            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-        }
-        .app-title span {
-            color: var(--primary-color);
-        }
-        .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);
-        }
-        .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(--dark-color);
-            padding: 16px;
-            padding-top: 70px;
-        }
-        .section-title {
-            font-size: 24px;
-            font-weight: 700;
-            margin-bottom: 20px;
-            margin-top: 10px;
-            padding-left: 16px;
-        }
-        .video-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            padding: 0 16px;
-        }
-        .video-item {
-            background-color: var(--card-background);
-            border-radius: 12px;
-            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(--dark-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;
-        }
-        .action-row {
-            display: flex;
-            align-items: center;
-            padding: 16px 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .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;
-        }
-        /* 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);
-            }
-        }
-    </style>
-</head>
-<body>
-    <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">Video<span>Flow</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>
-                </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>
-                </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="section-title">观看历史</div>
-            <div id="historyList" class="video-grid">
-                <!-- History videos will be loaded here -->
-            </div>
-            <div class="empty-state" id="emptyHistory" style="display: none;">
-                <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="section-title">我的收藏</div>
-            <div id="favoritesList" class="video-grid">
-                <!-- Favorite videos will be loaded here -->
-            </div>
-            <div class="empty-state" id="emptyFavorites" style="display: none;">
-                <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">42</div>
-                    <div class="stat-label">收藏</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">128</div>
-                    <div class="stat-label">点赞</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">256</div>
-                    <div class="stat-label">观看</div>
-                </div>
-            </div>
-            <div class="profile-actions">
-                <div class="action-row">
-                    <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">
-                    <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">
-                    <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">
-                    <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>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const videoFeed = document.getElementById('videoFeed');
-            const loadingScreen = document.getElementById('loadingScreen');
-            const refreshButton = document.getElementById('refreshButton');
-            const likeButton = document.getElementById('likeButton');
-            const favoriteButton = document.getElementById('favoriteButton');
-            const commentButton = document.getElementById('commentButton');
-            const shareButton = document.getElementById('shareButton');
-            const swipeIndicator = document.getElementById('swipeIndicator');
-            const progressFill = document.getElementById('progressFill');
-            const playPauseOverlay = document.getElementById('playPauseOverlay');
-            const playIcon = document.getElementById('playIcon');
-            const pauseIcon = document.getElementById('pauseIcon');
-            const volumeControl = document.getElementById('volumeControl');
-            const volumeOnIcon = document.getElementById('volumeOnIcon');
-            const volumeOffIcon = document.getElementById('volumeOffIcon');
-            const toast = document.getElementById('toast');
-            const navItems = document.querySelectorAll('.nav-item');
-            const screens = document.querySelectorAll('.screen');
-            const historyList = document.getElementById('historyList');
-            const favoritesList = document.getElementById('favoritesList');
-            const emptyHistory = document.getElementById('emptyHistory');
-            const emptyFavorites = document.getElementById('emptyFavorites');
-            let currentIndex = 0;
-            let videos = [];
-            let touchStartY = 0;
-            let touchEndY = 0;
-            let isLoading = false;
-            let isMuted = false;
-            // 本地存储键名
-            const STORAGE_KEYS = {
-                HISTORY: 'videoflow_history',
-                FAVORITES: 'videoflow_favorites'
-            };
-            // 初始化本地存储
-            initLocalStorage();
-            // 预加载三个视频
-            loadVideos(3);
-            // 载入历史记录和收藏列表
-            loadHistoryList();
-            loadFavoritesList();
-            // 初始化本地存储
-            function initLocalStorage() {
-                if (!localStorage.getItem(STORAGE_KEYS.HISTORY)) {
-                    localStorage.setItem(STORAGE_KEYS.HISTORY, JSON.stringify([]));
-                }
-                if (!localStorage.getItem(STORAGE_KEYS.FAVORITES)) {
-                    localStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify([]));
-                }
-            }
-            // 加载视频函数
-            async function loadVideos(count) {
-                loadingScreen.style.display = 'flex';
-                isLoading = true;
-                for (let i = 0; i < count; i++) {
-                    try {
-                        const response = await axios.get('https://v2.xxapi.cn/api/meinv');
-                        if (response.data && response.data.code === 200) {
-                            const videoUrl = response.data.data;
-                            createVideoElement(videoUrl);
-                        }
-                    } catch (error) {
-                        console.error('获取视频失败:', error);
-                        showToast('获取视频失败，请检查网络连接');
-                    }
-                }
-                loadingScreen.style.display = 'none';
-                isLoading = false;
-                // 第一次加载完成后显示引导
-                if (videos.length > 0 && currentIndex === 0) {
-                    setTimeout(() => {
-                        swipeIndicator.style.display = 'flex';
-                        setTimeout(() => {
-                            swipeIndicator.style.opacity = '0';
-                            setTimeout(() => {
-                                swipeIndicator.style.display = 'none';
-                            }, 500);
-                        }, 5000);
-                    }, 1000);
-                }
-            }
-            // 创建视频元素
-            function createVideoElement(videoUrl) {
-                const videoCard = document.createElement('div');
-                videoCard.className = 'video-card';
-                videoCard.style.transform = `translateY(${100 * videos.length}%)`;
-                const video = document.createElement('video');
-                video.src = videoUrl;
-                video.loop = true;
-                video.muted = false;
-                video.autoplay = videos.length === 0; // 只有第一个视频自动播放
-                video.setAttribute('playsinline', '');
-                video.setAttribute('webkit-playsinline', '');
-                // 创建随机视频标题和描述
-                const videoTitle = `精选视频 #${videos.length + 1}`;
-                const videoDesc = getRandomDescription();
-                // 创建视频对象
-                const videoObj = {
-                    id: generateId(),
-                    url: videoUrl,
-                    title: videoTitle,
-                    desc: videoDesc,
-                    timestamp: new Date().getTime(),
-                    duration: Math.floor(Math.random() * 60) + 10, // 10-70秒的随机时长
-                    element: videoCard,
-                    video: video,
-                    liked: false,
-                    favorited: false
-                };
-                // 添加视频信息覆盖层
-                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 timeEl = document.createElement('div');
-                timeEl.className = 'video-meta-item';
-                timeEl.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>
-                    ${formatDuration(videoObj.duration)}
-                `;
-                const viewsEl = document.createElement('div');
-                viewsEl.className = 'video-meta-item';
-                viewsEl.innerHTML = `
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"/>
-                    </svg>
-                    ${Math.floor(Math.random() * 100000)}
-                `;
-                metaEl.appendChild(timeEl);
-                metaEl.appendChild(viewsEl);
-                videoInfo.appendChild(titleEl);
-                videoInfo.appendChild(descEl);
-                videoInfo.appendChild(metaEl);
-                overlay.appendChild(videoInfo);
-                videoCard.appendChild(video);
-                videoCard.appendChild(overlay);
-                videoFeed.appendChild(videoCard);
-                videos.push(videoObj);
-                // 添加进度条更新
-                video.addEventListener('timeupdate', function() {
-                    if (videos.indexOf(videos.find(v => v.video === video)) === currentIndex) {
-                        const progress = (video.currentTime / video.duration) * 100;
-                        progressFill.style.width = `${progress}%`;
-                    }
-                });
-                // 第一个视频加载完成后播放
-                if (videos.length === 1) {
-                    video.addEventListener('canplay', function onCanPlay() {
-                        this.play();
-                        video.removeEventListener('canplay', onCanPlay);
-                        addToHistory(videoObj);
-                    });
-                }
-                // 添加视频加载事件
-                video.addEventListener('loadedmetadata', function() {
-                    videoObj.duration = Math.round(video.duration);
-                    timeEl.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>
-                        ${formatDuration(videoObj.duration)}
-                    `;
-                });
-                // 视频错误处理
-                video.addEventListener('error', function() {
-                    console.error('视频加载失败:', videoUrl);
-                    showToast('视频加载失败，正在尝试下一个');
-                    switchToVideo(currentIndex + 1);
-                });
-            }
-            // 切换到指定索引的视频
-            function switchToVideo(index) {
-                if (index < 0 || index >= videos.length || isLoading) return;
-                currentIndex = index;
-                // 暂停所有视频
-                videos.forEach(item => {
-                    item.video.pause();
-                });
-                // 更新所有视频位置
-                videos.forEach((item, idx) => {
-                    item.element.style.transform = `translateY(${(idx - currentIndex) * 100}%)`;
-                });
-                // 播放当前视频
-                videos[currentIndex].video.play();
-                // 重置进度条
-                progressFill.style.width = '0';
-                // 更新喜欢和收藏按钮状态
-                updateActionButtons();
-                // 添加到历史记录
-                addToHistory(videos[currentIndex]);
-                // 如果当前视频是倒数第二个，加载更多视频
-                if (currentIndex >= videos.length - 2) {
-                    loadVideos(2);
-                }
-            }
-            // 更新操作按钮状态
-            function updateActionButtons() {
-                const currentVideo = videos[currentIndex];
-                // 更新喜欢按钮
-                if (currentVideo.liked) {
-                    likeButton.classList.add('active');
-                } else {
-                    likeButton.classList.remove('active');
-                }
-                // 更新收藏按钮
-                if (currentVideo.favorited) {
-                    favoriteButton.classList.add('active');
-                } else {
-                    favoriteButton.classList.remove('active');
-                }
-            }
-            // 触摸事件处理
-            document.addEventListener('touchstart', function(e) {
-                touchStartY = e.touches[0].clientY;
-            });
-            document.addEventListener('touchend', function(e) {
-                touchEndY = e.changedTouches[0].clientY;
-                handleSwipe();
-            });
-            // 处理滑动
-            function handleSwipe() {
-                const deltaY = touchStartY - touchEndY;
-                if (Math.abs(deltaY) > 50) { // 滑动距离超过50px才触发
-                    if (deltaY > 0) {
-                        // 上滑
-                        switchToVideo(currentIndex + 1);
-                    } else {
-                        // 下滑
-                        switchToVideo(currentIndex - 1);
-                    }
-                }
-            }
-            // 刷新按钮点击事件
-            refreshButton.addEventListener('click', function() {
-                if (!isLoading) {
-                    switchToVideo(currentIndex + 1);
-                    if (currentIndex >= videos.length - 1) {
-                        loadVideos(1);
-                    }
-                }
-            });
-            // 喜欢按钮点击事件
-            likeButton.addEventListener('click', function() {
-                if (currentIndex < videos.length) {
-                    videos[currentIndex].liked = !videos[currentIndex].liked;
-                    updateActionButtons();
-                    if (videos[currentIndex].liked) {
-                        showToast('已添加到喜欢');
-                    } else {
-                        showToast('已取消喜欢');
-                    }
-                }
-            });
-            // 收藏按钮点击事件
-            favoriteButton.addEventListener('click', function() {
-                if (currentIndex < videos.length) {
-                    const currentVideo = videos[currentIndex];
-                    currentVideo.favorited = !currentVideo.favorited;
-                    updateActionButtons();
-                    if (currentVideo.favorited) {
-                        addToFavorites(currentVideo);
-                        showToast('已添加到收藏');
-                    } else {
-                        removeFromFavorites(currentVideo.id);
-                        showToast('已取消收藏');
-                    }
-                }
-            });
-            // 评论按钮点击事件
-            commentButton.addEventListener('click', function() {
-                showToast('评论功能开发中，敬请期待！');
-            });
-            // 分享按钮点击事件
-            shareButton.addEventListener('click', function() {
-                showToast('分享功能开发中，敬请期待！');
-            });
-            // 点击视频切换播放/暂停
-            videoFeed.addEventListener('click', function(e) {
-                // 避免点击按钮时触发
-                if (e.target.closest('.action-button') ||
-                    e.target.closest('.volume-control')) {
-                    return;
-                }
-                const currentVideo = videos[currentIndex].video;
-                if (currentVideo.paused) {
-                    currentVideo.play();
-                    playIcon.style.display = 'block';
-                    pauseIcon.style.display = 'none';
-                } else {
-                    currentVideo.pause();
-                    playIcon.style.display = 'none';
-                    pauseIcon.style.display = 'block';
-                }
-                // 显示播放/暂停覆盖层
-                playPauseOverlay.classList.add('visible');
-                setTimeout(() => {
-                    playPauseOverlay.classList.remove('visible');
-                }, 800);
-            });
-            // 音量控制
-            volumeControl.addEventListener('click', function() {
-                isMuted = !isMuted;
-                videos.forEach(item => {
-                    item.video.muted = isMuted;
-                });
-                if (isMuted) {
-                    volumeOnIcon.style.display = 'none';
-                    volumeOffIcon.style.display = 'block';
-                    showToast('已静音');
-                } else {
-                    volumeOnIcon.style.display = 'block';
-                    volumeOffIcon.style.display = 'none';
-                    showToast('已开启声音');
-                }
-            });
-            // 导航栏切换
-            navItems.forEach(item => {
-                item.addEventListener('click', function() {
-                    const targetScreen = this.getAttribute('data-screen');
-                    // 更新导航栏状态
-                    navItems.forEach(navItem => {
-                        navItem.classList.remove('active');
-                    });
-                    this.classList.add('active');
-                    // 更新屏幕显示
-                    screens.forEach(screen => {
-                        screen.classList.remove('active');
-                        if (screen.id === targetScreen) {
-                            screen.classList.add('active');
-                        }
-                    });
-                    // 如果切换到首页，继续播放当前视频
-                    if (targetScreen === 'homeScreen' && videos.length > 0) {
-                        videos[currentIndex].video.play();
-                    } else if (videos.length > 0) {
-                        // 其他页面暂停视频播放
-                        videos[currentIndex].video.pause();
-                    }
-                    // 如果切换到历史记录或���藏夹，刷新列表
-                    if (targetScreen === 'historyScreen') {
-                        loadHistoryList();
-                    } else if (targetScreen === 'favoritesScreen') {
-                        loadFavoritesList();
-                    }
-                });
-            });
-            // 添加到历史记录
-            function addToHistory(videoObj) {
-                if (!videoObj) return;
-                let history = JSON.parse(localStorage.getItem(STORAGE_KEYS.HISTORY)) || [];
-                // 检查是否已存在
-                const existingIndex = history.findIndex(item => item.id === videoObj.id);
-                if (existingIndex !== -1) {
-                    // 已存在，更新时间戳
-                    history[existingIndex].timestamp = new Date().getTime();
-                } else {
-                    // 创建简化版视频对象用于存储
-                    const historyItem = {
-                        id: videoObj.id,
-                        url: videoObj.url,
-                        title: videoObj.title,
-                        desc: videoObj.desc,
-                        duration: videoObj.duration,
-                        timestamp: new Date().getTime()
-                    };
-                    // 添加到历史记录
-                    history.unshift(historyItem);
-                }
-                // 限制只保存7天内的历史记录
-                const oneWeekAgo = new Date().getTime() - (7 * 24 * 60 * 60 * 1000);
-                history = history.filter(item => item.timestamp >= oneWeekAgo);
-                // 保存到本地存储
-                localStorage.setItem(STORAGE_KEYS.HISTORY, JSON.stringify(history));
-            }
-            // 加载历史记录列表
-            function loadHistoryList() {
-                let history = JSON.parse(localStorage.getItem(STORAGE_KEYS.HISTORY)) || [];
-                // 按时间戳排序，最新的在前
-                history.sort((a, b) => b.timestamp - a.timestamp);
-                // 清空列表
-                historyList.innerHTML = '';
-                if (history.length === 0) {
-                   // 显示空状态
-                   emptyHistory.style.display = 'flex';
-                   historyList.style.display = 'none';
-               } else {
-                   // 隐藏空状态
-                   emptyHistory.style.display = 'none';
-                   historyList.style.display = 'grid';
-                   // 添加历史记录项
-                   history.forEach(item => {
-                       const videoItem = createVideoListItem(item, 'history');
-                       historyList.appendChild(videoItem);
-                   });
-               }
-           }
-           // 添加到收藏夹
-           function addToFavorites(videoObj) {
-               if (!videoObj) return;
-               let favorites = JSON.parse(localStorage.getItem(STORAGE_KEYS.FAVORITES)) || [];
-               // 检查是否已存在
-               const existingIndex = favorites.findIndex(item => item.id === videoObj.id);
-               if (existingIndex === -1) {
-                   // 创建简化版视频对象用于存储
-                   const favoriteItem = {
-                       id: videoObj.id,
-                       url: videoObj.url,
-                       title: videoObj.title,
-                       desc: videoObj.desc,
-                       duration: videoObj.duration,
-                       timestamp: new Date().getTime()
-                   };
-                   // 添加到收藏夹
-                   favorites.unshift(favoriteItem);
-                   // 保存到本地存储
-                   localStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(favorites));
-               }
-           }
-           // 从收藏夹中移除
-           function removeFromFavorites(videoId) {
-               let favorites = JSON.parse(localStorage.getItem(STORAGE_KEYS.FAVORITES)) || [];
-               // 过滤掉要移除的项
-               favorites = favorites.filter(item => item.id !== videoId);
-               // 保存到本地存储
-               localStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(favorites));
-               // 如果当前在收藏页面，刷新列表
-               if (document.getElementById('favoritesScreen').classList.contains('active')) {
-                   loadFavoritesList();
-               }
-           }
-           // 加载收藏夹列表
-           function loadFavoritesList() {
-               let favorites = JSON.parse(localStorage.getItem(STORAGE_KEYS.FAVORITES)) || [];
-               // 按���间戳排序，最新的在前
-               favorites.sort((a, b) => b.timestamp - a.timestamp);
-               // 清空列表
-               favoritesList.innerHTML = '';
-               if (favorites.length === 0) {
-                   // 显示空状态
-                   emptyFavorites.style.display = 'flex';
-                   favoritesList.style.display = 'none';
-               } else {
-                   // 隐藏空状态
-                   emptyFavorites.style.display = 'none';
-                   favoritesList.style.display = 'grid';
-                   // 添加收藏夹项
-                   favorites.forEach(item => {
-                       const videoItem = createVideoListItem(item, 'favorite');
-                       favoritesList.appendChild(videoItem);
-                   });
-               }
-           }
-           // 创建视频列表项
-           function createVideoListItem(videoData, type) {
-               const videoItem = document.createElement('div');
-               videoItem.className = 'video-item';
-               videoItem.setAttribute('data-id', videoData.id);
-               const imageUrl = generateThumbnailFromVideo(videoData.url);
-               videoItem.innerHTML = `
-                   <div class="video-thumbnail">
-                       <img src="${imageUrl}" 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>
-               `;
-               // 点击项目播放视频
-               videoItem.addEventListener('click', function() {
-                   playVideoFromLibrary(videoData, type);
-               });
-               return videoItem;
-           }
-           // 从库中播放视频
-           function playVideoFromLibrary(videoData, type) {
-               // 查找视频是否已在当前队列中
-               const existingIndex = videos.findIndex(v => v.id === videoData.id);
-               if (existingIndex !== -1) {
-                   // 已在队列中，直接切换
-                   switchToVideo(existingIndex);
-               } else {
-                   // 不在队列中，创建新视频
-                   const videoUrl = videoData.url;
-                   createVideoElement(videoUrl);
-                   // 切换到最后一个（新添加的）视频
-                   switchToVideo(videos.length - 1);
-               }
-               // 切换到主页
-               navItems.forEach(item => {
-                   item.classList.remove('active');
-                   if (item.getAttribute('data-screen') === 'homeScreen') {
-                       item.classList.add('active');
-                   }
-               });
-               screens.forEach(screen => {
-                   screen.classList.remove('active');
-                   if (screen.id === 'homeScreen') {
-                       screen.classList.add('active');
-                   }
-               });
-               showToast(`正在播放${type === 'favorite' ? '收藏' : '历史'}视频`);
-           }
-           // 显示提示消息
-           function showToast(message, duration = 2000) {
-               toast.textContent = message;
-               toast.classList.add('show');
-               setTimeout(() => {
-                   toast.classList.remove('show');
-               }, duration);
-           }
-           // 格式化时长
-           function formatDuration(seconds) {
-               const minutes = Math.floor(seconds / 60);
-               const remainingSeconds = Math.floor(seconds % 60);
-               return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-           }
-           // 格式化时间戳
-           function formatTimeAgo(timestamp) {
-               const now = new Date().getTime();
-               const diff = now - timestamp;
-               // 小于1分钟
-               if (diff < 60 * 1000) {
-                   return "刚刚";
-               }
-               // 小于1小时
-               if (diff < 60 * 60 * 1000) {
-                   return Math.floor(diff / (60 * 1000)) + "分钟前";
-               }
-               // 小于24小时
-               if (diff < 24 * 60 * 60 * 1000) {
-                   return Math.floor(diff / (60 * 60 * 1000)) + "小时前";
-               }
-               // 小于7天
-               if (diff < 7 * 24 * 60 * 60 * 1000) {
-                   return Math.floor(diff / (24 * 60 * 60 * 1000)) + "天前";
-               }
-               // 超过7天，显示具体日期
-               const date = new Date(timestamp);
-               return `${date.getMonth() + 1}月${date.getDate()}日`;
-           }
-           // 生成唯一ID
-           function generateId() {
-               return 'vid_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
-           }
-           // 从视频URL生成缩略图URL
-           function generateThumbnailFromVideo(videoUrl) {
-               // 在实际应用中，这里应该是从服务器获取缩略图
-               // 为了演示，这里使用随机图片
-               const randomId = Math.floor(Math.random() * 1000);
-               return `https://picsum.photos/id/${randomId}/300/500`;
-           }
-           // 随机视频描述
-           function getRandomDescription() {
-               const descriptions = [
-                   "精选高质量视频，带给你视觉享受",
-                   "每日精选，让你流连忘返",
-                   "热门推荐，不容错过的精彩瞬间",
-                   "探索更多精彩内容，尽在VideoFlow",
-                   "发现生活中的美好瞬间",
-                   "精彩纷呈，尽在眼前",
-                   "让心情放松的精选内容",
-                   "视觉盛宴，触手可及"
-               ];
-               return descriptions[Math.floor(Math.random() * descriptions.length)];
-           }
-       });
-   </script>
-</body>
-</html>