GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Timer Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1416;14    color: #e9f1f1;15  }16 17  /* Status bar (mock) */18  .status {19    position: absolute;20    top: 22px;21    left: 36px;22    right: 36px;23    height: 48px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #dfe7e7;28    font-size: 40px;29    letter-spacing: 1px;30    opacity: 0.95;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 14px;36  }37  .dot { width: 10px; height: 10px; background:#cfd8dc; border-radius: 50%; display:inline-block; opacity:0.7; }38 39  .icon-pill { width: 26px; height: 26px; border-radius: 50%; background:#eceff1; opacity:0.85; }40 41  /* Title */42  .title {43    position: absolute;44    top: 120px;45    left: 48px;46    font-size: 90px;47    font-weight: 600;48    color: #e3ecec;49  }50 51  /* Time display */52  .time-row {53    position: absolute;54    top: 300px;55    left: 110px;56    display: flex;57    gap: 80px;58    align-items: baseline;59  }60  .time-block {61    display: inline-flex;62    align-items: baseline;63  }64  .time-num {65    font-size: 200px;66    font-weight: 600;67    line-height: 1;68    letter-spacing: 4px;69  }70  .time-suffix {71    font-size: 90px;72    margin-left: 12px;73    font-weight: 600;74  }75  .muted { color: #9aa2a6; }76  .accent { color: #9FE8E4; }77 78  /* Keypad grid */79  .keypad {80    position: absolute;81    top: 760px;82    left: 90px;83    width: 900px;84    display: grid;85    grid-template-columns: repeat(3, 1fr);86    grid-gap: 60px;87  }88  .key {89    height: 260px;90    border-radius: 50%;91    background: #121a1c;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #f5fbfb;96    font-size: 120px;97    font-weight: 600;98    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);99  }100  .key.dim { color: #e5f0ef; font-size: 110px; }101  .key.delete {102    background: #293d40;103  }104  .delete svg {105    width: 110px;106    height: 110px;107    fill: none;108    stroke: #dff6f5;109    stroke-width: 18;110    stroke-linecap: round;111    stroke-linejoin: round;112  }113 114  /* Play button */115  .play {116    position: absolute;117    left: 50%;118    transform: translateX(-50%);119    bottom: 360px;120    width: 300px;121    height: 300px;122    border-radius: 50%;123    background: #A8EAE6;124    display: flex;125    align-items: center;126    justify-content: center;127  }128  .play svg { width: 110px; height: 110px; fill: #0f1416; }129 130  /* Bottom tabs */131  .tabs {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 190px;137    background: #131b1d;138    border-top: 1px solid rgba(255,255,255,0.04);139    display: flex;140    align-items: center;141    justify-content: space-around;142    padding-bottom: 10px;143  }144  .tab {145    width: 180px;146    display: flex;147    flex-direction: column;148    align-items: center;149    color: #c9d3d4;150    font-size: 40px;151    gap: 18px;152  }153  .tab .ico {154    width: 92px;155    height: 92px;156    border-radius: 50%;157    background: transparent;158    display: flex;159    align-items: center;160    justify-content: center;161  }162  .tab .ico svg { width: 56px; height: 56px; stroke: #c9d3d4; fill: none; stroke-width: 10; }163 164  .tab.active {165    color: #a9eae6;166    font-weight: 600;167  }168  .tab.active .ico {169    width: 180px;170    height: 92px;171    border-radius: 50px;172    background: #2a3f42;173  }174  .tab.active .ico svg { stroke: #a9eae6; }175 176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Mock status bar -->182  <div class="status">183    <div>5:29</div>184    <div class="status-icons">185      <span class="dot"></span>186      <span class="dot"></span>187      <span class="dot"></span>188      <span class="dot"></span>189      <span class="dot"></span>190      <div class="icon-pill"></div>191      <div class="icon-pill"></div>192    </div>193  </div>194 195  <div class="title">Timer</div>196 197  <!-- Main time -->198  <div class="time-row">199    <div class="time-block">200      <span class="time-num muted">00</span>201      <span class="time-suffix muted">h</span>202    </div>203    <div class="time-block">204      <span class="time-num muted">00</span>205      <span class="time-suffix muted">m</span>206    </div>207    <div class="time-block">208      <span class="time-num accent">03</span>209      <span class="time-suffix accent">s</span>210    </div>211  </div>212 213  <!-- Keypad -->214  <div class="keypad">215    <div class="key">1</div>216    <div class="key">2</div>217    <div class="key">3</div>218 219    <div class="key">4</div>220    <div class="key">5</div>221    <div class="key">6</div>222 223    <div class="key">7</div>224    <div class="key">8</div>225    <div class="key">9</div>226 227    <div class="key dim">00</div>228    <div class="key">0</div>229    <div class="key delete">230      <svg viewBox="0 0 64 64" aria-hidden="true">231        <path d="M22 12h30a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H22L6 32 22 12z"/>232        <path d="M34 24l16 16M50 24L34 40"/>233      </svg>234    </div>235  </div>236 237  <!-- Play button -->238  <div class="play">239    <svg viewBox="0 0 100 100" aria-hidden="true">240      <polygon points="35,25 80,50 35,75"></polygon>241    </svg>242  </div>243 244  <!-- Bottom navigation tabs -->245  <div class="tabs">246    <div class="tab">247      <div class="ico">248        <svg viewBox="0 0 48 48">249          <circle cx="24" cy="24" r="18"></circle>250          <line x1="24" y1="11" x2="24" y2="24"></line>251          <line x1="24" y1="24" x2="33" y2="30"></line>252        </svg>253      </div>254      <div>Alarm</div>255    </div>256 257    <div class="tab">258      <div class="ico">259        <svg viewBox="0 0 48 48">260          <circle cx="24" cy="24" r="18"></circle>261          <line x1="24" y1="9" x2="24" y2="24"></line>262          <line x1="24" y1="24" x2="36" y2="24"></line>263        </svg>264      </div>265      <div>Clock</div>266    </div>267 268    <div class="tab active">269      <div class="ico">270        <svg viewBox="0 0 48 48">271          <path d="M18 10h12l-4 7 4 7H18l4-7-4-7z"></path>272        </svg>273      </div>274      <div>Timer</div>275    </div>276 277    <div class="tab">278      <div class="ico">279        <svg viewBox="0 0 48 48">280          <circle cx="24" cy="24" r="18"></circle>281          <path d="M24 14v10l8 6" />282        </svg>283      </div>284      <div>Stopwatch</div>285    </div>286 287    <div class="tab">288      <div class="ico">289        <svg viewBox="0 0 48 48">290          <rect x="10" y="18" width="28" height="16" rx="4" ry="4"></rect>291          <line x1="14" y1="30" x2="34" y2="30"></line>292        </svg>293      </div>294      <div>Bedtime</div>295    </div>296  </div>297 298</div>299</body>300</html>