GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11  }12  #render-target {13    position: relative;14    overflow: hidden;15    width: 1080px;16    height: 2400px;17    background: #121212;18    color: #fff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    color: #eaeaea;29    font-size: 34px;30    padding: 0 40px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 18px;40    font-size: 30px;41  }42  .battery {43    width: 42px;44    height: 22px;45    border: 3px solid #eaeaea;46    border-radius: 5px;47    position: relative;48    margin-right: 6px;49  }50  .battery:after {51    content: "";52    position: absolute;53    right: -10px;54    top: 5px;55    width: 6px;56    height: 12px;57    background: #eaeaea;58    border-radius: 2px;59  }60  .battery .fill {61    position: absolute;62    left: 3px;63    top: 3px;64    height: 14px;65    width: 26px;66    background: #eaeaea;67    border-radius: 2px;68  }69 70  /* Header */71  .header {72    position: absolute;73    top: 110px;74    left: 0;75    width: 1080px;76    padding: 20px 30px 0 30px;77  }78  .header-row {79    display: flex;80    align-items: center;81    gap: 24px;82    padding: 20px 10px;83  }84  .back-btn {85    width: 72px;86    height: 72px;87    border-radius: 20px;88    display: flex;89    align-items: center;90    justify-content: center;91  }92  .title {93    font-weight: 700;94    font-size: 60px;95  }96 97  /* Search bar */98  .search-card {99    margin-top: 30px;100    background: #1e1e1e;101    border-radius: 24px;102    border: 1px solid #2a2a2a;103    padding: 26px 28px;104  }105  .search-input {106    display: flex;107    align-items: center;108    background: #262626;109    border-radius: 20px;110    padding: 28px;111    border: 1px solid #333;112  }113  .search-input .text {114    flex: 1;115    color: #fff;116    font-size: 44px;117  }118  .icon-btn {119    width: 76px;120    height: 76px;121    border-radius: 50%;122    background: #2e2e2e;123    border: 1px solid #3a3a3a;124    display: flex;125    align-items: center;126    justify-content: center;127    margin-left: 16px;128  }129  .sections {130    display: flex;131    margin-top: 36px;132    gap: 30px;133  }134  .section {135    flex: 1;136    padding: 18px 8px 8px 8px;137  }138  .section-title {139    font-size: 44px;140    font-weight: 700;141    margin-bottom: 18px;142  }143  .section-value {144    font-size: 40px;145    color: #cfcfcf;146  }147  .divider {148    width: 2px;149    background: #3a3a3a;150    border-radius: 2px;151  }152 153  /* Search button */154  .search-button {155    margin-top: 40px;156    width: 100%;157    height: 120px;158    background: #d85a90;159    border: none;160    border-radius: 22px;161    color: #fff;162    font-size: 46px;163    font-weight: 700;164    letter-spacing: 0.5px;165  }166 167  /* Large empty dark area below to match screenshot spacing */168  .spacer {169    height: 1700px;170  }171 172  /* SVG icon styling */173  svg {174    display: block;175    fill: none;176    stroke: #fff;177    stroke-width: 6;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div>3:42</div>187    <div class="status-right">188      <div style="width:24px;height:24px;border-radius:50%;border:3px solid #eaeaea;"></div>189      <div class="battery"><div class="fill"></div></div>190      <div style="font-size:32px;color:#eaeaea;">98%</div>191    </div>192  </div>193 194  <!-- Header and content -->195  <div class="header">196    <div class="header-row">197      <div class="back-btn">198        <svg width="44" height="44" viewBox="0 0 24 24">199          <path d="M15 18l-6-6 6-6"/>200        </svg>201      </div>202      <div class="title">Search</div>203    </div>204 205    <div class="search-card">206      <div class="search-input">207        <div style="width:56px;height:56px;margin-right:22px;">208          <svg width="56" height="56" viewBox="0 0 24 24">209            <circle cx="10" cy="10" r="7"></circle>210            <path d="M15 15l6 6"></path>211          </svg>212        </div>213        <div class="text">Florianópolis</div>214        <div class="icon-btn" aria-label="clear">215          <svg width="36" height="36" viewBox="0 0 24 24">216            <path d="M5 5l14 14M19 5L5 19"></path>217          </svg>218        </div>219        <div class="icon-btn" aria-label="target">220          <svg width="36" height="36" viewBox="0 0 24 24">221            <circle cx="12" cy="12" r="9"></circle>222            <circle cx="12" cy="12" r="3"></circle>223          </svg>224        </div>225      </div>226 227      <div class="sections">228        <div class="section">229          <div class="section-title">Enter your dates</div>230          <div class="section-value">01, Nov - 04, Nov</div>231        </div>232        <div class="divider"></div>233        <div class="section">234          <div class="section-title">Number of rooms</div>235          <div class="section-value">1 Room 1 person</div>236        </div>237      </div>238 239      <button class="search-button">Search</button>240    </div>241 242    <div class="spacer"></div>243  </div>244 245</div>246</body>247</html>