GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Hotel Deals UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0e1a24;13 color: #e9f0f3;14 }15 16 /* General */17 .row { display: flex; align-items: center; }18 .muted { color: #9fb3bd; }19 .green { color: #45c7a2; }20 .divider { height: 1px; background: #1d2a34; margin: 20px 30px; }21 22 /* Status bar */23 .status-bar {24 height: 90px;25 padding: 0 30px;26 display: flex;27 align-items: center;28 font-weight: 600;29 color: #cfe0e6;30 font-size: 36px;31 }32 .status-icons { margin-left: auto; display: flex; gap: 22px; align-items: center; }33 .dot { width: 16px; height: 16px; background: #cfe0e6; border-radius: 50%; }34 35 /* Header */36 .header {37 padding: 10px 30px 0 30px;38 height: 120px;39 display: flex;40 align-items: center;41 gap: 24px;42 }43 .title { font-size: 50px; font-weight: 700; flex: 1; }44 .icon-btn { width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }45 .icon path { fill: #dfe8ec; }46 47 /* Tabs */48 .tabs { display: flex; gap: 40px; padding: 8px 30px 24px 30px; font-size: 36px; font-weight: 600; }49 .tab { color: #a8b8c1; padding-bottom: 16px; }50 .tab.active { color: #e9f0f3; border-bottom: 6px solid #3ec0c9; }51 52 /* Carousel */53 .carousel {54 margin: 0 30px;55 height: 430px;56 border-radius: 18px;57 overflow: hidden;58 position: relative;59 border: 1px solid #223240;60 }61 .carousel .img {62 height: 100%;63 background: #E0E0E0;64 color: #757575;65 border: 1px solid #BDBDBD;66 display: flex; align-items: center; justify-content: center;67 font-size: 36px;68 }69 .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; }70 .dots span { width: 18px; height: 18px; border-radius: 9px; background: rgba(255,255,255,0.5); }71 .dots span.active { background: #ffffff; }72 73 /* Deal card */74 .deal-card {75 margin: 24px 30px;76 background: #13232e;77 border-radius: 24px;78 padding: 40px 30px;79 border: 1px solid #223240;80 }81 .deal-header { display: flex; align-items: center; }82 .deal-title { font-size: 44px; font-weight: 700; flex: 1; }83 .pill {84 background: #20323e;85 color: #ffffff;86 font-size: 32px;87 padding: 14px 18px;88 border-radius: 14px;89 border: 1px solid #2b3f4a;90 }91 92 .subline { margin-top: 18px; color: #b7c8d1; font-size: 34px; }93 .features { margin-top: 28px; display: grid; row-gap: 26px; }94 .feature { display: flex; align-items: center; gap: 20px; font-size: 36px; }95 .feature svg { width: 38px; height: 38px; }96 .feature .green { color: #4bc6a9; }97 98 .cta-row { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; }99 .link { color: #79cfe1; font-size: 36px; font-weight: 700; }100 101 /* Merchant + price */102 .merchant-price { display: flex; align-items: center; margin-top: 36px; }103 .merchant {104 width: 260px; height: 120px; border-radius: 14px;105 background: #E0E0E0; border: 1px solid #BDBDBD;106 display: flex; align-items: center; justify-content: center;107 color: #757575; font-size: 42px; font-weight: 700;108 }109 .price-area { display: flex; align-items: baseline; gap: 18px; margin-left: 24px; font-size: 42px; }110 .strike { color: #8aa0ac; text-decoration: line-through; }111 .big-price { font-size: 80px; font-weight: 800; }112 .per-night { color: #b7c8d1; font-size: 36px; }113 114 .select-btn {115 margin-left: auto;116 background: #3aa6a0;117 color: white;118 font-size: 42px;119 font-weight: 800;120 padding: 28px 40px;121 border-radius: 26px;122 }123 124 .view-more { text-align: right; padding: 10px 30px 20px 30px; color: #79cfe1; font-size: 38px; font-weight: 700; }125 126 /* Rating section */127 .rating-section { padding: 20px 30px 0 30px; }128 .rating-title { font-size: 50px; font-weight: 800; }129 .rating-row { display: flex; align-items: center; gap: 20px; margin-top: 20px; }130 .trip-dots { display: flex; gap: 10px; }131 .trip-dots .circle { width: 20px; height: 20px; border-radius: 50%; background: #47d18e; }132 .trip-dots .circle.dim { background: #2f6d54; }133 .rating-number { font-size: 50px; font-weight: 800; margin-left: 10px; }134 .count { color: #a9bcc7; font-size: 42px; margin-left: 12px; }135 136 .bar-group { margin-top: 28px; }137 .bar-row { margin: 18px 0; }138 .bar-label { font-size: 40px; color: #cfe0e6; margin-bottom: 8px; }139 .bar { width: 100%; height: 16px; background: #1a2c37; border-radius: 8px; overflow: hidden; }140 .bar .fill { height: 100%; background: #5ac8a9; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 3:18149 <div class="status-icons">150 <span class="dot"></span>151 <span class="dot"></span>152 <span class="dot"></span>153 </div>154 </div>155 156 <!-- Header -->157 <div class="header">158 <div class="icon-btn">159 <svg class="icon" width="44" height="44" viewBox="0 0 24 24">160 <path d="M15.5 5l-7 7 7 7 1.5-1.5-5.5-5.5 5.5-5.5z"/>161 </svg>162 </div>163 <div class="title">Obi Hostel</div>164 <div class="icon-btn">165 <svg class="icon" width="44" height="44" viewBox="0 0 24 24">166 <path d="M12 21s-6-4.35-8.4-7.2C1.6 12.2 2 9.5 4 8c2-1.5 4.7-.8 6 1 1.3-1.8 4-2.5 6-1 2 1.5 2.4 4.2.4 5.8C18 16.65 12 21 12 21z"/>167 </svg>168 </div>169 <div class="icon-btn">170 <svg class="icon" width="44" height="44" viewBox="0 0 24 24">171 <path d="M18 8l-6-6v4H7c-3 0-5 2-5 5v9h2v-9c0-1.7 1.3-3 3-3h5v4l6-4z"/>172 </svg>173 </div>174 </div>175 176 <!-- Tabs -->177 <div class="tabs">178 <div class="tab active">DEALS</div>179 <div class="tab">REVIEWS</div>180 <div class="tab">DETAILS</div>181 </div>182 183 <!-- Carousel -->184 <div class="carousel">185 <div class="img">[IMG: Hostel photo]</div>186 <div class="dots">187 <span class="active"></span><span class="active"></span><span class="active"></span><span></span>188 </div>189 </div>190 191 <!-- Room card -->192 <div class="deal-card">193 <div class="deal-header">194 <div class="deal-title">Room Only</div>195 <div class="pill">11% off</div>196 </div>197 <div class="subline">Bed In Mix Dormitory | 1x Bunk bed(1m wide)</div>198 199 <div class="features">200 <div class="feature">201 <svg viewBox="0 0 24 24"><path fill="#9fb3bd" d="M3 12l3-3v2h14v2H6v2z"/></svg>202 <div>Meals not included</div>203 </div>204 <div class="feature">205 <svg viewBox="0 0 24 24"><path fill="#9fb3bd" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6h6v-2h-4V7z"/></svg>206 <div>Non-Refundable</div>207 </div>208 <div class="feature">209 <svg viewBox="0 0 24 24"><path fill="#9fb3bd" d="M12 1L8 5h8l-4-4zm-7 6h14v12H5V7zm3 3v2h8v-2H8z"/></svg>210 <div>Pay now</div>211 </div>212 <div class="feature">213 <svg viewBox="0 0 24 24"><path fill="#9fb3bd" d="M12 12a3 3 0 100-6 3 3 0 000 6zm0 2c-3.3 0-6 1.3-6 3v2h12v-2c0-1.7-2.7-3-6-3z"/></svg>214 <div>Up to 1 guest</div>215 </div>216 <div class="feature">217 <svg viewBox="0 0 24 24"><path fill="#45c7a2" d="M12 22a10 10 0 110-20 10 10 0 010 20zm-1-6l7-7-1.4-1.4L11 13.2 7.4 9.6 6 11z"/></svg>218 <div class="green">Instant confirmation</div>219 </div>220 <div class="feature">221 <svg viewBox="0 0 24 24"><path fill="#9fb3bd" d="M3 11h14v2H3v-2zm16-4h2v10h-2V7z"/></svg>222 <div>Non-smoking</div>223 </div>224 </div>225 226 <div class="cta-row">227 <div class="link">VIEW DETAILS</div>228 </div>229 230 <div class="merchant-price">231 <div class="merchant">Easytrip</div>232 <div class="price-area">233 <div class="strike">$28</div>234 <div class="big-price">$25</div>235 <div class="per-night">a night</div>236 </div>237 <div class="select-btn">SELECT</div>238 </div>239 </div>240 241 <div class="view-more">VIEW MORE ($25) ></div>242 243 <div class="divider"></div>244 245 <!-- Ratings -->246 <div class="rating-section">247 <div class="rating-title">Hotel rating</div>248 249 <div class="rating-row">250 <div class="rating-number">4.5</div>251 <div class="trip-dots">252 <div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle dim"></div>253 </div>254 <div class="count">(32)</div>255 </div>256 257 <div class="bar-group">258 <div class="bar-row">259 <div class="bar-label">4.0 Cleanliness</div>260 <div class="bar"><div class="fill" style="width:70%;"></div></div>261 </div>262 <div class="bar-row">263 <div class="bar-label">4.5 Location</div>264 <div class="bar"><div class="fill" style="width:88%;"></div></div>265 </div>266 <div class="bar-row">267 <div class="bar-label">4.5 Service</div>268 <div class="bar"><div class="fill" style="width:88%;"></div></div>269 </div>270 </div>271 </div>272 273</div>274</body>275</html>