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>Timer UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0D1515;15    color: #ECEFF1;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EAEAEA;26    font-size: 44px;27    opacity: 0.9;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .sb-icon {35    width: 34px; height: 34px; border-radius: 6px; background: #D9D9D9;36  }37  .dot { width: 10px; height: 10px; border-radius: 50%; background: #D9D9D9; }38 39  /* Title */40  .title {41    margin: 24px 0 0 56px;42    font-size: 88px;43    font-weight: 500;44    color: #D5DEE0;45  }46 47  /* Time display */48  .time-row {49    display: flex;50    align-items: baseline;51    gap: 44px;52    margin: 60px 0 0 56px;53  }54  .segment {55    display: flex;56    align-items: baseline;57    gap: 10px;58  }59  .seg-value {60    font-size: 160px;61    letter-spacing: 2px;62    line-height: 1;63  }64  .seg-unit {65    font-size: 64px;66    color: #97A7A9;67  }68  .inactive { color: #7B8284; }69  .accent { color: #79E6DE; }70 71  /* Keypad */72  .pad-wrap {73    margin-top: 120px;74    display: flex;75    justify-content: center;76  }77  .pad {78    width: 960px;79    display: grid;80    grid-template-columns: repeat(3, 1fr);81    gap: 60px;82  }83  .key {84    width: 280px;85    height: 280px;86    border-radius: 50%;87    background: #111C1C;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #E7F2F2;92    font-size: 96px;93    user-select: none;94  }95  .key.delete {96    background: #274546;97    color: #DFF7F5;98    font-size: 72px;99  }100 101  /* Play button */102  .play-wrap {103    margin-top: 80px;104    display: flex;105    justify-content: center;106  }107  .play-btn {108    width: 300px;109    height: 300px;110    border-radius: 50%;111    background: #7DE9E1;112    display: flex;113    align-items: center;114    justify-content: center;115  }116 117  /* Bottom nav */118  .bottom-nav {119    position: absolute;120    left: 0; right: 0; bottom: 80px;121    height: 220px;122    background: #121C1C;123    display: flex;124    align-items: center;125    justify-content: space-around;126    padding: 0 24px;127    color: #B9C4C6;128  }129  .nav-item {130    width: 180px;131    text-align: center;132    font-size: 40px;133  }134  .nav-icon {135    width: 92px; height: 92px; margin: 0 auto 16px;136    display: flex; align-items: center; justify-content: center;137    color: #CFE7E6;138  }139  .nav-active .nav-icon {140    width: 132px; height: 92px; border-radius: 46px; background: #22393A;141  }142  .nav-active { color: #FFFFFF; }143 144  /* Gesture pill */145  .gesture {146    position: absolute;147    left: 50%;148    transform: translateX(-50%);149    bottom: 24px;150    width: 460px; height: 16px;151    background: #EDEDED; border-radius: 10px; opacity: 0.9;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status Bar (simplified) -->159  <div class="status-bar">160    <div>11:57</div>161    <div class="status-right">162      <div class="sb-icon"></div>163      <div class="dot"></div>164      <div class="sb-icon"></div>165      <div class="sb-icon"></div>166      <div class="sb-icon"></div>167    </div>168  </div>169 170  <!-- Title -->171  <div class="title">Timer</div>172 173  <!-- Time Display -->174  <div class="time-row">175    <div class="segment">176      <div class="seg-value inactive">00</div>177      <div class="seg-unit">h</div>178    </div>179    <div class="segment">180      <div class="seg-value accent">02</div>181      <div class="seg-unit">m</div>182    </div>183    <div class="segment">184      <div class="seg-value accent">63</div>185      <div class="seg-unit">s</div>186    </div>187  </div>188 189  <!-- Keypad -->190  <div class="pad-wrap">191    <div class="pad">192      <div class="key">1</div>193      <div class="key">2</div>194      <div class="key">3</div>195 196      <div class="key">4</div>197      <div class="key">5</div>198      <div class="key">6</div>199 200      <div class="key">7</div>201      <div class="key">8</div>202      <div class="key">9</div>203 204      <div class="key">00</div>205      <div class="key">0</div>206      <div class="key delete">207        <!-- Backspace icon -->208        <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="#DFF7F5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">209          <path d="M3 12l5-6h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-5-6z"/>210          <path d="M14.5 9.5l-4 4m0-4l4 4"/>211        </svg>212      </div>213    </div>214  </div>215 216  <!-- Play Button -->217  <div class="play-wrap">218    <div class="play-btn">219      <svg width="120" height="120" viewBox="0 0 24 24">220        <polygon points="8,5 19,12 8,19" fill="#0D1515"/>221      </svg>222    </div>223  </div>224 225  <!-- Bottom Navigation -->226  <div class="bottom-nav">227    <div class="nav-item">228      <div class="nav-icon">229        <!-- Alarm icon -->230        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#CFE7E6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">231          <circle cx="12" cy="13" r="7"/>232          <path d="M12 13V9M5 5l2 2M19 5l-2 2"/>233        </svg>234      </div>235      <div>Alarm</div>236    </div>237 238    <div class="nav-item">239      <div class="nav-icon">240        <!-- Clock icon -->241        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#CFE7E6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">242          <circle cx="12" cy="12" r="9"/>243          <path d="M12 7v6l4 2"/>244        </svg>245      </div>246      <div>Clock</div>247    </div>248 249    <div class="nav-item nav-active">250      <div class="nav-icon">251        <!-- Hourglass (active) -->252        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#7DE9E1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">253          <path d="M6 2h12M6 22h12M7 3c0 5 10 5 10 10s-10 5-10 10"/>254          <path d="M17 3c0 5-10 5-10 10"/>255        </svg>256      </div>257      <div>Timer</div>258    </div>259 260    <div class="nav-item">261      <div class="nav-icon">262        <!-- Stopwatch icon -->263        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#CFE7E6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">264          <circle cx="12" cy="13" r="8"/>265          <path d="M9 2h6M12 13l4-3"/>266        </svg>267      </div>268      <div>Stopwatch</div>269    </div>270 271    <div class="nav-item">272      <div class="nav-icon">273        <!-- Bed icon -->274        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#CFE7E6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">275          <path d="M3 12h18v6H3z"/>276          <path d="M3 9h7a3 3 0 0 1 3 3v0H3z"/>277          <path d="M3 18v3M21 18v3"/>278        </svg>279      </div>280      <div>Bedtime</div>281    </div>282  </div>283 284  <!-- Gestural handle -->285  <div class="gesture"></div>286</div>287</body>288</html>