GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Mock UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #efe1cc;13 color: #1f2a33;14 }15 16 /* Top status bar */17 .status-bar {18 height: 90px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 font-size: 32px;23 color: #222;24 }25 .status-left { display:flex; gap:18px; align-items:center; }26 .status-right { margin-left:auto; display:flex; gap:28px; align-items:center; }27 28 /* Simple icon dots/lines */29 .dot { width:10px; height:10px; background:#333; border-radius:50%; display:inline-block; }30 .tiny-bar { width:28px; height:6px; background:#333; border-radius:3px; display:inline-block; }31 32 /* App header */33 .app-header {34 position: relative;35 height: 120px;36 display: flex;37 align-items: center;38 justify-content: center;39 }40 .brand {41 font-size: 64px;42 letter-spacing: 2px;43 color: #12232e;44 font-weight: 600;45 }46 .top-icon {47 position: absolute;48 left: 36px;49 width: 70px; height: 70px;50 border-radius: 50%;51 background:#d9d0bd;52 display:flex;align-items:center;justify-content:center;53 }54 .inbox-icon {55 position:absolute;56 right: 200px;57 width: 90px; height: 64px;58 border-radius:12px;59 background:#d9d0bd;60 display:flex; align-items:center; justify-content:center;61 }62 .profile {63 position:absolute;64 right: 36px;65 width: 96px; height: 96px;66 border-radius: 48px;67 background:#5f6df2;68 color:#fff;69 display:flex; align-items:center; justify-content:center;70 font-size: 46px; font-weight:700;71 }72 73 /* Promo banner */74 .promo {75 background:#e5d6bd;76 margin: 0;77 padding: 40px 36px 44px 36px;78 border-top: 2px solid #d8c9ae;79 border-bottom: 2px solid #d8c9ae;80 }81 .promo-title {82 display:flex; align-items:center; gap:22px;83 font-size: 48px; font-weight:700; margin-bottom: 10px;84 }85 .promo p { margin: 0; font-size: 36px; line-height: 1.4; color:#2a2a2a; max-width: 880px;}86 .promo .close-x {87 position:absolute; right: 36px; top: 310px;88 width: 60px; height: 60px; border-radius:50%;89 border: 2px solid #8b7f69; color:#6b6354;90 display:flex; align-items:center; justify-content:center; font-size:34px;91 }92 .promo .cta {93 position:absolute; right: 36px; top: 440px;94 color:#1f2a33; font-weight:700; font-size: 40px;95 }96 97 /* Content area */98 .content {99 background:#fff;100 border-top-left-radius: 40px;101 border-top-right-radius: 40px;102 margin-top: 16px;103 padding-bottom: 220px;104 }105 106 .row {107 display:flex; align-items:center;108 }109 110 .sub-header {111 padding: 32px 36px 10px 36px;112 }113 .back {114 width: 70px; height: 70px; border-radius: 20px; background:#f1f4f6;115 display:flex; align-items:center; justify-content:center; margin-right: 18px;116 }117 .today-title { font-size: 54px; font-weight:800; }118 .edit-btn {119 margin-left:auto; margin-right: 36px;120 background:#eef7f8; color:#1a444b;121 padding: 18px 34px; border-radius: 34px; font-size: 36px; border: 2px solid #cfe7ea;122 }123 124 /* Big circle steps */125 .steps-wrap { display:flex; flex-direction:column; align-items:center; margin-top: 10px; }126 .big-circle {127 width: 520px; height: 520px; border-radius: 50%;128 border: 24px solid rgba(28,155,164,0.18);129 display:flex; align-items:center; justify-content:center;130 position: relative;131 }132 .big-circle::before {133 content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%);134 width: 24px; height: 24px; background:#2db3bb; border-radius:50%;135 }136 .inner {137 width: 420px; height: 420px; border-radius:50%;138 background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;139 }140 .shoe {141 width: 120px; height: 90px; background:#2db3bb; border-radius: 20px;142 margin-bottom: 16px; position:relative;143 }144 .steps-number { font-size: 120px; font-weight:800; color:#1f2a33; line-height:1; }145 .steps-label { font-size: 48px; color:#6a7680; margin-top: 6px; }146 147 /* Small metrics */148 .metrics {149 display:flex; justify-content:space-between; padding: 40px 170px 0 170px; align-items:center;150 }151 .metric { text-align:center; }152 .metric .badge {153 width: 132px; height:132px; border-radius: 66px;154 border: 12px solid #d9f1f3; display:flex; align-items:center; justify-content:center;155 }156 .metric .badge .pin {157 width: 54px; height: 54px; border-radius: 30px; background:#2db3bb;158 clip-path: polygon(50% 0, 82% 30%, 73% 70%, 50% 100%, 27% 70%, 18% 30%);159 }160 .metric .badge .flame {161 width: 54px; height: 74px; background:#2db3bb; border-radius: 40px 40px 40px 12px / 60px 60px 40px 12px;162 transform: rotate(20deg);163 }164 .metric .value { font-size: 54px; font-weight:800; margin-top: 18px; }165 .metric .label { font-size: 36px; color:#6a7680; margin-top: 4px; }166 167 /* Cards */168 .card {169 margin: 36px;170 border: 2px solid #e6eaef;171 border-radius: 28px;172 padding: 34px;173 display:flex; align-items:center; gap:34px;174 box-shadow: 0 2px 0 rgba(0,0,0,0.03);175 }176 .card .circle-ico {177 width: 130px; height:130px; border-radius:65px; background: #f4ecff;178 display:flex; align-items:center; justify-content:center; color:#7f55e6; font-weight:800; font-size:46px;179 }180 .card .text-title { font-size: 46px; font-weight:800; }181 .card .sub { font-size: 34px; color:#6a7680; margin-top: 10px; }182 183 .exercise .circle-ico { background:#fff6ed; color:#ef924b; }184 185 /* Bottom nav */186 .bottom-nav {187 position: absolute;188 bottom: 0;189 left: 0;190 right: 0;191 height: 150px;192 border-top: 1px solid #e6eaef;193 background:#ffffff;194 display:flex; justify-content:space-around; align-items:center;195 }196 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#7b8792; font-size:30px; }197 .nav-item.active { color:#111; }198 .grid-dot {199 width: 70px; height: 70px; position:relative;200 }201 .grid-dot i {202 position:absolute; width:12px; height:12px; background:#111; border-radius:50%;203 }204 /* Arrange 3x3 grid */205 .grid-dot i:nth-child(1){ left:6px; top:6px;} .grid-dot i:nth-child(2){ left:29px; top:6px;} .grid-dot i:nth-child(3){ left:52px; top:6px;}206 .grid-dot i:nth-child(4){ left:6px; top:29px;} .grid-dot i:nth-child(5){ left:29px; top:29px;} .grid-dot i:nth-child(6){ left:52px; top:29px;}207 .grid-dot i:nth-child(7){ left:6px; top:52px;} .grid-dot i:nth-child(8){ left:29px; top:52px;} .grid-dot i:nth-child(9){ left:52px; top:52px;}208 .nav-icon {209 width: 70px; height: 70px; border-radius: 20px; background:#e9eef2; display:flex; align-items:center; justify-content:center;210 }211 .leaf { width: 32px; height: 32px; border-radius: 0 50% 50% 50%; background:#596b74; transform: rotate(-45deg); }212 .people { width: 46px; height: 28px; border-radius: 14px; background:#596b74; position:relative; }213 .people::before { content:""; position:absolute; width:24px; height:24px; border-radius:12px; background:#596b74; left:-8px; top:-18px;}214 .dots { width: 12px; height: 12px; background:#caa24a; border-radius:50%; box-shadow: 18px 0 0 #caa24a, 36px 0 0 #caa24a, 54px 0 0 #caa24a; }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status Bar -->221 <div class="status-bar">222 <div class="status-left">223 <div style="font-weight:700;">10:22</div>224 <div class="tiny-bar"></div>225 <span class="dot"></span>226 <span class="dot" style="opacity:.6"></span>227 <span class="dot" style="opacity:.3"></span>228 </div>229 <div class="status-right">230 <div class="tiny-bar" style="width:34px;"></div>231 <div class="tiny-bar" style="width:26px;"></div>232 <div class="tiny-bar" style="width:14px;"></div>233 </div>234 </div>235 236 <!-- App Header -->237 <div class="app-header">238 <div class="top-icon">239 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">240 <path d="M12 2a7 7 0 00-7 7v2H3v8h18v-8h-2V9a7 7 0 00-7-7zm0 2a5 5 0 015 5v2H7V9a5 5 0 015-5z" fill="#7a6f59"/>241 </svg>242 </div>243 <div class="brand">fitbit</div>244 <div class="inbox-icon">245 <svg width="60" height="40" viewBox="0 0 24 24" fill="none">246 <path d="M3 7h18v10H3z" stroke="#6b6354" stroke-width="1.5"/>247 <path d="M3 7l9 6 9-6" stroke="#6b6354" stroke-width="1.5"/>248 </svg>249 </div>250 <div class="profile">C</div>251 </div>252 253 <!-- Promo Banner -->254 <div class="promo">255 <div class="promo-title">256 <svg width="44" height="44" viewBox="0 0 24 24" fill="#3e6d72">257 <circle cx="4" cy="12" r="2"></circle>258 <circle cx="12" cy="4" r="2"></circle>259 <circle cx="20" cy="12" r="2"></circle>260 <circle cx="12" cy="20" r="2"></circle>261 </svg>262 <div>We’re here for you</div>263 </div>264 <p>We’re offering Fitbit Premium to help you stay active at home, eat healthy, sleep better & manage stress.</p>265 <div class="close-x">×</div>266 <div class="cta">GET STARTED</div>267 </div>268 269 <!-- Content area -->270 <div class="content">271 272 <!-- Sub Header Today -->273 <div class="sub-header row">274 <div class="back">275 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">276 <path d="M15 6l-6 6 6 6" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>277 </svg>278 </div>279 <div class="today-title">TODAY</div>280 <div class="edit-btn">EDIT</div>281 </div>282 283 <!-- Steps big circle -->284 <div class="steps-wrap">285 <div class="big-circle">286 <div class="inner">287 <div class="shoe"></div>288 <div class="steps-number">1</div>289 <div class="steps-label">Steps</div>290 </div>291 </div>292 </div>293 294 <!-- Metrics -->295 <div class="metrics">296 <div class="metric">297 <div class="badge">298 <div class="pin"></div>299 </div>300 <div class="value">0</div>301 <div class="label">Km</div>302 </div>303 <div class="metric">304 <div class="badge" style="border-color:#cdecef;">305 <div class="flame"></div>306 </div>307 <div class="value">1,376</div>308 <div class="label">Cals</div>309 </div>310 </div>311 312 <!-- Cards -->313 <div class="card">314 <div class="circle-ico">🧠</div>315 <div>316 <div class="text-title">Track your mindfulness</div>317 <div class="sub">5 days left this week</div>318 </div>319 </div>320 321 <div class="card exercise">322 <div class="circle-ico">🏃</div>323 <div>324 <div class="text-title">Track your exercise</div>325 </div>326 </div>327 328 </div>329 330 <!-- Bottom Navigation -->331 <div class="bottom-nav">332 <div class="nav-item active">333 <div class="grid-dot">334 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>335 </div>336 <div>Today</div>337 </div>338 <div class="nav-item">339 <div class="nav-icon"><div class="leaf"></div></div>340 <div>Discover</div>341 </div>342 <div class="nav-item">343 <div class="nav-icon"><div class="people"></div></div>344 <div>Community</div>345 </div>346 <div class="nav-item">347 <div class="nav-icon"><div class="dots"></div></div>348 <div>Premium</div>349 </div>350 </div>351 352</div>353</body>354</html>