GD-ML/AndroidCode
13.4k
1<html>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: Arial, Helvetica, sans-serif; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#F2F3F4;10 color:#1c1c1c;11 }12 13 /* Status bar */14 .status-bar{15 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 color:#1d1d1d; font-size:34px; background:#E5E6E7;17 }18 .status-icons{ display:flex; align-items:center; gap:22px;}19 .dot{ width:18px; height:18px; background:#bdbdbd; border-radius:50%;}20 .signal{ width:28px; height:28px; border-radius:4px; border:2px solid #8d8d8d; position:relative;}21 .signal:after{content:""; position:absolute; bottom:2px; left:3px; width:18px; height:18px; background:#8d8d8d; border-radius:2px;}22 .battery{ width:36px; height:20px; border:2px solid #8d8d8d; border-radius:4px; position:relative;}23 .battery:after{content:""; position:absolute; right:-6px; top:5px; width:6px; height:10px; background:#8d8d8d; border-radius:2px;}24 25 /* Main sheet/card */26 .sheet{27 position:absolute; left:30px; right:30px; top:120px;28 background:#ffffff; border-radius:28px; box-shadow:0 2px 6px rgba(0,0,0,0.08);29 padding:28px 28px 24px 28px;30 }31 .floating-handle{32 position:absolute; left:-24px; top:18px; width:96px; height:96px; background:#F0F0F0; border-radius:50%;33 box-shadow:0 1px 2px rgba(0,0,0,0.08) inset;34 }35 .clock-wrap{36 position:absolute; right:24px; top:18px; width:80px; height:80px; border-radius:50%;37 border:3px solid #dcdcdc; display:flex; align-items:center; justify-content:center;38 }39 .clock-wrap svg{ width:40px; height:40px; stroke:#5f6368; }40 41 .timer{42 text-align:left; font-size:64px; font-weight:700; color:#2F86FF; padding-left:26px; padding-top:10px;43 }44 45 .headers{46 display:flex; justify-content:space-between; margin:22px 14px 8px 26px; color:#6f7380; font-size:28px;47 }48 .set-row{49 display:grid; grid-template-columns:64px 120px 1fr 64px; align-items:center;50 border:2px solid #dfe3ea; border-radius:16px; padding:10px; margin:0 12px;51 }52 .blue-arrow{53 width:46px; height:46px; border-radius:10px; border:2px solid #7fb6ff; display:flex; align-items:center; justify-content:center;54 }55 .blue-arrow svg{ fill:#2F86FF; }56 .set-box{57 font-size:44px; color:#2F86FF; text-align:center; font-weight:700;58 }59 .duration-box{60 position:relative; height:70px; display:flex; align-items:center; padding-left:16px;61 }62 .duration-box:before{63 content:""; position:absolute; left:6px; right:6px; top:6px; bottom:6px; background:#E8F3FF; border-radius:10px;64 }65 .duration-box span{ position:relative; font-size:48px; color:#2F86FF; font-weight:700; letter-spacing:1px; }66 .chev{67 display:flex; align-items:center; justify-content:center;68 }69 .chev svg{ width:30px; height:30px; stroke:#6f7380; }70 71 .field{72 display:flex; align-items:center; gap:20px; margin:18px 12px;73 }74 .field .label{ width:170px; color:#5a5f6b; font-size:32px; padding-left:16px;}75 .field .input{76 flex:1; height:86px; background:#F5F8FC; border-radius:18px; font-size:40px; display:flex; align-items:center; padding:0 24px; color:#0f1a2b; border:1px solid #e7ebf2;77 }78 .field .unit{ width:160px; height:86px; background:#F5F8FC; border-radius:18px; font-size:36px; display:flex; justify-content:center; align-items:center; color:#777; border:1px solid #e7ebf2;}79 .plusminus{80 position:relative; margin:6px 12px 16px 12px; height:80px;81 }82 .pm-btn{83 position:absolute; top:0; width:88px; height:88px; border-radius:50%; background:#ffffff; border:2px solid #dfe3ea;84 display:flex; align-items:center; justify-content:center; font-size:52px; color:#6f7380;85 }86 .pm-btn.plus{ left:12px; }87 .pm-btn.minus{ right:12px; }88 .actions{89 display:flex; gap:22px; padding:10px 8px 12px 8px; margin-bottom:6px;90 }91 .rest{92 flex:1; height:110px; background:#BFC3C9; color:#ffffff; display:flex; align-items:center; justify-content:center;93 border-radius:16px; font-size:44px; font-weight:700; letter-spacing:1px;94 position:relative;95 }96 .rest .x{97 position:absolute; left:34px; font-size:54px; line-height:0; top:50%; transform:translateY(-46%);98 }99 .log{100 width:320px; height:110px; background:#4DA3FF; color:#ffffff; display:flex; align-items:center; justify-content:center; border-radius:16px;101 font-size:44px; font-weight:800; letter-spacing:1px;102 }103 104 /* Time wheel */105 .time-wheel{106 margin:20px 0 6px 0;107 display:flex; flex-direction:column; align-items:center; gap:14px;108 }109 .time-wheel .faint{110 color:#A9AFB8; font-size:40px; letter-spacing:2px; opacity:0.8;111 }112 .time-wheel .current{113 background:#F7FAFF; border:1px solid #e4e9f3; width:520px; height:140px; border-radius:20px;114 display:flex; align-items:center; justify-content:center; color:#3291FF; font-weight:800; font-size:70px; letter-spacing:2px;115 box-shadow:0 1px 0 #eef2f7 inset, 0 -1px 0 #eef2f7 inset;116 }117 118 /* Keypad */119 .keypad{120 position:absolute; bottom:0; left:0; right:0;121 background:#EFF1EC; border-top-left-radius:24px; border-top-right-radius:24px;122 padding:30px 34px 34px 34px;123 }124 .keys{125 display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;126 }127 .key{128 height:150px; background:#ffffff; border-radius:80px; display:flex; align-items:center; justify-content:center;129 font-size:64px; color:#1b1b1b; box-shadow:0 1px 0 rgba(0,0,0,0.02) inset;130 }131 .key.small{ font-size:58px; }132 .key.accent-green{ background:#CFE6C9; color:#1b3d13; }133 .key.accent-green-solid{ background:#8FD08A; color:#fff; font-weight:700; }134 .key.accent-blue{ background:#CDEAF6; color:#0b4978; }135 .key.hollow{ background:#ffffff; border:2px solid #e0e0e0; }136 .key svg{ width:56px; height:56px; }137 138 /* Bottom safe-area bar */139 .home-bar{140 position:absolute; bottom:10px; left:240px; right:240px; height:10px; border-radius:10px; background:#9a9a9a;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <div class="status-bar">148 <div>1:41</div>149 <div class="status-icons">150 <div class="dot"></div>151 <div class="dot"></div>152 <div class="dot"></div>153 <div class="dot"></div>154 <div class="signal"></div>155 <div class="battery"></div>156 </div>157 </div>158 159 <div class="sheet">160 161 <div class="floating-handle"></div>162 163 <div class="clock-wrap">164 <svg viewBox="0 0 24 24" fill="none">165 <circle cx="12" cy="12" r="9" stroke-width="2"></circle>166 <path d="M12 6v7l4 2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>167 </svg>168 </div>169 170 <div class="timer">00:01</div>171 172 <div class="headers">173 <div>Sets</div>174 <div>Duration (hh:mm:ss)</div>175 </div>176 177 <div class="set-row">178 <div class="blue-arrow">179 <svg viewBox="0 0 24 24">180 <path d="M8 5l8 7-8 7z"></path>181 </svg>182 </div>183 <div class="set-box">1</div>184 <div class="duration-box"><span>00:30:00</span></div>185 <div class="chev">186 <svg viewBox="0 0 24 24" fill="none">187 <path d="M6 14l6-6 6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>188 </svg>189 </div>190 </div>191 192 <div class="field">193 <div class="label">Kcal</div>194 <div class="input"></div>195 </div>196 197 <div class="field">198 <div class="label">Distance</div>199 <div class="input">3.00</div>200 </div>201 202 <div class="field">203 <div class="label">Speed</div>204 <div class="unit">mi/h</div>205 </div>206 207 <div class="field">208 <div class="label">Lap/Rep</div>209 <div class="input"></div>210 </div>211 212 <div class="plusminus">213 <div class="pm-btn plus">+</div>214 <div class="pm-btn minus">−</div>215 </div>216 217 <div class="actions">218 <div class="rest"><span class="x">×</span>REST 58S</div>219 <div class="log">LOG SET</div>220 </div>221 </div>222 223 <div class="time-wheel">224 <div class="faint">00:29:45</div>225 <div class="current">00:30:00</div>226 <div class="faint">00:30:15</div>227 </div>228 229 <div class="keypad">230 <div style="font-size:40px; color:#2b2b2b; padding:6px 10px 20px 10px;">duration</div>231 <div class="keys">232 <div class="key">1</div>233 <div class="key">2</div>234 <div class="key">3</div>235 <div class="key accent-green">−</div>236 237 <div class="key">4</div>238 <div class="key">5</div>239 <div class="key">6</div>240 <div class="key accent-green">241 <svg viewBox="0 0 24 24" fill="none">242 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#2a4f22" stroke-width="2"></rect>243 <path d="M8 10v4M16 10v4" stroke="#2a4f22" stroke-width="2"></path>244 </svg>245 </div>246 247 <div class="key">7</div>248 <div class="key">8</div>249 <div class="key">9</div>250 <div class="key accent-blue">251 <svg viewBox="0 0 24 24" fill="none">252 <path d="M20 7l-6 6 6 6H8a4 4 0 0 1-4-4V5a2 2 0 0 0 2 2h14z" fill="#0b4978" opacity="0.15"></path>253 <path d="M20 7l-6 6 6 6H8a4 4 0 0 1-4-4V5" stroke="#0b4978" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>254 </svg>255 </div>256 257 <div class="key small">:</div>258 <div class="key">0</div>259 <div class="key small">.</div>260 <div class="key accent-green-solid">✓</div>261 </div>262 </div>263 264 <div class="home-bar"></div>265</div>266</body>267</html>