GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Restaurant Detail 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 font-family: Arial, Helvetica, sans-serif;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 24px;22 left: 24px;23 right: 24px;24 height: 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 z-index: 3;29 color: #fff;30 font-size: 34px;31 font-weight: 500;32 }33 .status-icons { display: flex; gap: 24px; align-items: center; }34 .status-icons svg { width: 40px; height: 40px; fill: #fff; }35 36 /* Hero image */37 .hero {38 position: relative;39 width: 1080px;40 height: 660px;41 overflow: hidden;42 }43 .hero .img {44 position: absolute;45 inset: 0;46 background: #E0E0E0;47 border-bottom: 1px solid #BDBDBD;48 display: flex;49 align-items: flex-end;50 justify-content: center;51 color: #616161;52 font-size: 36px;53 letter-spacing: 0.2px;54 }55 56 /* Top overlay controls */57 .top-actions {58 position: absolute;59 top: 100px;60 left: 24px;61 right: 24px;62 display: flex;63 justify-content: space-between;64 align-items: center;65 z-index: 3;66 }67 .back-btn, .right-icons {68 display: flex;69 align-items: center;70 gap: 28px;71 }72 .top-actions svg {73 width: 48px; height: 48px; stroke: #fff; fill: none; stroke-width: 2.5;74 }75 76 /* See photos pill */77 .photos-pill {78 position: absolute;79 bottom: 32px;80 left: 50%;81 transform: translateX(-50%);82 background: rgba(0,0,0,0.55);83 color: #fff;84 padding: 18px 28px;85 border-radius: 28px;86 font-size: 34px;87 z-index: 3;88 }89 90 /* Content card area */91 .content {92 position: relative;93 background: #fff;94 }95 .card {96 background: #fff;97 border-top-left-radius: 24px;98 border-top-right-radius: 24px;99 margin-top: -24px;100 padding: 36px 36px 24px 36px;101 box-shadow: 0 0 0 rgba(0,0,0,0);102 }103 104 .title {105 font-size: 64px;106 font-weight: 700;107 margin: 12px 0 24px 0;108 }109 110 .meta-row {111 display: flex;112 align-items: center;113 gap: 16px;114 margin-bottom: 16px;115 font-size: 34px;116 color: #424242;117 }118 .meta-row .stars { display: flex; gap: 8px; }119 .meta-row svg { width: 40px; height: 40px; }120 .meta-row .red { color: #d32f2f; fill: #d32f2f; }121 .meta-row .icon { fill: #616161; stroke: none; }122 123 .info-line {124 display: flex;125 align-items: center;126 gap: 16px;127 font-size: 34px;128 color: #424242;129 margin: 10px 0;130 }131 .info-line svg { width: 40px; height: 40px; fill: #616161; }132 133 /* Tabs */134 .tabs {135 display: flex;136 border-bottom: 1px solid #e0e0e0;137 margin-top: 24px;138 }139 .tab {140 padding: 28px 30px;141 font-size: 38px;142 color: #424242;143 }144 .tab.active {145 color: #d32f2f;146 position: relative;147 }148 .tab.active::after {149 content: "";150 position: absolute;151 left: 30px;152 right: 30px;153 bottom: -2px;154 height: 6px;155 background: #d32f2f;156 border-radius: 3px;157 }158 159 /* Selector pill */160 .selector {161 margin: 28px 36px 8px 36px;162 border: 2px solid #e0e0e0;163 border-radius: 40px;164 padding: 18px 26px;165 display: inline-flex;166 align-items: center;167 gap: 16px;168 font-size: 36px;169 color: #424242;170 }171 .selector svg { width: 40px; height: 40px; stroke: #424242; fill: none; stroke-width: 2; }172 173 /* Time chips row */174 .chips-scroll {175 margin: 12px 0 0 0;176 padding: 16px 24px;177 display: flex;178 gap: 18px;179 overflow-x: auto;180 }181 .chip {182 min-width: 210px;183 background: #d74343;184 color: #fff;185 border-radius: 20px;186 padding: 22px 22px 12px 22px;187 font-size: 36px;188 font-weight: 700;189 position: relative;190 }191 .chip .sub {192 position: absolute;193 left: 16px;194 right: 16px;195 bottom: 10px;196 background: #fff;197 color: #d74343;198 border: 2px solid #d74343;199 border-radius: 12px;200 font-size: 28px;201 font-weight: 600;202 text-align: center;203 padding: 6px 0;204 }205 206 /* Additional seating options */207 .additional {208 margin: 20px 36px;209 display: flex;210 align-items: center;211 gap: 16px;212 color: #616161;213 font-size: 34px;214 }215 .additional svg { width: 40px; height: 40px; fill: #616161; }216 217 /* Full availability button */218 .cta {219 margin: 24px 36px;220 border: 2px solid #dcdcdc;221 border-radius: 24px;222 padding: 36px;223 text-align: center;224 font-size: 42px;225 color: #424242;226 background: #fafafa;227 }228 229 /* Experiences section */230 .section-title {231 margin: 36px 36px 16px 36px;232 font-size: 44px;233 font-weight: 700;234 color: #424242;235 }236 .experience-card {237 margin: 0 36px;238 border-radius: 24px;239 overflow: hidden;240 box-shadow: 0 2px 8px rgba(0,0,0,0.08);241 }242 .experience-card .img {243 width: 100%;244 height: 360px;245 background: #E0E0E0;246 border: 1px solid #BDBDBD;247 display: flex;248 align-items: center;249 justify-content: center;250 color: #616161;251 font-size: 32px;252 }253 254 /* Bottom home indicator */255 .home-indicator {256 position: absolute;257 bottom: 28px;258 left: 50%;259 transform: translateX(-50%);260 width: 320px;261 height: 10px;262 background: #cfcfcf;263 border-radius: 6px;264 }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status bar -->271 <div class="status-bar">272 <div class="time">9:48</div>273 <div class="status-icons">274 <!-- Wi-Fi -->275 <svg viewBox="0 0 24 24">276 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>277 <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>278 <path d="M8 14c3-2 5-2 8 0" stroke="#fff" stroke-width="2" fill="none"/>279 <circle cx="12" cy="17" r="1.5" fill="#fff"/>280 </svg>281 <!-- Battery -->282 <svg viewBox="0 0 26 24">283 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>284 <rect x="4" y="8" width="12" height="8" rx="1" fill="#fff"/>285 <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff"/>286 </svg>287 </div>288 </div>289 290 <!-- Hero image area -->291 <div class="hero">292 <div class="img">[IMG: Restaurant interior photo]</div>293 294 <!-- Overlay back/bookmark/share -->295 <div class="top-actions">296 <div class="back-btn">297 <svg viewBox="0 0 24 24">298 <path d="M15 5 L7 12 L15 19" />299 </svg>300 </div>301 <div class="right-icons">302 <!-- Bookmark -->303 <svg viewBox="0 0 24 24">304 <path d="M6 3 H18 V21 L12 17 L6 21 Z" />305 </svg>306 <!-- Share -->307 <svg viewBox="0 0 24 24">308 <circle cx="18" cy="6" r="3" fill="#fff"/>309 <circle cx="6" cy="12" r="3" fill="#fff"/>310 <circle cx="18" cy="18" r="3" fill="#fff"/>311 <path d="M8.5 11 L15 7.5" stroke="#fff" stroke-width="2"/>312 <path d="M8.5 13 L15 16.5" stroke="#fff" stroke-width="2"/>313 </svg>314 </div>315 </div>316 317 <div class="photos-pill">See all 158 photos</div>318 </div>319 320 <!-- Content card -->321 <div class="content">322 <div class="card">323 <div class="title">Sacré Frenchy !</div>324 325 <!-- Ratings and reviews -->326 <div class="meta-row">327 <div class="stars">328 <svg viewBox="0 0 24 24" class="red"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>329 <svg viewBox="0 0 24 24" class="red"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>330 <svg viewBox="0 0 24 24" class="red"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>331 <svg viewBox="0 0 24 24" class="red"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>332 <svg viewBox="0 0 24 24" class="red"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>333 </div>334 <svg viewBox="0 0 24 24" class="icon">335 <path d="M4 4h16v12H9l-5 4z"/>336 </svg>337 <div>218 reviews</div>338 </div>339 340 <!-- Price -->341 <div class="info-line">342 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z"/><path d="M8 9h8v2H8zM8 13h6v2H8z" fill="#fff"/></svg>343 <div>€31 to €50</div>344 <svg viewBox="0 0 24 24" style="margin-left:24px;"><path d="M7 4h10v2H7zM7 8h10v2H7zM7 12h10v2H7zM7 16h10v2H7z"/></svg>345 <div>Traditional French</div>346 </div>347 348 <!-- Address -->349 <div class="info-line">350 <svg viewBox="0 0 24 24"><path d="M12 3c-4 0-7 3-7 7 0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>351 <div>58 boulevard de Sebastopol, Paris, 75003, Paris</div>352 </div>353 354 <!-- Tabs -->355 <div class="tabs">356 <div class="tab active">Reservations</div>357 <div class="tab">Experiences</div>358 <div class="tab">Delivery & Takeout</div>359 <div class="tab">Menu</div>360 </div>361 </div>362 363 <!-- Selector pill -->364 <div class="selector">365 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#424242"/></svg>366 <span>2 • 10:00 PM Tonight</span>367 </div>368 369 <!-- Time chips -->370 <div class="chips-scroll">371 <div class="chip">8:45 PM<div class="sub">Experience</div></div>372 <div class="chip">9:15 PM<div class="sub">Experience</div></div>373 <div class="chip">9:45 PM<div class="sub">Experience</div></div>374 <div class="chip">10:30 PM<div class="sub">Experience</div></div>375 <div class="chip">11:00 PM<div class="sub">Experience</div></div>376 <div class="chip">11:30 PM<div class="sub">Experience</div></div>377 <div class="chip">12:00 AM<div class="sub">Experience</div></div>378 <div class="chip">12:30 AM<div class="sub">Experience</div></div>379 </div>380 381 <!-- Additional seating options -->382 <div class="additional">383 <svg viewBox="0 0 24 24"><path d="M3 10h18v2H3zM6 12v7h2v-7zM16 12v7h2v-7z"/></svg>384 <span>Additional seating options</span>385 </div>386 387 <!-- CTA -->388 <div class="cta">View full availability</div>389 390 <!-- Experiences section -->391 <div class="section-title">Experiences</div>392 <div class="experience-card">393 <div class="img">[IMG: Interior night ambience]</div>394 </div>395 </div>396 397 <!-- Home indicator -->398 <div class="home-indicator"></div>399</div>400</body>401</html>