GD-ML/AndroidCode

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>Countdown Timer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: "Roboto", Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Top patterned header */20  .top-pattern {21    position: relative;22    height: 320px;23    background:24      radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 60%),25      repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 24px, rgba(0,0,0,0) 24px 48px),26      linear-gradient(180deg, #1a2127 0%, #10161c 100%);27  }28  .status-bar {29    position: absolute;30    top: 16px;31    left: 32px;32    right: 32px;33    height: 40px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    opacity: 0.9;38    font-size: 32px;39    letter-spacing: 0.3px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 18px;45  }46  .dot { width: 10px; height: 10px; background: #D4D4D4; border-radius: 50%; opacity: 0.9; }47  .battery {48    width: 40px; height: 22px; border: 2px solid #DADADA; border-radius: 5px; position: relative;49  }50  .battery::after { content: ""; position: absolute; right: -7px; top: 6px; width: 6px; height: 10px; background: #DADADA; border-radius: 2px; }51  .battery .level { position: absolute; left: 3px; top: 3px; height: 14px; width: 26px; background: #DADADA; border-radius: 3px; }52 53  .screen-title {54    position: absolute;55    left: 32px;56    bottom: 32px;57    font-size: 58px;58    font-weight: 700;59  }60 61  /* Action bar under header */62  .action-bar {63    height: 112px;64    background: #0c1116;65    display: flex;66    align-items: center;67    padding: 0 32px;68    gap: 24px;69    border-top: 1px solid #202a32;70    border-bottom: 1px solid #202a32;71  }72  .action-text {73    font-size: 46px;74    font-weight: 500;75  }76  .kebab {77    margin-left: auto;78    width: 40px; height: 80px;79    display: flex; align-items: center; justify-content: center;80  }81  .kebab .dot { width: 8px; height: 8px; background: #BDBDBD; margin: 4px 0; }82 83  /* Timer card */84  .timer-card {85    margin: 36px 24px 0 24px;86    background: #2a3540;87    border-radius: 26px;88    box-shadow: 0 8px 16px rgba(0,0,0,0.45);89    padding: 28px 28px 32px 28px;90  }91  .card-row {92    display: flex;93    align-items: center;94  }95  .round-icon {96    width: 120px; height: 120px; border-radius: 60px;97    background: #c4890f;98    display: flex; align-items: center; justify-content: center;99    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);100    margin-right: 24px;101  }102  .time-text {103    font-size: 110px;104    font-weight: 700;105    letter-spacing: 2px;106    text-shadow: 0 4px 0 rgba(0,0,0,0.45);107  }108  .toggle {109    margin-left: auto;110    width: 150px; height: 68px; border-radius: 34px;111    background: #3b4550;112    position: relative;113  }114  .toggle .knob {115    position: absolute; right: 6px; top: 6px;116    width: 56px; height: 56px; border-radius: 28px;117    background: #d29516;118    box-shadow: 0 2px 6px rgba(0,0,0,0.4);119  }120  .vertical-dots {121    margin-left: 18px;122    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;123  }124  .vertical-dots .dot { width: 8px; height: 8px; background: #FFFFFF; opacity: 0.85; }125 126  .progress-wrap {127    margin-top: 28px;128    height: 18px; border-radius: 9px;129    background: #4f5a64;130    position: relative;131    overflow: hidden;132  }133  .progress-fill {134    position: absolute;135    left: 0; top: 0; height: 18px; width: 90px;136    background: #d29516;137    border-radius: 9px 0 0 9px;138  }139 140  /* Snackbar */141  .snackbar {142    position: absolute;143    left: 50%;144    bottom: 360px;145    transform: translateX(-50%);146    width: 880px;147    background: #d2d2d2;148    color: #000;149    border-radius: 48px;150    box-shadow: 0 10px 18px rgba(0,0,0,0.35);151    padding: 30px 40px;152    font-size: 44px;153    text-align: center;154  }155  .snack-icon {156    position: absolute;157    left: 50%;158    transform: translateX(-50%);159    bottom: 158px;160    width: 120px; height: 120px; border-radius: 60px;161    background: #c4890f;162    display: flex; align-items: center; justify-content: center;163    box-shadow: 0 6px 12px rgba(0,0,0,0.4);164  }165 166  /* Bottom nav bar */167  .bottom-nav {168    position: absolute;169    bottom: 0;170    left: 0;171    width: 1080px;172    height: 200px;173    background: #141b21;174    border-top-left-radius: 28px;175    border-top-right-radius: 28px;176    display: flex;177    align-items: center;178    justify-content: space-around;179    padding-top: 18px;180    box-shadow: 0 -6px 16px rgba(0,0,0,0.45);181  }182  .nav-item {183    width: 200px;184    display: flex;185    flex-direction: column;186    align-items: center;187    gap: 12px;188    color: #9aa5ad;189    font-size: 32px;190  }191  .nav-item.active {192    color: #FFFFFF;193    font-weight: 600;194  }195  .home-indicator {196    position: absolute;197    bottom: 18px;198    left: 50%;199    transform: translateX(-50%);200    width: 300px; height: 10px; border-radius: 8px;201    background: #EDEDED;202    opacity: 0.95;203  }204 205  /* Simple SVG sizing helpers */206  .icon-lg { width: 64px; height: 64px; }207  .icon-hourglass { width: 44px; height: 44px; }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Top patterned header with status bar and title -->214  <div class="top-pattern">215    <div class="status-bar">216      <div>12:16</div>217      <div class="status-icons">218        <div class="dot"></div>219        <div class="dot"></div>220        <div class="dot"></div>221        <div class="dot"></div>222        <svg width="30" height="30" viewBox="0 0 24 24" fill="#DADADA"><path d="M2 9l10-7 10 7v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9z"/></svg>223        <div class="battery"><div class="level"></div></div>224      </div>225    </div>226    <div class="screen-title">Countdown Timer</div>227    <div class="kebab" style="position:absolute; right:24px; bottom:24px;">228      <div class="dot"></div><div class="dot"></div><div class="dot"></div>229    </div>230  </div>231 232  <!-- Action bar with hourglass and schedule text -->233  <div class="action-bar">234    <svg class="icon-hourglass" viewBox="0 0 24 24">235      <path d="M6 2h12v3c0 2.8-3.2 4.6-5 6 1.8 1.4 5 3.2 5 6v3H6v-3c0-2.8 3.2-4.6 5-6-1.8-1.4-5-3.2-5-6V2z"236            fill="#d2a016" stroke="#d2a016" stroke-width="0.5"/>237    </svg>238    <div class="action-text">Mon 12:26 PM</div>239    <div class="kebab">240      <div class="dot"></div><div class="dot"></div><div class="dot"></div>241    </div>242  </div>243 244  <!-- Timer Card -->245  <div class="timer-card">246    <div class="card-row">247      <div class="round-icon">248        <svg class="icon-lg" viewBox="0 0 24 24">249          <path d="M12 5v3l3-2-3-1zm6.7 3.3A8 8 0 1 0 4 12h2a6 6 0 1 1 6 6v3l5-4-5-2v3a8 8 0 0 0 6.7-10.7z"250                fill="#fff" opacity="0.85"/>251        </svg>252      </div>253      <div class="time-text">9:59</div>254      <div class="toggle"><div class="knob"></div></div>255      <div class="vertical-dots" style="margin-left: 16px;">256        <div class="dot"></div><div class="dot"></div><div class="dot"></div>257      </div>258    </div>259    <div class="progress-wrap">260      <div class="progress-fill"></div>261    </div>262  </div>263 264  <!-- Big empty middle area is just the dark background -->265 266  <!-- Snackbar + floating icon -->267  <div class="snack-icon">268    <svg class="icon-hourglass" viewBox="0 0 24 24">269      <path d="M6 2h12v3c0 2.8-3.2 4.6-5 6 1.8 1.4 5 3.2 5 6v3H6v-3c0-2.8 3.2-4.6 5-6-1.8-1.4-5-3.2-5-6V2z"270            fill="#fff" opacity="0.9"/>271    </svg>272  </div>273  <div class="snackbar">Timer set for Mon 12:26 PM</div>274 275  <!-- Bottom navigation bar -->276  <div class="bottom-nav">277    <div class="nav-item">278      <svg class="icon-lg" viewBox="0 0 24 24" fill="#9aa5ad">279        <path d="M7 3l2 2h6l2-2h2v2h-2l-2 2H9L7 5H5V3h2zm5 5a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0 2v5h5a5 5 0 1 0-5-5z"/>280      </svg>281    </div>282    <div class="nav-item active">283      <svg class="icon-lg" viewBox="0 0 24 24" fill="#FFFFFF">284        <path d="M6 2h12v3c0 2.8-3.2 4.6-5 6 1.8 1.4 5 3.2 5 6v3H6v-3c0-2.8 3.2-4.6 5-6-1.8-1.4-5-3.2-5-6V2z"/>285      </svg>286      <div>Timer</div>287    </div>288    <div class="nav-item">289      <svg class="icon-lg" viewBox="0 0 24 24" fill="#9aa5ad">290        <path d="M12 2l2 2h4v2h-4l-2 2-2-2H6V4h4l2-2zm0 5a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm-1 4h2v5h-2v-5z"/>291      </svg>292    </div>293    <div class="nav-item">294      <svg class="icon-lg" viewBox="0 0 24 24" fill="#9aa5ad">295        <path d="M12 4a8 8 0 1 1 0 16A8 8 0 0 1 12 4zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 3h2v4l3 2-1 2-4-3V9z"/>296      </svg>297    </div>298    <div class="home-indicator"></div>299  </div>300 301</div>302</body>303</html>