GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Timer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #12161d;14    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 24px;22    left: 24px;23    right: 24px;24    height: 44px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #e5e7eb;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot {38    width: 10px; height: 10px; border-radius: 50%; background: #cfd3da;39  }40  .icon-wifi, .icon-battery, .icon-signal {41    width: 40px; height: 22px;42  }43  .icon-wifi svg, .icon-battery svg, .icon-signal svg {44    width: 100%; height: 100%;45  }46 47  /* Header */48  .header-title {49    position: absolute;50    top: 120px;51    left: 52px;52    font-size: 64px;53    font-weight: 600;54    color: #d9dee5;55  }56  .overflow {57    position: absolute;58    top: 138px;59    right: 42px;60    width: 40px; height: 40px;61    display: flex; align-items: center; justify-content: center;62    opacity: 0.8;63  }64 65  /* Time display */66  .time-display {67    position: absolute;68    top: 300px;69    width: 100%;70    display: flex;71    justify-content: center;72    gap: 90px;73    align-items: baseline;74  }75  .time-chunk .number {76    font-size: 160px;77    font-weight: 500;78    line-height: 1;79    letter-spacing: 2px;80  }81  .time-chunk .unit {82    font-size: 60px;83    color: #94a3b8;84    margin-left: 18px;85    position: relative;86    top: -12px;87  }88  .num-grey { color: #8e9197; }89  .num-blue { color: #a8c9ff; }90 91  /* Keypad */92  .keypad {93    position: absolute;94    top: 780px;95    left: 60px;96    right: 60px;97    display: grid;98    grid-template-columns: repeat(3, 1fr);99    gap: 70px;100    justify-items: center;101    align-items: center;102  }103  .key {104    width: 220px;105    height: 220px;106    border-radius: 50%;107    background: #121a21;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #e7edf3;112    font-size: 94px;113    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);114  }115  .key.dim { background: #334151; }116  .key.small { font-size: 80px; }117 118  /* Play button */119  .play-wrap {120    position: absolute;121    top: 1650px;122    width: 100%;123    display: flex;124    justify-content: center;125  }126  .play {127    width: 360px;128    height: 360px;129    border-radius: 50%;130    background: #b9d7ff;131    box-shadow: 0 10px 30px rgba(0,0,0,0.35);132    display: flex;133    align-items: center;134    justify-content: center;135  }136  .play svg { width: 140px; height: 140px; fill: #153a5c; }137 138  /* Bottom navigation */139  .bottom-nav {140    position: absolute;141    bottom: 0;142    left: 0;143    width: 100%;144    height: 280px;145    background: #0f141a;146    border-top: 1px solid rgba(255,255,255,0.08);147    display: flex;148    align-items: center;149    justify-content: space-around;150    padding: 20px 0;151  }152  .nav-item {153    width: 180px;154    display: flex;155    flex-direction: column;156    align-items: center;157    color: #b8c1cc;158    font-size: 40px;159    gap: 18px;160  }161  .nav-icon {162    width: 110px; height: 110px;163    display: flex; align-items: center; justify-content: center;164    border-radius: 24px;165  }166  .selected .nav-icon {167    background: #293a49;168  }169  .selected { color: #a8c9ff; }170  .nav-icon svg { width: 80px; height: 80px; fill: none; stroke: #cfd6de; stroke-width: 6; }171 172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status bar -->178  <div class="status-bar">179    <div>8:59</div>180    <div class="status-icons">181      <div class="icon-signal">182        <svg viewBox="0 0 40 22">183          <rect x="0" y="12" width="6" height="10" fill="#cfd3da"></rect>184          <rect x="10" y="8" width="6" height="14" fill="#cfd3da"></rect>185          <rect x="20" y="4" width="6" height="18" fill="#cfd3da"></rect>186          <rect x="30" y="0" width="6" height="22" fill="#cfd3da"></rect>187        </svg>188      </div>189      <div class="icon-wifi">190        <svg viewBox="0 0 40 22">191          <path d="M2 8 C10 0,30 0,38 8" stroke="#cfd3da" stroke-width="3" fill="none"></path>192          <path d="M7 12 C15 5,25 5,33 12" stroke="#cfd3da" stroke-width="3" fill="none"></path>193          <circle cx="20" cy="18" r="3" fill="#cfd3da"></circle>194        </svg>195      </div>196      <div class="icon-battery">197        <svg viewBox="0 0 40 22">198          <rect x="1" y="4" width="32" height="14" stroke="#cfd3da" stroke-width="3" fill="none"></rect>199          <rect x="4" y="7" width="26" height="8" fill="#cfd3da"></rect>200          <rect x="35" y="8" width="4" height="6" fill="#cfd3da"></rect>201        </svg>202      </div>203    </div>204  </div>205 206  <!-- Header -->207  <div class="header-title">Timer</div>208  <div class="overflow">209    <svg viewBox="0 0 20 40">210      <circle cx="10" cy="6" r="3" fill="#cfd6de"></circle>211      <circle cx="10" cy="20" r="3" fill="#cfd6de"></circle>212      <circle cx="10" cy="34" r="3" fill="#cfd6de"></circle>213    </svg>214  </div>215 216  <!-- Time display -->217  <div class="time-display">218    <div class="time-chunk">219      <span class="number num-grey">00</span><span class="unit">h</span>220    </div>221    <div class="time-chunk">222      <span class="number num-blue">20</span><span class="unit">m</span>223    </div>224    <div class="time-chunk">225      <span class="number num-blue">00</span><span class="unit">s</span>226    </div>227  </div>228 229  <!-- Keypad -->230  <div class="keypad">231    <div class="key">1</div>232    <div class="key">2</div>233    <div class="key">3</div>234    <div class="key">4</div>235    <div class="key">5</div>236    <div class="key">6</div>237    <div class="key">7</div>238    <div class="key">8</div>239    <div class="key">9</div>240    <div class="key small">00</div>241    <div class="key">0</div>242    <div class="key dim">243      <span style="font-size:80px;">⌫</span>244    </div>245  </div>246 247  <!-- Play button -->248  <div class="play-wrap">249    <div class="play">250      <svg viewBox="0 0 100 100">251        <polygon points="35,25 80,50 35,75" fill="#153a5c"></polygon>252      </svg>253    </div>254  </div>255 256  <!-- Bottom navigation -->257  <div class="bottom-nav">258    <div class="nav-item">259      <div class="nav-icon">260        <svg viewBox="0 0 80 80">261          <path d="M20 40 C10 30,10 20,22 18" stroke="#cfd6de"></path>262          <circle cx="40" cy="45" r="18" stroke="#cfd6de"></circle>263          <rect x="37" y="55" width="6" height="10" fill="#cfd6de"></rect>264        </svg>265      </div>266      <div>Alarm</div>267    </div>268 269    <div class="nav-item">270      <div class="nav-icon">271        <svg viewBox="0 0 80 80">272          <circle cx="40" cy="40" r="26" stroke="#cfd6de"></circle>273          <line x1="40" y1="40" x2="40" y2="20" stroke="#cfd6de"></line>274          <line x1="40" y1="40" x2="56" y2="40" stroke="#cfd6de"></line>275        </svg>276      </div>277      <div>Clock</div>278    </div>279 280    <div class="nav-item selected">281      <div class="nav-icon">282        <svg viewBox="0 0 80 80">283          <path d="M28 20 L52 20 L40 34 Z" stroke="#cfd6de"></path>284          <path d="M28 60 L52 60 L40 46 Z" stroke="#cfd6de"></path>285          <line x1="28" y1="20" x2="28" y2="60" stroke="#cfd6de"></line>286          <line x1="52" y1="20" x2="52" y2="60" stroke="#cfd6de"></line>287        </svg>288      </div>289      <div>Timer</div>290    </div>291 292    <div class="nav-item">293      <div class="nav-icon">294        <svg viewBox="0 0 80 80">295          <circle cx="40" cy="40" r="26" stroke="#cfd6de"></circle>296          <rect x="35" y="10" width="10" height="8" fill="#cfd6de"></rect>297          <line x1="40" y1="40" x2="40" y2="22" stroke="#cfd6de"></line>298        </svg>299      </div>300      <div>Stopwatch</div>301    </div>302 303    <div class="nav-item">304      <div class="nav-icon">305        <svg viewBox="0 0 80 80">306          <rect x="16" y="42" width="48" height="16" stroke="#cfd6de"></rect>307          <rect x="16" y="34" width="20" height="8" fill="#cfd6de"></rect>308        </svg>309      </div>310      <div>Bedtime</div>311    </div>312  </div>313 314</div>315</body>316</html>