GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #171717;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 0 32px;24 box-sizing: border-box;25 color: #fff;26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .status-left { display: flex; align-items: center; gap: 18px; }31 .status-time { font-size: 44px; letter-spacing: 1px; }32 .status-right { display: flex; align-items: center; gap: 26px; }33 34 /* App top controls */35 .top-controls {36 position: absolute;37 top: 170px;38 right: 40px;39 display: flex;40 align-items: center;41 gap: 36px;42 opacity: 0.9;43 }44 .top-controls svg { width: 58px; height: 58px; fill: none; stroke: #BDBDBD; stroke-width: 4; }45 46 /* Dot grid visualizer */47 .dot-grid {48 position: absolute;49 top: 450px;50 left: 180px;51 width: 720px;52 display: flex;53 justify-content: space-between;54 }55 .col {56 display: flex;57 flex-direction: column;58 gap: 24px;59 }60 .dot {61 width: 28px;62 height: 28px;63 border-radius: 50%;64 background: #2b2b2b;65 }66 .dot.light { background: #d9d9d9; }67 .dot.mid { background: #6e6e6e; }68 69 /* Timer circle */70 .timer-circle {71 position: absolute;72 top: 1140px;73 left: 290px;74 width: 500px;75 height: 500px;76 border-radius: 50%;77 background: #232323;78 box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;79 display: flex;80 flex-direction: column;81 align-items: center;82 justify-content: center;83 gap: 22px;84 }85 .timer-value {86 font-size: 120px;87 font-weight: 600;88 letter-spacing: 2px;89 }90 .timer-label {91 font-size: 46px;92 color: #bdbdbd;93 }94 95 /* Bottom controls */96 .cancel-wrap {97 position: absolute;98 bottom: 170px;99 left: 60px;100 display: flex;101 align-items: center;102 gap: 26px;103 color: #e6e6e6;104 font-size: 52px;105 letter-spacing: 2px;106 }107 .cancel-wrap .x {108 width: 54px; height: 54px;109 border-radius: 10px;110 display: grid; place-items: center;111 color: #d9534f;112 }113 .confirm-btn {114 position: absolute;115 bottom: 130px;116 left: 470px;117 width: 140px;118 height: 140px;119 border-radius: 50%;120 background: #ffffff;121 box-shadow: 0 12px 22px rgba(0,0,0,0.35);122 display: grid;123 place-items: center;124 }125 .confirm-btn svg { width: 66px; height: 66px; fill: none; stroke: #2e7d32; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }126 127 /* Gesture bar */128 .gesture {129 position: absolute;130 bottom: 40px;131 left: 369px;132 width: 342px;133 height: 14px;134 background: #e6e6e6;135 border-radius: 10px;136 opacity: 0.85;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status Bar -->144 <div class="status-bar">145 <div class="status-left">146 <div class="status-time">6:06</div>147 <!-- small icons placeholders -->148 <svg width="36" height="36" viewBox="0 0 24 24">149 <circle cx="12" cy="12" r="8" stroke="#bdbdbd" fill="none" stroke-width="2"></circle>150 <path d="M6 12h12" stroke="#bdbdbd" stroke-width="2"></path>151 </svg>152 <svg width="36" height="36" viewBox="0 0 24 24">153 <path d="M4 4l16 16" stroke="#bdbdbd" stroke-width="2"></path>154 </svg>155 <svg width="36" height="36" viewBox="0 0 24 24">156 <circle cx="12" cy="8" r="4" stroke="#bdbdbd" fill="none" stroke-width="2"></circle>157 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" stroke="#bdbdbd" stroke-width="2" fill="none"></path>158 </svg>159 </div>160 <div class="status-right">161 <svg width="40" height="40" viewBox="0 0 24 24">162 <path d="M3 10l6 6 12-12" stroke="#ffffff" stroke-width="2" fill="none"></path>163 </svg>164 <svg width="40" height="40" viewBox="0 0 24 24">165 <path d="M3 12h18" stroke="#ffffff" stroke-width="2"></path>166 <rect x="3" y="6" width="18" height="12" stroke="#ffffff" fill="none" stroke-width="2"></rect>167 </svg>168 <svg width="40" height="40" viewBox="0 0 24 24">169 <rect x="6" y="3" width="12" height="18" rx="2" stroke="#ffffff" fill="none" stroke-width="2"></rect>170 </svg>171 </div>172 </div>173 174 <!-- App Top Controls -->175 <div class="top-controls">176 <!-- Clock icon -->177 <svg viewBox="0 0 24 24">178 <circle cx="12" cy="12" r="9"></circle>179 <path d="M12 6v6l4 2"></path>180 </svg>181 <!-- Repeat icon -->182 <svg viewBox="0 0 24 24">183 <path d="M6 7h9l-2-2" stroke="#BDBDBD" fill="none" stroke-width="4"></path>184 <path d="M18 17H9l2 2" stroke="#BDBDBD" fill="none" stroke-width="4"></path>185 <path d="M6 7a5 5 0 0 0-2 4" stroke="#BDBDBD" fill="none" stroke-width="4"></path>186 <path d="M18 17a5 5 0 0 0 2-4" stroke="#BDBDBD" fill="none" stroke-width="4"></path>187 </svg>188 <!-- More vertical icon -->189 <svg viewBox="0 0 24 24">190 <circle cx="12" cy="5" r="2" stroke="#BDBDBD"></circle>191 <circle cx="12" cy="12" r="2" stroke="#BDBDBD"></circle>192 <circle cx="12" cy="19" r="2" stroke="#BDBDBD"></circle>193 </svg>194 </div>195 196 <!-- Dot Grid -->197 <div class="dot-grid">198 <!-- Column 1 -->199 <div class="col">200 <div class="dot"></div><div class="dot"></div><div class="dot"></div>201 <div class="dot"></div><div class="dot"></div><div class="dot"></div>202 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>203 </div>204 <!-- Column 2 -->205 <div class="col">206 <div class="dot"></div><div class="dot"></div><div class="dot"></div>207 <div class="dot"></div><div class="dot mid"></div><div class="dot mid"></div>208 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>209 </div>210 <!-- Column 3 -->211 <div class="col">212 <div class="dot"></div><div class="dot"></div><div class="dot"></div>213 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>214 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>215 </div>216 <!-- Column 4 -->217 <div class="col">218 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>219 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>220 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>221 </div>222 <!-- Column 5 -->223 <div class="col">224 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>225 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>226 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>227 </div>228 <!-- Column 6 -->229 <div class="col">230 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>231 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>232 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>233 </div>234 <!-- Column 7 -->235 <div class="col">236 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>237 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>238 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>239 </div>240 <!-- Column 8 -->241 <div class="col">242 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>243 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>244 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>245 </div>246 <!-- Column 9 -->247 <div class="col">248 <div class="dot"></div><div class="dot"></div><div class="dot"></div>249 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>250 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>251 </div>252 <!-- Column 10 -->253 <div class="col">254 <div class="dot"></div><div class="dot"></div><div class="dot"></div>255 <div class="dot"></div><div class="dot mid"></div><div class="dot mid"></div>256 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div>257 </div>258 <!-- Column 11 -->259 <div class="col">260 <div class="dot"></div><div class="dot"></div><div class="dot"></div>261 <div class="dot"></div><div class="dot mid"></div><div class="dot mid"></div>262 <div class="dot mid"></div><div class="dot light"></div><div class="dot light"></div>263 </div>264 <!-- Column 12 -->265 <div class="col">266 <div class="dot"></div><div class="dot"></div><div class="dot"></div>267 <div class="dot"></div><div class="dot"></div><div class="dot mid"></div>268 <div class="dot"></div><div class="dot light"></div><div class="dot light"></div>269 </div>270 </div>271 272 <!-- Timer circle -->273 <div class="timer-circle">274 <div class="timer-value">00:38</div>275 <div class="timer-label">Resume</div>276 </div>277 278 <!-- Bottom controls -->279 <div class="cancel-wrap">280 <div class="x">281 <svg width="54" height="54" viewBox="0 0 24 24">282 <path d="M5 5l14 14M19 5L5 19" stroke="#d9534f" stroke-width="3" fill="none" stroke-linecap="round"></path>283 </svg>284 </div>285 <div>Cancel</div>286 </div>287 288 <div class="confirm-btn">289 <svg viewBox="0 0 24 24">290 <path d="M5 13l4 4 10-10"></path>291 </svg>292 </div>293 294 <div class="gesture"></div>295 296</div>297</body>298</html>