Hugging Face's logo

Spaces:
Ethscriptions
/
tingche
Sleeping

App Files Community
Ethscriptions commited on
Commit
8f48def
·
verified ·
1 Parent(s): 3e91436

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +137 -0
static/index.html ADDED
@@ -0,0 +1,137 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6
+ <title>停车优惠二维码</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
8
+ <style>
9
+ /* 样式与之前相同，这里省略以保持简洁... */
10
+ * { margin: 0; padding: 0; box-sizing: border-box; }
11
+ html, body { height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; }
12
+ .container { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
13
+ .section { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; }
14
+ #qr-section { background-color: #ffffff; padding: 20px; }
15
+ h1 { font-size: 2.5em; color: #333; margin-bottom: 25px; font-weight: 500; }
16
+ #qrcode-container { padding: 20px; background-color: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); width: 80vw; max-width: 400px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; }
17
+ #qrcode { display: flex; justify-content: center; align-items: center; }
18
+ #status { margin-top: 20px; font-size: 1.5em; color: #666; min-height: 1.5em; text-align: center; }
19
+ .status-error { color: #d9534f; }
20
+ #video-section { background-color: #000; }
21
+ #tutorial-video { width: 100%; height: 100%; object-fit: cover; }
22
+ </style>
23
+ </head>
24
+ <body>
25
+
26
+ <div class="container">
27
+ <div id="qr-section" class="section">
28
+ <h1>请扫描二维码优惠停车</h1>
29
+ <div id="qrcode-container">
30
+ <div id="qrcode"></div>
31
+ </div>
32
+ <p id="status">正在初始化...</p>
33
+ </div>
34
+ <div id="video-section" class="section">
35
+ <!-- !重要! 视频路径已修改，它将从/static/目录加载 -->
36
+ <video id="tutorial-video" autoplay muted loop playsinline>
37
+ <source src="/static/YOUR_VIDEO_FILE.mp4" type="video/mp4">
38
+ 您的浏览器不支持播放视频。
39
+ </video>
40
+ </div>
41
+ </div>
42
+
43
+ <script>
44
+ // --- 配置区域 ---
45
+ const config = {
46
+ // !重要! 这是请求体中的 qrCodeId
47
+ qrCodeId: 'PQRCODE_fd2b2cf9673b4ca187f2f20b2abded40',
48
+
49
+ // 最终生成的二维码 URL 的固定部分
50
+ qrCodeUrlBase: 'https://parking.youboyun.com.cn/h5/parkpages/preferential/freeQrcodeResult',
51
+
52
+ // 刷新间隔（毫秒），60000 = 1分钟
53
+ refreshInterval: 60000
54
+ };
55
+ // --- 配置区域结束 ---
56
+
57
+ const qrcodeElement = document.getElementById('qrcode');
58
+ const statusElement = document.getElementById('status');
59
+ let qrcodeInstance = null;
60
+ let countdownInterval = null;
61
+
62
+ function generateQrCode(url) {
63
+ qrcodeElement.innerHTML = '';
64
+ qrcodeInstance = new QRCode(qrcodeElement, {
65
+ text: url,
66
+ width: Math.min(380, window.innerWidth * 0.7),
67
+ height: Math.min(380, window.innerWidth * 0.7),
68
+ colorDark: "#000000",
69
+ colorLight: "#ffffff",
70
+ correctLevel: QRCode.CorrectLevel.H
71
+ });
72
+ }
73
+
74
+ function startCountdown() {
75
+ if (countdownInterval) clearInterval(countdownInterval);
76
+ let seconds = config.refreshInterval / 1000;
77
+ const updateTimer = () => {
78
+ statusElement.classList.remove('status-error');
79
+ statusElement.textContent = `刷新成功 | 下次刷新倒计时: ${seconds} 秒`;
80
+ seconds--;
81
+ if (seconds < 0) clearInterval(countdownInterval);
82
+ };
83
+ updateTimer();
84
+ countdownInterval = setInterval(updateTimer, 1000);
85
+ }
86
+
87
+ async function fetchAndUpdateQrCode() {
88
+ statusElement.classList.remove('status-error');
89
+ statusElement.textContent = '正在刷新二维码...';
90
+
91
+ // *** 重大修改 ***
92
+ // 请求我们自己的后端API，而不是外部API
93
+ const requestUrl = '/api/get_qrcode';
94
+
95
+ try {
96
+ const response = await fetch(requestUrl, {
97
+ method: 'POST',
98
+ headers: {
99
+ 'Content-Type': 'application/json'
100
+ },
101
+ // 将 qrCodeId 发送给我们的后端
102
+ body: JSON.stringify({
103
+ qrCodeId: config.qrCodeId
104
+ })
105
+ });
106
+
107
+ const result = await response.json();
108
+
109
+ if (!response.ok) {
110
+ // 如果后端返回错误 (如 502), result.detail 会有错误信息
111
+ throw new Error(result.detail || `HTTP 错误! 状态码: ${response.status}`);
112
+ }
113
+
114
+ if (result.code === 0 && result.data) {
115
+ const tempId = result.data;
116
+ const finalQrCodeUrl = `${config.qrCodeUrlBase}?qrCodeId=${config.qrCodeId}&tempId=${tempId}`;
117
+ generateQrCode(finalQrCodeUrl);
118
+ startCountdown();
119
+ } else {
120
+ throw new Error(result.msg || '后端返回数据格式不正确');
121
+ }
122
+
123
+ } catch (error) {
124
+ console.error('请求失败:', error);
125
+ statusElement.classList.add('status-error');
126
+ statusElement.textContent = `错误: ${error.message}`;
127
+ qrcodeElement.innerHTML = '<p style="color: red; text-align: center; font-size: 1.2em;">二维码生成失败<br>请检查后端日志</p>';
128
+ }
129
+ }
130
+
131
+ document.addEventListener('DOMContentLoaded', () => {
132
+ fetchAndUpdateQrCode();
133
+ setInterval(fetchAndUpdateQrCode, config.refreshInterval);
134
+ });
135
+ </script>
136
+ </body>
137
+ </html>