GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Timer UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #141318; /* overall dark */13    color: #EDE7F6;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 28px 36px;24    box-sizing: border-box;25    color: #DCD1EF;26    display: flex;27    justify-content: space-between;28    align-items: center;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .kebab {36    width: 32px; height: 32px; position: relative;37  }38  .kebab span {39    position: absolute; left: 14px; width: 6px; height: 6px; background: #CFC3E8; border-radius: 50%;40  }41  .kebab span:nth-child(1) { top: 2px; }42  .kebab span:nth-child(2) { top: 13px; }43  .kebab span:nth-child(3) { top: 24px; }44 45  /* Page Title */46  .page-title {47    position: absolute;48    top: 120px;49    left: 44px;50    font-size: 64px;51    letter-spacing: 0.5px;52    color: #E7E0F8;53  }54 55  /* Main card */56  .card {57    position: absolute;58    top: 220px;59    left: 30px;60    width: 1020px;61    height: 1580px;62    background: #1B191F;63    border-radius: 60px;64    box-shadow: 0 10px 30px rgba(0,0,0,0.35);65  }66  .card-header {67    position: absolute;68    top: 42px;69    left: 50px;70    font-size: 56px;71    color: #E0D6F5;72  }73  .close-chip {74    position: absolute;75    top: 46px;76    right: 46px;77    width: 76px;78    height: 76px;79    border-radius: 40px;80    background: #332E3A;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #CBB4E8;85    font-size: 48px;86    line-height: 0;87  }88 89  /* Progress Ring */90  .progress-ring {91    position: absolute;92    top: 220px;93    left: 60px;94    width: 900px;95    height: 900px;96    border-radius: 50%;97    background: conic-gradient(#B792DB 0deg, #B792DB 315deg, #3A3643 315deg 360deg);98  }99  .progress-ring::after {100    content: "";101    position: absolute;102    top: 36px;103    left: 36px;104    width: 828px;105    height: 828px;106    border-radius: 50%;107    background: #1B191F;108    box-shadow: inset 0 0 0 24px #6A6476; /* subtle inner track */109    opacity: 0.85;110  }111  .time-display {112    position: absolute;113    top: 480px;114    left: 0;115    width: 1020px;116    text-align: center;117    font-size: 210px;118    color: #F1EAFB;119    letter-spacing: 8px;120  }121 122  .restart-icon {123    position: absolute;124    top: 860px;125    left: 0;126    width: 1020px;127    height: 64px;128    display: flex;129    justify-content: center;130    align-items: center;131  }132  .restart-circle {133    width: 78px;134    height: 78px;135    border-radius: 50%;136    border: 8px solid #B792DB;137    display: flex;138    align-items: center;139    justify-content: center;140  }141  .restart-circle svg { width: 40px; height: 40px; }142 143  /* Bottom controls inside card */144  .controls {145    position: absolute;146    bottom: 140px;147    left: 50px;148    width: 920px;149    display: flex;150    justify-content: space-between;151    align-items: center;152  }153  .pill {154    width: 360px;155    height: 160px;156    border-radius: 90px;157    background: #3A3543;158    display: flex;159    align-items: center;160    justify-content: center;161    color: #EADDF7;162    font-size: 56px;163  }164  .play-btn {165    width: 360px;166    height: 160px;167    border-radius: 90px;168    background: #F3C8C6;169    display: flex;170    align-items: center;171    justify-content: center;172  }173  .play-btn svg { width: 54px; height: 54px; fill: #5A3A3A; }174 175  /* Center floating plus button */176  .big-plus {177    position: absolute;178    bottom: 430px;179    left: 50%;180    transform: translateX(-50%);181    width: 210px;182    height: 210px;183    border-radius: 50%;184    background: #E0C7FF;185    display: flex;186    align-items: center;187    justify-content: center;188    color: #342C3B;189    font-size: 110px;190    font-weight: bold;191  }192 193  /* Bottom navigation */194  .bottom-nav {195    position: absolute;196    bottom: 0;197    left: 0;198    width: 1080px;199    height: 240px;200    background: #1D1C22;201    border-top-left-radius: 32px;202    border-top-right-radius: 32px;203    display: flex;204    justify-content: space-around;205    align-items: center;206    color: #DAD2EB;207  }208  .nav-item {209    width: 180px;210    text-align: center;211  }212  .nav-icon {213    width: 100px; height: 100px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;214    border-radius: 24px;215  }216  .nav-item.active .nav-icon {217    background: rgba(183,146,219,0.18);218  }219  .nav-label { font-size: 40px; color: #DAD2EB; }220  .nav-item.active .nav-label { color: #EDE5FA; }221 222  /* Utility */223  .muted { color: #BFB4D4; }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status Bar -->230  <div class="status-bar">231    <div class="muted" style="font-size:42px;">10:26</div>232    <div class="status-right">233      <!-- WiFi icon -->234      <svg width="44" height="44" viewBox="0 0 24 24" fill="#D3C8EA">235        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"></path>236        <path d="M12 20c.7 0 1.3.3 1.8.8L12 22.6 10.2 20.8c.5-.5 1.1-.8 1.8-.8z"></path>237        <path d="M3.5 10.5c2.4-2.1 5.4-3.3 8.5-3.3s6.1 1.2 8.5 3.3l-1.7 1.8c-1.9-1.7-4.4-2.6-6.8-2.6s-4.9.9-6.8 2.6l-1.7-1.8z"></path>238        <path d="M6.8 13.6c1.5-1.3 3.5-2 5.2-2s3.7.6 5.2 2l-1.7 1.7c-1.1-1-2.5-1.5-3.6-1.5s-2.5.5-3.6 1.5l-1.7-1.7z"></path>239        <circle cx="12" cy="18" r="1.7"></circle>240      </svg>241      <!-- Battery icon -->242      <svg width="44" height="44" viewBox="0 0 24 24" fill="#D3C8EA">243        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#D3C8EA" stroke-width="1.5" fill="none"></rect>244        <rect x="5" y="8" width="12" height="8" fill="#D3C8EA"></rect>245        <rect x="20" y="10" width="2" height="4" rx="1" ry="1" fill="#D3C8EA"></rect>246      </svg>247      <!-- Kebab -->248      <div class="kebab">249        <span></span><span></span><span></span>250      </div>251    </div>252  </div>253 254  <!-- Title -->255  <div class="page-title">Timer</div>256 257  <!-- Main Card -->258  <div class="card">259    <div class="card-header">10m Timer</div>260    <div class="close-chip">×</div>261 262    <!-- Ring -->263    <div class="progress-ring"></div>264 265    <!-- Time -->266    <div class="time-display">10:14</div>267 268    <!-- Restart icon -->269    <div class="restart-icon">270      <div class="restart-circle">271        <svg viewBox="0 0 24 24">272          <path d="M12 5v3l3-3-3-3v3z" fill="#B792DB"></path>273          <path d="M12 6a6 6 0 1 1-4.2 10.2l1.4-1.4A4.5 4.5 0 1 0 12 7.5" fill="none" stroke="#B792DB" stroke-width="2" stroke-linecap="round"></path>274        </svg>275      </div>276    </div>277 278    <!-- Controls -->279    <div class="controls">280      <div class="pill">+1:00</div>281      <div class="play-btn">282        <svg viewBox="0 0 24 24">283          <path d="M8 6l10 6-10 6V6z"></path>284        </svg>285      </div>286    </div>287  </div>288 289  <!-- Floating Plus -->290  <div class="big-plus">+</div>291 292  <!-- Bottom Navigation -->293  <div class="bottom-nav">294    <div class="nav-item">295      <div class="nav-icon">296        <!-- Alarm icon -->297        <svg width="72" height="72" viewBox="0 0 24 24" fill="#DAD2EB">298          <path d="M7 3L3.5 6.5l1.5 1.4L8.5 4.4 7 3zm10 0l1.5 1.4-3.5 3.5-1.4-1.4L17 3z"></path>299          <circle cx="12" cy="14" r="7" stroke="#DAD2EB" stroke-width="1.8" fill="none"></circle>300          <path d="M12 10v5l4 2" stroke="#DAD2EB" stroke-width="2" stroke-linecap="round" fill="none"></path>301        </svg>302      </div>303      <div class="nav-label">Alarm</div>304    </div>305 306    <div class="nav-item">307      <div class="nav-icon">308        <!-- Clock icon -->309        <svg width="72" height="72" viewBox="0 0 24 24" fill="#DAD2EB">310          <circle cx="12" cy="12" r="9" stroke="#DAD2EB" stroke-width="1.8" fill="none"></circle>311          <path d="M12 6v6l4 2" stroke="#DAD2EB" stroke-width="2" stroke-linecap="round" fill="none"></path>312        </svg>313      </div>314      <div class="nav-label">Clock</div>315    </div>316 317    <div class="nav-item active">318      <div class="nav-icon">319        <!-- Hourglass (active) -->320        <svg width="72" height="72" viewBox="0 0 24 24" fill="#B792DB">321          <path d="M6 3h12v3c0 2.2-3 3.5-5 5 2 1.5 5 2.8 5 5v3H6v-3c0-2.2 3-3.5 5-5-2-1.5-5-2.8-5-5V3zm2 3c0 1.6 2.7 2.6 4 3.5 1.3-.9 4-1.9 4-3.5V5H8v1zm8 13v-1c0-1.6-2.7-2.6-4-3.5-1.3.9-4 1.9-4 3.5v1h8z"></path>322        </svg>323      </div>324      <div class="nav-label">Timer</div>325    </div>326 327    <div class="nav-item">328      <div class="nav-icon">329        <!-- Stopwatch icon -->330        <svg width="72" height="72" viewBox="0 0 24 24" fill="#DAD2EB">331          <rect x="10" y="2" width="4" height="3" rx="1" fill="#DAD2EB"></rect>332          <circle cx="12" cy="14" r="7" stroke="#DAD2EB" stroke-width="1.8" fill="none"></circle>333          <path d="M12 10v4h3" stroke="#DAD2EB" stroke-width="2" stroke-linecap="round" fill="none"></path>334        </svg>335      </div>336      <div class="nav-label">Stopwatch</div>337    </div>338 339    <div class="nav-item">340      <div class="nav-icon">341        <!-- Bed icon -->342        <svg width="72" height="72" viewBox="0 0 24 24" fill="#DAD2EB">343          <rect x="3" y="10" width="18" height="7" rx="1.5" fill="#DAD2EB"></rect>344          <rect x="3" y="7" width="5" height="3" rx="1.5" fill="#DAD2EB"></rect>345        </svg>346      </div>347      <div class="nav-label">Bedtime</div>348    </div>349  </div>350</div>351</body>352</html>