GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #13171B;13    color: #EAEFF6;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #DDE3EA;29    font-size: 42px;30    letter-spacing: 0.5px;31    opacity: 0.95;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon-small svg { width: 48px; height: 48px; fill: #DDE3EA; }39 40  /* Header */41  .header {42    position: absolute;43    top: 120px;44    left: 48px;45    right: 48px;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .title {51    font-size: 96px;52    font-weight: 600;53    color: #E6EDF5;54  }55  .menu {56    width: 60px; height: 120px; display: flex; align-items: center; justify-content: center;57  }58  .menu .dot {59    width: 12px; height: 12px; background: #A5AFB9; border-radius: 50%; margin: 7px 0;60  }61  .menu .dots { display: flex; flex-direction: column; align-items: center; justify-content: center; }62 63  /* Time display */64  .time-display {65    position: absolute;66    top: 270px;67    left: 80px;68    right: 80px;69    display: flex;70    align-items: baseline;71    gap: 60px;72  }73  .segment {74    display: flex; align-items: baseline; gap: 16px;75  }76  .digits {77    font-size: 180px; font-weight: 600; letter-spacing: 4px;78  }79  .unit {80    font-size: 84px; color: #939BA3;81  }82  .muted .digits { color: #9AA1A9; }83  .accent .digits { color: #9EC5FF; }84  .accent .unit { color: #9EC5FF; }85 86  /* Keypad */87  .keypad {88    position: absolute;89    top: 650px;90    left: 80px;91    right: 80px;92    display: grid;93    grid-template-columns: repeat(3, 1fr);94    grid-auto-rows: 260px;95    gap: 68px;96  }97  .key {98    background: #0F1419;99    border-radius: 50%;100    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);101    display: flex; align-items: center; justify-content: center;102    color: #E6EDF5;103    font-size: 120px; font-weight: 500;104  }105  .key.dark {106    background: #2F3C49;107  }108  .key span.small {109    font-size: 92px;110  }111 112  /* Play button */113  .play-wrap {114    position: absolute;115    left: 0; right: 0;116    bottom: 340px;117    display: flex; justify-content: center;118  }119  .play {120    width: 320px; height: 320px;121    background: #B7D4FF;122    border-radius: 50%;123    box-shadow: 0 12px 32px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.25);124    display: flex; align-items: center; justify-content: center;125  }126  .play svg { width: 120px; height: 120px; fill: #173659; }127 128  /* Bottom nav */129  .bottom-nav {130    position: absolute;131    bottom: 0; left: 0; width: 1080px; height: 240px;132    background: #1A2127;133    border-top: 1px solid rgba(255,255,255,0.06);134    display: flex; align-items: center; justify-content: space-around;135    color: #BFC7D0;136  }137  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }138  .nav-item svg { width: 72px; height: 72px; fill: #BFC7D0; }139  .nav-item .label { font-size: 44px; }140  .nav-item.active .pill {141    background: #2A3A47;142    border-radius: 48px;143    padding: 18px 26px;144    display: flex; align-items: center; justify-content: center;145  }146  .nav-item.active svg { fill: #9EC5FF; }147  .nav-item.active .label { color: #E6EDF5; }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div>8:59</div>156    <div class="status-right">157      <div class="icon-small">158        <!-- globe/network placeholder icon -->159        <svg viewBox="0 0 24 24">160          <circle cx="12" cy="12" r="9"></circle>161          <path d="M3 12h18M12 3v18" stroke="#DDE3EA" stroke-width="2" fill="none"></path>162        </svg>163      </div>164      <div class="icon-small">165        <!-- wifi -->166        <svg viewBox="0 0 24 24">167          <path d="M2 9c4-3 16-3 20 0M5 13c3-2 11-2 14 0M9 17c2-1 4-1 6 0M12 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="none" stroke="#DDE3EA" stroke-width="2" stroke-linecap="round"></path>168        </svg>169      </div>170      <div class="icon-small">171        <!-- battery -->172        <svg viewBox="0 0 28 24">173          <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#DDE3EA" stroke-width="2" fill="none"></rect>174          <rect x="4" y="7" width="14" height="10" fill="#DDE3EA"></rect>175          <rect x="22" y="9" width="4" height="6" rx="1" fill="#DDE3EA"></rect>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Header -->182  <div class="header">183    <div class="title">Timer</div>184    <div class="menu">185      <div class="dots">186        <div class="dot"></div>187        <div class="dot"></div>188        <div class="dot"></div>189      </div>190    </div>191  </div>192 193  <!-- Time Display -->194  <div class="time-display">195    <div class="segment muted">196      <div class="digits">00</div>197      <div class="unit">h</div>198    </div>199    <div class="segment muted">200      <div class="digits">00</div>201      <div class="unit">m</div>202    </div>203    <div class="segment accent">204      <div class="digits">02</div>205      <div class="unit">s</div>206    </div>207  </div>208 209  <!-- Keypad -->210  <div class="keypad">211    <div class="key">1</div>212    <div class="key">2</div>213    <div class="key">3</div>214 215    <div class="key">4</div>216    <div class="key">5</div>217    <div class="key">6</div>218 219    <div class="key">7</div>220    <div class="key">8</div>221    <div class="key">9</div>222 223    <div class="key"><span class="small">00</span></div>224    <div class="key">0</div>225    <div class="key dark">226      <!-- backspace icon -->227      <svg viewBox="0 0 120 120">228        <path d="M30 30 L10 60 L30 90 H100 V30 Z" fill="none" stroke="#E6EDF5" stroke-width="8" stroke-linejoin="round"></path>229        <path d="M55 50 L75 70 M75 50 L55 70" stroke="#E6EDF5" stroke-width="8" stroke-linecap="round"></path>230      </svg>231    </div>232  </div>233 234  <!-- Play Button -->235  <div class="play-wrap">236    <div class="play">237      <svg viewBox="0 0 100 100">238        <polygon points="35,25 80,50 35,75"></polygon>239      </svg>240    </div>241  </div>242 243  <!-- Bottom Navigation -->244  <div class="bottom-nav">245    <div class="nav-item">246      <svg viewBox="0 0 24 24">247        <path d="M12 3c-3 0-6 2-6 6v4l-2 2v2h16v-2l-2-2V9c0-4-3-6-6-6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>248        <circle cx="12" cy="17" r="2"></circle>249      </svg>250      <div class="label">Alarm</div>251    </div>252    <div class="nav-item">253      <svg viewBox="0 0 24 24">254        <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>255        <path d="M12 12 L12 6 M12 12 L17 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>256      </svg>257      <div class="label">Clock</div>258    </div>259    <div class="nav-item active">260      <div class="pill">261        <svg viewBox="0 0 24 24">262          <path d="M7 6l10 0-4 4 4 8H7l4-8z" fill="currentColor"></path>263        </svg>264      </div>265      <div class="label">Timer</div>266    </div>267    <div class="nav-item">268      <svg viewBox="0 0 24 24">269        <circle cx="12" cy="13" r="8" fill="none" stroke="currentColor" stroke-width="2"></circle>270        <rect x="10" y="3" width="4" height="4" rx="1" fill="currentColor"></rect>271        <path d="M12 13 L12 8 M12 13 L16 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>272      </svg>273      <div class="label">Stopwatch</div>274    </div>275    <div class="nav-item">276      <svg viewBox="0 0 24 24">277        <rect x="3" y="12" width="18" height="6" rx="1" fill="currentColor"></rect>278        <rect x="4" y="9" width="6" height="3" fill="currentColor"></rect>279        <rect x="12" y="9" width="8" height="3" fill="currentColor"></rect>280      </svg>281      <div class="label">Bedtime</div>282    </div>283  </div>284 285</div>286</body>287</html>