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 Dashboard Mock</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F4F7F5; color:#1f2625;12 }13 14 /* Generic */15 .row { display:flex; align-items:center; }16 .space-between { justify-content:space-between; }17 .center { display:flex; align-items:center; justify-content:center; }18 .muted { color:#6c7a74; }19 .title { font-weight:700; }20 21 /* Top app bar area */22 .top-area { position:absolute; left:0; right:0; top:40px; padding:40px 56px 0; }23 .appbar { position:relative; height:180px; }24 .brand { position:absolute; left:50%; transform:translateX(-50%); top:10px; font-size:64px; font-weight:700; letter-spacing:0.5px; }25 .left-icons { position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:28px; }26 .right-icons { position:absolute; right:0; top:0; height:100%; display:flex; align-items:center; gap:28px; }27 .icon-btn { width:76px; height:76px; border-radius:22px; background:transparent; display:flex; align-items:center; justify-content:center; }28 .avatar { width:76px; height:76px; border-radius:50%; background:#5a3b33; color:#fff; font-weight:700; font-size:40px; display:flex; align-items:center; justify-content:center; }29 .subheader { position:absolute; left:0; right:0; top:140px; display:flex; align-items:center; justify-content:center; gap:18px; }30 .subheader .text { font-size:54px; font-weight:700; }31 .pencil { position:absolute; right:80px; top:150px; }32 33 /* Rings */34 .ring {35 --size: 620px;36 --thickness: 34px;37 --value: 0.22turn; /* progress */38 --fg: #0A8F7A;39 --bg: #D6E9E4;40 width: var(--size);41 height: var(--size);42 border-radius:50%;43 position:relative;44 background:45 conic-gradient(var(--fg) 0 var(--value), var(--bg) var(--value) 1turn);46 mask: radial-gradient(closest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));47 -webkit-mask: radial-gradient(closest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));48 }49 .ring.small {50 --size: 300px;51 --thickness: 26px;52 }53 .ring-wrap { position:absolute; left:50%; transform:translateX(-50%); top:470px; }54 .ring .center-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }55 .ring .center-icon svg { width:160px; height:160px; }56 .metric { position:absolute; left:50%; transform:translateX(-50%); top:1110px; text-align:center; }57 .metric .value { font-size:120px; font-weight:800; letter-spacing:1px; }58 .metric .label { font-size:46px; color:#6a7771; margin-top:10px; }59 60 .mini-metrics { position:absolute; left:0; right:0; top:1280px; display:flex; justify-content:space-between; padding:0 120px; }61 .mini { width:360px; text-align:center; position:relative; }62 .mini .caption { margin-top:24px; font-size:64px; font-weight:800; }63 .mini .sub { font-size:40px; color:#6c7a74; margin-top:8px; }64 65 /* Sleep card */66 .section-title { position:absolute; top:1640px; left:56px; font-size:52px; font-weight:700; color:#1d2624; }67 .card {68 position:absolute; top:1700px; left:40px; right:40px;69 background:#ffffff; border-radius:40px; padding:44px 44px; box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;70 min-height:360px;71 }72 .card h3 { margin:0; font-size:48px; font-weight:700; }73 .card .nodata { margin-top:42px; font-size:76px; font-weight:700; color:#1e2725; }74 .card .today { margin-top:18px; font-size:40px; color:#86948e; }75 .moon-badge {76 position:absolute; right:44px; top:44px; width:140px; height:140px; border-radius:50%; background:#EDE8FA; display:flex; align-items:center; justify-content:center; color:#7D66D6;77 }78 79 /* Floating add button */80 .fab {81 position:absolute; right:76px; top:1935px; width:128px; height:128px; border-radius:28px;82 background:#CFE9E2; color:#0a8f7a; font-size:90px; line-height:128px; text-align:center;83 box-shadow:0 18px 28px rgba(0,0,0,0.18);84 }85 86 /* Bottom nav */87 .bottom-nav {88 position:absolute; left:0; right:0; bottom:104px; height:230px; padding:24px 80px 0;89 background:#EEF2F0; border-top:1px solid #E1E7E4; display:flex; justify-content:space-between; align-items:center; border-top-left-radius:28px; border-top-right-radius:28px;90 }91 .nav-item { width:260px; text-align:center; color:#5e6a65; }92 .nav-item .label { margin-top:18px; font-size:40px; }93 .nav-item.active .pill { background:#D9EDE7; }94 .pill {95 width:150px; height:110px; border-radius:60px; margin:0 auto; display:flex; align-items:center; justify-content:center;96 }97 98 /* Handle */99 .handle {100 position:absolute; bottom:28px; left:50%; transform:translateX(-50%);101 width:360px; height:16px; border-radius:10px; background:#BFC7C3;102 }103 104 /* Simple svg defaults */105 svg { display:block; }106 107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Top bar and header -->113 <div class="top-area">114 <div class="appbar">115 <div class="left-icons">116 <div class="icon-btn">117 <!-- simple device/watch icon -->118 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#6a7771" fill="none" stroke-width="1.8">119 <rect x="3.5" y="5" width="10" height="14" rx="2"></rect>120 <rect x="16" y="7" width="4.5" height="10" rx="1.5"></rect>121 </svg>122 </div>123 </div>124 <div class="brand">fitbit</div>125 <div class="right-icons">126 <div class="icon-btn">127 <!-- chat bubble -->128 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#5b6a64" fill="none" stroke-width="1.8">129 <rect x="3" y="4" width="16" height="12" rx="2"></rect>130 <path d="M7 16v4l4-4"></path>131 </svg>132 </div>133 <div class="avatar">F</div>134 </div>135 136 <div class="subheader">137 <!-- back chevron -->138 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#6b7772" fill="none" stroke-width="2">139 <path d="M14 6l-6 6 6 6"></path>140 </svg>141 <div class="text">Today</div>142 </div>143 <div class="pencil">144 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#6b7772" fill="none" stroke-width="2">145 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>146 <path d="M14.06 4.94l3.75 3.75"></path>147 </svg>148 </div>149 </div>150 </div>151 152 <!-- Big steps ring -->153 <div class="ring-wrap">154 <div class="ring" style="--value:0.23turn;">155 <div class="center-icon">156 <!-- Shoe icon -->157 <svg viewBox="0 0 24 24">158 <path d="M3 14c2 .5 3-1.5 5-1.5 2 0 3 3 7 3 4 0 5-1 6-1.5V17c0 1.1-.9 2-2 2H6c-1.7 0-3-1.3-3-3v-2z" fill="none" stroke="#0A8F7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>159 <path d="M6 12l2.2-2c.8-.7 1.6-1 2.8-.7l3 1" fill="none" stroke="#0A8F7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 </div>163 </div>164 <div class="metric">165 <div class="value">117</div>166 <div class="label">Steps</div>167 </div>168 169 <!-- Mini metrics row -->170 <div class="mini-metrics">171 <div class="mini">172 <div class="center">173 <div class="ring small" style="--value:0.12turn;">174 <div class="center-icon">175 <!-- location pin -->176 <svg viewBox="0 0 24 24">177 <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z" fill="none" stroke="#0A8F7A" stroke-width="2"/>178 <circle cx="12" cy="10" r="2.5" fill="none" stroke="#0A8F7A" stroke-width="2"/>179 </svg>180 </div>181 </div>182 </div>183 <div class="caption">0.08</div>184 <div class="sub">km</div>185 </div>186 187 <div class="mini">188 <div class="center">189 <div class="ring small" style="--value:0.28turn;">190 <div class="center-icon">191 <!-- flame -->192 <svg viewBox="0 0 24 24">193 <path d="M12 3c1.5 2 .5 3.5-.3 5-1 2 .8 3.2 2.3 2.2 0 2-1.5 3.3-3 3.3-2.8 0-4.5-2.4-3.8-5C8.8 6.3 9.6 5 9.6 5S8 6 7 8.2C5.6 11.3 7.7 16 12 16c3.4 0 6-2.6 6-6 0-3.4-2.6-5.5-6-7z" fill="none" stroke="#0A8F7A" stroke-width="2" stroke-linejoin="round"/>194 </svg>195 </div>196 </div>197 </div>198 <div class="caption">495</div>199 <div class="sub">cal</div>200 </div>201 </div>202 203 <!-- Sleep card -->204 <div class="section-title">Sleep</div>205 <div class="card">206 <h3>Sleep duration</h3>207 <div class="nodata">No data</div>208 <div class="today">Today</div>209 <div class="moon-badge">210 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#7D66D6" stroke-width="1.8">211 <path d="M14.5 4A7 7 0 1019 15.5 6 6 0 0114.5 4z"></path>212 <path d="M6 6l1 1M18 6l-1 1M12 3v2M12 19v2" stroke-linecap="round"/>213 </svg>214 </div>215 </div>216 217 <div class="fab">+</div>218 219 <!-- Bottom navigation -->220 <div class="bottom-nav">221 <div class="nav-item active">222 <div class="pill">223 <!-- sun -->224 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#0A8F7A" fill="none" stroke-width="2">225 <circle cx="12" cy="12" r="4"></circle>226 <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M19.8 4.2l-1.4 1.4M6 18.4L4.6 19.8"></path>227 </svg>228 </div>229 <div class="label">Today</div>230 </div>231 232 <div class="nav-item">233 <div class="pill" style="background:transparent;">234 <!-- clipboard -->235 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#5e6a65" fill="none" stroke-width="2">236 <rect x="6" y="5" width="12" height="16" rx="2"></rect>237 <path d="M9 5V3h6v2"></path>238 <path d="M9 11h6M9 15h6"></path>239 </svg>240 </div>241 <div class="label">Coach</div>242 </div>243 244 <div class="nav-item">245 <div class="pill" style="background:transparent;">246 <!-- grid -->247 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#5e6a65" fill="none" stroke-width="2">248 <rect x="4" y="4" width="7" height="7" rx="1"></rect>249 <rect x="13" y="4" width="7" height="7" rx="1"></rect>250 <rect x="4" y="13" width="7" height="7" rx="1"></rect>251 <rect x="13" y="13" width="7" height="7" rx="1"></rect>252 </svg>253 </div>254 <div class="label">You</div>255 </div>256 </div>257 258 <div class="handle"></div>259</div>260</body>261</html>