GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Restaurant Delivery Modal UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 28px;15 box-shadow: 0 8px 24px rgba(0,0,0,0.15);16 font-family: Arial, Helvetica, sans-serif;17 color: #222;18 }19 20 /* Status bar */21 .status-bar {22 height: 90px;23 background: #f2f2f2;24 display: flex;25 align-items: center;26 padding: 0 32px;27 font-weight: 600;28 color: #111;29 }30 .status-left { display: flex; align-items: center; gap: 16px; }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .status-text { font-size: 34px; }38 39 /* App bar */40 .appbar {41 height: 150px;42 background: #fff;43 border-bottom: 1px solid #e6e6e6;44 display: flex;45 align-items: center;46 padding: 0 32px;47 position: relative;48 }49 .appbar .title {50 font-size: 46px;51 font-weight: 700;52 margin-left: 24px;53 }54 .appbar .actions {55 margin-left: auto;56 display: flex;57 gap: 28px;58 }59 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }60 61 /* Tabs */62 .tabs {63 height: 110px;64 background: #fff;65 display: flex;66 align-items: flex-end;67 padding: 0 32px;68 gap: 60px;69 border-bottom: 1px solid #ececec;70 }71 .tab {72 font-size: 34px;73 color: #333;74 padding-bottom: 22px;75 position: relative;76 }77 .tab.active {78 color: #b43a3a;79 font-weight: 700;80 }81 .tab.active::after {82 content: "";83 position: absolute;84 left: 0;85 bottom: 0;86 width: 100%;87 height: 6px;88 background: #b43a3a;89 border-radius: 3px;90 }91 92 /* Info banner */93 .info-banner {94 background: #eef5fb;95 margin: 0 32px;96 border-radius: 12px;97 padding: 28px 28px;98 display: flex;99 align-items: center;100 gap: 24px;101 }102 .info-banner .text {103 font-size: 34px;104 color: #3a3a3a;105 line-height: 1.35;106 flex: 1;107 }108 .alert-btn {109 display: inline-flex;110 align-items: center;111 gap: 16px;112 background: #3b7485;113 color: #fff;114 font-weight: 700;115 font-size: 32px;116 padding: 22px 26px;117 border-radius: 14px;118 }119 120 /* Cards row preview (behind modal) */121 .card-row {122 display: flex;123 gap: 28px;124 padding: 28px 32px;125 }126 .card {127 flex: 1;128 background: #fff;129 border-radius: 18px;130 box-shadow: 0 6px 14px rgba(0,0,0,0.08);131 overflow: hidden;132 }133 .card .img {134 height: 180px;135 background: #E0E0E0;136 border-bottom: 1px solid #BDBDBD;137 display: flex;138 align-items: center;139 justify-content: center;140 color: #757575;141 font-size: 30px;142 }143 .card .title {144 padding: 24px;145 font-size: 34px;146 font-weight: 700;147 }148 149 /* Content list */150 .section {151 padding: 14px 32px 0 32px;152 }153 .section h2 {154 font-size: 42px;155 margin: 18px 0 4px 0;156 font-weight: 700;157 }158 .section .subtitle {159 font-size: 30px;160 color: #666;161 margin-bottom: 22px;162 }163 .dish {164 padding: 24px 0;165 border-top: 1px solid #eee;166 position: relative;167 min-height: 220px;168 }169 .dish:first-child { border-top: none; }170 .dish h3 {171 font-size: 40px;172 font-weight: 800;173 margin: 8px 0;174 }175 .dish .desc {176 font-size: 30px;177 color: #4b4b4b;178 line-height: 1.45;179 max-width: 760px;180 }181 .dish .meta {182 display: flex;183 gap: 22px;184 margin-top: 18px;185 color: #555;186 font-size: 30px;187 }188 .meta .chip {189 display: inline-flex;190 align-items: center;191 gap: 10px;192 }193 .dish .thumb {194 position: absolute;195 right: 32px;196 top: 36px;197 width: 190px;198 height: 140px;199 background: #E0E0E0;200 border: 1px solid #BDBDBD;201 border-radius: 18px;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #757575;206 font-size: 26px;207 overflow: hidden;208 }209 210 /* Modal overlay */211 .overlay {212 position: absolute;213 inset: 0;214 background: rgba(0,0,0,0.35);215 }216 .modal {217 position: absolute;218 left: 50%;219 top: 860px;220 transform: translateX(-50%);221 width: 960px;222 background: #fff;223 border-radius: 18px;224 box-shadow: 0 24px 60px rgba(0,0,0,0.45);225 padding: 44px 48px 36px 48px;226 }227 .modal h1 {228 font-size: 44px;229 font-weight: 800;230 color: #283241;231 text-align: center;232 line-height: 1.3;233 margin: 0 0 26px 0;234 }235 .modal p {236 font-size: 30px;237 color: #5a6677;238 text-align: center;239 margin: 0 0 40px 0;240 }241 .modal .primary {242 display: block;243 width: 100%;244 background: #c94949;245 color: #fff;246 font-weight: 800;247 font-size: 40px;248 text-align: center;249 padding: 26px 0;250 border-radius: 14px;251 border: none;252 margin-bottom: 22px;253 }254 .modal .secondary {255 display: block;256 width: 100%;257 background: #fff;258 color: #202835;259 font-weight: 800;260 font-size: 38px;261 text-align: center;262 padding: 26px 0;263 border-radius: 14px;264 border: 2px solid #e2e2e2;265 }266 267 /* Gesture pill */268 .gesture {269 position: absolute;270 bottom: 34px;271 left: 50%;272 transform: translateX(-50%);273 width: 320px;274 height: 16px;275 background: #e9e9e9;276 border-radius: 10px;277 }278</style>279</head>280<body>281<div id="render-target">282 <!-- Status Bar -->283 <div class="status-bar">284 <div class="status-left">285 <div class="status-text">12:28</div>286 </div>287 <div class="status-right">288 <!-- simple status icons -->289 <svg width="40" height="40" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="10" fill="#fff" stroke="#333" stroke-width="2"></circle>291 <path d="M12 6v6l4 2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>292 </svg>293 <svg width="34" height="34" viewBox="0 0 24 24">294 <path d="M3 12l5 5 13-13" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>295 </svg>296 <svg width="34" height="34" viewBox="0 0 24 24">297 <circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="2"></circle>298 </svg>299 <svg width="34" height="34" viewBox="0 0 24 24">300 <circle cx="12" cy="12" r="2" fill="#333"></circle>301 </svg>302 <svg width="36" height="36" viewBox="0 0 24 24">303 <path d="M3 6h18l-1 12H4L3 6z" fill="none" stroke="#333" stroke-width="2"></path>304 </svg>305 <svg width="36" height="36" viewBox="0 0 24 24">306 <path d="M6 20h12a2 2 0 0 0 2-2V6" stroke="#333" stroke-width="2" fill="none"></path>307 <rect x="2" y="4" width="16" height="16" rx="2" stroke="#333" stroke-width="2" fill="none"></rect>308 </svg>309 </div>310 </div>311 312 <!-- App Bar -->313 <div class="appbar">314 <div class="icon-btn">315 <svg width="46" height="46" viewBox="0 0 24 24">316 <path d="M15 6l-6 6 6 6" stroke="#b43a3a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>317 </svg>318 </div>319 <div class="title">The Orchid Vegan Restaurant</div>320 <div class="actions">321 <div class="icon-btn" title="Save">322 <svg width="40" height="40" viewBox="0 0 24 24">323 <path d="M6 3h12v18l-6-3-6 3V3z" fill="none" stroke="#7a1d1d" stroke-width="2"></path>324 </svg>325 </div>326 <div class="icon-btn" title="Share">327 <svg width="40" height="40" viewBox="0 0 24 24">328 <circle cx="6" cy="12" r="2.5" fill="#b43a3a"></circle>329 <circle cx="12" cy="6" r="2.5" fill="#b43a3a"></circle>330 <circle cx="18" cy="12" r="2.5" fill="#b43a3a"></circle>331 <path d="M8 11l3-3m1 3l3-3" stroke="#b43a3a" stroke-width="2" fill="none" stroke-linecap="round"></path>332 </svg>333 </div>334 </div>335 </div>336 337 <!-- Tabs -->338 <div class="tabs">339 <div class="tab">Reservations</div>340 <div class="tab active">Delivery & Takeout</div>341 <div class="tab">Menu</div>342 <div class="tab">Reviews</div>343 </div>344 345 <!-- Info banner -->346 <div class="info-banner">347 <div class="text">At the moment, there’s no online availability within 2.5 hours of 12:30 PM.</div>348 <div class="alert-btn">349 <svg width="34" height="34" viewBox="0 0 24 24">350 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 17v2h16v-2l-2-1z" fill="#fff"></path>351 </svg>352 Set alert353 </div>354 </div>355 356 <!-- Preview row of cards -->357 <div class="card-row">358 <div class="card">359 <div class="img">[IMG: Restaurant Interior]</div>360 <div class="title">Royal Oak - 18 Goodra</div>361 </div>362 <div class="card">363 <div class="img">[IMG: Cozy Pub]</div>364 <div class="title">Guy Fawkes Inn</div>365 </div>366 </div>367 368 <!-- Menu section -->369 <div class="section">370 <h2>Menu</h2>371 <div class="subtitle">Popular Dishes</div>372 373 <div class="dish">374 <h3>Mushroom Toast</h3>375 <div class="desc">3 slices of Lion's Mane mushroom covered with sesame seeds served with sweet and sour sauce</div>376 <div class="meta">377 <div class="chip">378 <svg width="30" height="30" viewBox="0 0 24 24">379 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>380 <rect x="7" y="9" width="10" height="6" fill="none" stroke="#666" stroke-width="2"></rect>381 </svg>382 0 Photos383 </div>384 <div class="chip">385 <svg width="30" height="30" viewBox="0 0 24 24">386 <path d="M3 5h18v10H7l-4 4V5z" fill="none" stroke="#666" stroke-width="2"></path>387 </svg>388 8 Reviews389 </div>390 </div>391 </div>392 393 <div class="dish">394 <h3>Lemon Vegan Chicken</h3>395 <div class="desc">Pan fried vegan chicken in lemon sauce with a hint of herbs and spices.</div>396 <div class="thumb">[IMG: Lemon Vegan Chicken]</div>397 </div>398 </div>399 400 <!-- Modal overlay -->401 <div class="overlay"></div>402 <div class="modal">403 <h1>We're taking you to the restaurant's delivery site to place your order directly.</h1>404 <p>You'll be able to review all details before completing your order.</p>405 <button class="primary">Continue</button>406 <button class="secondary">Go back</button>407 </div>408 409 <!-- Gesture pill -->410 <div class="gesture"></div>411</div>412</body>413</html>