GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>IndiGo Hotels List Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 :root{8 --green:#2e7d32;9 --light-green:#e8f5e9;10 --blue:#1976d2;11 --red:#c62828;12 --gray:#777;13 --text:#222;14 --muted:#666;15 --border:#d0d0d0;16 --bg:#ffffff;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }19 #render-target{20 position:relative;21 width:1080px;22 height:2400px;23 overflow:hidden;24 background:#fff;25 }26 /* Status bar */27 .status-bar{28 height:84px;29 padding:0 28px;30 display:flex;31 align-items:center;32 justify-content:space-between;33 color:#000;34 font-weight:600;35 font-size:34px;36 }37 .sb-right{38 display:flex; gap:22px; align-items:center;39 }40 .sb-icon{ width:36px; height:36px; border-radius:8px; background:#ddd; }41 /* App bar */42 .app-bar{43 height:120px;44 border-bottom:1px solid #eee;45 display:flex;46 align-items:center;47 padding:0 28px;48 gap:24px;49 }50 .icon-btn{51 width:72px; height:72px; display:flex; align-items:center; justify-content:center;52 }53 .logo{54 font-size:56px; font-weight:800; letter-spacing:1px; color:#0d47a1;55 }56 .logo small{ font-weight:700; color:#0d47a1; }57 /* Generic */58 .section{ padding:20px 28px; }59 .img-ph{60 background:#E0E0E0;61 border:1px solid #BDBDBD;62 color:#757575;63 display:flex; align-items:center; justify-content:center;64 text-align:center;65 font-size:28px;66 }67 .pill{68 display:inline-block;69 padding:10px 18px;70 border-radius:999px;71 font-size:28px;72 font-weight:700;73 }74 .pill.green{ background:#e6f4ea; color:#1b5e20; }75 .pill.featured{ background:#f2f2f2; color:#333; border:1px solid #e0e0e0; }76 .price-line{ font-size:36px; color:#111; }77 .old{ color:#9e9e9e; text-decoration:line-through; margin-right:12px; }78 .new{ font-weight:800; }79 .tax{ color:#777; font-size:28px; }80 .benefit{ color:#1b5e20; font-size:34px; font-weight:700; margin-top:10px; }81 /* Cards list */82 .card{83 border-top:1px solid #eee;84 padding:24px 28px;85 }86 .row{ display:flex; gap:24px; }87 .thumb{ width:260px; height:360px; border-radius:12px; overflow:hidden; }88 .thumb.tall{ height:480px; }89 .thumb.small{ height:300px; }90 .col{ flex:1; }91 .title{92 font-size:44px; font-weight:800; color:#111; margin:2px 0 10px;93 line-height:1.15;94 }95 .stars{ color:#ffb300; font-size:34px; letter-spacing:2px; }96 .subline{ display:flex; align-items:center; gap:10px; color:#555; font-size:30px; margin-top:8px; }97 .badges{ display:flex; align-items:center; gap:12px; margin-top:12px; }98 .leaf{ color:#2e7d32; font-size:34px; }99 .green-list{ margin-top:12px; }100 .check{ color:#2e7d32; margin-right:8px; }101 .strike-price{ margin-top:14px; }102 .right-price{ font-size:36px; color:#111; text-align:left; margin-top:10px; }103 .bold{ font-weight:800; }104 .rating-pill{105 background:#0d47a1; color:#fff; font-weight:800; border-radius:12px;106 display:inline-flex; align-items:center; justify-content:center;107 width:76px; height:56px; font-size:34px;108 }109 .note-red{ color:var(--red); font-size:32px; font-weight:800; margin:18px 0 6px; }110 .line{ height:14px; }111 .map-fab{112 position:absolute; bottom:240px; left:50%; transform:translateX(-50%);113 background:#1976d2; color:#fff; border-radius:18px;114 display:flex; align-items:center; gap:18px; padding:26px 34px; font-size:42px; font-weight:800;115 box-shadow:0 10px 24px rgba(0,0,0,0.2);116 }117 .map-fab .pin{ width:52px; height:52px; background:rgba(255,255,255,0.18); border-radius:12px; display:flex; align-items:center; justify-content:center; }118 .gesture{119 position:absolute; left:50%; transform:translateX(-50%);120 bottom:18px; width:360px; height:12px; background:#000; border-radius:8px; opacity:0.85;121 }122 .green-hr{ color:#1b5e20; font-weight:800; }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div>3:11</div>131 <div class="sb-right">132 <div class="sb-icon"></div>133 <div class="sb-icon"></div>134 </div>135 </div>136 137 <!-- App bar -->138 <div class="app-bar">139 <div class="icon-btn" aria-label="Close">140 <svg width="44" height="44" viewBox="0 0 24 24">141 <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2" stroke-linecap="round"/>142 </svg>143 </div>144 <div class="logo">IndiGo <small>✈︎</small></div>145 </div>146 147 <!-- Top teaser item -->148 <div class="section">149 <div class="img-ph" style="width:100%; height:300px; border-radius:14px;">[IMG: Houseboat deck banner]</div>150 <div class="line"></div>151 <span class="pill green" style="font-size:30px;">Getaway Deal</span>152 <div class="row" style="margin-top:16px; align-items:flex-start;">153 <div class="col">154 <!-- left empty, mimicking layout spacing -->155 </div>156 <div style="text-align:right; flex:1;">157 <div class="price-line">158 Price for <span class="bold">5 nights</span>:159 </div>160 <div class="price-line strike-price">161 <span class="old">₹ 20,250</span> <span class="new">₹ 15,188</span>162 </div>163 <div class="tax">+₹ 1,822 taxes and charges</div>164 <div class="benefit">Breakfast included</div>165 </div>166 </div>167 </div>168 169 <!-- Card: The Heritage Group of Houseboats -->170 <div class="card">171 <div class="row">172 <div class="thumb tall img-ph">[IMG: Ornate houseboat porch]</div>173 <div class="col">174 <div class="title">The Heritage Group of Houseboats</div>175 <div class="stars">★★★★★</div>176 <div class="badges">177 <span class="pill featured">Featured</span>178 <span class="pill featured" style="display:flex; align-items:center; gap:10px;">179 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 11l2 2 4-4" stroke="#2e7d32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>180 <span>Like</span>181 </span>182 </div>183 <div class="subline">184 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 4.2 6 12 6 12s6-7.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" fill="#555"/></svg>185 Dal Lake, Srinagar · 4.7 km from centre186 </div>187 <div class="subline" style="margin-top:8px;">188 <span class="leaf">🍃🍃🍃</span>189 <span class="muted">Travel Sustainable Level 3</span>190 </div>191 192 <div class="row" style="margin-top:18px;">193 <div class="col"></div>194 <div class="col">195 <div class="price-line">Price for <span class="bold">5 nights</span>:</div>196 <div class="price-line"><span class="old">₹ 15,750</span> <span class="new">₹ 11,813</span></div>197 <div class="tax">+₹ 1,417 taxes and charges</div>198 <div class="green-list">199 <div><span class="check">✔</span><span class="green-hr">Free cancellation</span></div>200 <div style="margin-top:8px;"><span class="check">✔</span><span class="green-hr">No prepayment needed</span></div>201 <div style="margin-top:8px; color:#333;">– pay at the property</div>202 </div>203 </div>204 </div>205 </div>206 </div>207 </div>208 209 <!-- Card: Pana 4 Boat House -->210 <div class="card">211 <div class="row">212 <div class="thumb img-ph">[IMG: People dining on houseboat deck]</div>213 <div class="col">214 <div class="title">Pana 4 Boat House</div>215 <div class="subline" style="gap:14px;">216 <span class="rating-pill">10</span>217 <span class="bold" style="font-size:34px;">Exceptional</span>218 <span class="muted" style="color:#555; font-size:30px;">· 4 reviews</span>219 </div>220 <div class="subline" style="margin-top:10px;">221 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 4.2 6 12 6 12s6-7.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" fill="#555"/></svg>222 Dal Lake, Srinagar · 3.3 km from centre223 </div>224 225 <div class="right-price" style="margin-top:18px;">226 Price for <span class="bold">5 nights</span>: <span class="bold">₹ 5,250</span>227 </div>228 <div class="tax">+₹ 630 taxes and charges</div>229 230 <div class="note-red">Only 2 rooms left at this price on our site</div>231 <div class="benefit">Breakfast included</div>232 <div class="green-list" style="margin-top:8px;">233 <div><span class="check">✔</span><span class="green-hr">Free cancellation</span></div>234 <div style="margin-top:8px;"><span class="check">✔</span><span class="green-hr">No prepayment needed</span></div>235 <div style="margin-top:8px; color:#333;">– pay at the property</div>236 </div>237 </div>238 </div>239 </div>240 241 <!-- Card: Hotel Green Rooms -->242 <div class="card">243 <div class="row">244 <div class="thumb small img-ph">[IMG: Hotel wooden ceiling lobby]</div>245 <div class="col">246 <div class="title">Hotel Green Rooms</div>247 <div class="stars">★★★★☆</div>248 <div class="badges">249 <span class="pill featured">Featured</span>250 <span class="pill featured" style="display:flex; align-items:center; gap:10px;">251 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 11l2 2 4-4" stroke="#2e7d32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>252 <span>Like</span>253 </span>254 </div>255 <div class="subline" style="margin-top:12px;">256 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 4.2 6 12 6 12s6-7.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" fill="#555"/></svg>257 4.8 km from centre258 </div>259 <div class="subline" style="margin-top:8px;">260 <span class="leaf">🍃🍃🍃</span>261 <span>Travel Sustainable Level 3</span>262 </div>263 </div>264 </div>265 </div>266 267 <!-- Floating Map button -->268 <div class="map-fab">269 <div class="pin">270 <svg width="34" height="34" viewBox="0 0 24 24">271 <path d="M12 2a6 6 0 00-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 00-6-6zm0 8.2a2.2 2.2 0 110-4.4 2.2 2.2 0 010 4.4z" fill="#fff"/>272 </svg>273 </div>274 Map275 </div>276 277 <!-- Gesture bar -->278 <div class="gesture"></div>279</div>280</body>281</html>