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>The Clock - Timer</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", "Segoe UI", Arial, sans-serif;13    color: #fff;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #111213;21  }22 23  /* Top decorative hero */24  .top-hero {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 420px;30    background:31      repeating-linear-gradient(135deg,32        #1a1b1d 0px, #1a1b1d 120px,33        #202225 120px, #202225 240px);34    box-shadow: inset 0 -120px 120px rgba(0,0,0,0.4);35  }36 37  /* Status bar */38  .status {39    position: absolute;40    top: 18px;41    left: 36px;42    right: 36px;43    height: 40px;44    display: flex;45    align-items: center;46    justify-content: space-between;47    color: #eaeaea;48    font-size: 30px;49    letter-spacing: 0.5px;50  }51  .status .icons {52    display: flex;53    align-items: center;54    gap: 22px;55    opacity: 0.85;56  }57  .status svg {58    width: 28px;59    height: 28px;60    fill: none;61    stroke: #eaeaea;62    stroke-width: 2.5;63  }64 65  /* Header row */66  .header {67    position: absolute;68    top: 86px;69    left: 36px;70    right: 36px;71    height: 84px;72    display: flex;73    align-items: center;74    gap: 26px;75  }76  .hamburger {77    width: 64px;78    height: 64px;79    display: grid;80    place-items: center;81  }82  .title {83    font-size: 64px;84    font-weight: 500;85    letter-spacing: 0.5px;86  }87  .header-right {88    margin-left: auto;89    display: flex;90    align-items: center;91    gap: 28px;92  }93  .header-right .icon-btn {94    width: 64px;95    height: 64px;96    display: grid;97    place-items: center;98    opacity: 0.9;99  }100  .icon-btn svg {101    width: 42px;102    height: 42px;103    stroke: #f7f7f7;104    fill: none;105    stroke-width: 2.5;106  }107 108  /* Tabs */109  .tabs {110    position: absolute;111    top: 190px;112    left: 0;113    width: 1080px;114    height: 190px;115    display: grid;116    grid-template-columns: repeat(4, 1fr);117    align-items: end;118    padding: 0 36px;119    box-sizing: border-box;120  }121  .tab {122    text-align: center;123    color: #eaeaea;124  }125  .tab .tab-icon {126    width: 80px;127    height: 80px;128    margin: 0 auto 8px;129    display: grid;130    place-items: center;131    opacity: 0.95;132  }133  .tab .label {134    font-size: 36px;135    color: #ddd;136  }137  .tab.active .label {138    color: #fff;139    font-weight: 500;140  }141  .tab-underline {142    position: absolute;143    bottom: 0;144    left: 0;145    width: 1080px;146    height: 8px;147    background: transparent;148  }149  .tab-underline .line {150    position: absolute;151    bottom: 0;152    height: 6px;153    width: 180px;154    background: #d54a5c;155    left: calc(36px + (1080px - 72px) / 4 * 2); /* underline under "Timer" column */156    border-radius: 3px;157  }158 159  /* Timer area */160  .content {161    position: absolute;162    top: 380px;163    left: 0;164    right: 0;165    bottom: 0;166    background: #0f1011;167  }168 169  .timer-card {170    margin: 36px;171    padding-top: 12px;172  }173  .timer-header {174    display: flex;175    align-items: center;176    gap: 18px;177    font-size: 40px;178    color: #f07183;179    font-weight: 500;180  }181  .timer-header .edit-icon {182    width: 40px;183    height: 40px;184    display: grid;185    place-items: center;186  }187  .mini-progress-track {188    margin-top: 18px;189    width: 100%;190    height: 12px;191    background: #2c2c2c;192    border-radius: 6px;193    overflow: hidden;194  }195  .mini-progress-fill {196    width: 160px; /* small progress */197    height: 100%;198    background: #d54a5c;199    border-radius: 6px;200  }201 202  .main-progress-track {203    margin-top: 22px;204    width: 100%;205    height: 16px;206    background: #d9d9d9;207    border-radius: 8px;208  }209 210  .timer-row {211    margin-top: 36px;212    display: flex;213    align-items: center;214    justify-content: space-between;215  }216  .trash-time {217    display: flex;218    align-items: center;219    gap: 26px;220  }221  .trash {222    width: 48px;223    height: 48px;224    display: grid;225    place-items: center;226    opacity: 0.6;227  }228  .time-display {229    font-size: 120px;230    letter-spacing: 2px;231    color: #f2f2f2;232    font-weight: 500;233  }234  .pause-btn {235    width: 150px;236    height: 150px;237    background: #f4f4f4;238    border-radius: 50%;239    display: grid;240    place-items: center;241    box-shadow: 0 6px 16px rgba(0,0,0,0.35);242    margin-right: 16px;243  }244  .pause-btn svg {245    width: 54px;246    height: 54px;247    fill: #222;248  }249 250  /* Floating action button */251  .fab {252    position: absolute;253    bottom: 520px;254    left: 50%;255    transform: translateX(-50%);256    width: 140px;257    height: 140px;258    background: #d54a5c;259    border-radius: 50%;260    display: grid;261    place-items: center;262    box-shadow: 0 16px 26px rgba(0,0,0,0.45);263  }264  .fab svg {265    width: 72px;266    height: 72px;267    fill: none;268    stroke: #fff;269    stroke-width: 16;270    stroke-linecap: round;271  }272 273  /* Bottom ad placeholder */274  .bottom-strip {275    position: absolute;276    bottom: 240px;277    left: 0;278    width: 1080px;279    height: 10px;280    background: #c63e52;281  }282  .ad-container {283    position: absolute;284    bottom: 120px;285    left: 90px;286    width: 900px;287    height: 160px;288    background: #E0E0E0;289    border: 1px solid #BDBDBD;290    display: flex;291    justify-content: center;292    align-items: center;293    color: #757575;294    font-size: 36px;295    border-radius: 6px;296  }297 298  /* Home bar */299  .home-bar {300    position: absolute;301    bottom: 40px;302    left: 50%;303    transform: translateX(-50%);304    width: 320px;305    height: 16px;306    background: #f5f5f5;307    border-radius: 10px;308    opacity: 0.9;309  }310</style>311</head>312<body>313<div id="render-target">314 315  <div class="top-hero"></div>316 317  <!-- Status bar -->318  <div class="status">319    <div class="time">12:11</div>320    <div class="icons">321      <!-- dot, vibration, tasks etc simplified -->322      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" /></svg>323      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M8 9h8M8 13h8" /></svg>324      <svg viewBox="0 0 24 24"><path d="M3 13h7v8H3zM14 3h7v18h-7z"></path></svg>325      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"></circle></svg>326      <svg viewBox="0 0 24 24"><path d="M4 18l8-12 8 12"></path></svg>327      <svg viewBox="0 0 24 24"><path d="M6 7l6-4 6 4v10a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4z"></path></svg>328    </div>329  </div>330 331  <!-- Header -->332  <div class="header">333    <div class="hamburger">334      <svg viewBox="0 0 32 32">335        <path d="M4 8h24M4 16h24M4 24h24" stroke="#fff" stroke-width="3" stroke-linecap="round" />336      </svg>337    </div>338    <div class="title">The Clock</div>339    <div class="header-right">340      <div class="icon-btn">341        <!-- crescent/moon -->342        <svg viewBox="0 0 32 32">343          <path d="M22 4a10 10 0 1 0 6 18A12 12 0 1 1 22 4z"></path>344        </svg>345      </div>346      <div class="icon-btn">347        <!-- gear -->348        <svg viewBox="0 0 32 32">349          <circle cx="16" cy="16" r="5"></circle>350          <path d="M16 2v4M16 26v4M2 16h4M26 16h4M6 6l3 3M23 23l3 3M6 26l3-3M23 9l3-3"></path>351        </svg>352      </div>353    </div>354  </div>355 356  <!-- Tabs -->357  <div class="tabs">358    <div class="tab">359      <div class="tab-icon">360        <svg viewBox="0 0 48 48">361          <circle cx="24" cy="26" r="14" stroke="#eee" stroke-width="2.5" fill="none"></circle>362          <path d="M14 10l6 6M34 10l-6 6" stroke="#eee" stroke-width="2.5" stroke-linecap="round"></path>363        </svg>364      </div>365      <div class="label">Alarms</div>366    </div>367    <div class="tab">368      <div class="tab-icon">369        <svg viewBox="0 0 48 48">370          <circle cx="24" cy="24" r="16" stroke="#eee" stroke-width="2.5" fill="none"></circle>371          <path d="M24 24l8-6M24 12v12" stroke="#eee" stroke-width="2.5" stroke-linecap="round"></path>372        </svg>373      </div>374      <div class="label">Clock</div>375    </div>376    <div class="tab active">377      <div class="tab-icon">378        <svg viewBox="0 0 48 48">379          <circle cx="24" cy="26" r="16" stroke="#fff" stroke-width="2.5" fill="none"></circle>380          <rect x="20" y="8" width="8" height="4" fill="#fff"></rect>381        </svg>382      </div>383      <div class="label">Timer</div>384    </div>385    <div class="tab">386      <div class="tab-icon">387        <svg viewBox="0 0 48 48">388          <circle cx="24" cy="24" r="16" stroke="#eee" stroke-width="2.5" fill="none"></circle>389          <rect x="22" y="6" width="4" height="6" fill="#eee"></rect>390        </svg>391      </div>392      <div class="label">Stopwatch</div>393    </div>394    <div class="tab-underline"><div class="line"></div></div>395  </div>396 397  <!-- Main content -->398  <div class="content">399    <div class="timer-card">400      <div class="timer-header">401        <div class="edit-icon">402          <svg viewBox="0 0 24 24">403            <path d="M4 20l4-1 10-10-3-3L5 16l-1 4z" fill="#d54a5c"></path>404          </svg>405        </div>406        <div>Timer 1</div>407      </div>408 409      <div class="mini-progress-track">410        <div class="mini-progress-fill"></div>411      </div>412 413      <div class="main-progress-track"></div>414 415      <div class="timer-row">416        <div class="trash-time">417          <div class="trash">418            <svg viewBox="0 0 28 28">419              <path d="M6 7h16M10 7V5h8v2M8 9v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9" stroke="#bbb" stroke-width="2.5" fill="none" stroke-linecap="round"></path>420            </svg>421          </div>422          <div class="time-display">00:08:59</div>423        </div>424        <div class="pause-btn">425          <svg viewBox="0 0 64 64">426            <rect x="16" y="14" width="10" height="36" rx="2"></rect>427            <rect x="38" y="14" width="10" height="36" rx="2"></rect>428          </svg>429        </div>430      </div>431    </div>432 433    <!-- Floating action button -->434    <div class="fab">435      <svg viewBox="0 0 64 64">436        <path d="M32 16v32M16 32h32"></path>437      </svg>438    </div>439 440    <!-- Bottom ad banner placeholder -->441    <div class="bottom-strip"></div>442    <div class="ad-container">[IMG: Ad Banner]</div>443 444    <!-- Home bar -->445    <div class="home-bar"></div>446  </div>447 448</div>449</body>450</html>