GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>UI Render</title>5<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 background: #1a1a1a;30 }31 .status-left { font-size: 48px; font-weight: 500; letter-spacing: 0.5px; }32 .status-right { display: flex; align-items: center; gap: 28px; }33 .icon {34 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;35 }36 /* Content area */37 .content {38 position: absolute;39 top: 110px;40 left: 0;41 width: 100%;42 height: calc(100% - 110px);43 overflow-y: hidden;44 }45 .scroll {46 padding: 24px 30px 180px;47 box-sizing: border-box;48 }49 .card {50 background: #1f1f1f;51 border-radius: 30px;52 padding: 40px;53 box-sizing: border-box;54 margin-bottom: 28px;55 position: relative;56 }57 .card .title {58 font-size: 54px;59 font-weight: 700;60 margin-bottom: 10px;61 }62 .subtitle {63 font-size: 32px;64 color: #9aa0a6;65 margin-bottom: 22px;66 }67 .notif-card .title { font-size: 58px; }68 .notif-card .desc { font-size: 36px; color: #b0b0b0; line-height: 1.4; margin-top: 8px; }69 .action-link { color: #2bbd7e; font-size: 40px; font-weight: 600; margin-top: 28px; display: inline-block; }70 .close-x {71 position: absolute; right: 30px; top: 30px; width: 56px; height: 56px; border-radius: 50%;72 display: flex; align-items: center; justify-content: center; color: #b0b0b0; background: rgba(255,255,255,0.04);73 }74 /* Trend header */75 .section-label {76 font-size: 42px; font-weight: 700; margin: 20px 0 18px 8px; color: #cfcfcf;77 }78 /* Graph placeholder */79 .graph {80 width: 100%; height: 10px; border-top: 2px dashed #48627e; opacity: 0.7; margin: 26px 0 38px;81 }82 .metric-row {83 display: flex; align-items: baseline; gap: 18px;84 }85 .metric-value {86 font-size: 64px; font-weight: 800; color: #30d195;87 }88 .metric-blue { color: #6aa8ff; }89 .metric-label { font-size: 36px; color: #8ba39c; }90 .week {91 display: flex; justify-content: space-between; align-items: center; margin-top: 8px;92 }93 .week span {94 color: #9aa0a6; font-size: 34px; width: 1ch; text-align: center;95 }96 .tiny-bar {97 position: absolute; right: 36px; bottom: 170px; width: 30px; height: 12px; border-radius: 6px; background: #00d084;98 }99 .tiny-square {100 position: absolute; right: 36px; bottom: 166px; width: 34px; height: 34px; border-radius: 6px; background: #6aa8ff;101 }102 .chev {103 position: absolute; right: 30px; top: 40px; width: 40px; height: 40px; opacity: 0.7;104 }105 /* Weight card specifics */106 .weight-meta { font-size: 36px; color: #9aa0a6; display: flex; align-items: center; gap: 16px; }107 .mini-icon {108 width: 46px; height: 46px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;109 border-radius: 10px; color: #757575; font-size: 20px;110 }111 .weight-value { font-size: 64px; font-weight: 800; margin-top: 30px; }112 .weight-sub { font-size: 32px; color: #8c8c8c; margin-top: 6px; }113 .month-row { display: flex; justify-content: space-between; color: #9aa0a6; font-size: 34px; margin-top: 40px; padding: 0 10px; }114 .plus-btn {115 position: absolute; right: 100px; top: 36px; width: 60px; height: 60px; border-radius: 12px;116 display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); color: #d0d0d0; font-size: 48px;117 }118 /* Floating action button */119 .fab {120 position: absolute;121 right: 44px;122 bottom: 270px;123 width: 150px; height: 150px; border-radius: 75px;124 background: #2f2f2f;125 box-shadow: 0 10px 24px rgba(0,0,0,0.6);126 display: flex; align-items: center; justify-content: center;127 }128 .fab::before {129 content: '+'; font-size: 110px; line-height: 0; color: #ffffff;130 }131 /* Bottom nav */132 .bottom-nav {133 position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; background: #1b1b1b;134 border-top-left-radius: 30px; border-top-right-radius: 30px;135 display: flex; align-items: center; justify-content: space-around;136 }137 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #bdbdbd; }138 .nav-item.active { color: #63a5ff; }139 .nav-icon {140 width: 80px; height: 80px; border-radius: 40px; background: #2a2a2a; display: flex; align-items: center; justify-content: center;141 }142 .nav-item.active .nav-icon { border: 4px solid #63a5ff; background: #1f2d46; }143 .nav-label { font-size: 34px; }144 /* Simple SVG chevron and icons */145 svg { display: block; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status Bar -->152 <div class="status-bar">153 <div class="status-left">11:43</div>154 <div class="status-right">155 <div class="icon">156 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">157 <path d="M2 18h20l-10-12z"></path>158 </svg>159 </div>160 <div class="icon">161 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">162 <path d="M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3z"></path>163 <circle cx="12" cy="12" r="3" fill="#ffffff"></circle>164 </svg>165 </div>166 <div class="icon">167 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">168 <path d="M6 22h12a2 2 0 0 0 2-2V8l-6-5H6a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2zM13 3.5L18.5 8H13V3.5z"></path>169 </svg>170 </div>171 </div>172 </div>173 174 <div class="content">175 <div class="scroll">176 177 <!-- Notifications Card -->178 <div class="card notif-card" style="margin-top: 10px;">179 <div class="close-x">×</div>180 <div class="title">Get notifications from Fit</div>181 <div class="desc">Allow Fit to send notifications to get coaching messages and tips to help you meet your goals</div>182 <div class="action-link">Turn on notifications</div>183 </div>184 185 <div class="section-label">TRENDS</div>186 187 <!-- Heart Points Card -->188 <div class="card">189 <div class="title">Heart Points</div>190 <div class="subtitle">Last 7 days</div>191 <svg class="chev" viewBox="0 0 24 24" fill="#9aa0a6">192 <path d="M9 6l6 6-6 6"></path>193 </svg>194 195 <div class="graph"></div>196 197 <div class="metric-row">198 <div class="metric-value">5<span style="font-size:40px; margin-left:10px;">pts</span></div>199 </div>200 <div class="metric-label" style="color:#2bbd7e; margin-top: 6px;">Today</div>201 202 <div class="week" style="margin-top: 40px;">203 <span>W</span><span>T</span><span>F</span><span>S</span><span>S</span><span>M</span><span>T</span>204 </div>205 <div class="tiny-bar"></div>206 </div>207 208 <!-- Steps Card -->209 <div class="card">210 <div class="title">Steps</div>211 <div class="subtitle">Last 7 days</div>212 <svg class="chev" viewBox="0 0 24 24" fill="#9aa0a6">213 <path d="M9 6l6 6-6 6"></path>214 </svg>215 216 <div class="graph" style="border-top-color:#5e7ea6;"></div>217 218 <div class="metric-row">219 <div class="metric-value metric-blue">2,511</div>220 </div>221 <div class="metric-label" style="color:#6aa8ff; margin-top: 6px;">Today</div>222 223 <div class="week" style="margin-top: 40px;">224 <span>W</span><span>T</span><span>F</span><span>S</span><span>S</span><span>M</span><span>T</span>225 </div>226 <div class="tiny-square"></div>227 </div>228 229 <!-- Weight Card -->230 <div class="card">231 <div class="title">Weight</div>232 <div class="plus-btn">+</div>233 <svg class="chev" viewBox="0 0 24 24" fill="#9aa0a6">234 <path d="M9 6l6 6-6 6"></path>235 </svg>236 <div class="weight-meta">Jul 12 – Oct 3 •237 <div class="mini-icon">[IMG]</div>238 <span>Home Workout - No Equipment</span>239 </div>240 241 <div class="weight-value">165 <span style="font-size:40px; font-weight:700;">lb</span></div>242 <div class="weight-sub">4 hr. ago</div>243 244 <div class="month-row">245 <span></span>246 <span>Aug</span>247 <span>Sep</span>248 <span>Oct</span>249 </div>250 </div>251 252 <!-- Energy expended section header -->253 <div class="card" style="padding: 34px 34px;">254 <div style="display:flex; align-items:center; justify-content:space-between;">255 <div class="title" style="font-size:54px; margin:0;">Energy expended</div>256 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa0a6">257 <path d="M9 6l6 6-6 6"></path>258 </svg>259 </div>260 </div>261 262 </div>263 </div>264 265 <!-- Floating Action Button -->266 <div class="fab"></div>267 268 <!-- Bottom Navigation -->269 <div class="bottom-nav">270 <div class="nav-item active">271 <div class="nav-icon">272 <svg width="44" height="44" viewBox="0 0 24 24" fill="#63a5ff">273 <path d="M12 3l9 8h-3v7H6v-7H3z"></path>274 </svg>275 </div>276 <div class="nav-label">Home</div>277 </div>278 <div class="nav-item">279 <div class="nav-icon">280 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd">281 <path d="M7 3h10v2H7zm0 4h10v2H7zm0 4h10v2H7zm0 4h10v2H7z"></path>282 </svg>283 </div>284 <div class="nav-label">Journal</div>285 </div>286 <div class="nav-item">287 <div class="nav-icon">288 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd">289 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"></path>290 </svg>291 </div>292 <div class="nav-label">Browse</div>293 </div>294 <div class="nav-item">295 <div class="nav-icon">296 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd">297 <circle cx="12" cy="7" r="4"></circle>298 <path d="M4 22c0-4 4-7 8-7s8 3 8 7H4z"></path>299 </svg>300 </div>301 <div class="nav-label">Profile</div>302 </div>303 </div>304 305</div>306</body>307</html>