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 Booking UI Mock</title>7<style>8 :root{9 --bg:#f5f7fb;10 --text:#1f2a37;11 --muted:#6b7280;12 --blue:#1a73e8;13 --line:#e5e7eb;14 --chip:#f1f5f9;15 --card:#ffffff;16 --pill:#e9eef9;17 --accent:#ff4d4f;18 }19 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; color:var(--text);}20 #render-target{21 width:1080px; height:2400px; position:relative; overflow:hidden;22 background:#ffffff;23 }24 /* status bar */25 .status-bar{26 height:120px; background:#000; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 36px; box-sizing:border-box;27 font-weight:600; letter-spacing:0.5px;28 }29 .status-icons{ display:flex; gap:24px; align-items:center; }30 .top-appbar{31 height:150px; background:#fff; border-bottom:1px solid #eceff4; display:flex; align-items:center; padding:0 32px; box-sizing:border-box; gap:20px;32 }33 .icon-btn{ width:88px; height:88px; display:flex; align-items:center; justify-content:center; border-radius:44px; }34 .search-pill{35 flex:1; background:#edf2fe; border-radius:48px; padding:22px 28px; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; position:relative;36 }37 .search-pill .title{ font-size:40px; font-weight:700; color:#0f172a;}38 .search-pill .sub{ font-size:30px; color:#5b6473;}39 .search-pill .srch{40 position:absolute; right:20px; top:50%; transform:translateY(-50%); width:82px; height:82px; border-radius:41px; background:#fff; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center;41 }42 .actions{ display:flex; gap:12px; }43 .actions .icon-btn{ border:1px solid #e6eaf1; background:#fff; }44 /* content wrapper */45 .content{ padding:24px 28px 0; box-sizing:border-box; background:#f6f7fb; }46 .filter-card{47 background:#fff; border:2px solid #dce6f6; border-radius:36px; padding:36px; box-sizing:border-box;48 }49 .filter-title{ font-size:44px; font-weight:700; margin-bottom:24px; }50 .chips{ display:flex; flex-wrap:wrap; gap:22px; }51 .chip{52 padding:18px 30px; border:3px solid #11182733; border-radius:999px; background:#fff; font-size:34px; color:#374151;53 }54 /* room image card */55 .room-card{ margin-top:34px; }56 .room-photo{57 position:relative; border-radius:36px; overflow:hidden; height:540px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;58 }59 .badge-red{60 position:absolute; left:24px; top:24px; background:#ffb3b3; color:#8b1d1d; padding:12px 20px; border-radius:12px; font-weight:700; font-size:32px;61 }62 .photo-count{63 position:absolute; left:24px; bottom:24px; background:rgba(17,24,39,0.6); color:#fff; padding:10px 16px; border-radius:18px; font-size:32px;64 }65 .room-title{ font-size:56px; font-weight:800; margin:26px 10px 8px; color:#111827; }66 .room-meta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:0 10px; margin-bottom:12px; }67 .meta-item{ font-size:34px; color:#111827; font-weight:700; }68 .meta-sep{ width:2px; height:32px; background:#d1d5db; }69 .details-link{ margin-left:auto; color:#1a73e8; font-size:38px; font-weight:700; }70 .amenity{ display:flex; align-items:center; gap:12px; color:#4b5563; font-size:32px; padding:0 10px; margin-bottom:24px; }71 /* pricing panel */72 .price-panel{73 background:#eef2ff; border:2px solid #d8e1fd; border-radius:36px; padding:30px; box-sizing:border-box;74 }75 .panel-top{ display:flex; justify-content:space-between; align-items:flex-start; }76 .left-list{ display:flex; flex-direction:column; gap:18px; color:#374151; font-size:34px; }77 .price-note{ color:#e53935; font-size:36px; font-weight:700; }78 .old-price{ color:#6b7280; text-decoration:line-through; margin-right:12px; }79 .save{ color:#e53935; font-weight:700; }80 .main-price{ color:#e53935; font-weight:900; font-size:64px; margin-top:6px; text-align:right; }81 .details-cta{ color:#1a73e8; font-size:38px; font-weight:700; margin-top:18px; }82 .charge-note{ color:#6b7280; font-size:30px; text-align:right; margin:12px 6px 18px; }83 .book-row{ display:flex; gap:16px; align-items:stretch; }84 .qty{85 flex:1; background:#fff; border:2px solid #dfe6f2; border-radius:999px; padding:18px 26px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px;86 }87 .qty-top{ display:flex; align-items:center; justify-content:space-between; }88 .qty-label{ font-size:40px; font-weight:800; color:#111827; }89 .qty-select{ display:flex; align-items:center; gap:12px; font-size:40px; }90 .qty-sub{ color:#ef6c00; font-size:30px; }91 .book-btn{92 flex:1.4; background:#2b6fe8; color:#fff; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:800;93 }94 .add-cart{95 margin-top:18px; background:#fff; border:2px solid #dfe6f2; border-radius:999px; padding:26px; text-align:center;96 }97 .add-cart .primary{ color:#1a73e8; font-size:46px; font-weight:800; }98 .add-cart .sub{ color:#6b7280; margin-top:6px; font-size:30px; }99 /* floating button */100 .fab{101 position:absolute; right:38px; bottom:148px; width:124px; height:124px; background:#2b6fe8; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.25);102 }103 .gesture{104 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);105 width:300px; height:10px; background:#e6e6e6; border-radius:8px;106 }107 /* helpers */108 .row{ display:flex; align-items:center; gap:12px; }109 .muted{ color:#6b7280; }110 .bold{ font-weight:700; }111 .small{ font-size:30px; }112 .mr-auto{ margin-right:auto; }113 .mt-6{ margin-top:6px; }114 .mt-12{ margin-top:12px; }115 .mt-20{ margin-top:20px; }116 .mt-26{ margin-top:26px; }117</style>118</head>119<body>120<div id="render-target">121 <!-- Status bar -->122 <div class="status-bar">123 <div class="row" style="gap:18px;">124 <span style="font-size:40px;">11:04</span>125 <!-- small glyphs -->126 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><circle cx="10" cy="10" r="4"/></svg>127 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>128 </div>129 <div class="status-icons">130 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M3 8h18M6 12h12M9 16h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>131 <div class="row" style="gap:10px;">132 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>133 <span style="font-size:32px;">100%</span>134 </div>135 </div>136 </div>137 138 <!-- App bar -->139 <div class="top-appbar">140 <div class="icon-btn">141 <svg width="54" height="54" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>142 </div>143 <div class="search-pill">144 <div class="title">ibis Copacabana Posto 5</div>145 <div class="sub">Nov 6 - Nov 10, 2 guests</div>146 <div class="srch">147 <svg width="42" height="42" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#111827" stroke-width="2"/><path d="M20 20l-4-4" stroke="#111827" stroke-width="2" stroke-linecap="round"/></svg>148 </div>149 </div>150 <div class="actions">151 <div class="icon-btn">152 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.5-7-10a4 4 0 018 0 4 4 0 018 0c0 5.5-7 10-7 10z" stroke="#111827" stroke-width="2"/></svg>153 </div>154 <div class="icon-btn">155 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M18 8l-6 4-6-4" stroke="#111827" stroke-width="2" stroke-linecap="round"/><path d="M6 8v8l6 4 6-4V8" stroke="#111827" stroke-width="2" stroke-linecap="round"/></svg>156 </div>157 <div class="icon-btn">158 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M6 6h15l-2 9H7L6 6z" stroke="#111827" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#111827"/><circle cx="17" cy="20" r="1.5" fill="#111827"/></svg>159 </div>160 </div>161 </div>162 163 <!-- Scrollable content mimic -->164 <div class="content" style="height:2100px; overflow:hidden;">165 <!-- Filter -->166 <div class="filter-card">167 <div class="filter-title">Filter</div>168 <div class="chips">169 <div class="chip">Free breakfast</div>170 <div class="chip">Non-smoking</div>171 <div class="chip">Pay later</div>172 <div class="chip" style="margin-top:8px;">Free cancellation</div>173 </div>174 </div>175 176 <!-- Room Card -->177 <div class="room-card">178 <div class="room-photo">179 <div class="badge-red">Limited availability</div>180 <div class="photo-count">1/4</div>181 [IMG: Hotel Room Photo]182 </div>183 <div class="room-title">Standard Double Room (2 Adults)</div>184 <div class="room-meta">185 <div class="meta-item">18 m²/194 ft²</div>186 <div class="meta-sep"></div>187 <div class="meta-item">Max 2 adults</div>188 <div class="meta-sep"></div>189 <div class="meta-item">1 double bed</div>190 <div class="details-link">Details</div>191 </div>192 <div class="amenity">193 <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M8 5h8v2H8zM6 9h12v6H6zM5 17h14v2H5z" stroke="#6b7280" stroke-width="1.5"/></svg>194 Shower195 </div>196 </div>197 198 <!-- Price Panel -->199 <div class="price-panel">200 <div class="panel-top">201 <div class="left-list">202 <div class="row">203 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="7" r="3" stroke="#111827" stroke-width="2"/><path d="M4 20c1.5-4 6.5-4 8-4s6.5 0 8 4" stroke="#111827" stroke-width="2" stroke-linecap="round"/></svg>204 <span>2 adults</span>205 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#6b7280" stroke-width="2"/><path d="M12 8v5M12 16h0.01" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/></svg>206 </div>207 <div class="row">208 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M20 7l-9 9-4-4" stroke="#1f7a1f" stroke-width="2" stroke-linecap="round"/></svg>209 Cancellation policy210 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#6b7280" stroke-width="2"/><path d="M12 8v5M12 16h0.01" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/></svg>211 </div>212 <div class="row">213 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M20 7l-9 9-4-4" stroke="#1f7a1f" stroke-width="2" stroke-linecap="round"/></svg>214 Book and pay now215 </div>216 <div class="row">217 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M20 7l-9 9-4-4" stroke="#1f7a1f" stroke-width="2" stroke-linecap="round"/></svg>218 Express check-in219 </div>220 <div class="row">221 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M20 7l-9 9-4-4" stroke="#1f7a1f" stroke-width="2" stroke-linecap="round"/></svg>222 Free WiFi223 </div>224 <a class="details-cta">See details</a>225 </div>226 <div style="text-align:right;">227 <div class="price-note">Cheapest price you've seen!</div>228 <div class="mt-12">229 <span class="old-price">₹ 14,651</span>230 <span class="save">-41%</span>231 </div>232 <div class="main-price">₹ 8,688</div>233 </div>234 </div>235 236 <div class="charge-note">You won't be charged yet</div>237 238 <div class="book-row">239 <div class="qty">240 <div class="qty-top">241 <div class="qty-label">Rooms</div>242 <div class="qty-select">243 <span>1</span>244 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#111827" stroke-width="2" stroke-linecap="round"/></svg>245 </div>246 </div>247 <div class="qty-sub">Limited availability</div>248 </div>249 <div class="book-btn">Book</div>250 </div>251 252 <div class="add-cart">253 <div class="primary">Add to Cart</div>254 <div class="sub">Bundle and save more</div>255 </div>256 </div>257 </div>258 259 <!-- Floating Action Button -->260 <div class="fab">261 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">262 <path d="M4 5h16v10H7l-3 3V5z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>263 <circle cx="9" cy="10" r="1.5" fill="#fff"/><circle cx="14" cy="10" r="1.5" fill="#fff"/><circle cx="18" cy="10" r="1.5" fill="#fff"/>264 </svg>265 </div>266 267 <div class="gesture"></div>268</div>269</body>270</html>