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 - Flashcards</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121314;13 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;14 color: #E5E7EB;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 110px;21 padding: 0 36px;22 display: flex; align-items: center; justify-content: space-between;23 color: #DADDE1; font-weight: 600; font-size: 44px;24 background: #121314;25 }26 .sb-icons { display: flex; align-items: center; gap: 26px; }27 .sb-dot { width: 12px; height: 12px; background: #DADDE1; border-radius: 50%; opacity: .9; }28 .sb-icon {29 width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;30 opacity: .9;31 }32 33 /* Search app bar */34 .app-bar {35 position: absolute; top: 110px; left: 0; right: 0;36 height: 160px;37 display: flex; align-items: center;38 padding: 0 24px;39 background: #1A1C1F;40 box-shadow: 0 2px 0 rgba(255,255,255,0.05);41 }42 .search-field {43 flex: 1; height: 104px; border-radius: 18px;44 background: #24272B;45 display: flex; align-items: center; gap: 24px;46 padding: 0 28px;47 }48 .icon-btn {49 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;50 color: #C9CDD3;51 }52 .search-text {53 flex: 1; font-size: 44px; color: #E6E6E6;54 }55 56 /* Suggestion list */57 .content {58 position: absolute; top: 270px; left: 0; right: 0; bottom: 0;59 }60 .suggestion {61 height: 120px; display: flex; align-items: center; justify-content: space-between;62 padding: 0 36px;63 border-bottom: 1px solid #2A2D31;64 }65 .suggestion-left { display: flex; align-items: center; gap: 28px; }66 .suggestion .label { font-size: 46px; color: #E5E7EB; }67 .suggestion .right-icon { color: #AAB0B7; }68 69 /* Keyboard suggestion strip */70 .kb-strip {71 position: absolute; left: 0; right: 0; bottom: 930px;72 height: 110px; background: #16181B;73 display: flex; align-items: center; gap: 22px; padding: 0 24px;74 border-top: 1px solid #232529;75 color: #DADDE1;76 font-size: 40px;77 }78 .divider { width: 2px; height: 46px; background: #31343A; }79 .pill { padding: 10px 18px; border-radius: 12px; background: transparent; color: #DADDE1; }80 81 /* Keyboard */82 .keyboard {83 position: absolute; left: 0; right: 0; bottom: 120px;84 height: 810px; background: #15171A; border-top: 1px solid #2A2D31;85 padding: 24px;86 }87 .row { display: flex; gap: 16px; margin-bottom: 22px; }88 .key {89 flex: 1; height: 120px;90 background: #2B2F33; border: 1px solid #3A3F44;91 border-radius: 18px; color: #E6EAEE; font-size: 44px;92 display: flex; align-items: center; justify-content: center;93 }94 .key.small { flex: 0 0 90px; }95 .key.medium { flex: 0 0 140px; }96 .key.wide { flex: 0 0 200px; }97 .space { flex: 1.8; }98 .key.blue { background: #BFD7F2; color: #0F172A; border-color: #BFD7F2; }99 .key.dark { background: #202428; }100 101 /* Bottom nav pill */102 .nav-pill {103 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);104 width: 220px; height: 16px; border-radius: 12px; background: #D0D4DA; opacity: .7;105 }106 /* SVG helpers */107 svg { display: block; }108</style>109</head>110<body>111<div id="render-target">112 113 <!-- Status bar -->114 <div class="status-bar">115 <div class="time">10:26</div>116 <div class="sb-icons">117 <!-- moon -->118 <div class="sb-icon">119 <svg width="36" height="36" viewBox="0 0 24 24">120 <path d="M12 3a9 9 0 1 0 9 9c-3.5 1.8-7.8-.3-9-4.5A9 9 0 0 1 12 3z" fill="#DADDE1"/>121 </svg>122 </div>123 <div class="sb-dot"></div>124 <div class="sb-dot"></div>125 <div class="sb-dot"></div>126 <!-- wifi -->127 <div class="sb-icon">128 <svg width="36" height="36" viewBox="0 0 24 24">129 <path d="M2 8c5.5-4.7 14.5-4.7 20 0M5 12c3.8-3.1 10.2-3.1 14 0M8 16c2.1-1.7 5.9-1.7 8 0M12 20l2-2-2-2-2 2 2 2z" stroke="#DADDE1" stroke-width="1.6" fill="none" stroke-linecap="round"/>130 </svg>131 </div>132 <!-- battery -->133 <div class="sb-icon">134 <svg width="46" height="46" viewBox="0 0 24 24">135 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#DADDE1" stroke-width="1.6" fill="none"/>136 <rect x="5" y="8" width="12" height="8" fill="#DADDE1"/>137 <rect x="20" y="9" width="2" height="6" fill="#DADDE1"/>138 </svg>139 </div>140 </div>141 </div>142 143 <!-- Search app bar -->144 <div class="app-bar">145 <div class="icon-btn">146 <svg width="54" height="54" viewBox="0 0 24 24">147 <polyline points="15,5 8,12 15,19" stroke="#E6EAEE" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div class="search-field">151 <svg width="46" height="46" viewBox="0 0 24 24">152 <circle cx="10" cy="10" r="6" stroke="#C9CDD3" stroke-width="2" fill="none"/>153 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"/>154 </svg>155 <div class="search-text">Flashcards</div>156 <div class="icon-btn">157 <svg width="46" height="46" viewBox="0 0 24 24">158 <line x1="6" y1="6" x2="18" y2="18" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"/>159 <line x1="18" y1="6" x2="6" y2="18" stroke="#C9CDD3" stroke-width="2" stroke-linecap="round"/>160 </svg>161 </div>162 </div>163 </div>164 165 <div class="content">166 <!-- Single suggestion -->167 <div class="suggestion">168 <div class="suggestion-left">169 <svg width="54" height="54" viewBox="0 0 24 24">170 <circle cx="10" cy="10" r="6" stroke="#9CA3AF" stroke-width="2" fill="none"/>171 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>172 </svg>173 <div class="label">Flashcards</div>174 </div>175 <div class="right-icon">176 <svg width="46" height="46" viewBox="0 0 24 24">177 <polyline points="6,18 18,6" stroke="#AAB0B7" stroke-width="2" fill="none" stroke-linecap="round"/>178 <polyline points="9,6 18,6 18,15" stroke="#AAB0B7" stroke-width="2" fill="none" stroke-linecap="round"/>179 </svg>180 </div>181 </div>182 </div>183 184 <!-- Keyboard suggestion strip -->185 <div class="kb-strip">186 <div class="icon-btn" style="width:72px;height:72px;border-radius:18px;background:#2B2F33;border:1px solid #3A3F44;">187 <svg width="40" height="40" viewBox="0 0 24 24">188 <rect x="3" y="6" width="18" height="12" rx="2" fill="#DADDE1"/>189 <rect x="6" y="9" width="12" height="2" fill="#15171A"/>190 <rect x="6" y="13" width="12" height="2" fill="#15171A"/>191 </svg>192 </div>193 <div class="pill">Flashcards</div>194 <div class="divider"></div>195 <div class="pill">Flash cards</div>196 <div class="divider"></div>197 <div class="pill">Flash ards</div>198 <div style="flex:1"></div>199 <div class="icon-btn" style="width:72px;height:72px;border-radius:36px;background:#2B2F33;border:1px solid #3A3F44;">200 <svg width="40" height="40" viewBox="0 0 24 24">201 <path d="M12 3c2.2 0 4 1.8 4 4v3c0 2.2-1.8 4-4 4s-4-1.8-4-4V7c0-2.2 1.8-4 4-4z" fill="#DADDE1"/>202 <path d="M8 14c0 2.2 1.8 4 4 4s4-1.8 4-4" stroke="#DADDE1" stroke-width="2" fill="none" stroke-linecap="round"/>203 <rect x="11" y="18" width="2" height="3" fill="#DADDE1"/>204 </svg>205 </div>206 </div>207 208 <!-- Keyboard -->209 <div class="keyboard">210 <!-- Row 1 -->211 <div class="row">212 <div class="key">q</div>213 <div class="key">w</div>214 <div class="key">e</div>215 <div class="key">r</div>216 <div class="key">t</div>217 <div class="key">y</div>218 <div class="key">u</div>219 <div class="key">i</div>220 <div class="key">o</div>221 <div class="key">p</div>222 </div>223 <!-- Row 2 -->224 <div class="row">225 <div class="key">a</div>226 <div class="key">s</div>227 <div class="key">d</div>228 <div class="key">f</div>229 <div class="key">g</div>230 <div class="key">h</div>231 <div class="key">j</div>232 <div class="key">k</div>233 <div class="key">l</div>234 </div>235 <!-- Row 3 -->236 <div class="row">237 <div class="key medium">⇧</div>238 <div class="key">z</div>239 <div class="key">x</div>240 <div class="key">c</div>241 <div class="key">v</div>242 <div class="key">b</div>243 <div class="key">n</div>244 <div class="key">m</div>245 <div class="key medium">246 <svg width="44" height="44" viewBox="0 0 24 24">247 <path d="M3 12l5-5h9a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H8l-5-5z" fill="#E6EAEE"/>248 <rect x="11" y="10" width="6" height="2" fill="#15171A"/>249 </svg>250 </div>251 </div>252 <!-- Row 4 -->253 <div class="row">254 <div class="key medium" style="border-radius:28px;background:#3B4250;">?123</div>255 <div class="key medium">,</div>256 <div class="key medium">🙂</div>257 <div class="key space"> </div>258 <div class="key medium">.</div>259 <div class="key medium blue">260 <svg width="44" height="44" viewBox="0 0 24 24">261 <circle cx="11" cy="11" r="6" stroke="#0F172A" stroke-width="2" fill="none"/>262 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#0F172A" stroke-width="2" stroke-linecap="round"/>263 </svg>264 </div>265 </div>266 </div>267 268 <!-- Bottom navigation pill -->269 <div class="nav-pill"></div>270 271</div>272</body>273</html>