GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; color:#212121;11 }12 /* Status bar */13 .status-bar { height:92px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }14 .status-left { display:flex; align-items:center; gap:16px; }15 .time { font-size:36px; font-weight:600; color:#333; }16 .notif-dots { display:flex; gap:10px; margin-left:12px; }17 .notif-dots span { width:16px; height:16px; background:#60646b; border-radius:50%; display:inline-block; }18 .status-right { display:flex; align-items:center; gap:18px; }19 .status-icon { width:28px; height:28px; }20 /* Search field */21 .search-wrap { padding:14px 24px 0 24px; }22 .search-box {23 height:112px; border:1px solid #E0E0E0; border-radius:56px; background:#F7F7F7;24 display:flex; align-items:center; padding:0 28px; gap:24px;25 }26 .search-input { flex:1; font-size:38px; color:#757575; }27 .search-icon, .mic-icon { width:44px; height:44px; }28 /* Chips row */29 .chips { display:flex; align-items:center; gap:26px; padding:18px 24px; }30 .chip {31 display:flex; align-items:center; gap:18px; padding-right:26px;32 }33 .chip .icon {34 width:64px; height:64px; border-radius:32px; background:#F0F1F3; display:flex; align-items:center; justify-content:center; border:1px solid #E0E0E0;35 }36 .chip .texts { line-height:1.15; }37 .chip .title { font-size:34px; font-weight:600; }38 .chip .sub { font-size:28px; color:#757575; }39 .divider-v { width:1px; height:64px; background:#E0E0E0; }40 .more-pill { width:64px; height:64px; border-radius:32px; background:#F0F1F3; border:1px solid #E0E0E0; display:flex; align-items:center; justify-content:center; }41 /* Section title */42 .section-title { font-size:30px; color:#757575; padding:18px 24px; }43 /* List */44 .list { padding:0 0 0 0; }45 .list-item { padding:20px 24px; display:flex; align-items:flex-start; gap:24px; }46 .list-item + .list-item { border-top:1px solid #E6E6E6; }47 .list-icon {48 width:64px; height:64px; border-radius:32px; background:#F0F1F3; border:1px solid #E0E0E0; display:flex; align-items:center; justify-content:center;49 }50 .item-texts { flex:1; }51 .item-title { font-size:38px; font-weight:600; }52 .item-sub { font-size:30px; color:#757575; margin-top:6px; }53 .info-icon { width:40px; height:40px; border-radius:20px; border:1px solid #D0D0D0; display:flex; align-items:center; justify-content:center; color:#757575; margin-top:12px; }54 /* Keyboard overlay */55 .keyboard {56 position:absolute; left:0; bottom:72px; width:100%; height:950px; background:#111316;57 color:#fff; border-top-left-radius:22px; border-top-right-radius:22px;58 box-shadow:0 -4px 16px rgba(0,0,0,0.2);59 }60 .kbd-top { height:92px; display:flex; align-items:center; gap:42px; padding:0 40px; color:#DADADA; }61 .kbd-top .top-icon { width:52px; height:52px; border-radius:26px; background:#1F2226; display:flex; align-items:center; justify-content:center; border:1px solid #2a2d31; }62 .kbd-top .label { font-size:32px; color:#DADADA; }63 .keys { padding:10px 24px; }64 .row { display:flex; justify-content:center; gap:18px; margin-top:18px; }65 .key {66 width:88px; height:112px; background:#1F2226; border-radius:18px; border:1px solid #2a2d31;67 display:flex; align-items:center; justify-content:center; font-size:42px; color:#FFFFFF;68 }69 .key-wide { width:160px; }70 .space { flex:1; height:112px; background:#1F2226; border-radius:18px; border:1px solid #2a2d31; display:flex; align-items:center; justify-content:center; font-size:34px; color:#9AA0A6; }71 .enter { width:140px; background:#C6DAF8; color:#0F1B2D; }72 .key-light { background:#D9E8FF; color:#1a2b44; }73 .home-indicator {74 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);75 width:360px; height:12px; background:#DADADA; border-radius:10px;76 }77 /* SVG colors */78 .icon-gray path, .icon-gray circle, .icon-gray rect { fill:#6E6E6E; stroke:#6E6E6E; }79 .icon-blue path { fill:#3B82F6; }80</style>81</head>82<body>83<div id="render-target">84 <!-- Status Bar -->85 <div class="status-bar">86 <div class="status-left">87 <span class="time">6:14</span>88 <div class="notif-dots">89 <span></span><span></span><span></span><span></span>90 </div>91 <span style="font-size:28px; color:#757575;">•</span>92 </div>93 <div class="status-right">94 <!-- Simple Wi-Fi -->95 <svg class="status-icon" viewBox="0 0 24 24">96 <path d="M12 19a2 2 0 1 0 0.001 0z" fill="#444"/>97 <path d="M2 9c5-4.5 15-4.5 20 0" stroke="#444" stroke-width="2" fill="none"/>98 <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#444" stroke-width="2" fill="none"/>99 <path d="M8 15c2-1.5 6-1.5 8 0" stroke="#444" stroke-width="2" fill="none"/>100 </svg>101 <!-- Signal -->102 <svg class="status-icon" viewBox="0 0 24 24">103 <rect x="3" y="14" width="3" height="7" fill="#444"/>104 <rect x="8" y="11" width="3" height="10" fill="#444"/>105 <rect x="13" y="8" width="3" height="13" fill="#444"/>106 <rect x="18" y="5" width="3" height="16" fill="#444"/>107 </svg>108 <!-- Battery -->109 <svg class="status-icon" viewBox="0 0 26 24">110 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#444"/>111 <rect x="21" y="9" width="3" height="6" fill="#444"/>112 </svg>113 </div>114 </div>115 116 <!-- Search -->117 <div class="search-wrap">118 <div class="search-box">119 <svg class="search-icon" viewBox="0 0 24 24">120 <circle cx="11" cy="11" r="7" stroke="#616161" stroke-width="2" fill="none"></circle>121 <path d="M16.5 16.5 L22 22" stroke="#616161" stroke-width="2"></path>122 </svg>123 <div class="search-input">Search here</div>124 <svg class="mic-icon" viewBox="0 0 24 24">125 <rect x="9" y="4" width="6" height="10" rx="3" fill="#616161"></rect>126 <path d="M6 11c0 3.3 2.5 5 6 5s6-1.7 6-5" stroke="#616161" stroke-width="2" fill="none"></path>127 <path d="M12 16v4" stroke="#616161" stroke-width="2"></path>128 <circle cx="12" cy="21" r="1.5" fill="#616161"></circle>129 </svg>130 </div>131 </div>132 133 <!-- Chips Row -->134 <div class="chips">135 <div class="chip">136 <div class="icon">137 <svg viewBox="0 0 24 24" width="32" height="32">138 <path d="M4 11l8-6 8 6v8H14v-4H10v4H4z" fill="#6E6E6E"></path>139 </svg>140 </div>141 <div class="texts">142 <div class="title">Home</div>143 <div class="sub">Set location</div>144 </div>145 </div>146 147 <div class="divider-v"></div>148 149 <div class="chip">150 <div class="icon" style="background:#E7F0FF; border-color:#CFE2FF;">151 <svg viewBox="0 0 24 24" width="32" height="32">152 <rect x="5" y="8" width="14" height="10" rx="2" fill="#3B82F6"></rect>153 <rect x="9" y="6" width="6" height="2" fill="#3B82F6"></rect>154 </svg>155 </div>156 <div class="texts">157 <div class="title" style="color:#1E3A8A;">Work</div>158 <div class="sub">Westerstra…</div>159 </div>160 </div>161 162 <div class="divider-v"></div>163 164 <div class="chip">165 <div class="more-pill">166 <svg viewBox="0 0 24 24" width="28" height="28">167 <circle cx="5" cy="12" r="2" fill="#6E6E6E"></circle>168 <circle cx="12" cy="12" r="2" fill="#6E6E6E"></circle>169 <circle cx="19" cy="12" r="2" fill="#6E6E6E"></circle>170 </svg>171 </div>172 <div class="texts">173 <div class="title">More</div>174 </div>175 </div>176 </div>177 178 <!-- Recent list -->179 <div class="section-title">Recent</div>180 <div class="list">181 <div class="list-item">182 <div class="list-icon">183 <svg viewBox="0 0 24 24" width="32" height="32">184 <path d="M12 2C8 2 6 5 6 8c0 4 6 12 6 12s6-8 6-12c0-3-2-6-6-6zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#777"></path>185 </svg>186 </div>187 <div class="item-texts">188 <div class="item-title">Golden Gate Bridge</div>189 <div class="item-sub">Golden Gate Bridge, San Francisco, CA, USA</div>190 </div>191 <div class="info-icon">i</div>192 </div>193 194 <div class="list-item">195 <div class="list-icon">196 <svg viewBox="0 0 24 24" width="32" height="32">197 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>198 <path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none"></path>199 </svg>200 </div>201 <div class="item-texts">202 <div class="item-title">Philadelphia</div>203 <div class="item-sub">PA, USA</div>204 </div>205 </div>206 207 <div class="list-item">208 <div class="list-icon">209 <svg viewBox="0 0 24 24" width="32" height="32">210 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>211 <path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none"></path>212 </svg>213 </div>214 <div class="item-texts">215 <div class="item-title">New York</div>216 <div class="item-sub">NY, USA</div>217 </div>218 </div>219 220 <div class="list-item">221 <div class="list-icon">222 <svg viewBox="0 0 24 24" width="32" height="32">223 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>224 <path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none"></path>225 </svg>226 </div>227 <div class="item-texts">228 <div class="item-title">Seattle</div>229 <div class="item-sub">WA, USA</div>230 </div>231 </div>232 233 <div class="list-item">234 <div class="list-icon">235 <svg viewBox="0 0 24 24" width="32" height="32">236 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>237 <path d="M12 6v6l4 2" stroke="#777" stroke-width="2" fill="none"></path>238 </svg>239 </div>240 <div class="item-texts">241 <div class="item-title">Chicago</div>242 <div class="item-sub">IL, USA</div>243 </div>244 </div>245 </div>246 247 <!-- Keyboard -->248 <div class="keyboard">249 <div class="kbd-top">250 <div class="top-icon">251 <svg viewBox="0 0 24 24" width="28" height="28">252 <rect x="3" y="3" width="6" height="6" fill="#B0B6BD"></rect>253 <rect x="15" y="3" width="6" height="6" fill="#B0B6BD"></rect>254 <rect x="3" y="15" width="6" height="6" fill="#B0B6BD"></rect>255 <rect x="15" y="15" width="6" height="6" fill="#B0B6BD"></rect>256 </svg>257 </div>258 <div class="top-icon">259 <svg viewBox="0 0 24 24" width="26" height="26">260 <circle cx="12" cy="8" r="4" fill="#B0B6BD"></circle>261 <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#B0B6BD" stroke-width="2" fill="none"></path>262 </svg>263 </div>264 <div class="label">GIF</div>265 <div class="top-icon">266 <svg viewBox="0 0 24 24" width="26" height="26">267 <circle cx="12" cy="12" r="10" stroke="#B0B6BD" stroke-width="2" fill="none"></circle>268 <path d="M12 6v6l4 4" stroke="#B0B6BD" stroke-width="2" fill="none"></path>269 </svg>270 </div>271 <div class="top-icon">272 <svg viewBox="0 0 24 24" width="26" height="26">273 <path d="M3 7h18M3 12h18M3 17h18" stroke="#B0B6BD" stroke-width="2"></path>274 </svg>275 </div>276 <div class="top-icon">277 <svg viewBox="0 0 24 24" width="26" height="26">278 <circle cx="6" cy="12" r="2" fill="#B0B6BD"></circle>279 <circle cx="12" cy="12" r="2" fill="#B0B6BD"></circle>280 <circle cx="18" cy="12" r="2" fill="#B0B6BD"></circle>281 </svg>282 </div>283 <div class="top-icon" style="margin-left:auto;">284 <svg viewBox="0 0 24 24" width="26" height="26">285 <rect x="9" y="4" width="6" height="10" rx="3" fill="#B0B6BD"></rect>286 <path d="M6 11c0 3.3 2.5 5 6 5s6-1.7 6-5" stroke="#B0B6BD" stroke-width="2" fill="none"></path>287 </svg>288 </div>289 </div>290 291 <div class="keys">292 <div class="row">293 <!-- qwertyuiop -->294 <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>295 <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>296 </div>297 <div class="row">298 <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>299 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>300 </div>301 <div class="row">302 <div class="key-wide">303 <svg viewBox="0 0 24 24" width="34" height="34">304 <path d="M6 18l6-12 6 12" stroke="#fff" stroke-width="2" fill="none"></path>305 </svg>306 </div>307 <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>308 <div class="key-wide">309 <svg viewBox="0 0 24 24" width="34" height="34">310 <path d="M4 7h16v10H4z" fill="none" stroke="#fff" stroke-width="2"></path>311 <path d="M8 11l8 0" stroke="#fff" stroke-width="2"></path>312 <path d="M14 11l-2-2m0 4l2-2" stroke="#fff" stroke-width="2"></path>313 </svg>314 </div>315 </div>316 <div class="row">317 <div class="key-wide key-light">?123</div>318 <div class="key">,</div>319 <div class="key-wide">320 <svg viewBox="0 0 24 24" width="28" height="28">321 <circle cx="12" cy="8" r="4" fill="#fff"></circle>322 <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#fff" stroke-width="2" fill="none"></path>323 </svg>324 </div>325 <div class="space">space</div>326 <div class="key">.</div>327 <div class="enter key-wide" style="border:1px solid #A2C3EE;">328 <svg viewBox="0 0 24 24" width="30" height="30">329 <path d="M4 12h12v4l4-4-4-4v4H4z" fill="#0F1B2D"></path>330 </svg>331 </div>332 </div>333 </div>334 </div>335 336 <!-- Home indicator bar -->337 <div class="home-indicator"></div>338</div>339</body>340</html>