GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hotel Detail - Hyatt Regency Vancouver</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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; height: 2400px; position: relative; overflow: hidden;11 background: #0d1b22; color: #e9f1f4;12 }13 /* Hero banner */14 .hero {15 position: relative; width: 100%; height: 720px;16 }17 .hero .img {18 position: absolute; left: 0; top: 0; width: 100%; height: 100%;19 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;20 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600; letter-spacing: 0.3px;21 }22 .hero::before {23 content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;24 background: linear-gradient(to bottom, rgba(7,12,16,0.75), rgba(7,12,16,0));25 pointer-events: none;26 }27 .status-bar {28 position: absolute; top: 24px; left: 24px; right: 24px; height: 40px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 28px;29 }30 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }31 .status-pill { width: 22px; height: 22px; border-radius: 50%; background: #ffffff; opacity: 0.9; }32 .badge { padding: 2px 8px; border: 2px solid #bfcad1; border-radius: 6px; font-size: 22px; color: #bfcad1; }33 .hero-actions {34 position: absolute; top: 150px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between;35 }36 .icon-btn {37 width: 60px; height: 60px; border-radius: 30px; background: rgba(13,27,34,0.55);38 display: flex; align-items: center; justify-content: center;39 }40 .hero .pagination {41 position: absolute; bottom: 90px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 14px;42 }43 .dot { width: 16px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.45); }44 .dot.active { background: #ffffff; }45 .hero .count {46 position: absolute; bottom: 88px; right: 24px; color: #fff; font-size: 26px; opacity: 0.9;47 }48 49 /* Content card */50 .content {51 position: relative; margin-top: -60px; background: #0c1a21; border-top-left-radius: 44px; border-top-right-radius: 44px;52 padding: 44px;53 box-shadow: 0 -8px 16px rgba(0,0,0,0.35);54 }55 h1 {56 margin: 20px 0 10px; font-size: 52px; line-height: 1.2; font-weight: 800; color: #ffffff;57 }58 .stars { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; }59 .subline {60 color: #6fe0d0; font-size: 26px; letter-spacing: 0.5px; margin-top: 6px; display: flex; align-items: center; gap: 10px;61 text-transform: uppercase;62 }63 .row { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }64 .rating-left { display: flex; align-items: center; gap: 18px; }65 .rating-score { font-size: 42px; font-weight: 700; color: #ffffff; }66 .rating-dots { display: inline-flex; align-items: center; gap: 10px; }67 .rating-dots .gdot { width: 20px; height: 20px; border-radius: 10px; background: #62d49e; }68 .muted { color: #9fb0b9; }69 .chevron {70 width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: 0.7;71 }72 73 .pill {74 margin-top: 24px; display: inline-flex; align-items: center; gap: 16px;75 background: #1a3a42; color: #a9e9de; padding: 18px 22px; border-radius: 16px; font-size: 26px; font-weight: 600;76 }77 .divider {78 height: 1px; background: #27404a; margin: 28px 0;79 }80 .addr { display: flex; align-items: center; justify-content: space-between; color: #c7d3d9; font-size: 30px; }81 .addr-left { display: flex; align-items: center; gap: 16px; }82 83 .section-title { margin-top: 34px; font-size: 36px; font-weight: 800; color: #ffffff; }84 .section-title span { color: #a8b8bf; font-weight: 600; }85 86 .price-card {87 margin-top: 30px; background: #1a2a33; border-radius: 28px; padding: 34px; position: relative;88 box-shadow: 0 8px 20px rgba(0,0,0,0.35);89 }90 .provider { display: flex; align-items: center; gap: 24px; }91 .logo-placeholder {92 width: 160px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;93 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;94 }95 .price { position: absolute; right: 34px; top: 34px; text-align: right; }96 .price .value { font-size: 72px; font-weight: 800; color: #ffffff; }97 .price .note { font-size: 26px; color: #a9b5bb; }98 99 .trip-pill {100 position: absolute; left: 24px; right: 24px; bottom: -24px;101 background: #0f1d24; color: #eaf1f4; border-radius: 30px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between;102 box-shadow: 0 10px 18px rgba(0,0,0,0.45);103 }104 .trip-info { display: flex; align-items: center; gap: 22px; }105 .thumb {106 width: 120px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;107 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;108 }109 .trip-text { display: flex; flex-direction: column; }110 .trip-title { font-size: 32px; font-weight: 800; }111 .trip-date { font-size: 26px; color: #a9b5bb; margin-top: 6px; }112 .trip-pill::after {113 content: ""; position: absolute; left: 24px; right: 24px; bottom: -16px; height: 8px; background: #33c2b8; border-radius: 8px;114 }115 116 .footer-links { margin-top: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }117 .footer-links .label { color: #8c9aa2; font-size: 28px; }118 .footer-links .action { color: #6fe0d0; font-size: 28px; font-weight: 700; }119 120 /* Home indicator */121 .home-indicator {122 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);123 width: 380px; height: 10px; background: rgba(255,255,255,0.75); border-radius: 6px;124 }125 126 /* SVG helpers */127 svg { display: block; }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Hero image -->134 <div class="hero">135 <div class="img">[IMG: Vancouver skyline hotel]</div>136 137 <!-- Status bar -->138 <div class="status-bar">139 <div class="status-left">140 <div style="font-weight:700;">10:05</div>141 <div class="status-pill"></div>142 <!-- simple magnifier -->143 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle><line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2"></line></svg>144 <div style="font-weight:700; color:#cfe6f2;">N</div>145 <div class="badge">LR</div>146 <div style="font-size:34px;">•</div>147 </div>148 <div class="status-right">149 <!-- wifi -->150 <svg width="32" height="24" viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.7"></path><path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"></path><circle cx="12" cy="16" r="2" fill="#fff"></circle></svg>151 <!-- battery -->152 <svg width="32" height="24" viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect><rect x="3" y="5" width="18" height="6" fill="#fff"></rect><rect x="23" y="6" width="4" height="4" fill="#fff"></rect></svg>153 </div>154 </div>155 156 <!-- Action buttons -->157 <div class="hero-actions">158 <div class="icon-btn">159 <!-- back arrow -->160 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>161 </div>162 <div style="display:flex; gap:16px;">163 <div class="icon-btn">164 <!-- heart -->165 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-10 11z" fill="#ff6b7a" stroke="#ff6b7a"></path></svg>166 </div>167 <div class="icon-btn">168 <!-- share -->169 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"></circle><circle cx="19" cy="5" r="2" fill="#fff"></circle><circle cx="19" cy="19" r="2" fill="#fff"></circle><path d="M7 12l10-7M7 12l10 7" stroke="#fff" stroke-width="2" fill="none"></path></svg>170 </div>171 </div>172 </div>173 174 <div class="pagination">175 <div class="dot active"></div>176 <div class="dot"></div>177 <div class="dot"></div>178 <div class="dot"></div>179 </div>180 <div class="count">1/123</div>181 </div>182 183 <!-- Main content -->184 <div class="content">185 <h1>Hyatt Regency Vancouver186 <span class="stars">187 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3 1.1-6.1L3 8.9 9 8l3-6z" fill="#ff7357"></path></svg>188 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3 1.1-6.1L3 8.9 9 8l3-6z" fill="#ff7357"></path></svg>189 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3 1.1-6.1L3 8.9 9 8l3-6z" fill="#ff7357"></path></svg>190 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3 1.1-6.1L3 8.9 9 8l3-6z" fill="#ff7357"></path></svg>191 </span>192 </h1>193 194 <div class="subline">195 DEC 15 – 16, 2023, 3 ADULTS, 2 ROOMS196 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 17v4h4l11-11-4-4L3 17z" fill="none" stroke="#6fe0d0" stroke-width="2"></path><path d="M14 6l4 4" stroke="#6fe0d0" stroke-width="2"></path></svg>197 </div>198 199 <div class="row">200 <div class="rating-left">201 <div class="rating-score">4.5</div>202 <div class="rating-dots">203 <div class="gdot"></div><div class="gdot"></div><div class="gdot"></div><div class="gdot"></div><div class="gdot" style="opacity:0.35;"></div>204 </div>205 <div class="muted" style="font-size:32px;">(5,945)</div>206 </div>207 <div class="chevron">208 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9fb0b9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>209 </div>210 </div>211 212 <div class="pill">213 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 14v5h5l9-9-5-5-9 9z" fill="#59c7b8"></path></svg>214 <span>Location 5.0/5</span>215 </div>216 217 <div class="divider"></div>218 219 <div class="addr">220 <div class="addr-left">221 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-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" fill="#b9c6cc"></path></svg>222 <span>655 Burrard Street, V6C 2R7 Vancouver, Canada</span>223 </div>224 <div class="chevron">225 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9fb0b9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>226 </div>227 </div>228 229 <div class="section-title">Lowest price <span>for 1 night</span></div>230 231 <div class="price-card">232 <div class="provider">233 <div class="logo-placeholder">[IMG: algotels logo]</div>234 </div>235 <div class="price">236 <div class="value">$395</div>237 <div class="note">total</div>238 </div>239 240 <div class="trip-pill">241 <div class="trip-info">242 <div class="thumb">[IMG: Vancouver]</div>243 <div class="trip-text">244 <div class="trip-title">‘Trip to Vancouver’ trip updated</div>245 <div class="trip-date">15 Fri – Sat, Dec 16, 23</div>246 </div>247 </div>248 <div class="chevron">249 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9fb0b9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>250 </div>251 </div>252 </div>253 254 <div class="footer-links">255 <div class="label">More popular choices</div>256 <div class="action">See all</div>257 </div>258 </div>259 260 <div class="home-indicator"></div>261</div>262</body>263</html>