GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Daily UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #141518; border-radius: 38px;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;14 color: #F5F5F5;15 }16 .status-bar {17 height: 110px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #fff;23 font-weight: 600;24 font-size: 40px;25 letter-spacing: 0.5px;26 }27 .status-left, .status-right { display: flex; align-items: center; gap: 20px; }28 .dot {29 width: 22px; height: 22px; background: #D8D8D8; border-radius: 50%;30 opacity: 0.85;31 }32 .status-right svg { fill: none; stroke: #ffffff; stroke-width: 2.5; }33 .screen-content { padding: 20px 44px 0 44px; }34 .page-title {35 font-size: 86px; font-weight: 800; margin: 18px 0 24px 0;36 letter-spacing: 1px;37 }38 .promo-row {39 display: flex; gap: 28px; margin-bottom: 26px;40 }41 .card {42 background: #222428; border-radius: 32px; padding: 34px;43 box-shadow: 0 8px 24px rgba(0,0,0,0.25);44 color: #EDEDED;45 }46 .card.small { width: calc(50% - 14px); min-height: 310px; position: relative; }47 .card.small .cta {48 position: absolute; left: 34px; right: 34px; bottom: 34px;49 background: #E15651; color: #fff; font-weight: 800; font-size: 40px;50 padding: 32px 24px; border-radius: 22px; text-align: center;51 }52 .promo-text {53 font-size: 34px; line-height: 44px; color: #D0D0D0; margin-top: 8px;54 max-width: 90%;55 }56 .section-card {57 margin: 26px 0; position: relative;58 }59 .section-header {60 display: flex; align-items: center; gap: 16px; font-size: 44px; font-weight: 800;61 }62 .section-header .label-sub { color: #A8A8A8; font-weight: 700; }63 .value-row {64 display: flex; align-items: baseline; gap: 14px; margin: 16px 0 28px 0;65 }66 .value-main { font-size: 112px; font-weight: 900; }67 .value-unit { font-size: 48px; color: #BFBFBF; font-weight: 700; }68 .value-extra { font-size: 42px; color: #8F8F8F; }69 .primary-btn {70 background: #E15651; color: #fff; font-weight: 800; font-size: 46px;71 padding: 34px 24px; border-radius: 24px; text-align: center;72 width: 80%; margin: 0 auto;73 }74 .badge-icon {75 position: absolute; right: 42px; top: 42px;76 width: 120px; height: 120px; border-radius: 60px;77 background: #2D2F35; display: flex; align-items: center; justify-content: center;78 box-shadow: inset 0 0 0 6px #3A3C42;79 }80 .metric-card { border-radius: 32px; background: #222428; padding: 34px; }81 .metric-top {82 display: flex; justify-content: space-between; align-items: center;83 }84 .metric-title { display: flex; align-items: center; gap: 16px; font-size: 44px; font-weight: 800; }85 .avg-info { text-align: right; color: #B7B7B7; font-size: 36px; }86 .metric-value { font-size: 110px; font-weight: 900; margin: 18px 0; }87 .metric-value .unit { font-size: 56px; font-weight: 700; margin-left: 10px; }88 /* Graph */89 .graph {90 margin-top: 24px; padding-top: 22px; position: relative;91 }92 .graph .dashed {93 border-top: 3px dashed #5A5C60;94 opacity: 0.6; position: relative; top: 6px;95 }96 .week {97 display: flex; justify-content: space-between; align-items: flex-end;98 padding: 28px 18px 12px 18px;99 }100 .day {101 display: flex; flex-direction: column; align-items: center; gap: 12px;102 }103 .dot-red, .dot-orange {104 width: 28px; height: 28px; border-radius: 50%;105 background: #B94B48;106 }107 .dot-orange { background: #B57A35; }108 .day-label { color: #8F8F8F; font-size: 34px; font-weight: 700; }109 .bar-red, .bar-orange {110 position: absolute; width: 36px; border-radius: 18px;111 left: 50%; transform: translateX(-50%);112 bottom: 78px;113 background: #E15651;114 height: 180px;115 }116 .bar-orange { background: #F39C3D; }117 /* Bottom navigation */118 .bottom-nav {119 position: absolute; left: 0; right: 0; bottom: 0;120 height: 220px; background: #1A1B1F;121 border-top-left-radius: 28px; border-top-right-radius: 28px;122 box-shadow: 0 -8px 24px rgba(0,0,0,0.35);123 display: flex; align-items: center; justify-content: space-around;124 }125 .nav-item {126 display: flex; flex-direction: column; align-items: center; gap: 18px;127 color: #9A9AA0; font-size: 34px; font-weight: 700;128 }129 .nav-item svg { width: 56px; height: 56px; stroke: #9A9AA0; fill: none; stroke-width: 3; }130 .nav-item.active { color: #ffffff; }131 .nav-item.active svg { stroke: #ffffff; }132 .ellipsis {133 position: absolute; right: 30px; top: 210px;134 width: 18px; height: 80px; display: flex; flex-direction: column; gap: 14px; align-items: center;135 }136 .ellipsis span { width: 12px; height: 12px; background: #C9C9C9; border-radius: 50%; opacity: 0.8; }137 /* Helper colors */138 .accent-red { color: #E15651; }139 .accent-orange { color: #F39C3D; }140 .accent-purple { color: #9C6BFF; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>9:47</div>150 <div class="dot" style="width:36px;height:36px;border-radius:18px;background:#EDEDED;"></div>151 <div class="dot"></div>152 <div class="dot"></div>153 <div style="color:#D0D0D0;font-size:32px;font-weight:700;">oyo</div>154 <div class="dot" style="width:10px;height:10px;"></div>155 </div>156 <div class="status-right">157 <!-- WiFi -->158 <svg viewBox="0 0 24 24" width="54" height="54">159 <path d="M2 8c5-5 15-5 20 0"></path>160 <path d="M5 11c4-4 10-4 14 0"></path>161 <path d="M8 14c3-3 7-3 10 0"></path>162 <circle cx="12" cy="18" r="2" fill="#fff" stroke="none"></circle>163 </svg>164 <!-- Battery -->165 <svg viewBox="0 0 28 24" width="54" height="54">166 <rect x="2" y="6" width="20" height="12" rx="2"></rect>167 <rect x="23" y="9" width="3" height="6" rx="1"></rect>168 <rect x="4" y="8" width="12" height="8" rx="1" fill="#fff" stroke="none"></rect>169 </svg>170 </div>171 </div>172 173 <div class="screen-content">174 <div class="page-title">DAILY</div>175 176 <div class="promo-row">177 <!-- Promo Card: Steps Goal -->178 <div class="card small">179 <div style="font-size:42px;font-weight:800;display:flex;align-items:center;gap:12px;">180 <span>🏃</span>181 <span>TRACK DAILY STEPS AND<br>KEEP YOU MOTIVATED!</span>182 </div>183 <div class="promo-text"></div>184 <div class="cta">SET A GOAL</div>185 </div>186 187 <!-- Promo Card: Water / Unlock -->188 <div class="card small">189 <div style="font-size:42px;font-weight:800;display:flex;align-items:center;gap:12px;">190 <span>💧</span>191 <span>KEEP YOU HEALTHY AND<br>HELP YOU LOSE WEIGHT.</span>192 </div>193 <div class="promo-text"></div>194 <div class="cta" style="display:flex;justify-content:center;align-items:center;gap:18px;">195 <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#fff;fill:none;stroke-width:2.5;">196 <rect x="5" y="10" width="14" height="10" rx="2"></rect>197 <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>198 </svg>199 <span>UNLOCK</span>200 </div>201 </div>202 </div>203 204 <!-- Weight Card -->205 <div class="card section-card">206 <div class="section-header accent-purple">207 <!-- Scale icon -->208 <svg viewBox="0 0 24 24" width="46" height="46" style="stroke:#9C6BFF;fill:none;stroke-width:2.5;">209 <circle cx="12" cy="12" r="9"></circle>210 <path d="M12 12l3-4"></path>211 <rect x="8" y="14" width="8" height="4" rx="1" style="fill:#9C6BFF;stroke:none;"></rect>212 </svg>213 <span style="color:#FFFFFF">Weight</span>214 </div>215 216 <div class="badge-icon">217 <!-- Decorative scale -->218 <svg viewBox="0 0 24 24" width="80" height="80" style="stroke:#9C6BFF;fill:none;stroke-width:2.5;">219 <rect x="5" y="6" width="14" height="12" rx="6"></rect>220 <path d="M12 10l2-2"></path>221 <rect x="9" y="12" width="6" height="4" rx="2" style="fill:#9C6BFF;stroke:none;"></rect>222 </svg>223 </div>224 225 <div class="value-row">226 <div class="value-main">176.4</div>227 <div class="value-unit">lbs</div>228 <div class="value-extra">| 11.0 lbs left</div>229 </div>230 231 <div class="primary-btn">UPDATE WEIGHT</div>232 </div>233 234 <!-- Workout Card -->235 <div class="metric-card">236 <div class="metric-top">237 <div class="metric-title accent-red">238 <svg viewBox="0 0 24 24" width="46" height="46" style="stroke:#E15651;fill:none;stroke-width:2.5;">239 <circle cx="12" cy="12" r="8"></circle>240 <path d="M12 4v3M12 12l4 2"></path>241 </svg>242 <span style="color:#FFFFFF">Workout</span>243 </div>244 <div class="avg-info">245 <div>Weekly Average</div>246 <div style="color:#fff;font-weight:800;">3 min</div>247 </div>248 </div>249 250 <div class="metric-value">3<span class="unit">min</span></div>251 252 <div class="graph">253 <div class="dashed"></div>254 <div class="week">255 <div class="day"><div class="dot-red"></div><div class="day-label">S</div></div>256 <div class="day"><div class="dot-red"></div><div class="day-label">M</div></div>257 <div class="day"><div class="dot-red"></div><div class="day-label">T</div></div>258 <div class="day"><div class="dot-red"></div><div class="day-label">W</div></div>259 <div class="day"><div class="dot-red"></div><div class="day-label">T</div></div>260 <div class="day"><div class="dot-red"></div><div class="day-label">F</div></div>261 <div class="day"><div class="dot-red"></div><div class="day-label">S</div></div>262 </div>263 <div class="bar-red"></div>264 </div>265 </div>266 267 <!-- Calorie Card -->268 <div class="metric-card" style="margin-top:26px;">269 <div class="metric-top">270 <div class="metric-title accent-orange">271 <svg viewBox="0 0 24 24" width="46" height="46" style="stroke:#F39C3D;fill:none;stroke-width:2.5;">272 <path d="M12 3c-2 3-1 5 1 7-5 0-8 3-8 6 0 3 3 5 7 5s7-2 7-5c0-4-3-6-5-8 0-2 1-3 2-5" />273 </svg>274 <span style="color:#FFFFFF">Calorie</span>275 </div>276 <div class="avg-info">277 <div>Weekly Average</div>278 <div style="color:#fff;font-weight:800;">31 Calories</div>279 </div>280 </div>281 282 <div class="metric-value">31<span class="unit">Calories</span></div>283 284 <div class="graph">285 <div class="dashed"></div>286 <div class="week">287 <div class="day"><div class="dot-orange"></div><div class="day-label">S</div></div>288 <div class="day"><div class="dot-orange"></div><div class="day-label">M</div></div>289 <div class="day"><div class="dot-orange"></div><div class="day-label">T</div></div>290 <div class="day"><div class="dot-orange"></div><div class="day-label">W</div></div>291 <div class="day"><div class="dot-orange"></div><div class="day-label">T</div></div>292 <div class="day"><div class="dot-orange"></div><div class="day-label">F</div></div>293 <div class="day"><div class="dot-orange"></div><div class="day-label">S</div></div>294 </div>295 <div class="bar-orange"></div>296 </div>297 </div>298 </div>299 300 <!-- 3-dot menu near top-right -->301 <div class="ellipsis"><span></span><span></span><span></span></div>302 303 <!-- Bottom Navigation -->304 <div class="bottom-nav">305 <div class="nav-item">306 <svg viewBox="0 0 24 24">307 <rect x="4" y="5" width="16" height="5" rx="1"></rect>308 <rect x="4" y="12" width="16" height="5" rx="1"></rect>309 </svg>310 <div>PLAN</div>311 </div>312 <div class="nav-item">313 <svg viewBox="0 0 24 24">314 <path d="M5 19c9-1 11-9 5-12C8 8 6 11 7 14c5 1 7-5 7-9" />315 </svg>316 <div>WORKOUTS</div>317 </div>318 <div class="nav-item active">319 <svg viewBox="0 0 24 24">320 <rect x="3" y="6" width="18" height="14" rx="2"></rect>321 <path d="M7 3v4M17 3v4M3 10h18"></path>322 </svg>323 <div>DAILY</div>324 </div>325 <div class="nav-item">326 <svg viewBox="0 0 24 24">327 <circle cx="12" cy="8" r="4"></circle>328 <path d="M4 21c2-4 6-6 8-6s6 2 8 6" />329 </svg>330 <div>ME</div>331 </div>332 </div>333</div>334</body>335</html>