GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: 'Roboto', Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#121212;11 color:#E7E9F2;12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:24px; left:24px; right:24px;16 height:60px; display:flex; align-items:center; justify-content:space-between;17 color:#fff; font-weight:600; letter-spacing:0.5px;18 }19 .status-left { display:flex; align-items:center; gap:20px; }20 .status-left .time { font-size:40px; }21 .status-right { display:flex; align-items:center; gap:22px; }22 .sb-icon { width:34px; height:34px; opacity:0.9; }23 .info-btn {24 position:absolute; top:120px; right:200px;25 width:76px; height:76px; border-radius:50%;26 border:4px solid #dfe6ff; display:flex; align-items:center; justify-content:center;27 color:#fff; font-size:36px; box-sizing:border-box;28 }29 .avatar {30 position:absolute; top:108px; right:72px;31 width:112px; height:112px; border-radius:56px;32 background:#52A7B3; color:#fff; font-weight:700;33 display:flex; align-items:center; justify-content:center; font-size:48px;34 }35 36 /* rings */37 .rings-wrap {38 position:absolute; top:240px; left:0; right:0;39 text-align:center;40 }41 .ring-outer {42 width:640px; height:640px; margin:0 auto; position:relative;43 }44 .circle1, .circle2 {45 position:absolute; border-radius:50%;46 }47 .circle1 {48 width:640px; height:640px;49 border:26px solid #173B36;50 box-shadow: inset 0 0 0 8px rgba(22,60,48,0.25);51 }52 .circle2 {53 width:520px; height:520px; top:60px; left:60px;54 border:26px solid #27364A;55 box-shadow: inset 0 0 0 8px rgba(39,54,74,0.25);56 }57 .ring-dot {58 position:absolute; top:-14px; left:50%; transform:translateX(-50%);59 width:28px; height:28px; background:#4ED0A6; border-radius:50%;60 box-shadow:0 0 0 6px rgba(78,208,166,0.15);61 }62 .ring-dot.small {63 top:12px; width:24px; height:24px; background:#8198FF;64 }65 .ring-value {66 position:absolute; top:210px; left:0; right:0; text-align:center;67 font-size:160px; color:#5FE2B7; font-weight:700; line-height:1;68 }69 .ring-sub {70 position:absolute; top:390px; left:0; right:0; text-align:center;71 font-size:96px; color:#91A5FF; font-weight:700;72 }73 74 /* metric labels under rings */75 .metric-row {76 position:absolute; top:920px; left:0; right:0;77 display:flex; align-items:center; justify-content:center; gap:160px;78 font-size:44px; color:#BFD6C9;79 }80 .metric-row svg { width:56px; height:56px; margin-right:18px; }81 .metric-item { display:flex; align-items:center; }82 83 /* stats numbers */84 .stats-row {85 position:absolute; top:1030px; left:0; right:0;86 display:flex; justify-content:center; gap:170px; text-align:center;87 }88 .stat { color:#A8B9FF; }89 .stat .num { font-size:96px; font-weight:700; margin-bottom:8px; }90 .stat .label { font-size:44px; color:#C7CBD9; }91 92 /* cards */93 .card {94 width:1000px; margin:48px auto; background:#1A1D21; border-radius:28px;95 padding:40px; box-sizing:border-box;96 box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset;97 }98 .card-title { font-size:64px; font-weight:700; display:flex; align-items:center; gap:24px; }99 .pill {100 background:#3A3F63; color:#C5CBFF; border-radius:20px; padding:8px 18px; font-size:38px;101 }102 .card-sub { margin-top:24px; font-size:44px; color:#AAB0BE; display:flex; align-items:center; gap:16px; }103 .arrow { margin-left:auto; width:44px; height:44px; }104 .arrow:before {105 content:""; display:block; width:14px; height:14px; border-right:6px solid #C9CFDD; border-top:6px solid #C9CFDD; transform:rotate(45deg); margin-left:20px; margin-top:8px;106 }107 108 /* Daily goals card details */109 .small-note { color:#AAB0BE; font-size:40px; margin-top:8px; }110 .goals-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:42px; }111 .goals-left { font-size:60px; }112 .achieved { color:#9AB1FF; font-weight:700; }113 .dots-week { display:flex; gap:30px; align-items:center; }114 .mini-ring { width:64px; height:64px; border-radius:50%; border:8px solid #203F3A; position:relative; }115 .mini-ring:after { content:""; position:absolute; width:54px; height:54px; border-radius:50%; border:8px solid #25344A; top:-6px; left:-6px; opacity:0.5; }116 .day-labels { display:flex; gap:40px; justify-content:flex-end; margin-top:18px; color:#A9AFBC; font-size:40px; letter-spacing:2px; }117 118 /* Weekly target card */119 .target-top { display:flex; align-items:center; justify-content:space-between; }120 .target-title { font-size:60px; font-weight:700; }121 .date { font-size:40px; color:#A9AFBC; margin-top:6px; }122 .target-bottom { margin-top:36px; display:flex; align-items:center; gap:46px; }123 .progress-track { width:540px; height:22px; background:#20433D; border-radius:12px; position:relative; overflow:hidden; }124 .progress-fill { position:absolute; left:0; top:0; height:100%; width:16%; background:#1E6F5F; }125 .target-count { font-size:56px; color:#7AE7B8; font-weight:700; }126 127 .fab {128 position:absolute; right:60px; bottom:60px; width:120px; height:120px; border-radius:60px;129 background:#272A30; box-shadow:0 12px 24px rgba(0,0,0,0.4);130 display:flex; align-items:center; justify-content:center;131 }132 .fab .plus {133 width:64px; height:64px; position:relative;134 }135 .plus:before, .plus:after {136 content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);137 background:#5A9DFE;138 }139 .plus:before { width:64px; height:12px; background:linear-gradient(90deg,#FF3B30 0%, #FFCC00 35%, #34C759 70%, #007AFF 100%); border-radius:6px; }140 .plus:after { width:12px; height:64px; background:linear-gradient(180deg,#FF3B30 0%, #FFCC00 35%, #34C759 70%, #007AFF 100%); border-radius:6px; }141 142 /* bottom nav */143 .bottom-nav {144 position:absolute; left:0; right:0; bottom:0; height:180px;145 background:rgba(8,8,8,0.7); backdrop-filter: blur(2px);146 display:flex; align-items:center; justify-content:space-around;147 border-top:1px solid rgba(255,255,255,0.08);148 }149 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#B9C1D6; font-size:40px; }150 .nav-item.active { color:#8EA5FF; }151 .nav-icon { width:64px; height:64px; }152 .home-dot {153 position:absolute; left:50%; transform:translateX(-50%); bottom:70px;154 width:14px; height:14px; border-radius:50%; background:#8EA5FF; opacity:0.9;155 }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status bar -->162 <div class="status-bar">163 <div class="status-left">164 <div class="time">8:09</div>165 <!-- simple icons -->166 <svg class="sb-icon" viewBox="0 0 24 24">167 <circle cx="12" cy="12" r="10" fill="#FFD54F"/>168 </svg>169 <svg class="sb-icon" viewBox="0 0 24 24">170 <rect x="2" y="6" width="20" height="12" rx="2" fill="#80D8FF"/>171 <circle cx="7" cy="12" r="3" fill="#004D40"/>172 </svg>173 <svg class="sb-icon" viewBox="0 0 24 24">174 <path d="M3 12l6-6v12l-6-6zm10-6h8v12h-8V6z" fill="#B0BEC5"/>175 </svg>176 <svg class="sb-icon" viewBox="0 0 24 24">177 <circle cx="12" cy="12" r="3" fill="#B0BEC5"></circle>178 </svg>179 </div>180 <div class="status-right">181 <svg class="sb-icon" viewBox="0 0 24 24">182 <path d="M3 10h18v4H3z" fill="#B0BEC5"/>183 </svg>184 <svg class="sb-icon" viewBox="0 0 24 24">185 <path d="M6 22h12v-2H6v2zm3-4h6l2-12H7l2 12z" fill="#B0BEC5"/>186 </svg>187 </div>188 </div>189 190 <!-- Top actions -->191 <div class="info-btn">i</div>192 <div class="avatar">V</div>193 194 <!-- Rings -->195 <div class="rings-wrap">196 <div class="ring-outer">197 <div class="circle1"></div>198 <div class="circle2"></div>199 <div class="ring-dot"></div>200 <div class="ring-dot small"></div>201 <div class="ring-value">0</div>202 <div class="ring-sub">0</div>203 </div>204 </div>205 206 <!-- Metrics labels -->207 <div class="metric-row">208 <div class="metric-item">209 <svg viewBox="0 0 24 24">210 <path d="M12 21s-7-4.35-7-10a5 5 0 0110 0c0 5.65-3 10-3 10z" fill="#59E0B5"/>211 </svg>212 <div>Heart Pts</div>213 </div>214 <div class="metric-item">215 <svg viewBox="0 0 24 24">216 <path d="M7 22c2 0 3-3 5-3s3 3 5 3" stroke="#8FA0FF" stroke-width="2" fill="none"/>217 <circle cx="9" cy="6" r="3" fill="#8FA0FF"/>218 </svg>219 <div>Steps</div>220 </div>221 </div>222 223 <!-- Stats -->224 <div class="stats-row">225 <div class="stat">226 <div class="num">1,350</div>227 <div class="label">Cal</div>228 </div>229 <div class="stat">230 <div class="num">0</div>231 <div class="label">mi</div>232 </div>233 <div class="stat">234 <div class="num">1</div>235 <div class="label">Move Min</div>236 </div>237 </div>238 239 <!-- Walking card -->240 <div class="card" style="position:absolute; top:1260px; left:40px;">241 <div class="card-title">242 <span>Walking</span>243 <span class="pill">Active</span>244 <div class="arrow"></div>245 </div>246 <div class="card-sub">247 <svg width="44" height="44" viewBox="0 0 24 24">248 <path d="M9 6a3 3 0 116 0 3 3 0 01-6 0zm2 6l-3 6h3l1-3 3 3h3l-5-6 1-3h-4l1 3z" fill="#C7CBD9"/>249 </svg>250 <span>Tap to see workout</span>251 </div>252 </div>253 254 <!-- Daily goals card -->255 <div class="card" style="position:absolute; top:1460px; left:40px;">256 <div class="target-top">257 <div class="target-title">Your daily goals</div>258 <div class="arrow"></div>259 </div>260 <div class="small-note">Last 7 days</div>261 262 <div class="goals-row">263 <div class="goals-left">264 <div class="achieved">0/7</div>265 <div style="font-size:40px; color:#AAB0BE; margin-top:8px;">Achieved</div>266 </div>267 <div>268 <div class="dots-week">269 <div class="mini-ring"></div>270 <div class="mini-ring"></div>271 <div class="mini-ring"></div>272 <div class="mini-ring"></div>273 <div class="mini-ring"></div>274 <div class="mini-ring"></div>275 <div class="mini-ring"></div>276 </div>277 <div class="day-labels">278 <div>S</div><div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div>279 </div>280 </div>281 </div>282 </div>283 284 <!-- Weekly target card -->285 <div class="card" style="position:absolute; top:1760px; left:40px; padding-bottom:80px;">286 <div class="target-top">287 <div class="target-title">Your weekly target</div>288 <div class="arrow"></div>289 </div>290 <div class="date">Oct 15 – 21</div>291 292 <div class="target-bottom">293 <div class="target-count">0 of 150</div>294 <div class="progress-track"><div class="progress-fill"></div></div>295 </div>296 297 <!-- floating add button inside this card -->298 <div class="fab">299 <div class="plus"></div>300 </div>301 </div>302 303 <!-- Bottom nav -->304 <div class="bottom-nav">305 <div class="nav-item active">306 <svg class="nav-icon" viewBox="0 0 24 24">307 <path d="M12 3l10 9h-3v9H5v-9H2l10-9z" fill="#8EA5FF"/>308 </svg>309 <div>Home</div>310 </div>311 <div class="nav-item">312 <svg class="nav-icon" viewBox="0 0 24 24">313 <rect x="5" y="4" width="14" height="16" rx="2" fill="#B9C1D6"/>314 <line x1="8" y1="8" x2="16" y2="8" stroke="#121212" stroke-width="2"/>315 <line x1="8" y1="12" x2="16" y2="12" stroke="#121212" stroke-width="2"/>316 <line x1="8" y1="16" x2="16" y2="16" stroke="#121212" stroke-width="2"/>317 </svg>318 <div>Journal</div>319 </div>320 <div class="nav-item">321 <svg class="nav-icon" viewBox="0 0 24 24">322 <rect x="4" y="6" width="16" height="2" fill="#B9C1D6"/>323 <rect x="4" y="11" width="16" height="2" fill="#B9C1D6"/>324 <rect x="4" y="16" width="16" height="2" fill="#B9C1D6"/>325 </svg>326 <div>List</div>327 </div>328 <div class="nav-item">329 <svg class="nav-icon" viewBox="0 0 24 24">330 <circle cx="9" cy="8" r="4" fill="#B9C1D6"/>331 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#B9C1D6"/>332 </svg>333 <div>Profile</div>334 </div>335 </div>336 <div class="home-dot"></div>337 338</div>339</body>340</html>