GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Alarm UI</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: #1F1918;13    color: #EDE5E2;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 30px 40px;24    box-sizing: border-box;25    color: #EDE5E2;26    font-size: 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .status-icons {32    display: flex;33    gap: 20px;34    align-items: center;35  }36  .dot { width: 18px; height: 18px; background: #B7AEA9; border-radius: 50%; opacity: 0.9; }37  .icon-svg { width: 40px; height: 40px; fill: none; stroke: #EDE5E2; stroke-width: 4px; }38 39  /* Header Title */40  .title {41    position: absolute;42    top: 140px;43    left: 40px;44    font-size: 66px;45    font-weight: 600;46    letter-spacing: 0.5px;47  }48 49  /* Menu (kebab) */50  .menu {51    position: absolute;52    top: 150px;53    right: 40px;54    width: 48px;55    height: 48px;56  }57  .menu svg { width: 100%; height: 100%; fill: #B7AEA9; }58 59  /* Cards */60  .card {61    position: absolute;62    left: 32px;63    width: 1016px;64    background: #2A221F;65    border-radius: 40px;66    box-sizing: border-box;67    padding: 40px;68  }69  .card .label {70    font-size: 36px;71    color: #D7CEC8;72    margin-bottom: 20px;73  }74  .time-row {75    display: flex;76    align-items: baseline;77    gap: 18px;78  }79  .time-big {80    font-size: 160px;81    font-weight: 700;82    line-height: 1;83    color: #F1E9E6;84  }85  .ampm {86    font-size: 64px;87    color: #E6DDD8;88    margin-top: 18px;89  }90  .subtext {91    margin-top: 26px;92    font-size: 40px;93    color: #BFB6B1;94  }95  .dismiss {96    margin-top: 26px;97    font-size: 42px;98    color: #FFB8AD;99  }100  .chevron {101    position: absolute;102    top: 36px;103    right: 36px;104    width: 64px;105    height: 64px;106    background: #3A2F2C;107    border-radius: 50%;108    display: flex;109    align-items: center;110    justify-content: center;111  }112  .chevron svg { width: 34px; height: 34px; fill: none; stroke: #D2C9C4; stroke-width: 6px; }113 114  /* Switch */115  .switch {116    position: absolute;117    right: 44px;118    bottom: 44px;119    width: 180px;120    height: 84px;121    background: #6B3B34;122    border-radius: 50px;123    display: flex;124    align-items: center;125    padding: 0 10px;126    box-sizing: border-box;127  }128  .switch .knob {129    width: 68px;130    height: 68px;131    background: #F6C3B8;132    border-radius: 50%;133    margin-left: auto;134  }135 136  /* Calendar row */137  .calendar-row {138    display: flex;139    align-items: center;140    gap: 22px;141    margin-top: 30px;142    color: #CFC7C2;143    font-size: 42px;144  }145  .calendar-icon {146    width: 56px;147    height: 56px;148  }149  .calendar-icon svg { width: 100%; height: 100%; fill: none; stroke: #CFC7C2; stroke-width: 6px; }150 151  /* Toast */152  .toast {153    position: absolute;154    left: 70px;155    bottom: 520px;156    width: 940px;157    height: 110px;158    background: #2A211F;159    border-radius: 60px;160    display: flex;161    align-items: center;162    justify-content: space-between;163    padding: 0 40px;164    box-sizing: border-box;165    color: #BFB6B1;166    font-size: 40px;167  }168  .toast .undo { color: #DCCFCC; }169 170  /* Floating Action Button */171  .fab {172    position: absolute;173    left: 50%;174    transform: translateX(-50%);175    bottom: 360px;176    width: 220px;177    height: 220px;178    background: #FFC3B6;179    border-radius: 50%;180    display: flex;181    align-items: center;182    justify-content: center;183    box-shadow: 0 10px 20px rgba(0,0,0,0.4);184  }185  .fab svg { width: 84px; height: 84px; fill: none; stroke: #4C2F2A; stroke-width: 16px; }186 187  /* Bottom navigation */188  .bottom-nav {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 220px;194    background: #2A221F;195    display: flex;196    align-items: center;197    justify-content: space-around;198    color: #CFC7C2;199    font-size: 36px;200  }201  .nav-item {202    display: flex;203    flex-direction: column;204    align-items: center;205    gap: 14px;206  }207  .nav-icon {208    width: 84px;209    height: 84px;210    border-radius: 44px;211    display: flex;212    align-items: center;213    justify-content: center;214  }215  .nav-icon svg { width: 52px; height: 52px; stroke: #CFC7C2; stroke-width: 6px; fill: none; }216  .nav-item.active .nav-icon {217    background: #443431;218    color: #FFE3DB;219  }220  .nav-item.active .label { color: #FFE3DB; }221 222  /* Divider / gesture bar */223  .gesture-bar {224    position: absolute;225    bottom: 240px;226    left: 50%;227    transform: translateX(-50%);228    width: 520px;229    height: 16px;230    border-radius: 8px;231    background: #C9C0BC;232    opacity: 0.5;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Status Bar -->240  <div class="status-bar">241    <div>5:17</div>242    <div class="status-icons">243      <div class="dot"></div>244      <div class="dot"></div>245      <div class="dot"></div>246      <!-- Search-like icon -->247      <svg class="icon-svg" viewBox="0 0 24 24">248        <circle cx="10" cy="10" r="7"></circle>249        <line x1="15" y1="15" x2="22" y2="22"></line>250      </svg>251      <!-- Wifi -->252      <svg class="icon-svg" viewBox="0 0 24 24">253        <path d="M2 8c5-4 15-4 20 0"></path>254        <path d="M5 12c3-2 11-2 14 0"></path>255        <path d="M9 16c2-1 4-1 6 0"></path>256        <circle cx="12" cy="19" r="2"></circle>257      </svg>258      <!-- Battery -->259      <svg class="icon-svg" viewBox="0 0 28 24">260        <rect x="2" y="6" width="20" height="12" rx="2"></rect>261        <rect x="23" y="10" width="3" height="4"></rect>262      </svg>263    </div>264  </div>265 266  <!-- Title -->267  <div class="title">Alarm</div>268  <!-- Menu -->269  <div class="menu">270    <svg viewBox="0 0 24 24">271      <circle cx="12" cy="5" r="2.5"></circle>272      <circle cx="12" cy="12" r="2.5"></circle>273      <circle cx="12" cy="19" r="2.5"></circle>274    </svg>275  </div>276 277  <!-- Card 1 -->278  <div class="card" style="top: 220px; height: 520px;">279    <div class="label">Gym</div>280    <div class="time-row">281      <div class="time-big">6:00</div>282      <div class="ampm">pm</div>283    </div>284    <div class="subtext">Today</div>285    <div class="dismiss">Dismiss</div>286    <div class="chevron">287      <svg viewBox="0 0 24 24">288        <polyline points="6,9 12,15 18,9"></polyline>289      </svg>290    </div>291    <div class="switch">292      <div class="knob"></div>293    </div>294  </div>295 296  <!-- Card 2 -->297  <div class="card" style="top: 780px; height: 520px;">298    <div class="label">Party</div>299    <div class="time-row">300      <div class="time-big">11:00</div>301      <div class="ampm">pm</div>302    </div>303 304    <div class="calendar-row">305      <div class="calendar-icon">306        <svg viewBox="0 0 24 24">307          <rect x="3" y="5" width="18" height="16" rx="2"></rect>308          <line x1="3" y1="10" x2="21" y2="10"></line>309          <line x1="7" y1="3" x2="7" y2="8"></line>310          <line x1="17" y1="3" x2="17" y2="8"></line>311        </svg>312      </div>313      <div>Scheduled for 30 September</div>314    </div>315 316    <div class="chevron" style="top: 36px; right: 36px;">317      <svg viewBox="0 0 24 24">318        <polyline points="6,9 12,15 18,9"></polyline>319      </svg>320    </div>321    <div class="switch">322      <div class="knob"></div>323    </div>324  </div>325 326  <!-- Toast -->327  <div class="toast">328    <div>Alarm deleted</div>329    <div class="undo">Undo</div>330  </div>331 332  <!-- Floating Action Button -->333  <div class="fab">334    <svg viewBox="0 0 24 24">335      <line x1="12" y1="4" x2="12" y2="20"></line>336      <line x1="4" y1="12" x2="20" y2="12"></line>337    </svg>338  </div>339 340  <!-- Gesture bar -->341  <div class="gesture-bar"></div>342 343  <!-- Bottom Navigation -->344  <div class="bottom-nav">345    <div class="nav-item active">346      <div class="nav-icon">347        <svg viewBox="0 0 24 24">348          <path d="M7 3h10v4H7z"></path>349          <circle cx="12" cy="14" r="5"></circle>350        </svg>351      </div>352      <div class="label">Alarm</div>353    </div>354    <div class="nav-item">355      <div class="nav-icon">356        <svg viewBox="0 0 24 24">357          <circle cx="12" cy="12" r="9"></circle>358          <line x1="12" y1="4" x2="12" y2="12"></line>359          <line x1="12" y1="12" x2="16" y2="14"></line>360        </svg>361      </div>362      <div class="label">Clock</div>363    </div>364    <div class="nav-item">365      <div class="nav-icon">366        <svg viewBox="0 0 24 24">367          <circle cx="12" cy="12" r="10"></circle>368          <path d="M12 6v6l4 2"></path>369        </svg>370      </div>371      <div class="label">Timer</div>372    </div>373    <div class="nav-item">374      <div class="nav-icon">375        <svg viewBox="0 0 24 24">376          <circle cx="12" cy="12" r="9"></circle>377          <path d="M8 8l8 8M16 8l-8 8"></path>378        </svg>379      </div>380      <div class="label">Stopwatch</div>381    </div>382    <div class="nav-item">383      <div class="nav-icon">384        <svg viewBox="0 0 24 24">385          <rect x="3" y="10" width="18" height="8" rx="2"></rect>386          <rect x="3" y="6" width="8" height="4" rx="1"></rect>387        </svg>388      </div>389      <div class="label">Bedtime</div>390    </div>391  </div>392 393</div>394</body>395</html>