-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathIndex.html
More file actions
277 lines (276 loc) · 11.4 KB
/
Index.html
File metadata and controls
277 lines (276 loc) · 11.4 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帙雲 - 控制面板</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Serif+TC:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
background-image: url('https://i.ibb.co/ns80T5pr/4-5.png');
background-size: cover;
background-position: center;
font-family: 'Noto Serif JP', 'Noto Serif TC', 'cwTeXHei';
margin: 0;
padding: 0;
color: #333;
}
.main-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 10px;
min-height: 100vh;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
font-size: 48px;
color: #2471a3;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.section {
margin-bottom: 40px;
}
.section h2 {
font-size: 24px;
font-family: 'Noto Serif TC', 'cwTeXHei';
margin-bottom: 20px;
color: #4682B4;
border-bottom: 2px solid #4682B4;
padding-bottom: 10px;
}
.links {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.links a {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
text-decoration: none;
color: #333;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 150px;
position: relative;
}
.links a:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.links a img {
width: 48px;
height: 48px;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.links a:hover img {
transform: scale(1.15);
}
.links span {
text-align: center;
word-break: break-word;
font-size: 14px;
}
.links a::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #4682B4;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
font-size: 12px;
margin-bottom: 5px;
}
.links a:hover::after {
opacity: 1;
}
/* 動作按鈕（與連結卡片相同外觀） */
.action-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
border: none;
color: #333;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 150px;
position: relative;
font-family: inherit;
font-size: 14px;
}
.action-btn:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.action-btn img {
width: 48px;
height: 48px;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.action-btn:hover img {
transform: scale(1.15);
}
.action-btn span {
text-align: center;
word-break: break-word;
}
.action-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #4682B4;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
font-size: 12px;
margin-bottom: 5px;
}
.action-btn:hover::after {
opacity: 1;
}
.light-blue-icon {
filter: invert(45%) sepia(97%) saturate(302%) hue-rotate(180deg) brightness(94%) contrast(85%);
}
.dark-blue-icon {
filter: invert(30%) hue-rotate(270deg) saturate(160%) brightness(85%) contrast(100%);
}
.teal-icon {
filter: invert(82%) hue-rotate(200deg) saturate(200%) brightness(90%) contrast(95%);
}
</style>
</head>
<body>
<div class="main-container">
<div class="header">
<h1>帙雲</h1>
</div>
<section class="section">
<h2>課業及回饋</h2>
<div class="links">
<a href="<?= folderUrls.UPLOAD_URL ?>" target="_blank" rel="noopener" data-tooltip="學生上傳作業的區域 命名格式：班別_姓名_關鍵詞 例如：1C_陳大文_寶物.pdf">
<img src="https://img.icons8.com/ios-filled/50/000000/paper-plane.png" alt="提交" class="light-blue-icon">
<span>學生上傳區</span>
</a>
<a href="<?= folderUrls.PENDING_URL ?>" target="_blank" rel="noopener" data-tooltip="待老師批改的課業">
<img src="https://img.icons8.com/ios-filled/50/000000/documents.png" alt="待批改" class="light-blue-icon">
<span>待批改課業</span>
</a>
<a href="<?= folderUrls.TEACHER_RETURN_URL ?>" target="_blank" rel="noopener" data-tooltip="老師上傳批改後課業的區域">
<img src="https://img.icons8.com/ios-filled/50/000000/speech-bubble.png" alt="回饋" class="light-blue-icon">
<span>老師回饋區</span>
</a>
<a href="<?= folderUrls.RETURNED_URL ?>" target="_blank" rel="noopener" data-tooltip="已批改並發還的課業">
<img src="https://img.icons8.com/ios-filled/50/000000/checked.png" alt="已發還" class="light-blue-icon">
<span>已發還課業</span>
</a>
</div>
</section>
<section class="section">
<h2>應用操作</h2>
<div class="links">
<a href="<?= baseUrl ?>?page=student" target="_blank" rel="noopener" data-tooltip="學生直接上傳課業、查看繳交狀態及批改課業連結">
<img src="https://img.icons8.com/ios-filled/50/000000/paper-plane.png" alt="學生入口" class="light-blue-icon">
<span>學生課業入口</span>
</a>
<a href="<?= baseUrl ?>?page=record" rel="noopener" data-tooltip="查看學生的繳交記錄">
<img src="https://img.icons8.com/ios-filled/50/000000/book.png" alt="繳交記錄" class="dark-blue-icon">
<span>繳交紀錄</span>
</a>
<a href="<?= baseUrl ?>?page=homework" target="_blank" rel="noopener" data-tooltip="透過面板佈置課業，自動寫入試算表">
<img src="https://img.icons8.com/ios-filled/50/000000/gear.png" alt="設置" class="dark-blue-icon">
<span>課業設置</span>
</a>
<a href="<?= folderUrls.SUBMISSION_SHEET_URL ?>" target="_blank" rel="noopener" data-tooltip="繳交紀錄及課業佈置試算表">
<img src="https://img.icons8.com/ios-filled/50/000000/google-sheets.png" alt="繳交紀錄試算表" class="dark-blue-icon">
<span>繳交紀錄試算表</span>
</a>
<a href="<?= folderUrls.SHARE_SHEET_URL ?>" target="_blank" rel="noopener" data-tooltip="自動共用、收集位址試算表（查看學生文件夾位址）">
<img src="https://img.icons8.com/ios-filled/50/000000/google-sheets.png" alt="共用位址試算表" class="teal-icon">
<span>共用位址試算表</span>
</a>
</div>
</section>
<section class="section">
<h2>後臺設置</h2>
<div class="links">
<a href="<?= baseUrl ?>?page=setup" rel="noopener" data-tooltip="新增班別、管理學生名單及帳號、系統設定">
<img src="https://img.icons8.com/ios-filled/50/000000/settings.png" alt="班別及學生管理" class="teal-icon">
<span>班別及學生管理</span>
</a>
<button class="action-btn" id="btn-create-folders" data-tooltip="依課業設置建立文件夾結構並更新繳交狀態" onclick="triggerAction('triggerFolderCreation', '正在建立文件夾…', '文件夾已建立並更新繳交狀態！', 'btn-create-folders')">
<img src="https://img.icons8.com/ios-filled/50/000000/add-user-male.png" alt="批量建立" class="teal-icon">
<span>批量建立資料夾</span>
</button>
<button class="action-btn" id="btn-share-folders" data-tooltip="依學生帳號設置共用專屬文件夾並收集位址" onclick="triggerAction('triggerShareAll', '正在共用文件夾…', '文件夾已共用並收集位址！', 'btn-share-folders')">
<img src="https://img.icons8.com/ios-filled/50/000000/share.png" alt="自動共用" class="teal-icon">
<span>自動共用專屬文件夾</span>
</button>
</div>
</section>
</div>
<script>
/**
* 呼叫伺服器端函數並顯示進度/結果回饋。
* @param {string} fnName 伺服器端函數名稱
* @param {string} loading 操作進行中的提示文字
* @param {string} success 成功後的提示文字
* @param {string} btnId 按鈕的 element id（用於暫時停用）
*/
function triggerAction(fnName, loading, success, btnId) {
var btn = document.getElementById(btnId);
var spanElement = btn.querySelector('span');
if (!spanElement) return;
var originalText = spanElement.textContent;
btn.disabled = true;
spanElement.textContent = loading;
google.script.run
.withSuccessHandler(function() {
btn.disabled = false;
spanElement.textContent = originalText;
alert(success);
})
.withFailureHandler(function(err) {
btn.disabled = false;
spanElement.textContent = originalText;
alert('操作失敗：' + err.message);
})
[fnName]();
}
</script>
</body>
</html>