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 UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20    border-radius: 24px;21  }22 23  /* Background hint pattern */24  .bg-pattern {25    position: absolute;26    inset: 0;27    background: radial-gradient(transparent 60%, rgba(255,255,255,0.03) 61%) 0 0/140px 140px,28                linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.0));29    opacity: 0.25;30  }31 32  /* Page title */33  .page-title {34    position: absolute;35    top: 230px;36    left: 40px;37    font-size: 64px;38    font-weight: 700;39    color: #B3BDC6;40    letter-spacing: 0.5px;41  }42 43  /* Dialog card */44  .dialog {45    position: absolute;46    left: 40px;47    right: 40px;48    top: 550px;49    height: 980px;50    background: #2E3942;51    border-radius: 28px;52    box-shadow: 0 18px 40px rgba(0,0,0,0.55);53    color: #FFFFFF;54    overflow: hidden;55  }56  .dialog-header {57    height: 130px;58    padding: 26px 32px;59    background: linear-gradient(90deg, #D8DDE0 0%, #8D949B 45%, #3A4450 100%);60    color: #1D2329;61    font-size: 48px;62    font-weight: 700;63    border-top-left-radius: 28px;64    border-top-right-radius: 28px;65  }66 67  .content {68    padding: 24px 40px 32px 40px;69  }70 71  .columns {72    display: grid;73    grid-template-columns: 1fr 1fr 1fr;74    gap: 40px;75    margin-top: 24px;76  }77  .col-title {78    text-align: center;79    font-size: 34px;80    font-weight: 700;81    color: #FFFFFF;82    margin-bottom: 10px;83  }84  .col-sub {85    text-align: center;86    font-size: 34px;87    color: #96A0A9;88  }89  .lineRow {90    display: grid;91    grid-template-columns: 1fr 1fr 1fr;92    gap: 40px;93    margin-top: 46px;94  }95  .line {96    height: 2px;97    background: #B0B7BE;98    opacity: 0.6;99  }100 101  .valueRow {102    display: grid;103    grid-template-columns: 1fr 50px 1fr 50px 1fr;104    align-items: center;105    margin-top: 30px;106  }107  .value {108    text-align: center;109    font-size: 44px;110    font-weight: 700;111    color: #FFFFFF;112  }113  .colon {114    text-align: center;115    font-size: 44px;116    color: #AAB2B9;117    font-weight: 700;118  }119 120  .bottomNums {121    display: grid;122    grid-template-columns: 1fr 1fr 1fr;123    gap: 40px;124    margin-top: 30px;125  }126  .numSmall {127    text-align: center;128    font-size: 30px;129    color: #85909A;130  }131 132  .labelRow {133    display: flex;134    align-items: center;135    margin-top: 42px;136    gap: 16px;137  }138  .labelRow .label {139    font-size: 36px;140    font-weight: 800;141    color: #FFFFFF;142  }143  .labelRow .valueLabel {144    font-size: 36px;145    color: #B9C0C6;146    position: relative;147    padding-bottom: 6px;148  }149  .labelRow .valueLabel::after {150    content: "";151    position: absolute;152    left: 0;153    right: 0;154    bottom: 0;155    height: 6px;156    background: #F4A11A;157    border-radius: 3px;158  }159 160  .actions {161    position: absolute;162    left: 40px;163    right: 40px;164    bottom: 36px;165    display: flex;166    align-items: center;167    justify-content: space-between;168    color: #FFFFFF;169    font-size: 36px;170    font-weight: 800;171    letter-spacing: 1px;172  }173  .actions .right {174    display: flex;175    gap: 80px;176  }177 178  /* Floating Action Button */179  .fab {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 420px;184    width: 180px;185    height: 180px;186    background: #7A5A1A;187    border-radius: 50%;188    box-shadow: 0 12px 22px rgba(0,0,0,0.5);189    display: flex;190    align-items: center;191    justify-content: center;192  }193  .fab svg {194    width: 90px;195    height: 90px;196  }197  .fab svg .icon {198    fill: none;199    stroke: #EAD9B5;200    stroke-width: 12;201    stroke-linecap: round;202    stroke-linejoin: round;203  }204  .fab svg .plus {205    fill: none;206    stroke: #EAD9B5;207    stroke-width: 12;208  }209 210  /* Bottom navigation */211  .bottom-nav {212    position: absolute;213    left: 20px;214    right: 20px;215    bottom: 120px;216    height: 200px;217    background: #12161A;218    border-radius: 40px;219    box-shadow: 0 -8px 30px rgba(0,0,0,0.6);220    display: flex;221    align-items: center;222    justify-content: space-around;223    color: #A4ABB2;224  }225  .nav-item {226    width: 180px;227    display: flex;228    flex-direction: column;229    align-items: center;230    gap: 12px;231  }232  .nav-item svg {233    width: 64px;234    height: 64px;235  }236  .nav-item.active {237    color: #FFFFFF;238  }239  .nav-item.active .label {240    font-weight: 800;241  }242  .label {243    font-size: 32px;244  }245 246  /* Home indicator */247  .home-indicator {248    position: absolute;249    left: 50%;250    transform: translateX(-50%);251    bottom: 40px;252    width: 360px;253    height: 18px;254    background: #FFFFFF;255    opacity: 0.9;256    border-radius: 9px;257  }258</style>259</head>260<body>261<div id="render-target">262  <div class="bg-pattern"></div>263 264  <div class="page-title">Countdown Timer</div>265 266  <div class="dialog">267    <div class="dialog-header">Timer Duration:</div>268    <div class="content">269      <div class="columns">270        <div>271          <div class="col-title">hour</div>272          <div class="col-sub">99</div>273        </div>274        <div>275          <div class="col-title">min</div>276          <div class="col-sub">59</div>277        </div>278        <div>279          <div class="col-title">sec</div>280          <div class="col-sub">59</div>281        </div>282      </div>283 284      <div class="lineRow">285        <div class="line"></div>286        <div class="line"></div>287        <div class="line"></div>288      </div>289 290      <div class="valueRow">291        <div class="value">0</div>292        <div class="colon">:</div>293        <div class="value">0</div>294        <div class="colon">:</div>295        <div class="value">0</div>296      </div>297 298      <div class="bottomNums">299        <div class="numSmall">1</div>300        <div class="numSmall">1</div>301        <div class="numSmall">1</div>302      </div>303 304      <div class="labelRow">305        <div class="label">Label:</div>306        <div class="valueLabel">none</div>307      </div>308    </div>309 310    <div class="actions">311      <div>SETTINGS</div>312      <div class="right">313        <div>CANCEL</div>314        <div>OK</div>315      </div>316    </div>317  </div>318 319  <!-- Floating Action Button -->320  <div class="fab" aria-label="Add Timer">321    <svg viewBox="0 0 100 100">322      <!-- Simple hourglass -->323      <path class="icon" d="M25 18h50M35 18c0 14 30 14 30 28s-30 14-30 28M25 82h50M40 30l20 10M40 70l20-10"/>324      <!-- plus sign -->325      <path class="plus" d="M74 78h16M82 70v16"/>326    </svg>327  </div>328 329  <!-- Bottom Navigation -->330  <div class="bottom-nav">331    <div class="nav-item">332      <svg viewBox="0 0 24 24">333        <circle cx="12" cy="12" r="8" stroke="#8A9198" stroke-width="2" fill="none"/>334        <path d="M12 6v6l4 2" stroke="#8A9198" stroke-width="2" fill="none" stroke-linecap="round"/>335      </svg>336      <div class="label">Alarm</div>337    </div>338    <div class="nav-item active">339      <svg viewBox="0 0 24 24">340        <path d="M7 5h10M8 5c0 3 8 3 8 6s-8 3-8 6M7 19h10M9 8l6 3M9 16l6-3"341              stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>342      </svg>343      <div class="label">Timer</div>344    </div>345    <div class="nav-item">346      <svg viewBox="0 0 24 24">347        <circle cx="12" cy="13" r="7" stroke="#8A9198" stroke-width="2" fill="none"/>348        <path d="M8 4l2 2M16 4l-2 2" stroke="#8A9198" stroke-width="2" fill="none" stroke-linecap="round"/>349        <path d="M12 10v4l3 2" stroke="#8A9198" stroke-width="2" fill="none" stroke-linecap="round"/>350      </svg>351      <div class="label">Stopwatch</div>352    </div>353    <div class="nav-item">354      <svg viewBox="0 0 24 24">355        <circle cx="12" cy="12" r="8" stroke="#8A9198" stroke-width="2" fill="none"/>356        <path d="M12 8v4h4" stroke="#8A9198" stroke-width="2" fill="none" stroke-linecap="round"/>357      </svg>358      <div class="label">Clock</div>359    </div>360  </div>361 362  <div class="home-indicator"></div>363</div>364</body>365</html>