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>Mobile UI - Search</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #EEEEEE;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #212121;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 left: 0; top: 0;23 width: 100%;24 height: 84px;25 background: #1976D2;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 24px;30 box-sizing: border-box;31 font-weight: 600;32 letter-spacing: 0.5px;33 }34 .status-left { font-size: 34px; }35 .status-right {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 16px;40 }41 .sb-dot {42 width: 10px; height: 10px; background: #fff; border-radius: 50%;43 opacity: 0.9;44 }45 .sb-icon {46 width: 34px; height: 20px; border: 2px solid #fff; border-radius: 4px; opacity: 0.9;47 }48 .sb-battery {49 width: 48px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;50 }51 .sb-battery::after {52 content: ""; position: absolute; right: -6px; top: 7px;53 width: 6px; height: 10px; background: #fff; border-radius: 1px;54 }55 .sb-battery-fill {56 position: absolute; left: 2px; top: 2px; bottom: 2px; right: 10px; background: #fff;57 }58 59 /* App bar with search */60 .appbar {61 position: absolute;62 left: 0; top: 84px;63 width: 100%;64 height: 176px;65 background: #1976D2;66 box-sizing: border-box;67 padding: 0 24px;68 display: flex;69 align-items: center;70 gap: 24px;71 color: #fff;72 }73 .appbar .title {74 font-size: 46px;75 color: #fff;76 flex: 1;77 white-space: nowrap;78 }79 .icon-btn {80 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;81 }82 .icon-btn svg { width: 44px; height: 44px; fill: #fff; }83 84 /* secondary tools row */85 .tools {86 position: absolute;87 left: 0; top: 260px;88 width: 100%;89 height: 104px;90 background: #1E7DDC;91 display: flex;92 align-items: center;93 justify-content: center;94 gap: 64px;95 }96 .tools .tool { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }97 .tools svg { width: 56px; height: 56px; fill: #fff; }98 99 /* Content area */100 .content {101 position: absolute;102 left: 0; top: 364px;103 width: 100%; height: 980px;104 background: #E7E7E7;105 }106 .card {107 width: 480px;108 background: #fff;109 border-radius: 18px;110 margin-left: 28px;111 margin-top: 56px;112 box-shadow: 0 3px 8px rgba(0,0,0,0.18);113 padding: 28px;114 line-height: 1.4;115 color: #323232;116 }117 .card h3 {118 margin: 0 0 10px 0;119 font-size: 34px;120 }121 .card p {122 font-size: 28px;123 margin: 0;124 }125 126 /* Ad banner */127 .ad-banner {128 position: absolute;129 left: 0; top: 1344px;130 width: 100%;131 height: 140px;132 background: #E0E0E0;133 border-top: 1px solid #CFCFCF;134 border-bottom: 1px solid #CFCFCF;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #757575;139 font-weight: 600;140 }141 .ad-banner .ad-label {142 border: 1px solid #BDBDBD;143 padding: 10px 16px;144 border-radius: 6px;145 background: #E0E0E0;146 }147 .ad-controls {148 position: absolute;149 right: 16px; top: 10px;150 display: flex; gap: 10px;151 }152 .ad-controls .circle {153 width: 36px; height: 36px; border-radius: 50%; background: #ffffff; border: 1px solid #C9C9C9;154 display: flex; align-items: center; justify-content: center;155 color: #1976D2; font-weight: 700;156 font-size: 22px;157 }158 159 /* Keyboard */160 .keyboard {161 position: absolute;162 left: 0; bottom: 0;163 width: 100%; height: 880px;164 background: #1D1B1B;165 border-top-left-radius: 24px;166 border-top-right-radius: 24px;167 box-sizing: border-box;168 padding-top: 18px;169 }170 .kb-suggestions {171 display: flex;172 gap: 40px;173 padding: 10px 28px 0 28px;174 color: #EDEDED;175 font-size: 34px;176 }177 .kb-suggestions span { opacity: 0.96; }178 179 .kb-grid {180 margin-top: 22px;181 }182 .row {183 display: flex;184 justify-content: space-between;185 padding: 0 28px;186 margin: 18px 0;187 }188 .key {189 width: 88px; height: 96px;190 background: #2A2426;191 border-radius: 20px;192 color: #F1F1F1;193 font-size: 38px;194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .key.wide { width: 120px; }199 .key.backspace {200 width: 150px;201 }202 .key.shift { width: 140px; }203 .space-row {204 display: flex;205 align-items: center;206 justify-content: space-between;207 padding: 0 28px;208 margin-top: 16px;209 }210 .key.small { width: 128px; height: 96px; font-size: 32px; }211 .spacebar {212 height: 96px;213 background: #2A2426;214 border-radius: 22px;215 flex: 1;216 margin: 0 16px;217 }218 .search-btn {219 width: 128px; height: 96px; background: #E8B8B6; color: #2C2C2C; border-radius: 22px;220 display: flex; align-items: center; justify-content: center;221 }222 .search-btn svg { width: 44px; height: 44px; fill: #2C2C2C; }223 224 /* Home indicator */225 .home-indicator {226 position: absolute;227 bottom: 12px; left: 50%;228 transform: translateX(-50%);229 width: 320px; height: 8px; border-radius: 6px; background: #FFFFFF;230 opacity: 0.85;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status bar -->238 <div class="status-bar">239 <div class="status-left">11:50</div>240 <div class="status-right">241 <div class="sb-dot"></div>242 <div class="sb-dot"></div>243 <div class="sb-dot"></div>244 <div class="sb-icon"></div>245 <div class="sb-battery"><div class="sb-battery-fill"></div></div>246 </div>247 </div>248 249 <!-- App bar with search -->250 <div class="appbar">251 <div class="icon-btn" aria-label="Back">252 <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.6 1.9L3.5 12 13.9 2.6z"/></svg>253 </div>254 <div class="icon-btn" aria-label="Search">255 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM6.5 12A5.5 5.5 0 1 1 12 6.5 5.5 5.5 0 0 1 6.5 12z"/></svg>256 </div>257 <div class="title">Social Media</div>258 <div class="icon-btn" aria-label="Clear">259 <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>260 </div>261 </div>262 263 <!-- Tool buttons -->264 <div class="tools">265 <div class="tool" aria-label="List">266 <svg viewBox="0 0 24 24"><path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h14v2H3v-2z"/></svg>267 </div>268 <div class="tool" aria-label="Voice">269 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-5 0a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6h2z"/></svg>270 </div>271 <div class="tool" aria-label="Image">272 <svg viewBox="0 0 24 24"><path d="M19 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 12H5V7h14v10zM8 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm2 2 3 4 2-3 3 5H6l4-6z"/></svg>273 </div>274 <div class="tool" aria-label="Timer">275 <svg viewBox="0 0 24 24"><path d="M15 1H9v2h6V1zM12 4a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 9H7v-2h6v2z"/></svg>276 </div>277 <div class="tool" aria-label="Palette">278 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0 0 18h2a2 2 0 0 0 0-4h-1a2 2 0 0 1 0-4h3a5 5 0 0 0 0-10h-4zM7 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4-2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>279 </div>280 </div>281 282 <!-- Content area with card -->283 <div class="content">284 <div class="card">285 <h3>Social Media</h3>286 <p>Social media is a collective term for websites and applications that focus on communication, community-based input, interaction, content-sharing and collaboration. People use social media to stay in touch and interact with friends, family and various communities.</p>287 </div>288 </div>289 290 <!-- Ad banner placeholder -->291 <div class="ad-banner">292 <div class="ad-label">[IMG: Ad Banner]</div>293 <div class="ad-controls">294 <div class="circle">i</div>295 <div class="circle">×</div>296 </div>297 </div>298 299 <!-- Keyboard -->300 <div class="keyboard">301 <div class="kb-suggestions">302 <span>Media</span>303 <span>Mediation</span>304 <span>Median</span>305 </div>306 307 <div class="kb-grid">308 <div class="row">309 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>310 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>311 <div class="key">o</div><div class="key">p</div>312 </div>313 314 <div class="row" style="padding:0 68px;">315 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>316 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>317 </div>318 319 <div class="row">320 <div class="key shift">⇧</div>321 <div class="key">z</div><div class="key">x</div><div class="key">c</div>322 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>323 <div class="key backspace">⌫</div>324 </div>325 326 <div class="space-row">327 <div class="key small">?123</div>328 <div class="key small">,</div>329 <div class="spacebar"></div>330 <div class="key small">.</div>331 <div class="search-btn" aria-label="Search">332 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM6.5 12A5.5 5.5 0 1 1 12 6.5 5.5 5.5 0 0 1 6.5 12z"/></svg>333 </div>334 </div>335 </div>336 337 <div class="home-indicator"></div>338 </div>339</div>340</body>341</html>