GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Share Sheet - Restaurant</title>5<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">6<style>7 body { margin:0; padding:0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1440px;11 height: 3120px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 120px;23 padding: 0 40px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #000;29 font-size: 48px;30 opacity: 0.9;31 }32 .status .right {33 display: flex;34 align-items: center;35 gap: 28px;36 }37 .icon-wifi, .icon-battery {38 width: 46px; height: 46px;39 }40 41 /* Header with title and icons */42 .app-header {43 position: absolute;44 top: 120px;45 left: 0;46 width: 100%;47 height: 170px;48 padding: 0 40px;49 display: flex;50 align-items: center;51 box-sizing: border-box;52 background: #ffffff;53 border-bottom: 1px solid #ececec;54 }55 .app-header .title {56 flex: 1;57 font-size: 58px;58 font-weight: 700;59 color: #222;60 white-space: nowrap;61 overflow: hidden;62 text-overflow: ellipsis;63 margin: 0 20px;64 }65 .h-icon {66 width: 72px; height: 72px;67 display: flex;68 align-items: center;69 justify-content: center;70 color: #a00;71 }72 .h-icon svg { width: 60px; height: 60px; fill: none; stroke: #7b7b7b; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }73 74 /* Tabs */75 .tabs {76 position: absolute;77 top: 290px;78 left: 0;79 width: 100%;80 height: 120px;81 display: flex;82 align-items: center;83 padding: 0 40px;84 box-sizing: border-box;85 gap: 40px;86 background: #ffffff;87 border-bottom: 1px solid #f0f0f0;88 }89 .tab {90 font-size: 48px;91 color: #6a6a6a;92 padding: 20px 0;93 }94 .tab.active {95 color: #c62828;96 font-weight: 700;97 border-bottom: 8px solid #c62828;98 }99 100 /* Time chips */101 .chips {102 position: absolute;103 top: 440px;104 left: 0;105 width: 100%;106 display: flex;107 gap: 30px;108 padding: 0 40px;109 box-sizing: border-box;110 }111 .chip {112 background: #c62828;113 color: #fff;114 padding: 26px 40px;115 border-radius: 22px;116 font-size: 46px;117 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);118 }119 120 .view-availability {121 position: absolute;122 top: 620px;123 left: 40px;124 right: 40px;125 height: 150px;126 border: 3px solid #dcdcdc;127 border-radius: 24px;128 color: #222;129 display: flex;130 align-items: center;131 justify-content: center;132 font-size: 54px;133 font-weight: 600;134 background: #fafafa;135 }136 137 /* Sections */138 .section {139 position: absolute;140 left: 40px;141 right: 40px;142 top: 840px;143 color: #222;144 }145 .section h2 {146 font-size: 64px;147 margin: 0 0 20px 0;148 }149 .sub {150 font-size: 44px;151 color: #666;152 margin-bottom: 26px;153 }154 .call-btn {155 display: inline-flex;156 align-items: center;157 justify-content: center;158 padding: 26px 42px;159 border-radius: 18px;160 border: 2px solid #c62828;161 color: #c62828;162 font-size: 48px;163 font-weight: 700;164 background: #fff;165 }166 167 .menu-head {168 position: absolute;169 top: 1180px;170 left: 40px;171 right: 40px;172 font-size: 70px;173 font-weight: 800;174 }175 176 /* Dimmed backdrop for bottom sheet */177 .dim {178 position: absolute;179 inset: 0;180 background: rgba(0,0,0,0.35);181 }182 183 /* Bottom sheet */184 .sheet {185 position: absolute;186 left: 0;187 bottom: 0;188 width: 100%;189 height: 1660px;190 background: #0f0f0f;191 color: #f5f5f5;192 border-top-left-radius: 48px;193 border-top-right-radius: 48px;194 box-shadow: 0 -10px 40px rgba(0,0,0,0.5);195 }196 .handle {197 width: 160px; height: 14px;198 background: #5b5b5b;199 border-radius: 8px;200 margin: 28px auto 40px;201 }202 .sheet-content {203 padding: 0 70px;204 }205 .share-text {206 font-size: 56px;207 line-height: 1.3;208 color: #f1f1f1;209 opacity: 0.98;210 }211 .action-row {212 margin-top: 40px;213 display: flex;214 gap: 36px;215 }216 .action-btn {217 display: inline-flex;218 align-items: center;219 gap: 24px;220 padding: 26px 42px;221 border-radius: 24px;222 border: 2px solid #6b6b6b;223 color: #e9e9e9;224 font-size: 50px;225 background: #1b1b1b;226 }227 .action-btn svg { width: 56px; height: 56px; stroke: #e9e9e9; fill: none; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }228 229 .no-reco {230 margin: 120px 0 40px;231 text-align: center;232 font-size: 46px;233 color: #bdbdbd;234 }235 236 .apps {237 display: flex;238 justify-content: space-around;239 padding: 20px 70px;240 margin-top: 40px;241 }242 .app {243 display: flex;244 flex-direction: column;245 align-items: center;246 gap: 28px;247 }248 .app .circle {249 width: 200px; height: 200px;250 border-radius: 50%;251 background: #ececec;252 border: 2px solid #cfcfcf;253 display: flex;254 align-items: center;255 justify-content: center;256 color: #444;257 font-weight: 700;258 font-size: 42px;259 }260 .app .label {261 font-size: 44px;262 color: #e8e8e8;263 }264 265 /* Placeholder app colors */266 .gmail { background: #fff0f0; }267 .drive { background: #eef7ff; }268 .messages { background: #e8f0ff; }269 .keep { background: #fff6d7; }270 271 /* Under-sheet content slight fade */272 .content-area {273 position: absolute;274 inset: 0;275 }276</style>277</head>278<body>279<div id="render-target">280 281 <!-- Underlying app content -->282 <div class="content-area">283 <div class="status">284 <div>10:11</div>285 <div class="right">286 <div>86°</div>287 <svg class="icon-wifi" viewBox="0 0 24 24">288 <path d="M2 8c5-4 15-4 20 0M5 11c4-3 10-3 14 0M8 14c2-2 6-2 8 0M12 18h0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>289 </svg>290 <svg class="icon-battery" viewBox="0 0 24 24">291 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#000" fill="none" stroke-width="2"/>292 <rect x="4" y="8" width="14" height="8" fill="#000"/>293 <rect x="20" y="10" width="2" height="4" fill="#000"/>294 </svg>295 </div>296 </div>297 298 <div class="app-header">299 <div class="h-icon">300 <svg viewBox="0 0 24 24">301 <path d="M15 18l-6-6 6-6" />302 </svg>303 </div>304 <div class="title">Lakaz Maman - Mauritian Stre...</div>305 <div class="h-icon">306 <svg viewBox="0 0 24 24">307 <path d="M6 3h12v14l-6-3-6 3V3z" />308 </svg>309 </div>310 <div class="h-icon">311 <svg viewBox="0 0 24 24">312 <path d="M4 12h12M12 4l8 8-8 8" />313 </svg>314 </div>315 </div>316 317 <div class="tabs">318 <div class="tab active">Reservations</div>319 <div class="tab">Delivery & Takeout</div>320 <div class="tab">Menu</div>321 <div class="tab">Reviews</div>322 </div>323 324 <div class="chips">325 <div class="chip">5:30 PM</div>326 <div class="chip">5:45 PM</div>327 <div class="chip">6:00 PM</div>328 <div class="chip">8:00 PM</div>329 <div class="chip">8:15 PM</div>330 </div>331 332 <div class="view-availability">View full availability</div>333 334 <div class="section">335 <h2>Delivery & Takeout</h2>336 <div class="sub">Restaurant options</div>337 <div class="call-btn">Call to order</div>338 </div>339 340 <div class="menu-head">Menu</div>341 </div>342 343 <!-- Dim overlay -->344 <div class="dim"></div>345 346 <!-- Share bottom sheet -->347 <div class="sheet">348 <div class="handle"></div>349 <div class="sheet-content">350 <div class="share-text">351 I think you'd like this restaurant I found on OpenTable:352 Lakaz Maman - Mauritian Street Kitchen...353 </div>354 355 <div class="action-row">356 <div class="action-btn">357 <svg viewBox="0 0 24 24">358 <path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>359 <path d="M14 2v6h6"/>360 </svg>361 <span>Copy</span>362 </div>363 <div class="action-btn">364 <svg viewBox="0 0 24 24">365 <path d="M4 12c4-5 12-5 16 0" />366 <path d="M7 12c2-3 8-3 10 0" />367 <circle cx="12" cy="12" r="1.8" fill="#e9e9e9" />368 </svg>369 <span>Nearby</span>370 </div>371 </div>372 373 <div class="no-reco">No recommended people to share with</div>374 375 <div class="apps">376 <div class="app">377 <div class="circle gmail">G</div>378 <div class="label">Gmail</div>379 </div>380 <div class="app">381 <div class="circle drive">Drive</div>382 <div class="label">Drive</div>383 </div>384 <div class="app">385 <div class="circle messages">SMS</div>386 <div class="label">Messages</div>387 </div>388 <div class="app">389 <div class="circle keep">Keep</div>390 <div class="label">Keep Notes</div>391 </div>392 </div>393 </div>394 </div>395 396</div>397</body>398</html>