GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>IndiGo Listings UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 height: 70px;19 padding: 0 24px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #333;24 font-size: 32px;25 }26 .status-icons { display: flex; gap: 20px; align-items: center; }27 .icon-wifi, .icon-lock {28 width: 34px; height: 34px;29 border: 2px solid #666; border-radius: 6px;30 }31 32 /* App header */33 .app-header {34 height: 96px;35 padding: 0 24px;36 display: flex;37 align-items: center;38 gap: 20px;39 border-bottom: 1px solid #e6e6e6;40 }41 .btn-close {42 width: 56px; height: 56px;43 display: inline-flex; align-items: center; justify-content: center;44 border-radius: 28px;45 border: 2px solid #888;46 }47 .btn-close svg { width: 28px; height: 28px; stroke: #444; stroke-width: 3; }48 .brand {49 font-size: 48px; font-weight: 700; color: #1a56ff; letter-spacing: 0.5px;50 display: flex; align-items: center; gap: 10px;51 }52 .brand .plane {53 font-size: 42px; color: #1a56ff;54 }55 56 /* Content area */57 .content {58 position: absolute;59 left: 0; right: 0;60 top: 166px; /* status + header */61 bottom: 0;62 overflow-y: auto;63 padding: 16px 20px 120px;64 }65 66 /* Generic image placeholder */67 .img {68 background: #E0E0E0;69 border: 1px solid #BDBDBD;70 color: #757575;71 display: flex; align-items: center; justify-content: center;72 text-align: center;73 font-size: 28px;74 line-height: 1.2;75 }76 77 /* Pills and tags */78 .pill {79 display: inline-flex;80 align-items: center;81 padding: 8px 14px;82 font-size: 26px;83 border-radius: 100px;84 border: 1px solid #ddd;85 background: #f7f7f7;86 color: #444;87 }88 .pill.featured { background: #fff8e1; border-color: #ffe082; }89 .pill.getaway { background: #e9f7e9; color: #0a8f2e; border-color: #b8e3c2; }90 91 /* Cards */92 .card {93 background: #fff;94 border-radius: 12px;95 box-shadow: 0 0 0 1px #eee inset;96 padding: 18px;97 margin-bottom: 22px;98 }99 .row { display: flex; gap: 18px; }100 .col { flex: 1; }101 .title {102 font-size: 40px; font-weight: 700; color: #111; margin: 4px 0 8px;103 }104 .stars { display: inline-flex; gap: 6px; margin-right: 12px; vertical-align: middle; }105 .star {106 width: 28px; height: 28px; display: inline-block;107 background: #FFD54F; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);108 }109 .subtle { color: #666; font-size: 28px; }110 .green { color: #18a13d; }111 .red { color: #d32f2f; }112 .divider { height: 1px; background: #eee; margin: 12px 0; }113 114 .location { display: flex; align-items: center; gap: 10px; color: #444; font-size: 28px; }115 .location svg { width: 24px; height: 24px; fill: #444; }116 117 .leafs { display: inline-flex; gap: 6px; margin-right: 12px; }118 .leaf {119 width: 18px; height: 18px; border-radius: 50%;120 background: #1aa334;121 }122 123 .price-line { font-size: 32px; color: #444; margin-top: 8px; }124 .price-main { font-size: 50px; font-weight: 800; }125 .price-strike { font-size: 40px; color: #d32f2f; text-decoration: line-through; margin-right: 10px; }126 .tax-line { font-size: 28px; color: #777; margin-top: 4px; }127 128 .benefits { margin-top: 8px; }129 .benefit { display: flex; align-items: center; gap: 12px; font-size: 30px; color: #1aa334; margin: 8px 0; }130 .benefit svg { width: 26px; height: 26px; fill: none; stroke: #1aa334; stroke-width: 4; }131 132 /* Floating Map button */133 .map-fab {134 position: absolute;135 bottom: 360px; left: 340px;136 width: 400px; height: 120px;137 background: #1e6bff;138 border-radius: 28px;139 box-shadow: 0 8px 24px rgba(0,0,0,0.2);140 display: flex; align-items: center; justify-content: center; gap: 18px;141 color: #fff; font-size: 40px; font-weight: 700;142 }143 .map-fab .pin {144 width: 58px; height: 58px; fill: #fff;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div>3:10</div>154 <div class="status-icons">155 <div class="icon-wifi"></div>156 <div class="icon-lock"></div>157 </div>158 </div>159 160 <!-- App header -->161 <div class="app-header">162 <div class="btn-close" aria-label="Close">163 <svg viewBox="0 0 24 24">164 <line x1="4" y1="4" x2="20" y2="20"></line>165 <line x1="20" y1="4" x2="4" y2="20"></line>166 </svg>167 </div>168 <div class="brand">IndiGo <span class="plane">✈️</span></div>169 </div>170 171 <!-- Scrollable content -->172 <div class="content">173 174 <!-- Top promo card -->175 <div class="card">176 <div class="row">177 <div class="img" style="width: 300px; height: 220px;">[IMG: Houseboat deck seating]</div>178 <div class="col">179 <div class="pill getaway" style="margin-bottom: 8px;">Getaway Deal</div>180 <div class="price-line">Price for 5 nights:</div>181 <div style="margin-top: 6px;">182 <span class="price-strike">₹ 20,250</span>183 <span class="price-main">₹ 15,188</span>184 </div>185 <div class="tax-line">+₹ 1,822 taxes and charges</div>186 <div class="title" style="font-size: 34px; color: #18a13d; font-weight: 800; margin-top: 8px;">Breakfast included</div>187 </div>188 </div>189 </div>190 191 <!-- The Heritage Group of Houseboats -->192 <div class="card">193 <div class="row">194 <div class="img" style="width: 300px; height: 420px;">[IMG: Ornate houseboat veranda]</div>195 <div class="col">196 <div class="title">The Heritage Group of Houseboats</div>197 <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">198 <div class="stars">199 <div class="star"></div>200 <div class="star"></div>201 <div class="star"></div>202 <div class="star"></div>203 <div class="star" style="width:22px; height:22px;"></div>204 </div>205 <span class="pill featured">Featured</span>206 <span class="pill" style="gap:6px;">👍 👍</span>207 </div>208 209 <div class="location">210 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 14 6 14s6-8.8 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>211 Dal Lake, Srinagar • 4.7 km from centre212 </div>213 214 <div style="margin:10px 0;">215 <span class="leafs"><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span></span>216 <span class="subtle green">Travel Sustainable Level 3</span>217 </div>218 219 <div style="margin: 6px 0 10px;">220 <span class="pill getaway">Getaway Deal</span>221 </div>222 223 <div class="price-line">Price for 5 nights:</div>224 <div style="margin-top:6px;">225 <span class="price-strike">₹ 15,750</span>226 <span class="price-main">₹ 11,813</span>227 </div>228 <div class="tax-line">+₹ 1,417 taxes and charges</div>229 230 <div class="benefits">231 <div class="benefit">232 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>233 Free cancellation234 </div>235 <div class="benefit" style="color:#1aa334;">236 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>237 No prepayment needed – pay at the property238 </div>239 </div>240 </div>241 </div>242 </div>243 244 <!-- Pana 4 Boat House -->245 <div class="card">246 <div class="row">247 <div class="img" style="width: 300px; height: 420px;">[IMG: Outdoor dining on boat]</div>248 <div class="col">249 <div class="title">Pana 4 Boat House</div>250 251 <div style="display:flex; align-items:center; gap:12px; margin-bottom:6px;">252 <div style="background:#0d47a1; color:#fff; padding:8px 14px; border-radius:10px; font-size:28px; font-weight:800;">10</div>253 <div class="subtle" style="font-size:30px;">Exceptional · 4 reviews</div>254 </div>255 256 <div class="location">257 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 14 6 14s6-8.8 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>258 Dal Lake, Srinagar • 3.3 km from centre259 </div>260 261 <div class="price-line" style="margin-top:12px;">Price for 5 nights: <span class="price-main">₹ 5,250</span></div>262 <div class="tax-line">+₹ 630 taxes and charges</div>263 264 <div class="red" style="font-size:30px; font-weight:700; margin:12px 0;">265 Only 2 rooms left at this price on our site266 </div>267 268 <div class="benefits">269 <div class="title" style="font-size:34px; color:#18a13d; font-weight:800; margin:6px 0;">Breakfast included</div>270 <div class="benefit">271 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>272 Free cancellation273 </div>274 <div class="benefit">275 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>276 No prepayment needed – pay at the property277 </div>278 </div>279 </div>280 </div>281 </div>282 283 <!-- Hotel Green Rooms -->284 <div class="card">285 <div class="row">286 <div class="img" style="width: 300px; height: 420px;">[IMG: Hotel lobby ceiling]</div>287 <div class="col">288 <div class="title">Hotel Green Rooms</div>289 <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">290 <div class="stars">291 <div class="star"></div>292 <div class="star"></div>293 <div class="star"></div>294 <div class="star"></div>295 </div>296 <span class="pill featured">Featured</span>297 <span class="pill" style="gap:6px;">👍 👍</span>298 </div>299 <div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">300 <div class="subtle" style="background:#0d47a1; color:#fff; padding:8px 14px; border-radius:10px; font-size:28px; font-weight:800;">9.0</div>301 <div class="subtle">· 145 reviews</div>302 </div>303 304 <div class="location">305 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 14 6 14s6-8.8 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>306 1.9 km from centre307 </div>308 309 <div style="margin:10px 0;">310 <span class="leafs"><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span></span>311 <span class="subtle green">Travel Sustainable Level 3</span>312 </div>313 </div>314 </div>315 </div>316 317 </div>318 319 <!-- Floating Map button -->320 <div class="map-fab">321 <svg class="pin" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 14 6 14s6-8.8 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>322 Map323 </div>324 325</div>326</body>327</html>