GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Share Sheet UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f3f3f3;13 border-radius: 0;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #000000;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 30px;28 box-sizing: border-box;29 z-index: 2;30 }31 .status-left { display: flex; align-items: center; gap: 18px; }32 .time { font-size: 40px; font-weight: 600; }33 .notif-dots { display: flex; gap: 16px; margin-left: 20px; }34 .notif-dots span { width: 20px; height: 20px; background:#fff; border-radius: 50%; opacity: 0.9; }35 .status-right { margin-left: auto; display:flex; align-items:center; gap:24px; }36 .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4; }37 38 /* Background app content (dimmed under share sheet) */39 .app-content {40 position: absolute;41 top: 110px;42 left: 0;43 right: 0;44 bottom: 0;45 padding: 36px;46 box-sizing: border-box;47 color: #333;48 }49 .title-row { display: flex; align-items: center; gap: 18px; }50 .app-title { font-size: 52px; font-weight: 700; }51 .private-row { color:#666; font-size: 34px; display:flex; align-items:center; gap:12px; margin-top:8px; }52 .lock-icon { width: 28px; height: 28px; }53 .menu-dots { margin-left:auto; }54 .menu-dots svg { width: 44px; height: 44px; fill:#777; }55 .img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 36px; }56 .img-ph {57 height: 300px;58 background:#E0E0E0;59 border: 1px solid #BDBDBD;60 display:flex; justify-content:center; align-items:center;61 color:#757575; font-size: 28px;62 }63 .place-card { margin-top: 30px; }64 .place-title { font-size: 56px; font-weight: 700; margin-bottom: 16px; }65 .place-desc { font-size: 36px; color:#444; }66 .actions { margin-top: 30px; display:flex; gap: 26px; }67 .pill {68 padding: 26px 34px;69 background:#0b57d0;70 border-radius: 60px;71 color:#fff;72 font-size: 36px;73 display:flex; align-items:center; gap:16px;74 }75 .pill.secondary {76 background:#eef3fe; color:#0b57d0; border:1px solid #cdd6f7;77 }78 79 /* Dark overlay above background */80 .dim-overlay {81 position: absolute;82 top: 110px;83 left: 0;84 width: 100%;85 height: 760px;86 background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.35));87 z-index: 3;88 pointer-events: none;89 }90 91 /* Share top header */92 .share-top {93 position: absolute;94 top: 140px;95 left: 0;96 width: 100%;97 z-index: 4;98 color: #fff;99 }100 .share-bar {101 display: flex; align-items: center; padding: 18px 28px;102 }103 .share-title { font-size: 70px; font-weight: 700; margin: 0 auto; }104 .close-btn { position: absolute; left: 28px; top: 20px; width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; }105 .close-btn svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 8; }106 107 .identity-card {108 margin: 30px;109 background:#ffffff;110 color:#222;111 border-radius: 22px;112 box-shadow: 0 10px 24px rgba(0,0,0,0.25);113 display:flex; align-items:center;114 padding: 30px;115 gap: 28px;116 }117 .avatar {118 width: 90px; height: 90px; border-radius: 50%; background:#cfe1ff; border:1px solid #aac5ff;119 display:flex; align-items:center; justify-content:center; color:#2257d4; font-weight:700; font-size:40px;120 }121 .identity-text .line1 { font-size: 40px; font-weight: 700; }122 .identity-text .line2 { font-size: 34px; color:#666; margin-top: 6px; }123 124 /* Bottom share sheet */125 .bottom-sheet {126 position: absolute;127 bottom: 0;128 left: 0;129 width: 100%;130 height: 900px;131 background: #ffffff;132 border-top-left-radius: 28px;133 border-top-right-radius: 28px;134 box-shadow: 0 -10px 30px rgba(0,0,0,0.35);135 z-index: 5;136 display: flex;137 flex-direction: column;138 }139 .sheet-content { padding: 28px 30px; box-sizing: border-box; }140 .to-row { font-size: 36px; color:#333; margin-bottom: 18px; }141 .to-input {142 border: 1px solid #e0e0e0;143 border-radius: 16px;144 padding: 26px;145 font-size: 34px;146 color: #777;147 }148 149 .contact {150 display:flex; align-items:center; gap:26px;151 padding: 26px 0;152 border-bottom: 1px solid #eee;153 }154 .contact .circle {155 width: 120px; height: 120px; border-radius: 60px; background:#5c42cc; color:#fff; font-size: 70px; display:flex; align-items:center; justify-content:center;156 }157 .contact .details { flex: 1; }158 .contact .name { font-size: 38px; font-weight: 700; color:#222; }159 .contact .sub { font-size: 32px; color:#777; margin-top: 8px; }160 .more-dot {161 width: 120px; height: 120px; border-radius: 60px; background:#f2f2f2; display:flex; align-items:center; justify-content:center;162 }163 .more-dot svg { width: 42px; height: 42px; fill:#777; }164 165 .share-options {166 margin-top: 30px;167 display: grid;168 grid-template-columns: repeat(4, 1fr);169 gap: 10px;170 text-align: center;171 }172 .opt {173 display:flex; flex-direction: column; align-items:center; gap: 12px;174 }175 .opt .icon {176 width: 110px; height: 110px; border-radius: 28px; background:#f3f6ff;177 display:flex; align-items:center; justify-content:center;178 border: 1px solid #e3e8ff;179 }180 .opt .icon.blue { background:#e7f0ff; border-color:#c7ddff; }181 .opt .icon.green { background:#e9f9e7; border-color:#ccefc8; }182 .opt .icon.gray { background:#f1f1f1; border-color:#dddddd; }183 .opt label { font-size: 30px; color:#333; }184 .opt small { font-size: 28px; color:#666; display:block; line-height: 1.1; }185 186 /* Helper icons */187 .bubble svg, .clipboard svg, .dots svg { width: 60px; height: 60px; }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div class="status-left">196 <div class="time">8:43</div>197 <div class="notif-dots">198 <span></span><span></span><span></span><span></span><span></span>199 </div>200 </div>201 <div class="status-right">202 <div class="status-icon">203 <svg viewBox="0 0 24 24">204 <path d="M2 18c4-5 9-8 20-8v8H2z"></path>205 </svg>206 </div>207 <div class="status-icon">208 <svg viewBox="0 0 24 24">209 <rect x="3" y="6" width="18" height="12" rx="2"></rect>210 <path d="M21 10h2v4h-2"></path>211 </svg>212 </div>213 </div>214 </div>215 216 <!-- Background app content (Google Maps - Favorites) -->217 <div class="app-content">218 <div class="title-row">219 <div class="app-title">Favorites</div>220 <div class="menu-dots">221 <svg viewBox="0 0 24 24">222 <circle cx="12" cy="5" r="2"></circle>223 <circle cx="12" cy="12" r="2"></circle>224 <circle cx="12" cy="19" r="2"></circle>225 </svg>226 </div>227 </div>228 <div class="private-row">229 <svg class="lock-icon" viewBox="0 0 24 24"><path d="M6 10V7a6 6 0 0112 0v3M5 10h14v10H5z" fill="none" stroke="#777" stroke-width="2"></path></svg>230 Private · 2 places231 </div>232 233 <div class="img-grid">234 <div class="img-ph">[IMG: Train tracks at sunset]</div>235 <div class="img-ph">[IMG: Old building facade]</div>236 </div>237 238 <div class="place-card">239 <div class="place-title">Funes</div>240 <div class="place-desc">my favorite destination place</div>241 <div class="actions">242 <div class="pill">243 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#fff" stroke-width="2"><path d="M10 22V12l-8 8V6l8 8V2l12 10-12 10z"></path></svg>244 Directions245 </div>246 <div class="pill secondary">247 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#0b57d0" stroke-width="2">248 <path d="M4 12h16"></path><path d="M12 4v16"></path>249 </svg>250 Share251 </div>252 </div>253 </div>254 255 <div class="img-grid" style="margin-top: 40px;">256 <div class="img-ph">[IMG: Blue interior room]</div>257 <div class="img-ph">[IMG: Ice cream dessert]</div>258 </div>259 </div>260 261 <!-- Dark overlay above content -->262 <div class="dim-overlay"></div>263 264 <!-- Share top header -->265 <div class="share-top">266 <div class="share-bar">267 <div class="close-btn">268 <svg viewBox="0 0 24 24">269 <path d="M4 4l16 16M20 4L4 20" />270 </svg>271 </div>272 <div class="share-title">Share</div>273 </div>274 275 <div class="identity-card">276 <div class="avatar">A</div>277 <div class="identity-text">278 <div class="line1">Sharing as Amelia miller</div>279 <div class="line2">amelia.miller2709@gmail.com</div>280 </div>281 </div>282 </div>283 284 <!-- Bottom Share Sheet -->285 <div class="bottom-sheet">286 <div class="sheet-content">287 <div class="to-row">To</div>288 <div class="to-input">Type a name, phone number, or email</div>289 290 <div class="contact">291 <div class="circle">n</div>292 <div class="details">293 <div class="name">natalie.larso...</div>294 <div class="sub">natalie.larso...</div>295 </div>296 <div class="more-dot">297 <svg viewBox="0 0 24 24">298 <circle cx="12" cy="5" r="2"></circle>299 <circle cx="12" cy="12" r="2"></circle>300 <circle cx="12" cy="19" r="2"></circle>301 </svg>302 </div>303 </div>304 305 <div class="share-options">306 <div class="opt">307 <div class="icon blue bubble">308 <svg viewBox="0 0 24 24" fill="none" stroke="#2f6fe1" stroke-width="2">309 <path d="M4 6h16v12H8l-4 4V6z"></path>310 </svg>311 </div>312 <label>Messages</label>313 </div>314 <div class="opt">315 <div class="icon green">316 <span style="color:#23c820; font-weight:700; font-size:44px;">kik</span>317 </div>318 <label>Kik</label>319 </div>320 <div class="opt">321 <div class="icon gray clipboard">322 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">323 <rect x="6" y="6" width="12" height="16" rx="2"></rect>324 <rect x="9" y="3" width="6" height="4" rx="1"></rect>325 </svg>326 </div>327 <label>Copy to</label>328 <small>clipboard</small>329 </div>330 <div class="opt">331 <div class="icon gray dots">332 <svg viewBox="0 0 24 24" fill="#777">333 <circle cx="5" cy="12" r="2"></circle>334 <circle cx="12" cy="12" r="2"></circle>335 <circle cx="19" cy="12" r="2"></circle>336 </svg>337 </div>338 <label>More</label>339 </div>340 </div>341 </div>342 </div>343 344</div>345</body>346</html>