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 Style Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F5F7F8;15 color: #202124;16 }17 18 /* Header / Alert */19 .top-area {20 position: relative;21 height: 560px;22 background: #D85A47;23 color: #fff;24 }25 .status-bar {26 height: 90px;27 padding: 0 36px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-weight: 600;32 opacity: 0.95;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 28px;38 font-size: 34px;39 }40 .brand-row {41 height: 110px;42 padding: 0 36px;43 display: flex;44 align-items: center;45 justify-content: space-between;46 }47 .brand-title {48 font-size: 58px;49 letter-spacing: 2px;50 font-weight: 600;51 opacity: 0.95;52 }53 .round-avatar {54 width: 82px; height: 82px; border-radius: 50%;55 background: #3B8F7F;56 display: flex; align-items: center; justify-content: center;57 font-weight: 700; font-size: 38px; color: #fff;58 }59 .divider {60 height: 1px; background: rgba(255,255,255,0.35);61 margin: 6px 0 10px 0;62 }63 .alert-content {64 padding: 24px 40px 0 40px;65 }66 .alert-header {67 display: flex; align-items: center; justify-content: space-between;68 margin-bottom: 16px;69 }70 .alert-title {71 display: flex; align-items: center; gap: 18px;72 font-weight: 700; font-size: 46px;73 }74 .alert-text {75 font-size: 34px; line-height: 1.45; opacity: 0.95;76 margin-top: 6px;77 }78 .learn-more {79 margin-top: 34px; font-weight: 700; font-size: 40px; letter-spacing: .5px;80 }81 .thumbs {82 position: absolute; right: 46px; bottom: 16px;83 display: flex; gap: 34px; opacity: 0.5;84 }85 86 /* Main content header */87 .content {88 background: #fff;89 border-top-left-radius: 26px;90 border-top-right-radius: 26px;91 margin-top: -18px;92 padding-bottom: 280px;93 }94 .today-bar {95 position: relative;96 height: 140px;97 display: flex; align-items: center; justify-content: center;98 font-weight: 700; color: #1B2B34; letter-spacing: 1px;99 }100 .today-bar .title { font-size: 46px; }101 .edit-btn {102 position: absolute; right: 40px;103 padding: 18px 40px;104 background: #F3F5F6; color: #2C3D45;105 border-radius: 40px; box-shadow: 0 6px 12px rgba(0,0,0,0.08);106 font-weight: 700;107 }108 .back-btn {109 position: absolute; left: 24px;110 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: #9AA5AB;111 }112 113 /* Progress ring */114 .progress-wrap {115 display: flex; align-items: center; justify-content: center;116 margin-top: 10px;117 }118 .ring {119 position: relative;120 width: 420px; height: 420px;121 border-radius: 50%;122 border: 26px solid #DFF0F0;123 display: flex; align-items: center; justify-content: center;124 }125 .ring .dot {126 position: absolute; top: -18px; left: 50%; transform: translateX(-50%);127 width: 34px; height: 34px; border-radius: 50%; background: #49B5BB;128 }129 .ring .inner {130 text-align: center;131 }132 .ring .steps-num { font-size: 96px; font-weight: 800; color: #11212A; }133 .ring .steps-label { font-size: 38px; color: #83959E; margin-top: -8px; }134 .shoe {135 width: 70px; height: 44px; margin: 0 auto 8px auto;136 }137 138 /* Stats below ring */139 .stats-row {140 width: 88%;141 margin: 36px auto 20px auto;142 display: flex; align-items: flex-start; justify-content: space-between;143 }144 .stat {145 width: 40%;146 text-align: center;147 }148 .stat .icon-circle {149 width: 140px; height: 140px; border-radius: 50%;150 border: 20px solid #E6F4F4; margin: 0 auto 14px auto;151 position: relative; display: flex; align-items: center; justify-content: center;152 }153 .stat .value { font-size: 44px; font-weight: 800; color: #1C2B33; margin-top: 10px; }154 .stat .unit { font-size: 30px; color: #8C9AA1; margin-top: 4px; }155 156 /* Cards */157 .cards {158 margin: 20px 24px 0 24px;159 }160 .card {161 background: #fff; border-radius: 28px;162 box-shadow: 0 18px 28px rgba(0,0,0,0.08);163 padding: 34px 34px;164 display: flex; align-items: center; gap: 26px;165 margin-bottom: 34px;166 }167 .card .circle-icon {168 width: 120px; height: 120px; border-radius: 50%;169 background: #F7F2FF; display: flex; align-items: center; justify-content: center;170 }171 .card .content {172 flex: 1; background: none; padding: 0; box-shadow: none;173 }174 .card .title {175 font-size: 44px; font-weight: 800; color: #1D2D36;176 }177 .card .sub {178 font-size: 32px; color: #8B98A0; margin-top: 6px;179 }180 .plus {181 font-size: 70px; color: #B5C1C7; padding: 0 12px;182 }183 184 /* Bottom navigation */185 .bottom-nav {186 position: absolute; left: 0; right: 0; bottom: 0;187 height: 210px; background: #FFFFFF; border-top: 1px solid #E6EAED;188 display: flex; flex-direction: column; justify-content: space-between; align-items: center;189 }190 .nav-items {191 width: 100%; height: 150px; display: flex; align-items: center; justify-content: space-around;192 color: #8E9BA2; font-size: 30px;193 }194 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }195 .nav-item.active { color: #2B3A42; font-weight: 700; }196 .home-indicator {197 width: 360px; height: 14px; background: #AAB3B9; border-radius: 10px; margin-bottom: 16px;198 }199 200 /* Helpers */201 .x-close { font-size: 54px; opacity: 0.9; }202 .white-50 { color: rgba(255,255,255,0.9); }203 .muted { opacity: 0.8; }204 .icon16 { width: 52px; height: 52px; }205 206 /* SVG default sizes */207 svg { display: block; }208</style>209</head>210<body>211<div id="render-target">212 213 <div class="top-area">214 <div class="status-bar">215 <div class="white-50" style="display:flex;align-items:center;gap:16px;font-size:36px;">216 <span>4:02</span>217 <svg width="44" height="28" viewBox="0 0 44 28" fill="none">218 <path d="M4 22c6-8 14-8 20 0" stroke="white" stroke-width="3" stroke-linecap="round"/>219 </svg>220 </div>221 <div class="status-right">222 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">223 <path d="M12 2l7 18-7-4-7 4 7-18z" stroke="white" stroke-width="1.8"/>224 </svg>225 <svg width="40" height="34" viewBox="0 0 24 24" fill="none">226 <path d="M3 18h18c0-5-4-9-9-9s-9 4-9 9z" stroke="white" stroke-width="1.8"/>227 </svg>228 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">229 <rect x="5" y="6" width="14" height="12" rx="2" stroke="white" stroke-width="1.8"/>230 </svg>231 </div>232 </div>233 234 <div class="brand-row">235 <div style="display:flex;align-items:center;gap:20px;">236 <svg class="icon16" viewBox="0 0 24 24" fill="none">237 <circle cx="12" cy="12" r="6" stroke="white" stroke-width="2"/>238 <circle cx="12" cy="12" r="2" fill="white"/>239 </svg>240 </div>241 <div class="brand-title">fitbit</div>242 <div style="display:flex;align-items:center;gap:26px;">243 <svg width="70" height="54" viewBox="0 0 28 22" fill="none">244 <rect x="1.5" y="1.5" width="25" height="19" rx="2" stroke="white" stroke-width="3"/>245 <path d="M3 3l11 8L25 3" stroke="white" stroke-width="3"/>246 </svg>247 <div class="round-avatar">C</div>248 </div>249 </div>250 251 <div class="divider"></div>252 253 <div class="alert-content">254 <div class="alert-header">255 <div class="alert-title">256 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">257 <circle cx="6" cy="4" r="2" fill="white"/>258 <path d="M4 22l4-8 3 2 4-6" stroke="white" stroke-width="2" stroke-linecap="round"/>259 </svg>260 <span>Activity</span>261 </div>262 <div class="x-close">×</div>263 </div>264 <div class="alert-text">265 Similar to meditation, repetitive physical activities can help you relax. If you're feeling stressed, try 30 minutes of jogging, cycling or swimming 3–5 days a week.266 </div>267 <div class="learn-more">LEARN MORE</div>268 </div>269 270 <div class="thumbs">271 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">272 <path d="M14 10h5v8h-5l-4 2v-9l4-1zM4 18h4v-8H4v8z" fill="white"/>273 </svg>274 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">275 <path d="M10 14H5V6h5l4-2v9l-4 1zM20 6h-4v8h4V6z" fill="white"/>276 </svg>277 </div>278 </div>279 280 <div class="content">281 <div class="today-bar">282 <div class="back-btn">283 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">284 <path d="M15 4L7 12l8 8" stroke="#96A5AD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 <div class="title">TODAY</div>288 <div class="edit-btn">EDIT</div>289 </div>290 291 <div class="progress-wrap">292 <div class="ring">293 <div class="dot"></div>294 <div class="inner">295 <svg class="shoe" viewBox="0 0 64 32" fill="none">296 <path d="M6 24c2-5 10-7 14-6l10 4c8 2 18 0 22 1v5H6v-4z" fill="#4EB0B5"/>297 <path d="M18 14l4 2M22 12l4 2M26 10l4 2" stroke="#E7FFFF" stroke-width="2" stroke-linecap="round"/>298 </svg>299 <div class="steps-num">20</div>300 <div class="steps-label">Steps</div>301 </div>302 </div>303 </div>304 305 <div class="stats-row">306 <div class="stat">307 <div class="icon-circle">308 <svg width="70" height="84" viewBox="0 0 24 24" fill="none">309 <path d="M12 2c4 0 7 3 7 7 0 5-7 13-7 13S5 14 5 9c0-4 3-7 7-7z" stroke="#49B5BB" stroke-width="2.4" fill="none"/>310 <circle cx="12" cy="9" r="2" fill="#49B5BB"/>311 </svg>312 </div>313 <div class="value">0.01</div>314 <div class="unit">Km</div>315 </div>316 <div class="stat">317 <div class="icon-circle">318 <svg width="70" height="84" viewBox="0 0 24 24" fill="none">319 <path d="M12 3c2 3 3 4 3 7a5 5 0 11-10 0c0-2 1-4 3-7" stroke="#49B5BB" stroke-width="2.4" fill="none"/>320 </svg>321 <div style="position:absolute; right:-4px; top:-4px; width:34px; height:34px; border-radius:50%; border:8px solid #49B5BB; border-left-color:transparent; border-bottom-color:transparent;"></div>322 </div>323 <div class="value">833</div>324 <div class="unit">Cals</div>325 </div>326 </div>327 328 <div class="cards">329 <div class="card">330 <div class="circle-icon">331 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">332 <circle cx="12" cy="12" r="10" stroke="#C89CF8" stroke-width="2" stroke-dasharray="6 6"/>333 <path d="M12 6a4 4 0 014 4v4a2 2 0 01-2 2h-1" stroke="#A36BEF" stroke-width="2"/>334 <circle cx="9.5" cy="9" r="1.7" fill="#A36BEF"/>335 </svg>336 </div>337 <div class="content">338 <div class="title">Track your mindfulness</div>339 <div class="sub">5 days left this week</div>340 </div>341 </div>342 343 <div class="card">344 <div class="circle-icon" style="background:#FFF4EC;">345 <svg width="70" height="70" viewBox="0 0 24 24" fill="none">346 <circle cx="12" cy="12" r="10" stroke="#FFB48A" stroke-width="2" stroke-dasharray="6 6"/>347 <path d="M7 16l2-4 3 2 3-5" stroke="#F58B52" stroke-width="2" stroke-linecap="round"/>348 </svg>349 </div>350 <div class="content">351 <div class="title">1 of 5 days</div>352 <div class="sub">of exercise this week</div>353 </div>354 <div class="plus">+</div>355 </div>356 </div>357 </div>358 359 <div class="bottom-nav">360 <div class="nav-items">361 <div class="nav-item active">362 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">363 <circle cx="6" cy="6" r="2" fill="#2B3A42"/>364 <circle cx="12" cy="6" r="2" fill="#2B3A42"/>365 <circle cx="18" cy="6" r="2" fill="#2B3A42"/>366 <circle cx="9" cy="12" r="2" fill="#2B3A42"/>367 <circle cx="15" cy="12" r="2" fill="#2B3A42"/>368 <circle cx="12" cy="18" r="2" fill="#2B3A42"/>369 </svg>370 <div>Today</div>371 </div>372 <div class="nav-item">373 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">374 <path d="M12 2l9 9-9 9-9-9 9-9z" stroke="#8E9BA2" stroke-width="2"/>375 </svg>376 <div>Discover</div>377 </div>378 <div class="nav-item">379 <svg width="48" height="44" viewBox="0 0 24 24" fill="none">380 <circle cx="7" cy="8" r="3" stroke="#8E9BA2" stroke-width="2"/>381 <circle cx="17" cy="8" r="3" stroke="#8E9BA2" stroke-width="2"/>382 <path d="M3 20c1-4 7-4 8 0M13 20c1-4 7-4 8 0" stroke="#8E9BA2" stroke-width="2"/>383 </svg>384 <div>Community</div>385 </div>386 <div class="nav-item">387 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">388 <circle cx="6" cy="12" r="2" fill="#D8A34C"/>389 <circle cx="12" cy="6" r="2" fill="#D8A34C"/>390 <circle cx="12" cy="18" r="2" fill="#D8A34C"/>391 <circle cx="18" cy="12" r="2" fill="#D8A34C"/>392 </svg>393 <div>Premium</div>394 </div>395 </div>396 <div class="home-indicator"></div>397 </div>398 399</div>400</body>401</html>