GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Mobile UI Render</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}8 #render-target{9 width:1440px;height:3120px;position:relative;overflow:hidden;10 background:#121212;color:#e6e6e6;11 }12 13 /* Status bar */14 .status-bar{position:absolute;top:0;left:0;width:100%;height:140px;padding:0 48px;15 display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#fff;}16 .status-left{display:flex;align-items:center;gap:24px;font-size:54px;}17 .status-right{display:flex;align-items:center;gap:32px;}18 .chip{background:#2a2a2a;border:2px solid #3a3a3a;border-radius:28px;color:#c7c7c7;19 padding:4px 16px;font-size:46px}20 .icon-round{width:58px;height:58px;border-radius:50%;border:4px solid #cfcfcf;display:flex;align-items:center;justify-content:center}21 .icon-round svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:5}22 23 /* Top action icons */24 .top-actions{position:absolute;top:180px;right:48px;display:flex;gap:36px}25 .circle-btn{width:118px;height:118px;border-radius:59px;background:#1f2f2d;border:4px solid #2e4a46;26 display:flex;align-items:center;justify-content:center}27 .circle-btn.light{background:#273c3a;border-color:#2f5c54}28 .circle-avatar{width:118px;height:118px;border-radius:59px;background:#204c3f;display:flex;align-items:center;justify-content:center;29 color:#c6f7de;font-weight:700;font-size:54px;border:4px solid #2b6758}30 31 /* Main rings */32 .ring-wrap{position:absolute;top:330px;left:0;width:100%;display:flex;justify-content:center}33 .ring{34 position:relative;width:720px;height:720px;border-radius:50%;35 border:28px solid #21433c; /* outer greenish */36 box-shadow:0 0 0 0 #000 inset;37 }38 .ring:before{39 content:"";position:absolute;inset:60px;border-radius:50%;40 border:28px solid #283142; /* inner dark blue ring */41 }42 .ring-dot{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;43 background:#64d6b7;border:6px solid #173c34;}44 .ring-dot.small{top:60px;left:50%;transform:translateX(-50%);width:64px;height:28px;border-radius:18px;background:#5f7fd6;border:none}45 46 .ring-content{position:absolute;top:420px;left:0;width:100%;text-align:center}47 .ring-number{font-size:172px;color:#67d6b8;font-weight:700;line-height:1}48 .ring-sub{font-size:98px;color:#8bb0ff;margin-top:18px}49 50 /* Labels under ring */51 .metrics-labels{position:absolute;top:1080px;left:0;width:100%;display:flex;justify-content:center;gap:120px}52 .ml-item{display:flex;align-items:center;gap:24px;font-size:80px;color:#cfd7dd}53 .ml-item svg{width:72px;height:72px;stroke-width:6}54 55 /* Numbers row */56 .numbers-row{position:absolute;top:1210px;left:0;width:100%;display:flex;justify-content:center;gap:240px;text-align:center}57 .n-item .big{font-size:120px;font-weight:700;color:#9fb6ff}58 .n-item .small{font-size:64px;color:#c7c7c7;margin-top:12px}59 60 /* Cards */61 .card{position:absolute;left:48px;right:48px;background:#1d1f21;border:2px solid #2a2d32;border-radius:36px;color:#d9d9d9}62 .card h3{margin:0;font-size:88px;color:#e9e9e9}63 .card p{margin:24px 0 0 0;font-size:56px;color:#b7b7b7;line-height:1.4}64 .card .cta{margin-top:56px;font-size:64px;color:#7fb1ff}65 .card .close{position:absolute;top:48px;right:48px;font-size:80px;color:#a8a8a8}66 .card .right-logo{position:absolute;right:80px;bottom:80px}67 .img-ph{width:180px;height:180px;background:#E0E0E0;border:2px solid #BDBDBD;color:#757575;display:flex;align-items:center;justify-content:center;border-radius:30px;font-size:40px;text-align:center;padding:10px}68 69 /* Goals card */70 .goals{top:1880px;padding:80px}71 .goals-title{font-size:92px;margin:0 0 18px 0}72 .goals-sub{font-size:56px;color:#a9a9a9}73 .goals-row{margin-top:60px;display:flex;align-items:flex-end;gap:40px}74 .goal-column{text-align:left}75 .goal-big{font-size:120px;color:#8fb0ff;font-weight:700}76 .goal-small{font-size:60px;color:#a9b3c2;margin-top:16px}77 .dots{margin-top:50px;display:flex;gap:36px}78 .dot{width:104px;height:104px;border-radius:52px;background:#1a2a29;border:10px solid #20433a;position:relative}79 .dot:after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#64d6b7}80 .day-label{margin-top:18px;text-align:center;color:#9aa9b6;font-size:54px}81 82 .dot-wrap{display:flex;flex-direction:column;align-items:center}83 84 /* Sync card */85 .sync{top:1440px;padding:80px}86 87 /* Floating action button */88 .fab{position:absolute;right:96px;bottom:900px;width:200px;height:200px;border-radius:100px;background:#2a2a2a;89 box-shadow:0 12px 28px rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center}90 .plus{position:relative;width:120px;height:120px}91 .plus:before,.plus:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:14px}92 .plus:before{width:24px;height:120px;background:#4285F4}93 .plus:after{width:120px;height:24px;background:#34A853}94 .plus span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:120px;background:#FBBC05;border-radius:14px;mix-blend-mode:screen}95 .plus i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:24px;background:#EA4335;border-radius:14px;mix-blend-mode:screen}96 97 /* Bottom nav */98 .bottom-nav{position:absolute;left:0;right:0;bottom:0;height:320px;background:rgba(20,20,20,0.9);backdrop-filter:blur(2px);99 border-top:2px solid #2f2f2f;display:flex;align-items:center;justify-content:space-around;padding:0 120px}100 .nav-item{display:flex;flex-direction:column;align-items:center;gap:24px;color:#cfd7dd}101 .nav-item.active{color:#8bb0ff}102 .nav-item svg{width:100px;height:100px;stroke:#cfd7dd;stroke-width:6;fill:none}103 .nav-item.active svg{stroke:#8bb0ff}104 .nav-text{font-size:60px}105 106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status bar -->112 <div class="status-bar">113 <div class="status-left">114 <div>12:00</div>115 <div class="chip">i</div>116 <div class="chip">S</div>117 <div class="chip">G</div>118 <div class="chip">79°</div>119 </div>120 <div class="status-right">121 <div class="icon-round">122 <!-- Wi-Fi -->123 <svg viewBox="0 0 24 24">124 <path d="M3 8c9-6 15-6 21 0M6 11c6-4 9-4 15 0M9 14c3-2 6-2 9 0"/>125 <circle cx="17" cy="19" r="2"></circle>126 </svg>127 </div>128 <div class="icon-round">129 <!-- Signal -->130 <svg viewBox="0 0 24 24">131 <path d="M3 21h3v-3H3zm6 0h3v-6H9zm6 0h3v-9h-3zm6 0h3v-12h-3z"/>132 </svg>133 </div>134 <div class="icon-round">135 <!-- Battery -->136 <svg viewBox="0 0 24 24">137 <rect x="3" y="6" width="17" height="12" rx="2"></rect>138 <rect x="21" y="10" width="2" height="4"></rect>139 </svg>140 </div>141 </div>142 </div>143 144 <!-- Top action icons -->145 <div class="top-actions">146 <div class="circle-btn">147 <!-- Info icon -->148 <svg viewBox="0 0 24 24">149 <circle cx="12" cy="12" r="9" stroke="#8bb0ff" fill="none" stroke-width="2"></circle>150 <circle cx="12" cy="8" r="1.6" fill="#8bb0ff"></circle>151 <path d="M12 11v6" stroke="#8bb0ff" stroke-width="2" stroke-linecap="round"></path>152 </svg>153 </div>154 <div class="circle-avatar">C</div>155 </div>156 157 <!-- Main ring -->158 <div class="ring-wrap">159 <div class="ring">160 <div class="ring-dot"></div>161 <div class="ring-dot small"></div>162 </div>163 </div>164 165 <div class="ring-content">166 <div class="ring-number">0</div>167 <div class="ring-sub">122</div>168 </div>169 170 <!-- Labels -->171 <div class="metrics-labels">172 <div class="ml-item">173 <!-- Heart -->174 <svg viewBox="0 0 24 24" stroke="#64d6b7" fill="none">175 <path d="M12 21s-7-4.6-9.5-8.2C.8 10.8.9 7.3 3.6 5.6c2.6-1.7 5.2-.3 6.4 1.5 1.2-1.8 3.8-3.2 6.4-1.5 2.7 1.7 2.8 5.2 1.1 7.2C19 16.2 12 21 12 21z"></path>176 </svg>177 <div>Heart Pts</div>178 </div>179 <div class="ml-item">180 <!-- Steps / run -->181 <svg viewBox="0 0 24 24" stroke="#8bb0ff" fill="none">182 <path d="M13 5l2 2-2 3-3-2-3 5M6 19l5-3 3 2 3-1" stroke-linecap="round" stroke-linejoin="round"></path>183 <circle cx="14.5" cy="4.5" r="1.5" stroke="none" fill="#8bb0ff"></circle>184 </svg>185 <div>Steps</div>186 </div>187 </div>188 189 <!-- Numbers row -->190 <div class="numbers-row">191 <div class="n-item">192 <div class="big">25</div>193 <div class="small">Cal</div>194 </div>195 <div class="n-item">196 <div class="big">0.04</div>197 <div class="small">mi</div>198 </div>199 <div class="n-item">200 <div class="big">2</div>201 <div class="small">Move Min</div>202 </div>203 </div>204 205 <!-- Sync card -->206 <div class="card sync">207 <div class="close">×</div>208 <h3>Sync Fit with Health Connect</h3>209 <p>Share stats between Fit and your other apps, like your calories, heart rate, and body measurements</p>210 <div class="cta">Get started</div>211 <div class="right-logo">212 <div class="img-ph">[IMG: Health Connect Logo]</div>213 </div>214 </div>215 216 <!-- Goals card -->217 <div class="card goals">218 <h3 class="goals-title">Your daily goals</h3>219 <div class="goals-sub">Last 7 days</div>220 <div class="goals-row">221 <div class="goal-column">222 <div class="goal-big">0/7</div>223 <div class="goal-small">Achieved</div>224 </div>225 <div class="dots">226 <div class="dot-wrap">227 <div class="dot"></div>228 <div class="day-label">F</div>229 </div>230 <div class="dot-wrap">231 <div class="dot"></div>232 <div class="day-label">S</div>233 </div>234 <div class="dot-wrap">235 <div class="dot"></div>236 <div class="day-label">S</div>237 </div>238 <div class="dot-wrap">239 <div class="dot"></div>240 <div class="day-label">S</div>241 </div>242 <div class="dot-wrap">243 <div class="dot"></div>244 <div class="day-label">M</div>245 </div>246 <div class="dot-wrap">247 <div class="dot"></div>248 <div class="day-label">T</div>249 </div>250 <div class="dot-wrap">251 <div class="dot"></div>252 <div class="day-label">W</div>253 </div>254 </div>255 </div>256 </div>257 258 <!-- Floating action button -->259 <div class="fab">260 <div class="plus">261 <span></span><i></i>262 </div>263 </div>264 265 <!-- Bottom navigation -->266 <div class="bottom-nav">267 <div class="nav-item active">268 <svg viewBox="0 0 24 24">269 <circle cx="12" cy="12" r="9"></circle>270 </svg>271 <div class="nav-text">Home</div>272 </div>273 <div class="nav-item">274 <svg viewBox="0 0 24 24">275 <rect x="6" y="4" width="12" height="16" rx="2"></rect>276 <line x1="9" y1="8" x2="15" y2="8"></line>277 </svg>278 <div class="nav-text">Journal</div>279 </div>280 <div class="nav-item">281 <svg viewBox="0 0 24 24">282 <line x1="5" y1="7" x2="19" y2="7"></line>283 <line x1="5" y1="12" x2="19" y2="12"></line>284 <line x1="5" y1="17" x2="19" y2="17"></line>285 </svg>286 <div class="nav-text">List</div>287 </div>288 <div class="nav-item">289 <svg viewBox="0 0 24 24">290 <circle cx="12" cy="8" r="4"></circle>291 <path d="M4 21c2-5 14-5 16 0" stroke-linecap="round"></path>292 </svg>293 <div class="nav-text">Profile</div>294 </div>295 </div>296 297</div>298</body>299</html>