File size: 5,701 Bytes
b4edbc0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!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>