GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8"/>4<title>Search UI - Smart Door Locks</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(180deg,#a0d7d3 0%, #c4ece9 35%, #ffffff 36%, #ffffff 100%);10 }11 12 /* Top system status */13 .status-bar {14 height:88px; padding:18px 26px; color:#1c2f2e; font-weight:600;15 display:flex; align-items:center; justify-content:space-between;16 font-size:34px;17 }18 .status-right { display:flex; align-items:center; gap:24px; }19 .dot { width:18px; height:18px; background:#2f4a48; border-radius:50%; opacity:.7; }20 .sig { width:28px; height:20px; border:2px solid #2f4a48; border-radius:4px; opacity:.8; }21 .batt {22 width:44px; height:22px; border:2px solid #2f4a48; border-radius:4px; position:relative;23 }24 .batt::after{25 content:""; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#2f4a48; border-radius:1px;26 }27 .batt .level{ position:absolute; left:2px; top:2px; bottom:2px; width:70%; background:#2f4a48; }28 29 /* Search header */30 .search-header {31 padding:14px 24px 18px 24px; display:flex; align-items:center; gap:22px;32 }33 .circle-btn { width:68px; height:68px; border-radius:34px; display:flex; align-items:center; justify-content:center; }34 .back-btn { background:transparent; }35 .search-box {36 flex:1; height:110px; background:#ffffff; border-radius:26px;37 display:flex; align-items:center; padding:0 24px; box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;38 border:1px solid #e5e5e5;39 }40 .search-icon, .clear-icon { width:44px; height:44px; }41 .search-text {42 flex:1; margin:0 18px; color:#191919; font-size:44px; font-weight:600;43 }44 45 /* Suggestions list */46 .suggestions { background:#ffffff; }47 .suggestion-row {48 height:118px; border-bottom:1px solid #ececec; display:flex; align-items:center; padding:0 24px 0 22px;49 }50 .s-left {51 width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center;52 }53 .s-text { flex:1; font-size:42px; color:#222; }54 .s-text b { font-weight:800; }55 .s-right { width:50px; height:50px; display:flex; align-items:center; justify-content:center; opacity:.5; }56 57 /* Keyboard */58 .keyboard {59 position:absolute; left:0; right:0; bottom:0;60 background:#f2f3fa; border-top-left-radius:26px; border-top-right-radius:26px;61 box-shadow:0 -2px 8px rgba(0,0,0,0.06);62 }63 .kb-suggest {64 height:110px; display:flex; align-items:center; gap:24px; padding:16px 24px;65 }66 .chip {67 background:#ffffff; border:1px solid #e6e6f4; color:#333; border-radius:22px;68 padding:14px 28px; font-size:40px; box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;69 }70 .mic {71 margin-left:auto; width:76px; height:76px; border-radius:38px; background:#ffffff; border:1px solid #e6e6f4;72 display:flex; align-items:center; justify-content:center;73 }74 .keys { padding:10px 10px 18px 10px; }75 .row { display:flex; justify-content:center; gap:16px; margin:12px 10px; }76 .key {77 width:92px; height:120px; background:#ffffff; border:1px solid #e6e6f4; border-radius:22px;78 display:flex; align-items:center; justify-content:center; font-size:56px; color:#333;79 }80 .key.wide { width:120px; }81 .key.xwide { width:180px; }82 .key.space { flex:1; height:120px; min-width:420px; }83 .key.small { width:120px; }84 .enter-btn {85 width:120px; height:120px; background:#c7dfb1; border:1px solid #a3c48d; border-radius:22px;86 display:flex; align-items:center; justify-content:center;87 }88 .go {89 width:120px; height:120px; background:#b6d37b; border-radius:60px; display:flex; align-items:center; justify-content:center; border:2px solid #8fb24f;90 }91 .nav-pill {92 position:absolute; bottom:14px; left:50%; transform:translateX(-50%);93 width:340px; height:12px; background:#c9c9d2; border-radius:6px;94 }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status Bar -->101 <div class="status-bar">102 <div>1:30</div>103 <div class="status-right">104 <div class="dot"></div>105 <div class="dot"></div>106 <div class="dot"></div>107 <div class="sig"></div>108 <div class="batt"><div class="level"></div></div>109 </div>110 </div>111 112 <!-- Search Header -->113 <div class="search-header">114 <div class="circle-btn back-btn">115 <svg class="search-icon" viewBox="0 0 24 24">116 <path d="M15.5 4l-8 8 8 8" stroke="#1b3b3a" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>117 </svg>118 </div>119 <div class="search-box">120 <svg class="search-icon" viewBox="0 0 24 24">121 <circle cx="10" cy="10" r="7" stroke="#4d4d4d" stroke-width="2.2" fill="none"/>122 <path d="M15.5 15.5L21 21" stroke="#4d4d4d" stroke-width="2.2" stroke-linecap="round"/>123 </svg>124 <div class="search-text">smart door locks</div>125 <svg class="clear-icon" viewBox="0 0 24 24">126 <path d="M6 6l12 12M18 6L6 18" stroke="#8b8b8b" stroke-width="2.2" stroke-linecap="round"/>127 </svg>128 </div>129 </div>130 131 <!-- Suggestions -->132 <div class="suggestions">133 <div class="suggestion-row">134 <div class="s-left">135 <svg width="36" height="36" viewBox="0 0 24 24">136 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>137 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>138 </svg>139 </div>140 <div class="s-text">smart door locks <b>for main door</b></div>141 <div class="s-right">142 <svg width="28" height="28" viewBox="0 0 24 24">143 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144 </svg>145 </div>146 </div>147 148 <div class="suggestion-row">149 <div class="s-left">150 <svg width="36" height="36" viewBox="0 0 24 24">151 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>152 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>153 </svg>154 </div>155 <div class="s-text">smart door locks</div>156 <div class="s-right">157 <svg width="28" height="28" viewBox="0 0 24 24">158 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159 </svg>160 </div>161 </div>162 163 <div class="suggestion-row">164 <div class="s-left">165 <svg width="36" height="36" viewBox="0 0 24 24">166 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>167 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>168 </svg>169 </div>170 <div class="s-text">smart door locks <b>for main door with ca…</b></div>171 <div class="s-right">172 <svg width="28" height="28" viewBox="0 0 24 24">173 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174 </svg>175 </div>176 </div>177 178 <div class="suggestion-row">179 <div class="s-left">180 <svg width="36" height="36" viewBox="0 0 24 24">181 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>182 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>183 </svg>184 </div>185 <div class="s-text">smart door locks <b>with camera</b></div>186 <div class="s-right">187 <svg width="28" height="28" viewBox="0 0 24 24">188 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>189 </svg>190 </div>191 </div>192 193 <div class="suggestion-row">194 <div class="s-left">195 <svg width="36" height="36" viewBox="0 0 24 24">196 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>197 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>198 </svg>199 </div>200 <div class="s-text">smart door locks <b>for metal door</b></div>201 <div class="s-right">202 <svg width="28" height="28" viewBox="0 0 24 24">203 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 </div>207 208 <div class="suggestion-row">209 <div class="s-left">210 <svg width="36" height="36" viewBox="0 0 24 24">211 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>212 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>213 </svg>214 </div>215 <div class="s-text">smart door locks <b>for home</b></div>216 <div class="s-right">217 <svg width="28" height="28" viewBox="0 0 24 24">218 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 </div>222 223 <div class="suggestion-row">224 <div class="s-left">225 <svg width="36" height="36" viewBox="0 0 24 24">226 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>227 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>228 </svg>229 </div>230 <div class="s-text">smart door locks <b>for main door with wifi</b></div>231 <div class="s-right">232 <svg width="28" height="28" viewBox="0 0 24 24">233 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 </div>237 238 <div class="suggestion-row">239 <div class="s-left">240 <svg width="36" height="36" viewBox="0 0 24 24">241 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>242 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>243 </svg>244 </div>245 <div class="s-text">smart door locks <b>for bedroom</b></div>246 <div class="s-right">247 <svg width="28" height="28" viewBox="0 0 24 24">248 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 </div>252 253 <div class="suggestion-row">254 <div class="s-left">255 <svg width="36" height="36" viewBox="0 0 24 24">256 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>257 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>258 </svg>259 </div>260 <div class="s-text">smart door locks <b>for main door godrej</b></div>261 <div class="s-right">262 <svg width="28" height="28" viewBox="0 0 24 24">263 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>264 </svg>265 </div>266 </div>267 268 <div class="suggestion-row">269 <div class="s-left">270 <svg width="36" height="36" viewBox="0 0 24 24">271 <circle cx="10" cy="10" r="7" stroke="#5a5a5a" stroke-width="2" fill="none"></circle>272 <path d="M15.5 15.5L21 21" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"></path>273 </svg>274 </div>275 <div class="s-text">smart door locks <b>for main door without …</b></div>276 <div class="s-right">277 <svg width="28" height="28" viewBox="0 0 24 24">278 <path d="M7 17L17 7M9 7h8v8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 </div>282 </div>283 284 <!-- Keyboard -->285 <div class="keyboard" style="height:980px;">286 <div class="kb-suggest">287 <div class="chip">locks</div>288 <div class="chip">lockscreen</div>289 <div class="chip">locksmith</div>290 <div class="mic">291 <svg width="34" height="34" viewBox="0 0 24 24">292 <rect x="9" y="4" width="6" height="10" rx="3" fill="#4a4a4a"/>293 <path d="M6 12a6 6 0 0012 0M12 18v3" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>294 </svg>295 </div>296 </div>297 298 <div class="keys">299 <div class="row">300 <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>301 <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>302 </div>303 <div class="row">304 <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>305 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>306 </div>307 <div class="row">308 <div class="key wide">⇧</div>309 <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>310 <div class="key">n</div><div class="key">m</div>311 <div class="key wide">⌫</div>312 </div>313 <div class="row">314 <div class="key small">?123</div>315 <div class="key small">,</div>316 <div class="key small">☺</div>317 <div class="key space"></div>318 <div class="key small">.</div>319 <div class="go">320 <svg width="40" height="40" viewBox="0 0 24 24">321 <path d="M5 12h10M13 6l6 6-6 6" stroke="#2d4f10" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>322 </svg>323 </div>324 </div>325 </div>326 <div class="nav-pill"></div>327 </div>328 329</div>330</body>331</html>