| <!DOCTYPE html> |
| <html lang="zh-Hant"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>📸 照片分享平台</title> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet"> |
| <style> |
| * { box-sizing:border-box; margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; } |
| body { |
| background: linear-gradient(135deg,#667eea,#764ba2); |
| padding:2rem; color:#fff; min-height:100vh; |
| display:flex; justify-content:center; align-items:flex-start; |
| } |
| .container { width:100%; max-width:1000px; margin:auto; display:flex; flex-direction:column; gap:2rem; } |
| header { text-align:center; margin-bottom:1rem; } |
| h1 { font-size:3rem; font-weight:800; background: linear-gradient(90deg,#ff9a9e,#fad0c4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } |
| p { font-size:1.1rem; margin-top:8px; color:#f0f0f0; } |
| |
| .card { |
| background: rgba(255,255,255,0.1); |
| backdrop-filter: blur(12px); |
| border-radius:20px; padding:2rem; |
| box-shadow:0 20px 40px rgba(0,0,0,0.2); |
| display:flex; flex-direction:column; gap:1rem; |
| } |
| |
| .btn { |
| padding:12px 24px; border-radius:12px; |
| border:none; cursor:pointer; font-weight:700; |
| background: linear-gradient(135deg,#ff758c,#ff7eb3); color:#fff; |
| transition: all 0.3s; |
| box-shadow: 0 6px 15px rgba(0,0,0,0.2); |
| } |
| .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); } |
| |
| .tools { display:flex; flex-wrap:wrap; gap:12px; margin-top:0.5rem; align-items:center; } |
| .tools input { flex:1; padding:12px; border-radius:10px; border:none; outline:none; } |
| |
| .small { font-size:0.85rem; color:#e0e0e0; margin-top:6px; } |
| |
| .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:1rem; justify-items:center; } |
| .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)); } |
| .gallery img:hover { transform: scale(1.07) rotate(-1deg); filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4)); } |
| |
| footer { text-align:center; margin-top:3rem; font-size:0.85rem; color:#f0f0f0; } |
| |
| @media (max-width: 768px){ |
| h1{font-size:2rem;} |
| .gallery img{height:150px;} |
| .tools { flex-direction:column; } |
| .tools input, .tools button { width:100%; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>📸 照片分享平台</h1> |
| <p>一起收集、分享、保存美好回憶。</p> |
| </header> |
|
|
| <div class="card"> |
| <h2>📤 上傳新照片</h2> |
| <div class="tools"> |
| <input id="fileInput" type="file" accept=".jpg,.jpeg,.png,.heic" /> |
| <button class="btn" onclick="upload()">上傳</button> |
| </div> |
| <div class="small">支援格式：PNG / JPG / HEIC。上傳後會自動轉成 PNG。</div> |
| <div id="uploadStatus" class="small"></div> |
| </div> |
|
|
| <div class="card"> |
| <h2>🖼️ 圖庫</h2> |
| <div class="gallery grid" id="gallery"> |
| <img src="https://placekitten.com/300/200" alt="示例"> |
| <img src="https://placekitten.com/301/200" alt="示例"> |
| <img src="https://placekitten.com/302/200" alt="示例"> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <h2>🔧 管理</h2> |
| <div class="tools"> |
| <input id="passcode" type="password" placeholder="輸入密碼清除所有"> |
| <button class="btn" onclick="clearAll()">清除所有圖片</button> |
| <button class="btn" onclick="downloadZip()">📦 下載全部 (ZIP)</button> |
| </div> |
| <div id="toolStatus" class="small"></div> |
| </div> |
|
|
| <footer> |
| Made with ❤️ · 照片分享平台 |
| </footer> |
| </div> |
|
|
| <script> |
| function upload() { |
| document.getElementById("uploadStatus").textContent = "🚧 功能未接後端整合，請用 Gradio 介面上傳。"; |
| } |
| function clearAll() { |
| document.getElementById("toolStatus").textContent = "🚧 需呼叫清除 API。"; |
| } |
| function downloadZip() { |
| document.getElementById("toolStatus").textContent = "🚧 下載請從 Gradio UI 操作。"; |
| } |
| </script> |
| </body> |
| </html> |
|
|
