GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>The Clock - Timer</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f0f0f;14    color: #fff;15  }16 17  /* Header with diagonal dark stripes */18  .header {19    position: relative;20    height: 600px;21    padding: 40px 48px 0 48px;22    background:23      repeating-linear-gradient(120deg,#1a1a1a 0,#1a1a1a 140px,#202020 140px,#202020 280px);24    box-shadow: inset 0 -40px 60px rgba(0,0,0,0.6);25  }26 27  /* Status bar */28  .status {29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-size: 40px;33    color: #f1f1f1;34    opacity: 0.95;35  }36  .status .left { display: flex; align-items: center; gap: 16px; }37  .status .right { display: flex; align-items: center; gap: 26px; }38  .status svg { width: 40px; height: 40px; fill: none; stroke: #f1f1f1; stroke-width: 4; }39 40  /* Title row */41  .title-row {42    margin-top: 40px;43    display: flex;44    align-items: center;45    gap: 30px;46  }47  .hamburger {48    width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center;49  }50  .title {51    font-size: 86px;52    font-weight: 600;53    letter-spacing: 1px;54  }55  .gear {56    margin-left: auto;57    font-size: 64px;58    color: #f1f1f1;59    opacity: 0.9;60  }61 62  /* Tabs */63  .tabs {64    margin-top: 50px;65    display: flex;66    align-items: center;67    justify-content: space-between;68    padding: 0 24px;69  }70  .tab {71    width: 240px;72    display: flex;73    flex-direction: column;74    align-items: center;75    gap: 18px;76    color: #eeeeee;77    opacity: 0.95;78  }79  .tab svg { width: 76px; height: 76px; stroke: #fff; stroke-width: 6; fill: none; }80  .tab span {81    font-size: 36px;82    font-weight: 500;83  }84  .tab.active span { color: #ffffff; }85  .tab-underline {86    position: absolute;87    left: 270px; /* under third tab */88    bottom: 0;89    width: 210px;90    height: 8px;91    background: #c84a56;92    border-radius: 6px;93  }94 95  /* Content area (below header) */96  .content {97    position: absolute;98    top: 600px;99    left: 0;100    right: 0;101    bottom: 0;102    padding: 20px 40px 180px 40px;103    background: #0f0f0f;104  }105 106  /* Timer card */107  .timer-card {108    background: #121212;109    border-radius: 24px;110    padding: 40px 36px 48px 36px;111    box-shadow: 0 6px 18px rgba(0,0,0,0.45);112  }113  .timer-header {114    display: flex;115    align-items: center;116    gap: 22px;117    color: #c84a56;118    font-size: 44px;119    font-weight: 600;120  }121  .timer-header svg { width: 44px; height: 44px; stroke: #c84a56; stroke-width: 6; fill: none; }122  .thin-accent {123    margin-top: 22px;124    height: 8px;125    background: #c84a56;126    border-radius: 6px;127    width: 250px;128  }129  .progress {130    margin-top: 28px;131    width: 100%;132    height: 16px;133    background: #dcdcdc;134    border-radius: 10px;135    overflow: hidden;136  }137  .progress .bar {138    width: 28%;139    height: 100%;140    background: #c84a56;141  }142 143  .timer-row {144    margin-top: 40px;145    display: flex;146    align-items: center;147    justify-content: space-between;148  }149  .left-actions {150    display: flex;151    align-items: center;152    gap: 28px;153  }154  .trash {155    width: 48px; height: 48px;156    stroke: #aaaaaa; fill: none; stroke-width: 6;157    opacity: 0.85;158  }159  .time {160    font-size: 140px;161    font-weight: 700;162    letter-spacing: 6px;163    color: #ffffff;164  }165  .right-actions {166    display: flex;167    align-items: center;168    gap: 34px;169  }170  .circle-btn {171    width: 160px; height: 160px;172    background: #ffffff;173    border-radius: 50%;174    display: flex;175    align-items: center;176    justify-content: center;177    box-shadow: 0 10px 22px rgba(0,0,0,0.35);178  }179  .circle-btn svg { width: 90px; height: 90px; stroke: #111; stroke-width: 8; fill: none; }180 181  /* Floating Add Button */182  .fab {183    position: absolute;184    left: 50%;185    transform: translateX(-50%);186    bottom: 220px;187    width: 170px; height: 170px;188    background: #d84e59;189    border-radius: 50%;190    box-shadow: 0 18px 28px rgba(0,0,0,0.6);191    display: flex; align-items: center; justify-content: center;192  }193  .fab svg { width: 100px; height: 100px; stroke: #fff; stroke-width: 16; }194 195  /* Home indicator */196  .home-indicator {197    position: absolute;198    bottom: 42px;199    left: 50%;200    transform: translateX(-50%);201    width: 520px;202    height: 16px;203    background: #d7d7d7;204    border-radius: 10px;205    opacity: 0.9;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- HEADER -->213  <div class="header">214    <div class="status">215      <div class="left">216        <div>11:09</div>217        <!-- Small time icon -->218        <svg viewBox="0 0 24 24">219          <circle cx="12" cy="12" r="9"></circle>220          <path d="M12 6v6l4 2"></path>221        </svg>222      </div>223      <div class="right">224        <!-- WiFi -->225        <svg viewBox="0 0 24 24">226          <path d="M2 8c5-4 15-4 20 0"></path>227          <path d="M6 12c3-3 9-3 12 0"></path>228          <path d="M10 16c2-2 4-2 6 0"></path>229          <circle cx="12" cy="19" r="1.8" fill="#f1f1f1" stroke="none"></circle>230        </svg>231        <!-- Battery -->232        <svg viewBox="0 0 30 24">233          <rect x="2" y="5" width="22" height="14" rx="2"></rect>234          <rect x="24" y="9" width="4" height="6" rx="1"></rect>235          <rect x="5" y="8" width="16" height="8" fill="#f1f1f1" stroke="none"></rect>236        </svg>237      </div>238    </div>239 240    <div class="title-row">241      <!-- Hamburger -->242      <div class="hamburger">243        <svg viewBox="0 0 32 32">244          <path d="M4 8h24M4 16h24M4 24h24" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"></path>245        </svg>246      </div>247      <div class="title">The Clock</div>248      <div class="gear">⚙</div>249    </div>250 251    <!-- Tabs -->252    <div class="tabs">253      <div class="tab">254        <svg viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="9"></circle>256          <path d="M12 7v5l3 2"></path>257        </svg>258        <span>Alarms</span>259      </div>260      <div class="tab">261        <svg viewBox="0 0 24 24">262          <circle cx="12" cy="12" r="9"></circle>263          <path d="M12 6v6l4 1"></path>264        </svg>265        <span>Clock</span>266      </div>267      <div class="tab active">268        <svg viewBox="0 0 24 24">269          <circle cx="12" cy="12" r="9"></circle>270          <path d="M12 6v7l3 2"></path>271        </svg>272        <span>Timer</span>273      </div>274      <div class="tab">275        <svg viewBox="0 0 24 24">276          <circle cx="12" cy="12" r="9"></circle>277          <path d="M12 6v6l4 3"></path>278        </svg>279        <span>Stopwatch</span>280      </div>281    </div>282    <div class="tab-underline"></div>283  </div>284 285  <!-- CONTENT -->286  <div class="content">287    <div class="timer-card">288      <div class="timer-header">289        <!-- pencil/edit -->290        <svg viewBox="0 0 24 24">291          <path d="M4 18l4-1 9-9-3-3-9 9-1 4z"></path>292        </svg>293        <div>Timer 1</div>294      </div>295      <div class="thin-accent"></div>296 297      <div class="progress">298        <div class="bar"></div>299      </div>300 301      <div class="timer-row">302        <div class="left-actions">303          <!-- trash -->304          <svg class="trash" viewBox="0 0 24 24">305            <path d="M4 7h16"></path>306            <path d="M9 7V5h6v2"></path>307            <path d="M6 7l1 12h10l1-12"></path>308          </svg>309          <div class="time">00:03:04</div>310        </div>311 312        <div class="right-actions">313          <!-- reset -->314          <div class="circle-btn">315            <svg viewBox="0 0 24 24">316              <path d="M12 4a8 8 0 1 1-5.66 2.34"></path>317              <path d="M6 6v4h4"></path>318            </svg>319          </div>320          <!-- play -->321          <div class="circle-btn">322            <svg viewBox="0 0 24 24">323              <polygon points="8,6 8,18 18,12" fill="#111"></polygon>324            </svg>325          </div>326        </div>327      </div>328    </div>329  </div>330 331  <!-- Floating Add Button -->332  <div class="fab">333    <svg viewBox="0 0 24 24">334      <path d="M12 5v14M5 12h14" stroke-linecap="round"></path>335    </svg>336  </div>337 338  <!-- Home indicator -->339  <div class="home-indicator"></div>340 341</div>342</body>343</html>