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 - Menu & Reviews</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;16 color: #2f3a45;17 }18 19 .screen {20 position: absolute;21 inset: 0;22 overflow-y: auto;23 -webkit-overflow-scrolling: touch;24 }25 26 /* Status bar */27 .status-bar {28 height: 92px;29 padding: 0 40px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #6b747c;34 font-size: 36px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .icon {42 width: 46px;43 height: 46px;44 display: inline-flex;45 align-items: center;46 justify-content: center;47 }48 49 /* App bar */50 .app-bar {51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 28px 0 24px;55 }56 .app-bar .title {57 font-size: 48px;58 font-weight: 700;59 margin-left: 12px;60 }61 .app-actions {62 margin-left: auto;63 display: flex;64 gap: 28px;65 }66 67 /* Tabs */68 .tabs {69 display: flex;70 gap: 40px;71 padding: 0 36px;72 border-bottom: 1px solid #e6e6e8;73 overflow: hidden;74 }75 .tab {76 font-size: 36px;77 color: #434c55;78 padding: 28px 8px;79 position: relative;80 white-space: nowrap;81 }82 .tab.active {83 color: #d13b3b;84 font-weight: 700;85 }86 .tab.active::after {87 content: "";88 position: absolute;89 left: 0; right: 0; bottom: 0;90 height: 6px;91 background: #d13b3b;92 border-radius: 3px 3px 0 0;93 }94 95 /* Time slots */96 .slot-strip {97 padding: 24px 24px;98 display: flex;99 gap: 24px;100 overflow: hidden;101 }102 .slot-card {103 width: 220px;104 height: 132px;105 border-radius: 18px;106 background: #d93b3b;107 color: #fff;108 display: flex;109 flex-direction: column;110 justify-content: space-between;111 padding: 18px;112 box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;113 }114 .slot-top {115 display: flex;116 align-items: center;117 gap: 10px;118 font-size: 36px;119 font-weight: 700;120 }121 .slot-bottom {122 font-size: 26px;123 opacity: 0.95;124 padding-top: 8px;125 border-top: 2px solid rgba(255,255,255,0.35);126 }127 128 .subtle-row {129 display: flex;130 align-items: center;131 gap: 16px;132 color: #6f7880;133 font-size: 34px;134 padding: 10px 36px 0 36px;135 }136 137 /* Section headers */138 .section {139 padding: 28px 36px 0 36px;140 }141 .section h2 {142 font-size: 46px;143 margin: 24px 0 22px 0;144 color: #2f3a45;145 }146 147 .ghost-button {148 width: 100%;149 height: 156px;150 border: 2px solid #d8d9db;151 border-radius: 22px;152 color: #2f3a45;153 background: #fff;154 font-size: 44px;155 font-weight: 700;156 display: flex;157 align-items: center;158 justify-content: center;159 }160 161 /* Reviews area */162 .reviews {163 padding: 10px 36px 0 36px;164 }165 .rating-row {166 display: flex;167 gap: 32px;168 align-items: flex-start;169 }170 .big-rating {171 font-size: 140px;172 font-weight: 700;173 color: #2f3a45;174 line-height: 1;175 }176 .stars {177 margin-top: 16px;178 display: flex;179 gap: 8px;180 }181 .stars svg { width: 42px; height: 42px; }182 .dist {183 margin-left: auto;184 width: 520px;185 margin-top: 8px;186 }187 .dist-row {188 display: flex;189 align-items: center;190 gap: 16px;191 margin: 16px 0;192 font-size: 30px;193 color: #5e6770;194 }195 .track {196 flex: 1;197 height: 22px;198 background: #e9ecef;199 border-radius: 12px;200 overflow: hidden;201 }202 .fill {203 height: 100%;204 background: #d93b3b;205 border-radius: 12px;206 }207 .divider {208 height: 2px;209 background: #e6e6e8;210 margin: 24px 0;211 }212 213 .attribs {214 display: flex;215 justify-content: space-between;216 padding: 0 8px;217 color: #5a626b;218 font-size: 34px;219 }220 .attrib {221 width: 24%;222 }223 .attrib .label {224 margin-bottom: 10px;225 }226 .attrib .value {227 font-weight: 700;228 color: #2f3a45;229 }230 231 /* Review card */232 .review-card {233 padding: 28px 0 36px 0;234 }235 .review-header {236 display: flex;237 align-items: center;238 justify-content: space-between;239 gap: 16px;240 }241 .reviewer {242 display: flex;243 align-items: center;244 gap: 22px;245 }246 .avatar {247 width: 96px;248 height: 96px;249 border-radius: 50%;250 background: #f2994a;251 color: #fff;252 font-weight: 800;253 font-size: 40px;254 display: flex;255 align-items: center;256 justify-content: center;257 }258 .reviewer .name {259 font-size: 40px;260 font-weight: 700;261 }262 .reviewer .meta {263 margin-top: 6px;264 color: #7a8188;265 font-size: 30px;266 }267 .review-date {268 color: #7a8188;269 font-size: 30px;270 white-space: nowrap;271 }272 .review-stars {273 margin: 20px 0 10px 118px;274 }275 .review-text {276 font-size: 36px;277 line-height: 1.4;278 color: #2f3a45;279 margin-left: 118px;280 }281 .reply {282 margin: 28px 0 0 118px;283 border-left: 3px solid #e6e6e8;284 padding-left: 24px;285 }286 .reply .by {287 font-size: 38px;288 font-weight: 800;289 color: #2f3a45;290 margin-bottom: 6px;291 }292 .reply .when {293 font-size: 28px;294 color: #7a8188;295 margin-bottom: 10px;296 }297 .reply .text {298 font-size: 32px;299 color: #586068;300 line-height: 1.45;301 }302 303 /* Gesture bar */304 .gesture {305 position: absolute;306 left: 50%;307 bottom: 18px;308 transform: translateX(-50%);309 width: 360px;310 height: 16px;311 background: #b8bdc2;312 border-radius: 12px;313 opacity: 0.9;314 }315</style>316</head>317<body>318<div id="render-target">319 <div class="screen">320 <!-- Status bar -->321 <div class="status-bar">322 <div>9:49</div>323 <div class="status-icons">324 <!-- wifi -->325 <svg class="icon" viewBox="0 0 24 24" fill="#6b747c"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c4-3 10-3 14 0l-2 2c-3-2-7-2-10 0l-2-2zm5 5l3 3-3 3-3-3 3-3z"/></svg>326 <!-- battery -->327 <svg class="icon" viewBox="0 0 24 24" fill="#6b747c"><rect x="2" y="7" width="18" height="10" rx="2"></rect><rect x="20" y="10" width="2" height="4"></rect><rect x="4" y="9" width="12" height="6" fill="#6b747c"></rect></svg>328 </div>329 </div>330 331 <!-- App bar -->332 <div class="app-bar">333 <!-- Back arrow -->334 <svg class="icon" viewBox="0 0 24 24" fill="#d13b3b"><path d="M15 3L6 12l9 9 2-2-7-7 7-7-2-2z"/></svg>335 <div class="title">Sacré Frenchy !</div>336 <div class="app-actions">337 <!-- bookmark -->338 <svg class="icon" viewBox="0 0 24 24" fill="#d13b3b"><path d="M6 2h12v20l-6-4-6 4V2z" fill="none" stroke="#d13b3b" stroke-width="2"/></svg>339 <!-- share -->340 <svg class="icon" viewBox="0 0 24 24" fill="#d13b3b"><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="6" r="2"></circle><circle cx="18" cy="18" r="2"></circle><path d="M8 12l8-6M8 12l8 6" stroke="#d13b3b" stroke-width="2" fill="none"/></svg>341 </div>342 </div>343 344 <!-- Tabs -->345 <div class="tabs">346 <div class="tab">Experiences</div>347 <div class="tab">Delivery & Takeout</div>348 <div class="tab active">Menu</div>349 <div class="tab">Reviews</div>350 <div class="tab">Details</div>351 </div>352 353 <!-- Red time slot cards -->354 <div class="slot-strip">355 <div class="slot-card">356 <div class="slot-top">357 <!-- tiny table icon -->358 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>359 <div>8:45 PM</div>360 </div>361 <div class="slot-bottom">Experience</div>362 </div>363 <div class="slot-card">364 <div class="slot-top">365 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>366 <div>9:15 PM</div>367 </div>368 <div class="slot-bottom">Experience</div>369 </div>370 <div class="slot-card">371 <div class="slot-top">372 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>373 <div>9:45 PM</div>374 </div>375 <div class="slot-bottom">Experience</div>376 </div>377 <div class="slot-card">378 <div class="slot-top">379 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>380 <div>10:30 PM</div>381 </div>382 <div class="slot-bottom">Experience</div>383 </div>384 <div class="slot-card">385 <div class="slot-top">386 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>387 <div>11:00 PM</div>388 </div>389 <div class="slot-bottom">Experience</div>390 </div>391 </div>392 393 <!-- Additional seating options -->394 <div class="subtle-row">395 <svg width="38" height="38" viewBox="0 0 24 24" fill="#2f3a45"><path d="M3 9h18v3H3V9zm3 3h2v7H6v-7zm10 0h2v7h-2v-7z"/></svg>396 <div>Additional seating options</div>397 </div>398 399 <!-- Menu section -->400 <div class="section">401 <h2>Menu</h2>402 <div class="ghost-button">See full menu</div>403 </div>404 405 <!-- Reviews section -->406 <div class="section">407 <h2>Reviews</h2>408 </div>409 410 <div class="reviews">411 <div class="rating-row">412 <div>413 <div class="big-rating">4.5</div>414 <div class="stars">415 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>416 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>417 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>418 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>419 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>420 </div>421 </div>422 <div class="dist">423 <div class="dist-row">424 <div>5</div>425 <div class="track"><div class="fill" style="width: 96%;"></div></div>426 </div>427 <div class="dist-row">428 <div>4</div>429 <div class="track"><div class="fill" style="width: 32%;"></div></div>430 </div>431 <div class="dist-row">432 <div>3</div>433 <div class="track"><div class="fill" style="width: 15%;"></div></div>434 </div>435 <div class="dist-row">436 <div>2</div>437 <div class="track"><div class="fill" style="width: 8%;"></div></div>438 </div>439 <div class="dist-row">440 <div>1</div>441 <div class="track"><div class="fill" style="width: 6%;"></div></div>442 </div>443 </div>444 </div>445 446 <div class="divider"></div>447 448 <div class="attribs">449 <div class="attrib">450 <div class="label">Food</div>451 <div class="value">4.4</div>452 </div>453 <div class="attrib">454 <div class="label">Service</div>455 <div class="value">4.5</div>456 </div>457 <div class="attrib">458 <div class="label">Ambiance</div>459 <div class="value">4.5</div>460 </div>461 <div class="attrib">462 <div class="label">Noise</div>463 <div class="value">Moderate</div>464 </div>465 </div>466 467 <!-- Reviewer block -->468 <div class="review-card">469 <div class="review-header">470 <div class="reviewer">471 <div class="avatar">OT</div>472 <div>473 <div class="name">OpenTable Diner</div>474 <div class="meta">New York Area • 1 review</div>475 </div>476 </div>477 <div class="review-date">Dined 9 days ago</div>478 </div>479 480 <div class="review-stars stars">481 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>482 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>483 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>484 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>485 <svg viewBox="0 0 24 24" fill="#d93b3b"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/></svg>486 </div>487 488 <div class="review-text">489 Great food, fun vibes, great waiter, good wine! Enjoyable and highly suggested!490 </div>491 492 <div class="reply">493 <div class="by">Sacré Frenchy !</div>494 <div class="when">Responded 7 days ago</div>495 <div class="text">496 Dear guest, thank you so much for visiting and for the kind words. We hope to welcome you again soon!497 </div>498 </div>499 </div>500 </div>501 502 <div style="height: 120px;"></div>503 </div>504 505 <!-- Gesture bar -->506 <div class="gesture"></div>507</div>508</body>509</html>