GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Workout Logger UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f5f6f7;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 130px;23 background: #9aa0a3;24 color: white;25 display: flex;26 align-items: center;27 padding: 0 30px;28 box-sizing: border-box;29 font-weight: 600;30 }31 .status-left { display: flex; align-items: center; gap: 22px; }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }33 .dot {34 width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.9);35 }36 .small-dot {37 width: 10px; height: 10px; border-radius: 50%; background: white; opacity: 0.8;38 }39 .icon-wifi, .icon-battery {40 width: 42px; height: 26px; border: 2px solid #fff; border-radius: 4px; position: relative;41 }42 .icon-battery::after {43 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 1px;44 }45 46 /* Main card */47 .card {48 position: absolute;49 left: 30px;50 right: 30px;51 top: 150px;52 bottom: 840px;53 background: #ffffff;54 border-radius: 24px;55 box-shadow: 0 8px 24px rgba(0,0,0,0.08);56 overflow: hidden;57 }58 .video-area {59 position: relative;60 height: 430px;61 background: #E0E0E0;62 border-bottom: 1px solid #d5d5d5;63 display: flex; justify-content: center; align-items: center;64 color: #666;65 font-weight: 600;66 }67 .floating-back {68 position: absolute;69 left: -15px;70 top: 55px;71 width: 110px; height: 110px; border-radius: 55px; background: #ffffff;72 box-shadow: 0 6px 16px rgba(0,0,0,0.15);73 display: flex; justify-content: center; align-items: center;74 }75 .floating-back svg { width: 40px; height: 40px; }76 .reps-label {77 position: absolute;78 top: 25px;79 left: 50px;80 font-size: 36px;81 color: #70757a;82 }83 .rest-on {84 position: absolute;85 right: 36px;86 top: 28px;87 font-size: 44px;88 color: #44a8ff;89 font-weight: 800;90 letter-spacing: 1px;91 }92 .calendar-btn {93 position: absolute;94 right: 36px;95 top: 240px;96 width: 92px;97 height: 92px;98 border-radius: 14px;99 border: 2px solid #cfd8dc;100 display: flex; justify-content: center; align-items: center;101 background: #fff;102 }103 .timer-row {104 display: flex; align-items: center;105 padding: 24px 36px;106 gap: 26px;107 }108 .circle-btn {109 width: 72px; height: 72px; border-radius: 50%;110 border: 4px solid #d8dde3; display: flex; justify-content: center; align-items: center;111 }112 .time-text {113 font-size: 64px; color: #1e2936; font-weight: 700; letter-spacing: 2px;114 }115 .clock-right {116 margin-left: auto;117 }118 119 .two-col-labels {120 display: grid; grid-template-columns: 1fr 1fr;121 padding: 18px 36px 8px 36px;122 color: #808a93; font-size: 34px; font-weight: 600;123 }124 125 .set-row {126 margin: 0 30px;127 border: 2px solid #cfd8dc;128 border-radius: 18px;129 height: 120px;130 display: grid;131 grid-template-columns: 120px 1fr 140px;132 align-items: center;133 padding: 0 16px;134 box-sizing: border-box;135 }136 .set-row .left {137 display: flex; align-items: center; justify-content: center;138 color: #1e88e5;139 }140 .set-row .mid {141 display: flex; align-items: center; gap: 24px; font-size: 46px; color: #1e2936; font-weight: 700;142 }143 .set-row .mid .num {144 color: #1e88e5; font-weight: 800;145 }146 .set-row .right {147 display: flex; justify-content: center; align-items: center;148 }149 150 .fields {151 padding: 18px 30px;152 }153 .field {154 display: grid; grid-template-columns: 260px 1fr;155 align-items: center;156 margin-top: 22px;157 }158 .field .label { color: #7a848e; font-size: 40px; }159 .input-box {160 height: 96px; border-radius: 18px;161 background: #f3f6fa;162 border: 2px solid #e5e9ef;163 display: flex; align-items: center; justify-content: center;164 color: #97a2ae; font-size: 42px; font-weight: 700;165 }166 167 .mini-actions {168 display: flex; justify-content: space-between; align-items: center;169 padding: 28px 30px 12px 30px;170 }171 .round-lite {172 width: 110px; height: 110px; border-radius: 55px; background: #ffffff;173 border: 2px solid #d6dee6; display: flex; justify-content: center; align-items: center;174 }175 .log-btn {176 margin-left: auto;177 background: #58b7ff;178 color: #fff;179 font-weight: 800;180 border: none;181 height: 110px;182 padding: 0 36px;183 border-radius: 18px;184 font-size: 46px;185 box-shadow: 0 6px 16px rgba(88,183,255,0.4);186 }187 188 /* Keypad */189 .keypad {190 position: absolute;191 left: 0; right: 0; bottom: 0;192 height: 820px;193 background: #f1f2ec;194 border-top-left-radius: 22px; border-top-right-radius: 22px;195 box-shadow: 0 -6px 18px rgba(0,0,0,0.06);196 padding: 26px 34px 36px;197 box-sizing: border-box;198 }199 .keys {200 display: grid;201 grid-template-columns: repeat(4, 1fr);202 grid-auto-rows: 160px;203 gap: 26px;204 }205 .key {206 background: #ffffff;207 border: 2px solid #e1e4e8;208 border-radius: 36px;209 display: flex; justify-content: center; align-items: center;210 font-size: 64px; color: #1a1d21; font-weight: 600;211 }212 .key.alt { background: #e4efdf; color: #1d3823; }213 .key.func { background: #d9eefc; color: #0b3a56; }214 .key.confirm { background: #bfe3bf; color: #0d5d24; }215 .key svg { width: 56px; height: 56px; }216 217 /* Simple icon colors */218 .icon-blue { color: #1e88e5; }219 .icon-grey { color: #7f8b95; }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status Bar -->226 <div class="status-bar">227 <div class="status-left">228 <div style="font-size:46px;">1:39</div>229 <div class="dot"></div>230 <div class="dot"></div>231 <div class="dot"></div>232 <div class="small-dot"></div>233 </div>234 <div class="status-right">235 <div class="icon-wifi"></div>236 <div class="icon-battery"></div>237 </div>238 </div>239 240 <!-- Main Card -->241 <div class="card">242 <div class="video-area">243 [IMG: Exercise Demo]244 <div class="reps-label">Reps: 0</div>245 <div class="rest-on">REST TIMER ON</div>246 247 <div class="calendar-btn" title="Calendar">248 <svg viewBox="0 0 24 24" width="56" height="56">249 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#64748b" stroke-width="2"></rect>250 <line x1="3" y1="9" x2="21" y2="9" stroke="#64748b" stroke-width="2"></line>251 <line x1="8" y1="3" x2="8" y2="7" stroke="#64748b" stroke-width="2"></line>252 <line x1="16" y1="3" x2="16" y2="7" stroke="#64748b" stroke-width="2"></line>253 </svg>254 </div>255 256 <div class="floating-back" title="Back">257 <svg viewBox="0 0 24 24">258 <path d="M15 18L9 12l6-6" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>259 </svg>260 </div>261 </div>262 263 <div class="timer-row">264 <div class="circle-btn">265 <svg viewBox="0 0 24 24">266 <rect x="7" y="6" width="3.5" height="12" fill="#7c8b97"></rect>267 <rect x="13.5" y="6" width="3.5" height="12" fill="#7c8b97"></rect>268 </svg>269 </div>270 <div class="time-text">00:32</div>271 <div class="circle-btn clock-right">272 <svg viewBox="0 0 24 24">273 <circle cx="12" cy="12" r="9" fill="none" stroke="#7c8b97" stroke-width="2"></circle>274 <path d="M12 7v6l4 2" fill="none" stroke="#7c8b97" stroke-width="2" stroke-linecap="round"></path>275 </svg>276 </div>277 </div>278 279 <div class="two-col-labels">280 <div>Sets</div>281 <div style="text-align:right;">Duration (hh:mm:ss)</div>282 </div>283 284 <div class="set-row">285 <div class="left">286 <svg viewBox="0 0 24 24" class="icon-blue">287 <path d="M8 5l8 7-8 7" fill="none" stroke="#1e88e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>288 </svg>289 </div>290 <div class="mid">291 <span class="num">1</span>292 <div style="flex:1;height:2px;background:#d9e0e6;margin-right:10px;"></div>293 <span>00:30:00</span>294 </div>295 <div class="right">296 <svg viewBox="0 0 24 24" class="icon-grey">297 <path d="M6 15l6-6 6 6" fill="none" stroke="#7f8b95" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>298 </svg>299 </div>300 </div>301 302 <div class="fields">303 <div class="field">304 <div class="label">Kcal</div>305 <div class="input-box"></div>306 </div>307 <div class="field">308 <div class="label">Distance</div>309 <div class="input-box">mi</div>310 </div>311 <div class="field">312 <div class="label">Speed</div>313 <div class="input-box">mi/h</div>314 </div>315 <div class="field">316 <div class="label">Lap/Rep</div>317 <div class="input-box"></div>318 </div>319 </div>320 321 <div class="mini-actions">322 <div class="round-lite" title="Add">323 <svg viewBox="0 0 24 24">324 <path d="M12 5v14M5 12h14" stroke="#6b7a86" stroke-width="2" stroke-linecap="round"></path>325 </svg>326 </div>327 <div style="flex:1;"></div>328 <div class="round-lite" title="Remove">329 <svg viewBox="0 0 24 24">330 <path d="M5 12h14" stroke="#6b7a86" stroke-width="2" stroke-linecap="round"></path>331 </svg>332 </div>333 <button class="log-btn">LOG SET</button>334 </div>335 </div>336 337 <!-- Keypad -->338 <div class="keypad">339 <div class="keys">340 <div class="key">1</div>341 <div class="key">2</div>342 <div class="key">3</div>343 <div class="key alt">-</div>344 345 <div class="key">4</div>346 <div class="key">5</div>347 <div class="key">6</div>348 <div class="key alt">349 <svg viewBox="0 0 24 24">350 <rect x="4" y="7" width="16" height="10" rx="2" fill="none" stroke="#1d3823" stroke-width="2"></rect>351 <line x1="8" y1="7" x2="8" y2="17" stroke="#1d3823" stroke-width="2"></line>352 </svg>353 </div>354 355 <div class="key">7</div>356 <div class="key">8</div>357 <div class="key">9</div>358 <div class="key func">359 <svg viewBox="0 0 24 24">360 <path d="M9 7l-5 5 5 5" fill="none" stroke="#0b3a56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>361 <rect x="9" y="7" width="10" height="10" rx="2" fill="none" stroke="#0b3a56" stroke-width="2"></rect>362 <line x1="12" y1="10" x2="15" y2="13" stroke="#0b3a56" stroke-width="2"></line>363 </svg>364 </div>365 366 <div class="key">,</div>367 <div class="key">0</div>368 <div class="key">.</div>369 <div class="key confirm">370 <svg viewBox="0 0 24 24">371 <path d="M4 12l5 5L20 6" fill="none" stroke="#0d5d24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>372 </svg>373 </div>374 </div>375 </div>376 377</div>378</body>379</html>