GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Timer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #fff; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #222629;15  }16 17  /* Top status bar */18  .status-bar {19    height: 120px;20    background: #0b66cf;21    color: #ffffff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-size: 46px;26    letter-spacing: 0.5px;27  }28  .status-right {29    margin-left: auto;30    display: flex;31    gap: 26px;32    align-items: center;33  }34  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 5; }35 36  /* Ad banner placeholder */37  .ad-top {38    height: 170px;39    background: #E0E0E0;40    border-bottom: 1px solid #BDBDBD;41    display: flex;42    align-items: center;43    padding: 0 24px;44    color: #757575;45    font-size: 40px;46  }47  .ad-img {48    width: 200px;49    height: 120px;50    background: #E0E0E0;51    border: 1px solid #BDBDBD;52    display: flex;53    justify-content: center;54    align-items: center;55    color: #757575;56    margin-right: 24px;57  }58  .ad-cta {59    margin-left: auto;60    background: #f5932e;61    color: #fff;62    padding: 24px 36px;63    border-radius: 8px;64    font-weight: bold;65  }66 67  /* App header */68  .app-header {69    height: 150px;70    background: #0b66cf;71    display: flex;72    align-items: center;73    padding: 0 32px;74  }75  .header-title {76    font-size: 64px;77    font-weight: 600;78    margin-left: 24px;79  }80  .header-actions {81    margin-left: auto;82    display: flex;83    gap: 36px;84    padding-right: 16px;85  }86  .hdr-icon svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 5; }87 88  /* Main content */89  .content {90    position: absolute;91    top: 440px; /* below top bars */92    left: 0;93    right: 0;94    bottom: 330px; /* above bottom nav */95    padding: 24px 60px;96  }97  .title-row {98    display: flex;99    align-items: center;100    margin-top: 10px;101    margin-bottom: 20px;102  }103  .screen-title {104    font-size: 72px;105    color: #1e7cf9;106    font-weight: 600;107  }108  .close-btn {109    margin-left: auto;110    width: 60px;111    height: 60px;112  }113  .close-btn svg { width: 60px; height: 60px; stroke: #9ea3a8; stroke-width: 6; }114 115  /* Progress circle */116  .progress-wrap {117    width: 860px;118    height: 860px;119    margin: 40px auto 0;120    position: relative;121    display: flex;122    align-items: center;123    justify-content: center;124  }125  .progress-ring {126    width: 860px;127    height: 860px;128    border-radius: 50%;129    background:130      conic-gradient(#bfc3c7 0deg 28deg, #1376ff 28deg 360deg);131    position: relative;132  }133  .progress-ring::after {134    content: "";135    position: absolute;136    inset: 24px;137    background: #222629;138    border-radius: 50%;139  }140  .time-text {141    position: absolute;142    font-size: 120px;143    font-weight: 600;144    color: #ffffff;145  }146 147  /* Controls row */148  .controls {149    width: 100%;150    margin-top: 80px;151    display: grid;152    grid-template-columns: 1fr 1fr 1fr;153    align-items: center;154    text-align: center;155    color: #c9c9c9;156    font-size: 40px;157  }158  .ctrl-icon svg { width: 72px; height: 72px; stroke: #c9c9c9; stroke-width: 5; fill: none; }159  .pause-btn {160    width: 180px;161    height: 180px;162    background: #1376ff;163    border-radius: 50%;164    margin: 0 auto 12px;165    display: flex;166    align-items: center;167    justify-content: center;168  }169  .pause-btn svg { width: 72px; height: 72px; fill: #fff; }170 171  /* Bottom ad */172  .ad-bottom {173    position: absolute;174    left: 20px;175    right: 20px;176    bottom: 230px;177    height: 180px;178    background: #E0E0E0;179    border: 1px solid #BDBDBD;180    display: flex;181    align-items: center;182    padding: 0 24px;183    color: #757575;184    font-size: 40px;185    gap: 24px;186  }187  .ad-thumb {188    width: 220px;189    height: 140px;190    background: #E0E0E0;191    border: 1px solid #BDBDBD;192    display: flex;193    justify-content: center;194    align-items: center;195    color: #757575;196  }197  .ad-open {198    margin-left: auto;199    background: #4a4a4a;200    color: #fff;201    padding: 22px 44px;202    border-radius: 8px;203  }204 205  /* Bottom nav */206  .bottom-nav {207    position: absolute;208    left: 0;209    right: 0;210    bottom: 70px;211    height: 160px;212    background: #2a2e31;213    border-top: 1px solid #3a3f43;214    display: flex;215    align-items: center;216    justify-content: space-around;217    color: #c9c9c9;218    font-size: 36px;219  }220  .nav-item {221    display: flex;222    flex-direction: column;223    align-items: center;224    gap: 12px;225  }226  .nav-item svg { width: 60px; height: 60px; stroke: #c9c9c9; stroke-width: 5; fill: none; }227  .nav-item.active svg { stroke: #1e7cf9; }228  .nav-item.active .label { color: #1e7cf9; }229 230  /* Home indicator */231  .home-indicator {232    position: absolute;233    bottom: 20px;234    left: 50%;235    transform: translateX(-50%);236    width: 280px;237    height: 12px;238    background: #ffffff;239    opacity: 0.9;240    border-radius: 8px;241  }242</style>243</head>244<body>245<div id="render-target">246  <!-- Status bar -->247  <div class="status-bar">248    <div>3:04</div>249    <div class="status-right">250      <span class="status-icon">251        <svg viewBox="0 0 24 24"><path d="M2 6h20M2 12h20M2 18h20"/></svg>252      </span>253      <span class="status-icon">254        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="7" height="7"/><rect x="14" y="4" width="7" height="7"/><rect x="3" y="15" width="7" height="7"/><rect x="14" y="15" width="7" height="7"/></svg>255      </span>256      <span class="status-icon">257        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/><circle cx="6" cy="12" r="1.5"/></svg>258      </span>259      <span class="status-icon">260        <svg viewBox="0 0 24 24"><path d="M21 10l-3-3M21 10l-3 3M3 12h12"/></svg>261      </span>262      <span class="status-icon">263        <svg viewBox="0 0 24 24"><path d="M6 20h12l2-8H4l2 8zM9 4h6l1 8H8l1-8z"/></svg>264      </span>265    </div>266  </div>267 268  <!-- Top ad banner -->269  <div class="ad-top">270    <div class="ad-img">[IMG: Ad - Colours by Kohler]</div>271    <div>Colours by Kohler — Ad text placeholder describing the promotion</div>272    <div class="ad-cta">Know more!</div>273  </div>274 275  <!-- App header -->276  <div class="app-header">277    <!-- Hex icon -->278    <div class="hdr-icon">279      <svg viewBox="0 0 24 24"><path d="M7 3l10 0 5 9-5 9H7L2 12 7 3z"/></svg>280    </div>281    <div class="header-title">Timer</div>282    <div class="header-actions">283      <div class="hdr-icon">284        <svg viewBox="0 0 24 24"><path d="M12 3l5 9-5 9-5-9 5-9z"/></svg>285      </div>286      <div class="hdr-icon">287        <svg viewBox="0 0 24 24"><path d="M17 4a7 7 0 1 1-6 12c4 0 7-3 7-12z"/></svg>288      </div>289    </div>290  </div>291 292  <!-- Main content area -->293  <div class="content">294    <div class="title-row">295      <div class="screen-title">Countdown Timer</div>296      <div class="close-btn">297        <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20" stroke-linecap="round"/></svg>298      </div>299    </div>300 301    <div class="progress-wrap">302      <div class="progress-ring"></div>303      <div class="time-text">50:40.44</div>304    </div>305 306    <div class="controls">307      <div class="ctrl">308        <div class="ctrl-icon">309          <svg viewBox="0 0 24 24"><path d="M7 6h7l-2-2M7 18h7l-2 2M4 12a8 8 0 0 1 16 0"/></svg>310        </div>311        <div>Repeat</div>312      </div>313      <div class="ctrl">314        <div class="pause-btn">315          <svg viewBox="0 0 24 24"><rect x="5" y="4" width="5" height="16"/><rect x="14" y="4" width="5" height="16"/></svg>316        </div>317      </div>318      <div class="ctrl">319        <div class="ctrl-icon">320          <svg viewBox="0 0 24 24"><path d="M6 9v3l-2 2h16l-2-2V9l-3-3H9L6 9z"/><path d="M9 18h6"/></svg>321        </div>322        <div>Vibrate</div>323      </div>324    </div>325  </div>326 327  <!-- Bottom ad placeholder -->328  <div class="ad-bottom">329    <div class="ad-thumb">[IMG: Ad Image]</div>330    <div>Treat International Spa — Certified</div>331    <div class="ad-open">Open</div>332  </div>333 334  <!-- Bottom navigation -->335  <div class="bottom-nav">336    <div class="nav-item">337      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M4 12h16M12 4v16"/></svg>338      <div class="label">World Clock</div>339    </div>340    <div class="nav-item">341      <svg viewBox="0 0 24 24"><path d="M7 6h10l1 3v8H6V9l1-3z"/><path d="M12 11v4"/></svg>342      <div class="label">Alarm</div>343    </div>344    <div class="nav-item active">345      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M8 5l2-2M16 5l-2-2M12 8v6"/></svg>346      <div class="label">Timer</div>347    </div>348    <div class="nav-item">349      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l4 2"/></svg>350      <div class="label">Stop Watch</div>351    </div>352  </div>353 354  <div class="home-indicator"></div>355</div>356</body>357</html>