GD-ML/AndroidCode
13.4k
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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #0e1b3e;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-size: 40px;31 justify-content: space-between;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .icon { width: 42px; height: 42px; }40 41 /* Header */42 .app-header {43 position: absolute;44 top: 110px;45 left: 0;46 width: 1080px;47 height: 230px;48 background: #0e1b3e;49 color: #fff;50 box-sizing: border-box;51 padding: 24px 36px;52 }53 .header-row {54 display: flex;55 align-items: center;56 justify-content: space-between;57 }58 .title-block {59 margin-top: 10px;60 }61 .title {62 font-weight: 800;63 font-size: 48px;64 opacity: 0.98;65 }66 .subtitle {67 margin-top: 8px;68 font-size: 34px;69 opacity: 0.8;70 }71 72 /* Content behind the sheet */73 .content {74 position: absolute;75 top: 340px;76 left: 0;77 width: 1080px;78 height: 1160px;79 background: #ffffff;80 box-sizing: border-box;81 padding: 36px;82 }83 .section-title {84 font-size: 52px;85 font-weight: 800;86 color: #1a2b4a;87 margin: 24px 0 24px;88 }89 .cards-row {90 display: flex;91 gap: 28px;92 }93 .fare-card {94 flex: 1;95 min-height: 240px;96 border: 2px solid #27406b;97 border-radius: 28px;98 padding: 28px;99 box-sizing: border-box;100 color: #27406b;101 }102 .fare-card.muted {103 border-color: #e1e2e6;104 color: #b8bbc6;105 background: #f7f8fa;106 }107 .fare-card .card-title {108 font-size: 42px;109 font-weight: 800;110 margin-bottom: 12px;111 }112 .fare-card .pill {113 display: inline-flex;114 align-items: center;115 gap: 10px;116 font-size: 32px;117 margin: 12px 0;118 }119 .fare-card .price {120 margin-top: 18px;121 font-weight: 800;122 font-size: 40px;123 }124 .subsection-title {125 margin-top: 36px;126 font-size: 46px;127 font-weight: 800;128 color: #1a2b4a;129 }130 .paragraph {131 margin-top: 10px;132 font-size: 34px;133 color: #394050;134 line-height: 1.35;135 max-width: 980px;136 }137 138 /* Bottom Share Sheet */139 .sheet {140 position: absolute;141 left: 0;142 bottom: 60px;143 width: 1080px;144 height: 1180px;145 background: #EEF0F6;146 border-top-left-radius: 36px;147 border-top-right-radius: 36px;148 box-shadow: 0 -10px 40px rgba(0,0,0,0.18);149 box-sizing: border-box;150 padding: 22px 32px 28px;151 }152 .grabber {153 width: 130px;154 height: 12px;155 background: #c9ced7;156 border-radius: 8px;157 margin: 8px auto 18px;158 }159 .sheet-message {160 font-size: 40px;161 color: #2a2f3a;162 line-height: 1.35;163 padding: 0 8px;164 max-width: 1000px;165 }166 .chip-row {167 margin-top: 28px;168 display: flex;169 gap: 24px;170 padding-left: 8px;171 }172 .chip {173 display: inline-flex;174 align-items: center;175 gap: 14px;176 padding: 18px 26px;177 font-size: 36px;178 border-radius: 18px;179 border: 2px solid #6b7f35;180 background: #ffffff;181 color: #2b3a1a;182 }183 .chip .icon { width: 36px; height: 36px; }184 185 .targets {186 margin-top: 36px;187 padding: 0 8px;188 }189 .target-row {190 display: flex;191 justify-content: space-between;192 }193 .target {194 width: 300px;195 text-align: center;196 }197 .avatar {198 width: 148px;199 height: 148px;200 border-radius: 999px;201 margin: 0 auto;202 position: relative;203 display: flex;204 align-items: center;205 justify-content: center;206 background: #2e7dd8;207 color: white;208 font-weight: 700;209 font-size: 44px;210 }211 .avatar.photo {212 background: #E0E0E0;213 border: 1px solid #BDBDBD;214 color: #757575;215 font-size: 24px;216 padding: 0 12px;217 line-height: 1.1;218 text-align: center;219 }220 .badge {221 position: absolute;222 right: 6px;223 bottom: 6px;224 width: 38px;225 height: 38px;226 background: #1e88e5;227 border-radius: 999px;228 color: #fff;229 font-size: 26px;230 line-height: 38px;231 font-weight: 800;232 }233 .label {234 margin-top: 16px;235 font-size: 28px;236 color: #2b3140;237 line-height: 1.25;238 }239 240 .apps-row {241 margin-top: 36px;242 display: flex;243 justify-content: space-between;244 padding: 0 28px;245 }246 .app {247 width: 200px;248 text-align: center;249 }250 .app-icon {251 width: 120px;252 height: 120px;253 border-radius: 26px;254 background: #ffffff;255 border: 1px solid #D7D9DE;256 margin: 0 auto;257 display: flex;258 align-items: center;259 justify-content: center;260 color: #4a4f59;261 font-weight: 800;262 font-size: 44px;263 }264 .app .label {265 font-size: 30px;266 margin-top: 16px;267 }268 269 /* Gesture bar */270 .gesture {271 position: absolute;272 bottom: 16px;273 left: 50%;274 transform: translateX(-50%);275 width: 320px;276 height: 12px;277 background: #c5c7ce;278 border-radius: 8px;279 }280 281 /* Simple helper SVG styling */282 .stroke-icon path { stroke: currentColor; fill: none; stroke-width: 2; }283 .fill-icon path { fill: currentColor; }284</style>285</head>286<body>287<div id="render-target">288 289 <!-- Status bar -->290 <div class="status-bar">291 <div class="time">5:16</div>292 <div class="status-icons">293 <!-- Sun icon -->294 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true">295 <path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-5h1v3h-1V2zM12 19h1v3h-1v-3zM2 12h3v1H2v-1zm17 0h3v1h-3v-1zM4.2 4.2l.7.7-2.1 2.1-.7-.7 2.1-2.1zm15 15l.7.7-2.1 2.1-.7-.7 2.1-2.1zM19.8 4.2l2.1 2.1-.7.7-2.1-2.1.7-.7zM4.2 19.8l2.1 2.1-.7.7-2.1-2.1.7-.7z"/>296 </svg>297 <!-- Mail icon -->298 <svg class="icon stroke-icon" viewBox="0 0 24 24" aria-hidden="true">299 <path d="M3 6h18v12H3zM3 6l9 7 9-7"/>300 </svg>301 <!-- Phone outline -->302 <svg class="icon stroke-icon" viewBox="0 0 24 24" aria-hidden="true">303 <path d="M7 2h10v20H7z"/>304 </svg>305 <!-- WiFi -->306 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true">307 <path d="M12 20a2 2 0 110-4 2 2 0 010 4zm-6.5-6.5a10 10 0 0113 0l-1.5 1.3a8 8 0 00-10 0L5.5 13.5zm-3-3a14 14 0 0119 0l-1.6 1.3a12 12 0 00-15.8 0L2 10z"/>308 </svg>309 <!-- Battery -->310 <svg class="icon stroke-icon" viewBox="0 0 24 24" aria-hidden="true">311 <path d="M3 8h14v8H3zM17 10h2v4h-2z"/>312 </svg>313 </div>314 </div>315 316 <!-- App header -->317 <div class="app-header">318 <div class="header-row">319 <div style="display:flex;align-items:center;gap:16px;">320 <!-- Back arrow -->321 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true" style="color:#ffffff;">322 <path d="M15.5 4l-8 8 8 8 1.5-1.5-6.5-6.5 6.5-6.5z"/>323 </svg>324 <div class="title-block">325 <div class="title">Amsterdam… › Rotterdam Centraal</div>326 <div class="subtitle">Fri, Oct 20, 1 passenger</div>327 </div>328 </div>329 <!-- Share icon -->330 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true" style="color:#bfc8dd;">331 <path d="M18 16a3 3 0 00-2.4 1.2L8.8 13a3.2 3.2 0 000-2l6.7-4.2A3 3 0 1015 5a3 3 0 001.2 2.4L9.4 11A3 3 0 007 10a3 3 0 000 6 3 3 0 002.4-1.2l6.7 4.2A3 3 0 1021 16a3 3 0 00-3-0z"/>332 </svg>333 </div>334 </div>335 336 <!-- Content behind sheet -->337 <div class="content">338 <div class="section-title">Fare conditions</div>339 <div class="cards-row">340 <div class="fare-card">341 <div class="card-title">Standard</div>342 <div class="pill">343 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true" style="color:#27406b;">344 <path d="M6 2h12v6H6zM6 10h12v12H6z"/>345 </svg>346 <span>Semi refundable</span>347 </div>348 <div class="price">+$0</div>349 </div>350 <div class="fare-card muted">351 <div class="card-title" style="color:#c5c7cf;">There is only 1 fare available for this journey</div>352 </div>353 </div>354 355 <div class="subsection-title">Fare terms</div>356 <div class="paragraph">357 Standard<br>358 Ticket is only valid for the chosen route and …359 </div>360 </div>361 362 <!-- Bottom share sheet -->363 <div class="sheet">364 <div class="grabber"></div>365 366 <div class="sheet-message">367 Oh wow, look at this deal I found! I think you should lock it down before it’s gone. …368 </div>369 370 <div class="chip-row">371 <div class="chip">372 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true">373 <path d="M4 4h12v14H4zM8 18h12V8h-2v8H8z"/>374 </svg>375 <span>Copy</span>376 </div>377 <div class="chip">378 <svg class="icon fill-icon" viewBox="0 0 24 24" aria-hidden="true">379 <path d="M12 2l4 4-4 4-4-4 4-4zm-8 16l4-4 4 4-4 4-4-4zm12 0l4-4 4 4-4 4-4-4z"/>380 </svg>381 <span>Nearby</span>382 </div>383 </div>384 385 <div class="targets">386 <div class="target-row">387 <div class="target">388 <div class="avatar">389 <!-- simple two-user glyph -->390 <svg width="90" height="90" viewBox="0 0 24 24" aria-hidden="true" style="color:#ffffff">391 <path d="M7 11a3 3 0 110-6 3 3 0 010 6zm10 0a3 3 0 110-6 3 3 0 010 6z" fill="#ffffff"/>392 <path d="M2 19c0-2.2 3-4 5-4s5 1.8 5 4H2zm10 0c0-2 2.7-3.6 4.5-3.9 2.5-.4 5.5 1.4 5.5 3.9h-10z" fill="#cfe2ff"/>393 </svg>394 <div class="badge">S</div>395 </div>396 <div class="label">Jason smith,<br>Andrew Reed</div>397 </div>398 399 <div class="target">400 <div class="avatar">401 <svg width="90" height="90" viewBox="0 0 24 24" aria-hidden="true" style="color:#ffffff">402 <path d="M12 12a4 4 0 100-8 4 4 0 000 8z" fill="#ffffff"/>403 <path d="M4 20c0-3 4-5 8-5s8 2 8 5H4z" fill="#cfe2ff"/>404 </svg>405 <div class="badge">S</div>406 </div>407 <div class="label">Andrew Reed</div>408 </div>409 410 <div class="target">411 <div class="avatar photo">412 [IMG: Palm avatar]413 </div>414 <div class="badge">S</div>415 <div class="label">Jason smith</div>416 </div>417 </div>418 419 <div class="apps-row">420 <div class="app">421 <div class="app-icon" style="border-color:#e1e1e1;">M</div>422 <div class="label">Gmail</div>423 </div>424 <div class="app">425 <div class="app-icon" style="color:#1e88e5;">S</div>426 <div class="label">Skype</div>427 </div>428 <div class="app">429 <div class="app-icon" style="color:#2f5cff;">M</div>430 <div class="label">Messages</div>431 </div>432 <div class="app">433 <div class="app-icon" style="color:#1e8e3e;">D</div>434 <div class="label">Drive</div>435 </div>436 </div>437 </div>438 </div>439 440 <!-- Gesture bar -->441 <div class="gesture"></div>442</div>443</body>444</html>