GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #E5EBF2;14 border-radius: 0;15 box-shadow: none;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #2f3a45;26 font-size: 34px;27 }28 .status-left { display: flex; align-items: center; gap: 22px; }29 .status-right { display: flex; align-items: center; gap: 26px; }30 .icon-dot {31 width: 14px; height: 14px; background:#2f3a45; border-radius:50%;32 opacity: 0.7;33 }34 .battery {35 display: flex; align-items: center; gap: 10px; font-weight: 600;36 }37 .battery svg { width: 52px; height: 28px; }38 39 /* Top search area */40 .top-search {41 padding: 18px 28px 0 28px;42 }43 .search-row {44 display: flex;45 align-items: center;46 gap: 24px;47 }48 .back-btn {49 width: 80px; height: 80px; border-radius: 40px;50 display: flex; align-items: center; justify-content: center;51 background: #EFF3F7; border: 1px solid #D0D7DF;52 }53 .search-input {54 flex: 1;55 height: 100px;56 border-radius: 20px;57 border: 2px solid #3779E6;58 background: #FFFFFF;59 display: flex;60 align-items: center;61 padding: 0 28px;62 color: #5A6775;63 font-size: 40px;64 font-weight: 600;65 }66 67 .divider-soft {68 margin-top: 22px;69 height: 18px;70 background: #D7DEE6;71 border-top: 1px solid #CBD3DC;72 border-bottom: 1px solid #CBD3DC;73 }74 75 /* Suggestions cards */76 .suggestion-list { padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; }77 .suggestion-card {78 background: #FFFFFF;79 border-radius: 22px;80 box-shadow: 0 2px 0 rgba(0,0,0,0.05);81 border: 1px solid #E0E6ED;82 padding: 26px;83 display: flex;84 align-items: center;85 gap: 24px;86 }87 .suggestion-icon {88 width: 72px; height: 72px; border-radius: 20px;89 background: #EAF3FF; border: 1px solid #D2E4FF;90 display: flex; align-items: center; justify-content: center;91 }92 .suggestion-text { display: flex; flex-direction: column; }93 .suggestion-title {94 font-size: 40px; font-weight: 700; color: #1F2A35;95 }96 .suggestion-sub {97 font-size: 34px; color: #7A8696; margin-top: 6px;98 }99 100 /* Recent searches */101 .recent-header {102 padding: 18px 32px;103 font-size: 48px;104 font-weight: 800;105 color: #133B66;106 }107 .recent-cards {108 padding: 8px 32px;109 }110 .recent-card {111 width: 540px;112 background: #FFFFFF;113 border: 2px solid #D2D7DE;114 border-radius: 16px;115 box-shadow: 0 2px 0 rgba(0,0,0,0.06);116 padding: 24px;117 }118 .recent-title { font-size: 42px; font-weight: 800; color: #151D27; }119 .recent-dates { font-size: 34px; color: #7A8696; margin-top: 8px; }120 121 /* Keyboard mock */122 .keyboard {123 position: absolute;124 bottom: 0;125 left: 0;126 width: 1080px;127 height: 980px;128 background: #0F171A;129 border-top-left-radius: 24px;130 border-top-right-radius: 24px;131 box-shadow: 0 -4px 12px rgba(0,0,0,0.25);132 padding: 26px 26px 70px;133 color: #EAF0F6;134 }135 .kb-utils {136 display: flex; align-items: center; justify-content: space-between;137 padding: 0 10px; margin-bottom: 16px;138 }139 .kb-util {140 width: 90px; height: 90px; border-radius: 20px;141 background: #1A2328; display: flex; align-items: center; justify-content: center;142 color: #DDE3EA; font-weight: 700; font-size: 30px; border: 1px solid #263138;143 }144 145 .kb-rows { display: flex; flex-direction: column; gap: 22px; }146 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }147 .key {148 background: #1B2328; border: 1px solid #263138; color: #F4F7FA;149 border-radius: 18px; height: 120px;150 display: flex; align-items: center; justify-content: center;151 font-size: 44px; font-weight: 600;152 }153 154 .kb-row.short { grid-template-columns: repeat(9, 1fr); }155 .kb-row.bottom {156 display: grid; grid-template-columns: 150px 110px 110px 1fr 110px 150px 150px;157 gap: 14px;158 align-items: center;159 }160 .key.small { height: 110px; font-size: 36px; }161 162 .key.circle {163 border-radius: 999px; background: #72E0B6; border: none; color: #0F171A;164 font-weight: 800;165 }166 .key.darkcircle {167 border-radius: 999px; background: #1B2328;168 height: 110px; width: 110px;169 display: flex; align-items: center; justify-content: center;170 }171 .space {172 background: #1B2328; border: 1px solid #263138; height: 110px; border-radius: 16px;173 }174 .gesture-pill {175 position: absolute;176 bottom: 20px; left: 50%; transform: translateX(-50%);177 width: 320px; height: 12px; background: #EDEFF2; border-radius: 10px; opacity: 0.9;178 }179 180 /* Helper for inline icon buttons */181 .svg-icon { width: 40px; height: 40px; }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Status Bar -->188 <div class="status-bar">189 <div class="status-left">190 <div>12:47</div>191 <div class="icon-dot"></div>192 <div class="icon-dot"></div>193 <div class="icon-dot"></div>194 </div>195 <div class="status-right">196 <div class="icon-dot" style="width:18px;height:18px;"></div>197 <div class="battery">198 <svg viewBox="0 0 50 26">199 <rect x="1" y="3" width="44" height="20" rx="4" fill="none" stroke="#2f3a45" stroke-width="3"/>200 <rect x="46" y="9" width="3" height="8" rx="1" fill="#2f3a45"/>201 <rect x="4" y="6" width="36" height="14" rx="3" fill="#2f3a45"/>202 </svg>203 <span>100%</span>204 </div>205 </div>206 </div>207 208 <!-- Search Bar -->209 <div class="top-search">210 <div class="search-row">211 <div class="back-btn">212 <svg class="svg-icon" viewBox="0 0 24 24">213 <path d="M15 19L8 12l7-7" fill="none" stroke="#304456" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>214 </svg>215 </div>216 <div class="search-input">Where do you want to go?</div>217 </div>218 </div>219 220 <div class="divider-soft"></div>221 222 <!-- Suggestions -->223 <div class="suggestion-list">224 <div class="suggestion-card">225 <div class="suggestion-icon">226 <svg viewBox="0 0 32 32" width="44" height="44">227 <rect x="6" y="12" width="10" height="10" fill="#3779E6"/>228 <rect x="18" y="8" width="8" height="14" fill="#3779E6"/>229 <circle cx="9" cy="9" r="3" fill="#3779E6"/>230 </svg>231 </div>232 <div class="suggestion-text">233 <div class="suggestion-title">Getaway deals near you</div>234 <div class="suggestion-sub">Amazing deals within drivable distance</div>235 </div>236 </div>237 238 <div class="suggestion-card">239 <div class="suggestion-icon">240 <svg viewBox="0 0 32 32" width="44" height="44">241 <circle cx="16" cy="16" r="10" fill="none" stroke="#3779E6" stroke-width="3"/>242 <circle cx="16" cy="16" r="3" fill="#3779E6"/>243 </svg>244 </div>245 <div class="suggestion-text">246 <div class="suggestion-title">All Properties near you</div>247 <div class="suggestion-sub">Use your current location</div>248 </div>249 </div>250 </div>251 252 <!-- Recent Searches -->253 <div class="recent-header">Recent Searches</div>254 <div class="recent-cards">255 <div class="recent-card">256 <div class="recent-title">Berlin, Germany</div>257 <div class="recent-dates">20 Dec - 24 Dec</div>258 </div>259 </div>260 261 <!-- Keyboard -->262 <div class="keyboard">263 <div class="kb-utils">264 <div class="kb-util">☰</div>265 <div class="kb-util">🙂</div>266 <div class="kb-util">GIF</div>267 <div class="kb-util">⚙</div>268 <div class="kb-util">Gᵗʳ</div>269 <div class="kb-util">🎨</div>270 </div>271 272 <div class="kb-rows">273 <div class="kb-row">274 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>275 </div>276 <div class="kb-row">277 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⟵</div>278 </div>279 <div class="kb-row short">280 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">⌫</div><div class="key">.</div>281 </div>282 <div class="kb-row bottom">283 <div class="key circle">?123</div>284 <div class="key small">,</div>285 <div class="key small">🙂</div>286 <div class="space"></div>287 <div class="key small">.</div>288 <div class="key small">⌫</div>289 <div class="key circle">290 <svg viewBox="0 0 24 24" width="48" height="48">291 <circle cx="10" cy="10" r="8" fill="none" stroke="#0F171A" stroke-width="3"/>292 <line x1="16" y1="16" x2="22" y2="22" stroke="#0F171A" stroke-width="3" stroke-linecap="round"/>293 </svg>294 </div>295 </div>296 </div>297 298 <div class="gesture-pill"></div>299 </div>300 301</div>302</body>303</html>