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 Dashboard UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1f2022; color: #f4f4f5; border-radius: 40px;12 }13 14 /* Status bar */15 .statusbar {16 height: 110px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;17 color: #ffffff; font-weight: 600; font-size: 46px; letter-spacing: 1px;18 }19 .status-left { display: flex; align-items: center; gap: 26px; }20 .status-mid { display: flex; align-items: center; gap: 18px; font-size: 34px; opacity: 0.9; }21 .dot { width: 32px; height: 32px; border-radius: 50%; background: #ffffff; opacity: 0.85; }22 .status-right { display: flex; align-items: center; gap: 28px; }23 .status-icon svg { width: 54px; height: 54px; fill: none; stroke: #ffffff; stroke-width: 6; }24 25 /* Header */26 .header {27 padding: 10px 40px 0 40px;28 display: flex; align-items: center; justify-content: space-between;29 }30 .title { font-size: 92px; font-weight: 800; letter-spacing: 2px; }31 .kebab { width: 18px; height: 90px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-right: 8px; }32 .kebab span { width: 18px; height: 18px; background: #bfbfc2; border-radius: 50%; opacity: 0.8; }33 34 /* Cards */35 .content { padding: 30px 40px 0 40px; }36 .row { display: flex; gap: 36px; }37 .card { background: #2a2b2f; border-radius: 28px; padding: 30px; flex: 1; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }38 .card.dark { background: #2a2b2f; }39 .muted { color: #b8b9bd; }40 .gauge {41 width: 300px; height: 300px; border-radius: 50%;42 border: 14px solid #3a3b40; margin: 12px auto 18px auto; position: relative;43 display: flex; align-items: center; justify-content: center; color: #b8b9bd; font-size: 82px; font-weight: 800;44 }45 .gauge .icon-top { position: absolute; top: -6px; font-size: 52px; }46 .card p.tagline { text-align: left; font-size: 36px; line-height: 1.25; color: #d7d7da; margin: 16px 0 26px 0; }47 .btn {48 background: #e05454; color: #fff; border: none; border-radius: 20px;49 padding: 28px 32px; font-size: 36px; font-weight: 800; width: 85%; margin: 6px auto 0 auto; display: block; text-align: center;50 }51 .btn svg { vertical-align: middle; margin-right: 16px; stroke: #fff; }52 53 /* Weight card */54 .card.weight { border-radius: 32px; padding: 36px; margin-top: 28px; }55 .card.weight .header-row { display: flex; align-items: center; justify-content: space-between; }56 .card.weight .label { display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 800; }57 .chip-circle {58 width: 96px; height: 96px; border-radius: 50%; background: #383a40; display: flex; align-items: center; justify-content: center;59 box-shadow: inset 0 0 0 8px #2f3136;60 }61 .chip-circle svg { width: 52px; height: 52px; fill: none; stroke: #9d92ff; stroke-width: 8; }62 .weight-value { font-size: 110px; font-weight: 900; margin-top: 18px; }63 .weight-sub { font-size: 40px; color: #b8b9bd; }64 .btn.large { width: 70%; font-size: 40px; margin-top: 36px; }65 66 /* Workout card */67 .card.workout { margin-top: 28px; border-radius: 32px; padding: 36px; }68 .card.workout .top { display: flex; align-items: center; justify-content: space-between; }69 .card.workout .title-line { display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 800; }70 .small-muted { color: #9fa1a6; font-size: 40px; }71 .workout-main { margin-top: 26px; display: flex; align-items: flex-end; justify-content: space-between; }72 .big-num { font-size: 110px; font-weight: 900; line-height: 1; }73 .big-num-sub { font-size: 48px; font-weight: 700; margin-left: 8px; }74 .dash-line { margin: 34px 0 22px 0; border-top: 3px dashed #4a4b50; }75 .days { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }76 .day { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #b8b9bd; font-size: 34px; }77 .day .dot { width: 30px; height: 30px; background: #a74848; border-radius: 50%; opacity: 0.9; }78 .bar { width: 34px; height: 140px; border-radius: 18px; background: #db4e4e; }79 80 /* Calorie card */81 .card.calorie { margin-top: 28px; border-radius: 32px; padding: 36px; }82 .card.calorie .title-line { display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 800; }83 .cal-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; }84 .cal-left { display: flex; align-items: baseline; gap: 16px; }85 .cal-left .num { font-size: 110px; font-weight: 900; }86 .cal-left .unit { font-size: 52px; font-weight: 800; }87 .dash-line.light { border-top-color: #4a4b50; }88 .cal-chart { display: flex; align-items: flex-end; gap: 22px; height: 160px; margin-top: 18px; }89 .bar.yellow { width: 36px; height: 120px; border-radius: 18px; background: #ff9d2b; }90 91 /* Bottom navigation */92 .tabbar {93 position: absolute; bottom: 100px; left: 0; width: 100%;94 height: 150px; background: #1c1d20; display: flex; justify-content: space-around; align-items: center;95 border-top-left-radius: 28px; border-top-right-radius: 28px; box-shadow: 0 -10px 20px rgba(0,0,0,0.35);96 }97 .tab { width: 220px; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #9fa1a6; font-size: 32px; }98 .tab svg { width: 54px; height: 54px; stroke-width: 6; }99 .tab.active { color: #ffffff; }100 .home-indicator {101 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);102 width: 460px; height: 14px; background: #ffffff; border-radius: 10px; opacity: 0.85;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="statusbar">111 <div class="status-left">112 <span>9:47</span>113 <span class="muted" style="font-size:34px;">ib</span>114 <div class="dot" style="background:#ffffff;"></div>115 <div class="dot" style="background:#ffffff;"></div>116 <span class="muted" style="font-size:34px;">oyo</span>117 <span style="font-size:60px; color:#bfbfc2;">•</span>118 </div>119 <div class="status-right">120 <div class="status-icon">121 <!-- Wi-Fi icon -->122 <svg viewBox="0 0 24 24">123 <path d="M2 8c5-4 15-4 20 0" />124 <path d="M5 12c4-3 10-3 14 0" />125 <path d="M9 16c3-2 5-2 8 0" />126 <circle cx="12" cy="19" r="2" fill="#ffffff" stroke="none"></circle>127 </svg>128 </div>129 <div class="status-icon">130 <!-- Battery icon -->131 <svg viewBox="0 0 28 18">132 <rect x="1" y="3" width="22" height="12" rx="2" />133 <rect x="24" y="6" width="3" height="6" rx="1" />134 <rect x="3" y="5" width="16" height="8" rx="1" fill="#ffffff" stroke="none"></rect>135 </svg>136 </div>137 </div>138 </div>139 140 <!-- Header -->141 <div class="header">142 <div class="title">DAILY</div>143 <div class="kebab">144 <span></span><span></span><span></span>145 </div>146 </div>147 148 <div class="content">149 <!-- Top cards row -->150 <div class="row">151 <!-- Steps card -->152 <div class="card dark">153 <div class="gauge">154 <div class="icon-top">🏃</div>155 <div>0</div>156 </div>157 <p class="tagline">🏃 TRACK DAILY STEPS AND KEEP YOU MOTIVATED!</p>158 <button class="btn">SET A GOAL</button>159 </div>160 161 <!-- Water/health card -->162 <div class="card dark">163 <div class="gauge">164 <div class="icon-top">💧</div>165 <div>0</div>166 </div>167 <p class="tagline">💧 KEEP YOU HEALTHY AND HELP YOU LOSE WEIGHT.</p>168 <button class="btn">169 <!-- Lock icon -->170 <svg viewBox="0 0 24 24">171 <rect x="5" y="10" width="14" height="10" rx="2" />172 <path d="M8 10V7a4 4 0 0 1 8 0v3" />173 </svg>174 UNLOCK175 </button>176 </div>177 </div>178 179 <!-- Weight card -->180 <div class="card weight">181 <div class="header-row">182 <div class="label">183 <!-- Weight icon (small swirl) -->184 <svg viewBox="0 0 24 24" style="width:42px;height:42px; stroke:#9d92ff; fill:none;">185 <circle cx="12" cy="12" r="9" />186 <path d="M8 12h8" />187 <path d="M12 8v8" />188 </svg>189 <span>Weight</span>190 </div>191 <div class="chip-circle">192 <svg viewBox="0 0 24 24">193 <path d="M7 8h10l-2 10H9L7 8z" />194 <circle cx="12" cy="12" r="1.5" />195 </svg>196 </div>197 </div>198 <div class="weight-value">176.4 <span class="weight-sub">lbs | 11.0 lbs left</span></div>199 <button class="btn large">UPDATE WEIGHT</button>200 </div>201 202 <!-- Workout card -->203 <div class="card workout">204 <div class="top">205 <div class="title-line">206 <!-- Timer icon -->207 <svg viewBox="0 0 24 24" style="stroke:#ff6a6a; fill:none;">208 <circle cx="12" cy="13" r="8" />209 <path d="M9 2h6" />210 <path d="M12 13l4-2" />211 </svg>212 <span>Workout</span>213 </div>214 <div class="small-muted">Weekly Average</div>215 </div>216 217 <div class="workout-main">218 <div class="big-num">3 <span class="big-num-sub">min</span></div>219 <div class="big-num" style="font-size:64px; font-weight:700; color:#d7d7da;">3 min</div>220 </div>221 222 <div class="dash-line"></div>223 224 <div class="days">225 <div class="day"><div class="dot"></div><span>S</span></div>226 <div class="day"><div class="dot"></div><span>M</span></div>227 <div class="day"><div class="dot"></div><span>T</span></div>228 <div class="day">229 <div class="bar"></div>230 <span style="color:#ffffff; font-weight:800;">W</span>231 </div>232 <div class="day"><div class="dot"></div><span>T</span></div>233 <div class="day"><div class="dot"></div><span>F</span></div>234 <div class="day"><div class="dot"></div><span>S</span></div>235 </div>236 </div>237 238 <!-- Calorie card -->239 <div class="card calorie">240 <div class="top">241 <div class="title-line">242 <!-- Flame icon -->243 <svg viewBox="0 0 24 24" style="stroke:#ffa23a; fill:none;">244 <path d="M12 2c2 3 2 5 0 7-2 2-2 5 0 7 3-1 5-4 5-7 0-3-2-6-5-7z" />245 <path d="M9 14c0 3 3 4 3 4s3-1 3-4" />246 </svg>247 <span>Calorie</span>248 </div>249 <div class="small-muted">Weekly Average</div>250 </div>251 252 <div class="cal-row">253 <div class="cal-left">254 <div class="num">31</div>255 <div class="unit">Calories</div>256 </div>257 <div style="font-size:52px; font-weight:800; color:#d7d7da;">31 Calories</div>258 </div>259 260 <div class="dash-line light"></div>261 262 <div class="cal-chart">263 <div class="bar yellow"></div>264 </div>265 </div>266 </div>267 268 <!-- Bottom navigation bar -->269 <div class="tabbar">270 <div class="tab">271 <!-- Plan icon -->272 <svg viewBox="0 0 24 24" stroke="#9fa1a6" fill="none">273 <rect x="3" y="3" width="7" height="7" rx="2"></rect>274 <rect x="14" y="3" width="7" height="7" rx="2"></rect>275 <rect x="3" y="14" width="7" height="7" rx="2"></rect>276 <rect x="14" y="14" width="7" height="7" rx="2"></rect>277 </svg>278 <span>PLAN</span>279 </div>280 <div class="tab">281 <!-- Workouts icon (leaf) -->282 <svg viewBox="0 0 24 24" stroke="#9fa1a6" fill="none">283 <path d="M5 19c6-1 9-5 10-12 3 3 4 7 2 11-3 2-7 3-12 1z"></path>284 </svg>285 <span>WORKOUTS</span>286 </div>287 <div class="tab active">288 <!-- Calendar icon -->289 <svg viewBox="0 0 24 24" stroke="#ffffff" fill="none">290 <rect x="3" y="5" width="18" height="16" rx="2"></rect>291 <path d="M7 2v6M17 2v6"></path>292 <path d="M3 10h18"></path>293 </svg>294 <span>DAILY</span>295 </div>296 <div class="tab">297 <!-- User icon -->298 <svg viewBox="0 0 24 24" stroke="#9fa1a6" fill="none">299 <circle cx="12" cy="8" r="4"></circle>300 <path d="M4 22c2-5 14-5 16 0"></path>301 </svg>302 <span>ME</span>303 </div>304 </div>305 306 <div class="home-indicator"></div>307</div>308</body>309</html>