GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Share Sheet</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    box-shadow: 0 0 0 0 rgba(0,0,0,0.1);12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:120px; background:#0d0d0d; color:#fff;18    display:flex; align-items:center; padding:0 32px;19    font-size:36px;20  }21  .status-left { flex:1; }22  .status-right { display:flex; gap:22px; align-items:center; }23  .sb-dot { width:18px; height:18px; background:#fff; border-radius:50%; opacity:0.9; }24  .wifi {25    width:40px; height:26px;26    border:4px solid #fff; border-top-left-radius:24px; border-top-right-radius:24px;27    border-bottom:none;28  }29  .battery {30    width:60px; height:26px; border:4px solid #fff; position:relative;31  }32  .battery::after {33    content:""; position:absolute; right:-10px; top:6px;34    width:8px; height:12px; background:#fff;35  }36 37  /* App header */38  .app-header {39    position:absolute; top:120px; left:0; right:0;40    height:160px; display:flex; align-items:center;41    padding:0 28px; color:#222;42    border-bottom:1px solid #e5e5e5;43    background:#ffffff;44  }45  .back {46    width:96px; height:96px; display:flex; align-items:center; justify-content:center;47  }48  .app-title {49    flex:1; text-align:center; font-size:72px; font-weight:600;50  }51  .icon-arrow svg { width:48px; height:48px; }52 53  /* Background content (under sheet) */54  .content-wrap {55    position:absolute; top:280px; left:0; right:0; bottom:0;56    padding:24px 32px 0 32px; background:#fafafa;57  }58  .favorites-head {59    display:flex; align-items:center; gap:18px; color:#555; font-size:44px; margin-bottom:18px;60  }61  .lock {62    width:34px; height:34px; border-radius:50%; background:#ccc;63  }64  .card-images {65    display:flex; gap:24px; margin-top:12px;66  }67  .img {68    flex:1; height:280px; background:#E0E0E0; border:1px solid #BDBDBD;69    display:flex; align-items:center; justify-content:center; color:#757575;70  }71  .place-title { font-size:64px; margin:26px 0 10px 0; color:#222; }72  .place-desc { font-size:40px; color:#666; margin-bottom:24px; }73  .actions { display:flex; gap:26px; margin-bottom:28px; }74  .btn {75    padding:24px 36px; border-radius:50px; font-size:42px; font-weight:600;76    border:1px solid #1b66d7; color:#1b66d7; background:#e9f2ff;77  }78  .btn.secondary { border:1px solid #cfd8dc; color:#333; background:#fff; }79 80  /* Sharing as card */81  .share-as-card {82    position:absolute; top:300px; left:32px; right:32px;83    background:#ffffff; border:1px solid #e2e2e2; border-radius:18px;84    box-shadow:0 6px 16px rgba(0,0,0,0.08);85    display:flex; gap:24px; align-items:center; padding:24px;86  }87  .avatar {88    width:90px; height:90px; border-radius:50%; background:#cfe1ff; border:1px solid #9db7ff;89    display:flex; align-items:center; justify-content:center; color:#2a4b9b; font-weight:700; font-size:44px;90  }91  .share-as-text { display:flex; flex-direction:column; }92  .share-as-text .title { font-size:46px; font-weight:700; color:#222; }93  .share-as-text .email { font-size:40px; color:#666; }94 95  /* Bottom share sheet */96  .bottom-sheet {97    position:absolute; left:0; right:0; bottom:0;98    height:960px; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;99    box-shadow:0 -10px 30px rgba(0,0,0,0.18);100    padding:28px 32px;101  }102  .to-row {103    display:flex; align-items:center; gap:24px;104    font-size:44px; color:#444; border-bottom:1px solid #eee; padding-bottom:20px;105  }106  .to-label { color:#888; width:80px; }107  .to-placeholder { color:#999; flex:1; }108  .contact-list { margin-top:22px; }109  .contact-item {110    display:flex; align-items:center; gap:26px; padding:22px 0;111  }112  .contact-avatar {113    width:120px; height:120px; border-radius:60px; background:#5b38b6; color:#fff;114    display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:700;115  }116  .contact-info { flex:1; }117  .contact-name { font-size:42px; color:#222; }118  .contact-sub { font-size:36px; color:#777; }119  .more-circle {120    width:120px; height:120px; border-radius:60px; background:#f1f1f1; border:1px solid #d6d6d6;121    display:flex; align-items:center; justify-content:center; font-size:54px; color:#666;122  }123 124  /* Share targets */125  .targets {126    position:absolute; left:0; right:0; bottom:80px;127    display:flex; justify-content:space-around; padding:0 40px;128  }129  .target {130    width:220px; display:flex; flex-direction:column; align-items:center; gap:16px;131  }132  .t-icon {133    width:120px; height:120px; border-radius:28px; background:#f5f5f5; border:1px solid #dedede;134    display:flex; align-items:center; justify-content:center;135  }136  .t-label { font-size:36px; color:#333; text-align:center; }137 138  .icon-bubble svg, .icon-clipboard svg, .icon-more svg { width:64px; height:64px; }139  .icon-bubble svg path { fill:#1a73e8; }140  .kik { font-size:52px; font-weight:800; color:#28b324; }141  .icon-clipboard svg rect, .icon-clipboard svg path { fill:#777; }142  .icon-more svg circle { fill:#999; }143  .gesture {144    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);145    width:200px; height:10px; background:#d0d0d0; border-radius:6px;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="status-left">8:39</div>155    <div class="status-right">156      <div class="sb-dot"></div>157      <div class="sb-dot"></div>158      <div class="sb-dot"></div>159      <div class="sb-dot"></div>160      <div class="wifi"></div>161      <div class="battery"></div>162    </div>163  </div>164 165  <!-- App Header -->166  <div class="app-header">167    <div class="back icon-arrow">168      <svg viewBox="0 0 24 24">169        <path d="M15 5 L6 12 L15 19" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170      </svg>171    </div>172    <div class="app-title">Share</div>173  </div>174 175  <!-- Background content beneath sheet -->176  <div class="content-wrap">177    <div class="favorites-head">178      <div class="lock"></div>179      <div>Private · 2 places</div>180    </div>181 182    <div class="card-images">183      <div class="img">[IMG: Sunset rail station]</div>184      <div class="img">[IMG: Old building facade]</div>185    </div>186 187    <div class="place-title">Funes</div>188    <div class="place-desc">my favorite destination place</div>189    <div class="actions">190      <div class="btn">Directions</div>191      <div class="btn secondary">Share</div>192    </div>193 194    <div class="card-images">195      <div class="img">[IMG: Café interior]</div>196      <div class="img">[IMG: Ice cream dessert]</div>197    </div>198  </div>199 200  <!-- Share as banner card -->201  <div class="share-as-card">202    <div class="avatar">A</div>203    <div class="share-as-text">204      <div class="title">Sharing as Amelia miller</div>205      <div class="email">amelia.miller2709@gmail.com</div>206    </div>207  </div>208 209  <!-- Bottom Share Sheet -->210  <div class="bottom-sheet">211    <div class="to-row">212      <div class="to-label">To</div>213      <div class="to-placeholder">Type a name, phone number, or email</div>214    </div>215 216    <div class="contact-list">217      <div class="contact-item">218        <div class="contact-avatar">n</div>219        <div class="contact-info">220          <div class="contact-name">natalie.larso...</div>221          <div class="contact-sub">natalie.larso...</div>222        </div>223        <div class="more-circle">...</div>224      </div>225    </div>226 227    <!-- Share targets row -->228    <div class="targets">229      <div class="target">230        <div class="t-icon icon-bubble">231          <svg viewBox="0 0 24 24">232            <path d="M3 4h18v12H12l-5 4v-4H3z"></path>233          </svg>234        </div>235        <div class="t-label">Messages</div>236      </div>237 238      <div class="target">239        <div class="t-icon">240          <div class="kik">kik</div>241        </div>242        <div class="t-label">Kik</div>243      </div>244 245      <div class="target">246        <div class="t-icon icon-clipboard">247          <svg viewBox="0 0 24 24">248            <rect x="6" y="7" width="12" height="14" rx="2"></rect>249            <path d="M9 4h6v3H9z"></path>250          </svg>251        </div>252        <div class="t-label">Copy to clipboard</div>253      </div>254 255      <div class="target">256        <div class="t-icon icon-more">257          <svg viewBox="0 0 24 24">258            <circle cx="6" cy="12" r="2.5"></circle>259            <circle cx="12" cy="12" r="2.5"></circle>260            <circle cx="18" cy="12" r="2.5"></circle>261          </svg>262        </div>263        <div class="t-label">More</div>264      </div>265    </div>266 267    <div class="gesture"></div>268  </div>269 270</div>271</body>272</html>