GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">5<title>ClockBuddy Timer Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #fff;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background:20      repeating-linear-gradient(135deg, #101214 0 120px, #16181b 120px 240px);21  }22 23  /* Status bar */24  .status-bar {25    height: 80px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 34px;31    color: #eaeaea;32    opacity: 0.95;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 18px;38  }39 40  /* Top app bar */41  .app-bar {42    height: 110px;43    padding: 0 32px;44    display: flex;45    align-items: center;46    justify-content: space-between;47  }48  .app-title {49    display: flex;50    align-items: center;51    gap: 24px;52    font-size: 52px;53    font-weight: 700;54    letter-spacing: 0.5px;55  }56  .app-actions {57    display: flex;58    align-items: center;59    gap: 28px;60  }61  .icon-btn {62    width: 56px;63    height: 56px;64  }65 66  /* Tabs */67  .tabs {68    margin-top: 8px;69    padding: 12px 32px 0 32px;70  }71  .tab-row {72    display: grid;73    grid-template-columns: repeat(4, 1fr);74    text-align: center;75    align-items: start;76    gap: 12px;77  }78  .tab {79    color: #cccccc;80    padding-top: 10px;81  }82  .tab .tab-icon {83    width: 68px;84    height: 68px;85    margin: 0 auto 8px auto;86    opacity: 0.95;87  }88  .tab-label {89    font-size: 36px;90  }91  .tab.active {92    color: #ffffff;93    position: relative;94  }95  .tab-underline {96    height: 6px;97    width: 60%;98    background: #d63b4d;99    border-radius: 6px;100    margin: 20px auto 0;101  }102 103  /* Content area */104  .content {105    margin-top: 30px;106    padding: 0 32px;107  }108  .timer-header {109    display: flex;110    align-items: center;111    gap: 18px;112    font-size: 44px;113    color: #ff5c6d;114    font-weight: 700;115  }116  .progress-track {117    margin-top: 22px;118    height: 12px;119    width: 1016px;120    background: #d8d8d8;121    border-radius: 8px;122    overflow: hidden;123  }124  .progress-fill {125    height: 100%;126    width: 140px; /* small progress like screenshot */127    background: #d63b4d;128  }129 130  .timer-row {131    margin-top: 36px;132    display: flex;133    align-items: center;134    justify-content: space-between;135  }136  .timer-left {137    display: flex;138    align-items: center;139    gap: 22px;140  }141  .trash-icon {142    width: 52px;143    height: 52px;144    opacity: 0.85;145  }146  .time-display {147    font-size: 140px;148    font-weight: 700;149    letter-spacing: 6px;150  }151  .timer-actions {152    display: flex;153    align-items: center;154    gap: 26px;155  }156  .circle-btn {157    width: 128px;158    height: 128px;159    background: #ffffff;160    color: #121212;161    border-radius: 50%;162    display: flex;163    align-items: center;164    justify-content: center;165    box-shadow: 0 6px 16px rgba(0,0,0,0.35);166  }167  .circle-btn svg {168    width: 72px;169    height: 72px;170  }171 172  /* Spacer area */173  .spacer {174    height: 1350px;175  }176 177  /* Floating action button */178  .fab {179    position: absolute;180    left: 50%;181    bottom: 300px;182    transform: translateX(-50%);183    width: 160px;184    height: 160px;185    background: #e5485a;186    border-radius: 50%;187    box-shadow: 0 10px 24px rgba(0,0,0,0.45);188    display: flex;189    align-items: center;190    justify-content: center;191  }192  .fab svg {193    width: 96px;194    height: 96px;195    fill: #ffffff;196  }197 198  /* Ad banner placeholder */199  .ad-banner {200    position: absolute;201    bottom: 80px;202    left: 0;203    width: 100%;204    height: 170px;205    background: #E0E0E0;206    border-top: 1px solid #BDBDBD;207    color: #757575;208    display: flex;209    align-items: center;210    justify-content: center;211    font-size: 38px;212  }213 214  /* Simple helpers */215  .muted {216    color: #cfcfcf;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status Bar -->224  <div class="status-bar">225    <div class="status-left">226      <div>10:28</div>227      <!-- status small icons -->228      <svg class="icon-btn" viewBox="0 0 32 32">229        <path fill="#eaeaea" d="M4 18c6-6 18-6 24 0l-3 3c-4-4-14-4-18 0l-3-3z"></path>230        <path fill="#eaeaea" d="M9 23c4-4 10-4 14 0l-3 3c-2-2-6-2-8 0l-3-3z"></path>231        <circle cx="16" cy="28" r="2.2" fill="#eaeaea"></circle>232      </svg>233      <svg class="icon-btn" viewBox="0 0 32 32">234        <rect x="3" y="9" width="24" height="14" rx="2" fill="#eaeaea"></rect>235        <rect x="27" y="13" width="2.5" height="6" fill="#eaeaea"></rect>236      </svg>237    </div>238    <div class="status-right">239      <svg class="icon-btn" viewBox="0 0 32 32">240        <path fill="#eaeaea" d="M20 4c-6 0-11 5-11 11s5 11 11 11c-4 1-9-2-11-6 5 0 10-4 11-9z"></path>241      </svg>242      <svg class="icon-btn" viewBox="0 0 32 32">243        <circle cx="16" cy="16" r="8" fill="none" stroke="#eaeaea" stroke-width="3"></circle>244        <circle cx="16" cy="16" r="3" fill="#eaeaea"></circle>245      </svg>246    </div>247  </div>248 249  <!-- App Bar -->250  <div class="app-bar">251    <div class="app-title">252      <svg class="icon-btn" viewBox="0 0 32 32">253        <rect x="4" y="6" width="24" height="4" fill="#ffffff"></rect>254        <rect x="4" y="14" width="24" height="4" fill="#ffffff"></rect>255        <rect x="4" y="22" width="24" height="4" fill="#ffffff"></rect>256      </svg>257      <div>ClockBuddy</div>258    </div>259    <div class="app-actions">260      <svg class="icon-btn" viewBox="0 0 32 32">261        <path fill="#ffffff" d="M16 4l3 4h5l-2 5 4 3-4 3 2 5h-5l-3 4-3-4h-5l2-5-4-3 4-3-2-5h5z"></path>262      </svg>263    </div>264  </div>265 266  <!-- Tabs -->267  <div class="tabs">268    <div class="tab-row">269      <div class="tab">270        <svg class="tab-icon" viewBox="0 0 32 32">271          <path fill="none" stroke="#fff" stroke-width="2.5" d="M16 8c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9z"></path>272          <path fill="#fff" d="M8 8l2-3 3 2-1 2zM22 8l-2-3-3 2 1 2z"></path>273        </svg>274        <div class="tab-label">Alarms</div>275      </div>276      <div class="tab">277        <svg class="tab-icon" viewBox="0 0 32 32">278          <circle cx="16" cy="16" r="11" fill="none" stroke="#fff" stroke-width="2.5"></circle>279          <rect x="15" y="6" width="2" height="10" fill="#fff"></rect>280          <rect x="16" y="16" width="7" height="2" fill="#fff"></rect>281        </svg>282        <div class="tab-label">Clock</div>283      </div>284      <div class="tab active">285        <svg class="tab-icon" viewBox="0 0 32 32">286          <circle cx="16" cy="16" r="11" fill="none" stroke="#fff" stroke-width="2.5"></circle>287          <rect x="15" y="7" width="2" height="12" fill="#fff"></rect>288          <rect x="16" y="16" width="10" height="2" fill="#fff"></rect>289        </svg>290        <div class="tab-label">Timer</div>291        <div class="tab-underline"></div>292      </div>293      <div class="tab">294        <svg class="tab-icon" viewBox="0 0 32 32">295          <circle cx="16" cy="17" r="10" fill="none" stroke="#fff" stroke-width="2.5"></circle>296          <rect x="14" y="5" width="4" height="4" fill="#fff"></rect>297          <rect x="15" y="17" width="6" height="2" fill="#fff"></rect>298        </svg>299        <div class="tab-label">Stopwatch</div>300      </div>301    </div>302  </div>303 304  <!-- Content -->305  <div class="content">306    <div class="timer-header">307      <svg class="icon-btn" viewBox="0 0 32 32">308        <path fill="#ff5c6d" d="M6 24l12-12 4 4-12 12H6v-4z"></path>309      </svg>310      <div>Timer 1</div>311    </div>312 313    <div class="progress-track">314      <div class="progress-fill"></div>315    </div>316 317    <div class="timer-row">318      <div class="timer-left">319        <svg class="trash-icon" viewBox="0 0 32 32">320          <rect x="8" y="11" width="16" height="16" rx="2" fill="#cfcfcf"></rect>321          <rect x="12" y="6" width="8" height="4" fill="#cfcfcf"></rect>322        </svg>323        <div class="time-display">00:09:59</div>324      </div>325      <div class="timer-actions">326        <div class="circle-btn">327          <svg viewBox="0 0 32 32">328            <path fill="#121212" d="M16 6a10 10 0 1 1-9 6h4l-5-5-5 5h4a12 12 0 1 0 11-6z"></path>329          </svg>330        </div>331        <div class="circle-btn">332          <svg viewBox="0 0 32 32">333            <path fill="#121212" d="M10 7l14 9-14 9z"></path>334          </svg>335        </div>336      </div>337    </div>338 339    <div class="spacer"></div>340  </div>341 342  <!-- Floating Action Button -->343  <div class="fab">344    <svg viewBox="0 0 32 32">345      <rect x="14" y="6" width="4" height="20" fill="#fff"></rect>346      <rect x="6" y="14" width="20" height="4" fill="#fff"></rect>347    </svg>348  </div>349 350  <!-- Ad Banner -->351  <div class="ad-banner">[IMG: inDrive Ad Banner]</div>352 353</div>354</body>355</html>