GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 24px;20    left: 36px;21    right: 36px;22    height: 72px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #2b2b2b;27    font-weight: 600;28    font-size: 38px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .icon {36    width: 46px;37    height: 46px;38  }39 40  /* Close button */41  .close-btn {42    position: absolute;43    top: 120px;44    left: 36px;45    width: 96px;46    height: 96px;47    border-radius: 50%;48    border: 2px solid #e2e2e2;49    background: #fafafa;50    display: flex;51    align-items: center;52    justify-content: center;53    box-shadow: 0 2px 8px rgba(0,0,0,0.06);54  }55 56  /* Tabs */57  .tabs {58    position: absolute;59    top: 140px;60    left: 180px;61    right: 36px;62    display: flex;63    gap: 56px;64    align-items: center;65    font-size: 54px;66  }67  .tab {68    color: #666;69    font-weight: 600;70    padding-bottom: 12px;71  }72  .tab.active {73    color: #111;74    border-bottom: 8px solid #111;75  }76 77  /* Main card */78  .card {79    position: absolute;80    top: 260px;81    left: 36px;82    width: 1008px;83    background: #ffffff;84    border-radius: 48px;85    box-shadow: 0 10px 40px rgba(0,0,0,0.08);86    padding: 54px 48px 60px;87  }88  .card h1 {89    margin: 0 0 36px;90    font-size: 84px;91    font-weight: 800;92    letter-spacing: -0.5px;93  }94 95  /* Search bar */96  .search-bar {97    display: flex;98    align-items: center;99    border: 2px solid #ddd;100    border-radius: 36px;101    padding: 26px 30px;102    font-size: 48px;103    color: #666;104    margin-bottom: 40px;105  }106  .search-bar svg { width: 52px; height: 52px; margin-right: 24px; }107 108  /* Destination tiles */109  .tiles {110    display: flex;111    gap: 36px;112    margin-bottom: 40px;113    overflow: hidden;114  }115  .tile {116    width: 300px;117    background: #f8f8f8;118    border-radius: 36px;119    padding: 24px;120    box-shadow: inset 0 0 0 2px #eee;121  }122  .tile.selected { box-shadow: inset 0 0 0 6px #222; }123  .tile-img {124    width: 252px;125    height: 252px;126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    border-radius: 24px;129    display: flex;130    align-items: center;131    justify-content: center;132    color: #757575;133    font-size: 40px;134    text-align: center;135  }136  .tile-label {137    margin-top: 26px;138    font-size: 44px;139    font-weight: 700;140    color: #111;141  }142 143  /* Selector rows */144  .row {145    margin-top: 24px;146    background: #ffffff;147    border-radius: 36px;148    box-shadow: 0 10px 30px rgba(0,0,0,0.06);149    padding: 40px 48px;150    display: flex;151    align-items: center;152    justify-content: space-between;153    font-size: 54px;154  }155  .row .label { color: #333; font-weight: 700; }156  .row .value { color: #444; }157 158  /* Bottom actions */159  .bottom-actions {160    position: absolute;161    left: 36px;162    right: 36px;163    bottom: 180px;164    display: flex;165    align-items: center;166    justify-content: space-between;167  }168  .clear-link {169    color: #333;170    font-size: 54px;171    text-decoration: underline;172    font-weight: 700;173  }174  .search-btn {175    background: #ff385c;176    color: #fff;177    height: 144px;178    padding: 0 80px;179    border-radius: 36px;180    display: flex;181    align-items: center;182    gap: 28px;183    font-size: 58px;184    font-weight: 800;185    box-shadow: 0 8px 28px rgba(255,56,92,0.4);186  }187  .search-btn svg { width: 64px; height: 64px; }188 189  /* Home indicator */190  .home-indicator {191    position: absolute;192    bottom: 60px;193    left: 50%;194    transform: translateX(-50%);195    width: 520px;196    height: 16px;197    border-radius: 12px;198    background: #cfcfcf;199  }200</style>201</head>202<body>203<div id="render-target">204  <!-- Status Bar -->205  <div class="status-bar">206    <div class="time">12:46</div>207    <div class="status-icons">208      <!-- Calendar -->209      <svg class="icon" viewBox="0 0 24 24">210        <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#444" stroke-width="2"/>211        <line x1="3" y1="9" x2="21" y2="9" stroke="#444" stroke-width="2"/>212        <line x1="8" y1="2" x2="8" y2="6" stroke="#444" stroke-width="2"/>213        <line x1="16" y1="2" x2="16" y2="6" stroke="#444" stroke-width="2"/>214      </svg>215      <!-- Cloud -->216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M7 18h9a4 4 0 0 0 0-8 5 5 0 0 0-9.8 1.5A3.5 3.5 0 0 0 7 18z" fill="none" stroke="#444" stroke-width="2"/>218      </svg>219      <!-- WiFi -->220      <svg class="icon" viewBox="0 0 24 24">221        <path d="M2 9c5-4 15-4 20 0" fill="none" stroke="#444" stroke-width="2"/>222        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#444" stroke-width="2"/>223        <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#444" stroke-width="2"/>224        <circle cx="12" cy="18" r="1.6" fill="#444"/>225      </svg>226      <!-- Battery -->227      <svg class="icon" viewBox="0 0 24 24">228        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#444" stroke-width="2"/>229        <rect x="4" y="8" width="12" height="8" fill="#444"/>230        <rect x="20" y="10" width="2" height="6" fill="#444"/>231      </svg>232    </div>233  </div>234 235  <!-- Close Button -->236  <div class="close-btn">237    <svg viewBox="0 0 24 24" width="56" height="56">238      <line x1="5" y1="5" x2="19" y2="19" stroke="#333" stroke-width="2"/>239      <line x1="19" y1="5" x2="5" y2="19" stroke="#333" stroke-width="2"/>240    </svg>241  </div>242 243  <!-- Tabs -->244  <div class="tabs">245    <div class="tab active">Stays</div>246    <div class="tab">Experiences</div>247  </div>248 249  <!-- Main Card -->250  <div class="card">251    <h1>Where to?</h1>252    <div class="search-bar">253      <svg viewBox="0 0 24 24">254        <circle cx="11" cy="11" r="7" fill="none" stroke="#666" stroke-width="2"/>255        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#666" stroke-width="2"/>256      </svg>257      <div>Search destinations</div>258    </div>259 260    <!-- Tiles -->261    <div class="tiles">262      <div class="tile selected">263        <div class="tile-img">[IMG: World map]</div>264        <div class="tile-label">I'm flexible</div>265      </div>266      <div class="tile">267        <div class="tile-img">[IMG: Europe map]</div>268        <div class="tile-label">Europe</div>269      </div>270      <div class="tile">271        <div class="tile-img">[IMG: United Kingdom map]</div>272        <div class="tile-label">United Kingdom</div>273      </div>274    </div>275  </div>276 277  <!-- Selector Rows -->278  <div style="position:absolute; left:36px; right:36px; top:1280px;">279    <div class="row">280      <div class="label">When</div>281      <div class="value">Any week</div>282    </div>283    <div class="row" style="margin-top:36px;">284      <div class="label">Who</div>285      <div class="value">Add guests</div>286    </div>287  </div>288 289  <!-- Bottom actions -->290  <div class="bottom-actions">291    <div class="clear-link">Clear all</div>292    <div class="search-btn">293      <svg viewBox="0 0 24 24">294        <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"/>295        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#fff" stroke-width="2"/>296      </svg>297      <span>Search</span>298    </div>299  </div>300 301  <!-- Home indicator -->302  <div class="home-indicator"></div>303</div>304</body>305</html>