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>Birthday Party Event - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2160px;11    position: relative; overflow: hidden;12    background: #1e1a16; color: #e7dbc8;13  }14  .status-bar {15    height: 96px; padding: 0 36px;16    display: flex; align-items: center; justify-content: space-between;17    font-size: 40px; color: #e7dbc8;18  }19  .status-right { display: flex; align-items: center; gap: 22px; font-size: 34px; color: #e7dbc8;}20  .chip, .chip-dark {21    display: inline-flex; align-items: center; justify-content: center;22    border-radius: 16px; padding: 18px 26px; font-size: 36px; line-height: 1;23  }24  .chip { border: 2px solid #d7a462; color: #d7a462; background: transparent; }25  .chip-dark { background: #28231d; color: #e7dbc8; border: 2px solid #2f2923; }26  .app-top {27    padding: 18px 36px 12px;28    position: relative;29  }30  .close-btn {31    position: absolute; left: 36px; top: 26px; width: 64px; height: 64px;32    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #e7dbc8;33  }34  .save-btn {35    position: absolute; right: 36px; top: 18px;36    background: #f2a143; color: #1e1a16; font-weight: 600;37    border-radius: 36px; padding: 22px 40px; font-size: 40px;38    box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;39  }40  .title {41    margin-top: 70px; padding: 0 36px 24px; font-size: 84px; font-weight: 600; letter-spacing: 0.5px;42  }43  .divider { height: 1px; background: #3a332c; margin: 0; }44  .section { padding: 14px 36px; }45  .row {46    display: flex; align-items: center; gap: 28px;47    padding: 26px 0; border-bottom: 1px solid #2f2923;48  }49  .row:last-child { border-bottom: none; }50  .icon {51    width: 64px; height: 64px; border-radius: 50%;52    display: inline-flex; align-items: center; justify-content: center;53    background: transparent; color: #cbbfae;54  }55  .label { font-size: 46px; }56  .sub { font-size: 38px; color: #cbbfae; }57  .right { margin-left: auto; color: #e7dbc8; font-size: 46px; }58  .switch {59    width: 128px; height: 64px; background: #4e4a45; border-radius: 32px; position: relative;60    margin-left: auto;61  }62  .switch::after {63    content: ""; width: 54px; height: 54px; border-radius: 50%;64    background: #bdb7af; position: absolute; right: 6px; top: 5px;65  }66  .multi-line { display: flex; flex-direction: column; gap: 14px; }67  .attendee-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; }68  .meet-block {69    display: flex; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid #2f2923;70  }71  .img-box {72    width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;73    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;74  }75  .meet-dismiss { margin-left: auto; color: #e7dbc8; font-size: 54px; }76  .location-block { padding: 28px 0; border-bottom: 1px solid #2f2923; display: flex; gap: 28px; }77  .location-text { display: flex; flex-direction: column; gap: 12px; }78  .gesture-bar {79    position: absolute; left: 0; right: 0; bottom: 74px; height: 160px;80    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));81    pointer-events: none;82  }83  .handle {84    position: absolute; left: 50%; transform: translateX(-50%);85    bottom: 24px; width: 180px; height: 12px; border-radius: 6px; background: #7a736b;86  }87  .nav-back {88    position: absolute; left: 36px; bottom: 40px; width: 38px; height: 38px; border-radius: 4px; border: 2px solid #7a736b;89    transform: rotate(45deg);90  }91  /* small chevron indicator near top center */92  .chevron {93    position: absolute; left: 50%; top: 96px; transform: translateX(-50%);94    width: 120px; height: 30px;95  }96  .chevron::before, .chevron::after {97    content: ""; position: absolute; width: 48px; height: 6px; background: #4b423a; border-radius: 3px;98    top: 10px;99  }100  .chevron::before { left: 26px; transform: rotate(22deg); }101  .chevron::after { right: 26px; transform: rotate(-22deg); }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>12:48</div>110    <div class="status-right">111      <span>⦸</span>112      <!-- signal icon -->113      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#e7dbc8" stroke-width="2">114        <path d="M3 18h2M3 14h4M3 10h6M3 6h8"/>115      </svg>116      <!-- battery -->117      <svg width="60" height="40" viewBox="0 0 28 18" fill="none">118        <rect x="2" y="3" width="22" height="12" rx="2" stroke="#e7dbc8" stroke-width="2"/>119        <rect x="24" y="6" width="2" height="6" fill="#e7dbc8"/>120        <rect x="4" y="5" width="17" height="8" fill="#e7dbc8"/>121      </svg>122      <span>100%</span>123    </div>124  </div>125 126  <div class="chevron"></div>127 128  <!-- App top -->129  <div class="app-top">130    <div class="close-btn">131      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#e7dbc8" stroke-width="2" fill="none">132        <path d="M6 6l12 12M18 6l-12 12"/>133      </svg>134    </div>135    <div class="save-btn">Save</div>136  </div>137 138  <!-- Title -->139  <div class="title">birthday party</div>140  <div class="divider"></div>141 142  <!-- Event details -->143  <div class="section">144 145    <div class="row">146      <div class="icon">147        <!-- clock icon -->148        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">149          <circle cx="12" cy="12" r="9"></circle>150          <path d="M12 7v6l4 2"></path>151        </svg>152      </div>153      <div class="label">All-day</div>154      <div class="switch"></div>155    </div>156 157    <div class="row">158      <div class="icon">159        <!-- calendar icon -->160        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">161          <rect x="3" y="5" width="18" height="16" rx="2"></rect>162          <path d="M16 3v4M8 3v4M3 9h18"></path>163        </svg>164      </div>165      <div class="multi-line" style="flex:1">166        <div class="label">Mon, Jun 19, 2023</div>167        <div class="label">Mon, Jun 19, 2023</div>168      </div>169      <div class="multi-line right">170        <div>1:00 PM</div>171        <div>2:00 PM</div>172      </div>173    </div>174 175    <div class="row">176      <div class="icon">177        <!-- globe icon -->178        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">179          <circle cx="12" cy="12" r="9"></circle>180          <path d="M3 12h18M12 3a12 12 0 0 0 0 18M12 3a12 12 0 0 1 0 18"></path>181        </svg>182      </div>183      <div class="label">India Standard Time</div>184    </div>185 186    <div class="row">187      <div class="icon">188        <!-- repeat icon -->189        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">190          <path d="M17 1l4 4-4 4"></path>191          <path d="M21 5H7a4 4 0 0 0-4 4v1"></path>192          <path d="M7 23l-4-4 4-4"></path>193          <path d="M3 19h14a4 4 0 0 0 4-4v-1"></path>194        </svg>195      </div>196      <div class="label">Does not repeat</div>197    </div>198 199    <div class="row" style="border-bottom:none;">200      <div class="icon">201        <!-- person icon -->202        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">203          <circle cx="12" cy="7" r="4"></circle>204          <path d="M4 21a8 8 0 0 1 16 0"></path>205        </svg>206      </div>207      <div style="flex:1">208        <div class="attendee-row">209          <span class="chip-dark">You</span>210          <span class="chip-dark">rashidf@googlr.com *</span>211        </div>212        <div style="margin-top:24px;">213          <span class="chip">View schedules</span>214        </div>215      </div>216    </div>217 218    <div class="row" style="border-top:1px solid #2f2923;">219      <div class="label">Guests can:</div>220    </div>221    <div class="row" style="border-bottom:none; padding-top:0;">222      <div class="icon"></div>223      <div class="sub">Invite others • See guest list</div>224    </div>225 226    <div class="meet-block" style="border-top:1px solid #2f2923;">227      <div class="img-box">[IMG: Google Meet logo]</div>228      <div style="display:flex; flex-direction:column; gap:8px;">229        <div class="label">Google Meet</div>230        <div class="sub">Video conferencing details added</div>231      </div>232      <div class="meet-dismiss">×</div>233    </div>234 235    <div class="location-block">236      <div class="icon">237        <!-- location pin -->238        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cbbfae" stroke-width="2">239          <path d="M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z"></path>240          <circle cx="12" cy="10" r="3"></circle>241        </svg>242      </div>243      <div class="location-text">244        <div class="label" style="font-size:54px;">Pullman New Delhi Aerocity</div>245        <div class="sub">Asset No 02, Gmr Hospitality District, IGI Rd, Aerocity, New Delhi, Delhi 110037, India</div>246      </div>247    </div>248 249    <div style="padding: 20px 36px;">250      <div class="img-box" style="width: 100%; height: 400px;">[IMG: Place photo / map]</div>251    </div>252 253  </div>254 255  <!-- Gesture bar to mimic system navigation -->256  <div class="gesture-bar">257    <div class="nav-back"></div>258    <div class="handle"></div>259  </div>260 261</div>262</body>263</html>