GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Fitbit-like Dashboard</title>7<style>8 :root{9 --bg:#ffffff;10 --text:#20323b;11 --muted:#8fa0a8;12 --teal:#2d9da1;13 --teal-light:#dff1f2;14 --purple:#7b6cff;15 --card-shadow:0 10px 24px rgba(0,0,0,0.08);16 --border:#e6eaed;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg);23 }24 25 /* Status bar */26 .status-bar{27 position:absolute; top:0; left:0; right:0; height:120px;28 padding:0 36px;29 display:flex; align-items:center; justify-content:space-between;30 color:#222; font-size:42px; letter-spacing:0.5px;31 }32 .sb-left{display:flex; align-items:center; gap:18px;}33 .sb-right{display:flex; align-items:center; gap:28px;}34 .sb-icon{width:48px; height:48px; opacity:0.75;}35 .sb-battery{width:56px; height:48px; opacity:0.8;}36 /* Header */37 .header{38 position:absolute; top:120px; left:0; right:0; height:160px;39 padding:0 40px;40 display:flex; align-items:center; justify-content:space-between;41 }42 .header .title{43 font-size:84px; font-weight:600; color:#22353d; letter-spacing:1px;44 }45 .header .left-icon, .header .right-icon{46 width:88px; height:88px; display:flex; align-items:center; justify-content:center;47 }48 .avatar{49 width:96px; height:96px; background:#6f7bd3; color:#fff; border-radius:50%;50 display:flex; align-items:center; justify-content:center; font-weight:600; font-size:48px;51 }52 /* Info banner */53 .info-banner{54 position:absolute; top:280px; left:0; right:0; height:120px;55 background:#f1f4f6; color:#5f6f78; border-top:1px solid var(--border); border-bottom:1px solid var(--border);56 display:flex; align-items:center; gap:20px; padding:0 40px; font-size:44px;57 }58 .dots{display:flex; gap:8px; align-items:center;}59 .dot{width:16px; height:16px; background:#b9c5cb; border-radius:50%;}60 /* Today section header */61 .today-header{62 position:absolute; top:420px; left:0; right:0; height:120px;63 display:flex; align-items:center; justify-content:center;64 }65 .today-inner{66 width:100%; padding:0 40px; position:relative; display:flex; align-items:center; justify-content:center;67 }68 .back-btn{69 position:absolute; left:40px; top:50%; transform:translateY(-50%);70 width:72px; height:72px; display:flex; align-items:center; justify-content:center; opacity:0.7;71 }72 .today-label{ font-size:64px; font-weight:700; color:#21343d; letter-spacing:1px; }73 .edit-pill{74 position:absolute; right:40px; top:50%; transform:translateY(-50%);75 padding:18px 36px; border-radius:999px; border:1px solid #d7dde1; background:#f7f9fa; color:#6a7a82; font-size:42px; font-weight:600;76 }77 78 /* Main ring section */79 .ring-section{80 position:absolute; top:560px; left:0; right:0;81 display:flex; flex-direction:column; align-items:center; gap:40px;82 }83 .ring{84 width:520px; height:520px; border-radius:50%;85 border:30px solid var(--teal-light);86 position:relative; display:flex; align-items:center; justify-content:center;87 }88 .progress-arc{89 position:absolute; top:-10px; left:50%; transform:translateX(-50%);90 width:250px; height:30px; background:var(--teal);91 border-radius:15px;92 }93 .ring-content{ text-align:center; }94 .ring-content .shoe{95 width:90px; height:90px; margin:0 auto 16px;96 }97 .ring-number{ font-size:120px; font-weight:800; color:#1e313b; line-height:1; }98 .ring-sub{ font-size:48px; color:#6b7a82; }99 100 /* mini metrics */101 .metrics{102 width:100%; display:flex; align-items:flex-start; justify-content:space-between;103 padding:0 180px; margin-top:40px;104 }105 .metric{106 display:flex; flex-direction:column; align-items:center; gap:24px;107 }108 .mini-ring{109 width:160px; height:160px; border-radius:50%; border:16px solid var(--teal-light); position:relative; display:flex; align-items:center; justify-content:center;110 }111 .mini-arc{ position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:70px; height:16px; background:var(--teal); border-radius:8px; }112 .metric-icon{ width:72px; height:72px; }113 .metric-value{ font-size:56px; color:#1f313b; font-weight:700; }114 .metric-sub{ font-size:40px; color:#7b8a93; }115 116 /* Cards */117 .cards{118 position:absolute; top:1180px; left:0; right:0;119 display:flex; flex-direction:column; gap:36px; padding:0 40px;120 }121 .card{122 background:#fff; border-radius:24px; box-shadow:var(--card-shadow);123 padding:36px; display:flex; align-items:center; gap:32px;124 }125 .card-icon{126 width:128px; height:128px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:64px; color:#fff; font-weight:700;127 }128 .card-purple{ background:#efe8ff; border:10px solid #dcd2ff; color:#7b6cff; }129 .card-orange{ background:#ffe8d8; border:10px solid #ffd9bf; color:#ff8a3d; }130 .card-yellow{ background:#fff0c2; border:10px solid #ffe5a3; color:#d9a824; }131 .card-content{ flex:1; }132 .card-title{ font-size:56px; color:#1f313b; font-weight:700; }133 .card-sub{ font-size:42px; color:#7c8a93; margin-top:10px; }134 .card-plus{135 width:96px; height:96px; border-radius:20px; border:2px solid #cbd4da; color:#8fa0a8;136 display:flex; align-items:center; justify-content:center; font-size:72px; font-weight:700;137 }138 139 /* Bottom nav */140 .bottom-nav{141 position:absolute; bottom:0; left:0; right:0; height:200px;142 background:#f6f7f8; border-top:1px solid #e3e7ea;143 display:flex; align-items:center; justify-content:space-around;144 }145 .nav-item{146 width:25%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;147 color:#97a6ae; font-size:40px;148 }149 .nav-item.active{ color:#2d9da1; }150 .nav-icon{ width:64px; height:64px; }151 .gesture-bar{152 position:absolute; bottom:210px; left:50%; transform:translateX(-50%);153 width:360px; height:18px; background:#cfd7db; border-radius:999px;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status Bar -->161 <div class="status-bar">162 <div class="sb-left">163 <div>12:23</div>164 <svg class="sb-icon" viewBox="0 0 24 24">165 <path d="M4 18L10 6l6 12" fill="none" stroke="#666" stroke-width="2" />166 </svg>167 <svg class="sb-icon" viewBox="0 0 24 24">168 <path d="M4 12h16" stroke="#666" stroke-width="2"/>169 <path d="M12 4v16" stroke="#666" stroke-width="2"/>170 </svg>171 </div>172 <div class="sb-right">173 <svg class="sb-icon" viewBox="0 0 24 24">174 <path d="M12 2l5 8h-10z" fill="#666"/>175 </svg>176 <svg class="sb-icon" viewBox="0 0 24 24">177 <circle cx="12" cy="8" r="3" fill="#666"/>178 <path d="M12 11v9" stroke="#666" stroke-width="2"/>179 </svg>180 <svg class="sb-icon" viewBox="0 0 24 24">181 <path d="M4 8l8-4 8 4" fill="none" stroke="#666" stroke-width="2"/>182 <path d="M4 8v8l8 4 8-4V8" fill="none" stroke="#666" stroke-width="2"/>183 </svg>184 <svg class="sb-icon" viewBox="0 0 24 24">185 <path d="M3 10l9-7 9 7" fill="none" stroke="#666" stroke-width="2"/>186 </svg>187 <svg class="sb-icon sb-battery" viewBox="0 0 28 24">188 <rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>189 <rect x="4" y="8" width="12" height="8" fill="#666"/>190 <rect x="24" y="9" width="2" height="6" fill="#666"/>191 </svg>192 </div>193 </div>194 195 <!-- Header -->196 <div class="header">197 <div class="left-icon">198 <svg viewBox="0 0 24 24" width="72" height="72">199 <circle cx="12" cy="12" r="3" fill="#6b7a82"/>200 <path d="M12 2l2 3 3-1 1 3 3 1-1 3 2 2-2 2 1 3-3 1-1 3-3-1-2 3-2-3-3 1-1-3-3-1 1-3-2-2 2-2-1-3 3-1 1-3 3 1 2-3z" fill="none" stroke="#6b7a82" stroke-width="1.5"/>201 </svg>202 </div>203 <div class="title">fitbit</div>204 <div style="display:flex; align-items:center; gap:28px;">205 <div class="right-icon">206 <svg viewBox="0 0 24 24" width="76" height="76">207 <path d="M3 6h18v12H3z" fill="none" stroke="#6b7a82" stroke-width="2"/>208 <path d="M3 6l9 7 9-7" fill="none" stroke="#6b7a82" stroke-width="2"/>209 </svg>210 </div>211 <div class="avatar">C</div>212 </div>213 </div>214 215 <!-- Info Banner -->216 <div class="info-banner">217 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>218 <div>Gathering your data</div>219 </div>220 221 <!-- Today Header -->222 <div class="today-header">223 <div class="today-inner">224 <div class="back-btn">225 <svg viewBox="0 0 24 24" width="72" height="72">226 <path d="M15 4L7 12l8 8" fill="none" stroke="#7a8a93" stroke-width="2" />227 </svg>228 </div>229 <div class="today-label">TODAY</div>230 <div class="edit-pill">EDIT</div>231 </div>232 </div>233 234 <!-- Main Ring -->235 <div class="ring-section">236 <div class="ring">237 <div class="progress-arc"></div>238 <div class="ring-content">239 <svg class="shoe" viewBox="0 0 24 24">240 <path d="M2 15c5-2 7-2 10-6l3 2c3 2 5 3 7 3v3H2v-2z" fill="#2d9da1"/>241 </svg>242 <div class="ring-number">705</div>243 <div class="ring-sub">Steps</div>244 </div>245 </div>246 247 <div class="metrics">248 <div class="metric">249 <div class="mini-ring">250 <div class="mini-arc"></div>251 <svg class="metric-icon" viewBox="0 0 24 24">252 <path d="M12 3c-4 0-7 3-7 7 0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#2d9da1"/>253 </svg>254 </div>255 <div class="metric-value">0.55</div>256 <div class="metric-sub">Km</div>257 </div>258 259 <div class="metric">260 <div class="mini-ring">261 <div class="mini-arc"></div>262 <svg class="metric-icon" viewBox="0 0 24 24">263 <path d="M12 2c2 3 3 5 3 7a5 5 0 1 1-10 0c0-2 1-4 3-7 1 2 2 3 4 0z" fill="#2d9da1"/>264 </svg>265 </div>266 <div class="metric-value">0</div>267 <div class="metric-sub">Cals</div>268 </div>269 </div>270 </div>271 272 <!-- Cards -->273 <div class="cards">274 <div class="card">275 <div class="card-icon card-purple">276 <svg viewBox="0 0 24 24" width="84" height="84">277 <circle cx="12" cy="10" r="4" fill="#7b6cff"/>278 <rect x="11" y="14" width="2" height="6" fill="#7b6cff"/>279 <path d="M9 12h6" stroke="#7b6cff" stroke-width="2"/>280 </svg>281 </div>282 <div class="card-content">283 <div class="card-title">Track your mindfulness</div>284 <div class="card-sub">1 day left this week</div>285 </div>286 </div>287 288 <div class="card">289 <div class="card-icon card-orange">290 <svg viewBox="0 0 24 24" width="84" height="84">291 <path d="M8 6l3 1-1 3 2 2-2 3-3-1 1-3-2-2 2-3z" fill="#ff8a3d"/>292 <path d="M13 5l3 2-1 3 3 1" stroke="#ff8a3d" stroke-width="2" fill="none"/>293 </svg>294 </div>295 <div class="card-content">296 <div class="card-title">Track your exercise</div>297 <div class="card-sub">5 days left this week</div>298 </div>299 <div class="card-plus">+</div>300 </div>301 302 <div class="card">303 <div class="card-icon card-yellow">304 <svg viewBox="0 0 24 24" width="84" height="84">305 <rect x="5" y="6" width="14" height="12" rx="2" fill="#d9a824"/>306 <path d="M7 10h10M7 13h10" stroke="#fff" stroke-width="2"/>307 </svg>308 </div>309 <div class="card-content">310 <div class="card-title">74 kg</div>311 <div class="card-sub">Set a weight goal</div>312 </div>313 <div class="card-plus">+</div>314 </div>315 </div>316 317 <!-- Bottom navigation -->318 <div class="gesture-bar"></div>319 <div class="bottom-nav">320 <div class="nav-item active">321 <svg class="nav-icon" viewBox="0 0 24 24">322 <circle cx="6" cy="6" r="2" fill="#2d9da1"/>323 <circle cx="12" cy="6" r="2" fill="#2d9da1"/>324 <circle cx="18" cy="6" r="2" fill="#2d9da1"/>325 <circle cx="9" cy="12" r="2" fill="#2d9da1"/>326 <circle cx="15" cy="12" r="2" fill="#2d9da1"/>327 <circle cx="12" cy="18" r="2" fill="#2d9da1"/>328 </svg>329 <div>Today</div>330 </div>331 <div class="nav-item">332 <svg class="nav-icon" viewBox="0 0 24 24">333 <path d="M12 2l5 9h-10z" fill="#97a6ae"/>334 <circle cx="12" cy="16" r="4" fill="#97a6ae"/>335 </svg>336 <div>Discover</div>337 </div>338 <div class="nav-item">339 <svg class="nav-icon" viewBox="0 0 24 24">340 <circle cx="8" cy="10" r="3" fill="#97a6ae"/>341 <circle cx="16" cy="10" r="3" fill="#97a6ae"/>342 <path d="M4 20c1-4 7-4 8-4s7 0 8 4" stroke="#97a6ae" stroke-width="2" fill="none"/>343 </svg>344 <div>Community</div>345 </div>346 <div class="nav-item">347 <svg class="nav-icon" viewBox="0 0 24 24">348 <circle cx="4" cy="12" r="2" fill="#97a6ae"/>349 <circle cx="10" cy="6" r="2" fill="#97a6ae"/>350 <circle cx="10" cy="18" r="2" fill="#97a6ae"/>351 <circle cx="16" cy="12" r="2" fill="#97a6ae"/>352 <circle cx="22" cy="12" r="2" fill="#97a6ae"/>353 </svg>354 <div>Premium</div>355 </div>356 </div>357 358</div>359</body>360</html>