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>Timer Resume Screen</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #fff;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #222323;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 140px;30 background: #121212;31 color: #f5f5f5;32 display: flex;33 align-items: center;34 justify-content: space-between;35 padding: 0 36px;36 box-sizing: border-box;37 }38 .status-left {39 font-size: 46px;40 letter-spacing: 1px;41 }42 .status-right {43 display: flex;44 align-items: center;45 gap: 28px;46 }47 .status-icon {48 width: 42px;49 height: 42px;50 display: inline-flex;51 align-items: center;52 justify-content: center;53 }54 .status-icon svg {55 width: 42px;56 height: 42px;57 fill: none;58 stroke: #f5f5f5;59 stroke-width: 4;60 }61 62 /* Top in-app actions */63 .top-actions {64 position: absolute;65 top: 210px;66 right: 40px;67 display: flex;68 align-items: center;69 gap: 36px;70 color: #cfcfcf;71 }72 .top-actions .icon {73 width: 64px;74 height: 64px;75 display: inline-flex;76 align-items: center;77 justify-content: center;78 opacity: 0.7;79 }80 .top-actions svg {81 width: 56px;82 height: 56px;83 fill: none;84 stroke: #cfcfcf;85 stroke-width: 5;86 }87 .kebab {88 width: 12px;89 height: 56px;90 display: flex;91 flex-direction: column;92 justify-content: space-between;93 }94 .kebab span {95 width: 12px;96 height: 12px;97 background: #cfcfcf;98 border-radius: 50%;99 opacity: 0.8;100 }101 102 /* Equalizer dots */103 .equalizer {104 position: absolute;105 top: 520px;106 left: 120px;107 width: 840px;108 display: flex;109 justify-content: space-between;110 }111 .col {112 display: flex;113 flex-direction: column;114 gap: 26px;115 }116 .dot {117 width: 30px;118 height: 30px;119 background: #2c2c2c;120 border-radius: 50%;121 opacity: 0.9;122 }123 .dot.light {124 background: #cfcfcf;125 opacity: 1;126 }127 128 /* Timer circle */129 .timer-circle {130 position: absolute;131 top: 1180px;132 left: 260px;133 width: 560px;134 height: 560px;135 border-radius: 50%;136 background: #2a2a2a;137 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);138 display: flex;139 align-items: center;140 justify-content: center;141 }142 .timer-content {143 text-align: center;144 }145 .time-text {146 font-size: 140px;147 font-weight: 300;148 letter-spacing: 2px;149 color: #ffffff;150 }151 .resume-text {152 margin-top: 20px;153 font-size: 54px;154 color: #cfcfcf;155 letter-spacing: 1px;156 }157 158 /* Bottom actions */159 .bottom-cancel {160 position: absolute;161 left: 80px;162 bottom: 240px;163 display: flex;164 align-items: center;165 gap: 24px;166 color: #e7e7e7;167 font-size: 54px;168 }169 .cancel-x {170 width: 42px;171 height: 42px;172 }173 .cancel-x svg {174 width: 42px;175 height: 42px;176 stroke: #e04b3f;177 stroke-width: 8;178 fill: none;179 }180 181 .confirm-btn {182 position: absolute;183 left: 50%;184 transform: translateX(-50%);185 bottom: 210px;186 width: 170px;187 height: 170px;188 background: #ffffff;189 border-radius: 50%;190 box-shadow: 0 18px 28px rgba(0,0,0,0.35);191 display: flex;192 align-items: center;193 justify-content: center;194 }195 .confirm-btn svg {196 width: 86px;197 height: 86px;198 stroke: #4caf50;199 stroke-width: 12;200 fill: none;201 }202 203 /* Navigation pill */204 .nav-pill {205 position: absolute;206 left: 50%;207 transform: translateX(-50%);208 bottom: 90px;209 width: 360px;210 height: 12px;211 border-radius: 12px;212 background: #cfcfcf;213 opacity: 0.9;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="status-bar">222 <div class="status-left">4:40</div>223 <div class="status-right">224 <div class="status-icon">225 <svg viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="10"></circle>227 <text x="12" y="16" text-anchor="middle" font-size="12" fill="#f5f5f5">i</text>228 </svg>229 </div>230 <div class="status-icon">231 <svg viewBox="0 0 24 24">232 <circle cx="10" cy="10" r="8"></circle>233 <line x1="16" y1="16" x2="22" y2="22"></line>234 </svg>235 </div>236 <div class="status-icon">237 <svg viewBox="0 0 24 24">238 <rect x="3" y="10" width="3" height="10"></rect>239 <rect x="9" y="6" width="3" height="14"></rect>240 <rect x="15" y="2" width="3" height="18"></rect>241 </svg>242 </div>243 <div class="status-icon">244 <svg viewBox="0 0 24 24">245 <path d="M3 12h18"></path>246 <circle cx="20" cy="5" r="3"></circle>247 </svg>248 </div>249 <div class="status-icon">250 <svg viewBox="0 0 24 24">251 <path d="M2 12h2l8-8v16l-8-8H2"></path>252 </svg>253 </div>254 <div class="status-icon">255 <svg viewBox="0 0 24 24">256 <path d="M3 12a9 9 0 1 0 18 0"></path>257 </svg>258 </div>259 <div class="status-icon">260 <svg viewBox="0 0 24 24">261 <path d="M3 18h15"></path>262 <path d="M6 18V6c4-4 8-4 12 0v12"></path>263 </svg>264 </div>265 <div class="status-icon">266 <svg viewBox="0 0 24 24">267 <path d="M3 12h18"></path>268 <polyline points="18,4 21,7 18,10"></polyline>269 </svg>270 </div>271 <div class="status-icon">272 <svg viewBox="0 0 24 24">273 <path d="M3 12h14"></path>274 <rect x="19" y="6" width="3" height="12"></rect>275 </svg>276 </div>277 </div>278 </div>279 280 <!-- Top in-app actions -->281 <div class="top-actions">282 <div class="icon">283 <svg viewBox="0 0 24 24">284 <circle cx="12" cy="12" r="8"></circle>285 <line x1="12" y1="12" x2="12" y2="7"></line>286 <line x1="12" y1="12" x2="16" y2="12"></line>287 </svg>288 </div>289 <div class="icon">290 <svg viewBox="0 0 24 24">291 <rect x="3" y="14" width="2" height="6"></rect>292 <rect x="7" y="10" width="2" height="10"></rect>293 <rect x="11" y="6" width="2" height="14"></rect>294 <rect x="15" y="12" width="2" height="8"></rect>295 <path d="M20 7c-4-4-10-4-14 0" stroke-linecap="round"></path>296 <polyline points="16,5 20,5 20,9"></polyline>297 </svg>298 </div>299 <div class="kebab">300 <span></span>301 <span></span>302 <span></span>303 </div>304 </div>305 306 <!-- Equalizer dots grid -->307 <div class="equalizer">308 <!-- Column 1 -->309 <div class="col">310 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>311 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>312 </div>313 <!-- Column 2 -->314 <div class="col">315 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>316 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>317 </div>318 <!-- Column 3 -->319 <div class="col">320 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>321 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>322 </div>323 <!-- Column 4 -->324 <div class="col">325 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>326 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>327 </div>328 <!-- Column 5 -->329 <div class="col">330 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>331 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>332 </div>333 <!-- Column 6 -->334 <div class="col">335 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>336 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>337 </div>338 <!-- Column 7 -->339 <div class="col">340 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>341 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>342 </div>343 <!-- Column 8 -->344 <div class="col">345 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>346 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>347 </div>348 <!-- Column 9 -->349 <div class="col">350 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>351 <div class="dot light"></div><div class="dot light"></div><div class="dot light"></div><div class="dot"></div>352 </div>353 <!-- Column 10 -->354 <div class="col">355 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>356 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>357 </div>358 </div>359 360 <!-- Timer Circle -->361 <div class="timer-circle">362 <div class="timer-content">363 <div class="time-text">00:42</div>364 <div class="resume-text">Resume</div>365 </div>366 </div>367 368 <!-- Bottom actions -->369 <div class="bottom-cancel">370 <div class="cancel-x">371 <svg viewBox="0 0 24 24">372 <line x1="4" y1="4" x2="20" y2="20"></line>373 <line x1="20" y1="4" x2="4" y2="20"></line>374 </svg>375 </div>376 <div>Cancel</div>377 </div>378 379 <div class="confirm-btn">380 <svg viewBox="0 0 24 24">381 <polyline points="4,12 10,18 20,6"></polyline>382 </svg>383 </div>384 385 <div class="nav-pill"></div>386</div>387</body>388</html>