GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; box-shadow: 0 0 0 rgba(0,0,0,0); border-radius: 0;11 }12 /* Status bar */13 .status-bar {14 height: 90px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; color: #000; font-size: 32px;15 }16 .status-right { display: flex; align-items: center; gap: 22px; }17 .icon-small { width: 26px; height: 26px; }18 /* Search header */19 .search-header { padding: 10px 24px 0 24px; }20 .search-row { display: flex; align-items: center; gap: 16px; }21 .back-btn {22 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;23 }24 .search-bar {25 flex: 1; position: relative; height: 86px; border: 3px solid #000; border-radius: 44px; background: #fff;26 display: flex; align-items: center; padding: 0 120px 0 28px; box-sizing: border-box;27 }28 .search-text { font-size: 34px; color: #0b73ff; }29 .clear-btn {30 position: absolute; right: 92px; width: 46px; height: 46px; border-radius: 23px; background: #E9E9E9;31 display: flex; align-items: center; justify-content: center; border: 1px solid #CFCFCF;32 }33 .search-action {34 position: absolute; right: 10px; width: 70px; height: 70px; border-radius: 35px; background: #000;35 display: flex; align-items: center; justify-content: center;36 }37 /* Sections */38 .content { padding: 12px 24px 0 24px; color: #000; }39 .section-title { font-size: 32px; font-weight: 600; margin: 28px 0 16px; }40 .pill-list { display: flex; flex-wrap: wrap; gap: 18px; }41 .pill {42 background: #F3F3F3; color: #222; border-radius: 30px; padding: 16px 24px; font-size: 30px; border: 1px solid #E5E5E5;43 }44 .section-header {45 display: flex; align-items: center; justify-content: space-between;46 }47 .trash {48 width: 44px; height: 44px; border-radius: 22px; background: #F3F3F3; display: flex; align-items: center; justify-content: center; border: 1px solid #E1E1E1;49 }50 /* Browsing recommendation */51 .browse-header {52 display: flex; align-items: center; justify-content: space-between; margin: 34px 0 18px; font-size: 32px; font-weight: 600;53 }54 .cards { display: flex; gap: 22px; }55 .card {56 width: 236px;57 }58 .img-placeholder {59 width: 236px; height: 236px; background: #E0E0E0; border: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;61 }62 .price-row {63 font-size: 28px; color: #000; margin-top: 10px; display: flex; gap: 10px; align-items: baseline;64 }65 .sold { color: #666; font-size: 26px; }66 /* Suggestions strip above keyboard */67 .suggest-strip {68 position: absolute; bottom: 820px; left: 0; right: 0; height: 80px; background: #202426;69 display: flex; align-items: center; gap: 18px; padding: 0 24px;70 }71 .suggest-chip {72 background: #2B3032; color: #E9EBEC; padding: 12px 18px; border-radius: 18px; font-size: 30px; border: 1px solid #3A3F42;73 }74 /* Keyboard */75 .keyboard {76 position: absolute; bottom: 0; left: 0; width: 100%; height: 820px; background: #14181A; border-top: 1px solid #2A2F31;77 box-sizing: border-box; padding: 20px 18px;78 }79 .key-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }80 .key {81 width: 86px; height: 102px; background: #212629; border-radius: 16px; color: #E5E8EA; font-size: 40px;82 display: flex; align-items: center; justify-content: center; border: 1px solid #2B3134;83 }84 .key-wide { width: 120px; }85 .key-shift { width: 120px; }86 .key-bottom { height: 112px; }87 .space { flex: 1; min-width: 560px; height: 112px; background: #212629; border-radius: 16px; border: 1px solid #2B3134; }88 .search-green {89 width: 120px; height: 112px; background: #7DE3B3; border-radius: 60px; display: flex; align-items: center; justify-content: center; margin-left: 12px;90 }91 .bottom-bar {92 position: absolute; bottom: 786px; left: 50%; transform: translateX(-50%);93 width: 360px; height: 10px; background: #D9D9D9; border-radius: 5px;94 }95 .kbd-top-icons {96 display: flex; gap: 22px; color: #E5E8EA; font-size: 28px; margin-bottom: 18px; align-items: center;97 }98 .kbd-grid-toggle {99 width: 64px; height: 64px; background: #212629; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #2B3134;100 }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div>8:53</div>109 <div class="status-right">110 <!-- simple status icons -->111 <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#000" stroke-width="2"/></svg>112 <svg class="icon-small" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#000" stroke-width="2"/></svg>113 <svg class="icon-small" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#000" stroke-width="2"/></svg>114 <div style="font-size:28px;">95%</div>115 </div>116 </div>117 118 <!-- Search header -->119 <div class="search-header">120 <div class="search-row">121 <div class="back-btn">122 <svg width="34" height="34" viewBox="0 0 24 24">123 <path d="M15 6l-6 6 6 6" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>124 </svg>125 </div>126 <div class="search-bar">127 <div class="search-text">42-size formal shoes</div>128 <div class="clear-btn">129 <svg width="22" height="22" viewBox="0 0 24 24">130 <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2" stroke-linecap="round"/>131 </svg>132 </div>133 <div class="search-action">134 <svg width="30" height="30" viewBox="0 0 24 24">135 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"/>136 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>137 </svg>138 </div>139 </div>140 </div>141 </div>142 143 <!-- Content -->144 <div class="content">145 <div class="section-title">Suggested searches</div>146 <div class="pill-list">147 <div class="pill">white t shirt</div>148 <div class="pill">lights</div>149 <div class="pill">dress shoes</div>150 <div class="pill">More</div>151 </div>152 153 <div class="section-title section-header" style="margin-top:34px;">154 <div>Recently searched</div>155 <div class="trash">156 <svg width="22" height="22" viewBox="0 0 24 24">157 <path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>158 </svg>159 </div>160 </div>161 <div class="pill-list">162 <div class="pill">mens sports shoes</div>163 <div class="pill">Clohco shoes</div>164 <div class="pill">Clohco shoes.</div>165 <div class="pill">Nike shoes</div>166 <div class="pill">formal shoes</div>167 <div class="pill">spoke wrench</div>168 <div class="pill">More</div>169 </div>170 171 <div class="section-title" style="margin-top:34px;">Popular right now</div>172 <div class="pill-list">173 <div class="pill">🔥 men shoes</div>174 <div class="pill">🔥 men dress shoes</div>175 <div class="pill">badminton racket</div>176 <div class="pill">t shirts</div>177 <div class="pill">kids shoes</div>178 <div class="pill">mens pants</div>179 <div class="pill">More</div>180 </div>181 182 <div class="browse-header">183 <div>Browsing history recommendation</div>184 <div style="display:flex; align-items:center; gap:6px; color:#007aff;">185 <span style="font-size:30px;">›</span>186 </div>187 </div>188 189 <div class="cards">190 <div class="card">191 <div class="img-placeholder">[IMG: Badminton Racket Set]</div>192 <div class="price-row"><strong>$92.48</strong><span class="sold">9 sold</span></div>193 </div>194 <div class="card">195 <div class="img-placeholder">[IMG: Black Formal Shoe]</div>196 <div class="price-row"><strong>$18.97</strong><span class="sold">1K+ sold</span></div>197 </div>198 <div class="card">199 <div class="img-placeholder">[IMG: Cabinet Light Bar]</div>200 <div class="price-row"><strong>$4.28</strong><span class="sold">100K+ sold</span></div>201 </div>202 <div class="card">203 <div class="img-placeholder">[IMG: White T-Shirt Pack]</div>204 <div class="price-row"><strong>$10.18</strong><span class="sold">38K+ sold</span></div>205 </div>206 </div>207 </div>208 209 <!-- suggestions strip above keyboard -->210 <div class="suggest-strip">211 <div class="kbd-grid-toggle">212 <svg width="26" height="26" viewBox="0 0 24 24">213 <rect x="3" y="3" width="6" height="6" fill="#8A9196"/>214 <rect x="15" y="3" width="6" height="6" fill="#8A9196"/>215 <rect x="3" y="15" width="6" height="6" fill="#8A9196"/>216 <rect x="15" y="15" width="6" height="6" fill="#8A9196"/>217 </svg>218 </div>219 <div class="suggest-chip">shoes</div>220 <div class="suggest-chip">shoestring</div>221 <div class="suggest-chip">👟</div>222 <div style="flex:1;"></div>223 <div class="suggest-chip" style="display:flex; align-items:center; gap:8px;">224 <svg width="26" height="26" viewBox="0 0 24 24">225 <path d="M21 21l-4-4" stroke="#E9EBEC" stroke-width="2" stroke-linecap="round"/>226 <circle cx="11" cy="11" r="7" fill="none" stroke="#E9EBEC" stroke-width="2"/>227 </svg>228 </div>229 </div>230 231 <!-- keyboard -->232 <div class="keyboard">233 <div class="kbd-top-icons">234 <div class="kbd-grid-toggle">235 <svg width="26" height="26" viewBox="0 0 24 24">236 <rect x="3" y="3" width="6" height="6" fill="#8A9196"/>237 <rect x="15" y="3" width="6" height="6" fill="#8A9196"/>238 <rect x="3" y="15" width="6" height="6" fill="#8A9196"/>239 <rect x="15" y="15" width="6" height="6" fill="#8A9196"/>240 </svg>241 </div>242 <div style="font-size:30px;">shoes</div>243 <div style="font-size:30px;">shoestring</div>244 <div style="font-size:30px;">👟</div>245 </div>246 247 <!-- Row 1 -->248 <div class="key-row">249 <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>250 <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>251 </div>252 <!-- Row 2 -->253 <div class="key-row" style="padding: 0 40px;">254 <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>255 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>256 </div>257 <!-- Row 3 -->258 <div class="key-row">259 <div class="key-shift key">⇧</div>260 <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>261 <div class="key">n</div><div class="key">m</div>262 <div class="key-wide key">263 <svg width="30" height="30" viewBox="0 0 24 24">264 <path d="M5 12h12M11 8l-4 4 4 4" stroke="#E5E8EA" stroke-width="2" stroke-linecap="round" fill="none"/>265 </svg>266 </div>267 </div>268 <!-- Row 4 -->269 <div class="key-row">270 <div class="key-wide key-bottom">?123</div>271 <div class="key-bottom" style="width:86px;border:1px solid #2B3134;background:#212629;border-radius:16px;">,</div>272 <div class="space"></div>273 <div class="key-bottom" style="width:86px;border:1px solid #2B3134;background:#212629;border-radius:16px;">.</div>274 <div class="search-green">275 <svg width="36" height="36" viewBox="0 0 24 24">276 <circle cx="11" cy="11" r="7" fill="none" stroke="#0b2d1f" stroke-width="2"/>277 <path d="M20 20l-4-4" stroke="#0b2d1f" stroke-width="2" stroke-linecap="round"/>278 </svg>279 </div>280 </div>281 </div>282 283 <div class="bottom-bar"></div>284 285</div>286</body>287</html>