GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Google Fit Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #111315; color: #EDEDED;12 }13 14 /* Status bar */15 .status-bar {16 height: 88px;17 padding: 0 32px;18 display: flex; align-items: center; justify-content: space-between;19 color: #EDEDED; font-weight: 600; font-size: 40px;20 }21 .status-icons { display: flex; gap: 28px; align-items: center; }22 .icon-dot {23 width: 36px; height: 24px; border-radius: 4px; border: 2px solid #BDBDBD;24 }25 .icon-battery {26 width: 54px; height: 28px; border: 2px solid #BDBDBD; border-radius: 6px; position: relative;27 }28 .icon-battery:after {29 content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 14px; background: #BDBDBD; border-radius: 2px;30 }31 .bolt {32 position: absolute; right: 10px; top: 6px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 18px solid #BDBDBD;33 transform: rotate(35deg);34 }35 36 .content { position: absolute; left: 0; right: 0; top: 88px; bottom: 0; overflow: hidden; }37 38 /* Banner */39 .banner {40 margin: 20px 32px 0 32px;41 background: #1E1F22; border-radius: 22px; padding: 36px 36px 40px 36px; position: relative;42 }43 .banner h2 { margin: 0 0 14px 0; font-size: 52px; font-weight: 700; color: #EDEDED; }44 .banner p { margin: 0 0 28px 0; font-size: 36px; line-height: 1.45; color: #A9B0B6; }45 .link { color: #6CB3FF; font-size: 40px; font-weight: 600; }46 .close-x {47 position: absolute; right: 28px; top: 22px; width: 44px; height: 44px; color: #B8B8B8;48 }49 .close-x:before, .close-x:after {50 content: ""; position: absolute; left: 21px; top: 8px; width: 3px; height: 28px; background: #B8B8B8; border-radius: 2px;51 }52 .close-x:before { transform: rotate(45deg); }53 .close-x:after { transform: rotate(-45deg); }54 55 .section-title {56 padding: 36px 32px 18px 32px; color: #C6CDD3; letter-spacing: 2px;57 font-weight: 700; font-size: 38px;58 }59 60 /* Cards common */61 .card {62 margin: 0 32px 26px 32px; padding: 34px 34px; background: #1C1E21; border-radius: 26px; position: relative;63 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);64 }65 .card .chev {66 position: absolute; right: 26px; top: 42px; width: 28px; height: 28px;67 }68 .card h3 { margin: 0; font-size: 52px; color: #EDEDED; }69 .muted { color: #98A0A8; font-size: 34px; margin-top: 6px; }70 71 .metric-row {72 display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px;73 }74 .metric-left .value { font-size: 68px; font-weight: 800; }75 .green { color: #00DC9A; }76 .blue { color: #6CB3FF; }77 .metric-left .sub { margin-top: 8px; font-size: 36px; color: #89A098; }78 79 .graph {80 margin: 26px 0; height: 6px; border-bottom: 2px dashed #3A4552;81 }82 83 .days {84 display: flex; justify-content: space-between; align-items: center; margin-top: 18px;85 }86 .day {87 color: #8B93A0; font-size: 34px; width: 40px; text-align: center;88 }89 .pill {90 width: 30px; height: 18px; border-radius: 6px; background: #00DC9A; display: inline-block;91 }92 .square-blue {93 width: 30px; height: 30px; border-radius: 6px; background: #4C84FF; display: inline-block;94 }95 96 /* Weight card */97 .top-actions {98 position: absolute; right: 96px; top: 38px; display: flex; gap: 30px; align-items: center;99 }100 .plus {101 width: 64px; height: 64px; border-radius: 16px; border: 2px solid #3C3F44; display: flex; align-items: center; justify-content: center; color: #EDEDED; font-size: 54px; line-height: 64px;102 }103 .workout {104 margin-top: 18px; display: flex; align-items: center; gap: 16px; color: #B7BEC6; font-size: 34px;105 }106 .badge {107 width: 44px; height: 44px; border-radius: 10px; background: #E53935; display: inline-flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700;108 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);109 }110 111 /* Floating action button */112 .fab {113 position: absolute; right: 46px; bottom: 310px; width: 140px; height: 140px; background: #23262B; border-radius: 50%;114 box-shadow: 0 8px 22px rgba(0,0,0,0.6);115 display: flex; align-items: center; justify-content: center;116 border: 1px solid #2F3338;117 }118 .fab .plus-inner {119 width: 72px; height: 72px; position: relative;120 }121 .fab .plus-inner:before, .fab .plus-inner:after {122 content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 16px; height: 72px; background: #4C84FF; border-radius: 8px;123 }124 .fab .plus-inner:after {125 width: 72px; height: 16px; left: 0; top: 50%; transform: translateY(-50%); background: #00DC9A; border-radius: 8px;126 }127 128 /* Bottom nav */129 .bottom-nav {130 position: absolute; bottom: 0; left: 0; right: 0; height: 176px; background: #16181B; border-top-left-radius: 26px; border-top-right-radius: 26px;131 box-shadow: 0 -2px 0 rgba(255,255,255,0.03) inset;132 display: flex; justify-content: space-around; align-items: center;133 padding-bottom: 20px;134 }135 .nav-item { display: flex; flex-direction: column; align-items: center; color: #A6AFB7; font-size: 32px; gap: 12px; }136 .nav-item.active { color: #63C1FF; }137 .nav-icon {138 width: 86px; height: 86px; border-radius: 24px; background: transparent; border: 3px solid transparent; display: flex; align-items: center; justify-content: center;139 }140 .nav-item.active .nav-icon {141 border-color: #63C1FF;142 }143 .mini-divider {144 position: absolute; left: 50%; transform: translateX(-50%); bottom: 164px; width: 220px; height: 10px; background: #E0E0E0; opacity: 0.22; border-radius: 8px;145 }146 147 /* Small next section card preview */148 .preview-card {149 margin: 0 32px 32px 32px;150 background: #1C1E21; border-radius: 26px; padding: 32px; color: #EDEDED;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <div class="status-bar">158 <div>11:44</div>159 <div class="status-icons">160 <div class="icon-dot"></div>161 <div class="icon-dot" style="width:46px;"></div>162 <div class="icon-battery"><div class="bolt"></div></div>163 </div>164 </div>165 166 <div class="content">167 168 <div class="banner">169 <div class="close-x"></div>170 <h2>Get notifications from Fit</h2>171 <p>Allow Fit to send notifications to get coaching messages and tips to help you meet your goals</p>172 <div class="link">Turn on notifications</div>173 </div>174 175 <div class="section-title">TRENDS</div>176 177 <!-- Heart Points -->178 <div class="card">179 <svg class="chev" viewBox="0 0 24 24" fill="#A5ADB6"><path d="M8 4l8 8-8 8" /></svg>180 <h3>Heart Points</h3>181 <div class="muted">Last 7 days</div>182 183 <div class="graph"></div>184 185 <div class="metric-row">186 <div class="metric-left">187 <div class="value green">5<span style="font-size:48px; font-weight:700;"> pts</span></div>188 <div class="sub" style="color:#00DC9A">Today</div>189 </div>190 <div style="display:flex; align-items:center; gap:36px;">191 <!-- Placeholder spacer -->192 </div>193 </div>194 195 <div class="days">196 <div class="day">W</div>197 <div class="day">T</div>198 <div class="day">F</div>199 <div class="day">S</div>200 <div class="day">S</div>201 <div class="day">M</div>202 <div class="day">T<br><span class="pill"></span></div>203 </div>204 </div>205 206 <!-- Steps -->207 <div class="card">208 <svg class="chev" viewBox="0 0 24 24" fill="#A5ADB6"><path d="M8 4l8 8-8 8" /></svg>209 <h3>Steps</h3>210 <div class="muted">Last 7 days</div>211 212 <div class="graph" style="border-bottom-color:#415063"></div>213 214 <div class="metric-row">215 <div class="metric-left">216 <div class="value blue">2,511</div>217 <div class="sub" style="color:#6CB3FF">Today</div>218 </div>219 <div class="square-blue"></div>220 </div>221 222 <div class="days">223 <div class="day">W</div>224 <div class="day">T</div>225 <div class="day">F</div>226 <div class="day">S</div>227 <div class="day">S</div>228 <div class="day">M</div>229 <div class="day">T</div>230 </div>231 </div>232 233 <!-- Weight -->234 <div class="card">235 <div class="top-actions">236 <div class="plus">+</div>237 <svg class="chev" style="position:relative; right:auto; top:auto;" viewBox="0 0 24 24" width="28" height="28" fill="#A5ADB6"><path d="M8 4l8 8-8 8" /></svg>238 </div>239 240 <h3>Weight</h3>241 <div class="muted">Jul 12 – Oct 3 ·</div>242 243 <div class="workout">244 <div class="badge">🏋️</div>245 <div>Home Workout - No Equipment</div>246 </div>247 248 <div class="metric-row" style="margin-top: 34px;">249 <div class="metric-left">250 <div class="value" style="color:#EDEDED">165 <span style="font-size:42px;">lb</span></div>251 <div class="sub" style="color:#97A0A8">4 hr. ago</div>252 </div>253 <div style="color:#7E8791; font-size:38px; align-self:flex-end; margin-bottom:12px;">Aug Sep Oct</div>254 </div>255 </div>256 257 <!-- Next section preview -->258 <div class="preview-card">259 <div style="display:flex; align-items:center; justify-content:space-between;">260 <div style="font-size:52px;">Energy expended</div>261 <svg viewBox="0 0 24 24" width="32" height="32" fill="#A5ADB6"><path d="M8 4l8 8-8 8" /></svg>262 </div>263 </div>264 265 </div>266 267 <!-- Floating Action -->268 <div class="fab">269 <div class="plus-inner"></div>270 </div>271 272 <!-- Bottom navigation -->273 <div class="mini-divider"></div>274 <div class="bottom-nav">275 <div class="nav-item active">276 <div class="nav-icon">277 <svg viewBox="0 0 24 24" width="44" height="44" fill="#63C1FF"><path d="M3 12l9-8 9 8v8H3z"/></svg>278 </div>279 <div>Home</div>280 </div>281 <div class="nav-item">282 <div class="nav-icon">283 <svg viewBox="0 0 24 24" width="44" height="44" fill="#A6AFB7"><path d="M7 3h10v4H7zM5 9h14v4H5zM9 15h6v6H9z"/></svg>284 </div>285 <div>Journal</div>286 </div>287 <div class="nav-item">288 <div class="nav-icon">289 <svg viewBox="0 0 24 24" width="44" height="44" fill="#A6AFB7"><path d="M4 11h16v2H4zm0-6h16v2H4zm0 12h16v2H4z"/></svg>290 </div>291 <div>Goals</div>292 </div>293 <div class="nav-item">294 <div class="nav-icon">295 <svg viewBox="0 0 24 24" width="44" height="44" fill="#A6AFB7"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 7v1h18v-1c0-4-4-7-9-7z"/></svg>296 </div>297 <div>Profile</div>298 </div>299 </div>300 301</div>302</body>303</html>