GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#FFFFFF; color:#111;13 }14 15 /* Status bar */16 .status-bar {17 height:80px; padding: 10px 24px 0 24px;18 display:flex; align-items:center; justify-content:space-between;19 font-size:32px; color:#000;20 }21 .status-icons { display:flex; align-items:center; gap:20px; }22 .status-icons svg { width:36px; height:36px; fill:#555; }23 24 /* Search bar */25 .search-bar {26 height:120px; display:flex; align-items:center;27 padding:0 24px; border-bottom:1px solid #e6e6e6;28 }29 .back-btn, .clear-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }30 .search-input {31 flex:1; height:78px; display:flex; align-items:center;32 background:#f5f5f5; border-radius:12px; padding:0 20px; font-size:38px; color:#111;33 }34 .search-input span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }35 36 /* Suggestions list */37 .suggestions {38 position:absolute; top:200px; left:0; right:0; height:1420px; overflow:hidden;39 }40 .item { display:flex; align-items:center; padding:0 24px; height:120px; border-bottom:1px solid #eee; }41 .item.thumb { height:160px; }42 .left-icon { width:84px; display:flex; align-items:center; justify-content:center; }43 .left-thumb { width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;44 display:flex; align-items:center; justify-content:center; font-size:22px; text-align:center; }45 .label-area { flex:1; display:flex; flex-direction:column; justify-content:center; }46 .title { font-size:36px; line-height:40px; color:#222; }47 .subtitle { font-size:26px; color:#5C84F6; margin-top:6px; }48 .right-arrow { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }49 50 /* Keyboard */51 .keyboard {52 position:absolute; bottom:0; left:0; width:100%; height:780px;53 background:#1b1b1b; color:#fff; display:flex; flex-direction:column; border-top:1px solid #0f0f0f;54 }55 .kb-suggest {56 height:86px; padding:10px 20px; display:flex; align-items:center; gap:20px;57 background:#242424; border-bottom:1px solid #0f0f0f; font-size:34px;58 }59 .kb-chip {60 background:#343434; padding:10px 20px; border-radius:16px; color:#eaeaea;61 }62 .kb-rows { flex:1; display:flex; flex-direction:column; justify-content:center; padding:6px 18px 18px; gap:14px; }63 .row { display:flex; justify-content:center; gap:14px; }64 .key {65 background:#2b2b2b; height:110px; min-width:88px; border-radius:18px;66 display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);67 }68 .key.small { min-width:120px; font-size:34px; }69 .key.wide { min-width:440px; }70 .key.action { background:#3a3a3a; }71 .key.enter { background:#b5eabf; color:#1b1b1b; }72 .row.indent { padding-left:50px; }73</style>74</head>75<body>76<div id="render-target">77 78 <!-- Status bar -->79 <div class="status-bar">80 <div>12:15</div>81 <div class="status-icons">82 <!-- Chat bubble -->83 <svg viewBox="0 0 24 24"><path d="M4 4h16v10H7l-3 3V4z"/></svg>84 <!-- Signal -->85 <svg viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>86 <!-- WiFi -->87 <svg viewBox="0 0 24 24"><path d="M12 20l4-4H8l4 4zm0-6c3.3 0 6.3 1.2 8.6 3.4l1.4-1.4C18.9 13.9 15.6 12.5 12 12.5s-6.9 1.4-10 3.9l1.4 1.4C5.7 15.2 8.7 14 12 14z"/></svg>88 <!-- Battery -->89 <svg viewBox="0 0 24 24"><path d="M16 7h2v10h-2V7zM3 8h12v8H3V8zm14-2h2v12h-2V6z"/></svg>90 </div>91 </div>92 93 <!-- Search bar -->94 <div class="search-bar">95 <div class="back-btn">96 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>97 </div>98 <div class="search-input">99 <span>3-piece Tuxido for boy kids</span>100 </div>101 <div class="clear-btn">102 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>103 </div>104 </div>105 106 <!-- Suggestions -->107 <div class="suggestions">108 <div class="item thumb">109 <div class="left-thumb">[IMG: Boys shoes]</div>110 <div class="label-area" style="margin-left:22px;">111 <div class="title">shoes for boys</div>112 <div class="subtitle">in Boys Footwear</div>113 </div>114 <div class="right-arrow">115 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M7 17l8-8M9 7h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>116 </div>117 </div>118 119 <div class="item thumb">120 <div class="left-thumb">[IMG: Kids shoes]</div>121 <div class="label-area" style="margin-left:22px;">122 <div class="title">kids shoes</div>123 <div class="subtitle">in Kids' & Infant Footwear</div>124 </div>125 <div class="right-arrow">126 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M7 17l8-8M9 7h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>127 </div>128 </div>129 130 <div class="item">131 <div class="left-icon">132 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>133 </div>134 <div class="label-area"><div class="title">cycle for kids</div></div>135 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>136 </div>137 138 <div class="item">139 <div class="left-icon">140 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>141 </div>142 <div class="label-area"><div class="title">kids watch</div></div>143 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>144 </div>145 146 <div class="item">147 <div class="left-icon">148 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>149 </div>150 <div class="label-area"><div class="title">kids dress</div></div>151 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>152 </div>153 154 <div class="item">155 <div class="left-icon">156 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>157 </div>158 <div class="label-area"><div class="title">watch for boys</div></div>159 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>160 </div>161 162 <div class="item">163 <div class="left-icon">164 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>165 </div>166 <div class="label-area"><div class="title">boy dress</div></div>167 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>168 </div>169 170 <div class="item">171 <div class="left-icon">172 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>173 </div>174 <div class="label-area"><div class="title">kids bike</div></div>175 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>176 </div>177 178 <div class="item">179 <div class="left-icon">180 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>181 </div>182 <div class="label-area"><div class="title">smart watch for kids</div></div>183 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>184 </div>185 186 <div class="item">187 <div class="left-icon">188 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>189 </div>190 <div class="label-area"><div class="title">baby boy dress</div></div>191 <div class="right-arrow"><svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>192 </div>193 </div>194 195 <!-- Keyboard -->196 <div class="keyboard">197 <div class="kb-suggest">198 <div class="kb-chip">kids</div>199 <div class="kb-chip">kiss</div>200 <div class="kb-chip">kid's</div>201 <div style="margin-left:auto; display:flex; align-items:center;">202 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v3a4 4 0 1 0 8 0V7a4 4 0 0 0-4-4zm-6 9a6 6 0 0 0 12 0h2a8 8 0 0 1-16 0h2z" fill="#bbb"/></svg>203 </div>204 </div>205 206 <div class="kb-rows">207 <div class="row">208 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>209 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>210 <div class="key">o</div><div class="key">p</div>211 </div>212 <div class="row indent">213 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>214 <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>215 </div>216 <div class="row">217 <div class="key small action">218 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M7 15l5-5 5 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>219 </div>220 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>221 <div class="key">b</div><div class="key">n</div><div class="key">m</div>222 <div class="key small action">223 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 6h12M9 10l-3 3 3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>224 </div>225 </div>226 <div class="row">227 <div class="key small action">?123</div>228 <div class="key small action">,</div>229 <div class="key small action">230 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v3a4 4 0 1 0 8 0V7a4 4 0 0 0-4-4zm-6 9a6 6 0 0 0 12 0h2a8 8 0 0 1-16 0h2z" fill="#ddd"/></svg>231 </div>232 <div class="key wide action"></div>233 <div class="key small action">.</div>234 <div class="key small enter">235 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M7 12h7V8l4 4-4 4v-4H7v-4" stroke="#1b1b1b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>236 </div>237 </div>238 </div>239 </div>240 241</div>242</body>243</html>