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>Hotels Search UI Mock</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 (mobile screen) */10  #render-target {11    width:1080px;12    height:2400px;13    position:relative;14    overflow:hidden;15    background:#0c1a23; /* dark navy */16    color:#e6edf2;17  }18 19  /* Status bar */20  .statusbar {21    height:100px;22    padding:0 32px;23    display:flex;24    align-items:center;25    justify-content:space-between;26    color:#ffffff;27    background:#0f1b24;28    box-sizing:border-box;29  }30  .statusbar .time { font-weight:700; font-size:40px; opacity:0.95; }31  .statusbar .icons { display:flex; align-items:center; gap:24px; }32  .statusbar .dot {33    width:18px; height:18px; background:#e0e0e0; border-radius:50%; opacity:0.8;34  }35  .statusbar .pill {36    width:36px; height:18px; background:#e0e0e0; border-radius:9px; opacity:0.85;37  }38 39  /* Header with tabs */40  .header {41    height:110px;42    display:flex;43    align-items:center;44    padding:0 20px 0 8px;45    box-sizing:border-box;46  }47  .back-btn {48    width:92px; height:92px; display:flex; align-items:center; justify-content:center;49  }50  .tabs { flex:1; display:flex; justify-content:center; gap:140px; }51  .tab {52    font-size:38px; letter-spacing:2px; color:#8fa1ad; font-weight:700;53    position:relative; text-transform:uppercase;54  }55  .tab.active { color:#25c4b8; }56  .tab.active:after {57    content:""; position:absolute; left:0; right:0; bottom:-18px; height:6px;58    background:#25c4b8; border-radius:3px;59  }60 61  /* Content area */62  .content { padding:22px; box-sizing:border-box; }63 64  .search-row { display:flex; gap:16px; margin-top:12px; }65  .chip {66    background:#22364a; color:#f1f6f9; border-radius:16px;67    box-sizing:border-box;68    display:flex; align-items:center; justify-content:center; gap:16px;69  }70  .chip.large {71    flex:1; padding:28px; font-size:42px; font-weight:800;72  }73  .chip.small {74    width:170px; padding:18px; font-size:26px; font-weight:700; flex-direction:column;75  }76  .chip.small .sub { font-size:24px; opacity:0.8; margin-top:-6px; }77  .chip svg { width:36px; height:36px; fill:#cfe3ea; opacity:0.95; }78 79  .section-title {80    margin:22px 6px 12px;81    font-size:34px;82    color:#c4d0d7;83  }84 85  .img-placeholder {86    width:100%;87    height:240px;88    background:#E0E0E0;89    border:2px solid #BDBDBD;90    border-radius:20px;91    color:#757575;92    display:flex;93    align-items:center;94    justify-content:center;95    font-size:34px;96    box-sizing:border-box;97  }98 99  .note {100    margin:18px 6px 6px; font-size:32px; color:#c1ccd4;101  }102 103  .card {104    margin:20px 6px 0;105    background:#3a3f45;106    border-radius:28px;107    height:460px;108    position:relative;109    overflow:hidden;110  }111  .card .dots {112    position:absolute; top:22px; left:50%; transform:translateX(-50%);113    display:flex; gap:18px;114  }115  .card .dots span{116    width:18px; height:18px; background:#b0b7bd; border-radius:50%; opacity:0.6;117  }118  .card .dots span:first-child{ opacity:1; }119 120  .card .footer {121    position:absolute; left:20px; right:20px; bottom:18px;122    background:#4a4f55; border-radius:24px; padding:28px; box-sizing:border-box;123  }124  .line { height:26px; background:#3b3f44; border-radius:12px; margin:16px 0; }125  .line.w60 { width:60%; }126  .line.w35 { width:35%; height:22px; }127  .cta { height:32px; background:#3b3f44; border-radius:16px; width:80%; margin:16px auto 0; }128 129  /* Bottom gesture bar */130  .home-indicator {131    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);132    width:360px; height:10px; background:#cfcfcf; border-radius:6px; opacity:0.9;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status bar mock -->139  <div class="statusbar">140    <div class="time">1:45</div>141    <div class="icons">142      <span class="dot"></span>143      <span class="dot"></span>144      <span class="dot"></span>145      <span class="pill"></span>146    </div>147  </div>148 149  <!-- Header with back and tabs -->150  <div class="header">151    <div class="back-btn">152      <svg viewBox="0 0 24 24">153        <path d="M15 5L8 12l7 7" stroke="#d9e7ee" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>154      </svg>155    </div>156    <div class="tabs">157      <div class="tab">Flights</div>158      <div class="tab active">Hotels</div>159    </div>160  </div>161 162  <!-- Main content -->163  <div class="content">164    <div class="search-row">165      <div class="chip large">London City (LCY)</div>166 167      <div class="chip small">168        <div style="display:flex; align-items:center; gap:10px;">169          <svg viewBox="0 0 24 24">170            <rect x="3" y="5" width="18" height="16" rx="2"></rect>171            <rect x="7" y="2" width="3" height="4"></rect>172            <rect x="14" y="2" width="3" height="4"></rect>173            <rect x="7" y="11" width="3" height="3"></rect>174            <rect x="12" y="11" width="3" height="3"></rect>175          </svg>176          <span>Dec 6</span>177        </div>178        <div class="sub">Dec 8</div>179      </div>180 181      <div class="chip small" style="gap:8px;">182        <div style="display:flex; align-items:center; gap:8px;">183          <svg viewBox="0 0 24 24">184            <circle cx="12" cy="8" r="4"></circle>185            <path d="M4 20c0-4.5 4-6 8-6s8 1.5 8 6" fill="#cfe3ea"></path>186          </svg>187          <span style="font-size:34px;">2</span>188        </div>189      </div>190    </div>191 192    <div class="section-title">Searching ...</div>193 194    <div class="img-placeholder">[IMG: Map illustration]</div>195 196    <div class="note">Taxes and fees not included</div>197 198    <!-- Skeleton card 1 -->199    <div class="card">200      <div class="dots"><span></span><span></span><span></span></div>201      <div class="footer">202        <div class="line"></div>203        <div class="line w60"></div>204        <div class="line w35"></div>205        <div class="cta"></div>206      </div>207    </div>208 209    <!-- Skeleton card 2 -->210    <div class="card" style="height:540px;">211      <div class="dots"><span></span><span></span><span></span><span></span></div>212      <div class="footer">213        <div class="line"></div>214        <div class="line w60"></div>215        <div class="line w35"></div>216        <div class="cta"></div>217      </div>218    </div>219  </div>220 221  <div class="home-indicator"></div>222</div>223</body>224</html>