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 with Keyboard</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;13 border-radius: 24px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.08);15 }16 17 /* Top gradient header */18 .top-gradient {19 position: absolute; left: 0; top: 0; width: 1080px; height: 350px;20 background: linear-gradient(180deg, #98e4e1 0%, #a6e6cf 100%);21 }22 23 /* Status bar */24 .status-bar {25 position: absolute; top: 24px; left: 32px; right: 32px;26 display: flex; align-items: center; justify-content: space-between;27 color: #0b0b0b; font-weight: 600;28 }29 .status-left { display: flex; align-items: center; gap: 24px; font-size: 40px; }30 .status-right { display: flex; align-items: center; gap: 24px; }31 .status-right svg { width: 46px; height: 46px; }32 .status-icon { display: inline-flex; align-items: center; gap: 10px; font-size: 36px; }33 34 /* Search row */35 .search-row {36 position: absolute; top: 120px; left: 24px; right: 24px;37 display: flex; align-items: center; gap: 24px;38 }39 .back-btn {40 width: 90px; height: 90px; border: none; background: transparent; padding: 0; cursor: default;41 display: flex; align-items: center; justify-content: center;42 }43 .back-btn svg { width: 56px; height: 56px; fill: #1a1a1a; }44 45 .search-input {46 flex: 1; height: 100px; background: #ffffff;47 border-radius: 22px;48 box-shadow: 0 6px 14px rgba(0,0,0,0.15);49 position: relative; display: flex; align-items: center;50 padding: 0 120px 0 110px;51 }52 .search-input .txt {53 font-size: 44px; color: #2c2c2c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;54 }55 .search-icon, .close-icon {56 position: absolute; top: 50%; transform: translateY(-50%);57 }58 .search-icon { left: 26px; }59 .close-icon { right: 26px; }60 .search-icon svg, .close-icon svg { width: 56px; height: 56px; fill: #4c4c4c; }61 62 /* Suggestion row under gradient */63 .suggestion {64 position: absolute; top: 360px; left: 24px; right: 24px;65 height: 110px; display: flex; align-items: center; justify-content: space-between;66 border-top-left-radius: 14px; border-top-right-radius: 14px;67 font-size: 44px; color: #141414;68 }69 .suggestion .arrow {70 width: 60px; height: 60px; margin-right: 14px;71 }72 73 /* Keyboard */74 .keyboard {75 position: absolute; left: 0; bottom: 0; width: 1080px; height: 860px;76 background: #1d1d1d; border-top-left-radius: 24px; border-top-right-radius: 24px;77 box-shadow: 0 -8px 18px rgba(0,0,0,0.25);78 }79 .kb-suggestions {80 height: 90px; color: #eaeaea;81 display: flex; align-items: center; justify-content: center;82 font-size: 40px;83 }84 .kb-rows { padding: 8px 26px 20px; }85 .kb-row { display: flex; justify-content: space-between; margin: 16px 0; }86 .key {87 background: #2a2a2a; color: #f1f1f1; font-size: 44px; font-weight: 600;88 width: 90px; height: 120px; border-radius: 20px;89 display: flex; align-items: center; justify-content: center;90 }91 .key.wide { width: 110px; }92 .key.back { width: 120px; }93 .key.shift { width: 120px; }94 .key.special { background: #a8efe9; color: #0d0d0d; }95 .spacebar { flex: 1; height: 120px; margin: 0 14px; background: #2a2a2a;96 border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #eaeaea; font-size: 40px;97 }98 .bottom-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 0 26px; }99 .circle-btn {100 width: 110px; height: 110px; border-radius: 55px;101 display: flex; align-items: center; justify-content: center;102 background: #a8efe9;103 }104 .circle-btn.dark { background: #2a2a2a; }105 .circle-btn svg { width: 56px; height: 56px; }106 107 /* Home pill */108 .home-pill {109 position: absolute; bottom: 18px; left: 50%;110 width: 420px; height: 14px; background: #e6e6e6; border-radius: 10px;111 transform: translateX(-50%);112 }113</style>114</head>115<body>116<div id="render-target">117 118 <div class="top-gradient">119 <div class="status-bar">120 <div class="status-left">121 <div>6:29</div>122 <div class="status-icon">123 <span>17°</span>124 <!-- tiny timer icon -->125 <svg width="40" height="40" viewBox="0 0 24 24">126 <circle cx="12" cy="12" r="9" stroke="#1a1a1a" stroke-width="2" fill="none"></circle>127 <path d="M12 6v6l4 2" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>128 </svg>129 </div>130 </div>131 <div class="status-right">132 <!-- simple wifi -->133 <svg viewBox="0 0 24 24">134 <path d="M2 9c5-4 15-4 20 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>135 <path d="M5 12c4-3 10-3 14 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>136 <circle cx="12" cy="16" r="2" fill="#1a1a1a"></circle>137 </svg>138 <!-- battery -->139 <svg viewBox="0 0 28 24">140 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#1a1a1a" stroke-width="2" fill="none"></rect>141 <rect x="4" y="8" width="14" height="8" fill="#1a1a1a"></rect>142 <rect x="23" y="9" width="3" height="6" rx="1" fill="#1a1a1a"></rect>143 </svg>144 </div>145 </div>146 147 <div class="search-row">148 <button class="back-btn" aria-label="Back">149 <svg viewBox="0 0 24 24">150 <path d="M15 6l-6 6 6 6" fill="none" stroke="#1a1a1a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>151 </svg>152 </button>153 <div class="search-input">154 <div class="search-icon">155 <svg viewBox="0 0 24 24">156 <circle cx="10" cy="10" r="7" stroke="#4c4c4c" stroke-width="2" fill="none"></circle>157 <path d="M21 21l-5-5" stroke="#4c4c4c" stroke-width="2" stroke-linecap="round"></path>158 </svg>159 </div>160 <div class="txt">Dance shoes for ladies</div>161 <div class="close-icon">162 <svg viewBox="0 0 24 24">163 <path d="M6 6l12 12M18 6L6 18" stroke="#4c4c4c" stroke-width="2" stroke-linecap="round"></path>164 </svg>165 </div>166 </div>167 </div>168 </div>169 170 <div class="suggestion">171 <div style="padding-left: 8px;">ladies dance shoes</div>172 <svg class="arrow" viewBox="0 0 24 24">173 <path d="M8 5l8 7-8 7" fill="none" stroke="#6a6a6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>174 </svg>175 </div>176 177 <!-- Keyboard -->178 <div class="keyboard">179 <div class="kb-suggestions">ladies</div>180 <div class="kb-rows">181 <!-- Row 1 -->182 <div class="kb-row">183 <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>184 <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>185 </div>186 <!-- Row 2 -->187 <div class="kb-row" style="padding: 0 50px;">188 <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>189 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>190 </div>191 <!-- Row 3 -->192 <div class="kb-row">193 <div class="key shift">194 <!-- small home/shift icon -->195 <svg width="40" height="40" viewBox="0 0 24 24">196 <path d="M4 12l8-7 8 7" stroke="#f1f1f1" stroke-width="2" fill="none" stroke-linecap="round"></path>197 <path d="M6 11v7h12v-7" stroke="#f1f1f1" stroke-width="2" fill="none" stroke-linecap="round"></path>198 </svg>199 </div>200 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>201 <div class="key">b</div><div class="key">n</div><div class="key">m</div>202 <div class="key back">203 <!-- backspace icon -->204 <svg width="44" height="44" viewBox="0 0 24 24">205 <path d="M3 12l5-6h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-5-6z" fill="none" stroke="#f1f1f1" stroke-width="2"></path>206 <path d="M14 9l-4 4m0-4l4 4" stroke="#f1f1f1" stroke-width="2" stroke-linecap="round"></path>207 </svg>208 </div>209 </div>210 211 <!-- Bottom Row -->212 <div class="bottom-row">213 <div class="key special" style="width:140px;">?123</div>214 <div class="key" style="width:90px;">,</div>215 <div class="key" style="width:90px;">216 <!-- emoji icon -->217 <svg width="44" height="44" viewBox="0 0 24 24">218 <circle cx="12" cy="12" r="9" fill="none" stroke="#f1f1f1" stroke-width="2"></circle>219 <circle cx="9" cy="10" r="1.3" fill="#f1f1f1"></circle>220 <circle cx="15" cy="10" r="1.3" fill="#f1f1f1"></circle>221 <path d="M8 14c1.5 1 6.5 1 8 0" stroke="#f1f1f1" stroke-width="2" fill="none" stroke-linecap="round"></path>222 </svg>223 </div>224 <div class="spacebar">space</div>225 <div class="key" style="width:90px;">.</div>226 <div class="circle-btn dark">227 <!-- mic icon -->228 <svg viewBox="0 0 24 24">229 <rect x="9" y="4" width="6" height="10" rx="3" fill="#f1f1f1"></rect>230 <path d="M6 11a6 6 0 0 0 12 0" stroke="#f1f1f1" stroke-width="2" fill="none"></path>231 <path d="M12 17v3" stroke="#f1f1f1" stroke-width="2"></path>232 </svg>233 </div>234 <div class="circle-btn">235 <!-- send/enter arrow -->236 <svg viewBox="0 0 24 24">237 <path d="M4 12h12M12 6l6 6-6 6" fill="none" stroke="#0d0d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>238 </svg>239 </div>240 </div>241 </div>242 </div>243 244 <div class="home-pill"></div>245</div>246</body>247</html>