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">6<title>Alarm UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #1C1B1F;15    color: #ECE7F4;16  }17 18  .statusbar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDE7F8;25    font-size: 34px;26    letter-spacing: 1px;27  }28 29  .status-icons { display: flex; gap: 22px; align-items: center; opacity: 0.9; }30  .status-icons svg { width: 36px; height: 36px; }31 32  .screen-title {33    font-size: 78px;34    font-weight: 600;35    padding: 28px 48px 8px;36  }37 38  .overflow-menu {39    position: absolute;40    top: 148px;41    right: 42px;42    width: 12px;43    height: 60px;44    display: flex;45    flex-direction: column;46    justify-content: space-between;47    align-items: center;48  }49  .overflow-menu span {50    display: block;51    width: 12px; height: 12px; border-radius: 50%;52    background: #CFC3DF;53    opacity: 0.7;54  }55 56  .card {57    margin: 18px 36px;58    background: #26242B;59    border-radius: 44px;60    padding: 40px;61    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);62  }63 64  .card.small { height: 360px; }65  .card.large { padding-top: 28px; }66 67  .time-row {68    display: flex; align-items: baseline; gap: 18px;69  }70  .time-big { font-size: 158px; font-weight: 700; letter-spacing: 2px; }71  .ampm { font-size: 44px; color: #BDB4C9; }72 73  .subtext { margin-top: 16px; font-size: 44px; color: #A7A0B5; }74 75  .chev-circle {76    margin-left: auto;77    width: 66px; height: 66px;78    border-radius: 50%;79    background: #3B3742;80    display: flex; align-items: center; justify-content: center;81  }82  .chev-circle svg { width: 28px; height: 28px; fill: #BFB3D6; }83 84  .row-between {85    display: flex; align-items: center; justify-content: space-between;86    gap: 20px;87  }88 89  .label-row {90    margin: 8px 0 26px;91    display: flex; align-items: center; gap: 18px;92    color: #CFC7DC;93    font-size: 40px;94  }95  .label-row svg { width: 46px; height: 46px; opacity: 0.9; }96 97  .toggle {98    width: 172px; height: 82px; border-radius: 82px; background: #4B4654; position: relative;99  }100  .toggle.on { background: #6E4F88; }101  .toggle .knob {102    position: absolute; top: 9px; right: 9px;103    width: 64px; height: 64px; border-radius: 50%; background: #E7C9FF;104  }105  .toggle.left .knob { left: 9px; right: auto; }106 107  .days {108    display: flex; gap: 24px; margin: 28px 0 20px;109  }110  .day {111    width: 96px; height: 96px; border-radius: 50%;112    border: 2px solid #57515F; color: #C7C0D5;113    display: flex; align-items: center; justify-content: center;114    font-size: 44px; opacity: 0.9;115  }116 117  .setting-row {118    display: flex; align-items: center; justify-content: space-between;119    padding: 24px 0;120    border-top: 1px solid rgba(255,255,255,0.05);121  }122  .setting-row:first-of-type { border-top: none; }123  .setting-left { display: flex; align-items: center; gap: 24px; font-size: 44px; color: #E6E0EF; }124  .setting-left svg { width: 52px; height: 52px; fill: #CFC7DC; }125  .setting-right { display: flex; align-items: center; gap: 16px; }126  .circle-action {127    width: 64px; height: 64px; border-radius: 50%;128    border: 3px solid #CFC3DF; display: flex; align-items: center; justify-content: center;129    color: #CFC3DF; font-size: 52px; line-height: 0;130  }131  .check {132    width: 56px; height: 56px; border-radius: 50%;133    background: #E5CCFF; display: flex; align-items: center; justify-content: center;134  }135  .check svg { width: 36px; height: 36px; fill: #4E3A66; }136 137  .snackbar {138    background: #6C6673;139    color: #EDE7F5;140    height: 106px;141    border-radius: 54px;142    padding: 0 36px;143    display: flex; align-items: center;144    font-size: 40px;145    margin: 24px 0;146  }147 148  .trash-row {149    display: flex; align-items: center; gap: 20px;150    font-size: 44px; color: #E6E0EF;151    padding: 22px 0 12px;152  }153  .trash-row svg { width: 52px; height: 52px; fill: #CFC3DF; }154 155  .fab {156    position: absolute;157    bottom: 250px;158    left: 50%;159    transform: translateX(-50%);160    width: 210px; height: 210px; border-radius: 50%;161    background: #E7C9FF;162    display: flex; align-items: center; justify-content: center;163    color: #3B2D4E; font-size: 120px; line-height: 0; font-weight: 400;164    box-shadow: 0 8px 24px rgba(0,0,0,0.35);165  }166 167  .bottom-nav {168    position: absolute; bottom: 0; left: 0; right: 0;169    height: 210px; background: #221F27; padding: 18px 24px 28px;170    display: flex; align-items: flex-end; justify-content: space-around;171    color: #D5CBE7;172  }173  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 36px; color: #B5AEC7; }174  .nav-item svg { width: 60px; height: 60px; }175  .nav-item.active { color: #E7D6FF; }176  .nav-item.active .icon-wrap {177    background: #4D3B60; padding: 18px; border-radius: 28px;178  }179  .icon-wrap svg { display: block; }180 181  .gesture {182    position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);183    width: 320px; height: 12px; background: #E6E2ED; border-radius: 12px; opacity: 0.9;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status Bar -->191  <div class="statusbar">192    <div>10:14</div>193    <div class="status-icons">194      <!-- simple icons -->195      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M7 2v2h10V2h2v4H5V2h2zm5 4a7 7 0 1 1 0 14a7 7 0 0 1 0-14zm0 2a5 5 0 1 0 0 10a5 5 0 0 0 0-10z"/></svg>196      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M12 4C7 4 3 8 3 8l9 12l9-12s-4-4-9-4z"/></svg>197      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M12 2a9 9 0 1 0 0 18a9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14a7 7 0 0 1 0-14z"/></svg>198      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M20 8h-3l-1-2H8L7 8H4l-1 12h18L20 8zM7.5 10h9l.8 8H6.7l.8-8z"/></svg>199      <!-- wifi -->200      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M12 20l4-4H8l4 4zM2 8a16 16 0 0 1 20 0l-2 2a12 12 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2z"/></svg>201      <!-- battery -->202      <svg viewBox="0 0 24 24"><path fill="#EDE7F8" d="M2 8v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1h2v-6h-2V8a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zm2 0h12v8H4V8z"/></svg>203    </div>204  </div>205 206  <div class="screen-title">Alarm</div>207 208  <div class="overflow-menu" aria-hidden="true">209    <span></span><span></span><span></span>210  </div>211 212  <!-- Card 1: Collapsed alarm -->213  <div class="card small" style="margin-top: 8px;">214    <div class="row-between">215      <div class="time-row">216        <div class="time-big" style="color:#BFB7CB;">8:30</div>217        <div class="ampm">AM</div>218      </div>219      <div class="chev-circle">220        <svg viewBox="0 0 24 24"><path d="M7 10l5 5l5-5H7z"/></svg>221      </div>222    </div>223    <div class="row-between" style="margin-top: 8px;">224      <div class="subtext">Mon, Tue, Wed, Thu, Fri</div>225      <div class="toggle on">226        <div class="knob"></div>227      </div>228    </div>229  </div>230 231  <!-- Card 2: Expanded alarm -->232  <div class="card large">233    <div class="row-between">234      <div class="label-row">235        <!-- label icon -->236        <svg viewBox="0 0 24 24"><path d="M3 7l6-4h9l3 4-9 12L3 7zm6-2.5L5.6 7L12 16l6.4-9l-1.8-2.5H9z"/></svg>237        <span>Add label</span>238      </div>239      <div class="chev-circle">240        <svg viewBox="0 0 24 24"><path d="M7 14l5-5l5 5H7z"/></svg>241      </div>242    </div>243 244    <div class="row-between" style="align-items: flex-end; margin-top: 8px;">245      <div class="time-row">246        <div class="time-big">9:15</div>247        <div class="ampm">AM</div>248      </div>249      <div class="toggle on">250        <div class="knob"></div>251      </div>252    </div>253 254    <div class="subtext" style="margin-top: 18px;">Tomorrow</div>255 256    <div class="days">257      <div class="day">S</div>258      <div class="day">M</div>259      <div class="day">T</div>260      <div class="day">W</div>261      <div class="day">T</div>262      <div class="day">F</div>263      <div class="day">S</div>264    </div>265 266    <div class="setting-row">267      <div class="setting-left">268        <!-- calendar/clock icon -->269        <svg viewBox="0 0 24 24"><path d="M7 2h2v3h6V2h2v3h3v17H4V5h3V2zm12 7H5v9h14V9z"/></svg>270        <span>Schedule alarm</span>271      </div>272      <div class="circle-action">+</div>273    </div>274 275    <div class="setting-row">276      <div class="setting-left">277        <!-- bell icon -->278        <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm6-6V11a6 6 0 0 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>279        <span>Default (Bright Morning)</span>280      </div>281    </div>282 283    <div class="setting-row">284      <div class="setting-left">285        <!-- vibrate icon -->286        <svg viewBox="0 0 24 24"><path d="M3 8l2-2l2 2l-2 2L3 8zm14-2l2 2l-2 2l-2-2l2-2zM8 5h8v14H8V5zm-5 9l2-2l2 2l-2 2l-2-2zm16-2l2 2l-2 2l-2-2l2-2z"/></svg>287        <span>Vibrate</span>288      </div>289      <div class="check">290        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5l1.4-1.4L9 13.4l7.1-7.1l1.4 1.4z"/></svg>291      </div>292    </div>293 294    <div class="snackbar">Alarm set for 23 hours and 1 minute from now.</div>295 296    <div class="trash-row">297      <!-- trash icon -->298      <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v9h-2V9zm4 0h2v9h-2V9zM6 9h2v9H6V9z"/></svg>299      <span>Delete</span>300    </div>301  </div>302 303  <!-- Floating action button -->304  <div class="fab">+</div>305 306  <!-- Gesture bar -->307  <div class="gesture"></div>308 309  <!-- Bottom navigation -->310  <div class="bottom-nav">311    <div class="nav-item active">312      <div class="icon-wrap">313        <svg viewBox="0 0 24 24"><path fill="#E7D6FF" d="M12 7a6 6 0 1 0 0 12a6 6 0 0 0 0-12zm0-5h2v3h-2V2z"/></svg>314      </div>315      <div>Alarm</div>316    </div>317    <div class="nav-item">318      <svg viewBox="0 0 24 24"><path fill="#B5AEC7" d="M12 7a5 5 0 1 0 0 10a5 5 0 0 0 0-10zm1-5h-2v6h6V6h-4V2z"/></svg>319      <div>Clock</div>320    </div>321    <div class="nav-item">322      <svg viewBox="0 0 24 24"><path fill="#B5AEC7" d="M12 2l4 8h-8l4-8zm-6 10h12v10H6V12z"/></svg>323      <div>Timer</div>324    </div>325    <div class="nav-item">326      <svg viewBox="0 0 24 24"><path fill="#B5AEC7" d="M8 2h8v4H8V2zm-3 6h14v12H5V8zm4 2v8h2v-8H9zm4 0v8h2v-8h-2z"/></svg>327      <div>Stopwatch</div>328    </div>329    <div class="nav-item">330      <svg viewBox="0 0 24 24"><path fill="#B5AEC7" d="M3 10h18v9H3v-9zm2-5h5v3H5V5z"/></svg>331      <div>Bedtime</div>332    </div>333  </div>334</div>335</body>336</html>