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>Schedule Setup</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13    color: #212121;14  }15  #render-target {16    position: relative;17    width: 1080px;18    height: 2400px;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Hero */24  .hero {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 920px;30  }31  .hero .img {32    position: absolute;33    inset: 0;34    background: #E0E0E0;35    border-bottom: 1px solid #BDBDBD;36    display: flex;37    justify-content: center;38    align-items: center;39    color: #555;40    font-size: 36px;41    letter-spacing: 0.2px;42  }43  .hero .darken {44    position: absolute;45    inset: 0;46    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0.15) 100%);47  }48  .close-btn {49    position: absolute;50    top: 72px;51    left: 36px;52    width: 80px;53    height: 80px;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #fff;58    opacity: 0.95;59  }60  .close-btn svg {61    width: 40px;62    height: 40px;63    fill: none;64    stroke: #fff;65    stroke-width: 8;66    stroke-linecap: round;67  }68  .hero-text {69    position: absolute;70    left: 60px;71    right: 60px;72    top: 240px;73    color: #fff;74  }75  .hero-text h1 {76    margin: 0 0 28px 0;77    font-weight: 800;78    font-size: 84px;79    line-height: 96px;80    letter-spacing: -0.5px;81  }82  .hero-text p {83    margin: 0;84    font-size: 36px;85    line-height: 48px;86    color: rgba(255,255,255,0.95);87  }88 89  /* White sheet */90  .sheet {91    position: absolute;92    top: 880px;93    left: 0;94    right: 0;95    bottom: 160px; /* leave room for bottom button */96    background: #fff;97    border-top-left-radius: 24px;98    border-top-right-radius: 24px;99    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);100    padding: 40px 48px 0 48px;101  }102  .section-title {103    font-size: 40px;104    font-weight: 600;105    margin: 16px 0 28px 0;106    color: #1e1e1e;107  }108 109  /* Days row */110  .days-row {111    display: flex;112    gap: 28px;113    padding-bottom: 24px;114    overflow: hidden;115  }116  .day {117    width: 112px;118    text-align: center;119  }120  .day .circle {121    width: 112px;122    height: 112px;123    border-radius: 56px;124    background: #1976D2;125    display: flex;126    align-items: center;127    justify-content: center;128    box-shadow: 0 2px 2px rgba(0,0,0,0.08);129    margin-bottom: 10px;130  }131  .day .circle svg {132    width: 52px;133    height: 52px;134  }135  .day .label {136    font-size: 34px;137    color: #3c4043;138  }139 140  .divider {141    height: 1px;142    background: #E0E0E0;143    margin: 18px 0 18px 0;144  }145 146  /* Info rows */147  .row {148    display: flex;149    align-items: center;150    justify-content: space-between;151    min-height: 120px;152    font-size: 40px;153    color: #263238;154  }155  .row .value {156    font-weight: 600;157    color: #263238;158  }159 160  /* Toggles */161  .switch {162    position: relative;163    width: 128px;164    height: 68px;165    background: #E0E0E0;166    border-radius: 34px;167    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);168  }169  .switch .thumb {170    position: absolute;171    top: 4px;172    left: 4px;173    width: 60px;174    height: 60px;175    border-radius: 50%;176    background: #fff;177    box-shadow: 0 2px 6px rgba(0,0,0,0.22);178    transition: left 0.25s ease;179  }180  .switch.on {181    background: #1BCB7F;182  }183  .switch.on .thumb {184    left: 64px;185  }186  .switch.off {187    background: #CFD8DC;188  }189 190  /* Bottom button */191  .bottom-bar {192    position: absolute;193    left: 0;194    right: 0;195    bottom: 0;196    height: 160px;197    background: #1976D2;198    display: flex;199    align-items: center;200    justify-content: center;201  }202  .bottom-bar .btn {203    color: #fff;204    font-size: 44px;205    font-weight: 700;206    letter-spacing: 0.3px;207  }208</style>209</head>210<body>211<div id="render-target">212  <!-- Hero section -->213  <div class="hero">214    <div class="img">[IMG: Subway platform with person wearing earphones]</div>215    <div class="darken"></div>216    <div class="close-btn" aria-label="Close">217      <svg viewBox="0 0 24 24">218        <path d="M6 6 L18 18 M18 6 L6 18"></path>219      </svg>220    </div>221    <div class="hero-text">222      <h1>When would you like to learn?</h1>223      <p>Research shows that studying at the same time each day helps form habits.</p>224    </div>225  </div>226 227  <!-- Content sheet -->228  <div class="sheet">229    <div class="section-title">Days</div>230    <div class="days-row">231      <!-- Each selected day -->232      <div class="day">233        <div class="circle">234          <svg viewBox="0 0 24 24" fill="#ffffff">235            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>236          </svg>237        </div>238        <div class="label">Mon</div>239      </div>240      <div class="day">241        <div class="circle">242          <svg viewBox="0 0 24 24" fill="#ffffff">243            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>244          </svg>245        </div>246        <div class="label">Tue</div>247      </div>248      <div class="day">249        <div class="circle">250          <svg viewBox="0 0 24 24" fill="#ffffff">251            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>252          </svg>253        </div>254        <div class="label">Wed</div>255      </div>256      <div class="day">257        <div class="circle">258          <svg viewBox="0 0 24 24" fill="#ffffff">259            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>260          </svg>261        </div>262        <div class="label">Thu</div>263      </div>264      <div class="day">265        <div class="circle">266          <svg viewBox="0 0 24 24" fill="#ffffff">267            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>268          </svg>269        </div>270        <div class="label">Fri</div>271      </div>272      <div class="day">273        <div class="circle">274          <svg viewBox="0 0 24 24" fill="#ffffff">275            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>276          </svg>277        </div>278        <div class="label">Sat</div>279      </div>280      <div class="day">281        <div class="circle">282          <svg viewBox="0 0 24 24" fill="#ffffff">283            <path d="M9.2 16.6l-4-4 1.4-1.4L9.2 13.8l8.2-8.2 1.4 1.4z"></path>284          </svg>285        </div>286        <div class="label">Sun</div>287      </div>288    </div>289 290    <div class="divider"></div>291 292    <div class="row">293      <div class="label">Time</div>294      <div class="value">5:00 AM</div>295    </div>296 297    <div class="divider"></div>298 299    <div class="row">300      <div class="label">Minutes / day</div>301      <div class="value">5</div>302    </div>303 304    <div class="divider" style="margin-top: 26px;"></div>305 306    <div class="row">307      <div class="label">Notifications</div>308      <div class="switch on">309        <div class="thumb"></div>310      </div>311    </div>312 313    <div class="divider"></div>314 315    <div class="row" style="min-height: 130px;">316      <div class="label" style="max-width: 800px;">Add study reminders to my calendar</div>317      <div class="switch off">318        <div class="thumb"></div>319      </div>320    </div>321  </div>322 323  <!-- Bottom CTA -->324  <div class="bottom-bar">325    <div class="btn">Continue</div>326  </div>327</div>328</body>329</html>