GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Event Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2160px;11    position: relative; overflow: hidden;12    background: #1c1b1f; /* dark app surface */13    border-radius: 24px;14    box-shadow: 0 20px 60px rgba(0,0,0,0.35);15    color: #E8E2D9;16  }17 18  /* Top hero image */19  .hero {20    position: relative;21    width: 1080px;22    height: 520px;23  }24  .hero .img {25    position: absolute; left: 0; top: 0;26    width: 100%; height: 100%;27    background: #E0E0E0;28    border-bottom: 1px solid #BDBDBD;29    display: flex; align-items: center; justify-content: center;30    color: #757575; font-size: 34px;31  }32  .hero .overlay {33    position: absolute; inset: 0;34    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55));35  }36 37  /* Status bar */38  .statusbar {39    position: absolute; top: 16px; left: 24px; right: 24px;40    display: flex; align-items: center; justify-content: space-between;41    color: #fff; font-size: 36px; opacity: 0.95;42  }43  .status-icons { display: flex; align-items: center; gap: 22px; }44  .status-icons span { font-size: 32px; opacity: 0.95; }45  .status-icons svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.4; opacity: 0.95; }46 47  /* Floating controls */48  .circle-btn {49    position: absolute;50    top: 150px; left: 28px;51    width: 88px; height: 88px; border-radius: 44px;52    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.25);53    display: flex; align-items: center; justify-content: center;54  }55  .circle-btn svg { width: 42px; height: 42px; stroke: #fff; stroke-width: 5; }56 57  .top-actions {58    position: absolute; top: 148px; right: 24px;59    display: flex; gap: 16px;60  }61  .action-chip {62    width: 88px; height: 88px; border-radius: 44px;63    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.25);64    display: flex; align-items: center; justify-content: center;65  }66  .action-chip svg { width: 42px; height: 42px; stroke: #fff; stroke-width: 4; fill: none; }67 68  /* Sheet */69  .sheet {70    position: absolute;71    left: 0; right: 0; top: 470px;72    background: #1c1b1f;73    border-top-left-radius: 36px; border-top-right-radius: 36px;74    padding: 48px;75  }76 77  .title-row { display: flex; align-items: center; gap: 24px; }78  .blue-dot { width: 34px; height: 34px; border-radius: 8px; background: #5CA8FF; }79  .title { font-size: 64px; font-weight: 600; letter-spacing: 0.2px; color: #F6F1E8; }80  .subtitle { margin-top: 16px; font-size: 36px; color: #CFC8BD; }81 82  .divider { height: 20px; }83 84  .row { display: flex; align-items: flex-start; gap: 26px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }85  .row:last-child { border-bottom: none; }86  .icon {87    width: 56px; height: 56px; border-radius: 12px;88    display: flex; align-items: center; justify-content: center;89    color: #D9D1C7;90  }91  .icon svg { width: 44px; height: 44px; stroke: #D9D1C7; stroke-width: 3.2; fill: none; }92 93  .row-content { flex: 1; }94  .row-title { font-size: 40px; color: #F3EEE4; }95  .row-sub { margin-top: 10px; font-size: 32px; color: #C8C2B8; }96 97  .img-placeholder {98    width: 86px; height: 86px;99    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;100    display: flex; align-items: center; justify-content: center;101    color: #757575; font-size: 24px; text-align: center; padding: 8px;102  }103 104  .row-right { display: flex; align-items: center; gap: 18px; }105 106  /* Organizer avatar placeholder */107  .avatar {108    width: 92px; height: 92px; border-radius: 46px;109    background: #E0E0E0; border: 1px solid #BDBDBD;110    display: flex; align-items: center; justify-content: center;111    color: #757575; font-size: 24px;112  }113 114  /* Bottom RSVP bar */115  .rsvp {116    position: absolute; left: 0; right: 0; bottom: 160px;117    background: rgba(42,34,28,0.95);118    padding: 24px 36px;119    display: flex; align-items: center; justify-content: center; gap: 28px;120  }121  .btn {122    padding: 22px 44px; border-radius: 40px;123    border: 2px solid rgba(255,255,255,0.25);124    color: #EDE8DF; font-size: 36px;125    background: transparent;126  }127  .btn.primary {128    background: #8A6A3E; color: #F5EFE6; border: 2px solid #8A6A3E;129    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);130  }131  .chevron { margin-left: 18px; border: 2px solid rgba(255,255,255,0.25); width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; }132  .chevron svg { width: 28px; height: 28px; stroke: #EDE8DF; stroke-width: 3; fill: none; }133 134  /* Android navigation pill */135  .nav-pill {136    position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);137    width: 180px; height: 14px; background: #A9A39A; border-radius: 7px; opacity: 0.4;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <div class="hero">145    <div class="img">[IMG: Street Building Photo]</div>146    <div class="overlay"></div>147 148    <div class="statusbar">149      <div>12:50</div>150      <div class="status-icons">151        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>152        <svg viewBox="0 0 24 24"><path d="M3 18l9-12 9 12"/></svg>153        <span>100%</span>154      </div>155    </div>156 157    <div class="circle-btn" title="Close">158      <svg viewBox="0 0 24 24">159        <path d="M4 4l16 16M20 4L4 20"/>160      </svg>161    </div>162 163    <div class="top-actions">164      <div class="action-chip" title="Edit">165        <svg viewBox="0 0 24 24">166          <path d="M3 17l4 4 14-14-4-4L3 17z"/>167          <path d="M3 21h6"/>168        </svg>169      </div>170      <div class="action-chip" title="More">171        <svg viewBox="0 0 24 24">172          <circle cx="12" cy="5" r="2.5" fill="#fff" stroke="none"/>173          <circle cx="12" cy="12" r="2.5" fill="#fff" stroke="none"/>174          <circle cx="12" cy="19" r="2.5" fill="#fff" stroke="none"/>175        </svg>176      </div>177    </div>178  </div>179 180  <div class="sheet">181    <div class="title-row">182      <div class="blue-dot"></div>183      <div class="title">birthday party</div>184    </div>185    <div class="subtitle">Monday, Jun 19 · 1:00 – 2:00 PM</div>186 187    <div class="divider"></div>188 189    <div class="row">190      <div class="img-placeholder">[ICON: Google Meet]</div>191      <div class="row-content">192        <div class="row-title" style="color:#F7C04A;">Join with Google Meet</div>193        <div class="row-sub">meet.google.com/bub-pmwn-dct</div>194      </div>195      <div class="row-right">196        <div class="icon" title="Share">197          <svg viewBox="0 0 24 24">198            <circle cx="18" cy="5" r="3"/>199            <circle cx="6" cy="12" r="3"/>200            <circle cx="18" cy="19" r="3"/>201            <path d="M8.7 11l6-4M8.7 13l6 4"/>202          </svg>203        </div>204      </div>205    </div>206 207    <div class="row">208      <div class="icon">209        <svg viewBox="0 0 24 24">210          <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z"/>211          <circle cx="12" cy="8" r="2.5"/>212        </svg>213      </div>214      <div class="row-content">215        <div class="row-title">Pullman New Delhi Aerocity</div>216        <div class="row-sub">Asset No 02, Gmr Hospitality District, IGI Rd, Aerocity, New Delhi, Delhi 110037, India</div>217      </div>218    </div>219 220    <div class="row">221      <div class="icon">222        <svg viewBox="0 0 24 24">223          <path d="M6 8v4c0 4 3 7 6 7s6-3 6-7V8l-2-2h-8L6 8z"/>224          <path d="M10 3h4"/>225        </svg>226      </div>227      <div class="row-content">228        <div class="row-title">30 minutes before</div>229      </div>230    </div>231 232    <div class="row">233      <div class="icon">234        <svg viewBox="0 0 24 24">235          <circle cx="8" cy="9" r="3"/>236          <circle cx="16" cy="11" r="2.5"/>237          <path d="M3 20c0-3 3-5 6-5s6 2 6 5H3z"/>238          <path d="M14 20c.4-1.8 2-3 3.5-3 1.2 0 2.3.6 2.5 3"/>239        </svg>240      </div>241      <div class="row-content">242        <div class="row-title">2 guests</div>243        <div class="row-sub">1 maybe, 1 awaiting</div>244      </div>245      <div class="row-right">246        <div class="icon" title="Email">247          <svg viewBox="0 0 24 24">248            <rect x="3" y="4" width="18" height="16" rx="2"/>249            <path d="M3 7l9 6 9-6"/>250          </svg>251        </div>252      </div>253    </div>254 255    <div class="row">256      <div class="avatar">[IMG: User Avatar]</div>257      <div class="row-content">258        <div class="row-title">Cerebra Research</div>259        <div class="row-sub">Organizer</div>260      </div>261    </div>262  </div>263 264  <div class="rsvp">265    <button class="btn">Yes</button>266    <button class="btn">No</button>267    <button class="btn primary">Maybe</button>268    <div class="chevron">269      <svg viewBox="0 0 24 24"><path d="M8 6l8 6-8 6"/></svg>270    </div>271  </div>272 273  <div class="nav-pill"></div>274</div>275</body>276</html>