GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Rental Listings - Hudson, NY</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #111214;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 34px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #f2f2f2;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .sb-left { display: flex; align-items: center; gap: 18px; }29 .sb-icons { display: flex; align-items: center; gap: 18px; opacity: 0.9; }30 .dot { width: 12px; height: 12px; background: #d6d6d6; border-radius: 50%; display: inline-block; }31 32 /* Search bar row */33 .search-container {34 padding: 18px 34px 8px 34px;35 }36 .search-row {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .search-field {42 flex: 1;43 height: 110px;44 background: #1C1E21;45 border-radius: 26px;46 border: 1px solid #2a2d31;47 display: flex;48 align-items: center;49 padding: 0 28px;50 color: #D8DDE2;51 font-size: 38px;52 }53 .search-field .placeholder { opacity: 0.9; }54 .filters-btn {55 padding: 0 26px;56 height: 110px;57 background: #1C1E21;58 border: 1px solid #2a2d31;59 color: #2BC1C6;60 border-radius: 22px;61 font-size: 36px;62 display: flex;63 align-items: center;64 }65 .search-icon {66 width: 38px; height: 38px; margin-right: 18px; opacity: 0.9;67 }68 69 /* Headings and tool row */70 .title {71 padding: 8px 34px 6px 34px;72 font-size: 52px;73 font-weight: 700;74 }75 .tools-row {76 padding: 6px 34px 8px 34px;77 display: flex;78 gap: 36px;79 font-size: 34px;80 color: #C8CDD2;81 }82 .tool-chip { letter-spacing: 0.3px; }83 84 /* Cards */85 .list {86 padding: 10px 0 180px 0; /* leave space for bottom nav */87 overflow-y: auto;88 height: 1720px;89 }90 .card {91 margin: 20px 24px 36px 24px;92 background: #17191C;93 border: 1px solid #26292e;94 border-radius: 24px;95 overflow: hidden;96 }97 .card-media {98 position: relative;99 padding: 0;100 }101 .img-ph {102 height: 620px;103 background: #E0E0E0;104 border-bottom: 1px solid #BDBDBD;105 color: #555;106 display: flex;107 align-items: center;108 justify-content: center;109 font-size: 36px;110 font-weight: 600;111 }112 .badge {113 position: absolute;114 top: 22px;115 left: 22px;116 background: #FFFFFF;117 color: #0B4DFF;118 padding: 14px 22px;119 border-radius: 14px;120 font-size: 30px;121 font-weight: 700;122 }123 .heart {124 position: absolute;125 top: 22px;126 right: 22px;127 width: 74px; height: 74px;128 background: rgba(0,0,0,0.25);129 border-radius: 22px;130 display: flex; align-items: center; justify-content: center;131 }132 .heart svg { width: 44px; height: 44px; }133 134 .card-body {135 padding: 26px 28px 28px 28px;136 }137 .price {138 font-size: 56px;139 font-weight: 800;140 margin-bottom: 16px;141 }142 .details {143 display: flex;144 align-items: center;145 gap: 34px;146 color: #D7DADD;147 font-size: 36px;148 margin: 6px 0 10px 0;149 }150 .detail {151 display: flex; align-items: center; gap: 14px;152 }153 .detail svg { width: 34px; height: 34px; opacity: 0.9; }154 .address {155 color: #C9CED3;156 font-size: 34px;157 line-height: 1.32;158 margin: 10px 0 12px 0;159 }160 .actions {161 display: flex; align-items: center; justify-content: space-between; margin-top: 10px;162 }163 .cta {164 padding: 24px 34px;165 background: #0C3C3F;166 color: #DFF9FA;167 border-radius: 18px;168 font-weight: 800;169 letter-spacing: 1px;170 text-transform: uppercase;171 font-size: 32px;172 }173 .more {174 display: flex; gap: 10px; align-items: center; padding-right: 10px;175 }176 .dot-vert { width: 8px; height: 8px; background: #D0D5DA; border-radius: 50%; display: inline-block; }177 178 /* Second card label */179 .pill {180 position: absolute;181 top: 22px; left: 22px;182 background: #FFFFFF;183 color: #1A1A1A;184 font-weight: 700;185 padding: 12px 20px;186 border-radius: 14px;187 font-size: 30px;188 }189 190 /* Bottom navigation */191 .bottom-nav {192 position: absolute;193 bottom: 46px;194 left: 0; right: 0;195 padding: 14px 20px 0 20px;196 height: 176px;197 background: #141618;198 border-top: 1px solid #24272b;199 display: flex;200 justify-content: space-around;201 align-items: center;202 }203 .nav-item {204 color: #C9CED3;205 font-size: 28px;206 display: flex;207 flex-direction: column;208 align-items: center;209 gap: 10px;210 }211 .nav-item svg { width: 46px; height: 46px; }212 .nav-item.active { color: #27B274; }213 .active .bubble {214 width: 44px; height: 44px; background: #1E7D57; border-radius: 50%;215 display: flex; align-items: center; justify-content: center;216 }217 .home-indicator {218 position: absolute;219 bottom: 10px;220 left: 50%;221 transform: translateX(-50%);222 width: 330px; height: 8px;223 background: #EDEDED;224 border-radius: 6px;225 opacity: 0.9;226 }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status Bar -->233 <div class="status-bar">234 <div class="sb-left">235 <div>7:06</div>236 <span class="dot"></span>237 <span class="dot"></span>238 <span class="dot"></span>239 <span class="dot"></span>240 <span class="dot"></span>241 </div>242 <div class="sb-icons">243 <!-- Wi-Fi icon -->244 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">245 <path d="M2 8c5.5-4.5 14.5-4.5 20 0"/>246 <path d="M5 12c3.5-3 10.5-3 14 0"/>247 <path d="M8 16c2-1.8 6-1.8 8 0"/>248 <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>249 </svg>250 <!-- Battery icon -->251 <svg width="46" height="38" viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">252 <rect x="1" y="3" width="22" height="10" rx="2"></rect>253 <rect x="3" y="5" width="14" height="6" fill="#fff" stroke="none"></rect>254 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff" stroke="none"></rect>255 </svg>256 </div>257 </div>258 259 <!-- Search -->260 <div class="search-container">261 <div class="search-row">262 <div class="search-field">263 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#C7CDD3" stroke-width="2">264 <circle cx="11" cy="11" r="7"></circle>265 <line x1="16" y1="16" x2="22" y2="22"></line>266 </svg>267 <span class="placeholder">Hudson, NY</span>268 </div>269 <div class="filters-btn">FILTERS</div>270 </div>271 </div>272 273 <div class="title">14 Homes For Rent in Hudson</div>274 275 <div class="tools-row">276 <div class="tool-chip">MAP RESULTS</div>277 <div class="tool-chip">SORT BY</div>278 <div class="tool-chip">SAVE SEARCH</div>279 </div>280 281 <!-- Listing Cards -->282 <div class="list">283 <!-- Card 1 -->284 <div class="card">285 <div class="card-media">286 <div class="img-ph">[IMG: Bright empty room with two windows and wood floors]</div>287 <div class="badge">NEW - 1 DAY AGO</div>288 <div class="heart">289 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="1.8">290 <path d="M12 21s-8-5.3-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.7-8 11-8 11z"></path>291 </svg>292 </div>293 </div>294 <div class="card-body">295 <div class="price">$1,950/mo</div>296 <div class="details">297 <div class="detail">298 <svg viewBox="0 0 24 24" fill="none" stroke="#D7DADD" stroke-width="2">299 <path d="M3 11h18"></path>300 <path d="M4 11V7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v4"></path>301 <rect x="3" y="11" width="18" height="8" rx="2"></rect>302 </svg>303 <span>2bd</span>304 </div>305 <div class="detail">306 <svg viewBox="0 0 24 24" fill="none" stroke="#D7DADD" stroke-width="2">307 <circle cx="7" cy="7" r="3"></circle>308 <path d="M4 14h10a3 3 0 0 1 3 3v2H1v-2a3 3 0 0 1 3-3z"></path>309 </svg>310 <span>1ba</span>311 </div>312 <div class="detail">313 <svg viewBox="0 0 24 24" fill="none" stroke="#D7DADD" stroke-width="2">314 <rect x="3" y="3" width="18" height="18"></rect>315 <path d="M3 9h18M9 3v18"></path>316 </svg>317 <span>685 sqft</span>318 </div>319 </div>320 <div class="address">725-729 Warren St, Hudson, NY 12534<br/>Hudson, NY</div>321 <div class="actions">322 <div class="cta">CHECK AVAILABILITY</div>323 <div class="more">324 <span class="dot-vert"></span><span class="dot-vert"></span><span class="dot-vert"></span>325 </div>326 </div>327 </div>328 </div>329 330 <!-- Card 2 (partial) -->331 <div class="card">332 <div class="card-media">333 <div class="img-ph" style="height: 560px;">[IMG: Window view of street with cars and lamp post]</div>334 <div class="pill">PET FRIENDLY</div>335 <div class="heart">336 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="1.8">337 <path d="M12 21s-8-5.3-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.7-8 11-8 11z"></path>338 </svg>339 </div>340 </div>341 <div class="card-body" style="padding-bottom: 18px;">342 <div class="price" style="font-size: 46px; opacity: 0.8;">Listing details continue...</div>343 </div>344 </div>345 </div>346 347 <!-- Bottom Navigation -->348 <div class="bottom-nav">349 <div class="nav-item">350 <svg viewBox="0 0 24 24" fill="none" stroke="#C9CED3" stroke-width="2">351 <path d="M3 21V9l9-6 9 6v12H3z"></path>352 <path d="M9 21V12h6v9"></path>353 </svg>354 <div>Feed</div>355 </div>356 <div class="nav-item active">357 <div class="bubble">358 <svg viewBox="0 0 24 24" fill="none" stroke="#EAF7F1" stroke-width="2">359 <circle cx="11" cy="11" r="7"></circle>360 <line x1="16" y1="16" x2="22" y2="22"></line>361 </svg>362 </div>363 <div>Search</div>364 </div>365 <div class="nav-item">366 <svg viewBox="0 0 24 24" fill="none" stroke="#C9CED3" stroke-width="2">367 <path d="M7 21l5-4 5 4V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v16z"></path>368 </svg>369 <div>Saves</div>370 </div>371 <div class="nav-item">372 <svg viewBox="0 0 24 24" fill="none" stroke="#C9CED3" stroke-width="2">373 <path d="M12 22v-6"></path>374 <path d="M12 2v6"></path>375 <path d="M4.93 4.93l4.24 4.24"></path>376 <path d="M19.07 4.93l-4.24 4.24"></path>377 <path d="M2 12h6"></path>378 <path d="M22 12h-6"></path>379 </svg>380 <div>Alerts</div>381 </div>382 <div class="nav-item">383 <svg viewBox="0 0 24 24" fill="none" stroke="#C9CED3" stroke-width="2">384 <circle cx="12" cy="5" r="2"></circle>385 <circle cx="12" cy="12" r="2"></circle>386 <circle cx="12" cy="19" r="2"></circle>387 </svg>388 <div>More</div>389 </div>390 </div>391 <div class="home-indicator"></div>392</div>393</body>394</html>