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>Florianopolis Hotels UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "SF Pro Text", Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0f0f10;14 color: #fff;15 }16 /* status bar */17 .status-bar {18 height: 90px;19 padding: 0 40px;20 display: flex;21 align-items: center;22 font-weight: 600;23 font-size: 36px;24 color: #eaeaea;25 }26 .status-bar .right {27 margin-left: auto;28 display: flex;29 gap: 26px;30 align-items: center;31 }32 /* header */33 .header {34 padding: 20px 36px 16px 36px;35 display: flex;36 align-items: center;37 }38 .header .title {39 flex: 1;40 text-align: center;41 font-size: 56px;42 font-weight: 700;43 letter-spacing: 0.2px;44 }45 .icon-btn {46 width: 72px;47 height: 72px;48 border-radius: 36px;49 display: flex;50 align-items: center;51 justify-content: center;52 background: transparent;53 }54 /* search */55 .search-box {56 margin: 16px 36px 8px 36px;57 height: 108px;58 border-radius: 20px;59 background: #1b1b1d;60 border: 1px solid #2a2a2d;61 display: flex;62 align-items: center;63 padding: 0 28px;64 font-size: 40px;65 color: #9fa2a7;66 }67 /* info row */68 .info-row {69 margin: 6px 36px 24px 36px;70 display: grid;71 grid-template-columns: 1fr 1fr;72 gap: 24px;73 }74 .info-block {75 background: #121215;76 border-top: 1px solid #2a2a2d;77 border-bottom: 1px solid #2a2a2d;78 border-left: 1px solid #2a2a2d;79 border-right: 1px solid #2a2a2d;80 border-radius: 16px;81 padding: 24px 28px;82 }83 .info-label {84 font-size: 36px;85 font-weight: 700;86 }87 .info-value {88 margin-top: 12px;89 font-size: 40px;90 color: #b7bac0;91 }92 /* list header */93 .list-header {94 margin: 28px 36px 12px 36px;95 display: flex;96 align-items: center;97 }98 .list-header .left {99 font-size: 42px;100 font-weight: 700;101 }102 .list-header .right {103 margin-left: auto;104 display: flex;105 align-items: center;106 gap: 18px;107 font-size: 42px;108 color: #eaeaea;109 }110 /* cards */111 .card {112 margin: 18px 36px 30px 36px;113 background: #1b1b1d;114 border-radius: 24px;115 overflow: hidden;116 border: 1px solid #2a2a2d;117 position: relative;118 }119 .card .img {120 height: 640px;121 background: #E0E0E0;122 border-bottom: 1px solid #BDBDBD;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 font-size: 36px;128 }129 .heart-badge {130 position: absolute;131 right: 28px;132 top: 28px;133 width: 120px;134 height: 120px;135 border-radius: 60px;136 background: rgba(24,24,26,0.85);137 display: flex;138 align-items: center;139 justify-content: center;140 border: 2px solid #2a2a2d;141 }142 .card-content {143 padding: 28px;144 display: grid;145 grid-template-columns: 1fr auto;146 align-items: start;147 }148 .hotel-title {149 font-size: 54px;150 font-weight: 800;151 margin-bottom: 10px;152 }153 .hotel-location {154 font-size: 40px;155 color: #b7bac0;156 }157 .price-block {158 text-align: right;159 margin-top: 8px;160 }161 .price-block .small {162 font-size: 36px;163 color: #d9dde3;164 }165 .price-block .price {166 display: block;167 font-size: 58px;168 font-weight: 900;169 color: #4BD16F;170 margin-top: 8px;171 letter-spacing: 1px;172 }173 .rating {174 margin-top: 22px;175 display: flex;176 gap: 12px;177 }178 .rating svg {179 width: 42px;180 height: 42px;181 }182 /* bottom home bar */183 .home-bar {184 position: absolute;185 bottom: 24px;186 left: 50%;187 transform: translateX(-50%);188 width: 680px;189 height: 20px;190 background: #e0e0e0;191 border-radius: 12px;192 opacity: 0.4;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status bar -->200 <div class="status-bar">201 <div>3:44</div>202 <div class="right">203 <span>◉</span>204 <span>🔔</span>205 <span>🛡️</span>206 <span>📶</span>207 <span>💧98%</span>208 </div>209 </div>210 211 <!-- Header -->212 <div class="header">213 <div class="icon-btn">214 <!-- Back arrow -->215 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">216 <path d="M15 18L9 12L15 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 <div class="title">Florianopolis</div>220 <div class="icon-btn">221 <!-- Map pin -->222 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">223 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" stroke="#ffffff" stroke-width="2" fill="none"/>224 <circle cx="12" cy="8" r="2.5" fill="#ffffff"/>225 </svg>226 </div>227 </div>228 229 <!-- Search -->230 <div class="search-box">State of Santa Catarina</div>231 232 <!-- Info row -->233 <div class="info-row">234 <div class="info-block">235 <div class="info-label">Enter your dates</div>236 <div class="info-value">01, Nov - 04, Nov</div>237 </div>238 <div class="info-block">239 <div class="info-label">Number of rooms</div>240 <div class="info-value">1 Room 1 person</div>241 </div>242 </div>243 244 <!-- List header -->245 <div class="list-header">246 <div class="left">8 Hotels found</div>247 <div class="right">248 <span>Sort & filter</span>249 <!-- Filter icon -->250 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">251 <path d="M4 7h16M7 12h10M10 17h4" stroke="#ff4fa0" stroke-width="2" stroke-linecap="round"/>252 </svg>253 </div>254 </div>255 256 <!-- Card 1 -->257 <div class="card">258 <div class="img">[IMG: Hotel Faial facade at night]</div>259 <div class="heart-badge">260 <!-- Heart outline -->261 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">262 <path d="M12 20s-7-4.4-9-8.5C1.9 8.1 3.8 6 6.2 6c1.6 0 3 .8 3.8 2.1C10.8 6.8 12.2 6 13.8 6c2.4 0 4.3 2.1 3.2 5.5C19 15.6 12 20 12 20z" stroke="#ff4fa0" stroke-width="2" fill="none"/>263 </svg>264 </div>265 <div class="card-content">266 <div>267 <div class="hotel-title">Faial Prime Suítes</div>268 <div class="hotel-location">Florianopolis, State of Santa Catarina</div>269 <div class="rating">270 <!-- 4 orange stars and 1 grey -->271 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>272 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>273 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>274 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>275 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#61646b"/></svg>276 </div>277 </div>278 <div class="price-block">279 <div class="small">From</div>280 <span class="price">$ 246</span>281 </div>282 </div>283 </div>284 285 <!-- Card 2 -->286 <div class="card">287 <div class="img">[IMG: Poolside at Ingleses Praia Hotel]</div>288 <div class="heart-badge">289 <!-- Heart outline -->290 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">291 <path d="M12 20s-7-4.4-9-8.5C1.9 8.1 3.8 6 6.2 6c1.6 0 3 .8 3.8 2.1C10.8 6.8 12.2 6 13.8 6c2.4 0 4.3 2.1 3.2 5.5C19 15.6 12 20 12 20z" stroke="#ff4fa0" stroke-width="2" fill="none"/>292 </svg>293 </div>294 <div class="card-content">295 <div>296 <div class="hotel-title">Ingleses Praia Hotel</div>297 <div class="hotel-location">Florianopolis, State of Santa Catarina</div>298 <div class="rating">299 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>300 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>301 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>302 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#ff9f2e"/></svg>303 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .8-5 4.7 1.4 7.5L12 18l-6.4 4 .8-7.5-5-4.7 7-.8 3-7z" fill="#61646b"/></svg>304 </div>305 </div>306 <div class="price-block">307 <div class="small">From</div>308 <span class="price">$ 261</span>309 </div>310 </div>311 </div>312 313 <!-- Home bar -->314 <div class="home-bar"></div>315 316</div>317</body>318</html>