GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Hotels & Homestays</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F5F6F7;15 }16 .status-bar {17 height: 90px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #6C6C6C;23 font-weight: 600;24 font-size: 34px;25 }26 .status-icons { display: flex; align-items: center; gap: 24px; }27 .icon-dot { width: 12px; height: 12px; background:#9E9E9E; border-radius:50%; }28 .header {29 height: 140px;30 background: #FFFFFF;31 display: flex;32 align-items: center;33 padding: 0 30px;34 box-shadow: 0 2px 0 rgba(0,0,0,0.05);35 }36 .back-btn { width: 80px; height: 80px; display: flex; align-items:center; justify-content:center; }37 .brand-circle {38 width: 86px; height: 86px; background: #FF7F45; border-radius: 50%;39 display:flex; align-items:center; justify-content:center; margin-left: 10px; margin-right: 22px;40 }41 .brand-circle svg { width: 48px; height: 48px; }42 .title { font-size: 56px; font-weight: 800; color:#222; }43 .content { padding: 28px; }44 .card {45 background:#FFFFFF; border-radius: 26px;46 box-shadow: 0 6px 12px rgba(0,0,0,0.08);47 }48 .promo-hourly {49 height: 200px; display: flex; align-items: stretch; overflow: hidden;50 margin: 22px 12px;51 }52 .promo-left {53 width: 280px; background: linear-gradient(90deg, #ffd6c6, #ffe7de);54 display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;55 }56 .promo-left .badge { font-size: 42px; font-weight: 800; color:#1A1A1A; letter-spacing:0.5px; }57 .promo-left .sub { font-size: 28px; color:#6E6E6E; }58 .promo-right { flex:1; padding: 26px; display:flex; align-items:center; justify-content:space-between; }59 .promo-right .text { display:flex; flex-direction:column; }60 .promo-right .text .headline { font-size: 42px; font-weight: 800; color:#222; }61 .promo-right .text .desc { font-size: 32px; color:#7A7A7A; margin-top: 6px; }62 .chevron {63 width: 56px; height: 56px; border-radius: 18px; border: 2px solid #C7D7FF;64 display:flex; align-items:center; justify-content:center;65 }66 67 .search-card { margin: 22px 12px; }68 .search-inner { padding: 30px; }69 .hint { font-size: 32px; color:#8A8A8A; }70 .location { font-size: 64px; font-weight: 800; color:#1F1F1F; margin-top: 12px; }71 .row { display:flex; align-items:flex-start; margin-top: 32px; }72 .col { flex:1; }73 .date-title, .room-title { font-size: 50px; font-weight: 700; color:#1F1F1F; }74 .small { font-size: 30px; color:#8A8A8A; margin-top: 8px; }75 .divider { width: 2px; background:#E4E4E4; margin: 0 24px; }76 .search-btn-wrap { display:flex; justify-content:center; padding: 18px 30px 30px; }77 .search-btn {78 width: 760px; height: 120px; background:#FF7346; color:#FFFFFF;79 border-radius: 60px; display:flex; align-items:center; justify-content:center;80 font-size: 44px; font-weight: 800; box-shadow: 0 10px 20px rgba(255,115,70,0.35);81 }82 83 .section-title { font-size: 48px; font-weight: 800; color:#303030; margin: 36px 24px 18px; }84 .recent-card { margin: 0 12px; padding: 26px; border: 2px solid #E7EBF0; border-radius: 26px; background:#FFFFFF; display:flex; justify-content:space-between; align-items:flex-start; }85 .city-tag {86 display:inline-flex; align-items:center; gap:12px; background:#14A44D; color:#FFFFFF;87 padding: 12px 18px; border-radius: 12px; font-size: 30px; font-weight:700; margin-bottom: 16px;88 }89 .city-tag svg { width: 28px; height: 28px; }90 .recent-info .name { font-size: 46px; font-weight:800; color:#1F1F1F; }91 .recent-info .meta { font-size: 34px; color:#6E6E6E; margin-top: 18px; }92 .recent-info .date { font-size: 34px; color:#6E6E6E; margin-top: 10px; }93 .banner {94 margin: 26px 12px;95 height: 360px; border-radius: 26px; border: 1px solid #BDBDBD;96 background:#E0E0E0; color:#757575;97 display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;98 font-size: 36px; font-weight: 700;99 }100 101 .gostays-card { margin: 26px 12px; }102 .gostays-inner { padding: 28px; }103 .gostays-header { display:flex; justify-content:space-between; align-items:center; }104 .gostays-title { font-size: 54px; font-weight: 800; color:#FF6D5A; }105 .know-more { display:flex; align-items:center; gap:12px; color:#4B6FFF; font-size: 34px; font-weight:700; }106 .bullets { margin-top: 26px; }107 .bullet { display:flex; align-items:flex-start; gap:18px; margin-bottom: 22px; font-size: 36px; color:#444; }108 .tick {109 width: 34px; height: 34px; border-radius:50%; background:#FF7F45;110 display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; font-weight:900;111 margin-top: 6px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status Bar -->119 <div class="status-bar">120 <div>12:50</div>121 <div class="status-icons">122 <!-- simple circles/indicators as placeholders -->123 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9E9E9E"/></svg>124 <div class="icon-dot"></div>125 <svg width="36" height="36" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="#9E9E9E"/></svg>126 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#9E9E9E" stroke-width="2"/></svg>127 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 7h12v10H3zM17 10h4v4h-4z" fill="#9E9E9E"/></svg>128 <svg width="60" height="36" viewBox="0 0 36 24">129 <path d="M4 12h18" stroke="#9E9E9E" stroke-width="3" stroke-linecap="round"/>130 <rect x="25" y="6" width="7" height="12" rx="2" fill="#9E9E9E"/>131 </svg>132 <div style="font-size:34px; color:#6C6C6C;">100%</div>133 </div>134 </div>135 136 <!-- Header -->137 <div class="header">138 <div class="back-btn">139 <svg width="48" height="48" viewBox="0 0 24 24">140 <path d="M15 5L8 12l7 7" stroke="#2E2E2E" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 </div>143 <div class="brand-circle">144 <svg viewBox="0 0 24 24">145 <rect x="5" y="5" width="14" height="14" rx="2" fill="#fff"/>146 <rect x="8" y="8" width="3" height="3" fill="#FF7F45"/>147 <rect x="13" y="8" width="3" height="3" fill="#FF7F45"/>148 <rect x="8" y="13" width="8" height="4" fill="#FF7F45"/>149 </svg>150 </div>151 <div class="title">Hotels & Homestays</div>152 </div>153 154 <div class="content">155 156 <!-- Hourly Promo -->157 <div class="card promo-hourly">158 <div class="promo-left">159 <div class="badge">HOURLY</div>160 <div class="sub">STAYS</div>161 </div>162 <div class="promo-right">163 <div class="text">164 <div class="headline">BOOK FOR 3, 6 OR 9 HOURS!</div>165 <div class="desc">Flexible slots, great savings</div>166 </div>167 <div class="chevron">168 <svg width="28" height="28" viewBox="0 0 24 24">169 <path d="M9 5l7 7-7 7" stroke="#4B6FFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- Search Card -->176 <div class="card search-card">177 <div class="search-inner">178 <div class="hint">City, Area or Property Name</div>179 <div class="location">Berlin, Germany</div>180 181 <div class="row">182 <div class="col">183 <div class="date-title">01 Jan - 05 Jan</div>184 <div class="small">4 Nights</div>185 </div>186 <div class="divider"></div>187 <div class="col" style="text-align:right;">188 <div class="room-title">1 Room</div>189 <div class="small">2 Adults</div>190 </div>191 </div>192 </div>193 <div class="search-btn-wrap">194 <div class="search-btn">Search</div>195 </div>196 </div>197 198 <!-- Recent Searches -->199 <div class="section-title">Recent Searches</div>200 <div class="recent-card">201 <div class="recent-info">202 <div class="city-tag">203 <svg viewBox="0 0 24 24">204 <rect x="4" y="4" width="16" height="16" rx="2" fill="#fff"/>205 <rect x="7" y="7" width="3" height="3" fill="#14A44D"/>206 <rect x="12" y="7" width="3" height="3" fill="#14A44D"/>207 <rect x="7" y="12" width="8" height="5" fill="#14A44D"/>208 </svg>209 City210 </div>211 <div class="name">Berlin, Germany</div>212 <div class="meta">2 Adults</div>213 <div class="date">01 Jan - 05 Jan</div>214 </div>215 <div style="padding-top: 12px;">216 <svg width="44" height="44" viewBox="0 0 24 24">217 <path d="M9 5l7 7-7 7" stroke="#4B6FFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218 </svg>219 </div>220 </div>221 222 <!-- Promo Banner Placeholder -->223 <div class="banner">[IMG: Promo Banner - goStays 25% OFF]</div>224 225 <!-- goSTAYS Card -->226 <div class="card gostays-card">227 <div class="gostays-inner">228 <div class="gostays-header">229 <div class="gostays-title">goSTAYS</div>230 <div class="know-more">231 <span>Know More</span>232 <svg width="34" height="34" viewBox="0 0 24 24">233 <path d="M9 5l7 7-7 7" stroke="#4B6FFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 </div>237 <div style="color:#FF7F45; font-size:32px; margin-top:6px;">Top Rated Affordable Properties</div>238 <div class="bullets">239 <div class="bullet">240 <div class="tick">✓</div>241 <div>100% Money Back Guarantee*</div>242 </div>243 <div class="bullet">244 <div class="tick">✓</div>245 <div>Hassle-Free Check-in</div>246 </div>247 </div>248 </div>249 </div>250 251 </div>252 253</div>254</body>255</html>