Hugging Face's logo

Spaces:
suanan
/
asr
Running

App Files Community
suanan commited on
Commit
85515d9
·
verified ·
1 Parent(s): f8a95ed

新增可以選取 是要下載客戶使用量明細 Excel或是客戶使用量總計 Excel這兩類 excel

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +260 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Asr
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ASR 報表精靈管家 📊
3
+ colorFrom: blue
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,260 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ASR 後台管理系統 - 報表下載</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
14
+ <style>
15
+ .sidebar {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .sidebar-collapsed {
19
+ width: 64px;
20
+ }
21
+ .main-content {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .content-expanded {
25
+ margin-left: 64px;
26
+ }
27
+ .nav-item.active {
28
+ background-color: rgba(59, 130, 246, 0.1);
29
+ border-left: 4px solid #3b82f6;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 dark:bg-gray-900">
34
+ <div class="flex h-screen">
35
+ <!-- Sidebar -->
36
+ <div class="sidebar bg-white dark:bg-gray-800 shadow-lg w-64 sidebar-collapsed" id="sidebar">
37
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
38
+ <div class="flex items-center justify-between">
39
+ <h1 class="text-xl font-bold text-gray-800 dark:text-white">ASR系統</h1>
40
+ <button id="toggleSidebar" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+
46
+ <nav class="mt-6">
47
+ <a href="index.html" class="nav-item flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700">
48
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
49
+ <span class="font-medium">主控台</span>
50
+ </a>
51
+ <a href="reports.html" class="nav-item active flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700">
52
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
53
+ <span class="font-medium">報表下載</span>
54
+ </a>
55
+ <a href="customers.html" class="nav-item flex items-center px-4 py-3 text-gray-700 dark:text-gray-200 hover:bg-blue-50 dark:hover:bg-gray-700">
56
+ <i data-feather="users" class="w-5 h-5 mr-3"></i>
57
+ <span class="font-medium">客戶管理</span>
58
+ </a>
59
+ </nav>
60
+ </div>
61
+
62
+ <!-- Main Content -->
63
+ <div class="main-content flex-1 overflow-auto">
64
+ <!-- Header -->
65
+ <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
66
+ <div class="px-6 py-4">
67
+ <div class="flex items-center justify-between">
68
+ <div>
69
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
70
+ <i data-feather="bar-chart-2" class="w-6 h-6 mr-2"></i>
71
+ 報表下載
72
+ </h1>
73
+ <p class="text-gray-600 dark:text-gray-400 mt-1">下載 ASR 系統的任務報表資料</p>
74
+ </div>
75
+ <div class="flex items-center space-x-4">
76
+ <div class="flex items-center space-x-2">
77
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
78
+ <span class="text-white text-sm font-medium">A</span>
79
+ </div>
80
+ <span class="text-gray-700 dark:text-gray-300 font-medium">管理員</span>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </header>
86
+
87
+ <!-- Reports Content -->
88
+ <main class="p-6">
89
+ <div class="max-w-4xl mx-auto">
90
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6" data-aos="fade-up">
91
+ <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">報表篩選條件</h2>
92
+
93
+ <div class="space-y-6">
94
+ <!-- Date Range -->
95
+ <div>
96
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">日期範圍</label>
97
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
98
+ <div>
99
+ <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">起始日期</label>
100
+ <input type="text" id="startDate" placeholder="選擇起始日期" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
101
+ </div>
102
+ <div>
103
+ <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">結束日期</label>
104
+ <input type="text" id="endDate" placeholder="選擇結束日期" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
105
+ </div>
106
+ </div>
107
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">格式：YYYY/MM/DD，最大範圍：720天</p>
108
+ </div>
109
+
110
+ <!-- Report Type -->
111
+ <div>
112
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">報表類型</label>
113
+ <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
114
+ <option value="all" selected>全部（合併兩種任務）</option>
115
+ <option value="file">檔案任務 (File Tasks)</option>
116
+ <option value="streaming">串流任務 (Streaming Tasks)</option>
117
+ </select>
118
+ </div>
119
+
120
+ <!-- Customer Filter -->
121
+ <div>
122
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">客戶篩選</label>
123
+ <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
124
+ <option value="all" selected>全部客戶</option>
125
+ </select>
126
+ </div>
127
+
128
+ <!-- Download Button -->
129
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
130
+ <button id="downloadBtn" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center">
131
+ <i data-feather="download" class="w-5 h-5 mr-2"></i>
132
+ 下載 Excel 報表
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ </div>
139
+ </main>
140
+ </div>
141
+ </div>
142
+
143
+ <script>
144
+ // Initialize AOS
145
+ AOS.init({
146
+ duration: 800,
147
+ once: true
148
+ });
149
+
150
+ // Initialize Feather Icons
151
+ feather.replace();
152
+
153
+ // Sidebar toggle functionality
154
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
155
+ const sidebar = document.getElementById('sidebar');
156
+ const mainContent = document.querySelector('.main-content');
157
+
158
+ sidebar.classList.toggle('sidebar-collapsed');
159
+ mainContent.classList.toggle('content-expanded');
160
+ });
161
+
162
+ // Set active nav item
163
+ document.addEventListener('DOMContentLoaded', function() {
164
+ const currentPage = window.location.pathname.split('/').pop() || 'index.html';
165
+ const navItems = document.querySelectorAll('.nav-item');
166
+
167
+ navItems.forEach(item => {
168
+ item.classList.remove('active');
169
+ const href = item.getAttribute('href');
170
+ if (href === currentPage) {
171
+ item.classList.add('active');
172
+ }
173
+ });
174
+ });
175
+
176
+ // Flatpickr date picker initialization
177
+ function initializeDatePickers() {
178
+ const startDatePicker = flatpickr("#startDate", {
179
+ dateFormat: "Y/m/d",
180
+ locale: "zh",
181
+ allowInput: true,
182
+ clickOpens: true,
183
+ onChange: function(selectedDates, dateStr, instance) {
184
+ if (selectedDates.length > 0) {
185
+ const maxDate = new Date(selectedDates[0]);
186
+ maxDate.setDate(maxDate.getDate() + 720);
187
+
188
+ endDatePicker.set('minDate', selectedDates[0]);
189
+ endDatePicker.set('maxDate', maxDate);
190
+
191
+ if (endDatePicker.selectedDates.length > 0) {
192
+ validateDateRange(selectedDates[0], endDatePicker.selectedDates[0]);
193
+ }
194
+ }
195
+ }
196
+ });
197
+
198
+ const endDatePicker = flatpickr("#endDate", {
199
+ dateFormat: "Y/m/d",
200
+ locale: "zh",
201
+ allowInput: true,
202
+ clickOpens: true,
203
+ onChange: function(selectedDates, dateStr, instance) {
204
+ if (selectedDates.length > 0 && startDatePicker.selectedDates.length > 0) {
205
+ validateDateRange(startDatePicker.selectedDates[0], selectedDates[0]);
206
+ }
207
+ }
208
+ });
209
+ }
210
+
211
+ // Date validation (max 720 days)
212
+ function validateDateRange(startDate, endDate) {
213
+ if (startDate && endDate) {
214
+ const diffTime = Math.abs(endDate - startDate);
215
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
216
+
217
+ if (diffDays > 720) {
218
+ alert('日期範圍不能超過720天');
219
+ document.getElementById('endDate').value = '';
220
+ return false;
221
+ }
222
+ }
223
+ return true;
224
+ }
225
+
226
+ // Download button functionality
227
+ document.getElementById('downloadBtn').addEventListener('click', function() {
228
+ const startDate = document.getElementById('startDate').value;
229
+ const endDate = document.getElementById('endDate').value;
230
+
231
+ if (!startDate || !endDate) {
232
+ alert('請選擇起始日期和結束日期');
233
+ return;
234
+ }
235
+
236
+ const startDateObj = new Date(startDate);
237
+ const endDateObj = new Date(endDate);
238
+
239
+ if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
240
+ alert('日期格式不正確，請確認選擇的日期');
241
+ return;
242
+ }
243
+
244
+ if (!validateDateRange(startDateObj, endDateObj)) {
245
+ return;
246
+ }
247
+
248
+ // Simulate download
249
+ alert(`報表下載中...\n日期範圍: ${startDate} - ${endDate}`);
250
+ // In a real application, this would trigger an actual file download
251
+ });
252
+
253
+ // Initialize date pickers
254
+ document.addEventListener('DOMContentLoaded', function() {
255
+ initializeDatePickers();
256
+ });
257
+ </script>
258
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
259
+ </body>
260
+ </html>