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>Share Sheet - Tiramisu</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000; /* overall app background */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 18px;23    left: 24px;24    right: 24px;25    height: 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    pointer-events: none;30    opacity: 0.95;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 18px;36    font-size: 36px;37    font-weight: 600;38  }39  .ghosts {40    display: flex; gap: 10px;41  }42  .ghosts span {43    display: inline-block;44    width: 18px; height: 18px;45    background: #fff;46    border-radius: 50%;47    opacity: 0.95;48  }49  .status-right {50    display: flex; align-items: center; gap: 18px;51  }52  .dot {53    width: 6px; height: 6px; background: #fff; border-radius: 50%;54    margin-left: 6px; margin-right: 6px;55  }56  .icon-signal, .icon-battery {57    width: 32px; height: 20px; display: inline-block;58  }59  .icon-signal svg, .icon-battery svg { width: 100%; height: 100%; }60 61  /* Hero image placeholder */62  .hero {63    position: absolute;64    top: 0;65    left: 0;66    width: 1080px;67    height: 880px;68    background: #E0E0E0;69    border-bottom: 1px solid #BDBDBD;70    display: flex; align-items: center; justify-content: center;71    color: #555;72    font-size: 36px;73    letter-spacing: 0.2px;74  }75  .hero::after {76    /* dark scrim over image */77    content: "";78    position: absolute; inset: 0;79    background: rgba(0,0,0,0.55);80  }81 82  /* Back button */83  .back-btn {84    position: absolute;85    top: 170px;86    left: 36px;87    width: 110px; height: 110px;88    background: rgba(0,0,0,0.55);89    border-radius: 50%;90    display: flex; align-items: center; justify-content: center;91    z-index: 3;92  }93  .back-btn svg { width: 46px; height: 46px; fill: #fff; }94 95  /* Play button over hero */96  .play-wrap {97    position: absolute;98    top: 300px;99    left: 50%;100    transform: translateX(-50%);101    width: 360px; height: 360px;102    border-radius: 50%;103    border: 6px solid rgba(255,255,255,0.5);104    display: flex; align-items: center; justify-content: center;105    z-index: 2;106  }107  .play-wrap svg { width: 150px; height: 150px; fill: rgba(255,255,255,0.9); }108 109  /* Title strip */110  .title-strip {111    position: absolute;112    top: 860px;113    left: 0;114    width: 100%;115    padding: 40px 60px 80px;116    background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,1));117    z-index: 1;118    text-align: center;119  }120  .title-strip h1 {121    margin: 0;122    font-family: Georgia, "Times New Roman", serif;123    font-size: 86px;124    line-height: 1.18;125    color: #eaeaea;126    font-weight: 700;127  }128 129  /* Share Sheet */130  .sheet {131    position: absolute;132    left: 0; right: 0; bottom: 0;133    height: 1320px;134    background: #1b1d1e;135    border-top-left-radius: 44px;136    border-top-right-radius: 44px;137    box-shadow: 0 -8px 32px rgba(0,0,0,0.6);138    padding: 22px 40px 110px;139    z-index: 4;140  }141  .sheet .handle {142    width: 150px; height: 12px; border-radius: 8px;143    background: #3a3d3f;144    margin: 10px auto 28px;145  }146  .url {147    color: #e7e7e7;148    font-size: 34px;149    line-height: 1.35;150    margin: 24px 8px 32px;151    word-break: break-all;152    opacity: 0.95;153  }154  .actions {155    display: flex; gap: 28px; padding: 10px 4px 26px;156  }157  .btn {158    flex: 0 0 auto;159    display: inline-flex; align-items: center; gap: 16px;160    padding: 18px 36px;161    border: 2px solid #29c5b5;162    color: #d5fffa;163    border-radius: 20px;164    font-size: 36px; font-weight: 600;165    background: transparent;166  }167  .btn svg { width: 32px; height: 32px; fill: #29c5b5; }168 169  .section {170    margin-top: 18px;171  }172 173  /* Grids */174  .grid {175    display: grid;176    grid-template-columns: repeat(4, 1fr);177    grid-column-gap: 32px;178    grid-row-gap: 34px;179    padding: 30px 0;180  }181  .item {182    display: flex; flex-direction: column; align-items: center; text-align: center;183    color: #f2f2f2;184  }185  .avatar {186    width: 150px; height: 150px; border-radius: 50%;187    display: flex; align-items: center; justify-content: center;188    font-size: 64px; font-weight: 700; color: #0f0f0f;189  }190  .avatar.teal { background: #55d3d1; }191  .avatar.pink { background: #ff7fb0; }192  .avatar.purple { background: #a677ff; color: #181818; }193  .avatar.yellow { background: #ffd43b; color: #333; }194  .label { margin-top: 16px; font-size: 30px; line-height: 1.2; opacity: 0.95; }195 196  /* App icons */197  .app {198    width: 146px; height: 146px; border-radius: 50%;199    display: flex; align-items: center; justify-content: center;200    background: #2b2d2f; color: #fff; font-size: 44px; font-weight: 700;201    border: 2px solid #3c3f41;202  }203  .app.gmail { background: #ffffff; color: #db4437; border-color: #e6e6e6; }204  .app.msg { background: #f2f6ff; color: #1a73e8; }205  .app.ig { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }206  .app.fb { background: #1877f2; }207 208  .app-label { margin-top: 16px; font-size: 28px; line-height: 1.2; color: #eaeaea; opacity: 0.95; }209 210  /* Home indicator */211  .home-indicator {212    position: absolute;213    bottom: 22px; left: 50%; transform: translateX(-50%);214    width: 300px; height: 10px; background: #e8e8e8; border-radius: 10px; opacity: 0.85;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Hero area -->222  <div class="hero">223    <div>[IMG: Tiramisu dessert on plate]</div>224  </div>225 226  <!-- Status bar mock -->227  <div class="status-bar">228    <div class="status-left">229      <div>6:19</div>230      <div class="ghosts">231        <span></span><span></span><span></span><span></span><span></span>232      </div>233      <div class="dot"></div>234    </div>235    <div class="status-right">236      <span class="icon-signal">237        <svg viewBox="0 0 24 16">238          <path fill="#fff" d="M3 16h3v-3H3v3zm5 0h3V9H8v7zm5 0h3V5h-3v11zm5 0h3V1h-3v15z"/>239        </svg>240      </span>241      <span class="icon-battery">242        <svg viewBox="0 0 28 14">243          <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>244          <rect x="3" y="4" width="18" height="6" fill="#fff"/>245          <rect x="24" y="5" width="3" height="4" fill="#fff"/>246        </svg>247      </span>248    </div>249  </div>250 251  <!-- Back button -->252  <div class="back-btn">253    <svg viewBox="0 0 24 24">254      <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"></path>255    </svg>256  </div>257 258  <!-- Play button -->259  <div class="play-wrap">260    <svg viewBox="0 0 100 100">261      <polygon points="35,25 35,75 75,50"></polygon>262    </svg>263  </div>264 265  <!-- Title -->266  <div class="title-strip">267    <h1>Make classic tiramisu with Lisa</h1>268  </div>269 270  <!-- Bottom Share Sheet -->271  <div class="sheet">272    <div class="handle"></div>273 274    <div class="url">https://www.kitchenstories.com/en/recipes/classic-tiramisu</div>275 276    <div class="actions">277      <div class="btn">278        <svg viewBox="0 0 24 24">279          <path d="M16 1H6C4.9 1 4 1.9 4 3v10h2V3h10V1zm3 4H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H9V7h10v12z"></path>280        </svg>281        <span>Copy</span>282      </div>283      <div class="btn">284        <svg viewBox="0 0 24 24">285          <path d="M16 11l-4-4v3H4v2h8v3l4-4zM20 5h-2v14h2V5z"></path>286        </svg>287        <span>Nearby</span>288      </div>289    </div>290 291    <div class="section">292      <div class="grid">293        <div class="item">294          <div class="avatar teal">M</div>295          <div class="label">Mike<br>Waggoner</div>296        </div>297        <div class="item">298          <div class="avatar pink">J</div>299          <div class="label">Janet</div>300        </div>301        <div class="item">302          <div class="avatar purple">•</div>303          <div class="label">Nilaveni<br>Thonta</div>304        </div>305        <div class="item">306          <div class="avatar yellow">•</div>307          <div class="label">Moosse<br>Baendagoo</div>308        </div>309      </div>310    </div>311 312    <div class="section">313      <div class="grid">314        <div class="item">315          <div class="app gmail">G</div>316          <div class="app-label">Gmail</div>317        </div>318        <div class="item">319          <div class="app msg">💬</div>320          <div class="app-label">Messages</div>321        </div>322        <div class="item">323          <div class="app ig">IG</div>324          <div class="app-label">Instagram<br>Chats</div>325        </div>326        <div class="item">327          <div class="app fb">f</div>328          <div class="app-label">Facebook<br>News Feed</div>329        </div>330      </div>331    </div>332  </div>333 334  <div class="home-indicator"></div>335</div>336</body>337</html>