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>Hotel Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; color: #1a1a1a;12 }13 14 /* Top blue header */15 .topbar {16 width: 100%;17 background: #143B7D;18 color: #fff;19 }20 .status-row {21 height: 90px;22 display: flex; align-items: center;23 padding: 0 36px; font-size: 34px; letter-spacing: 0.5px;24 }25 .status-row .spacer { flex: 1; }26 .status-icons { display: flex; align-items: center; gap: 24px; }27 .appbar {28 height: 150px;29 display: flex; align-items: center; justify-content: space-between;30 padding: 0 32px;31 }32 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }33 .icon { width: 48px; height: 48px; fill: none; stroke: #ffffff; stroke-width: 4; }34 35 /* Title section */36 .title-wrap {37 padding: 32px;38 background: #fff;39 display: flex; align-items: flex-start; justify-content: space-between;40 border-bottom: 1px solid #e6e6e6;41 }42 .title-left { max-width: 780px; }43 .hotel-name {44 font-size: 60px; font-weight: 700; margin: 8px 0 18px;45 }46 .rating-row {47 display: flex; align-items: center; gap: 18px;48 }49 .stars { display: flex; gap: 10px; }50 .star { width: 40px; height: 40px; fill: #F6C44C; }51 .thumb {52 width: 40px; height: 40px; background: #F6C44C; border-radius: 6px;53 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;54 }55 .genius-badge {56 background: #2E57C6; color: #fff; font-weight: 700;57 padding: 8px 18px; border-radius: 12px; font-size: 28px;58 }59 .score-pill {60 background: #2E57C6; color: #fff; font-weight: 700;61 padding: 12px 22px; border-radius: 16px; font-size: 34px; align-self: flex-start;62 }63 64 /* Photo grid */65 .photos {66 padding: 20px 24px; background: #fff;67 }68 .grid {69 display: grid;70 grid-template-columns: repeat(3, 1fr);71 grid-auto-rows: 220px;72 gap: 16px;73 }74 .img-plc {75 background: #E0E0E0; border: 1px solid #BDBDBD;76 display: flex; align-items: center; justify-content: center; color: #757575;77 font-size: 28px; text-align: center; overflow: hidden;78 }79 .grid .big { grid-column: 1 / span 2; grid-row: 1 / span 2; font-size: 30px; }80 .grid .overlay {81 position: relative;82 }83 .grid .overlay .over-text {84 position: absolute; right: 24px; bottom: 24px;85 color: #ffffff; font-size: 48px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.4);86 }87 88 /* Price card */89 .price-card {90 margin: 12px 0 0; padding: 28px 32px; background: #fff;91 border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;92 }93 .tag {94 display: inline-block; background: #3A7D3F; color: #fff; font-weight: 700;95 padding: 8px 14px; border-radius: 8px; font-size: 28px; margin-bottom: 16px;96 }97 .price-title { font-size: 34px; margin: 8px 0 22px; color: #333; }98 .price-row { display: flex; align-items: center; justify-content: space-between; }99 .prices { display: flex; align-items: baseline; gap: 16px; }100 .old { color: #d9534f; text-decoration: line-through; font-size: 40px; }101 .new { color: #1a1a1a; font-weight: 700; font-size: 56px; }102 .chev { width: 36px; height: 36px; }103 .tax { color: #777; font-size: 28px; margin-top: 10px; }104 105 /* Info rows */106 .section { background: #fff; }107 .divider { height: 18px; background: #f0f0f0; }108 .info-wrap {109 padding: 24px 32px;110 }111 .info-grid {112 display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;113 margin-bottom: 16px;114 }115 .label { color: #555; font-size: 32px; margin-bottom: 8px; }116 .value { color: #2E57C6; font-size: 34px; font-weight: 700; }117 .single-line { margin-top: 18px; }118 .single-line .value { font-weight: 700; }119 120 /* Map preview */121 .map {122 margin: 0 24px 12px; height: 240px;123 }124 125 /* Bottom action */126 .bottom-cta {127 position: absolute; left: 0; right: 0; bottom: 100px;128 padding: 0 24px;129 }130 .cta-btn {131 height: 120px; border-radius: 16px; background: #2E57C6;132 color: #fff; font-weight: 700; font-size: 40px;133 display: flex; align-items: center; justify-content: center;134 box-shadow: 0 8px 16px rgba(0,0,0,0.25);135 }136 .safe-area {137 position: absolute; left: 0; right: 0; bottom: 0;138 height: 90px; background: #000000;139 display: flex; align-items: center; justify-content: center;140 }141 .home-handle {142 width: 240px; height: 10px; background: #d0d0d0; border-radius: 5px;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Top Blue Header -->150 <div class="topbar">151 <div class="status-row">152 <div>8:44</div>153 <div class="spacer"></div>154 <div class="status-icons">155 <!-- WiFi -->156 <svg width="42" height="42" viewBox="0 0 24 24">157 <path d="M2 8c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" fill="none"/>158 <path d="M5 11c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" fill="none"/>159 <path d="M8 14c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" fill="none"/>160 <circle cx="12" cy="17" r="1.5" fill="#ffffff"/>161 </svg>162 <!-- Battery -->163 <svg width="42" height="42" viewBox="0 0 24 24">164 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"/>165 <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>166 <rect x="20" y="9" width="2" height="6" fill="#ffffff"/>167 </svg>168 </div>169 </div>170 <div class="appbar">171 <div class="icon-btn">172 <!-- Back Arrow -->173 <svg class="icon" viewBox="0 0 24 24">174 <path d="M15 5l-7 7 7 7" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <div style="display:flex; gap:22px;">178 <!-- Heart -->179 <div class="icon-btn">180 <svg class="icon" viewBox="0 0 24 24">181 <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#ffffff" fill="none"/>182 </svg>183 </div>184 <!-- Share -->185 <div class="icon-btn">186 <svg class="icon" viewBox="0 0 24 24">187 <circle cx="6" cy="12" r="2" stroke="#ffffff"/>188 <circle cx="18" cy="6" r="2" stroke="#ffffff"/>189 <circle cx="18" cy="18" r="2" stroke="#ffffff"/>190 <path d="M8 12l8-6M8 12l8 6" stroke="#ffffff"/>191 </svg>192 </div>193 </div>194 </div>195 </div>196 197 <!-- Title and Ratings -->198 <div class="title-wrap">199 <div class="title-left">200 <div class="hotel-name">Sallés Hotel Pere IV</div>201 <div class="rating-row">202 <div class="stars">203 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.5 7-6.5-3.9-6.5 3.9 1.5-7-5-4.6 7-.8z"/></svg>204 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.5 7-6.5-3.9-6.5 3.9 1.5-7-5-4.6 7-.8z"/></svg>205 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.5 7-6.5-3.9-6.5 3.9 1.5-7-5-4.6 7-.8z"/></svg>206 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.5 7-6.5-3.9-6.5 3.9 1.5-7-5-4.6 7-.8z"/></svg>207 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.6 1.5 7-6.5-3.9-6.5 3.9 1.5-7-5-4.6 7-.8z"/></svg>208 </div>209 <div class="thumb">👍</div>210 <div class="genius-badge">Genius</div>211 </div>212 </div>213 <div class="score-pill">8.1</div>214 </div>215 216 <!-- Photos Grid -->217 <div class="photos">218 <div class="grid">219 <div class="img-plc big">[IMG: Indoor pool with waterfall jets]</div>220 <div class="img-plc">[IMG: Lobby lounge seating]</div>221 <div class="img-plc">[IMG: Spa room & sauna]</div>222 <div class="img-plc">[IMG: Pool under glass roof]</div>223 <div class="img-plc overlay">[IMG: Restaurant seating]224 <div class="over-text">+64</div>225 </div>226 </div>227 </div>228 229 <!-- Price Section -->230 <div class="price-card">231 <div class="tag">10% off</div>232 <div class="price-title">Price for 4 nights, 2 adults</div>233 <div class="price-row">234 <div class="prices">235 <div class="old">€ 734</div>236 <div class="new">€ 661</div>237 </div>238 <svg class="chev" viewBox="0 0 24 24">239 <path d="M8 4l8 8-8 8" stroke="#888" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 <div class="tax">+ € 39 taxes and charges</div>243 </div>244 245 <div class="divider"></div>246 247 <!-- Check-in / Check-out & Guests -->248 <div class="section">249 <div class="info-wrap">250 <div class="info-grid">251 <div>252 <div class="label">Check-in</div>253 <div class="value">Wed, Nov 01</div>254 </div>255 <div>256 <div class="label">Check-out</div>257 <div class="value">Sun, Nov 05</div>258 </div>259 </div>260 <div class="single-line">261 <div class="label">Rooms and guests</div>262 <div class="value">1 room, 2 adults, 0 children</div>263 </div>264 </div>265 </div>266 267 <div class="divider"></div>268 269 <!-- Map preview -->270 <div class="map img-plc">[IMG: Map preview of hotel location]</div>271 272 <!-- Bottom CTA -->273 <div class="bottom-cta">274 <div class="cta-btn">Select rooms</div>275 </div>276 277 <!-- Safe area / home indicator -->278 <div class="safe-area"><div class="home-handle"></div></div>279 280</div>281</body>282</html>