GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Search with Keyboard</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #2b2b2b; font-size: 42px;20 }21 .sb-left { display: flex; align-items: center; gap: 24px; }22 .sb-icons { display: flex; align-items: center; gap: 18px; }23 .dot { width: 18px; height: 18px; background: #6f6f6f; border-radius: 50%; opacity: .7; }24 .sb-right { display: flex; align-items: center; gap: 22px; }25 .tiny-icon {26 width: 38px; height: 38px; border-radius: 8px; background: #d6d6d6;27 display: inline-flex; align-items: center; justify-content: center;28 }29 30 /* Search area */31 .search-area { position: absolute; top: 140px; left: 20px; right: 20px; }32 .search-pill {33 height: 120px; border-radius: 60px; background: #fff;34 border: 1px solid #e2e2e2; box-shadow: 0 2px 0 rgba(0,0,0,0.02);35 display: flex; align-items: center; padding: 0 34px; gap: 24px;36 position: relative;37 }38 .circle-btn {39 width: 76px; height: 76px; border-radius: 38px; background: #f0f0f0;40 border: 1px solid #d7d7d7; display: flex; align-items: center; justify-content: center;41 }42 .search-text { font-size: 56px; color: #111; line-height: 1; }43 .selection {44 background: #3B82F6; color: #fff; border-radius: 10px;45 padding: 8px 14px; display: inline-block;46 }47 /* Selection handles (approximation) */48 .handle {49 position: absolute; top: 10px;50 width: 44px; height: 44px; background: #3B82F6;51 border-radius: 22px;52 }53 .handle:after {54 content: ""; position: absolute; bottom: -18px; left: 10px;55 width: 24px; height: 18px; background: #3B82F6; border-radius: 12px;56 }57 .handle.left { left: 140px; }58 .handle.right { left: 430px; }59 60 /* Floating selection toolbar */61 .floating-tools {62 position: absolute; top: 260px; left: 40px; width: 1000px;63 height: 110px; border-radius: 55px; background: #fff;64 border: 1px solid #e5e5e5; box-shadow: 0 8px 24px rgba(0,0,0,0.08);65 display: flex; align-items: center; padding: 0 36px; gap: 40px;66 font-size: 42px; color: #222;67 }68 .tool { color: #222; }69 .tool.more { font-weight: bold; letter-spacing: 6px; }70 .enter-arrow {71 margin-left: auto; width: 42px; height: 42px;72 display: inline-flex; align-items: center; justify-content: center; color: #555;73 }74 75 /* Search result */76 .result {77 position: absolute; top: 420px; left: 36px; right: 36px;78 display: flex; align-items: center; gap: 28px;79 padding-top: 20px;80 }81 .loc-pin {82 width: 66px; height: 66px; border-radius: 50%;83 background: #efefef; border: 1px solid #d5d5d5;84 display: flex; align-items: center; justify-content: center;85 }86 .result-text { flex: 1; }87 .title { font-size: 52px; color: #222; }88 .subtitle { font-size: 40px; color: #6f6f6f; margin-top: 10px; }89 .mini-arrow {90 width: 44px; height: 44px; border-radius: 12px; border: 1px solid #d9d9d9;91 display: flex; align-items: center; justify-content: center; color: #555;92 }93 94 /* Keyboard (approximation) */95 .keyboard {96 position: absolute; bottom: 0; left: 0; right: 0;97 height: 900px; background: #1d1d1f; color: #fff;98 border-top-left-radius: 20px; border-top-right-radius: 20px;99 }100 .kb-top {101 height: 120px; padding: 0 48px; display: flex;102 align-items: center; gap: 36px;103 }104 .kb-pill {105 width: 88px; height: 88px; border-radius: 20px; background: #2c2c2f;106 border: 1px solid #3a3a3d; display: flex; align-items: center; justify-content: center;107 color: #bfbfbf; font-size: 40px;108 }109 110 .kb-row { padding: 18px 24px; display: grid; gap: 16px; }111 .row-1 { grid-template-columns: repeat(10, 1fr); }112 .row-2 { grid-template-columns: repeat(9, 1fr); padding: 18px 64px; }113 .row-3 { grid-template-columns: repeat(8, 1fr); padding: 18px 120px; }114 .key {115 height: 116px; border-radius: 22px; background: #2b2b2e;116 border: 1px solid #3a3a3d; display: flex; align-items: center; justify-content: center;117 font-size: 44px; color: #ededed;118 }119 120 .kb-bottom {121 display: grid; grid-template-columns: 160px 120px 1fr 120px 160px; gap: 18px;122 padding: 22px 24px;123 align-items: center;124 }125 .space { height: 120px; border-radius: 22px; background: #2b2b2e; border: 1px solid #3a3a3d; }126 .blue-search {127 width: 160px; height: 160px; border-radius: 80px; background: #cfe0ff;128 display: flex; align-items: center; justify-content: center; justify-self: end;129 color: #1f4fd6; border: 6px solid #D8E6FF;130 }131 132 /* Generic icon styles */133 svg.icon { width: 40px; height: 40px; }134 .home-indicator {135 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);136 width: 480px; height: 10px; background: #e6e6e6; border-radius: 6px;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status Bar -->144 <div class="status-bar">145 <div class="sb-left">146 <div>11:02</div>147 <div class="sb-icons">148 <div class="dot"></div>149 <div class="dot"></div>150 <div class="dot"></div>151 <div class="dot"></div>152 <div class="dot"></div>153 </div>154 </div>155 <div class="sb-right">156 <div class="tiny-icon">157 <svg class="icon" viewBox="0 0 24 24">158 <path d="M3 12h18" stroke="#666" stroke-width="2" fill="none"/>159 <path d="M21 12l-4 4" stroke="#666" stroke-width="2" fill="none"/>160 </svg>161 </div>162 <div class="tiny-icon">163 <svg class="icon" viewBox="0 0 24 24">164 <rect x="4" y="6" width="16" height="12" rx="2" fill="#888"/>165 </svg>166 </div>167 <div class="tiny-icon">168 <svg class="icon" viewBox="0 0 24 24">169 <rect x="6" y="6" width="12" height="12" rx="3" fill="#999"/>170 <rect x="10" y="4" width="4" height="2" fill="#999"/>171 </svg>172 </div>173 </div>174 </div>175 176 <!-- Search -->177 <div class="search-area">178 <div class="search-pill">179 <div class="circle-btn">180 <svg class="icon" viewBox="0 0 24 24">181 <path d="M15 5L6 12l9 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 185 <div class="search-text"><span class="selection">New York</span></div>186 187 <div class="circle-btn" style="margin-left:auto;">188 <svg class="icon" viewBox="0 0 24 24">189 <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>190 </svg>191 </div>192 193 <!-- blue selection handles -->194 <div class="handle left"></div>195 <div class="handle right"></div>196 </div>197 198 <!-- Floating tools -->199 <div class="floating-tools">200 <span class="tool">Cut</span>201 <span class="tool">Copy</span>202 <span class="tool">Paste</span>203 <span class="tool">Share</span>204 <span class="tool">Select all</span>205 <span class="tool more">⋮</span>206 <div class="enter-arrow">↪</div>207 </div>208 </div>209 210 <!-- Search Result -->211 <div class="result">212 <div class="loc-pin">213 <svg class="icon" viewBox="0 0 24 24">214 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="#9e9e9e"/>215 <circle cx="12" cy="9" r="3" fill="#d0d0d0"/>216 </svg>217 </div>218 <div class="result-text">219 <div class="title">New York State</div>220 <div class="subtitle">USA</div>221 </div>222 <div class="mini-arrow">↗</div>223 </div>224 225 <!-- Empty content area to mimic white space -->226 <div style="position:absolute; top:600px; left:0; right:0; bottom:900px; background:#fff;"></div>227 228 <!-- Keyboard -->229 <div class="keyboard">230 <div class="kb-top">231 <div class="kb-pill">⌘</div>232 <div class="kb-pill">🙂</div>233 <div class="kb-pill">GIF</div>234 <div class="kb-pill">⚙️</div>235 <div class="kb-pill">G</div>236 <div class="kb-pill">🎨</div>237 <div class="kb-pill">🎤</div>238 </div>239 240 <div class="kb-row row-1">241 <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>242 <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>243 </div>244 <div class="kb-row row-2">245 <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>246 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>247 </div>248 <div class="kb-row row-3">249 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>250 <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">⌫</div>251 </div>252 253 <div class="kb-bottom">254 <div class="key">?123</div>255 <div class="key">,</div>256 <div class="space"></div>257 <div class="key">.</div>258 <div class="blue-search">259 <svg class="icon" viewBox="0 0 24 24">260 <circle cx="10" cy="10" r="7" stroke="#1f4fd6" stroke-width="2" fill="none"/>261 <path d="M15 15l6 6" stroke="#1f4fd6" stroke-width="2" fill="none" stroke-linecap="round"/>262 </svg>263 </div>264 </div>265 </div>266 267 <div class="home-indicator"></div>268</div>269</body>270</html>