GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Event Details - Mock UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2160px;13    background: #171411;14    border-radius: 36px;15    box-shadow: 0 20px 40px rgba(0,0,0,0.35);16    color: #EFE7DA;17  }18 19  /* Top banner image */20  .hero-img {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 520px;26    background: #E0E0E0;27    border-bottom: 1px solid #BDBDBD;28    display: flex;29    align-items: flex-end;30    justify-content: center;31    color: #757575;32    font-size: 30px;33    letter-spacing: 0.5px;34  }35 36  /* Status bar overlay */37  .statusbar {38    position: absolute;39    top: 18px;40    left: 24px;41    right: 24px;42    height: 48px;43    display: flex;44    align-items: center;45    color: #FFFFFF;46    font-weight: 600;47    font-size: 30px;48    mix-blend-mode: normal;49  }50  .statusbar .right {51    margin-left: auto;52    display: flex;53    align-items: center;54    gap: 22px;55    font-size: 26px;56  }57  .icon {58    width: 34px;59    height: 34px;60  }61 62  /* Floating action buttons on the banner */63  .fab {64    position: absolute;65    top: 108px;66    width: 88px;67    height: 88px;68    border-radius: 44px;69    background: rgba(0,0,0,0.38);70    border: 1px solid rgba(255,255,255,0.18);71    display: flex;72    align-items: center;73    justify-content: center;74    color: #F5F5F5;75  }76  .fab.left { left: 24px; }77  .fab.right1 { right: 140px; }78  .fab.right2 { right: 24px; }79 80  /* Main card */81  .card {82    position: absolute;83    left: 0;84    right: 0;85    top: 420px;86    bottom: 0;87    background: #1B1A16;88    border-radius: 48px 48px 0 0;89    padding: 56px 56px 180px 56px;90    overflow-y: auto;91  }92 93  .title-row {94    display: flex;95    align-items: center;96    gap: 28px;97    margin-bottom: 16px;98  }99  .event-color {100    width: 36px;101    height: 36px;102    border-radius: 6px;103    background: #3FA8FF;104  }105  h1 {106    margin: 0;107    font-size: 64px;108    letter-spacing: 0.2px;109    font-weight: 700;110  }111  .subtitle {112    font-size: 34px;113    color: #CFC4B6;114    margin-top: 12px;115  }116 117  .section {118    margin-top: 48px;119    display: grid;120    grid-template-columns: 72px 1fr 84px;121    column-gap: 24px;122    align-items: start;123  }124  .section .left {125    display: flex;126    align-items: center;127    justify-content: center;128  }129  .section .content {130    min-height: 48px;131  }132  .section .content .label {133    font-size: 34px;134    font-weight: 600;135  }136  .section .content .accent { color: #F5C76A; }137  .section .content .sub {138    font-size: 30px;139    color: #CFC4B6;140    margin-top: 8px;141    line-height: 1.35;142  }143  .section .right {144    display: flex;145    justify-content: flex-end;146    align-items: center;147  }148 149  /* Placeholder image blocks (avatars etc.) */150  .img-placeholder {151    width: 84px;152    height: 84px;153    background: #E0E0E0;154    border: 1px solid #BDBDBD;155    border-radius: 42px;156    display: flex;157    justify-content: center;158    align-items: center;159    color: #757575;160    font-size: 22px;161  }162 163  /* Bottom response bar */164  .bottom-bar {165    position: absolute;166    left: 0;167    right: 0;168    bottom: 0;169    height: 156px;170    background: #2A2218;171    border-top: 1px solid rgba(255,255,255,0.06);172    display: flex;173    align-items: center;174    padding: 0 56px;175    gap: 24px;176  }177  .pill {178    padding: 22px 36px;179    border-radius: 40px;180    font-size: 32px;181    font-weight: 600;182    color: #EDE5D6;183    border: 2px solid #6A5E4F;184    background: transparent;185  }186  .pill.primary {187    background: #6A5636;188    border-color: #6A5636;189    color: #F5E9D6;190  }191 192  /* Simple link styling for readability */193  .link { color: #CFC4B6; text-decoration: none; }194</style>195</head>196<body>197<div id="render-target">198  <!-- Top banner with semantic image placeholder -->199  <div class="hero-img">[IMG: City street and modern building]</div>200 201  <!-- Status bar overlay -->202  <div class="statusbar">203    <div>12:47</div>204    <div class="right">205      <!-- upload icon -->206      <svg class="icon" viewBox="0 0 24 24">207        <path d="M4 18h16v2H4zM12 5l-4 4h3v5h2V9h3z" fill="#FFFFFF"></path>208      </svg>209      <!-- wifi icon -->210      <svg class="icon" viewBox="0 0 24 24">211        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2c-2-2-4-2-6 0z" fill="#FFFFFF"></path>212      </svg>213      <!-- battery icon -->214      <svg class="icon" viewBox="0 0 24 24">215        <rect x="2" y="7" width="18" height="10" rx="2" fill="#FFFFFF"></rect>216        <rect x="20" y="10" width="2.5" height="4" fill="#FFFFFF"></rect>217      </svg>218      <div style="font-size:26px;">100%</div>219    </div>220  </div>221 222  <!-- Floating action buttons -->223  <div class="fab left">224    <svg class="icon" viewBox="0 0 24 24">225      <path d="M6 6l12 12M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>226    </svg>227  </div>228  <div class="fab right1">229    <svg class="icon" viewBox="0 0 24 24">230      <path d="M4 17l6-1 9-9-6-2-9 9-0 3z" fill="#FFFFFF"></path>231    </svg>232  </div>233  <div class="fab right2">234    <svg class="icon" viewBox="0 0 24 24">235      <circle cx="12" cy="5" r="2.2" fill="#FFFFFF"></circle>236      <circle cx="12" cy="12" r="2.2" fill="#FFFFFF"></circle>237      <circle cx="12" cy="19" r="2.2" fill="#FFFFFF"></circle>238    </svg>239  </div>240 241  <!-- Main card -->242  <div class="card">243    <div class="title-row">244      <div class="event-color"></div>245      <h1>birthday party</h1>246    </div>247    <div class="subtitle">Monday, Jun 19 • 1:00 – 2:00 PM</div>248 249    <!-- Join with Google Meet -->250    <div class="section">251      <div class="left">252        <svg class="icon" viewBox="0 0 24 24">253          <rect x="3" y="6" width="14" height="12" rx="2" fill="#7BC86C"></rect>254          <polygon points="18,9 21,12 18,15" fill="#F5C76A"></polygon>255        </svg>256      </div>257      <div class="content">258        <div class="label accent">Join with Google Meet</div>259        <div class="sub">meet.google.com/bub-pmwn-dct</div>260      </div>261      <div class="right">262        <svg class="icon" viewBox="0 0 24 24">263          <circle cx="6" cy="12" r="2" fill="#CFC4B6"></circle>264          <circle cx="12" cy="7" r="2" fill="#CFC4B6"></circle>265          <circle cx="18" cy="12" r="2" fill="#CFC4B6"></circle>266          <path d="M6 12l6-5 6 5" stroke="#CFC4B6" stroke-width="1.8" fill="none"></path>267        </svg>268      </div>269    </div>270 271    <!-- Location -->272    <div class="section">273      <div class="left">274        <svg class="icon" viewBox="0 0 24 24">275          <path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" fill="#CFC4B6"></path>276          <circle cx="12" cy="8" r="2.4" fill="#1B1A16"></circle>277        </svg>278      </div>279      <div class="content">280        <div class="label">Pullman New Delhi Aerocity</div>281        <div class="sub">Asset No 02, Gmr Hospitality District, IGI Rd, Aerocity, New Delhi, Delhi 110037, India</div>282      </div>283      <div class="right">284        <svg class="icon" viewBox="0 0 24 24">285          <path d="M12 5l7 7-7 7M5 12h14" stroke="#CFC4B6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>286        </svg>287      </div>288    </div>289 290    <!-- Reminder -->291    <div class="section">292      <div class="left">293        <svg class="icon" viewBox="0 0 24 24">294          <path d="M12 3c4 0 7 3 7 7v5l2 2H3l2-2v-5c0-4 3-7 7-7z" fill="#CFC4B6"></path>295          <rect x="11" y="18" width="2" height="2.5" fill="#1B1A16"></rect>296        </svg>297      </div>298      <div class="content">299        <div class="label">30 minutes before</div>300      </div>301      <div class="right"></div>302    </div>303 304    <!-- Guests -->305    <div class="section">306      <div class="left">307        <svg class="icon" viewBox="0 0 24 24">308          <circle cx="9" cy="8" r="3" fill="#CFC4B6"></circle>309          <path d="M4 18c0-3 3-5 7-5s7 2 7 5" fill="#CFC4B6"></path>310        </svg>311      </div>312      <div class="content">313        <div class="label">2 guests</div>314        <div class="sub">1 maybe, 1 awaiting</div>315      </div>316      <div class="right">317        <svg class="icon" viewBox="0 0 24 24">318          <rect x="3" y="6" width="18" height="12" rx="2" fill="#CFC4B6"></rect>319          <path d="M3 8l9 6 9-6" stroke="#1B1A16" stroke-width="1.6" fill="none"></path>320        </svg>321      </div>322    </div>323 324    <!-- Organizer -->325    <div class="section">326      <div class="left">327        <div class="img-placeholder">[IMG: Avatar]</div>328      </div>329      <div class="content">330        <div class="label">Cerebra Research</div>331        <div class="sub">Organizer</div>332      </div>333      <div class="right"></div>334    </div>335  </div>336 337  <!-- Bottom response bar -->338  <div class="bottom-bar">339    <button class="pill">Yes</button>340    <button class="pill">No</button>341    <button class="pill primary">Maybe</button>342    <div style="margin-left:auto;">343      <svg class="icon" viewBox="0 0 24 24">344        <path d="M6 9l6 6 6-6" stroke="#EDE5D6" stroke-width="2" fill="none" stroke-linecap="round"></path>345      </svg>346    </div>347  </div>348</div>349</body>350</html>