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>Restaurant Share Sheet UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 20px;22 left: 28px;23 right: 28px;24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 opacity: 0.9;30 z-index: 5;31 pointer-events: none;32 }33 .status-time { font-size: 40px; font-weight: 500; }34 .status-icons { display: flex; gap: 24px; align-items: center; }35 .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.9; }36 37 /* Hero image */38 .hero {39 position: absolute;40 top: 0;41 left: 0;42 width: 1080px;43 height: 780px;44 }45 .hero .photo {46 width: 100%;47 height: 100%;48 background: #E0E0E0;49 border: 1px solid #BDBDBD;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #757575;54 font-size: 32px;55 }56 .hero::after {57 content: "";58 position: absolute;59 inset: 0;60 background: rgba(0,0,0,0.35);61 }62 63 /* Overlay icons on hero */64 .hero-overlay {65 position: absolute;66 inset: 0;67 pointer-events: none;68 }69 .back-btn, .bookmark-btn, .share-btn {70 position: absolute;71 width: 64px;72 height: 64px;73 border-radius: 32px;74 display: flex;75 align-items: center;76 justify-content: center;77 background: rgba(255,255,255,0.08);78 backdrop-filter: blur(2px);79 pointer-events: auto;80 }81 .back-btn { top: 250px; left: 24px; }82 .bookmark-btn { top: 260px; right: 160px; }83 .share-btn { top: 260px; right: 72px; }84 .back-btn svg, .bookmark-btn svg, .share-btn svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; }85 86 /* See photos chip */87 .see-photos {88 position: absolute;89 bottom: 24px;90 left: 50%;91 transform: translateX(-50%);92 background: rgba(0,0,0,0.5);93 color: #fff;94 padding: 20px 34px;95 border-radius: 28px;96 font-size: 32px;97 z-index: 3;98 }99 100 /* Details section */101 .details {102 position: absolute;103 top: 780px;104 left: 0;105 width: 1080px;106 background: #EFEFEF;107 color: #222;108 padding: 36px 40px 24px 40px;109 }110 .title {111 font-size: 66px;112 font-weight: 800;113 letter-spacing: 1px;114 margin-bottom: 20px;115 }116 .rating-row, .price-row, .location-row {117 display: flex;118 align-items: center;119 gap: 20px;120 font-size: 36px;121 margin: 16px 0;122 color: #333;123 }124 .rating-stars { display: flex; gap: 8px; }125 .rating-stars svg { width: 34px; height: 34px; fill: #E53935; }126 .icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }127 .icon svg { width: 36px; height: 36px; fill: none; stroke: #444; stroke-width: 2.5; }128 .tabs {129 display: flex;130 gap: 60px;131 font-size: 40px;132 border-top: 1px solid #ddd;133 margin-top: 26px;134 padding: 26px 0 20px 0;135 }136 .tabs .active { color: #C62828; font-weight: 700; }137 138 /* Share sheet */139 .share-sheet {140 position: absolute;141 left: 0;142 bottom: 0;143 width: 1080px;144 height: 1220px;145 background: #1F1F1F;146 color: #fff;147 border-top-left-radius: 42px;148 border-top-right-radius: 42px;149 box-shadow: 0 -8px 30px rgba(0,0,0,0.5);150 padding: 32px 40px;151 }152 .handle {153 width: 120px;154 height: 12px;155 background: #636363;156 border-radius: 6px;157 margin: 8px auto 26px auto;158 }159 .share-text {160 font-size: 36px;161 line-height: 1.35;162 color: #EAEAEA;163 margin: 16px 0 30px 0;164 }165 .actions {166 display: flex;167 gap: 28px;168 margin-bottom: 60px;169 }170 .pill {171 display: inline-flex;172 align-items: center;173 gap: 16px;174 border: 2px solid #4D86FF;175 color: #EAEAEA;176 padding: 22px 28px;177 border-radius: 18px;178 font-size: 34px;179 background: transparent;180 }181 .pill .pill-icon svg { width: 34px; height: 34px; stroke: #4D86FF; fill: none; stroke-width: 2.5; }182 183 .no-people {184 text-align: center;185 color: #A0A0A0;186 font-size: 34px;187 margin: 40px 0 46px 0;188 }189 190 .apps {191 display: flex;192 justify-content: space-around;193 align-items: center;194 padding: 0 40px;195 margin-top: 20px;196 }197 .app-item {198 display: flex;199 flex-direction: column;200 align-items: center;201 gap: 18px;202 }203 .app-icon {204 width: 132px;205 height: 132px;206 border-radius: 66px;207 background: #E0E0E0;208 border: 1px solid #BDBDBD;209 display: flex;210 align-items: center;211 justify-content: center;212 color: #757575;213 font-size: 22px;214 text-align: center;215 padding: 10px;216 }217 .app-label {218 font-size: 30px;219 color: #DADADA;220 }221 222 /* Home indicator */223 .home-indicator {224 position: absolute;225 bottom: 18px;226 left: 50%;227 transform: translateX(-50%);228 width: 240px;229 height: 10px;230 background: #E6E6E6;231 border-radius: 5px;232 opacity: 0.9;233 }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status bar -->240 <div class="status-bar">241 <div class="status-time">6:47</div>242 <div class="status-icons">243 <!-- Wi-Fi -->244 <svg viewBox="0 0 24 24">245 <path d="M2 8c5-4 15-4 20 0" />246 <path d="M5 12c3-3 11-3 14 0" />247 <path d="M8 16c2-2 6-2 8 0" />248 <circle cx="12" cy="19" r="1.8" fill="#fff" stroke="none"/>249 </svg>250 <!-- Battery -->251 <svg viewBox="0 0 28 24">252 <rect x="2" y="6" width="20" height="12" rx="2" />253 <rect x="22" y="9" width="4" height="6" rx="1" />254 <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"/>255 </svg>256 </div>257 </div>258 259 <!-- Hero image -->260 <div class="hero">261 <div class="photo">[IMG: Restaurant interior]</div>262 263 <div class="hero-overlay">264 <div class="back-btn">265 <svg viewBox="0 0 24 24">266 <path d="M15 5L7 12l8 7" />267 </svg>268 </div>269 <div class="bookmark-btn">270 <svg viewBox="0 0 24 24">271 <path d="M6 4h12v16l-6-4-6 4z" />272 </svg>273 </div>274 <div class="share-btn">275 <svg viewBox="0 0 24 24">276 <circle cx="6" cy="12" r="2.5" />277 <circle cx="18" cy="6" r="2.5" />278 <circle cx="18" cy="18" r="2.5" />279 <path d="M8 12l8-6M8 12l8 6" />280 </svg>281 </div>282 <div class="see-photos">See all 62 photos</div>283 </div>284 </div>285 286 <!-- Details Section -->287 <div class="details">288 <div class="title">DROUANT</div>289 290 <div class="rating-row">291 <div class="rating-stars">292 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>293 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>294 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>295 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>296 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>297 </div>298 <div class="icon">299 <svg viewBox="0 0 24 24">300 <rect x="3" y="6" width="18" height="12" rx="3"></rect>301 <path d="M7 10h10M7 14h6"></path>302 </svg>303 </div>304 <div>96 reviews</div>305 </div>306 307 <div class="price-row">308 <div class="icon">309 <svg viewBox="0 0 24 24">310 <rect x="3" y="5" width="18" height="14" rx="3"></rect>311 <path d="M7 12h10"></path>312 <text x="11.8" y="12.5" font-size="8" text-anchor="middle" fill="#444" dominant-baseline="middle">€</text>313 </svg>314 </div>315 <div>€51 and over</div>316 <div class="icon">317 <svg viewBox="0 0 24 24">318 <path d="M8 4v16M12 4v16M18 4l-3 5v7l3 4" />319 </svg>320 </div>321 <div>French</div>322 </div>323 324 <div class="location-row">325 <div class="icon">326 <svg viewBox="0 0 24 24">327 <path d="M12 21s-6-6-6-10a6 6 0 1 1 12 0c0 4-6 10-6 10z"></path>328 <circle cx="12" cy="11" r="2.3"></circle>329 </svg>330 </div>331 <div>16 rue Gaillon, Paris, Paris, 75002</div>332 </div>333 334 <div class="tabs">335 <div class="active">Reservations</div>336 <div>Menu</div>337 <div>Reviews</div>338 <div>Details</div>339 </div>340 </div>341 342 <!-- Share sheet overlay -->343 <div class="share-sheet">344 <div class="handle"></div>345 <div class="share-text">346 I think you'd like this restaurant I found on OpenTable: DROUANT...347 </div>348 349 <div class="actions">350 <div class="pill">351 <span class="pill-icon">352 <svg viewBox="0 0 24 24">353 <rect x="5" y="5" width="14" height="14" rx="2"></rect>354 <path d="M9 9h6M9 13h6"></path>355 </svg>356 </span>357 <span>Copy</span>358 </div>359 <div class="pill">360 <span class="pill-icon">361 <svg viewBox="0 0 24 24">362 <path d="M6 12a6 6 0 0 1 12 0" />363 <circle cx="12" cy="12" r="2.5"></circle>364 </svg>365 </span>366 <span>Nearby</span>367 </div>368 </div>369 370 <div class="no-people">No recommended people to share with</div>371 372 <div class="apps">373 <div class="app-item">374 <div class="app-icon">[IMG: Gmail Icon]</div>375 <div class="app-label">Gmail</div>376 </div>377 <div class="app-item">378 <div class="app-icon">[IMG: Messages Icon]</div>379 <div class="app-label">Messages</div>380 </div>381 <div class="app-item">382 <div class="app-icon">[IMG: Drive Icon]</div>383 <div class="app-label">Drive</div>384 </div>385 <div class="app-item">386 <div class="app-icon" style="background:#E0E0E0;">[IMG: Snapchat Icon]</div>387 <div class="app-label">Snapchat</div>388 </div>389 </div>390 </div>391 392 <!-- Home indicator -->393 <div class="home-indicator"></div>394</div>395</body>396</html>