GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Obi Hostel - Deals</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #0E1A22; color: #EAF2F7;11 }12 /* Status bar */13 .status-bar {14 height: 96px;15 padding: 0 32px;16 display: flex; align-items: center; justify-content: space-between;17 color: #DCE7EF; font-weight: 600;18 }19 .status-left, .status-right { display: flex; align-items: center; gap: 24px; }20 .icon {21 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;22 }23 /* Header */24 .header {25 padding: 20px 28px;26 display: flex; align-items: center; justify-content: space-between;27 }28 .header-left { display: flex; align-items: center; gap: 24px; }29 .back-btn {30 width: 72px; height: 72px; border-radius: 36px;31 display: flex; align-items: center; justify-content: center;32 }33 .title { font-size: 46px; font-weight: 700; }34 .header-right { display: flex; align-items: center; gap: 28px; }35 .round-btn {36 width: 64px; height: 64px; border-radius: 32px;37 display: flex; align-items: center; justify-content: center;38 }39 /* Tabs */40 .tabs {41 display: flex; gap: 60px; padding: 30px 28px 10px 28px; font-size: 34px; letter-spacing: 0.2px;42 }43 .tab { color: #A9C1CF; position: relative; padding-bottom: 18px; }44 .tab.active { color: #AEE7F7; font-weight: 700; }45 .tab.active::after {46 content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 120px; background: #69D1E8; border-radius: 3px;47 }48 /* Deal card */49 .deal-card {50 margin: 18px 28px; padding: 28px;51 background: #121F28; border-radius: 24px; border: 1px solid rgba(255,255,255,0.06);52 }53 .deal-top {54 display: flex; align-items: center; justify-content: space-between;55 }56 .deal-left { display: flex; align-items: center; gap: 28px; }57 .logo-placeholder {58 width: 220px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;59 display: flex; align-items: center; justify-content: center; color: #555; font-weight: 700; border-radius: 12px;60 }61 .price-wrap { display: flex; align-items: center; gap: 10px; }62 .old-price { color: #9FB0BA; text-decoration: line-through; font-size: 36px; }63 .new-price { font-size: 60px; font-weight: 800; color: #FFFFFF; }64 .per-night { font-size: 36px; color: #CFE2EA; }65 .info-dot {66 width: 40px; height: 40px; border-radius: 20px; background: #183A45; color: #AEE7F7;67 display: inline-flex; align-items: center; justify-content: center; font-weight: 700;68 }69 .select-btn {70 background: #3BA6AF; color: #0D2D33; font-weight: 800;71 padding: 22px 40px; border-radius: 22px; font-size: 36px;72 }73 .more-link {74 margin-top: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 14px;75 color: #84D6E8; font-size: 36px; cursor: default;76 }77 /* Section titles */78 .section-title {79 font-size: 48px; font-weight: 800; margin: 40px 28px 24px 28px;80 }81 /* Rating block */82 .rating-row {83 display: flex; align-items: center; gap: 20px; font-size: 44px; margin: 0 28px 18px 28px;84 }85 .dots { display: inline-flex; gap: 10px; }86 .dot {87 width: 24px; height: 24px; background: #5ED1A9; border-radius: 12px;88 box-shadow: 0 0 0 2px #356B5C inset;89 }90 .score-items { margin: 16px 28px 10px 28px; }91 .score-item { margin-bottom: 28px; }92 .score-label { font-size: 36px; margin-bottom: 10px; color: #CFE2EA; display: flex; align-items: center; gap: 18px; }93 .bar {94 height: 16px; background: #1C2B34; border-radius: 10px; overflow: hidden;95 }96 .bar .fill { height: 100%; background: #49B9C5; }97 .divider { height: 2px; background: #21313B; margin: 24px 28px; }98 /* Traveler card */99 .trav-card {100 margin: 20px 28px; padding: 28px;101 background: #101C25; border-radius: 24px; border: 1px solid rgba(255,255,255,0.06);102 }103 .trav-head { display: flex; align-items: center; gap: 18px; font-size: 40px; font-weight: 700; }104 .avatar {105 width: 72px; height: 72px; border-radius: 36px; background: #18303A; display: flex; align-items: center; justify-content: center;106 }107 .meta { color: #92A9B6; font-size: 28px; margin: 18px 0; }108 .stars { display: flex; align-items: center; gap: 12px; font-size: 42px; font-weight: 800; }109 .stars .dot { width: 22px; height: 22px; }110 .review-title { font-size: 40px; font-weight: 800; margin-top: 18px; }111 .review-text { font-size: 34px; line-height: 1.5; color: #D1E3EC; margin-top: 8px; }112 /* Chevron */113 .chev {114 width: 30px; height: 30px; display: inline-block;115 }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status Bar -->122 <div class="status-bar">123 <div class="status-left">124 <div style="font-size:40px;">3:18</div>125 <div class="icon" title="check">126 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>127 </div>128 <div class="icon" title="cloud">129 <svg width="38" height="38" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M6 19h11a4 4 0 0 0 0-8 5.5 5.5 0 0 0-10.6-1.5A4.5 4.5 0 0 0 6 19z"/></svg>130 </div>131 </div>132 <div class="status-right">133 <div class="icon" title="wifi">134 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M12 20l3-3H9l3 3zm-7-9c3.9-3.9 10.1-3.9 14 0l-1.4 1.4c-3-3-8.2-3-11.3 0L5 11zm3.5 3.5c2.7-2.7 7.2-2.7 9.9 0L17 16c-1.9-1.9-5.1-1.9-7 0l-1.5-1.5z"/></svg>135 </div>136 <div class="icon" title="battery">137 <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M17 6h2a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12zm-1 2H6v8h10V8z"/></svg>138 </div>139 </div>140 </div>141 142 <!-- Header -->143 <div class="header">144 <div class="header-left">145 <div class="back-btn">146 <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M15.5 5l-7 7 7 7 1.5-1.5L11.5 12 17 6.5z"/></svg>147 </div>148 <div class="title">Obi Hostel</div>149 </div>150 <div class="header-right">151 <div class="round-btn" title="favorite">152 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="none" stroke="#CFE2EA" stroke-width="2" d="M12 21s-7-4.8-9.2-7C1.3 12.5 2 9.5 4.3 8.3c2.3-1.2 4.3.2 5.7 1.7 1.4-1.5 3.4-2.9 5.7-1.7C18 9.5 18.7 12.5 17.2 14c-2.2 2.2-9.2 7-9.2 7z"/></svg>153 </div>154 <div class="round-btn" title="share">155 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#CFE2EA" d="M18 16a3 3 0 0 0-2.5 1.3L8.9 13A3 3 0 1 0 9 11l6.6-4.3A3 3 0 1 0 16 5a3 3 0 0 0-.2 1.1L9.1 10a3 3 0 0 0-.1 3.9l6.9 4.5A3 3 0 1 0 18 16z"/></svg>156 </div>157 </div>158 </div>159 160 <!-- Tabs -->161 <div class="tabs">162 <div class="tab active">DEALS</div>163 <div class="tab">REVIEWS</div>164 <div class="tab">DETAILS</div>165 </div>166 167 <!-- Deal Card -->168 <div class="deal-card">169 <div class="deal-top">170 <div class="deal-left">171 <div class="logo-placeholder">[IMG: Easytrip Logo]</div>172 <div class="price-wrap">173 <div class="old-price">$28</div>174 <div class="new-price">$25</div>175 <div class="per-night">a night</div>176 <div class="info-dot">i</div>177 </div>178 </div>179 <div class="select-btn">SELECT</div>180 </div>181 182 <div class="more-link">183 <span>VIEW MORE ($25)</span>184 <svg class="chev" viewBox="0 0 24 24"><path fill="#84D6E8" d="M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5z"/></svg>185 </div>186 </div>187 188 <div class="divider" style="margin-top:24px;"></div>189 190 <!-- Hotel rating -->191 <div class="section-title">Hotel rating</div>192 <div class="rating-row">193 <div style="font-weight:800;">4.5</div>194 <div class="dots">195 <div class="dot"></div>196 <div class="dot"></div>197 <div class="dot"></div>198 <div class="dot"></div>199 <div class="dot" style="opacity:.8;"></div>200 </div>201 <div style="color:#CFE2EA; font-size:40px;">(32)</div>202 </div>203 204 <div class="score-items">205 <div class="score-item">206 <div class="score-label">207 <span>4.0</span><span>Cleanliness</span>208 </div>209 <div class="bar">210 <div class="fill" style="width:78%"></div>211 </div>212 </div>213 214 <div class="score-item">215 <div class="score-label">216 <span>4.5</span><span>Location</span>217 </div>218 <div class="bar">219 <div class="fill" style="width:88%"></div>220 </div>221 </div>222 223 <div class="score-item">224 <div class="score-label">225 <span>4.5</span><span>Service</span>226 </div>227 <div class="bar">228 <div class="fill" style="width:88%"></div>229 </div>230 </div>231 232 <div class="score-item">233 <div class="score-label">234 <span>4.0</span><span>Rooms</span>235 </div>236 <div class="bar">237 <div class="fill" style="width:78%"></div>238 </div>239 </div>240 </div>241 242 <div class="divider"></div>243 244 <div class="section-title">What travelers are saying</div>245 246 <!-- Traveler Review Card -->247 <div class="trav-card">248 <div class="trav-head">249 <div class="avatar">250 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#AEE7F7" d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-3.3 3.6-6 7-6s7 2.7 7 6H5z"/></svg>251 </div>252 <div>Solo traveller</div>253 </div>254 <div class="meta">Comment: Jun 27, 2019 | Date of stay: Jun 2019</div>255 <div class="stars">256 <div>5.0</div>257 <div class="dots">258 <div class="dot"></div>259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 <div class="dot"></div>263 </div>264 </div>265 <div class="review-title">Obi Hostel</div>266 <div class="review-text">267 My 3 night stay was very pleasant. Staff are friendly and place is clean and lockers in sleeping areas. The beds where joined together side by side by steel and ...268 </div>269 </div>270 271</div>272</body>273</html>