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">6<title>Search UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: "Roboto", system-ui, -apple-system, Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#191617; /* dark app background */13 border-radius:24px;14 box-shadow: 0 8px 30px rgba(0,0,0,0.35);15 color:#e9d4da;16 }17 .status-bar {18 position:absolute; top:0; left:0; right:0;19 height:92px; padding:0 36px;20 display:flex; align-items:center; justify-content:space-between;21 color:#e9d4da; font-size:34px; letter-spacing:0.5px;22 }23 .status-left { display:flex; align-items:center; gap:18px; }24 .status-right { display:flex; align-items:center; gap:22px; }25 .dot { width:10px; height:10px; background:#e9d4da; border-radius:50%; opacity:0.7; }26 .icon-circle {27 width:28px; height:28px; border-radius:50%;28 border:2px solid #e9d4da33;29 }30 /* Top search bar */31 .search-area {32 position:absolute; top:92px; left:0; right:0;33 height:128px; display:flex; align-items:center;34 padding:0 32px 0 24px; gap:24px;35 }36 .back-btn, .clear-btn {37 width:60px; height:60px; display:flex; align-items:center; justify-content:center;38 }39 .search-text {40 flex:1; font-size:48px; color:#f0d7de;41 display:flex; align-items:center;42 }43 .caret {44 width:3px; height:56px; background:#f0b7c4; margin-left:10px; border-radius:2px;45 }46 .divider {47 position:absolute; top:220px; left:0; right:0;48 height:2px; background:#3a3336;49 }50 /* Suggestion list */51 .suggestion {52 position:absolute; top:222px; left:0; right:0;53 height:120px; display:flex; align-items:center; justify-content:space-between;54 padding:0 40px; font-size:42px; color:#e9d4da;55 }56 .suggestion .time { color:#c9b7bf; }57 /* Keyboard */58 .keyboard {59 position:absolute; bottom:0; left:0; right:0;60 height:900px; background:#1b1718; border-top-left-radius:26px; border-top-right-radius:26px;61 box-shadow: 0 -8px 24px rgba(0,0,0,0.35);62 }63 .candidate-strip {64 height:110px; display:flex; align-items:center; gap:26px;65 padding:0 28px; border-bottom:2px solid #2b2527;66 color:#f1d9df; font-size:40px;67 }68 .cand-left {69 width:74px; height:74px; border-radius:20px; background:#2a2527; display:flex; align-items:center; justify-content:center;70 color:#cbb8bf; font-size:36px; border:1px solid #3a3436;71 }72 .cand-divider { width:2px; height:46px; background:#3a3336; }73 .cand-spacer { flex:1; }74 .mic {75 width:74px; height:74px; border-radius:37px; background:#2a2527; display:flex; align-items:center; justify-content:center;76 border:1px solid #3a3436;77 }78 79 .rows { padding-top:16px; }80 .row { display:flex; gap:14px; padding:0 24px; margin-top:18px; }81 .key {82 flex:1; height:120px; background:#2a2627; border-radius:22px; color:#ead0d8; display:flex; align-items:center; justify-content:center;83 font-size:46px; border:1px solid #3a3436;84 }85 .key.small { flex:0 0 96px; }86 .key.medium { flex:0 0 120px; }87 .key.wide { flex:0 0 160px; }88 .key.space { flex:1.6; font-size:38px; color:#cbb8bf; }89 .key.circle {90 height:150px; flex:0 0 150px; border-radius:75px; font-size:38px;91 background:#e7c2ce; color:#1b1718; border:none;92 }93 .key.circle.gray { background:#2a2527; color:#e6d3da; border:1px solid #3a3436; }94 .key.search {95 background:#f0c8d2; color:#1b1718; border:none; font-weight:600;96 }97 .backspace {98 flex:0 0 150px; height:120px; border-radius:22px; background:#2a2627; border:1px solid #3a3436; display:flex; align-items:center; justify-content:center;99 }100 .gesture-bar {101 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);102 width:220px; height:8px; background:#e7e7e7; border-radius:6px; opacity:0.8;103 }104 /* SVG colors */105 svg { display:block; }106 .ico { stroke:#e9d4da; fill:none; stroke-width:6; }107 .ico-pink { stroke:#f0b7c4; }108</style>109</head>110<body>111<div id="render-target">112 113 <!-- Status bar -->114 <div class="status-bar">115 <div class="status-left">116 <div style="font-weight:600;">8:51</div>117 <div class="icon-circle"></div>118 <div class="icon-circle" style="transform: rotate(45deg);"></div>119 <div class="icon-circle"></div>120 <div class="dot"></div>121 </div>122 <div class="status-right">123 <!-- WiFi -->124 <svg width="40" height="34" viewBox="0 0 40 34">125 <path class="ico" d="M4 12c8-8 24-8 32 0M9 18c6-6 16-6 22 0M15 23c3-3 8-3 11 0M20 29l2 2" stroke="#e9d4da" />126 </svg>127 <!-- Signal -->128 <svg width="36" height="34" viewBox="0 0 36 34">129 <path class="ico" d="M4 28h4M12 22h4M20 16h4M28 8h4" stroke="#e9d4da"/>130 </svg>131 <!-- Battery -->132 <svg width="48" height="28" viewBox="0 0 48 28">133 <rect x="2" y="4" width="38" height="20" rx="4" stroke="#e9d4da" fill="none" stroke-width="4"/>134 <rect x="6" y="8" width="30" height="12" rx="3" fill="#e9d4da"/>135 <rect x="42" y="9" width="4" height="10" rx="2" fill="#e9d4da"/>136 </svg>137 </div>138 </div>139 140 <!-- Search bar -->141 <div class="search-area">142 <div class="back-btn">143 <svg width="44" height="44" viewBox="0 0 44 44">144 <path class="ico ico-pink" d="M28 10L14 22l14 12" />145 </svg>146 </div>147 <div class="search-text">Queenstown New Zealand<div class="caret"></div></div>148 <div class="clear-btn">149 <svg width="44" height="44" viewBox="0 0 44 44">150 <path class="ico" d="M12 12l20 20M32 12L12 32" />151 </svg>152 </div>153 </div>154 <div class="divider"></div>155 156 <!-- Suggestion -->157 <div class="suggestion">158 <div>Queenstown, New Zealand</div>159 <div class="time">4:21 AM</div>160 </div>161 162 <!-- Keyboard -->163 <div class="keyboard">164 <div class="candidate-strip">165 <div class="cand-left">⌨︎</div>166 <div>Zealand</div>167 <div class="cand-divider"></div>168 <div>Zealand's</div>169 <div class="cand-spacer"></div>170 <div class="mic">171 <svg width="32" height="32" viewBox="0 0 32 32">172 <rect x="10" y="6" width="12" height="14" rx="6" fill="#e6d3da"/>173 <path d="M6 16c0 6 5 10 10 10s10-4 10-10" stroke="#e6d3da" stroke-width="3" fill="none"/>174 <path d="M16 26v4" stroke="#e6d3da" stroke-width="3"/>175 </svg>176 </div>177 </div>178 179 <div class="rows">180 <!-- Row 1 -->181 <div class="row">182 <div class="key">q</div>183 <div class="key">w</div>184 <div class="key">e</div>185 <div class="key">r</div>186 <div class="key">t</div>187 <div class="key">y</div>188 <div class="key">u</div>189 <div class="key">i</div>190 <div class="key">o</div>191 <div class="key">p</div>192 </div>193 <!-- Row 2 -->194 <div class="row">195 <div class="key">a</div>196 <div class="key">s</div>197 <div class="key">d</div>198 <div class="key">f</div>199 <div class="key">g</div>200 <div class="key">h</div>201 <div class="key">j</div>202 <div class="key">k</div>203 <div class="key">l</div>204 </div>205 <!-- Row 3 -->206 <div class="row">207 <div class="key wide">⇧</div>208 <div class="key">z</div>209 <div class="key">x</div>210 <div class="key">c</div>211 <div class="key">v</div>212 <div class="key">b</div>213 <div class="key">n</div>214 <div class="key">m</div>215 <div class="backspace">216 <svg width="64" height="42" viewBox="0 0 64 42">217 <path d="M8 21l12-12h30a6 6 0 016 6v12a6 6 0 01-6 6H20L8 21z" fill="#3a3436"/>218 <path d="M30 14l12 14M42 14L30 28" stroke="#e6d3da" stroke-width="4"/>219 </svg>220 </div>221 </div>222 <!-- Row 4 -->223 <div class="row" style="align-items:center;">224 <div class="key circle">?123</div>225 <div class="key medium">,</div>226 <div class="key circle gray">☺</div>227 <div class="key space">space</div>228 <div class="key medium">.</div>229 <div class="key circle search">230 <svg width="36" height="36" viewBox="0 0 36 36">231 <circle cx="16" cy="16" r="10" stroke="#1b1718" stroke-width="4" fill="none"/>232 <path d="M24 24l8 8" stroke="#1b1718" stroke-width="4" />233 </svg>234 </div>235 </div>236 </div>237 238 <div class="gesture-bar"></div>239 </div>240 241</div>242</body>243</html>