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</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; position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 110px;17 background: #fff; display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;18 color: #000;19 }20 .status-left { font-size: 40px; font-weight: 500; }21 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }22 .sb-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #000; }23 24 /* Search header */25 .search-header {26 position: absolute; top: 120px; left: 24px; right: 24px; display: flex; align-items: center; gap: 20px;27 }28 .back-btn {29 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px;30 }31 .search-bar {32 flex: 1; height: 96px; background: #F5F5F5; border-radius: 48px; display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;33 border: 1px solid #E0E0E0;34 }35 .search-text {36 flex: 1; font-size: 40px; color: #000; white-space: nowrap; overflow: hidden;37 }38 .caret {39 display: inline-block; width: 2px; height: 44px; background: #FF7A00; vertical-align: middle; margin-left: 6px;40 }41 .clear-btn { width: 56px; height: 56px; border-radius: 28px; background: #EAEAEA; display: flex; align-items: center; justify-content: center; margin-left: 16px; }42 43 /* Suggestions list */44 .suggestions {45 position: absolute; top: 240px; left: 0; right: 0; bottom: 980px; /* leave space for keyboard */46 overflow: hidden;47 }48 .suggestion-item {49 padding: 28px 32px; display: flex; align-items: center; border-bottom: 1px solid #EEEEEE;50 }51 .s-text { font-size: 44px; color: #9E9E9E; }52 .s-text .strong { color: #000; font-weight: 500; }53 .s-arrow { margin-left: auto; width: 40px; height: 40px; color: #9E9E9E; }54 55 /* Keyboard */56 .keyboard {57 position: absolute; bottom: 90px; left: 0; right: 0; height: 920px; background: #2B2421;58 border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 32px 24px; box-sizing: border-box;59 }60 .kbd-suggestion-row {61 display: flex; gap: 24px; margin-bottom: 24px; color: #B3A297; font-size: 36px; padding: 0 10px;62 }63 .kbd-suggestion-pip { color: #000; font-weight: 600; background: #EFEFEF; border-radius: 12px; padding: 0 6px; display: inline-block; }64 .key-row { display: flex; justify-content: space-between; margin-bottom: 24px; padding: 0 8px; }65 .key {66 background: #3A312E; color: #EAD5C6; border-radius: 20px; min-width: 86px; height: 118px;67 display: flex; align-items: center; justify-content: center; font-size: 44px;68 }69 .key.wide { min-width: 120px; }70 .key.backspace, .key.shift { min-width: 150px; }71 .spacebar { flex: 1; background: #3A312E; color: #EAD5C6; border-radius: 24px; height: 118px; margin: 0 16px; display: flex; align-items: center; justify-content: center; font-size: 42px; }72 .key.special {73 background: #E7C6A8; color: #2B2421;74 }75 .round-btn {76 width: 120px; height: 120px; border-radius: 60px; background: #E7C6A8; color: #2B2421; display: flex; align-items: center; justify-content: center; font-size: 46px;77 }78 79 /* Home indicator */80 .home-indicator {81 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);82 width: 320px; height: 12px; background: #E0E0E0; border-radius: 6px;83 }84</style>85</head>86<body>87<div id="render-target">88 89 <!-- Status Bar -->90 <div class="status-bar">91 <div class="status-left">3:59</div>92 <div class="status-right">93 <!-- Simple icons -->94 <div class="sb-icon">95 <svg viewBox="0 0 24 24" width="28" height="28">96 <path d="M2 6l10 7 10-7v12H2V6zm10 5L2 4h20L12 11z" fill="#000"></path>97 </svg>98 </div>99 <div class="sb-icon">100 <svg viewBox="0 0 24 24" width="28" height="28">101 <path d="M12 2L3 7v10l9 5 9-5V7l-9-5zm0 3.2l6.5 3.6v7.4L12 20.8 5.5 16.2V8.8L12 5.2z" fill="#000"></path>102 </svg>103 </div>104 <div class="sb-icon">105 <svg viewBox="0 0 24 24" width="28" height="28">106 <path d="M3 18h18v2H3v-2zm2-4h14v2H5v-2zm2-4h10v2H7V10z" fill="#000"></path>107 </svg>108 </div>109 </div>110 </div>111 112 <!-- Search Header -->113 <div class="search-header">114 <div class="back-btn">115 <svg viewBox="0 0 24 24" width="44" height="44">116 <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>117 </svg>118 </div>119 <div class="search-bar">120 <div class="search-text">nike hiking shoes for men<span class="caret"></span></div>121 <div class="clear-btn">122 <svg viewBox="0 0 24 24" width="28" height="28">123 <path d="M6 6l12 12M18 6L6 18" stroke="#757575" stroke-width="2.2" stroke-linecap="round"></path>124 </svg>125 </div>126 </div>127 </div>128 129 <!-- Suggestions -->130 <div class="suggestions">131 <div class="suggestion-item">132 <div class="s-text">mens hiking shoes</div>133 <div class="s-arrow">134 <svg viewBox="0 0 24 24" width="40" height="40">135 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>136 </svg>137 </div>138 </div>139 <div class="suggestion-item">140 <div class="s-text"><span class="strong">outdoor</span> shoes men hiking</div>141 <div class="s-arrow">142 <svg viewBox="0 0 24 24" width="40" height="40">143 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>144 </svg>145 </div>146 </div>147 <div class="suggestion-item">148 <div class="s-text">hiking shoes for men</div>149 <div class="s-arrow">150 <svg viewBox="0 0 24 24" width="40" height="40">151 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>152 </svg>153 </div>154 </div>155 <div class="suggestion-item">156 <div class="s-text">men hiking shoes <span class="strong">outdoor</span></div>157 <div class="s-arrow">158 <svg viewBox="0 0 24 24" width="40" height="40">159 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>160 </svg>161 </div>162 </div>163 <div class="suggestion-item">164 <div class="s-text">nike hiking shoes</div>165 <div class="s-arrow">166 <svg viewBox="0 0 24 24" width="40" height="40">167 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>168 </svg>169 </div>170 </div>171 <div class="suggestion-item">172 <div class="s-text"><span class="strong">camping</span> shoes for men</div>173 <div class="s-arrow">174 <svg viewBox="0 0 24 24" width="40" height="40">175 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>176 </svg>177 </div>178 </div>179 <div class="suggestion-item">180 <div class="s-text">shoes men hiking</div>181 <div class="s-arrow">182 <svg viewBox="0 0 24 24" width="40" height="40">183 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>184 </svg>185 </div>186 </div>187 <div class="suggestion-item">188 <div class="s-text">hiking men shoes</div>189 <div class="s-arrow">190 <svg viewBox="0 0 24 24" width="40" height="40">191 <path d="M6 18l8-8v5h4V6H9v4h5L6 18z" fill="#9E9E9E"></path>192 </svg>193 </div>194 </div>195 </div>196 197 <!-- Keyboard -->198 <div class="keyboard">199 <div class="kbd-suggestion-row">200 <span>men</span>201 <span>mens</span>202 <span>men's</span>203 <span class="kbd-suggestion-pip">⌁</span>204 </div>205 206 <div class="key-row">207 <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>208 <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>209 </div>210 <div class="key-row" style="padding: 0 48px;">211 <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>212 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>213 </div>214 <div class="key-row">215 <div class="key shift">216 <svg viewBox="0 0 24 24" width="36" height="36">217 <path d="M12 4l7 8h-4v8H9v-8H5l7-8z" fill="#EAD5C6"></path>218 </svg>219 </div>220 <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>221 <div class="key backspace">222 <svg viewBox="0 0 24 24" width="36" height="36">223 <path d="M6 6l-4 6 4 6h13a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6zm8 3l3 3-3 3-1.5-1.5L14 12l-1.5-1.5L14 9z" fill="#EAD5C6"></path>224 </svg>225 </div>226 </div>227 <div class="key-row" style="align-items: center;">228 <div class="key special wide">?123</div>229 <div class="key wide">,</div>230 <div class="key wide">😊</div>231 <div class="spacebar">space</div>232 <div class="key wide">.</div>233 <div class="round-btn">234 <svg viewBox="0 0 24 24" width="40" height="40">235 <circle cx="11" cy="11" r="7" stroke="#2B2421" stroke-width="2.4" fill="none"></circle>236 <path d="M16.5 16.5L21 21" stroke="#2B2421" stroke-width="2.4" stroke-linecap="round"></path>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- Home indicator -->243 <div class="home-indicator"></div>244 245</div>246</body>247</html>