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>Calendar - New Event</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: linear-gradient(#bfbfc1 0%, #d6d6d8 40%, #e6e6e8 100%);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Backdrop (under the sheet) */20  .backdrop {21    position: absolute;22    inset: 0;23  }24  .statusbar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    color: #151515;31    padding: 26px 42px 0;32    font-weight: 600;33    font-size: 40px;34    opacity: 0.6;35  }36  .statusbar .right {37    position: absolute;38    right: 42px;39    top: 26px;40    font-size: 34px;41  }42  .topnav {43    position: absolute;44    top: 120px;45    left: 0;46    width: 100%;47    height: 160px;48    display: flex;49    align-items: center;50    justify-content: center;51    color: #101010;52    opacity: 0.8;53  }54  .topnav .title {55    font-weight: 800;56    font-size: 62px;57    letter-spacing: 0.5px;58  }59  .topnav .pill {60    position: absolute;61    bottom: 32px;62    width: 160px;63    height: 24px;64    background: #ffffff;65    border-radius: 20px;66  }67  .topnav .left, .topnav .right {68    position: absolute;69    top: 48px;70    color: #222;71    opacity: 0.8;72  }73  .topnav .left { left: 36px; }74  .topnav .right { right: 36px; }75 76  /* Simple icons */77  .icon-btn {78    width: 64px;79    height: 64px;80    display: inline-flex;81    align-items: center;82    justify-content: center;83    border-radius: 16px;84    background: rgba(255,255,255,0.5);85  }86  .icon-btn svg { width: 36px; height: 36px; }87 88  /* Bottom sheet */89  .sheet {90    position: absolute;91    left: 0;92    top: 300px;93    width: 100%;94    height: calc(100% - 300px);95    background: #fff;96    border-radius: 44px 44px 0 0;97    box-shadow: 0 -10px 28px rgba(0,0,0,0.25);98    overflow-y: hidden;99  }100  .sheet .save {101    position: absolute;102    top: 44px;103    right: 54px;104    font-size: 40px;105    letter-spacing: 1px;106    color: #6b6b6b;107    font-weight: 800;108  }109  .content {110    position: absolute;111    top: 40px;112    left: 0;113    right: 0;114    bottom: 0;115    overflow-y: auto;116    padding: 80px 72px 220px;117  }118 119  .label {120    font-size: 30px;121    font-weight: 700;122    letter-spacing: 1px;123    color: #1e1e1e;124    margin-bottom: 18px;125    text-transform: uppercase;126  }127 128  /* Title input placeholder */129  .title-input {130    display: flex;131    align-items: center;132    gap: 28px;133    margin-bottom: 52px;134  }135  .title-input .bar {136    width: 8px;137    height: 120px;138    background: #0f8b8d;139    border-radius: 6px;140  }141  .title-input .placeholder {142    font-size: 96px;143    line-height: 1;144    font-weight: 800;145    color: #d7d7d7;146  }147 148  /* Time rows */149  .time .row {150    display: flex;151    align-items: center;152    justify-content: space-between;153    padding: 14px 0;154  }155  .time .row .left,156  .time .row .right {157    font-size: 46px;158    font-weight: 700;159  }160 161  /* All day switch */162  .allday {163    position: relative;164    margin-top: 18px;165    margin-bottom: 40px;166  }167  .switch {168    position: absolute;169    right: 0;170    top: -6px;171    width: 128px;172    height: 68px;173  }174  .switch input { display: none; }175  .slider {176    position: absolute;177    cursor: pointer;178    inset: 0;179    background: #d3d3d3;180    border-radius: 34px;181    transition: background 0.2s;182  }183  .slider:before {184    content: "";185    position: absolute;186    height: 56px; width: 56px;187    left: 6px; top: 6px;188    background: #ffffff;189    border-radius: 50%;190    box-shadow: 0 2px 6px rgba(0,0,0,0.2);191    transition: transform 0.2s;192  }193  .switch input:checked + .slider {194    background: #0f8b8d;195  }196  .switch input:checked + .slider:before {197    transform: translateX(60px);198  }199 200  .divider {201    border: none;202    height: 2px;203    background: #e5e5e5;204    margin: 40px 0 52px;205  }206 207  /* Image placeholders */208  .img {209    background: #E0E0E0;210    border: 1px solid #BDBDBD;211    color: #555;212    display: flex;213    align-items: center;214    justify-content: center;215  }216  .map {217    height: 300px;218    border-radius: 28px;219    font-size: 40px;220  }221  .invitees .avatar {222    width: 610px;223    height: 420px;224    border-radius: 24px;225    font-size: 44px;226    background-image: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.7) 0 120px, rgba(224,224,224,1) 121px);227  }228 229  .alarm .alarm-value {230    font-size: 62px;231    font-weight: 800;232    margin-top: 4px;233  }234 235  /* Bottom gesture area */236  .gesture-bar {237    position: absolute;238    left: 0; right: 0; bottom: 0;239    height: 160px;240    background: #000;241  }242  .gesture-bar .pill {243    position: absolute;244    left: 50%;245    bottom: 48px;246    transform: translateX(-50%);247    width: 360px;248    height: 16px;249    background: #cfcfcf;250    border-radius: 10px;251    opacity: 0.9;252  }253</style>254</head>255<body>256<div id="render-target">257 258  <div class="backdrop">259    <div class="statusbar">260      8:54261      <div class="right">100%</div>262    </div>263    <div class="topnav">264      <div class="left">265        <span class="icon-btn" aria-hidden="true">266          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round">267            <path d="M4 6h16M4 12h16M4 18h16"/>268          </svg>269        </span>270      </div>271      <div class="title">Aug 2023</div>272      <div class="pill"></div>273      <div class="right">274        <span class="icon-btn" aria-hidden="true">275          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round">276            <circle cx="5" cy="12" r="2"></circle>277            <circle cx="12" cy="12" r="2"></circle>278            <circle cx="19" cy="12" r="2"></circle>279          </svg>280        </span>281      </div>282    </div>283  </div>284 285  <div class="sheet">286    <div class="save">SAVE</div>287    <div class="content">288 289      <div class="section title">290        <div class="label">Event Title</div>291        <div class="title-input">292          <div class="bar"></div>293          <div class="placeholder">Untitled Event</div>294        </div>295      </div>296 297      <div class="section time">298        <div class="label">Event Time</div>299        <div class="row">300          <div class="left">Fri, Aug 11, 2023</div>301          <div class="right">9:30 AM</div>302        </div>303        <div class="row">304          <div class="left">Fri, Aug 11, 2023</div>305          <div class="right">10:30 AM</div>306        </div>307      </div>308 309      <div class="section allday">310        <div class="label">All Day Event</div>311        <label class="switch" aria-label="All Day Event toggle">312          <input type="checkbox">313          <span class="slider"></span>314        </label>315      </div>316 317      <hr class="divider">318 319      <div class="section location">320        <div class="label">Location</div>321        <div class="img map">Tap to add location</div>322      </div>323 324      <div class="section invitees" style="margin-top: 56px;">325        <div class="label">Invitees</div>326        <div class="img avatar">+ Add Invitee</div>327      </div>328 329      <div class="section alarm" style="margin-top: 70px;">330        <div class="label">Alarm</div>331        <div class="alarm-value">30 minutes before</div>332      </div>333 334      <div style="height: 400px;"></div>335    </div>336  </div>337 338  <div class="gesture-bar">339    <div class="pill"></div>340  </div>341 342</div>343</body>344</html>