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 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: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Hero section */20  .hero {21    position: relative;22    width: 100%;23    height: 820px;24  }25  .hero-img {26    position: absolute;27    left: 0; top: 0;28    width: 100%; height: 100%;29    background: #E0E0E0;30    border-bottom: 1px solid #BDBDBD;31    display: flex;32    align-items: center;33    justify-content: center;34    color: #757575;35    font-size: 34px;36    letter-spacing: 0.4px;37  }38  .hero-img::after {39    content: "";40    position: absolute;41    inset: 0;42    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.15) 100%);43    pointer-events: none;44  }45  .close-btn {46    position: absolute;47    top: 64px;48    left: 48px;49    width: 60px; height: 60px;50    display: flex;51    align-items: center;52    justify-content: center;53    z-index: 2;54  }55  .close-btn svg { width: 36px; height: 36px; }56  .close-btn line { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; }57 58  .hero-text {59    position: absolute;60    left: 60px;61    right: 60px;62    bottom: 80px;63    z-index: 2;64    color: #fff;65  }66  .hero-title {67    font-size: 86px;68    line-height: 96px;69    font-weight: 800;70    margin: 0 0 24px 0;71    letter-spacing: 0.5px;72  }73  .hero-sub {74    font-size: 40px;75    line-height: 56px;76    color: #ECEFF1;77    margin: 0;78  }79 80  /* Content area */81  .content {82    position: absolute;83    top: 820px;84    left: 0; right: 0;85    bottom: 0;86    background: #ffffff;87  }88  .section {89    padding: 40px 60px 0 60px;90  }91  .label {92    font-size: 44px;93    color: #424242;94    margin-bottom: 28px;95  }96 97  /* Days row */98  .days-row {99    display: flex;100    gap: 36px;101    padding: 0 60px;102    margin-bottom: 24px;103  }104  .day {105    width: 120px;106    text-align: center;107  }108  .day .circle {109    width: 96px; height: 96px;110    background: #1a73e8;111    border-radius: 50%;112    margin: 0 auto 16px auto;113    display: flex; align-items: center; justify-content: center;114    box-shadow: 0 2px 4px rgba(0,0,0,0.12);115  }116  .day svg { width: 44px; height: 44px; }117  .day .check path {118    stroke: #fff; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round;119  }120  .day .name {121    font-size: 34px;122    color: #616161;123  }124 125  .divider {126    height: 1px;127    background: #E0E0E0;128    margin: 36px 0;129  }130 131  /* Setting rows */132  .row {133    display: flex;134    align-items: center;135    justify-content: space-between;136    padding: 0 60px;137  }138  .row .left {139    font-size: 44px;140    color: #424242;141  }142  .row .right {143    font-size: 48px;144    color: #616161;145  }146 147  /* Toggles */148  .toggle {149    width: 120px; height: 64px;150    border-radius: 32px;151    background: #e0e0e0;152    position: relative;153    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);154  }155  .toggle .knob {156    position: absolute;157    top: 6px; left: 6px;158    width: 52px; height: 52px;159    background: #ffffff;160    border-radius: 50%;161    box-shadow: 0 2px 8px rgba(0,0,0,0.2);162    transition: left 0.2s ease;163  }164  .toggle.on { background: #2ecc71; }165  .toggle.on .knob { left: 62px; }166  .toggle.off { background: #CFD8DC; }167  .toggle.off .knob { left: 6px; }168 169  /* CTA button */170  .cta {171    position: absolute;172    left: 0; right: 0;173    bottom: 138px;174    height: 150px;175    background: #1a73e8;176    display: flex;177    align-items: center;178    justify-content: center;179    color: #fff;180    font-weight: 700;181    font-size: 48px;182  }183 184  /* Home indicator */185  .home-indicator {186    position: absolute;187    bottom: 60px;188    left: 50%;189    transform: translateX(-50%);190    width: 300px;191    height: 18px;192    background: #bdbdbd;193    border-radius: 9px;194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Hero area -->200  <div class="hero">201    <div class="hero-img">[IMG: Blurry subway station with person wearing earphones]</div>202    <div class="close-btn">203      <svg viewBox="0 0 24 24">204        <line x1="5" y1="5" x2="19" y2="19"></line>205        <line x1="19" y1="5" x2="5" y2="19"></line>206      </svg>207    </div>208    <div class="hero-text">209      <h1 class="hero-title">When would you like to learn?</h1>210      <p class="hero-sub">Research shows that studying at the same time each day helps form habits.</p>211    </div>212  </div>213 214  <!-- Content area -->215  <div class="content">216    <div class="section">217      <div class="label">Days</div>218    </div>219    <div class="days-row">220      <div class="day">221        <div class="circle">222          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>223        </div>224        <div class="name">Mon</div>225      </div>226      <div class="day">227        <div class="circle">228          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>229        </div>230        <div class="name">Tue</div>231      </div>232      <div class="day">233        <div class="circle">234          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>235        </div>236        <div class="name">Wed</div>237      </div>238      <div class="day">239        <div class="circle">240          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>241        </div>242        <div class="name">Thu</div>243      </div>244      <div class="day">245        <div class="circle">246          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>247        </div>248        <div class="name">Fri</div>249      </div>250      <div class="day">251        <div class="circle">252          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>253        </div>254        <div class="name">Sat</div>255      </div>256      <div class="day">257        <div class="circle">258          <svg class="check" viewBox="0 0 24 24"><path d="M4 13 L9 18 L20 7"></path></svg>259        </div>260        <div class="name">Sun</div>261      </div>262    </div>263 264    <div class="divider"></div>265 266    <div class="row">267      <div class="left">Time</div>268      <div class="right">11:00 AM</div>269    </div>270 271    <div class="divider"></div>272 273    <div class="row">274      <div class="left">Minutes / day</div>275      <div class="right">5</div>276    </div>277 278    <div class="divider"></div>279 280    <div class="row" style="margin-top: 8px;">281      <div class="left">Notifications</div>282      <div class="toggle on">283        <div class="knob"></div>284      </div>285    </div>286 287    <div class="row" style="margin-top: 42px;">288      <div class="left">Add study reminders to my calendar</div>289      <div class="toggle off">290        <div class="knob"></div>291      </div>292    </div>293 294    <div class="cta">Continue</div>295    <div class="home-indicator"></div>296  </div>297</div>298</body>299</html>