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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0f0f0f;15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Top decorative hero */20  .hero {21    position: relative;22    height: 430px;23    background:24      linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.25)),25      repeating-linear-gradient(-25deg, #1b1b1b 0 70px, #111 70px 140px);26    padding: 24px 36px 0 36px;27    box-sizing: border-box;28  }29 30  /* Status bar */31  .status {32    display: flex;33    justify-content: space-between;34    align-items: center;35    height: 68px;36    font-size: 34px;37    opacity: 0.95;38  }39  .status .right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .icon {45    width: 40px; height: 40px; display: inline-block;46  }47 48  /* App bar */49  .appbar {50    display: flex;51    align-items: center;52    margin-top: 22px;53    gap: 22px;54  }55  .title {56    font-size: 64px;57    font-weight: 600;58    letter-spacing: 0.2px;59  }60  .appbar .spacer { flex: 1; }61  .appbar .right-icons { display: flex; gap: 26px; align-items: center; }62 63  /* Tabs */64  .tabs {65    display: flex;66    justify-content: space-around;67    margin-top: 44px;68    padding: 0 26px;69  }70  .tab {71    text-align: center;72    color: #eaeaea;73    opacity: 0.95;74  }75  .tab svg { width: 70px; height: 70px; }76  .tab .label {77    margin-top: 8px;78    font-size: 34px;79  }80  .tab.active .label { color: #ffffff; }81  .tab.active .underline {82    width: 210px;83    height: 6px;84    background: #d24e56;85    margin: 18px auto 0;86    border-radius: 3px;87  }88  .tab .underline { height: 6px; margin-top: 24px; }89 90  /* Content area */91  .content {92    padding: 24px 32px 0 32px;93  }94 95  .timer-card {96    margin-top: 34px;97    background: #121212;98    border-radius: 26px;99    padding: 16px 16px 26px 16px;100  }101 102  .timer-header {103    display: flex;104    align-items: center;105    gap: 18px;106    color: #ff6d75;107    font-size: 44px;108    font-weight: 600;109    padding: 18px 18px 10px;110  }111 112  .progress {113    height: 12px;114    background: #cfcfcf;115    border-radius: 8px;116    overflow: hidden;117    margin: 14px 18px 0;118  }119  .progress .bar {120    width: 90px; /* small left progress */121    height: 100%;122    background: #d24e56;123  }124 125  .timer-row {126    display: flex;127    align-items: center;128    justify-content: space-between;129    padding: 28px 18px 10px 18px;130  }131  .timer-left {132    display: flex;133    align-items: center;134    gap: 24px;135  }136  .time-display {137    font-size: 140px;138    font-weight: 600;139    letter-spacing: 4px;140    color: #eeeeee;141  }142  .pause-btn {143    width: 164px;144    height: 164px;145    background: #ffffff;146    color: #111;147    border-radius: 50%;148    display: flex;149    align-items: center;150    justify-content: center;151    box-shadow: 0 8px 18px rgba(0,0,0,0.5);152  }153  .pause-btn svg { width: 64px; height: 64px; }154 155  /* Floating action button */156  .fab {157    position: absolute;158    left: 50%;159    transform: translateX(-50%);160    top: 1540px;161    width: 160px;162    height: 160px;163    background: #d24e56;164    border-radius: 50%;165    display: flex;166    align-items: center;167    justify-content: center;168    box-shadow: 0 14px 24px rgba(0,0,0,0.6);169  }170  .fab svg { width: 84px; height: 84px; color: #fff; }171 172  /* Home indicator */173  .home-indicator {174    position: absolute;175    left: 50%;176    bottom: 36px;177    transform: translateX(-50%);178    width: 520px;179    height: 12px;180    background: #D8D8D8;181    border-radius: 8px;182    opacity: 0.95;183  }184 185  /* Helper icon colors */186  .muted { opacity: 0.7; }187  .muted-strong { opacity: 0.9; }188</style>189</head>190<body>191<div id="render-target">192 193  <div class="hero">194    <!-- Status bar -->195    <div class="status">196      <div>11:08</div>197      <div class="right">198        <!-- WiFi -->199        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">200          <path d="M2 8c5-4 15-4 20 0"/>201          <path d="M5 12c3-3 11-3 14 0"/>202          <path d="M8 16c2-2 6-2 8 0"/>203          <circle cx="12" cy="19" r="1.6" fill="#fff" stroke="none"/>204        </svg>205        <!-- Battery -->206        <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">207          <rect x="2" y="6" width="20" height="12" rx="2"/>208          <rect x="23" y="9" width="3" height="6" rx="1"/>209          <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"/>210        </svg>211      </div>212    </div>213 214    <!-- App bar -->215    <div class="appbar">216      <!-- Hamburger -->217      <svg class="icon" viewBox="0 0 24 24" fill="#fff">218        <rect x="3" y="5" width="18" height="2" rx="1"></rect>219        <rect x="3" y="11" width="18" height="2" rx="1"></rect>220        <rect x="3" y="17" width="18" height="2" rx="1"></rect>221      </svg>222      <div class="title">The Clock</div>223      <div class="spacer"></div>224      <div class="right-icons">225        <!-- Crescent (Do Not Disturb) -->226        <svg class="icon" viewBox="0 0 24 24" fill="#fff">227          <path d="M16.5 3.5a9 9 0 1 0 4 16.5 8 8 0 1 1-4-16.5z"></path>228        </svg>229        <!-- Settings -->230        <svg class="icon" viewBox="0 0 24 24" fill="#fff">231          <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z"></path>232          <path d="M4 13.2v-2.4l2.4-.6a6.5 6.5 0 0 1 1-1.8L6.6 6l1.7-1.7L10 5.4a6.5 6.5 0 0 1 1.8-1l.6-2.4h2.4l.6 2.4a6.5 6.5 0 0 1 1.8 1l1.7-1.7L21.4 6l-1.4 2.4c.38.56.7 1.16 1 1.8l2.4.6v2.4l-2.4.6a6.5 6.5 0 0 1-1 1.8l1.4 2.4-1.7 1.7-2.4-1.4a6.5 6.5 0 0 1-1.8 1l-.6 2.4h-2.4l-.6-2.4a6.5 6.5 0 0 1-1.8-1l-2.4 1.4L6.6 18l1.4-2.4a6.5 6.5 0 0 1-1-1.8z" opacity="0.9"></path>233        </svg>234      </div>235    </div>236 237    <!-- Tabs -->238    <div class="tabs">239      <div class="tab">240        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">241          <circle cx="12" cy="13" r="6"></circle>242          <path d="M8 2l2 3M16 2l-2 3"></path>243          <path d="M12 13V9M12 13l3 3"></path>244        </svg>245        <div class="label">Alarms</div>246        <div class="underline" style="background: transparent;"></div>247      </div>248      <div class="tab">249        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">250          <circle cx="12" cy="12" r="8"></circle>251          <path d="M12 7v6l4 2"></path>252        </svg>253        <div class="label">Clock</div>254        <div class="underline" style="background: transparent;"></div>255      </div>256      <div class="tab active">257        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">258          <circle cx="12" cy="12" r="6"></circle>259          <rect x="10.5" y="3" width="3" height="2" rx="1"></rect>260        </svg>261        <div class="label">Timer</div>262        <div class="underline"></div>263      </div>264      <div class="tab">265        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">266          <circle cx="12" cy="12" r="8"></circle>267          <path d="M8 4h8M12 8v8"></path>268        </svg>269        <div class="label">Stopwatch</div>270        <div class="underline" style="background: transparent;"></div>271      </div>272    </div>273  </div>274 275  <!-- Content -->276  <div class="content">277    <div class="timer-card">278      <div class="timer-header">279        <!-- Pencil icon -->280        <svg class="icon" viewBox="0 0 24 24" fill="#d24e56">281          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>282          <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>283        </svg>284        <div>Timer 1</div>285      </div>286 287      <div class="progress">288        <div class="bar"></div>289      </div>290 291      <div class="timer-row">292        <div class="timer-left">293          <!-- Trash -->294          <svg class="icon muted" viewBox="0 0 24 24" fill="#cfcfcf">295            <path d="M6 7h12l-1 14H7L6 7z"></path>296            <path d="M9 7V5h6v2M4 7h16"></path>297          </svg>298          <div class="time-display">00:03:51</div>299        </div>300        <div class="pause-btn">301          <svg viewBox="0 0 24 24" fill="#111">302            <rect x="6" y="5" width="4" height="14" rx="1"></rect>303            <rect x="14" y="5" width="4" height="14" rx="1"></rect>304          </svg>305        </div>306      </div>307    </div>308  </div>309 310  <!-- Floating add button -->311  <div class="fab">312    <svg viewBox="0 0 24 24" fill="#fff">313      <path d="M11 5h2v14h-2zM5 11h14v2H5z"></path>314    </svg>315  </div>316 317  <!-- Home indicator -->318  <div class="home-indicator"></div>319</div>320</body>321</html>