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>Repeat Modal UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31    font-size: 42px;32    box-sizing: border-box;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon svg { width: 38px; height: 38px; fill: #FFFFFF; }40 41  /* Top app bar */42  .app-bar {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 120px;48    display: flex;49    align-items: center;50    box-sizing: border-box;51    padding: 0 36px;52    color: #E0E0E0;53  }54  .app-left, .app-right {55    display: flex;56    align-items: center;57    gap: 30px;58  }59  .app-center {60    flex: 1;61    display: flex;62    align-items: center;63    gap: 40px;64    justify-content: center;65  }66  .tab {67    font-size: 54px;68    color: #9E9E9E;69    position: relative;70    padding: 8px 6px;71  }72  .tab.active { color: #FFFFFF; }73  .tab.active::after {74    content: "";75    position: absolute;76    left: 0;77    right: 0;78    bottom: -12px;79    height: 8px;80    background: #FF8C00;81    border-radius: 4px;82  }83  .icon-btn svg { width: 48px; height: 48px; stroke: #FFFFFF; fill: none; stroke-width: 6; }84 85  /* Calendar area (faint behind the modal) */86  .calendar {87    position: absolute;88    top: 250px;89    left: 36px;90    right: 36px;91    color: #BDBDBD;92    opacity: 0.28;93  }94  .month-row {95    display: flex;96    align-items: center;97    gap: 18px;98    font-size: 54px;99    margin-bottom: 12px;100  }101  .weekdays {102    display: grid;103    grid-template-columns: repeat(7, 1fr);104    gap: 10px;105    font-size: 34px;106    margin-top: 18px;107  }108  .days {109    display: grid;110    grid-template-columns: repeat(7, 1fr);111    gap: 10px;112    margin-top: 24px;113  }114  .day {115    height: 90px;116    border-radius: 12px;117    display: flex;118    align-items: center;119    justify-content: center;120    font-size: 42px;121    border: 1px solid #2B2B2B;122    color: #E0E0E0;123  }124 125  /* Bottom sheet modal */126  .bottom-sheet {127    position: absolute;128    left: 40px;129    right: 40px;130    top: 820px;131    background: #1E1E1E;132    border-radius: 28px;133    box-shadow: 0 20px 60px rgba(0,0,0,0.6);134    padding: 42px;135  }136  .sheet-title {137    font-size: 56px;138    font-weight: 600;139    margin-bottom: 32px;140    color: #FFFFFF;141  }142 143  .radio-list { display: flex; flex-direction: column; gap: 34px; }144  .radio-item {145    display: flex;146    align-items: center;147    justify-content: space-between;148  }149  .radio-left {150    display: flex;151    align-items: center;152    gap: 28px;153  }154  .radio-circle {155    width: 44px;156    height: 44px;157    border-radius: 50%;158    border: 4px solid #4A4A4A;159    position: relative;160    box-sizing: border-box;161  }162  .radio-circle.selected {163    border-color: #FF8C00;164  }165  .radio-circle.selected::after {166    content: "";167    position: absolute;168    top: 50%;169    left: 50%;170    width: 18px;171    height: 18px;172    background: #FF8C00;173    border-radius: 50%;174    transform: translate(-50%, -50%);175  }176  .radio-label {177    font-size: 50px;178    color: #EDEDED;179  }180  .radio-hint {181    color: #C9C9C9;182    font-size: 48px;183  }184 185  .sheet-footer {186    margin-top: 48px;187    display: flex;188    justify-content: flex-end;189  }190  .cancel {191    font-size: 50px;192    color: #FF8C00;193    font-weight: 600;194    letter-spacing: 1px;195  }196 197  /* Bottom navigation pill */198  .nav-pill {199    position: absolute;200    bottom: 48px;201    left: 50%;202    transform: translateX(-50%);203    width: 420px;204    height: 18px;205    border-radius: 9px;206    background: #E0E0E0;207    opacity: 0.85;208  }209</style>210</head>211<body>212<div id="render-target">213  <!-- Status Bar -->214  <div class="status-bar">215    <div class="status-left">216      <div>2:55</div>217      <div class="status-icon">218        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><text x="12" y="16" font-size="12" text-anchor="middle" fill="#000">B</text></svg>219      </div>220      <div class="status-icon">221        <svg viewBox="0 0 24 24"><path d="M4 12l6 6 10-14" stroke="#fff" stroke-width="2" fill="none"></path></svg>222      </div>223      <div class="status-icon">224        <svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18" stroke="#fff" stroke-width="2" fill="none"></path></svg>225      </div>226      <div class="status-icon">227        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"></circle></svg>228      </div>229    </div>230    <div class="status-right">231      <div class="status-icon">232        <svg viewBox="0 0 24 24"><path d="M3 18h18l-9-12z" fill="#fff"></path></svg>233      </div>234      <div class="status-icon">235        <svg viewBox="0 0 24 24"><path d="M7 20h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2l-1-1H10L9 5H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2z" fill="#fff"></path></svg>236      </div>237    </div>238  </div>239 240  <!-- App Bar -->241  <div class="app-bar">242    <div class="app-left">243      <div class="icon-btn">244        <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20" stroke="#fff" stroke-width="2" fill="none"/></svg>245      </div>246    </div>247    <div class="app-center">248      <div class="tab active">Date</div>249      <div class="tab">Duration</div>250    </div>251    <div class="app-right">252      <div class="icon-btn">253        <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="2" fill="none"/></svg>254      </div>255      <div class="icon-btn">256        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="12" cy="19" r="2" fill="#fff"/></svg>257      </div>258    </div>259  </div>260 261  <!-- Faint Calendar behind modal -->262  <div class="calendar">263    <div class="month-row">264      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none"/></svg>265      <div>August</div>266    </div>267    <div class="weekdays">268      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>269    </div>270    <div class="days">271      <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>272      <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>273    </div>274  </div>275 276  <!-- Bottom Sheet Modal -->277  <div class="bottom-sheet">278    <div class="sheet-title">Repeat</div>279    <div class="radio-list">280      <div class="radio-item">281        <div class="radio-left">282          <div class="radio-circle selected"></div>283          <div class="radio-label">Never</div>284        </div>285      </div>286 287      <div class="radio-item">288        <div class="radio-left">289          <div class="radio-circle"></div>290          <div class="radio-label">Daily</div>291        </div>292      </div>293 294      <div class="radio-item">295        <div class="radio-left">296          <div class="radio-circle"></div>297          <div class="radio-label">Every Weekday (Mon Fri)</div>298        </div>299      </div>300 301      <div class="radio-item">302        <div class="radio-left">303          <div class="radio-circle"></div>304          <div class="radio-label">Weekly (Sun)</div>305        </div>306      </div>307 308      <div class="radio-item">309        <div class="radio-left">310          <div class="radio-circle"></div>311          <div class="radio-label">Monthly (The 13 day)</div>312        </div>313      </div>314 315      <div class="radio-item">316        <div class="radio-left">317          <div class="radio-circle"></div>318          <div class="radio-label">Monthly (The Second Sun)</div>319        </div>320      </div>321 322      <div class="radio-item">323        <div class="radio-left">324          <div class="radio-circle"></div>325          <div class="radio-label">Yearly (on Aug 13)</div>326        </div>327      </div>328 329      <div class="radio-item">330        <div class="radio-left">331          <div class="radio-circle"></div>332          <div class="radio-label">Custom</div>333        </div>334      </div>335    </div>336 337    <div class="sheet-footer">338      <div class="cancel">CANCEL</div>339    </div>340  </div>341 342  <!-- Navigation pill -->343  <div class="nav-pill"></div>344</div>345</body>346</html>