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>Event Edit - HR meeting</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #e2e2e2;15  }16 17  /* Top status bar */18  .statusbar {19    height: 84px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #1f1f1f;25    font-size: 28px;26    opacity: 0.95;27  }28 29  /* App header area */30  .app-header {31    height: 140px;32    padding: 0 36px;33    display: flex;34    align-items: center;35    position: relative;36  }37  .app-header .left-icons,38  .app-header .right-icons {39    width: 140px;40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .app-header .center-title {45    position: absolute;46    left: 0; right: 0;47    text-align: center;48    font-weight: 700;49    font-size: 44px;50    color: #202020;51  }52  .month-pill {53    position: absolute;54    bottom: 18px;55    left: 50%;56    transform: translateX(-50%);57    width: 120px;58    height: 16px;59    background: white;60    border-radius: 12px;61    opacity: 0.95;62  }63 64  /* White sheet/card */65  .sheet {66    position: absolute;67    top: 220px;68    left: 0;69    right: 0;70    bottom: 0;71    background: #ffffff;72    border-top-left-radius: 40px;73    border-top-right-radius: 40px;74    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);75    padding: 56px 60px 120px 60px;76    overflow-y: auto;77  }78 79  .sheet-header {80    display: flex;81    align-items: center;82    justify-content: space-between;83    margin-bottom: 32px;84  }85  .save-btn {86    font-size: 38px;87    letter-spacing: 1px;88    color: #4a4a4a;89    font-weight: 700;90  }91 92  .label {93    font-size: 24px;94    color: #666;95    letter-spacing: 1px;96    margin-top: 24px;97    margin-bottom: 12px;98  }99 100  .title-input {101    font-size: 86px;102    line-height: 1.05;103    font-weight: 800;104    color: #111;105    margin: 0 0 36px 0;106    display: inline-flex;107    align-items: flex-end;108  }109  .title-caret {110    width: 4px;111    height: 78px;112    background: #1aa3a0;113    margin-left: 6px;114    border-radius: 2px;115  }116 117  .time-rows { margin-top: 16px; }118  .time-row {119    display: flex;120    justify-content: space-between;121    align-items: center;122    padding: 14px 0;123  }124  .time-row .date {125    font-size: 36px;126    color: #111111;127    font-weight: 700;128  }129  .time-row .clock {130    font-size: 36px;131    color: #111111;132    font-weight: 700;133  }134 135  .toggle-row {136    display: flex;137    align-items: center;138    justify-content: space-between;139    margin-top: 36px;140  }141  .toggle {142    width: 116px;143    height: 60px;144    background: #d8d8d8;145    border-radius: 34px;146    position: relative;147    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);148  }149  .toggle::after {150    content: "";151    width: 56px;152    height: 56px;153    background: #f3f3f3;154    border: 1px solid #c7c7c7;155    border-radius: 50%;156    position: absolute;157    top: 2px;158    left: 2px;159  }160 161  .divider {162    margin: 44px 0 32px 0;163    border-top: 2px solid #e0e0e0;164  }165 166  /* Image placeholders */167  .img-placeholder {168    width: 100%;169    height: 240px;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    border-radius: 22px;173    color: #555;174    display: flex;175    align-items: center;176    justify-content: center;177    font-size: 38px;178  }179 180  .invitee-card {181    width: 540px;182    height: 360px;183    background: #E0E0E0;184    border: 1px solid #BDBDBD;185    border-radius: 22px;186    color: #8a8a8a;187    display: flex;188    align-items: center;189    justify-content: center;190    font-size: 40px;191    margin-top: 16px;192  }193 194  .alarm-value {195    font-size: 56px;196    font-weight: 800;197    color: #111;198    margin: 8px 0 8px 0;199  }200 201  /* Bottom gesture bar */202  .gesture-bar {203    position: absolute;204    left: 0; right: 0; bottom: 0;205    height: 86px;206    background: #000;207    display: flex;208    align-items: center;209    justify-content: center;210  }211  .gesture-pill {212    width: 240px;213    height: 12px;214    background: #cccccc;215    border-radius: 8px;216  }217 218  /* Utility text sizes to better emulate the mock */219  .subtle { color: #999; }220 221  /* Simple icon styles */222  .icon { width: 36px; height: 36px; }223  .icon-lg { width: 44px; height: 44px; }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status bar -->230  <div class="statusbar">231    <div>8:54</div>232    <div style="display:flex;align-items:center;gap:16px;">233      <!-- signal -->234      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="14" width="3" height="8" fill="#333"/><rect x="7" y="10" width="3" height="12" fill="#333"/><rect x="12" y="6" width="3" height="16" fill="#333"/><rect x="17" y="2" width="3" height="20" fill="#333"/></svg>235      <!-- battery -->236      <svg class="icon-lg" viewBox="0 0 32 18">237        <rect x="1" y="3" width="26" height="12" rx="3" ry="3" fill="none" stroke="#333" stroke-width="2"/>238        <rect x="3" y="5" width="22" height="8" fill="#333"/>239        <rect x="28" y="6" width="3" height="6" rx="1" fill="#333"/>240      </svg>241      <div style="font-size:26px;">100%</div>242    </div>243  </div>244 245  <!-- App header -->246  <div class="app-header">247    <div class="left-icons">248      <!-- small square calendar icon -->249      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="3" fill="none" stroke="#444" stroke-width="2"/><line x1="3" y1="8" x2="21" y2="8" stroke="#444" stroke-width="2"/></svg>250      <!-- hamburger -->251      <svg class="icon" viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6" stroke="#444" stroke-width="2"/><line x1="3" y1="12" x2="21" y2="12" stroke="#444" stroke-width="2"/><line x1="3" y1="18" x2="15" y2="18" stroke="#444" stroke-width="2"/></svg>252    </div>253    <div class="center-title">Aug 2023</div>254    <div class="right-icons" style="justify-content:flex-end;">255      <!-- overflow -->256      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#666"/><circle cx="12" cy="12" r="2" fill="#666"/><circle cx="12" cy="19" r="2" fill="#666"/></svg>257    </div>258    <div class="month-pill"></div>259  </div>260 261  <!-- White sheet / form -->262  <div class="sheet">263    <div class="sheet-header">264      <div></div>265      <div class="save-btn">SAVE</div>266    </div>267 268    <div class="label">EVENT TITLE</div>269    <div class="title-input">270      HR meeting271      <span class="title-caret"></span>272    </div>273 274    <div class="label" style="margin-top:34px;">EVENT TIME</div>275    <div class="time-rows">276      <div class="time-row">277        <div class="date">Fri, Aug 11, 2023</div>278        <div class="clock">9:30 AM</div>279      </div>280      <div class="time-row">281        <div class="date">Fri, Aug 11, 2023</div>282        <div class="clock">10:30 AM</div>283      </div>284    </div>285 286    <div class="toggle-row">287      <div class="label" style="margin:0;">ALL DAY EVENT</div>288      <div class="toggle" aria-label="all day toggle off"></div>289    </div>290 291    <div class="divider"></div>292 293    <div class="label">LOCATION</div>294    <div class="img-placeholder">[IMG: Map Placeholder – Tap to add location]</div>295 296    <div class="label" style="margin-top:46px;">INVITEES</div>297    <div class="invitee-card">+ Add Invitee</div>298 299    <div class="label" style="margin-top:52px;">ALARM</div>300    <div class="alarm-value">30 minutes before</div>301  </div>302 303  <!-- Bottom gesture bar -->304  <div class="gesture-bar">305    <div class="gesture-pill"></div>306  </div>307 308</div>309</body>310</html>