Hugging Face's logo

Spaces:
shiue2000
/
Demo
Sleeping

App Files Community
shiue2000 commited on
Commit
cffb2af
·
verified ·
1 Parent(s): 70f1c1c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +50 -25
templates/index.html CHANGED
@@ -3,33 +3,60 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>📸 同學照片分享平台</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
8
  <style>
9
  * { box-sizing:border-box; margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; }
10
- body { background: linear-gradient(135deg,#f5f7fa,#c3cfe2); padding:2rem; color:#2d2d3f; }
11
- .container { max-width: 1100px; margin: auto; }
12
- header { text-align:center; margin-bottom:1.5rem; }
13
- h1 { font-size:2.8rem; color:#5c4dff; }
14
- p { font-size:1rem; margin-top:6px; }
15
- .card { background:#fff; border-radius:16px; padding:1.5rem; box-shadow:0 20px 50px rgba(92,77,255,0.15); margin-bottom:1.5rem; position:relative; overflow:hidden; }
16
- .btn { display:inline-block; padding:12px 20px; border-radius:10px; border:none; cursor:pointer; font-weight:600; background:#5c4dff; color:#fff; transition:filter .2s; }
17
- .btn:hover { filter:brightness(1.1); }
18
- .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
19
- .gallery img { width:100%; border-radius:12px; object-fit:cover; height:160px; transition:transform .2s; }
20
- .gallery img:hover { transform:scale(1.05); }
21
- .tools { display:flex; flex-wrap:wrap; gap:10px; }
22
- .tools input { flex:1; padding:10px; border-radius:8px; border:1px solid #d8d8e5; }
23
- .small { font-size:0.85rem; color:#666; margin-top:6px; }
24
- footer { text-align:center; margin-top:3rem; font-size:0.8rem; color:#777; }
25
- @media (max-width: 768px){ h1{font-size:2rem;} }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </style>
27
  </head>
28
  <body>
29
  <div class="container">
30
  <header>
31
- <h1>📸 同學照片分享平台</h1>
32
- <p>一起收集、分享、保存那段青澀的回憶。</p>
33
  </header>
34
 
35
  <div class="card">
@@ -45,7 +72,6 @@
45
  <div class="card">
46
  <h2>🖼️ 圖庫</h2>
47
  <div class="gallery grid" id="gallery">
48
- <!-- thumbnails injected by JS if you wire it up -->
49
  <img src="https://placekitten.com/300/200" alt="示例">
50
  <img src="https://placekitten.com/301/200" alt="示例">
51
  <img src="https://placekitten.com/302/200" alt="示例">
@@ -54,21 +80,20 @@
54
 
55
  <div class="card">
56
  <h2>🔧 管理</h2>
57
- <div class="tools" style="flex-wrap:wrap;">
58
- <input id="passcode" type="password" placeholder="輸入 78750 清除所有">
59
  <button class="btn" onclick="clearAll()">清除所有圖片</button>
60
- <button class="btn" style="margin-left:10px;" onclick="downloadZip()">📦 下載全部 (ZIP)</button>
61
  </div>
62
  <div id="toolStatus" class="small"></div>
63
  </div>
64
 
65
  <footer>
66
- Made with ❤️ for 同學們 · 17eMIT 2025
67
  </footer>
68
  </div>
69
 
70
  <script>
71
- // Placeholder JS hooks; adapt to call your Gradio endpoints if desired.
72
  function upload() {
73
  document.getElementById("uploadStatus").textContent = "🚧 功能未接後端整合，請用 Gradio 介面上傳。";
74
  }
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>📸 照片分享平台</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
8
  <style>
9
  * { box-sizing:border-box; margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; }
10
+ body {
11
+ background: linear-gradient(135deg,#667eea,#764ba2);
12
+ padding:2rem; color:#fff; min-height:100vh;
13
+ }
14
+ .container { max-width: 1200px; margin:auto; }
15
+ header { text-align:center; margin-bottom:2rem; }
16
+ h1 { font-size:3rem; font-weight:800; background: linear-gradient(90deg,#ff9a9e,#fad0c4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
17
+ p { font-size:1.1rem; margin-top:8px; color:#f0f0f0; }
18
+
19
+ .card {
20
+ background: rgba(255,255,255,0.1);
21
+ backdrop-filter: blur(12px);
22
+ border-radius:20px; padding:2rem;
23
+ margin-bottom:2rem;
24
+ box-shadow:0 20px 40px rgba(0,0,0,0.2);
25
+ transition: transform 0.3s, box-shadow 0.3s;
26
+ }
27
+ .card:hover { transform: translateY(-5px); box-shadow:0 25px 50px rgba(0,0,0,0.25); }
28
+
29
+ .btn {
30
+ display:inline-block; padding:12px 24px; border-radius:12px;
31
+ border:none; cursor:pointer; font-weight:700;
32
+ background: linear-gradient(135deg,#ff758c,#ff7eb3); color:#fff;
33
+ transition: all 0.3s;
34
+ box-shadow: 0 6px 15px rgba(0,0,0,0.2);
35
+ }
36
+ .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
37
+
38
+ .tools { display:flex; flex-wrap:wrap; gap:12px; margin-top:1rem; }
39
+ .tools input { flex:1; padding:12px; border-radius:10px; border:none; outline:none; }
40
+
41
+ .small { font-size:0.85rem; color:#e0e0e0; margin-top:6px; }
42
+
43
+ .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:1rem; }
44
+ .gallery img { width:100%; border-radius:16px; object-fit:cover; height:180px; transition: transform 0.3s, filter 0.3s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); }
45
+ .gallery img:hover { transform: scale(1.07) rotate(-1deg); filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4)); }
46
+
47
+ footer { text-align:center; margin-top:3rem; font-size:0.85rem; color:#f0f0f0; }
48
+
49
+ @media (max-width: 768px){
50
+ h1{font-size:2rem;}
51
+ .gallery img{height:150px;}
52
+ }
53
  </style>
54
  </head>
55
  <body>
56
  <div class="container">
57
  <header>
58
+ <h1>📸 照片分享平台</h1>
59
+ <p>一起收集、分享、保存美好回憶。</p>
60
  </header>
61
 
62
  <div class="card">
 
72
  <div class="card">
73
  <h2>🖼️ 圖庫</h2>
74
  <div class="gallery grid" id="gallery">
 
75
  <img src="https://placekitten.com/300/200" alt="示例">
76
  <img src="https://placekitten.com/301/200" alt="示例">
77
  <img src="https://placekitten.com/302/200" alt="示例">
 
80
 
81
  <div class="card">
82
  <h2>🔧 管理</h2>
83
+ <div class="tools">
84
+ <input id="passcode" type="password" placeholder="輸入密碼清除所有">
85
  <button class="btn" onclick="clearAll()">清除所有圖片</button>
86
+ <button class="btn" onclick="downloadZip()">📦 下載全部 (ZIP)</button>
87
  </div>
88
  <div id="toolStatus" class="small"></div>
89
  </div>
90
 
91
  <footer>
92
+ Made with ❤️ · 照片分享平台
93
  </footer>
94
  </div>
95
 
96
  <script>
 
97
  function upload() {
98
  document.getElementById("uploadStatus").textContent = "🚧 功能未接後端整合，請用 Gradio 介面上傳。";
99
  }