GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search UI - Mobile</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:30px;11 box-shadow: 0 6px 20px rgba(0,0,0,0.12);12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0;17 height:110px; padding:0 40px;18 display:flex; align-items:center; justify-content:space-between;19 color:#2a2a2a; font-weight:600; font-size:42px;20 }21 .status-left, .status-right { display:flex; align-items:center; gap:24px; }22 .icon-chip {23 width:48px; height:48px; border-radius:10px; background:#efefef; border:1px solid #d6d6d6;24 display:flex; align-items:center; justify-content:center;25 }26 27 /* Close button */28 .close-wrap {29 position:absolute; top:140px; left:40px;30 }31 .close-btn {32 width:96px; height:96px; border-radius:48px; background:#ffffff; border:2px solid #e5e5e5;33 display:flex; align-items:center; justify-content:center;34 box-shadow: 0 2px 12px rgba(0,0,0,0.06);35 }36 37 /* Tabs */38 .tabs {39 position:absolute; top:160px; left:200px; right:40px;40 height:110px; display:flex; align-items:flex-end; gap:40px;41 }42 .tab {43 font-size:56px; font-weight:700; color:#2a2a2a; padding-bottom:12px;44 }45 .tab.inactive { color:#6d6d6d; font-weight:600; }46 .underline {47 position:absolute; bottom:0; left:200px; width:170px; height:6px; background:#2a2a2a; border-radius:3px;48 }49 50 /* Input cards */51 .input-card {52 position:absolute; left:40px; right:40px;53 height:180px; border:1px solid #e6e6e6; border-radius:36px; background:#fff;54 display:flex; align-items:center; padding:0 40px; justify-content:space-between;55 box-shadow: 0 4px 12px rgba(0,0,0,0.04);56 color:#222;57 }58 .input-card .label { font-size:46px; color:#6d6d6d; }59 .input-card .value { font-size:50px; font-weight:600; color:#222; }60 .card-where { top:300px; }61 .card-when { top:510px; }62 63 /* Who's coming card */64 .who-card {65 position:absolute; left:40px; right:40px; top:750px;66 background:#fff; border:1px solid #e6e6e6; border-radius:36px;67 box-shadow: 0 10px 26px rgba(0,0,0,0.08);68 padding:48px 40px 40px 40px;69 }70 .who-title {71 font-size:72px; font-weight:800; color:#1f1f1f; margin-bottom:40px;72 }73 .row {74 display:flex; align-items:center; justify-content:space-between;75 padding:30px 0; border-top:1px solid #f0f0f0;76 }77 .row:first-of-type { border-top:none; }78 .row .left { display:flex; flex-direction:column; gap:10px; }79 .row .left .label { font-size:54px; font-weight:700; color:#222; }80 .row .left .sub { font-size:40px; color:#777; }81 .row .controls { display:flex; align-items:center; gap:34px; }82 .count { font-size:54px; font-weight:700; color:#222; width:60px; text-align:center; }83 .circle {84 width:100px; height:100px; border-radius:50%; border:2px solid #cfcfcf; background:#fff;85 display:flex; align-items:center; justify-content:center;86 }87 .link { font-size:40px; color:#007bff; text-decoration:underline; margin-top:10px; }88 89 /* Bottom actions */90 .bottom-actions {91 position:absolute; left:40px; right:40px; bottom:140px;92 display:flex; align-items:center; justify-content:space-between;93 }94 .clear-link {95 font-size:48px; font-weight:700; color:#2a2a2a; text-decoration:underline;96 }97 .search-btn {98 display:flex; align-items:center; gap:24px;99 background:#FF385C; color:#fff; border:none; border-radius:28px;100 height:140px; padding:0 60px; font-size:54px; font-weight:800;101 box-shadow: 0 8px 18px rgba(255,56,92,0.35);102 }103 104 /* Simple SVG icons sizing */105 svg { display:block; }106 107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status bar -->113 <div class="status-bar">114 <div class="status-left">115 <div>12:55</div>116 <div class="icon-chip">117 <!-- calendar icon -->118 <svg width="34" height="34" viewBox="0 0 24 24">119 <rect x="3" y="5" width="18" height="15" rx="2" ry="2" fill="#bbb" />120 <line x1="7" y1="3" x2="7" y2="7" stroke="#888" stroke-width="2"/>121 <line x1="17" y1="3" x2="17" y2="7" stroke="#888" stroke-width="2"/>122 </svg>123 </div>124 <div class="icon-chip">125 <!-- cloud icon -->126 <svg width="34" height="34" viewBox="0 0 24 24">127 <path d="M6 14a4 4 0 0 1 0-8c1.5 0 2.8.8 3.5 2a5 5 0 1 1 2.5 9H7.5" fill="#c6c6c6"/>128 </svg>129 </div>130 </div>131 <div class="status-right">132 <div class="icon-chip">133 <!-- wifi icon -->134 <svg width="34" height="34" viewBox="0 0 24 24">135 <path d="M3 9c5-5 13-5 18 0" stroke="#888" stroke-width="2" fill="none"/>136 <path d="M6 12c3-3 9-3 12 0" stroke="#888" stroke-width="2" fill="none"/>137 <circle cx="12" cy="16" r="2" fill="#888"/>138 </svg>139 </div>140 <div class="icon-chip">141 <!-- battery icon -->142 <svg width="34" height="34" viewBox="0 0 24 24">143 <rect x="3" y="7" width="16" height="10" rx="2" ry="2" stroke="#777" stroke-width="2" fill="none"/>144 <rect x="5" y="9" width="12" height="6" fill="#9c9c9c"/>145 <rect x="20" y="10" width="2" height="4" fill="#777"/>146 </svg>147 </div>148 </div>149 </div>150 151 <!-- close button -->152 <div class="close-wrap">153 <div class="close-btn">154 <svg width="52" height="52" viewBox="0 0 24 24">155 <path d="M5 5l14 14M19 5L5 19" stroke="#444" stroke-width="2" stroke-linecap="round"/>156 </svg>157 </div>158 </div>159 160 <!-- Tabs -->161 <div class="tabs">162 <div class="tab">Stays</div>163 <div class="tab inactive">Experiences</div>164 <div class="underline"></div>165 </div>166 167 <!-- Input cards -->168 <div class="input-card card-where">169 <div class="label">Where</div>170 <div class="value">Newark</div>171 </div>172 173 <div class="input-card card-when">174 <div class="label">When</div>175 <div class="value">Jul 1 – 7</div>176 </div>177 178 <!-- Who's coming? card -->179 <div class="who-card">180 <div class="who-title">Who's coming?</div>181 182 <!-- Adults -->183 <div class="row">184 <div class="left">185 <div class="label">Adults</div>186 <div class="sub">Ages 13 or above</div>187 </div>188 <div class="controls">189 <div class="circle">190 <!-- minus icon -->191 <svg width="40" height="40" viewBox="0 0 24 24">192 <line x1="5" y1="12" x2="19" y2="12" stroke="#888" stroke-width="2" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="count">0</div>196 <div class="circle">197 <!-- plus icon -->198 <svg width="40" height="40" viewBox="0 0 24 24">199 <line x1="12" y1="5" x2="12" y2="19" stroke="#666" stroke-width="2" stroke-linecap="round"/>200 <line x1="5" y1="12" x2="19" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round"/>201 </svg>202 </div>203 </div>204 </div>205 206 <!-- Children -->207 <div class="row">208 <div class="left">209 <div class="label">Children</div>210 <div class="sub">Ages 2–12</div>211 </div>212 <div class="controls">213 <div class="circle">214 <svg width="40" height="40" viewBox="0 0 24 24">215 <line x1="5" y1="12" x2="19" y2="12" stroke="#888" stroke-width="2" stroke-linecap="round"/>216 </svg>217 </div>218 <div class="count">0</div>219 <div class="circle">220 <svg width="40" height="40" viewBox="0 0 24 24">221 <line x1="12" y1="5" x2="12" y2="19" stroke="#666" stroke-width="2" stroke-linecap="round"/>222 <line x1="5" y1="12" x2="19" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round"/>223 </svg>224 </div>225 </div>226 </div>227 228 <!-- Infants -->229 <div class="row">230 <div class="left">231 <div class="label">Infants</div>232 <div class="sub">Under 2</div>233 </div>234 <div class="controls">235 <div class="circle">236 <svg width="40" height="40" viewBox="0 0 24 24">237 <line x1="5" y1="12" x2="19" y2="12" stroke="#888" stroke-width="2" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="count">0</div>241 <div class="circle">242 <svg width="40" height="40" viewBox="0 0 24 24">243 <line x1="12" y1="5" x2="12" y2="19" stroke="#666" stroke-width="2" stroke-linecap="round"/>244 <line x1="5" y1="12" x2="19" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round"/>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Pets -->251 <div class="row">252 <div class="left">253 <div class="label">Pets</div>254 <div class="link">Bringing a service animal?</div>255 </div>256 <div class="controls">257 <div class="circle">258 <svg width="40" height="40" viewBox="0 0 24 24">259 <line x1="5" y1="12" x2="19" y2="12" stroke="#888" stroke-width="2" stroke-linecap="round"/>260 </svg>261 </div>262 <div class="count">0</div>263 <div class="circle">264 <svg width="40" height="40" viewBox="0 0 24 24">265 <line x1="12" y1="5" x2="12" y2="19" stroke="#666" stroke-width="2" stroke-linecap="round"/>266 <line x1="5" y1="12" x2="19" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round"/>267 </svg>268 </div>269 </div>270 </div>271 </div>272 273 <!-- Bottom actions -->274 <div class="bottom-actions">275 <div class="clear-link">Clear all</div>276 <button class="search-btn">277 <svg width="54" height="54" viewBox="0 0 24 24">278 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>279 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#fff" stroke-width="2" stroke-linecap="round"/>280 </svg>281 <span>Search</span>282 </button>283 </div>284 285</div>286</body>287</html>