GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">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; color:#202124; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background: linear-gradient(#ffffff 0%, #fbfbfc 60%, #f4f6f8 100%);11 border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:24px; left:0; width:100%; height:90px; padding:0 40px;17 display:flex; align-items:center; justify-content:space-between; color:#5f6368;18 font-size:40px;19 }20 .status-left { display:flex; align-items:center; gap:22px; }21 .status-right { display:flex; align-items:center; gap:26px; }22 .status-icon svg { width:42px; height:42px; fill:#5f6368; }23 24 /* Top actions */25 .top-actions {26 position:absolute; top:190px; right:60px; display:flex; align-items:center; gap:24px;27 }28 .circle-btn {29 width:92px; height:92px; border-radius:50%;30 background:#eceff1; color:#455a64; display:flex; align-items:center; justify-content:center;31 box-shadow: 0 2px 4px rgba(0,0,0,0.08) inset;32 font-weight:bold; font-size:40px;33 }34 .circle-btn.small { width:78px; height:78px; font-size:36px; }35 36 /* Progress rings */37 .progress {38 position:absolute; top:420px; left:50%; transform:translateX(-50%);39 width:560px; height:560px;40 }41 .ring { position:absolute; border-radius:50%; }42 .ring.teal {43 width:560px; height:560px;44 background: conic-gradient(#5ec5b5 82%, #e7eef3 0);45 -webkit-mask: radial-gradient(circle, transparent 64%, black 65%);46 }47 .ring.blue {48 width:480px; height:480px; top:40px; left:40px;49 background: conic-gradient(#2d55a4 68%, #e8ecf5 0);50 -webkit-mask: radial-gradient(circle, transparent 64%, black 65%);51 }52 .progress-text {53 position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;54 text-align:center;55 }56 .progress-text .big { font-size:120px; font-weight:700; color:#5ec5b5; line-height:1; }57 .progress-text .sub { font-size:66px; font-weight:700; color:#2d55a4; margin-top:20px; }58 59 /* Metrics labels under ring */60 .ring-labels {61 position:absolute; top:1020px; left:0; width:100%; display:flex; align-items:center; justify-content:center; gap:120px;62 font-size:46px; color:#3c4043;63 }64 .label-item { display:flex; align-items:center; gap:18px; }65 .label-item svg { width:48px; height:48px; }66 67 /* Stats row */68 .stats {69 position:absolute; top:1150px; left:0; width:100%; display:flex; justify-content:center; gap:180px; text-align:center;70 }71 .stat { color:#5f6368; }72 .stat .value { font-size:70px; font-weight:700; color:#3c6bd8; }73 .stat:nth-child(1) .value { color:#2d55a4; }74 .stat:nth-child(3) .value { color:#3c6bd8; }75 .stat .label { font-size:40px; margin-top:6px; }76 77 /* Card base */78 .card {79 position:absolute; left:36px; right:36px; background:#fff; border-radius:28px;80 box-shadow: 0 8px 20px rgba(0,0,0,0.08); padding:44px;81 }82 .card h2 { margin:0 0 22px 0; font-size:58px; font-weight:700; }83 .card p { margin:0; font-size:42px; color:#5f6368; line-height:1.4; }84 .card .cta { margin-top:28px; font-size:46px; color:#2d55a4; font-weight:700; }85 .close-x { position:absolute; top:32px; right:32px; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#5f6368; font-size:46px; }86 .card .img-placeholder {87 position:absolute; right:48px; bottom:46px; width:150px; height:150px;88 background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px;89 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; text-align:center; padding:10px;90 }91 92 /* Dancing card */93 .pill { display:inline-block; padding:10px 18px; background:#e9e4ff; color:#6a64ff; border-radius:999px; font-weight:700; font-size:38px; margin-left:14px; }94 .row { display:flex; align-items:center; justify-content:space-between; }95 .chev { width:36px; height:36px; border-right:6px solid #b0b6bb; border-bottom:6px solid #b0b6bb; transform:rotate(-45deg); border-radius:2px; margin-left:20px; }96 .subline { margin-top:26px; font-size:42px; color:#5f6368; display:flex; align-items:center; gap:18px; }97 .run-icon svg { width:44px; height:44px; fill:#5f6368; }98 99 /* Goals card */100 .goals-row { margin-top:18px; display:flex; align-items:center; gap:16px; }101 .goal-dot {102 width:44px; height:44px; border-radius:50%; background: conic-gradient(#5ec5b5 70%, #e6eef3 0);103 -webkit-mask: radial-gradient(circle, transparent 40%, black 41%);104 box-shadow: inset 0 0 0 10px #2d55a4;105 }106 .fab {107 position:absolute; right:50px; top:-34px; width:132px; height:132px; border-radius:50%;108 background:#fff; box-shadow:0 10px 20px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center;109 }110 .fab .plus {111 position:relative; width:84px; height:84px;112 }113 .plus::before, .plus::after {114 content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);115 border-radius:6px;116 }117 .plus::before { width:84px; height:16px; background:linear-gradient(to right,#ea4335 50%, #4285f4 50%); }118 .plus::after { width:16px; height:84px; background:linear-gradient(to bottom,#fbbc05 50%, #34a853 50%); }119 120 /* Bottom navigation */121 .bottom-nav {122 position:absolute; bottom:86px; left:18px; right:18px; height:160px;123 background:#ffffffee; border-radius:28px; box-shadow:0 10px 24px rgba(0,0,0,0.08);124 display:flex; align-items:center; justify-content:space-around;125 }126 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:36px; color:#5f6368; }127 .nav-item svg { width:64px; height:64px; }128 .nav-item.active { color:#1a73e8; font-weight:700; }129 .nav-item.active .home-ring {130 width:72px; height:72px; border-radius:50%; border:6px solid #1a73e8; display:flex; align-items:center; justify-content:center;131 }132 .home-dot { width:26px; height:26px; border-radius:50%; background:#1a73e8; }133 134 /* Gesture bar */135 .gesture {136 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);137 width:220px; height:12px; background:#c7cdd1; border-radius:20px;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status bar -->145 <div class="status-bar">146 <div class="status-left">147 <div>1:11</div>148 <div class="status-icon">149 <svg viewBox="0 0 24 24"><path d="M12 6c-3.3 0-6 2.7-6 6h12c0-3.3-2.7-6-6-6z"/></svg>150 </div>151 </div>152 <div class="status-right">153 <div class="status-icon">154 <svg viewBox="0 0 24 24"><path d="M2 18h20c-1.5-4.5-5.5-8-10-8S3.5 13.5 2 18z"/></svg>155 </div>156 <div class="status-icon">157 <svg viewBox="0 0 24 24"><rect x="6" y="5" width="12" height="14" rx="2" ry="2"></rect><rect x="18" y="8" width="2" height="8"></rect></svg>158 </div>159 </div>160 </div>161 162 <!-- Top actions -->163 <div class="top-actions">164 <div class="circle-btn small">i</div>165 <div class="circle-btn">C</div>166 </div>167 168 <!-- Progress rings -->169 <div class="progress">170 <div class="ring teal"></div>171 <div class="ring blue"></div>172 <div class="progress-text">173 <div class="big">115</div>174 <div class="sub">8,066</div>175 </div>176 </div>177 178 <!-- Labels -->179 <div class="ring-labels">180 <div class="label-item">181 <svg viewBox="0 0 24 24" fill="#35b18d"><path d="M12 21s-6-4.6-8.5-7.1C1.1 11.5 2 7.5 5.6 6.7c2-.4 3.2 1.1 4.4 2.7 1.2-1.6 2.4-3.1 4.4-2.7 3.6.8 4.5 4.8 2.1 7.2C18 16.4 12 21 12 21z"/></svg>182 <div>Heart Pts</div>183 </div>184 <div class="label-item">185 <svg viewBox="0 0 24 24" fill="#2d55a4"><path d="M7 18c2 0 3-1 4-2l3-3c1-1 2-2 4-2v-2c-3 0-4 1-5 2l-3 3c-1 1-2 2-3 2H4v2h3z"/></svg>186 <div>Steps</div>187 </div>188 </div>189 190 <!-- Stats -->191 <div class="stats">192 <div class="stat">193 <div class="value">969</div>194 <div class="label">Cal</div>195 </div>196 <div class="stat">197 <div class="value">0.01</div>198 <div class="label">mi</div>199 </div>200 <div class="stat">201 <div class="value">177</div>202 <div class="label">Move Min</div>203 </div>204 </div>205 206 <!-- Card: Sync Fit with Health Connect -->207 <div class="card" style="top:1360px;">208 <div class="close-x">×</div>209 <h2>Sync Fit with Health Connect</h2>210 <p>Share stats between Fit and your other apps, like your calories, heart rate, and body measurements</p>211 <div class="cta">Get started</div>212 <div class="img-placeholder">[IMG: Health Connect logo]</div>213 </div>214 215 <!-- Card: Dancing -->216 <div class="card" style="top:1710px;">217 <div class="row" style="align-items:center;">218 <h2 style="margin:0; font-size:56px;">Dancing</h2>219 <span class="pill">Active</span>220 <div style="flex:1;"></div>221 <div class="chev"></div>222 </div>223 <div class="subline">224 <span class="run-icon">225 <svg viewBox="0 0 24 24"><path d="M13 5a2 2 0 110 4 2 2 0 010-4zm-8 12l4-1 2-3 2 1 2 4h3l-3-5-2-1-2 1-2 3-2 1z"/></svg>226 </span>227 <span>Tap to see workout</span>228 </div>229 </div>230 231 <!-- Card: Your daily goals -->232 <div class="card" style="top:1980px; padding-bottom:120px;">233 <div class="fab"><div class="plus"></div></div>234 <h2>Your daily goals</h2>235 <p style="margin-top:6px;">Last 7 days</p>236 <div class="goals-row" style="margin-top:34px;">237 <div class="goal-dot"></div>238 <div class="goal-dot"></div>239 <div class="goal-dot"></div>240 <div class="goal-dot"></div>241 <div class="goal-dot"></div>242 <div class="goal-dot"></div>243 <div class="goal-dot"></div>244 <div class="goal-dot"></div>245 <div class="goal-dot"></div>246 </div>247 </div>248 249 <!-- Bottom navigation -->250 <div class="bottom-nav">251 <div class="nav-item active">252 <div class="home-ring"><div class="home-dot"></div></div>253 <div>Home</div>254 </div>255 <div class="nav-item">256 <svg viewBox="0 0 24 24" fill="#5f6368"><rect x="5" y="3" width="14" height="18" rx="2"/><line x1="8" y1="7" x2="16" y2="7" stroke="#5f6368" stroke-width="2"/><line x1="8" y1="12" x2="16" y2="12" stroke="#5f6368" stroke-width="2"/></svg>257 </div>258 <div class="nav-item">259 <svg viewBox="0 0 24 24" fill="#5f6368"><rect x="4" y="6" width="16" height="2"/><rect x="4" y="11" width="16" height="2"/><rect x="4" y="16" width="16" height="2"/></svg>260 </div>261 <div class="nav-item">262 <svg viewBox="0 0 24 24" fill="#5f6368"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>263 </div>264 </div>265 266 <div class="gesture"></div>267</div>268</body>269</html>