GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Roboto", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0f1416;18    color: #e9eff1;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    height: 120px;27    width: 100%;28    padding: 28px 36px;29    box-sizing: border-box;30    color: #ffffff;31    font-size: 44px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    opacity: 0.95;36  }37  .status-right {38    display: flex;39    gap: 22px;40    align-items: center;41  }42  .dot {43    width: 10px;44    height: 10px;45    background: #ffffff;46    border-radius: 50%;47    display: inline-block;48  }49 50  /* Title */51  .title {52    position: absolute;53    top: 150px;54    left: 44px;55    font-size: 68px;56    font-weight: 500;57    color: #dfe6e8;58    letter-spacing: 1px;59  }60  .menu-dots {61    position: absolute;62    top: 160px;63    right: 36px;64    width: 12px;65    height: 54px;66    display: flex;67    flex-direction: column;68    justify-content: space-between;69    align-items: center;70  }71  .menu-dots span{72    width: 10px;73    height: 10px;74    background: #aab3b6;75    border-radius: 50%;76    display: block;77  }78 79  /* Time display */80  .time-display {81    position: absolute;82    top: 300px;83    left: 70px;84    display: flex;85    align-items: baseline;86    gap: 36px;87  }88  .pair {89    display: flex;90    align-items: baseline;91    gap: 18px;92  }93  .num {94    font-size: 190px;95    line-height: 1;96    color: #a6aaad;97    font-weight: 500;98  }99  .unit {100    font-size: 80px;101    color: #7f878b;102  }103  .accent { color: #8fe1dc; }104 105  /* Keypad */106  .pad-grid {107    position: absolute;108    top: 780px;109    left: 90px;110    width: 900px;111    display: grid;112    grid-template-columns: repeat(3, 1fr);113    column-gap: 90px;114    row-gap: 80px;115  }116  .pad {117    width: 255px;118    height: 255px;119    border-radius: 50%;120    background: #101a1d;121    display: flex;122    justify-content: center;123    align-items: center;124    color: #e6eef0;125    font-size: 120px;126    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);127  }128  .pad.dim {129    background: #23373a;130    color: #cfe1e3;131  }132  .pad.small {133    font-size: 100px;134  }135 136  /* Play button */137  .play-wrap {138    position: absolute;139    top: 1580px;140    left: 50%;141    transform: translateX(-50%);142  }143  .play {144    width: 280px;145    height: 280px;146    border-radius: 50%;147    background: #9fe6e1;148    display: flex;149    justify-content: center;150    align-items: center;151  }152  .play svg { transform: translateX(6px); }153 154  /* Bottom nav */155  .nav {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 100%;160    height: 230px;161    background: #131b1d;162    border-top: 1px solid rgba(255,255,255,0.05);163    display: flex;164    justify-content: space-around;165    align-items: center;166  }167  .nav-item {168    width: 180px;169    text-align: center;170    color: #c7d0d3;171    font-size: 36px;172  }173  .nav-item .icon {174    margin: 0 auto 18px;175    width: 88px;176    height: 88px;177    display: flex;178    justify-content: center;179    align-items: center;180    color: #c7d0d3;181  }182  .nav-item.active .icon {183    width: 160px;184    height: 96px;185    border-radius: 48px;186    background: #253b3f;187    position: relative;188  }189  .nav-item.active .icon .pill {190    width: 96px;191    height: 96px;192    border-radius: 48px;193    background: #9fe6e1;194    display: flex;195    justify-content: center;196    align-items: center;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div>5:30</div>206    <div class="status-right">207      <span class="dot"></span>208      <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" aria-label="Wifi">209        <path d="M12 18.5l1.6 1.6-1.6 1.6-1.6-1.6L12 18.5zm-6-6.3a12 12 0 0112 0l-1.4 1.4a10 10 0 00-9.2 0L6 12.2zm3 3a7.5 7.5 0 016 0l-1.4 1.4a5.5 5.5 0 00-3.2 0L9 15.2z"/>210      </svg>211      <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" aria-label="Battery">212        <path d="M16 5h2v2h1a1 1 0 011 1v8a1 1 0 01-1 1h-1v2H5a1 1 0 01-1-1V6a1 1 0 011-1h11zM6 7v10h10V7H6z"/>213      </svg>214    </div>215  </div>216 217  <!-- Title -->218  <div class="title">Timer</div>219  <div class="menu-dots">220    <span></span><span></span><span></span>221  </div>222 223  <!-- Time Display -->224  <div class="time-display">225    <div class="pair">226      <div class="num">00</div>227      <div class="unit">h</div>228    </div>229    <div class="pair">230      <div class="num">00</div>231      <div class="unit">m</div>232    </div>233    <div class="pair">234      <div class="num accent">30</div>235      <div class="unit accent">s</div>236    </div>237  </div>238 239  <!-- Keypad -->240  <div class="pad-grid">241    <div class="pad">1</div>242    <div class="pad">2</div>243    <div class="pad">3</div>244    <div class="pad">4</div>245    <div class="pad">5</div>246    <div class="pad">6</div>247    <div class="pad">7</div>248    <div class="pad">8</div>249    <div class="pad">9</div>250    <div class="pad small">00</div>251    <div class="pad">0</div>252    <div class="pad dim">253      <svg width="120" height="120" viewBox="0 0 24 24" fill="#e6f5f6" aria-label="Backspace">254        <path d="M3.5 12l4.3 6H20a1 1 0 001-1V7a1 1 0 00-1-1H7.8L3.5 12zm8.5-4l3 3 3-3 1.4 1.4-3 3 3 3-1.4 1.4-3-3-3 3L10.6 15l3-3-3-3L12 8z"/>255      </svg>256    </div>257  </div>258 259  <!-- Play Button -->260  <div class="play-wrap">261    <div class="play">262      <svg width="120" height="120" viewBox="0 0 24 24" fill="#0f1416" aria-label="Play">263        <path d="M8 5v14l11-7z"/>264      </svg>265    </div>266  </div>267 268  <!-- Bottom Navigation -->269  <div class="nav">270    <div class="nav-item">271      <div class="icon">272        <svg width="64" height="64" viewBox="0 0 24 24" fill="#c7d0d3" aria-label="Alarm">273          <path d="M6 6l-2-2 1.4-1.4L7.4 4.6 6 6zm12 0l-1.4-1.4 2-2L21 4l-3 2zM12 8a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 110 8 4 4 0 010-8zm-.5 2h1v3.5l3 1-.3.9-3.7-1.4V12z"/>274        </svg>275      </div>276      <div>Alarm</div>277    </div>278 279    <div class="nav-item">280      <div class="icon">281        <svg width="64" height="64" viewBox="0 0 24 24" fill="#c7d0d3" aria-label="Clock">282          <path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 5h-2v6l5 3 .8-1.2L13 12.5V7z"/>283        </svg>284      </div>285      <div>Clock</div>286    </div>287 288    <div class="nav-item active">289      <div class="icon">290        <div class="pill">291          <svg width="56" height="56" viewBox="0 0 24 24" fill="#0f1416" aria-label="Timer">292            <path d="M15 1H9v2h6V1zM12 6a8 8 0 108 8 8 8 0 00-8-8zm0 2a6 6 0 11-6 6 6 6 0 016-6zm-1 1h2v5h-2z"/>293          </svg>294        </div>295      </div>296      <div>Timer</div>297    </div>298 299    <div class="nav-item">300      <div class="icon">301        <svg width="64" height="64" viewBox="0 0 24 24" fill="#c7d0d3" aria-label="Stopwatch">302          <path d="M9 1h6v2H9V1zm3 4a9 9 0 109 9 9 9 0 00-9-9zm0 2a7 7 0 11-7 7 7 7 0 017-7zm-1 2h2v5h-2z"/>303        </svg>304      </div>305      <div>Stopwatch</div>306    </div>307 308    <div class="nav-item">309      <div class="icon">310        <svg width="64" height="64" viewBox="0 0 24 24" fill="#c7d0d3" aria-label="Bedtime">311          <path d="M3 12h12a4 4 0 014 4v3H3v-7zm2-6h6a4 4 0 014 4v2H5V6z"/>312        </svg>313      </div>314      <div>Bedtime</div>315    </div>316  </div>317 318</div>319</body>320</html>