| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Media Gateway</title>
|
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' style='stop-color:%23667eea'/><stop offset='100%25' style='stop-color:%23764ba2'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)'/><rect x='20' y='30' width='60' height='40' rx='5' fill='white' opacity='0.3'/><rect x='25' y='35' width='50' height='30' rx='3' fill='%23fff'/><circle cx='50' cy='80' r='4' fill='%23fff'/></svg>">
|
| <link rel="stylesheet" href="/static/css/style.css">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| </head>
|
| <body>
|
| <div class="login-overlay" id="loginOverlay">
|
| <div class="login-box">
|
| <div class="login-box-header">
|
| <h1>🎬 Media Gateway</h1>
|
| <p id="loginSubtitle">欢迎进入</p>
|
| </div>
|
| <div class="login-box-body">
|
| <div id="loginError" class="login-error"></div>
|
| <div class="login-info">
|
| <strong>💡 登录说明</strong><br>
|
| 请输入用户名和密码<br>
|
| </div>
|
| <form id="loginForm">
|
| <div class="login-form-group">
|
| <label for="usernameInput">👤 用户名</label>
|
| <input
|
| type="text"
|
| id="usernameInput"
|
| placeholder="输入您的用户名"
|
| autocomplete="username"
|
| required
|
| >
|
| </div>
|
| <div class="login-form-group">
|
| <label for="passwordInput">🔒 密码</label>
|
| <div class="password-toggle-login">
|
| <input
|
| type="password"
|
| id="passwordInput"
|
| placeholder="输入您的密码"
|
| autocomplete="current-password"
|
| required
|
| >
|
| <button type="button" class="password-toggle-btn-login" id="togglePasswordBtn">
|
| 👁️
|
| </button>
|
| </div>
|
| </div>
|
| <button type="submit" class="login-btn btn-glow" id="loginBtn">
|
| 🚀 立即登录
|
| </button>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="app-container" id="mainContainer">
|
| <header class="header">
|
| <div class="header-top">
|
| <div>
|
| <h1>🎬 Media Gateway</h1>
|
| <p class="subtitle">v2.0</p>
|
| </div>
|
| <button class="btn-logout" id="logoutBtn">
|
| 🚪 退出登录
|
| </button>
|
| </div>
|
| <div class="status-bar">
|
| <div class="status-item">
|
| <span class="status-label">🟢 状态</span>
|
| <span id="apiStatus" class="status-value loading">检查中...</span>
|
| </div>
|
| <div class="status-item">
|
| <span class="status-label">⚡ 响应</span>
|
| <span id="responseTime" class="status-value">-</span>
|
| </div>
|
| <div class="status-item">
|
| <span class="status-label">👤 用户</span>
|
| <span id="currentUser" class="status-value">-</span>
|
| <span id="userTypeBadge" class="user-type-badge"></span>
|
| </div>
|
| </div>
|
| </header>
|
|
|
| <nav class="tabs">
|
| <a href="/channels" class="tab-button" data-page="channels">
|
| 📋 频道列表
|
| </a>
|
| <a href="/player" class="tab-button" data-page="player">
|
| ▶️ 直播播放
|
| </a>
|
| <a href="/epg" class="tab-button" data-page="epg">
|
| 📅 节目表
|
| </a>
|
| <a href="/cache" class="tab-button admin-only" data-page="cache">
|
| 🗄️ 缓存管理
|
| </a>
|
| <a href="/api-test" class="tab-button admin-only" data-page="api-test">
|
| 🔧 API测试
|
| </a>
|
| </nav>
|
|
|
| <main class="app-body" id="appBody">
|
| <div id="pageContent">
|
| <div class="loading-spinner">
|
| <div class="loading-spinner-large"></div>
|
| <p style="margin-top: 15px; color: var(--primary); font-weight: 600;">加载中...</p>
|
| </div>
|
| </div>
|
| </main>
|
|
|
| <footer class="footer">
|
| <p>
|
| <strong>Media Gateway v2.0</strong>
|
| </p>
|
| </footer>
|
| </div>
|
|
|
| <script src="/static/js/common.js"></script>
|
| <script src="/static/js/downloader.js"></script>
|
| <script src="/static/js/user-data-sync.js"></script>
|
| <script src="/static/js/auth.js"></script>
|
| <script src="/static/js/router.js"></script>
|
| </body>
|
| </html> |
