GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Inter", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#d8d8d8;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:90px;15 color:#d0d0d0; font-size:36px; letter-spacing:1px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 36px;18 }19 .status-left, .status-right { display:flex; align-items:center; gap:28px; }20 .dot { width:10px; height:10px; background:#d0d0d0; border-radius:50%; opacity:.6; }21 22 /* Main ring area */23 .ring-wrapper {24 position:absolute; top:260px; left:50%; transform:translateX(-50%);25 width:580px; height:580px;26 }27 .ring-outer, .ring-mid, .ring-inner {28 position:absolute; border-radius:50%;29 }30 .ring-outer {31 top:0; left:0; width:580px; height:580px;32 border:6px solid rgba(80,160,120,0.15);33 }34 .ring-mid {35 top:40px; left:40px; width:500px; height:500px;36 border:6px solid rgba(80,160,120,0.18);37 }38 .ring-inner {39 top:90px; left:90px; width:400px; height:400px;40 border:6px solid rgba(80,160,120,0.22);41 display:flex; align-items:center; justify-content:center; color:#1ed1a1;42 font-size:120px; font-weight:600;43 }44 .ring-count-sub { position:absolute; bottom:90px; left:50%; transform:translateX(-50%); color:#2b866b; font-size:64px; opacity:.35; }45 46 /* Heart Pts / Steps */47 .metrics-row-1 {48 position:absolute; top:890px; left:140px; right:140px;49 display:flex; justify-content:space-between; align-items:center; color:#8fe3c1;50 font-size:52px; opacity:.85;51 }52 .metrics-row-1 span { display:flex; align-items:center; gap:16px; }53 .tiny-icon {54 width:46px; height:46px; border-radius:50%; background:#1d3b31; display:inline-flex; align-items:center; justify-content:center;55 }56 .tiny-icon svg { width:26px; height:26px; fill:#69c9a1; }57 58 /* Stats row */59 .stats {60 position:absolute; top:980px; left:120px; right:120px;61 display:flex; justify-content:space-between; text-align:center;62 color:#cfcfcf;63 }64 .stat { width:30%; }65 .stat .big { font-size:80px; font-weight:700; color:#e6e6e6; }66 .stat .label { margin-top:12px; font-size:42px; color:#a5a5a5; }67 68 /* Sections text */69 .section-title {70 position:absolute; left:120px; font-size:64px; color:#eaeaea; letter-spacing:0.5px;71 }72 .section-sub {73 position:absolute; left:120px; font-size:40px; color:#7a7a7a;74 }75 76 /* Floating menu items on the right */77 .menu-item {78 position:absolute; right:140px; display:flex; align-items:center; gap:40px;79 font-size:60px; color:#e7e7e7;80 }81 .menu-bubble {82 width:120px; height:120px; border-radius:50%;83 background:#3d5fbd; box-shadow:0 10px 24px rgba(0,0,0,.6);84 display:flex; align-items:center; justify-content:center;85 }86 .menu-bubble svg { width:64px; height:64px; fill:#cfe0ff; }87 88 /* Weekly target */89 .weekly {90 position:absolute; left:120px; right:120px; top:1450px;91 }92 .weekly-title { font-size:64px; color:#eaeaea; margin-bottom:18px; }93 .weekly-date { font-size:40px; color:#7a7a7a; }94 .weekly-progress { margin-top:40px; display:flex; align-items:center; gap:20px; color:#aaf0d1; font-size:60px; }95 .bar {96 flex:1; height:26px; background:#1c2b25; border-radius:16px; overflow:hidden;97 }98 .bar > div { width:10%; height:100%; background:#2ed79f; opacity:.55; }99 .weekly-desc {100 margin-top:36px; color:#8c8c8c; font-size:44px; line-height:1.35;101 max-width:820px;102 }103 104 /* Close FAB */105 .fab-close {106 position:absolute; right:120px; bottom:340px; width:170px; height:170px; border-radius:50%;107 background:#3a3a3a; display:flex; align-items:center; justify-content:center;108 box-shadow:0 20px 30px rgba(0,0,0,.6);109 }110 .fab-close svg { width:80px; height:80px; stroke:#eeeeee; stroke-width:14; fill:none; }111 112 /* Bottom navigation */113 .bottom-nav {114 position:absolute; left:0; right:0; bottom:0; height:170px;115 background:#181818; border-top:1px solid #222;116 display:flex; justify-content:space-around; align-items:center;117 color:#bdbdbd;118 }119 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; font-size:40px; }120 .nav-icon {121 width:70px; height:70px; border-radius:18px; background:#242424;122 display:flex; align-items:center; justify-content:center;123 }124 .nav-icon svg { width:40px; height:40px; fill:#bdbdbd; }125 .nav-item.active .nav-icon { background:#2a3b34; }126 .nav-item.active span { color:#a8e8c6; }127 128 /* Gesture pill */129 .gesture-pill {130 position:absolute; left:50%; transform:translateX(-50%);131 bottom:210px; width:360px; height:12px; background:#e6e6e6; border-radius:10px; opacity:.8;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status Bar -->139 <div class="status-bar">140 <div class="status-left">141 <div>8:41</div>142 <div class="dot"></div>143 <div class="dot"></div>144 <div class="dot"></div>145 <div class="dot"></div>146 </div>147 <div class="status-right">148 <!-- simple inline icons -->149 <svg width="34" height="34" viewBox="0 0 24 24" fill="#d0d0d0"><circle cx="12" cy="12" r="10" fill="none" stroke="#d0d0d0" stroke-width="2"/><path d="M8 13l2 2 5-5" stroke="#d0d0d0" stroke-width="2" fill="none"/></svg>150 <svg width="34" height="34" viewBox="0 0 24 24" fill="#d0d0d0"><path d="M3 12c4-4 14-4 18 0" stroke="#d0d0d0" stroke-width="2" fill="none"/><path d="M6 12c3-3 9-3 12 0" stroke="#d0d0d0" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="1.5" fill="#d0d0d0"/></svg>151 <svg width="34" height="34" viewBox="0 0 24 24" fill="#d0d0d0"><path d="M3 6h18v12H3z" fill="none" stroke="#d0d0d0" stroke-width="2"/><rect x="6" y="9" width="12" height="6" fill="#d0d0d0"/></svg>152 <div>67%</div>153 </div>154 </div>155 156 <!-- Activity Ring -->157 <div class="ring-wrapper">158 <div class="ring-outer"></div>159 <div class="ring-mid"></div>160 <div class="ring-inner">0</div>161 <div class="ring-count-sub">9</div>162 </div>163 164 <!-- Heart pts / Steps -->165 <div class="metrics-row-1">166 <span>167 <div class="tiny-icon">168 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg>169 </div>170 Heart Pts171 </span>172 <span>173 <div class="tiny-icon">174 <svg viewBox="0 0 24 24"><path d="M3 11h18M7 15h10" stroke="#69c9a1" stroke-width="2" fill="none"/></svg>175 </div>176 Steps177 </span>178 </div>179 180 <!-- Stats Row -->181 <div class="stats">182 <div class="stat">183 <div class="big">1,225</div>184 <div class="label">Cal</div>185 </div>186 <div class="stat">187 <div class="big">0</div>188 <div class="label">mi</div>189 </div>190 <div class="stat">191 <div class="big">1</div>192 <div class="label">Move Min</div>193 </div>194 </div>195 196 <!-- Daily goals section -->197 <div class="section-title" style="top:1160px;">Your daily goals</div>198 <div class="section-sub" style="top:1220px;">Last 7 days</div>199 <div class="section-title" style="top:1320px; font-size:70px; color:#a9a9a9;">0/7</div>200 <div class="section-sub" style="top:1380px;">Achieved</div>201 202 <!-- Floating action list -->203 <div class="menu-item" style="top:1180px;">204 <div>Add blood pressure</div>205 <div class="menu-bubble">206 <!-- blood pressure icon -->207 <svg viewBox="0 0 24 24">208 <rect x="4" y="6" width="16" height="10" rx="2" ry="2"></rect>209 <path d="M7 9h10M7 12h6" stroke="#cfe0ff" stroke-width="2" fill="none"/>210 </svg>211 </div>212 </div>213 214 <div class="menu-item" style="top:1320px;">215 <div>Add weight</div>216 <div class="menu-bubble">217 <!-- weight scale icon -->218 <svg viewBox="0 0 24 24">219 <rect x="5" y="5" width="14" height="14" rx="3" ry="3"></rect>220 <path d="M12 9v6" stroke="#cfe0ff" stroke-width="2" fill="none"/>221 <circle cx="12" cy="9" r="2" fill="#cfe0ff"/>222 </svg>223 </div>224 </div>225 226 <div class="menu-item" style="top:1520px;">227 <div>Add activity</div>228 <div class="menu-bubble">229 <!-- pencil icon -->230 <svg viewBox="0 0 24 24">231 <path d="M3 17l4 4 14-14-4-4L3 17z"></path>232 <path d="M13 5l4 4" stroke="#cfe0ff" stroke-width="2" fill="none"/>233 </svg>234 </div>235 </div>236 237 <div class="menu-item" style="top:1660px;">238 <div>Track workout</div>239 <div class="menu-bubble">240 <!-- runner icon -->241 <svg viewBox="0 0 24 24">242 <circle cx="16" cy="5" r="3"></circle>243 <path d="M6 18l3-5 3 2 1 5M14 9l-3 2-4-1" stroke="#cfe0ff" stroke-width="2" fill="none"/>244 </svg>245 </div>246 </div>247 248 <!-- Weekly target -->249 <div class="weekly">250 <div class="weekly-title">Your weekly target</div>251 <div class="weekly-date">Nov 12 – 18</div>252 <div class="weekly-progress">253 <div>0 of 150</div>254 <div class="bar"><div></div></div>255 </div>256 <div class="weekly-desc">257 Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood258 </div>259 </div>260 261 <!-- Close floating button -->262 <div class="fab-close">263 <svg viewBox="0 0 100 100">264 <path d="M30 30 L70 70"></path>265 <path d="M70 30 L30 70"></path>266 </svg>267 </div>268 269 <!-- Bottom Navigation -->270 <div class="bottom-nav">271 <div class="nav-item active">272 <div class="nav-icon">273 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H3z"/></svg>274 </div>275 <span>Home</span>276 </div>277 <div class="nav-item">278 <div class="nav-icon">279 <svg viewBox="0 0 24 24"><path d="M4 4h16v5H4zM4 11h16v9H4z"/></svg>280 </div>281 <span>Journal</span>282 </div>283 <div class="nav-item">284 <div class="nav-icon">285 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>286 </div>287 <span>Browse</span>288 </div>289 <div class="nav-item">290 <div class="nav-icon">291 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>292 </div>293 <span>Profile</span>294 </div>295 </div>296 297 <!-- gesture pill -->298 <div class="gesture-pill"></div>299 300</div>301</body>302</html>