GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #fafafa;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #222;15  }16 17  /* Header */18  .header {19    position: relative;20    height: 420px;21    background: linear-gradient(180deg, #eac7cb 0%, #ffd8de 100%);22  }23  .decor-circle {24    position: absolute; right: -80px; top: 140px;25    width: 280px; height: 280px; border-radius: 50%;26    background: radial-gradient(circle at 40% 40%, #ff8c8c, #e85c5c);27    opacity: 0.9;28  }29  .icon-round {30    position: absolute; top: 86px;31    width: 92px; height: 92px; border-radius: 46px;32    background: #fff; box-shadow: 0 6px 12px rgba(0,0,0,0.15);33    display: flex; align-items: center; justify-content: center;34  }35  .back { left: 30px; }36  .currency { right: 190px; }37  .cart { right: 70px; }38 39  .search-area { position: absolute; left: 90px; right: 90px; top: 180px; }40  .search-line {41    display: flex; align-items: center; gap: 20px;42  }43  .search-line .city { font-size: 56px; font-weight: 800; letter-spacing: 0.2px; }44  .search-line .count { font-size: 32px; color: #7b7b7b; margin-left: 10px; }45  .search-line .edit { font-size: 32px; color: #2875ff; margin-left: 12px; font-weight: 600; }46  .date-line { margin-top: 12px; font-size: 30px; color: #5b5b5b; }47 48  /* Filter bar */49  .filters {50    position: relative;51    width: 1000px; height: 110px;52    margin: -30px auto 20px auto;53    background: #fff; border-radius: 55px;54    box-shadow: 0 10px 20px rgba(0,0,0,0.12);55    display: flex; align-items: center; justify-content: space-between;56    padding: 0 30px;57  }58  .filter-item { width: 31%; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 34px; color: #333; }59  .filters .divider { width: 2px; height: 60px; background: #e9e9e9; }60 61  /* Promo banner */62  .promo {63    width: 980px; margin: 20px auto 24px auto;64    background: #dff5d7; border-radius: 26px;65    padding: 24px 26px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 18px;66  }67  .promo .text { font-size: 32px; color: #1f5f1f; font-weight: 700; line-height: 1.25; }68  .promo .claim { color: #2875ff; font-size: 32px; font-weight: 800; }69 70  /* Cards */71  .card {72    width: 1000px; margin: 20px auto; background: #fff; border-radius: 28px;73    box-shadow: 0 6px 14px rgba(0,0,0,0.08);74  }75  .card-img {76    position: relative; height: 440px; margin: 20px;77    border-radius: 26px; background: #E0E0E0;78    border: 1px solid #BDBDBD;79    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;80  }81 82  .vip-badge {83    position: absolute; left: 46px; top: 40px;84    display: flex; align-items: center; overflow: hidden;85    border-radius: 8px;86  }87  .vip-star {88    width: 70px; height: 40px; background: #3b4a5c; display: flex; align-items: center; justify-content: center;89    border-top-left-radius: 8px; border-bottom-left-radius: 8px;90  }91  .vip-label {92    background: #cf7b4c; color: #fff; font-size: 26px; font-weight: 700;93    padding: 6px 12px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;94  }95 96  .img-count {97    position: absolute; left: 56px; bottom: 40px;98    background: rgba(0,0,0,0.4); color: #fff; font-size: 28px; padding: 10px 16px; border-radius: 16px;99  }100  .price-bubble {101    position: absolute; right: 46px; top: 280px;102    background: #fff; border-radius: 22px; box-shadow: 0 8px 18px rgba(0,0,0,0.18);103    padding: 18px 24px; text-align: right;104  }105  .price-bubble .old { font-size: 28px; color: #8b8b8b; text-decoration: line-through; }106  .price-bubble .new { font-size: 44px; color: #e53935; font-weight: 800; }107 108  .card-content { padding: 0 30px 28px 30px; position: relative; }109  .card-title { font-size: 44px; font-weight: 800; margin: 6px 0 18px 0; }110  .title-icons { position: absolute; right: 26px; top: -6px; display: flex; gap: 26px; }111  .tiny-btn { width: 64px; height: 64px; border-radius: 32px; background: #f0f0f3; display: flex; align-items: center; justify-content: center; }112 113  .meta { display: flex; align-items: center; gap: 12px; color: #666; font-size: 30px; margin-bottom: 10px; }114  .stars { display: inline-flex; gap: 6px; margin-right: 10px; }115  .rating-line { font-size: 32px; margin: 4px 0 16px 0; }116  .rating-line .score { color: #2875ff; font-weight: 800; }117  .rating-line .good { color: #2875ff; font-weight: 800; text-decoration: none; margin-right: 10px; }118 119  .free-pill {120    display: inline-block; background: #d7f0d8; color: #276b31; font-size: 28px;121    border-radius: 12px; padding: 10px 16px; margin-bottom: 12px; font-weight: 700;122  }123  .coupon { display: flex; align-items: center; gap: 10px; color: #333; font-size: 30px; }124 125  .separator-line { width: 100%; height: 16px; background: #f0f2f6; }126 127  /* Second card extras */128  .blue-pill {129    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);130    display: flex; align-items: center; gap: 24px;131    padding: 18px 28px; border-radius: 36px; background: #fff; color: #2d63ff;132    border: 3px solid #2d63ff; box-shadow: 0 10px 20px rgba(45,99,255,0.25);133    font-size: 32px; font-weight: 700;134  }135  .blue-pill .divider { width: 2px; height: 28px; background: #bcd0ff; }136 137  /* Utility icons */138  .svg-icon { width: 40px; height: 40px; }139  .chev { width: 28px; height: 28px; }140</style>141</head>142<body>143<div id="render-target">144 145  <div class="header">146    <div class="decor-circle"></div>147 148    <div class="icon-round back">149      <svg class="svg-icon" viewBox="0 0 24 24">150        <path d="M15 6L9 12l6 6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151      </svg>152    </div>153    <div class="icon-round currency">154      <svg class="svg-icon" viewBox="0 0 24 24">155        <path d="M6 8h8a4 4 0 010 8H6m8-12v16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>156      </svg>157    </div>158    <div class="icon-round cart">159      <svg class="svg-icon" viewBox="0 0 24 24">160        <path d="M4 6h2l2 10h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>161        <circle cx="9" cy="20" r="1.8" fill="#333"/>162        <circle cx="18" cy="20" r="1.8" fill="#333"/>163      </svg>164    </div>165 166    <div class="search-area">167      <div class="search-line">168        <svg class="svg-icon" viewBox="0 0 24 24">169          <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"/>170          <path d="M20 20l-4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>171        </svg>172        <div class="city">London</div>173        <div class="count">(5022)</div>174        <div class="edit">Edit</div>175      </div>176      <div class="date-line">Mon, Jan 15, 2024 - Tue, Jan 16, 2024 • 1 Guest</div>177    </div>178  </div>179 180  <div class="filters">181    <div class="filter-item">Filters182      <svg class="chev" viewBox="0 0 24 24">183        <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>184      </svg>185    </div>186    <div class="divider"></div>187    <div class="filter-item">Price188      <svg class="chev" viewBox="0 0 24 24">189        <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>190      </svg>191    </div>192    <div class="divider"></div>193    <div class="filter-item">Sort194      <svg class="chev" viewBox="0 0 24 24">195        <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>196      </svg>197    </div>198  </div>199 200  <div class="promo">201    <div>202      <svg class="svg-icon" viewBox="0 0 24 24">203        <path d="M4 7h9l7 7-6 6-7-7V7z" fill="#2c7a34"/>204        <circle cx="8" cy="11" r="2" fill="#dff5d7"/>205      </svg>206    </div>207    <div class="text">ONE-HOUR AGODASALE! Claim now to instantly lower prices by up to 10%</div>208    <div class="claim">CLAIM</div>209  </div>210 211  <!-- Card 1 -->212  <div class="card">213    <div class="card-img">214      [IMG: Hotel photo]215      <div class="vip-badge">216        <div class="vip-star">217          <svg viewBox="0 0 24 24" width="26" height="26">218            <path d="M12 3l3.2 6.5 7.1.9-5.2 4.7 1.5 7-6.6-3.7-6.6 3.7 1.5-7-5.2-4.7 7.1-.9L12 3z" fill="#fff"/>219          </svg>220        </div>221        <div class="vip-label">VIP Deal</div>222      </div>223      <div class="img-count">1/5</div>224      <div class="price-bubble">225        <div class="old">₹ 36,108</div>226        <div class="new">₹ 4,824</div>227      </div>228    </div>229 230    <div class="card-content">231      <div class="card-title">Berjaya Eden Park London Hotel</div>232 233      <div class="title-icons">234        <div class="tiny-btn">235          <svg class="svg-icon" viewBox="0 0 24 24">236            <circle cx="6" cy="12" r="2" fill="#333"/>237            <circle cx="12" cy="8" r="2" fill="#333"/>238            <circle cx="18" cy="12" r="2" fill="#333"/>239            <path d="M6 12l6-4 6 4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>240          </svg>241        </div>242        <div class="tiny-btn">243          <svg class="svg-icon" viewBox="0 0 24 24">244            <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.5-7 10-7 10" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>245          </svg>246        </div>247      </div>248 249      <div class="meta">250        <div class="stars">251          <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 3l3 6 6 .8-4.5 4 1.3 6-5.8-3.2-5.8 3.2 1.3-6-4.5-4 6-.8 3-6z" fill="#ff9f1a"/></svg>252          <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 3l3 6 6 .8-4.5 4 1.3 6-5.8-3.2-5.8 3.2 1.3-6-4.5-4 6-.8 3-6z" fill="#ff9f1a"/></svg>253          <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 3l3 6 6 .8-4.5 4 1.3 6-5.8-3.2-5.8 3.2 1.3-6-4.5-4 6-.8 3-6z" fill="#ff9f1a"/></svg>254        </div>255        <svg class="svg-icon" viewBox="0 0 24 24">256          <path d="M12 3a7 7 0 017 7c0 5-7 11-7 11S5 15 5 10a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#6b6b6b"/>257        </svg>258        Hyde Park - City center259      </div>260 261      <div class="rating-line">262        <span class="score">7.1</span> <a href="#" class="good">Very good</a> 3,524 reviews263      </div>264 265      <div class="free-pill">Free cancellation</div>266 267      <div class="coupon">268        <svg class="svg-icon" viewBox="0 0 24 24">269          <path d="M3 8h14v8H3z" fill="#222"/>270          <circle cx="6" cy="12" r="1.8" fill="#fff"/>271        </svg>272        WELCOMETOAGODA - ₹ 1,447 off!273      </div>274    </div>275  </div>276 277  <div class="separator-line"></div>278 279  <!-- Card 2 (partial) -->280  <div class="card" style="position: relative;">281    <div class="card-img">282      [IMG: Hotel photo]283      <div class="img-count">1/5</div>284      <div class="blue-pill">285        <svg viewBox="0 0 24 24" width="32" height="32">286          <path d="M12 3a7 7 0 017 7c0 5-7 11-7 11S5 15 5 10a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2d63ff"/>287        </svg>288        Map289        <div class="divider"></div>290        <svg viewBox="0 0 24 24" width="30" height="30">291          <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.5-7 10-7 10" fill="#2d63ff"/>292        </svg>293        Saved294      </div>295    </div>296  </div>297 298</div>299</body>300</html>