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: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #12181e; /* dark background */15    color: #e9eef2;16  }17 18  /* Status bar (simplified) */19  .status-bar {20    height: 90px;21    padding: 24px 28px 0 28px;22    box-sizing: border-box;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #e8eff6;27    opacity: 0.95;28    font-size: 28px;29    letter-spacing: 0.5px;30  }31  .status-right {32    display: flex; gap: 18px; align-items: center;33  }34  .sb-icon {35    width: 26px; height: 26px; border-radius: 4px; background: #d7dde3; opacity: 0.9;36  }37  .battery {38    width: 34px; height: 20px; border: 2px solid #d7dde3; border-radius: 3px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: #d7dde3; border-radius: 1px;42  }43  .battery .level {44    position: absolute; left: 2px; top: 2px; bottom: 2px; width: 70%; background: #d7dde3;45  }46 47  /* Header */48  .header {49    padding: 8px 36px 0 36px;50    display: flex; align-items: center; justify-content: space-between;51  }52  .header-title {53    font-size: 54px; font-weight: 500; color: #dfe7ec; margin-top: 10px;54  }55  .menu-dots { width: 24px; height: 60px; position: relative; margin-right: 10px; }56  .menu-dots span {57    position: absolute; left: 8px; width: 8px; height: 8px; background: #9aa7b0; border-radius: 50%;58  }59  .menu-dots span:nth-child(1){ top: 10px; }60  .menu-dots span:nth-child(2){ top: 26px; }61  .menu-dots span:nth-child(3){ top: 42px; }62 63  /* Timer Card */64  .card {65    width: 1008px;66    height: 1380px;67    margin: 36px auto 0 auto;68    background: #1b2329;69    border-radius: 56px;70    box-sizing: border-box;71    padding: 40px 44px;72    position: relative;73  }74  .card-header {75    display: flex; align-items: center; justify-content: space-between;76    margin-bottom: 12px;77  }78  .card-title {79    font-size: 46px; color: #dfe8ee; opacity: 0.95;80  }81  .chip-close {82    width: 72px; height: 72px; border-radius: 50%;83    background: #2a3941; display: flex; align-items: center; justify-content: center;84  }85  .chip-close svg { width: 30px; height: 30px; stroke: #c8d5de; stroke-width: 4; }86 87  /* Dial */88  .dial {89    width: 860px;90    height: 860px;91    margin: 20px auto 0 auto;92    border-radius: 50%;93    position: relative;94    transform: rotate(-90deg);95    background: conic-gradient(#6ea9cf 0deg 300deg, #2b3339 300deg 360deg);96  }97  .dial .inner {98    position: absolute;99    inset: 24px;100    border-radius: 50%;101    background: #1b2329;102    display: flex; align-items: center; justify-content: center; flex-direction: column;103    transform: rotate(90deg);104  }105  .time-display {106    font-size: 170px; font-weight: 600; color: #e6ebf0; letter-spacing: 4px; line-height: 1;107  }108  .refresh-icon {109    margin-top: 18px;110  }111  .refresh-icon svg { width: 56px; height: 56px; stroke: #6ea9cf; stroke-width: 6; fill: none; }112 113  /* Action buttons */114  .actions {115    width: 880px; margin: 36px auto 0 auto; display: flex; justify-content: space-between; align-items: center;116  }117  .pill {118    width: 380px; height: 140px; border: none; border-radius: 80px; font-size: 48px; color: #dfe8ee;119    display: flex; align-items: center; justify-content: center; letter-spacing: 1px;120  }121  .pill.add-minute { background: #2b3a43; color: #cfe0ea; }122  .pill.pause { background: #d8c7fb; color: #2b2436; }123  .pill.pause svg { width: 34px; height: 56px; }124 125  /* Floating add button */126  .fab {127    width: 224px; height: 224px; border-radius: 50%;128    background: #9ccff9;129    margin: 54px auto 0 auto;130    display: flex; align-items: center; justify-content: center;131    color: #0e1a21; font-size: 96px; font-weight: 500;132    box-shadow: 0 14px 22px rgba(0,0,0,0.35);133  }134 135  /* Bottom navigation */136  .bottom-nav {137    position: absolute; left: 0; right: 0; bottom: 110px;138    height: 180px; background: #1b2329;139    display: flex; align-items: center; justify-content: space-around;140    padding: 0 18px;141    box-sizing: border-box;142  }143  .nav-item { width: 180px; display: flex; flex-direction: column; align-items: center; color: #a8b3bb; font-size: 28px; }144  .nav-item .icon { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }145  .nav-item .icon svg { width: 46px; height: 46px; stroke: #cfd7dd; stroke-width: 4; fill: none; }146  .nav-item.active .icon {147    background: #2a353c; border-radius: 36px;148    width: 120px; height: 84px;149  }150  .nav-item.active .icon svg { stroke: #e7eff5; }151  .nav-item.active .label { color: #e7eff5; }152 153  /* Gesture bar */154  .gesture {155    position: absolute; left: 50%; transform: translateX(-50%);156    bottom: 44px; width: 360px; height: 10px; background: #e6e6e6; border-radius: 6px; opacity: 0.85;157  }158</style>159</head>160<body>161<div id="render-target">162  <!-- Status Bar -->163  <div class="status-bar">164    <div class="status-left">10:45</div>165    <div class="status-right">166      <div class="sb-icon"></div>167      <div class="sb-icon"></div>168      <div class="sb-icon"></div>169      <div class="sb-icon"></div>170      <div class="battery"><div class="level"></div></div>171    </div>172  </div>173 174  <!-- Header -->175  <div class="header">176    <div class="header-title">Timer</div>177    <div class="menu-dots"><span></span><span></span><span></span></div>178  </div>179 180  <!-- Timer Card -->181  <div class="card">182    <div class="card-header">183      <div class="card-title">20m Timer</div>184      <div class="chip-close" title="Close">185        <svg viewBox="0 0 24 24">186          <line x1="5" y1="5" x2="19" y2="19"></line>187          <line x1="19" y1="5" x2="5" y2="19"></line>188        </svg>189      </div>190    </div>191 192    <div class="dial">193      <div class="inner">194        <div class="time-display">18:58</div>195        <div class="refresh-icon">196          <svg viewBox="0 0 24 24">197            <path d="M12 3a9 9 0 1 0 9 9"></path>198            <polyline points="12,3 12,7 8,7"></polyline>199          </svg>200        </div>201      </div>202    </div>203 204    <div class="actions">205      <button class="pill add-minute">+1:00</button>206      <button class="pill pause" title="Pause">207        <svg viewBox="0 0 24 24">208          <rect x="5" y="4" width="5" height="16" fill="#2b2436" stroke="none"></rect>209          <rect x="14" y="4" width="5" height="16" fill="#2b2436" stroke="none"></rect>210        </svg>211      </button>212    </div>213  </div>214 215  <!-- Floating Add Button -->216  <div class="fab">+</div>217 218  <!-- Bottom Navigation -->219  <div class="bottom-nav">220    <div class="nav-item">221      <div class="icon">222        <!-- Alarm icon -->223        <svg viewBox="0 0 24 24">224          <circle cx="12" cy="13" r="7"></circle>225          <line x1="12" y1="13" x2="12" y2="9"></line>226          <line x1="12" y1="13" x2="15" y2="15"></line>227          <polyline points="6,5 4,7"></polyline>228          <polyline points="18,5 20,7"></polyline>229        </svg>230      </div>231      <div class="label">Alarm</div>232    </div>233    <div class="nav-item">234      <div class="icon">235        <!-- Clock icon -->236        <svg viewBox="0 0 24 24">237          <circle cx="12" cy="12" r="8"></circle>238          <line x1="12" y1="12" x2="12" y2="7"></line>239          <line x1="12" y1="12" x2="16" y2="12"></line>240        </svg>241      </div>242      <div class="label">Clock</div>243    </div>244    <div class="nav-item active">245      <div class="icon">246        <!-- Hourglass icon -->247        <svg viewBox="0 0 24 24">248          <path d="M6 4h12M6 20h12"></path>249          <path d="M6 4c0 4 6 5 6 8s-6 4-6 8"></path>250          <path d="M18 4c0 4-6 5-6 8s6 4 6 8"></path>251        </svg>252      </div>253      <div class="label">Timer</div>254    </div>255    <div class="nav-item">256      <div class="icon">257        <!-- Stopwatch icon -->258        <svg viewBox="0 0 24 24">259          <circle cx="12" cy="13" r="7"></circle>260          <line x1="12" y1="13" x2="16" y2="11"></line>261          <rect x="10" y="3" width="4" height="2"></rect>262        </svg>263      </div>264      <div class="label">Stopwatch</div>265    </div>266    <div class="nav-item">267      <div class="icon">268        <!-- Bed icon -->269        <svg viewBox="0 0 24 24">270          <rect x="3" y="12" width="18" height="6"></rect>271          <rect x="3" y="9" width="7" height="3"></rect>272          <line x1="3" y1="18" x2="3" y2="20"></line>273          <line x1="21" y1="18" x2="21" y2="20"></line>274        </svg>275      </div>276      <div class="label">Bedtime</div>277    </div>278  </div>279 280  <div class="gesture"></div>281</div>282</body>283</html>