GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search in Electronics UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Top gradient header */19 .header {20 position: absolute;21 left: 0;22 top: 0;23 width: 1080px;24 height: 360px;25 background: linear-gradient(90deg, #8bd4df, #a5e1c6);26 }27 28 /* Status bar content */29 .status-bar {30 position: absolute;31 top: 28px;32 left: 36px;33 right: 36px;34 height: 60px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 color: #2f3c37;39 font-size: 40px;40 font-weight: 600;41 letter-spacing: 0.5px;42 }43 .status-left { display: flex; align-items: center; gap: 22px; }44 .status-right { display: flex; align-items: center; gap: 26px; }45 .status-icon {46 width: 44px; height: 44px;47 display: inline-flex; align-items: center; justify-content: center;48 }49 50 /* Back button */51 .back-btn {52 position: absolute;53 top: 196px;54 left: 30px;55 width: 72px; height: 72px;56 display: flex; align-items: center; justify-content: center;57 }58 59 /* Search bar */60 .search-wrap {61 position: absolute;62 top: 168px;63 left: 120px;64 width: 900px;65 height: 116px;66 background: #ffffff;67 border-radius: 24px;68 box-shadow: 0 8px 12px rgba(0,0,0,0.18);69 display: flex;70 align-items: center;71 padding: 0 28px;72 gap: 26px;73 }74 .search-icon {75 width: 52px; height: 52px;76 color: #4a4a4a;77 }78 .search-placeholder {79 font-size: 42px;80 color: #7b7b7b;81 font-weight: 500;82 }83 84 /* Main white area (content spacer) */85 .content-area {86 position: absolute;87 top: 360px;88 left: 0;89 width: 1080px;90 height: 1080px;91 background: #ffffff;92 }93 94 /* Action buttons above keyboard */95 .actions {96 position: absolute;97 top: 1320px;98 left: 0;99 width: 1080px;100 display: flex;101 justify-content: center;102 gap: 48px;103 }104 .action-btn {105 width: 468px;106 height: 150px;107 border: 2px solid #DADADA;108 border-radius: 28px;109 background: #ffffff;110 box-shadow: 0 2px 0 rgba(0,0,0,0.08);111 display: flex;112 align-items: center;113 gap: 26px;114 padding: 0 32px;115 color: #333;116 font-size: 40px;117 font-weight: 600;118 }119 .action-icon {120 width: 64px; height: 64px;121 color: #383838;122 }123 124 /* Keyboard */125 .keyboard {126 position: absolute;127 left: 0;128 bottom: 50px; /* leave space for gesture bar */129 width: 1080px;130 height: 860px;131 background: #2a211e;132 color: #ead7c8;133 }134 .kb-top {135 height: 120px;136 display: flex;137 align-items: center;138 padding: 0 36px;139 gap: 54px;140 }141 .kb-top .tool {142 width: 80px; height: 80px;143 background: rgba(234, 215, 200, 0.1);144 border-radius: 18px;145 display: flex; align-items: center; justify-content: center;146 }147 .kb-rows {148 padding: 0 32px;149 display: flex; flex-direction: column; gap: 26px;150 }151 .kb-row {152 display: grid;153 grid-auto-columns: 1fr;154 grid-auto-flow: column;155 gap: 16px;156 height: 120px;157 }158 .key {159 background: #3a2f2b;160 border-radius: 20px;161 display: flex; align-items: center; justify-content: center;162 font-size: 48px; font-weight: 600;163 color: #f4e6da;164 }165 .key.wide { grid-column: span 2; }166 .kb-bottom {167 display: grid;168 grid-template-columns: 160px 160px 160px 1fr 160px 160px;169 gap: 16px;170 height: 120px;171 padding: 0 32px;172 margin-top: 26px;173 }174 .space {175 background: #3a2f2b;176 border-radius: 20px;177 display: flex; align-items: center; justify-content: center;178 font-size: 36px; color: #d8c9bb;179 }180 181 /* Gesture bar */182 .gesture {183 position: absolute;184 left: 50%;185 transform: translateX(-50%);186 bottom: 14px;187 width: 420px; height: 14px;188 background: #e0e0e0;189 border-radius: 10px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <div class="header">197 <div class="status-bar">198 <div class="status-left">199 <div>9:39</div>200 <div class="status-icon">201 <svg viewBox="0 0 24 24" width="44" height="44">202 <circle cx="12" cy="12" r="10" fill="#2f3c37"></circle>203 <circle cx="9" cy="10" r="1.5" fill="#a5e1c6"></circle>204 <circle cx="15" cy="10" r="1.5" fill="#a5e1c6"></circle>205 <path d="M7 15c2.5 2 7.5 2 10 0" stroke="#a5e1c6" stroke-width="2" fill="none" stroke-linecap="round"/>206 </svg>207 </div>208 </div>209 <div class="status-right">210 <div class="status-icon">211 <!-- Wi-Fi -->212 <svg viewBox="0 0 24 24" width="44" height="44">213 <path d="M2 8c5.5-5.5 14.5-5.5 20 0" stroke="#2f3c37" stroke-width="2.2" fill="none" stroke-linecap="round"/>214 <path d="M6 12c3.5-3.5 8-3.5 11.9 0" stroke="#2f3c37" stroke-width="2.2" fill="none" stroke-linecap="round"/>215 <path d="M10 16c1.9-1.9 4.1-1.9 6 0" stroke="#2f3c37" stroke-width="2.2" fill="none" stroke-linecap="round"/>216 <circle cx="12" cy="19" r="1.8" fill="#2f3c37"/>217 </svg>218 </div>219 <div class="status-icon">220 <!-- Battery -->221 <svg viewBox="0 0 26 24" width="44" height="44">222 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#2f3c37" stroke-width="2"/>223 <rect x="4" y="8" width="14" height="8" rx="1.5" ry="1.5" fill="#2f3c37"/>224 <rect x="21" y="9" width="3" height="6" rx="1" fill="#2f3c37"/>225 </svg>226 </div>227 </div>228 </div>229 230 <div class="back-btn">231 <svg viewBox="0 0 24 24" width="72" height="72">232 <path d="M15 6l-6 6 6 6" stroke="#2f3c37" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>233 </svg>234 </div>235 236 <div class="search-wrap">237 <div class="search-icon">238 <svg viewBox="0 0 24 24" width="52" height="52">239 <circle cx="11" cy="11" r="7" stroke="#4a4a4a" stroke-width="2.4" fill="none"/>240 <path d="M16.5 16.5l5 5" stroke="#4a4a4a" stroke-width="2.4" stroke-linecap="round"/>241 </svg>242 </div>243 <div class="search-placeholder">Search in Electronics</div>244 </div>245 </div>246 247 <div class="content-area"></div>248 249 <div class="actions">250 <div class="action-btn">251 <div class="action-icon">252 <!-- Image/Photo icon -->253 <svg viewBox="0 0 24 24" width="64" height="64">254 <rect x="3" y="4" width="18" height="16" rx="2" stroke="#383838" stroke-width="2" fill="none"/>255 <circle cx="9" cy="9" r="2.2" fill="#383838"/>256 <path d="M4 16l5-5 4 4 3-3 5 4" stroke="#383838" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 <div>Search with photo</div>260 </div>261 <div class="action-btn">262 <div class="action-icon">263 <!-- Camera icon -->264 <svg viewBox="0 0 24 24" width="64" height="64">265 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#383838" stroke-width="2" fill="none"/>266 <path d="M8 6l2-2h4l2 2" stroke="#383838" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>267 <circle cx="12" cy="12" r="3.5" stroke="#383838" stroke-width="2" fill="none"/>268 </svg>269 </div>270 <div>Search with camera</div>271 </div>272 </div>273 274 <div class="keyboard">275 <div class="kb-top">276 <div class="tool">277 <svg viewBox="0 0 24 24" width="40" height="40">278 <rect x="3" y="3" width="7" height="7" rx="2" fill="#ead7c8"/>279 <rect x="14" y="3" width="7" height="7" rx="2" fill="#ead7c8"/>280 <rect x="3" y="14" width="7" height="7" rx="2" fill="#ead7c8"/>281 <rect x="14" y="14" width="7" height="7" rx="2" fill="#ead7c8"/>282 </svg>283 </div>284 <div class="tool">285 <svg viewBox="0 0 24 24" width="40" height="40">286 <circle cx="12" cy="12" r="9" stroke="#ead7c8" stroke-width="2" fill="none"/>287 <path d="M9 10a3 3 0 0 0 6 0" stroke="#ead7c8" stroke-width="2" fill="none" stroke-linecap="round"/>288 <circle cx="9" cy="10" r="1.5" fill="#ead7c8"/>289 <circle cx="15" cy="10" r="1.5" fill="#ead7c8"/>290 </svg>291 </div>292 <div style="color:#ead7c8;font-size:40px;font-weight:700;">GIF</div>293 <div class="tool">294 <svg viewBox="0 0 24 24" width="40" height="40">295 <circle cx="12" cy="12" r="9" stroke="#ead7c8" stroke-width="2" fill="none"/>296 <path d="M8 12h8M12 8v8" stroke="#ead7c8" stroke-width="2" stroke-linecap="round"/>297 </svg>298 </div>299 <div class="tool">300 <svg viewBox="0 0 24 24" width="40" height="40">301 <path d="M4 7h16v3H4zM4 14h16v3H4z" fill="#ead7c8"/>302 <path d="M6 6v12M18 6v12" stroke="#ead7c8" stroke-width="1.5"/>303 </svg>304 </div>305 <div class="tool">306 <svg viewBox="0 0 24 24" width="40" height="40">307 <circle cx="12" cy="12" r="9" stroke="#ead7c8" stroke-width="2" fill="none"/>308 <circle cx="8" cy="10" r="2" fill="#ead7c8"/>309 <circle cx="16" cy="14" r="2" fill="#ead7c8"/>310 </svg>311 </div>312 <div class="tool">313 <svg viewBox="0 0 24 24" width="40" height="40">314 <path d="M5 12l6 6 8-12" stroke="#ead7c8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>315 </svg>316 </div>317 <div class="tool" style="background:#4a3c37;">318 <svg viewBox="0 0 24 24" width="40" height="40">319 <path d="M19 13a7 7 0 1 1-7-7" stroke="#ead7c8" stroke-width="2" fill="none" stroke-linecap="round"/>320 <path d="M20 20l-4-4" stroke="#ead7c8" stroke-width="2" stroke-linecap="round"/>321 </svg>322 </div>323 <div class="tool">324 <svg viewBox="0 0 24 24" width="40" height="40">325 <path d="M9 4l10 8-10 8z" fill="#ead7c8"/>326 </svg>327 </div>328 <div class="tool">329 <svg viewBox="0 0 24 24" width="40" height="40">330 <circle cx="12" cy="12" r="10" stroke="#ead7c8" stroke-width="2" fill="none"/>331 <path d="M12 7v6l4 2" stroke="#ead7c8" stroke-width="2" fill="none" stroke-linecap="round"/>332 </svg>333 </div>334 <div class="tool" style="background:#4a3c37;">335 <svg viewBox="0 0 24 24" width="40" height="40">336 <path d="M5 5h14v14H5z" stroke="#ead7c8" stroke-width="2" fill="none"/>337 <circle cx="12" cy="12" r="3" fill="#ead7c8"/>338 </svg>339 </div>340 <div class="tool">341 <svg viewBox="0 0 24 24" width="40" height="40">342 <path d="M4 12h16" stroke="#ead7c8" stroke-width="2" stroke-linecap="round"/>343 </svg>344 </div>345 </div>346 347 <div class="kb-rows">348 <div class="kb-row">349 <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>350 </div>351 <div class="kb-row" style="padding: 0 48px;">352 <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>353 </div>354 <div class="kb-row" style="padding: 0 110px;">355 <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">356 <svg viewBox="0 0 24 24" width="40" height="40">357 <path d="M4 12h12M12 7l-5 5 5 5" stroke="#f4e6da" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>358 </svg>359 </div>360 </div>361 <div class="kb-bottom">362 <div class="key">?123</div>363 <div class="key">,</div>364 <div class="key">365 <svg viewBox="0 0 24 24" width="40" height="40">366 <circle cx="12" cy="12" r="9" stroke="#f4e6da" stroke-width="2" fill="none"/>367 <path d="M9 10a3 3 0 0 0 6 0" stroke="#f4e6da" stroke-width="2" fill="none" stroke-linecap="round"/>368 <circle cx="9" cy="10" r="1.5" fill="#f4e6da"/>369 <circle cx="15" cy="10" r="1.5" fill="#f4e6da"/>370 </svg>371 </div>372 <div class="space">space</div>373 <div class="key">.</div>374 <div class="key" style="background:#e7c5a9;color:#2a211e;">375 <svg viewBox="0 0 24 24" width="40" height="40">376 <path d="M5 12h10M10 7l5 5-5 5" stroke="#2a211e" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>377 </svg>378 </div>379 </div>380 </div>381 </div>382 383 <div class="gesture"></div>384</div>385</body>386</html>