GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #EAEAEA;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 24px; left: 30px; right: 30px; height: 72px;16 display: flex; align-items: center; justify-content: space-between;17 color: #FFFFFF; font-weight: 500;18 }19 .status-left { display: flex; align-items: center; gap: 26px; }20 .time { font-size: 40px; letter-spacing: 0.5px; }21 .mini-icon { width: 34px; height: 34px; border-radius: 8px; background: #2A2A2A; display: flex; align-items: center; justify-content: center; font-size: 24px; }22 23 .status-right { display: flex; align-items: center; gap: 26px; }24 .wifi-bar, .battery {25 display: inline-block; width: 38px; height: 24px;26 }27 .wifi-bar svg, .battery svg { width: 100%; height: 100%; }28 29 /* Top actions */30 .top-actions {31 position: absolute; top: 116px; right: 40px; display: flex; gap: 28px; align-items: center;32 }33 .info-circle {34 width: 80px; height: 80px; border-radius: 40px; border: 3px solid #FFFFFF;35 display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 700; font-size: 40px;36 opacity: 0.92;37 }38 .avatar {39 width: 96px; height: 96px; border-radius: 48px; background: #D64A6F; color: #FFFFFF;40 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 44px;41 }42 43 /* Rings area */44 .rings-area {45 position: absolute; top: 280px; left: 0; right: 0; text-align: center;46 }47 .rings {48 position: relative; width: 560px; height: 560px; margin: 0 auto;49 }50 .ring.outer {51 position: absolute; left: 0; top: 0; width: 560px; height: 560px; border-radius: 50%;52 border: 20px solid #193C38; /* dark teal track */53 box-shadow: inset 0 0 0 0 #000;54 }55 .ring.mid {56 position: absolute; left: 40px; top: 40px; width: 480px; height: 480px; border-radius: 50%;57 border: 18px solid #1E2A3A; /* blue-gray track */58 }59 .ring.inner {60 position: absolute; left: 78px; top: 78px; width: 404px; height: 404px; border-radius: 50%;61 border: 16px solid #1A1F27; /* inner track */62 display: flex; align-items: center; justify-content: center; flex-direction: column;63 }64 .progress-dot-teal, .progress-dot-blue {65 position: absolute; width: 28px; height: 28px; border-radius: 50%;66 top: -6px; left: 50%; transform: translateX(-50%);67 }68 .progress-dot-teal { background: #63D9C5; }69 .progress-dot-blue { background: #6FA4FF; top: 18px; }70 71 .big-number { font-size: 120px; color: #63D9C5; font-weight: 700; line-height: 1; }72 .small-number { font-size: 64px; color: #8FA5FF; margin-top: 8px; }73 74 /* Label row below rings */75 .labels {76 margin-top: 30px; display: flex; justify-content: center; gap: 140px; align-items: center;77 font-size: 50px; font-weight: 600;78 }79 .label { display: flex; align-items: center; gap: 18px; color: #EAEAEA; }80 .label svg { width: 58px; height: 58px; }81 82 /* Stats row */83 .stats {84 margin-top: 70px; display: flex; justify-content: center; gap: 210px;85 }86 .stat { text-align: center; }87 .stat .value { font-size: 64px; color: #9FC4FF; font-weight: 700; }88 .stat .key { font-size: 42px; color: #BDBDBD; margin-top: 8px; }89 90 /* Card common */91 .card {92 width: 960px; margin: 70px auto 0 auto; background: #1E1E1E; border-radius: 34px;93 padding: 48px; position: relative; color: #EAEAEA; box-shadow: 0 10px 28px rgba(0,0,0,0.35);94 }95 .card .close {96 position: absolute; right: 36px; top: 30px; width: 56px; height: 56px; border-radius: 28px;97 background: #2A2A2A; display: flex; justify-content: center; align-items: center; color: #FFFFFF; font-size: 36px;98 }99 .card h2 {100 font-size: 56px; margin: 0 0 18px 0; font-weight: 700;101 }102 .card p {103 font-size: 40px; line-height: 1.45; color: #CFCFCF; margin: 0 0 30px 0;104 max-width: 680px;105 }106 .link {107 font-size: 46px; color: #6FA4FF; font-weight: 700;108 }109 110 .hc-logo {111 position: absolute; right: 44px; top: 140px; width: 140px; height: 140px; border-radius: 20px;112 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;113 }114 115 /* Second card specifics */116 .pref-row { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }117 .info-mini {118 width: 42px; height: 42px; border-radius: 21px; border: 3px solid #7FB3FF; color: #7FB3FF;119 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px;120 }121 122 /* Floating Action Button */123 .fab {124 position: absolute; right: 74px; bottom: 420px; width: 150px; height: 150px; border-radius: 75px;125 background: #2A2A2A; box-shadow: 0 16px 36px rgba(0,0,0,0.6);126 display: flex; align-items: center; justify-content: center;127 }128 .google-plus {129 position: relative; width: 92px; height: 92px;130 }131 .google-plus .bar {132 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);133 width: 18px; height: 84px; border-radius: 9px;134 }135 .google-plus .bar.vert { background: linear-gradient(#EA4335 0 25%, #FBBC05 25% 50%, #34A853 50% 75%, #4285F4 75% 100%); }136 .google-plus .bar.horz { width: 84px; height: 18px; background: linear-gradient(90deg, #EA4335 0 25%, #FBBC05 25% 50%, #34A853 50% 75%, #4285F4 75% 100%); }137 138 /* Bottom navigation */139 .bottom-nav {140 position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: rgba(18,18,18,0.96);141 display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #222;142 }143 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9E9E9E; }144 .nav-item.active .icon-circle { border-color: #85B8FF; background: #1F2C45; }145 .nav-item.active .label { color: #FFFFFF; font-weight: 700; }146 .icon-circle {147 width: 88px; height: 88px; border-radius: 44px; border: 4px solid #3A3A3A; display: flex; align-items: center; justify-content: center;148 }149 .label { font-size: 38px; }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status Bar -->156 <div class="status-bar">157 <div class="status-left">158 <div class="time">10:06</div>159 <div class="mini-icon">M</div>160 <div class="mini-icon">✚</div>161 <div class="mini-icon">▶</div>162 </div>163 <div class="status-right">164 <div class="wifi-bar">165 <svg viewBox="0 0 24 24" fill="#FFFFFF">166 <path d="M12 18a2 2 0 1 0 0.001 0zM2 8c5.5-4.5 14.5-4.5 20 0l-2 2c-4.5-3.5-11.5-3.5-16 0L2 8zm4 4c3.5-2.8 8.5-2.8 12 0l-2 2c-2.7-2-7.3-2-10 0l-2-2z"></path>167 </svg>168 </div>169 <div class="battery">170 <svg viewBox="0 0 28 24" fill="#FFFFFF">171 <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>172 <rect x="22" y="8" width="4" height="8" rx="1"></rect>173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Top actions -->179 <div class="top-actions">180 <div class="info-circle">i</div>181 <div class="avatar">C</div>182 </div>183 184 <!-- Rings -->185 <div class="rings-area">186 <div class="rings">187 <div class="ring outer"></div>188 <div class="ring mid"></div>189 <div class="ring inner">190 <div class="big-number">0</div>191 <div class="small-number">0</div>192 </div>193 <div class="progress-dot-teal"></div>194 <div class="progress-dot-blue"></div>195 </div>196 197 <!-- Labels -->198 <div class="labels">199 <div class="label">200 <svg viewBox="0 0 24 24" fill="#63D9C5">201 <path d="M12 21s-7-4.9-9.5-8.1C.7 10 .9 7.2 3 5.8c2.3-1.6 5.2-.9 6.7 1.1 1.5-2 4.4-2.7 6.7-1.1 2.1 1.4 2.3 4.2 .5 7.1C19 16.1 12 21 12 21z"></path>202 </svg>203 <div>Heart Pts</div>204 </div>205 <div class="label">206 <svg viewBox="0 0 24 24" fill="#8FA5FF">207 <path d="M9 3c1.3 0 2 .9 2 2s-.7 2-2 2-2-.9-2-2 .7-2 2-2zm4 5h2l3 3-2 2-2-2-2 4-3 2H6l1.5-2H5l-1-2h3l1.2-2.4L10 9h3z"></path>208 </svg>209 <div>Steps</div>210 </div>211 </div>212 213 <!-- Stats -->214 <div class="stats">215 <div class="stat">216 <div class="value">0</div>217 <div class="key">Cal</div>218 </div>219 <div class="stat">220 <div class="value">0</div>221 <div class="key">mi</div>222 </div>223 <div class="stat">224 <div class="value">0</div>225 <div class="key">Move Min</div>226 </div>227 </div>228 </div>229 230 <!-- Card: Health Connect -->231 <div class="card" style="top: 1240px;">232 <div class="close">✕</div>233 <h2>Sync Fit with Health Connect</h2>234 <p>Share stats between Fit and your other apps, like your calories, heart rate, and body measurements</p>235 <div class="link">Get started</div>236 <div class="hc-logo">[IMG: Health Connect Logo]</div>237 </div>238 239 <!-- Card: Activity tracking is off -->240 <div class="card" style="top: 1520px;">241 <div class="close">✕</div>242 <h2>Activity tracking is off</h2>243 <div class="pref-row">244 <div class="info-mini">i</div>245 <div class="link">Tracking preferences</div>246 </div>247 <p>Fit won't track your activity, but connected apps can still add data to Fit if they have permission. You can manage connected apps and change your tracking preferences in Settings.</p>248 </div>249 250 <!-- Floating Action Button -->251 <div class="fab">252 <div class="google-plus">253 <div class="bar vert"></div>254 <div class="bar horz"></div>255 </div>256 </div>257 258 <!-- Bottom Navigation -->259 <div class="bottom-nav">260 <div class="nav-item active">261 <div class="icon-circle">262 <svg viewBox="0 0 24 24" width="56" height="56" fill="#9FC4FF">263 <path d="M12 3l10 9-1.5 1.8L12 6 3.5 13.8 2 12zM4 20h6v-6h4v6h6v-8l-8-6-8 6v8z"></path>264 </svg>265 </div>266 <div class="label">Home</div>267 </div>268 <div class="nav-item">269 <div class="icon-circle">270 <svg viewBox="0 0 24 24" width="56" height="56" fill="#9E9E9E">271 <path d="M7 3h10v2H7zM4 7h16v2H4zM7 11h10v2H7zM4 15h16v2H4zM7 19h10v2H7z"></path>272 </svg>273 </div>274 <div class="label">Journal</div>275 </div>276 <div class="nav-item">277 <div class="icon-circle">278 <svg viewBox="0 0 24 24" width="56" height="56" fill="#9E9E9E">279 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>280 </svg>281 </div>282 <div class="label">Browse</div>283 </div>284 <div class="nav-item">285 <div class="icon-circle">286 <svg viewBox="0 0 24 24" width="56" height="56" fill="#9E9E9E">287 <path d="M12 12a5 5 0 1 0 0.001-10.001A5 5 0 0 0 12 12zm0 2c-4.4 0-8 2.7-8 6v2h16v-2c0-3.3-3.6-6-8-6z"></path>288 </svg>289 </div>290 <div class="label">Profile</div>291 </div>292 </div>293 294</div>295</body>296</html>