GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>The Clock - Timer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0b;14    color: #ffffff;15  }16 17  /* Top gradient header */18  .header-gradient {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 460px;24    background:25      linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.00) 50%),26      linear-gradient(165deg, #141414 0%, #0d0d0d 60%, #0a0a0a 100%);27  }28 29  .status-time {30    position: absolute;31    top: 24px;32    left: 32px;33    font-size: 40px;34    letter-spacing: 0.5px;35    opacity: 0.95;36  }37 38  .status-icons {39    position: absolute;40    top: 24px;41    right: 24px;42    display: flex;43    gap: 24px;44    align-items: center;45  }46  .status-icons svg { fill: none; stroke: #fff; stroke-width: 4; }47 48  .title-row {49    position: absolute;50    top: 110px;51    left: 32px;52    right: 32px;53    display: flex;54    align-items: center;55    gap: 26px;56  }57  .app-title {58    font-size: 56px;59    font-weight: 600;60  }61  .hamburger svg { stroke: #fff; }62 63  .tabs {64    position: absolute;65    top: 220px;66    left: 32px;67    right: 32px;68    display: flex;69    justify-content: space-between;70    align-items: center;71    padding: 0 12px;72  }73  .tab {74    display: flex;75    align-items: center;76    gap: 16px;77    color: #dcdcdc;78    font-size: 34px;79  }80  .tab .label { opacity: 0.9; }81  .tab.active .label { color: #ffffff; }82  .active-underline {83    position: absolute;84    top: 300px;85    left: 50%;86    transform: translateX(-50%);87    width: 300px;88    height: 6px;89    background: #c84350;90    border-radius: 3px;91  }92 93  /* Main numbers */94  .timer-display {95    position: absolute;96    top: 420px;97    left: 60px;98    right: 60px;99    display: flex;100    justify-content: space-between;101    align-items: baseline;102  }103  .time-block {104    text-align: center;105  }106  .time-value {107    font-size: 140px;108    font-weight: 700;109    letter-spacing: 2px;110  }111  .time-value.red { color: #d85560; }112  .time-unit {113    margin-top: 6px;114    font-size: 30px;115    color: #cfcfcf;116    letter-spacing: 1px;117  }118 119  /* Keypad */120  .keypad {121    position: absolute;122    top: 640px;123    left: 90px;124    right: 90px;125    display: flex;126    justify-content: space-between;127  }128  .key-col { display: grid; grid-template-rows: repeat(4, 1fr); row-gap: 40px; }129  .pill {130    width: 280px;131    height: 120px;132    border: 3px solid #dcdcdc;133    border-radius: 60px;134    display: flex;135    align-items: center;136    justify-content: center;137    font-size: 42px;138    color: #ffffff;139    letter-spacing: 1px;140  }141  .pill.dim { color: #e8e8e8; }142 143  .set-btn {144    position: absolute;145    top: 1180px;146    left: 240px;147    width: 600px;148    height: 130px;149    border: 3px solid #dcdcdc;150    border-radius: 65px;151    display: flex;152    align-items: center;153    justify-content: center;154    font-size: 48px;155    color: #d85560;156    letter-spacing: 2px;157  }158 159  /* Floating red control */160  .floating-btn {161    position: absolute;162    top: 1600px;163    left: 50%;164    transform: translateX(-50%);165    width: 140px;166    height: 140px;167    background: #d85560;168    border-radius: 50%;169    box-shadow: 0 10px 20px rgba(0,0,0,0.5);170    display: flex;171    align-items: center;172    justify-content: center;173  }174 175  /* Ad banner */176  .ad-bar {177    position: absolute;178    left: 0;179    right: 0;180    bottom: 170px;181    height: 184px;182    background: #1a1a1a;183    border-top: 8px solid #d85560;184    display: flex;185    align-items: center;186    padding: 24px 28px;187    gap: 26px;188  }189  .ad-image {190    width: 130px; height: 130px;191    background: #E0E0E0;192    border: 1px solid #BDBDBD;193    color: #757575;194    display: flex; align-items: center; justify-content: center;195    border-radius: 20px;196    font-size: 22px;197    text-align: center;198    padding: 6px;199  }200  .ad-text { color: #f2f2f2; }201  .ad-title { font-size: 40px; margin-top: 6px; }202  .ad-sub { font-size: 26px; color: #bdbdbd; }203  .ad-get {204    margin-left: auto;205    background: #3f8b5e;206    color: #fff;207    border-radius: 18px;208    padding: 18px 34px;209    font-size: 36px;210  }211 212  /* Home indicator */213  .home-indicator {214    position: absolute;215    bottom: 52px;216    left: 50%;217    transform: translateX(-50%);218    width: 240px;219    height: 12px;220    border-radius: 6px;221    background: rgba(255,255,255,0.8);222  }223</style>224</head>225<body>226<div id="render-target">227  <div class="header-gradient"></div>228 229  <div class="status-time">5:17</div>230 231  <div class="status-icons">232    <!-- WiFi -->233    <svg width="40" height="40" viewBox="0 0 40 40">234      <path d="M5 16c7-6 23-6 30 0" />235      <path d="M10 22c5-4 15-4 20 0" />236      <path d="M15 28c3-2 7-2 10 0" />237      <circle cx="20" cy="32" r="2" fill="#fff" stroke="none"/>238    </svg>239    <!-- Battery -->240    <svg width="46" height="40" viewBox="0 0 46 40">241      <rect x="3" y="10" width="32" height="20" rx="3" />242      <rect x="37" y="15" width="6" height="10" rx="2" />243      <rect x="6" y="13" width="26" height="14" fill="#fff" stroke="none"/>244    </svg>245    <!-- Moon -->246    <svg width="40" height="40" viewBox="0 0 40 40">247      <path d="M24 4a12 12 0 1 0 12 12 12 12 0 0 1-12-12z" stroke="#fff" fill="none"/>248    </svg>249    <!-- Gear (simple) -->250    <svg width="40" height="40" viewBox="0 0 40 40">251      <circle cx="20" cy="20" r="6"/>252      <path d="M20 6v6M20 28v6M6 20h6M28 20h6M9 9l4 4M27 27l4 4M31 9l-4 4M9 31l4-4"/>253    </svg>254  </div>255 256  <div class="title-row">257    <div class="hamburger">258      <svg width="54" height="54" viewBox="0 0 54 54">259        <path d="M8 14h38M8 27h38M8 40h38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>260      </svg>261    </div>262    <div class="app-title">The Clock</div>263  </div>264 265  <div class="tabs">266    <div class="tab">267      <svg width="44" height="44" viewBox="0 0 44 44">268        <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="3" fill="none"/>269        <path d="M22 16v8M22 22h6" stroke="#fff" stroke-width="3" stroke-linecap="round"/>270      </svg>271      <div class="label">Alarms</div>272    </div>273    <div class="tab">274      <svg width="44" height="44" viewBox="0 0 44 44">275        <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="3" fill="none"/>276        <path d="M22 14v8M22 22h8" stroke="#fff" stroke-width="3" stroke-linecap="round"/>277      </svg>278      <div class="label">Clock</div>279    </div>280    <div class="tab active">281      <svg width="44" height="44" viewBox="0 0 44 44">282        <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="3" fill="none"/>283        <path d="M22 16v10M22 22h6" stroke="#fff" stroke-width="3" stroke-linecap="round"/>284      </svg>285      <div class="label">Timer</div>286    </div>287    <div class="tab">288      <svg width="44" height="44" viewBox="0 0 44 44">289        <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="3" fill="none"/>290        <rect x="20" y="12" width="4" height="4" fill="#fff" stroke="none"/>291      </svg>292      <div class="label">Stopwatch</div>293    </div>294  </div>295  <div class="active-underline"></div>296 297  <div class="timer-display">298    <div class="time-block">299      <div class="time-value">00</div>300      <div class="time-unit">hour</div>301    </div>302    <div class="time-block">303      <div class="time-value red">05</div>304      <div class="time-unit">min</div>305    </div>306    <div class="time-block">307      <div class="time-value">00</div>308      <div class="time-unit">sec</div>309    </div>310  </div>311 312  <div class="keypad">313    <div class="key-col">314      <div class="pill">1</div>315      <div class="pill">4</div>316      <div class="pill">7</div>317      <div class="pill dim">CLEAR</div>318    </div>319    <div class="key-col">320      <div class="pill">2</div>321      <div class="pill">5</div>322      <div class="pill">8</div>323      <div class="pill">0</div>324    </div>325    <div class="key-col">326      <div class="pill">3</div>327      <div class="pill">6</div>328      <div class="pill">9</div>329      <div class="pill dim">RESET</div>330    </div>331  </div>332 333  <div class="set-btn">SET</div>334 335  <div class="floating-btn">336    <svg width="60" height="80" viewBox="0 0 60 80">337      <polygon points="30,16 16,32 44,32" fill="#fff"/>338      <polygon points="30,64 16,48 44,48" fill="#fff"/>339    </svg>340  </div>341 342  <div class="ad-bar">343    <div class="ad-image">[IMG: Fishdom Icon]</div>344    <div class="ad-text">345      <div class="ad-sub">Play Store</div>346      <div class="ad-title">Fishdom</div>347    </div>348    <div class="ad-get">GET</div>349  </div>350 351  <div class="home-indicator"></div>352</div>353</body>354</html>