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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #101418;15    color: #EDEFF1;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: #e6e6e6;26    font-size: 34px;27    opacity: 0.9;28  }29  .status-right {30    display: flex;31    gap: 26px;32    align-items: center;33  }34  .dot { width: 10px; height: 10px; background: #D9D9D9; border-radius: 50%; display: inline-block; margin: 0 6px; opacity: 0.8; }35 36  /* Page title */37  .title {38    margin-top: 40px;39    padding: 0 48px;40    font-size: 68px;41    font-weight: 500;42    color: #EDEFF1;43  }44 45  /* Time display */46  .time-display {47    margin: 60px 48px 20px 48px;48    color: #B5B8BD;49    display: flex;50    align-items: flex-end;51    gap: 48px;52  }53  .time-chunk { display: flex; align-items: baseline; }54  .digit {55    font-size: 160px;56    letter-spacing: 2px;57    line-height: 1;58    color: #C6C8CC;59  }60  .unit {61    font-size: 64px;62    color: #9AA0A6;63    margin-left: 10px;64    transform: translateY(-10px);65  }66 67  /* Keypad */68  .keypad {69    width: 100%;70    margin-top: 80px;71    display: grid;72    grid-template-columns: repeat(3, 260px);73    grid-auto-rows: 260px;74    justify-content: center;75    gap: 60px;76  }77  .key {78    background: #151A1F;79    border-radius: 50%;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #EEF1F4;84    font-size: 86px;85    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);86  }87  .key.secondary {88    font-size: 78px;89  }90  .key.delete {91    background: #3B4C5F;92  }93  .key svg { width: 80px; height: 80px; stroke: #EAF0F6; }94 95  /* Bottom navigation */96  .bottom-nav {97    position: absolute;98    left: 0; right: 0; bottom: 0;99    height: 240px;100    background: #1A2025;101    border-top: 1px solid rgba(255,255,255,0.04);102    display: flex;103    align-items: center;104    justify-content: space-around;105    padding: 0 24px;106  }107  .nav-item {108    width: 200px;109    text-align: center;110    color: #9AA0A6;111    font-size: 34px;112  }113  .icon-wrap {114    width: 92px; height: 92px; margin: 0 auto 14px auto;115    display: flex; align-items: center; justify-content: center;116  }117  .nav-item svg { width: 60px; height: 60px; stroke: #C9CDD2; }118  .nav-item.selected { color: #FFFFFF; }119  .nav-item.selected .icon-pill {120    width: 180px; height: 96px; margin: 0 auto 14px auto;121    border-radius: 58px; background: #3B4C5F;122    display: flex; align-items: center; justify-content: center;123  }124  .nav-item.selected svg { stroke: #FFFFFF; }125 126  /* Gesture bar */127  .gesture {128    position: absolute;129    bottom: 250px;130    left: 50%;131    transform: translateX(-50%);132    width: 520px; height: 12px; border-radius: 8px;133    background: #D8D8D8; opacity: 0.75;134  }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status bar -->141  <div class="status-bar">142    <div>9:26</div>143    <div class="status-right">144      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>145      <svg width="36" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">146        <path d="M2 8h20l-2 10H4L2 8z"></path>147        <path d="M6 8V6a6 6 0 0 1 12 0v2"></path>148      </svg>149      <svg width="36" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">150        <path d="M3 12h18"></path><path d="M12 3v18"></path>151      </svg>152    </div>153  </div>154 155  <!-- Title -->156  <div class="title">Timer</div>157 158  <!-- Time -->159  <div class="time-display">160    <div class="time-chunk"><span class="digit">00</span><span class="unit">h</span></div>161    <div class="time-chunk"><span class="digit">00</span><span class="unit">m</span></div>162    <div class="time-chunk"><span class="digit">00</span><span class="unit">s</span></div>163  </div>164 165  <!-- Keypad -->166  <div class="keypad">167    <div class="key">1</div>168    <div class="key">2</div>169    <div class="key">3</div>170    <div class="key">4</div>171    <div class="key">5</div>172    <div class="key">6</div>173    <div class="key">7</div>174    <div class="key">8</div>175    <div class="key">9</div>176    <div class="key secondary">00</div>177    <div class="key">0</div>178    <div class="key delete">179      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">180        <path d="M5 12l4-5h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4-5z" stroke="#EAF0F6" fill="none"></path>181        <path d="M13 10l4 4m0-4l-4 4" stroke="#EAF0F6"></path>182      </svg>183    </div>184  </div>185 186  <!-- Gesture bar -->187  <div class="gesture"></div>188 189  <!-- Bottom Navigation -->190  <div class="bottom-nav">191    <div class="nav-item">192      <div class="icon-wrap">193        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">194          <path d="M12 5a5 5 0 0 1 5 5v2H7v-2a5 5 0 0 1 5-5z"></path>195          <path d="M8 12v5a4 4 0 0 0 8 0v-5"></path>196        </svg>197      </div>198      <div>Alarm</div>199    </div>200 201    <div class="nav-item">202      <div class="icon-wrap">203        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">204          <circle cx="12" cy="12" r="8"></circle>205          <path d="M12 7v6l4 2"></path>206        </svg>207      </div>208      <div>Clock</div>209    </div>210 211    <div class="nav-item selected">212      <div class="icon-pill">213        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">214          <path d="M7 5h10l-5 5-5-5zM7 19h10l-5-5-5 5z"></path>215        </svg>216      </div>217      <div>Timer</div>218    </div>219 220    <div class="nav-item">221      <div class="icon-wrap">222        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">223          <circle cx="12" cy="14" r="7"></circle>224          <path d="M12 10v4l3 2"></path>225          <path d="M8 4h8"></path>226          <path d="M15 3h2v3"></path>227        </svg>228      </div>229      <div>Stopwatch</div>230    </div>231 232    <div class="nav-item">233      <div class="icon-wrap">234        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">235          <path d="M3 18v-6h10v6"></path>236          <path d="M18 18v-4a2 2 0 0 0-2-2h-3"></path>237          <path d="M2 18h20"></path>238        </svg>239      </div>240      <div>Bedtime</div>241    </div>242  </div>243 244</div>245</body>246</html>