GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Workout Logger UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f8f8f8;13 border-radius: 28px;14 box-shadow: 0 0 0 1px #e0e0e0 inset;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 140px;24 background: #bcbcbc;25 color: #fff;26 padding: 0 36px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 letter-spacing: 1px;32 }33 .status-left {34 font-size: 42px;35 font-weight: 600;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 28px;41 }42 .dot { width: 22px; height: 22px; background:#fff; border-radius:50%; opacity: 0.8; }43 .icon-signal, .icon-battery {44 width: 40px; height: 28px; display: inline-block; position: relative;45 }46 .icon-signal:before {47 content: ''; position: absolute; right:0; bottom:0; width: 8px; height: 8px; background:#fff;48 box-shadow: -10px 4px 0 0 #fff, -20px 8px 0 0 #fff, -30px 12px 0 0 #fff;49 }50 .icon-battery {51 border: 3px solid #fff; border-radius: 5px;52 }53 .icon-battery:after {54 content:''; position: absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px;55 }56 57 /* Back button */58 .back-wrap {59 position: absolute;60 top: 150px;61 left: 20px;62 width: 120px;63 height: 120px;64 border-radius: 60px;65 background: #fff;66 box-shadow: 0 6px 16px rgba(0,0,0,0.15);67 display: flex; align-items: center; justify-content: center;68 z-index: 5;69 }70 .back-wrap svg { width: 44px; height: 44px; }71 72 /* Card */73 .workout-card {74 position: absolute;75 top: 160px;76 left: 48px;77 width: 984px;78 height: 1370px;79 background: #fff;80 border-radius: 26px;81 border: 1px solid #e4e4e4;82 overflow: hidden;83 }84 .media-header {85 position: relative;86 height: 360px;87 background: #ededed;88 border-bottom: 1px solid #d9d9d9;89 display: flex;90 align-items: center;91 justify-content: center;92 color: #7a7a7a;93 font-weight: 600;94 }95 .media-header .badge {96 position: absolute;97 right: 28px;98 top: 28px;99 color: #45a6ff;100 font-weight: 800;101 font-size: 48px;102 letter-spacing: 1px;103 }104 .media-header .calendar-btn {105 position: absolute;106 right: 28px;107 bottom: 28px;108 width: 90px; height: 90px;109 border-radius: 14px;110 border: 3px solid #bdbdbd;111 display: flex; align-items: center; justify-content: center;112 color: #777;113 background: rgba(255,255,255,0.65);114 font-size: 28px;115 }116 .media-header .title {117 font-size: 30px;118 position: absolute; left: 140px; top: 26px; color:#808080; font-weight: 600;119 }120 121 /* Timer row */122 .timer-row {123 display: flex;124 align-items: center;125 gap: 24px;126 padding: 24px 36px;127 }128 .pause-ic {129 width: 48px; height: 48px; border-radius: 8px; display:flex; align-items:center; justify-content:center;130 }131 .pause-ic svg { width: 44px; height: 44px; fill: #6e6e6e; }132 .timer-value { font-size: 64px; color:#2b84ff; font-weight: 700; letter-spacing: 1px; }133 .clock-ic {134 margin-left: auto;135 width: 90px; height: 90px;136 border: 5px solid #3d3d3d;137 border-radius: 50%;138 position: relative;139 }140 .clock-ic:before {141 content:''; position:absolute; top:16px; left:40px; width:6px; height:28px; background:#3d3d3d; border-radius:3px;142 }143 .clock-ic:after {144 content:''; position:absolute; top:44px; left:42px; width:28px; height:6px; background:#3d3d3d; border-radius:3px;145 }146 147 /* Labels row */148 .labels {149 display: flex;150 justify-content: space-between;151 padding: 12px 40px 8px 40px;152 color: #8a8a8a;153 font-size: 36px;154 }155 156 /* Set editor row */157 .set-row {158 margin: 8px 36px 20px 36px;159 border: 2px solid #b8d2ff;160 border-radius: 18px;161 height: 120px;162 display: flex;163 align-items: center;164 padding: 0 26px;165 box-sizing: border-box;166 gap: 26px;167 }168 .set-arrow {169 width: 58px; height: 58px; border-radius: 12px; border: 2px solid #7fb1ff;170 display:flex; align-items:center; justify-content:center; color:#2b84ff; font-weight:800; font-size: 38px;171 }172 .set-index { font-size: 56px; color:#2b84ff; width: 80px; text-align: center; font-weight: 700; }173 .set-duration {174 flex: 1;175 text-align: center;176 font-size: 72px; color:#333; font-weight: 700;177 border-bottom: 4px solid #e5efff;178 margin-right: 20px;179 }180 .caret {181 width: 42px; height: 42px; border: 3px solid #9fbaff; border-left: transparent; border-bottom: transparent;182 transform: rotate(-45deg);183 border-radius: 4px;184 }185 186 /* Input-like rows */187 .form-list {188 padding: 6px 36px;189 }190 .form-row {191 display: grid;192 grid-template-columns: 260px 1fr;193 align-items: center;194 gap: 28px;195 margin: 22px 0;196 }197 .form-row .label {198 color: #7b7b7b;199 font-size: 42px;200 }201 .form-row .input {202 height: 96px;203 background: #f3f6fb;204 border: 2px solid #e7edf7;205 border-radius: 18px;206 display: flex; align-items: center; justify-content: flex-start;207 padding: 0 26px;208 font-size: 44px;209 color: #b4bcc9;210 }211 212 .side-actions {213 position: relative;214 height: 140px;215 margin-top: 6px;216 }217 .btn-circle {218 position: absolute;219 top: 8px;220 width: 120px; height: 120px; border-radius: 60px;221 background: #fff;222 border: 2px solid #d6d6d6;223 display:flex; align-items:center; justify-content:center;224 font-size: 72px; color:#7a7a7a;225 }226 .btn-plus { left: 28px; }227 .btn-minus { right: 28px; }228 .btn-grid {229 position: absolute;230 left: 24px; bottom: -10px;231 width: 120px; height: 120px; border-radius: 18px;232 border: 2px solid #d9d9d9; background:#fff;233 display:flex; align-items:center; justify-content:center;234 }235 .btn-grid svg { width: 58px; height: 58px; }236 237 /* Log button */238 .log-wrap {239 position: absolute;240 right: 40px;241 bottom: 40px;242 }243 .log-btn {244 width: 420px; height: 132px;245 background: #49a9ff;246 color: #fff;247 border: none;248 border-radius: 22px;249 font-size: 56px;250 font-weight: 800;251 letter-spacing: 1px;252 box-shadow: 0 8px 16px rgba(73,169,255,0.35);253 }254 255 /* Bottom picker area */256 .picker {257 position: absolute;258 left: 0; right: 0;259 bottom: 96px;260 height: 520px;261 display: flex;262 align-items: center;263 justify-content: center;264 gap: 36px;265 }266 .picker-wheel {267 width: 520px; height: 360px;268 background: #ffffff;269 border: 1px solid #e7e7e7;270 border-radius: 22px;271 display: grid;272 grid-template-rows: 1fr auto 1fr;273 align-items: center;274 text-align: center;275 color:#b0b8c4;276 font-weight: 700;277 }278 .picker-wheel .above,279 .picker-wheel .below {280 font-size: 56px;281 opacity: 0.6;282 }283 .picker-wheel .center {284 font-size: 86px;285 color: #2c86ff;286 }287 .picker-label {288 font-size: 56px; color:#2a2a2a; font-weight: 700;289 }290 291 /* Home indicator */292 .home-indicator {293 position: absolute;294 bottom: 22px;295 left: 50%;296 transform: translateX(-50%);297 width: 420px; height: 12px; background:#0d0d0d; border-radius: 6px;298 opacity: 0.85;299 }300</style>301</head>302<body>303<div id="render-target">304 305 <!-- Status bar -->306 <div class="statusbar">307 <div class="status-left">1:39</div>308 <div class="status-right">309 <div class="dot"></div>310 <div class="dot" style="opacity:0.9;"></div>311 <div class="dot" style="opacity:0.8;"></div>312 <div class="dot" style="opacity:0.7;"></div>313 <div class="icon-signal"></div>314 <div class="icon-battery"></div>315 </div>316 </div>317 318 <!-- Back button -->319 <div class="back-wrap" aria-label="Back">320 <svg viewBox="0 0 24 24">321 <path d="M15.4 4.6a1.5 1.5 0 0 1 0 2.1L10.1 12l5.3 5.3a1.5 1.5 0 1 1-2.1 2.1L6.9 13.1a2 2 0 0 1 0-2.8l6.4-6.4a1.5 1.5 0 0 1 2.1 0z" fill="#4a4a4a"/>322 </svg>323 </div>324 325 <!-- Workout card -->326 <div class="workout-card">327 <div class="media-header">328 <div class="badge">REST TIMER ON</div>329 <div class="calendar-btn">CAL</div>330 <div class="title">Reps: 0</div>331 <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;">332 <div style="width: 880px; height: 280px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:42px; border-radius: 12px;">[IMG: Trainer Exercise Demo]</div>333 </div>334 </div>335 336 <div class="timer-row">337 <div class="pause-ic" title="Pause">338 <svg viewBox="0 0 24 24">339 <path d="M6 4h4v16H6zM14 4h4v16h-4z"/>340 </svg>341 </div>342 <div class="timer-value">00:01</div>343 <div class="clock-ic" aria-hidden="true"></div>344 </div>345 346 <div class="labels">347 <div>Sets</div>348 <div>Duration (hh:mm:ss)</div>349 </div>350 351 <div class="set-row">352 <div class="set-arrow">→</div>353 <div class="set-index">1</div>354 <div class="set-duration">00:30:00</div>355 <div class="caret"></div>356 </div>357 358 <div class="form-list">359 <div class="form-row">360 <div class="label">Kcal</div>361 <div class="input"></div>362 </div>363 <div class="form-row">364 <div class="label">Distance</div>365 <div class="input">mi</div>366 </div>367 <div class="form-row">368 <div class="label">Speed</div>369 <div class="input">mi/h</div>370 </div>371 <div class="form-row">372 <div class="label">Lap/Rep</div>373 <div class="input"></div>374 </div>375 </div>376 377 <div class="side-actions">378 <div class="btn-circle btn-plus">+</div>379 <div class="btn-circle btn-minus">−</div>380 381 <div class="btn-grid" title="Grid">382 <svg viewBox="0 0 24 24" fill="#7b7b7b">383 <circle cx="4" cy="4" r="2"></circle>384 <circle cx="12" cy="4" r="2"></circle>385 <circle cx="20" cy="4" r="2"></circle>386 <circle cx="4" cy="12" r="2"></circle>387 <circle cx="12" cy="12" r="2"></circle>388 <circle cx="20" cy="12" r="2"></circle>389 <circle cx="4" cy="20" r="2"></circle>390 <circle cx="12" cy="20" r="2"></circle>391 <circle cx="20" cy="20" r="2"></circle>392 </svg>393 </div>394 </div>395 </div>396 397 <!-- Log set -->398 <div class="log-wrap">399 <button class="log-btn">LOG SET</button>400 </div>401 402 <!-- Bottom picker -->403 <div class="picker">404 <div class="picker-wheel">405 <div class="above">00:29:45</div>406 <div class="center">00:30:00</div>407 <div class="below">00:30:15</div>408 </div>409 <div class="picker-label">duration</div>410 </div>411 412 <div class="home-indicator"></div>413</div>414</body>415</html>