GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Hotels & Homestays UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 32px;13    box-shadow: 0 8px 24px rgba(0,0,0,0.15);14  }15  .statusbar {16    height: 96px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #2f2f2f; font-weight: 600; font-size: 34px;19  }20  .status-icons { display: flex; align-items: center; gap: 22px; color: #616161; }21  .dot { width: 10px; height: 10px; background:#9e9e9e; border-radius: 50%; display:inline-block; }22  .container { padding: 0 48px; }23  .titlebar {24    height: 116px; display: flex; align-items: center; gap: 24px;25  }26  .back-btn {27    width: 72px; height: 72px; border-radius: 36px;28    display: flex; align-items: center; justify-content: center;29  }30  .title {31    font-size: 54px; font-weight: 700; color: #111;32    flex: 1;33  }34  .new-badge {35    display: inline-flex; align-items: center; gap: 8px;36    background: #fff0f3; color: #ff2f57; border-radius: 999px;37    padding: 10px 20px; font-size: 32px; font-weight: 700;38    box-shadow: 0 2px 6px rgba(255,47,87,0.25);39  }40  .tabs {41    display: flex; gap: 18px; margin-top: 8px; margin-bottom: 28px;42  }43  .tab {44    padding: 22px 28px; border-radius: 16px; font-size: 30px; font-weight: 700;45    background: #ffffff; border: 2px solid #E0E0E0; color:#4b4b4b;46    box-shadow: 0 2px 6px rgba(0,0,0,0.06);47  }48  .tab.active {49    border-color: #2e7cf7; color: #2e7cf7; background: #eaf3ff;50  }51  .promo {52    background: #cfeee3; border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; gap: 20px;53    box-shadow: 0 2px 6px rgba(0,0,0,0.06);54    font-size: 30px; color:#214b39; margin-bottom: 32px;55  }56  .input-card {57    background: #ffffff; border: 2px solid #E6E6E6; border-radius: 28px;58    height: 150px; display: flex; align-items: center; padding: 0 28px; gap: 22px;59    box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 22px;60  }61  .input-title { font-size: 42px; font-weight: 800; color: #1b1b1b; }62  .input-sub { font-size: 30px; color: #8a8a8a; margin-top: 4px; }63  .input-col { display: flex; flex-direction: column; }64  .divider-slash { width: 2px; height: 72px; background:#e0e0e0; margin: 0 26px; transform: skew(-18deg); }65  .night-pill {66    background:#f1f1f1; color:#8a8a8a; border-radius: 999px; padding: 12px 24px; font-size: 28px; font-weight: 700; margin: 0 24px;67  }68  .search-btn {69    margin-top: 24px; height: 140px; border-radius: 22px;70    background: linear-gradient(90deg, #2e9cff, #1967ff);71    color: #ffffff; font-size: 46px; font-weight: 900; letter-spacing: 2px;72    display: flex; align-items: center; justify-content: center;73    box-shadow: 0 8px 18px rgba(25,103,255,0.35);74  }75  .ad-strip { margin-top: 42px; display: flex; gap: 22px; }76  .ad-card {77    flex: 1; background:#ffffff; border: 2px solid #E6E6E6; border-radius: 26px;78    padding: 18px; display: flex; gap: 18px; align-items: center;79    box-shadow: 0 2px 8px rgba(0,0,0,0.05);80  }81  .img-ph {82    background:#E0E0E0; border: 1px solid #BDBDBD; color:#757575;83    display: flex; align-items: center; justify-content: center;84    border-radius: 16px; text-align: center;85  }86  .ad-img { width: 320px; height: 160px; }87  .ad-text { flex: 1; }88  .ad-title { font-size: 36px; font-weight: 800; color:#222; }89  .ad-sub { font-size: 30px; color:#555; margin-top: 6px; }90  .ad-btn {91    margin-top: 16px; display: inline-block; padding: 16px 24px; background:#0f8a41; color:#fff;92    border-radius: 12px; font-weight: 800; font-size: 30px;93  }94  .section { padding: 36px 0; }95  .section-header { display: flex; align-items: baseline; justify-content: space-between; }96  .section-title { font-size: 48px; font-weight: 800; color:#111; }97  .section-title em { font-style: italic; color:#c9a64c; font-weight: 800; }98  .learn-more { color:#1a73e8; font-size: 32px; font-weight: 800; display: flex; align-items: center; gap: 10px; }99  .section-sub { font-size: 32px; color:#525252; margin-top: 10px; line-height: 1.35; }100  .cards { display: flex; gap: 22px; margin-top: 24px; }101  .hotel-card { width: 320px; }102  .hotel-img { width: 320px; height: 220px; border-radius: 22px; }103  .home-indicator {104    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);105    width: 360px; height: 12px; background:#d0d0d0; border-radius: 10px;106  }107 108  /* Simple icon styles */109  .icon { width: 44px; height: 44px; fill: none; stroke: #707070; stroke-width: 4px; }110  .icon-solid { fill: #2e7cf7; stroke: none; }111  .icon-light { stroke: #9e9e9e; }112</style>113</head>114<body>115<div id="render-target">116  <div class="statusbar">117    <div>11:46</div>118    <div class="status-icons">119      <span>68°</span>120      <span class="dot"></span>121      <span class="dot"></span>122      <span class="dot"></span>123      <span class="dot"></span>124    </div>125  </div>126 127  <div class="container">128    <div class="titlebar">129      <div class="back-btn">130        <svg class="icon" viewBox="0 0 24 24">131          <path d="M15 6 L9 12 L15 18" />132        </svg>133      </div>134      <div class="title">Hotels & Homestays</div>135      <div class="new-badge">New</div>136    </div>137 138    <div class="tabs">139      <div class="tab active">UPTO 4 ROOMS</div>140      <div class="tab">GROUP DEALS</div>141      <div class="tab">HOURLY STAYS</div>142    </div>143 144    <div class="promo">145      <svg class="icon-solid" viewBox="0 0 24 24">146        <circle cx="12" cy="12" r="10"></circle>147        <path d="M8 12 L16 12" stroke="#ffffff" stroke-width="2"></path>148        <text x="9" y="9" font-size="6" fill="#ffffff">%</text>149      </svg>150      <div>Up to 20% OFF* on your first hotel booking! Use code: WELCOMEMMT</div>151    </div>152 153    <div class="input-card">154      <svg class="icon" viewBox="0 0 24 24">155        <circle cx="11" cy="11" r="7"></circle>156        <path d="M20 20 L16 16"></path>157      </svg>158      <div class="input-col">159        <div class="input-title">Hawaii</div>160        <div class="input-sub">United States</div>161      </div>162    </div>163 164    <div class="input-card">165      <svg class="icon" viewBox="0 0 24 24">166        <rect x="4" y="6" width="16" height="12" rx="2"></rect>167        <path d="M7 3 L7 6 M17 3 L17 6"></path>168      </svg>169      <div class="input-title" style="font-size:42px; font-weight:800; color:#1b1b1b;">03 Nov ’23, Fri</div>170      <div class="night-pill">1 NIGHT</div>171      <div class="divider-slash"></div>172      <div class="input-title" style="font-size:42px; font-weight:800; color:#1b1b1b;">04 Nov ’23, Sat</div>173    </div>174 175    <div class="input-card">176      <svg class="icon" viewBox="0 0 24 24">177        <path d="M12 12 a5 5 0 1 0 0.01 0"></path>178        <path d="M4 20 c2-4 14-4 16 0"></path>179      </svg>180      <div class="input-title">1 Room, 2 Adults & 0 Children</div>181    </div>182 183    <div class="search-btn">SEARCH</div>184 185    <div class="ad-strip">186      <div class="ad-card" style="flex: 1.8;">187        <div class="img-ph ad-img">[IMG: Forex Travel Ad]</div>188        <div class="ad-text">189          <div class="ad-title">Get Forex Currency & Card at Zero Markup!</div>190          <div class="ad-sub">Sponsored offer</div>191          <div class="ad-btn">GET FOREX</div>192        </div>193      </div>194      <div class="img-ph" style="width: 220px; height: 196px; border-radius: 22px; align-self: center;">[IMG: Pool & Lounge Ad]</div>195    </div>196 197    <div class="section">198      <div class="section-header">199        <div class="section-title">MMT <em>Luxe</em> Selections</div>200        <div class="learn-more">Learn More201          <svg class="icon" viewBox="0 0 24 24" style="stroke:#1a73e8;">202            <path d="M9 6 L15 12 L9 18"></path>203          </svg>204        </div>205      </div>206      <div class="section-sub">Escape to the epitome of luxury, packed with signature amenities and services</div>207 208      <div class="cards">209        <div class="hotel-card">210          <div class="img-ph hotel-img">[IMG: Heritage Palace]</div>211        </div>212        <div class="hotel-card">213          <div class="img-ph hotel-img">[IMG: Forest Chalet]</div>214        </div>215        <div class="hotel-card">216          <div class="img-ph hotel-img">[IMG: Beach Resort]</div>217        </div>218      </div>219    </div>220  </div>221 222  <div class="home-indicator"></div>223</div>224</body>225</html>