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 Suggestions UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #222;21 font-weight: 500;22 font-size: 34px;23 }24 .status-left { display: flex; align-items: center; gap: 16px; }25 .status-right { display: flex; align-items: center; gap: 22px; color: #555; }26 .status-dot { width: 10px; height: 10px; background:#707070; border-radius:50%; }27 .battery {28 display: inline-flex; align-items: center; gap: 8px; color:#222;29 font-size: 28px;30 }31 .battery svg { display:block; }32 33 /* Search bar */34 .searchbar {35 height: 150px;36 border-bottom: 1px solid #e9e9e9;37 padding: 0 32px;38 display: flex; align-items: center;39 gap: 24px;40 }41 .back-icon svg { width: 48px; height: 48px; }42 .search-input {43 flex: 1; color: #111; font-size: 44px; line-height: 1;44 }45 .control-icons { display: flex; align-items: center; gap: 26px; }46 .circle-btn {47 width: 84px; height: 84px; border-radius: 84px;48 background: #000; color: #fff; display: flex; align-items: center; justify-content: center;49 font-size: 46px; font-weight: 600;50 }51 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #222; stroke-width: 3; }52 53 /* Suggestions */54 .suggestions { padding: 28px 36px 0 36px; }55 .suggestions h4 {56 margin: 8px 0 26px 0;57 color: #777; font-weight: 700; font-size: 28px; letter-spacing: 2px;58 }59 .sugg-item {60 padding: 26px 0;61 display: flex; align-items: baseline; gap: 12px;62 font-size: 38px; color: #222;63 }64 .sugg-item .count { color: #6d6d6d; }65 66 /* Keyboard mock */67 .keyboard {68 position: absolute; left: 0; bottom: 0;69 width: 100%; height: 880px;70 background: #1c1c1f; color: #eaeaea;71 box-shadow: 0 -6px 12px rgba(0,0,0,0.15);72 }73 .kbd-top {74 height: 110px; padding: 0 22px;75 display: flex; align-items: center; justify-content: space-between;76 color: #cfcfcf; font-size: 34px;77 }78 .kbd-top-left, .kbd-top-right { display: flex; align-items: center; gap: 22px; }79 .chip-row { display: flex; align-items: center; gap: 18px; }80 .chip { color:#e9e9e9; }81 .chip-sep { color:#7b7b7b; }82 .grid-icon {83 width: 48px; height: 48px; display: inline-flex; justify-content: center; align-items: center;84 border-radius: 8px; background: #2a2a2d;85 }86 .grid-icon svg { width: 30px; height: 30px; fill: #bdbdbd; }87 88 .keys { padding: 6px 24px 0 24px; }89 .row { display: flex; justify-content: center; gap: 16px; margin-bottom: 22px; }90 .key {91 height: 120px; min-width: 90px; padding: 0 16px;92 background: #2d2d31; border-radius: 16px;93 display: flex; align-items: center; justify-content: center;94 font-size: 44px; color: #fff;95 }96 .key.small { min-width: 80px; font-size: 38px; }97 .key.wide { min-width: 170px; }98 .space { flex: 1; min-width: 420px; }99 .key.secondary { color:#cfcfcf; font-size: 32px; }100 .key.dark {101 background: #3a3a3f;102 }103 .search-key {104 width: 120px; height: 120px; border-radius: 60px; background: #dce3f7; color:#111;105 display:flex; align-items:center; justify-content:center;106 }107 .search-key svg { width: 44px; height: 44px; stroke:#111; stroke-width:4; fill:none; }108 .gesture {109 position: absolute; left: 50%; transform: translateX(-50%);110 bottom: 20px; width: 240px; height: 10px; border-radius: 10px; background: #e6e6e6; opacity: 0.95;111 }112 113 /* Minor tweaks for text rendering */114 .light { color:#666; }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div class="status-left">123 <div>9:19</div>124 </div>125 <div class="status-right">126 <!-- simple placeholders for icons -->127 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#666" fill="none"/></svg>128 <svg width="30" height="30" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" stroke="#666" fill="none"/></svg>129 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666"/></svg>130 <div class="battery">131 <svg width="40" height="22" viewBox="0 0 40 22">132 <rect x="1" y="4" width="34" height="14" rx="3" ry="3" stroke="#444" fill="none"></rect>133 <rect x="3" y="6" width="28" height="10" fill="#444"></rect>134 <rect x="36" y="9" width="3" height="4" fill="#444"></rect>135 </svg>136 <span>100%</span>137 </div>138 </div>139 </div>140 141 <!-- Search Bar -->142 <div class="searchbar">143 <div class="back-icon">144 <svg viewBox="0 0 48 48">145 <path d="M30 9 L12 24 L30 39" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>146 </svg>147 </div>148 <div class="search-input">mens shorts</div>149 <div class="control-icons">150 <div class="circle-btn">×</div>151 <div class="icon-btn">152 <svg viewBox="0 0 60 60">153 <rect x="10" y="16" width="40" height="28" rx="4" ry="4"></rect>154 <circle cx="30" cy="30" r="6"></circle>155 <rect x="22" y="12" width="16" height="6" rx="3" ry="3" fill="none" stroke="#222" stroke-width="3"></rect>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Suggestions -->162 <div class="suggestions">163 <h4>SUGGESTIONS</h4>164 165 <div class="sugg-item"><span>mens golf shorts</span> <span class="count">[57]</span></div>166 <div class="sugg-item"><span>mens running shorts</span> <span class="count">[51]</span></div>167 <div class="sugg-item"><span>mens soccer shorts</span> <span class="count">[25]</span></div>168 <div class="sugg-item"><span>mens tennis shorts</span> <span class="count">[28]</span></div>169 <div class="sugg-item"><span>mens 5 inch shorts</span> <span class="count">[20]</span></div>170 <div class="sugg-item"><span>mens swim shorts</span> <span class="count">[39]</span></div>171 <div class="sugg-item"><span>mens axis woven shorts</span> <span class="count">[1]</span></div>172 <div class="sugg-item"><span>mens compression shorts</span> <span class="count">[10]</span></div>173 <div class="sugg-item"><span>mens training shorts</span> <span class="count">[140]</span></div>174 </div>175 176 <!-- Keyboard Mock -->177 <div class="keyboard">178 <div class="kbd-top">179 <div class="kbd-top-left">180 <div class="grid-icon">181 <svg viewBox="0 0 24 24">182 <rect x="3" y="3" width="7" height="7"></rect>183 <rect x="14" y="3" width="7" height="7"></rect>184 <rect x="3" y="14" width="7" height="7"></rect>185 <rect x="14" y="14" width="7" height="7"></rect>186 </svg>187 </div>188 <div class="chip-row">189 <span class="chip">shorts</span>190 <span class="chip-sep">|</span>191 <span class="chip">shirts</span>192 <span class="chip-sep">|</span>193 <span class="chip">🩳</span>194 </div>195 </div>196 <div class="kbd-top-right">197 <svg width="36" height="36" viewBox="0 0 24 24">198 <circle cx="11" cy="11" r="7" stroke="#cfcfcf" fill="none"></circle>199 <line x1="18" y1="18" x2="22" y2="22" stroke="#cfcfcf"></line>200 </svg>201 </div>202 </div>203 204 <div class="keys">205 <div class="row">206 <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>207 <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>208 </div>209 <div class="row">210 <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>211 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>212 </div>213 <div class="row">214 <div class="key wide secondary">⇧</div>215 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>216 <div class="key">b</div><div class="key">n</div><div class="key">m</div>217 <div class="key wide secondary">⌫</div>218 </div>219 <div class="row">220 <div class="key wide secondary">?123</div>221 <div class="key small secondary">,</div>222 <div class="key small secondary">☺</div>223 <div class="key space dark"></div>224 <div class="key small secondary">.</div>225 <div class="search-key">226 <svg viewBox="0 0 24 24">227 <circle cx="10" cy="10" r="7"></circle>228 <line x1="16" y1="16" x2="22" y2="22"></line>229 </svg>230 </div>231 </div>232 </div>233 234 <div class="gesture"></div>235 </div>236 237</div>238</body>239</html>