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 Detail</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial, Helvetica, sans-serif; color: #263238; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top hero image */18 .hero {19 position: relative;20 width: 1080px;21 height: 650px;22 background: #E0E0E0;23 border-bottom: 1px solid #D5D5D5;24 display: flex;25 align-items: flex-end;26 justify-content: center;27 }28 .hero .placeholder {29 position: absolute;30 top: 0;31 left: 0;32 right: 0;33 bottom: 0;34 display: flex;35 align-items: center;36 justify-content: center;37 color: #757575;38 font-size: 30px;39 pointer-events: none;40 }41 .status-time {42 position: absolute;43 top: 22px;44 left: 30px;45 color: #ffffff;46 font-weight: 600;47 font-size: 40px;48 text-shadow: 0 1px 3px rgba(0,0,0,0.35);49 }50 .status-icons {51 position: absolute;52 top: 26px;53 right: 26px;54 display: flex;55 align-items: center;56 gap: 18px;57 }58 .icon-wrap { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }59 .overlay-icon {60 position: absolute;61 top: 160px;62 left: 30px;63 width: 68px;64 height: 68px;65 background: rgba(0,0,0,0.35);66 border-radius: 34px;67 display: flex;68 align-items: center;69 justify-content: center;70 }71 .overlay-right {72 position: absolute;73 top: 160px;74 right: 30px;75 display: flex;76 gap: 18px;77 }78 .overlay-right .circle {79 width: 68px; height: 68px; border-radius: 34px;80 background: rgba(0,0,0,0.35);81 display: flex; align-items: center; justify-content: center;82 }83 .see-photos {84 position: absolute;85 bottom: 26px;86 left: 50%;87 transform: translateX(-50%);88 background: rgba(0,0,0,0.55);89 color: #fff;90 padding: 20px 34px;91 border-radius: 36px;92 font-size: 34px;93 font-weight: 600;94 }95 96 /* Content */97 .content {98 padding: 36px 48px 0 48px;99 }100 .title {101 font-size: 72px;102 font-weight: 800;103 letter-spacing: 1px;104 margin: 8px 0 18px 0;105 }106 .meta-line, .meta-line2, .address-line {107 display: flex;108 align-items: center;109 gap: 18px;110 margin: 8px 0;111 color: #37474F;112 font-size: 40px;113 }114 .stars {115 display: inline-flex;116 gap: 6px;117 margin-right: 18px;118 }119 .reviews {120 display: inline-flex; align-items: center; gap: 10px; color: #455A64;121 }122 .divider {123 height: 1px;124 background: #ECECEC;125 width: calc(100% + 96px);126 margin: 28px -48px 0 -48px;127 }128 129 /* Tabs */130 .tabs {131 display: flex;132 gap: 48px;133 font-size: 42px;134 margin-top: 28px;135 padding-bottom: 8px;136 border-bottom: 1px solid #E6E6E6;137 }138 .tab { padding: 24px 8px; color: #607D8B; }139 .tab.active { color: #D32F2F; border-bottom: 8px solid #D32F2F; }140 141 /* Selector pill */142 .selector {143 margin: 40px 0 18px 0;144 display: flex;145 justify-content: center;146 }147 .selector-pill {148 display: inline-flex;149 align-items: center;150 gap: 16px;151 padding: 18px 28px;152 border: 2px solid #D9D9D9;153 border-radius: 50px;154 font-size: 38px;155 color: #37474F;156 box-shadow: 0 2px 0 rgba(0,0,0,0.03);157 }158 159 /* Time buttons */160 .times {161 display: flex;162 flex-wrap: wrap;163 gap: 26px;164 margin: 8px 0 36px 0;165 }166 .time-btn {167 background: #E53935;168 color: #fff;169 padding: 22px 34px;170 border-radius: 18px;171 font-weight: 700;172 font-size: 36px;173 }174 175 .cta-outline {176 margin: 22px 0 56px 0;177 padding: 34px;178 text-align: center;179 font-size: 44px;180 color: #37474F;181 border: 2px solid #D3D7DB;182 border-radius: 22px;183 box-shadow: 0 2px 0 rgba(0,0,0,0.02);184 background: #fff;185 font-weight: 700;186 }187 188 .section-title {189 font-size: 48px;190 font-weight: 700;191 margin: 36px 0 18px 0;192 }193 .outline-btn {194 padding: 32px;195 text-align: center;196 font-size: 42px;197 color: #37474F;198 border: 2px solid #D3D7DB;199 border-radius: 20px;200 background: #fff;201 font-weight: 600;202 }203 204 /* Bottom home indicator */205 .home-indicator {206 position: absolute;207 bottom: 34px;208 left: 50%;209 transform: translateX(-50%);210 width: 320px;211 height: 12px;212 background: #BDBDBD;213 border-radius: 6px;214 opacity: 0.85;215 }216 .muted { color: #607D8B; }217 218 /* SVG helpers */219 svg { display: block; }220</style>221</head>222<body>223<div id="render-target">224 <!-- Hero area -->225 <div class="hero">226 <div class="placeholder">[IMG: Elegant restaurant interior]</div>227 228 <div class="status-time">6:50</div>229 <div class="status-icons">230 <!-- simple wifi -->231 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">232 <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>233 <path d="M5 11c3-3 11-3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>234 <path d="M8 14c2-2 6-2 8 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>235 <circle cx="12" cy="18" r="2" fill="#FFFFFF"/>236 </svg>237 <!-- battery -->238 <svg width="54" height="44" viewBox="0 0 28 16" fill="none">239 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#FFFFFF" stroke-width="2"/>240 <rect x="3" y="5" width="18" height="6" rx="1" fill="#FFFFFF"/>241 <rect x="24" y="6" width="3" height="4" rx="1" fill="#FFFFFF"/>242 </svg>243 </div>244 245 <!-- back arrow -->246 <div class="overlay-icon">247 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">248 <path d="M15 19l-7-7 7-7" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 252 <div class="overlay-right">253 <!-- bookmark -->254 <div class="circle">255 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">256 <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#FFFFFF" stroke-width="2" fill="none"/>257 </svg>258 </div>259 <!-- share -->260 <div class="circle">261 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">262 <circle cx="18" cy="5" r="3" stroke="#FFFFFF" stroke-width="2"/>263 <circle cx="6" cy="12" r="3" stroke="#FFFFFF" stroke-width="2"/>264 <circle cx="18" cy="19" r="3" stroke="#FFFFFF" stroke-width="2"/>265 <path d="M8.8 10.6l6.4-3.8M8.8 13.4l6.4 3.8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>266 </svg>267 </div>268 </div>269 270 <div class="see-photos">See all 62 photos</div>271 </div>272 273 <!-- Content area -->274 <div class="content">275 <div class="title">DROUANT</div>276 277 <div class="meta-line">278 <span class="stars">279 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E53935"><path d="M12 2l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>280 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E53935"><path d="M12 2l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>281 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E53935"><path d="M12 2l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>282 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E53935"><path d="M12 2l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>283 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E53935"><path d="M12 2l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>284 </span>285 <span class="reviews">286 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">287 <path d="M4 4h16v10H7l-3 3V4z" stroke="#455A64" stroke-width="2" fill="none" stroke-linejoin="round"/>288 </svg>289 <span>96 reviews</span>290 </span>291 </div>292 293 <div class="meta-line2">294 <!-- money -->295 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">296 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#455A64" stroke-width="2"/>297 <circle cx="12" cy="12" r="3" stroke="#455A64" stroke-width="2"/>298 </svg>299 <span>€51 and over</span>300 <!-- fork/knife -->301 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">302 <path d="M8 3v8M5 3v8M11 3v8M8 7H5M15 3l3 3M18 6v12" stroke="#455A64" stroke-width="2" stroke-linecap="round"/>303 </svg>304 <span>French</span>305 </div>306 307 <div class="address-line">308 <!-- location pin -->309 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">310 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke="#455A64" stroke-width="2"/>311 <circle cx="12" cy="10" r="3" stroke="#455A64" stroke-width="2"/>312 </svg>313 <span>16 rue Gaillon, Paris, Paris, 75002</span>314 </div>315 316 <div class="tabs">317 <div class="tab active">Reservations</div>318 <div class="tab">Menu</div>319 <div class="tab">Reviews</div>320 <div class="tab">Details</div>321 </div>322 323 <div class="selector">324 <div class="selector-pill">325 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">326 <circle cx="12" cy="8" r="4" stroke="#455A64" stroke-width="2"/>327 <path d="M4 20c1-4 5-6 8-6s7 2 8 6" stroke="#455A64" stroke-width="2" stroke-linecap="round"/>328 </svg>329 <span>2 • 7:00 PM Tonight</span>330 </div>331 </div>332 333 <div class="times">334 <div class="time-btn">7:00 PM</div>335 <div class="time-btn">7:15 PM</div>336 <div class="time-btn">7:30 PM</div>337 <div class="time-btn">7:45 PM</div>338 <div class="time-btn">8:00 PM</div>339 <div class="time-btn">8:15 PM</div>340 </div>341 342 <div class="cta-outline">View full availability</div>343 344 <div class="section-title">Menu</div>345 <div class="outline-btn">See full menu</div>346 347 <div class="section-title">Reviews</div>348 <div style="height: 780px;"></div>349 </div>350 351 <div class="home-indicator"></div>352</div>353</body>354</html>