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 Mock</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: #111213; color: #f5f5f5;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 120px;17 background: #101010;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; box-sizing: border-box; font-weight: 600; font-size: 40px;20 }21 .status-right { display: flex; align-items: center; gap: 26px; font-size: 34px; }22 .status-icon { opacity: 0.85; }23 .battery {24 display: inline-flex; align-items: center; gap: 8px;25 padding: 6px 10px; border: 2px solid #777; border-radius: 6px; font-size: 30px;26 }27 .wifi {28 width: 40px; height: 32px;29 display: inline-flex; justify-content: center; align-items: center;30 border-radius: 6px; border: 2px solid #777; font-size: 26px;31 }32 33 /* Search header */34 .search-header {35 position: absolute; top: 120px; left: 0; width: 100%; height: 150px;36 background: #2c3528; display: flex; align-items: center;37 padding: 0 28px; box-sizing: border-box; gap: 24px;38 border-bottom: 1px solid #3a3a3a;39 font-size: 52px; font-weight: 600;40 }41 .icon-btn {42 width: 84px; height: 84px; border-radius: 42px;43 display: flex; justify-content: center; align-items: center;44 background: #222; border: 2px solid #3e3e3e;45 }46 .search-title { letter-spacing: 0.5px; }47 48 /* Chips */49 .chip-bar {50 position: absolute; top: 270px; left: 0; width: 100%; height: 120px;51 display: flex; align-items: center; gap: 18px; padding: 0 28px;52 box-sizing: border-box;53 }54 .chip {55 display: inline-flex; align-items: center; gap: 16px;56 padding: 16px 26px; height: 90px;57 background: #1a1a1a; border: 2px solid #444; border-radius: 22px;58 font-size: 38px; color: #eaeaea;59 }60 .chip .square {61 width: 46px; height: 46px; border-radius: 8px; border: 1px solid #666;62 background: #375a9c;63 }64 .chip.pdf .square { background: #b4443b; }65 .chip.photos .square { background: #a8605a; }66 67 /* Main empty area */68 .content {69 position: absolute; top: 390px; left: 0; width: 100%; height: 1070px;70 background: #121212;71 }72 73 /* Keyboard */74 .keyboard {75 position: absolute; bottom: 40px; left: 0; width: 100%; height: 900px;76 background: #0e0e0f; border-top: 1px solid #333;77 box-sizing: border-box; padding: 24px 22px;78 }79 .tool-row {80 height: 120px; display: flex; align-items: center; gap: 40px;81 padding: 0 10px; box-sizing: border-box;82 }83 .tool {84 width: 100px; height: 100px; border-radius: 22px;85 background: #1f1f1f; border: 2px solid #3a3a3a;86 display: flex; justify-content: center; align-items: center;87 }88 .tool svg { width: 56px; height: 56px; }89 .tool.mic { background: #c9f99a; border: none; }90 .tool.mic svg { width: 60px; height: 60px; }91 .keys {92 display: flex; flex-direction: column; gap: 24px; margin-top: 18px;93 }94 .row { display: flex; justify-content: space-between; padding: 0 8px; }95 .key {96 width: 92px; height: 120px; border-radius: 24px;97 background: #2a2a2a; color: #eee; font-size: 46px; font-weight: 600;98 display: flex; align-items: center; justify-content: center;99 border: 2px solid #3c3c3c;100 }101 .key.wide { width: 140px; }102 .key.xwide { width: 520px; }103 .key.small { width: 120px; }104 .right-controls { display: flex; align-items: center; gap: 18px; }105 106 /* Bottom bar & search bubble */107 .bottom-row {108 display: flex; align-items: center; justify-content: space-between;109 padding: 0 8px; margin-top: 18px;110 }111 .pill {112 width: 160px; height: 120px; border-radius: 28px;113 background: #bcd2a7; color: #16230f; font-weight: 700; font-size: 44px;114 display: flex; align-items: center; justify-content: center;115 }116 .space { width: 520px; height: 120px; border-radius: 28px;117 background: #2a2a2a; border: 2px solid #3c3c3c;118 }119 .search-circle {120 width: 140px; height: 140px; border-radius: 70px;121 background: #c9f99a; display: flex; justify-content: center; align-items: center;122 }123 .home-indicator {124 position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);125 width: 360px; height: 12px; background: #dcdcdc; border-radius: 6px; opacity: 0.3;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status bar -->133 <div class="status-bar">134 <div>9:37</div>135 <div class="status-right">136 <div class="status-icon">LR</div>137 <div class="status-icon">N</div>138 <div class="status-icon">▶</div>139 <div class="wifi">Wi</div>140 <div class="battery"><span>🔋</span><span>100%</span></div>141 </div>142 </div>143 144 <!-- Header -->145 <div class="search-header">146 <div class="icon-btn">147 <svg viewBox="0 0 24 24" fill="#eaeaea">148 <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-7z"/>149 </svg>150 </div>151 <div class="search-title">Search in Drive</div>152 </div>153 154 <!-- Filter chips -->155 <div class="chip-bar">156 <div class="chip">157 <div class="square"></div>158 <span>Documents</span>159 </div>160 <div class="chip pdf">161 <div class="square"></div>162 <span>PDFs</span>163 </div>164 <div class="chip photos">165 <div class="square"></div>166 <span>Photos & images</span>167 </div>168 </div>169 170 <!-- Empty content area -->171 <div class="content"></div>172 173 <!-- Keyboard -->174 <div class="keyboard">175 <div class="tool-row">176 <div class="tool">177 <svg viewBox="0 0 32 32" fill="#fff">178 <circle cx="16" cy="12" r="6"></circle>179 <rect x="10" y="20" width="12" height="8" rx="4"></rect>180 </svg>181 </div>182 <div class="tool" style="font-size:40px; font-weight:800;">GIF</div>183 <div class="tool">184 <svg viewBox="0 0 32 32" fill="#fff">185 <circle cx="16" cy="16" r="12" stroke="#fff" stroke-width="2" fill="none"></circle>186 <rect x="15" y="6" width="2" height="6"></rect>187 <rect x="15" y="20" width="2" height="6"></rect>188 </svg>189 </div>190 <div class="tool">191 <svg viewBox="0 0 32 32" fill="#fff">192 <text x="8" y="22" font-size="16" fill="#fff">G</text>193 </svg>194 </div>195 <div class="tool">196 <svg viewBox="0 0 32 32" fill="#fff">197 <circle cx="14" cy="18" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>198 <circle cx="22" cy="10" r="6"></circle>199 </svg>200 </div>201 <div class="tool mic">202 <svg viewBox="0 0 32 32" fill="#1a2c0f">203 <rect x="12" y="6" width="8" height="14" rx="4"></rect>204 <path d="M8 16c0 5 4 8 8 8s8-3 8-8" stroke="#1a2c0f" stroke-width="3" fill="none"></path>205 <rect x="15" y="24" width="2" height="6"></rect>206 </svg>207 </div>208 </div>209 210 <div class="keys">211 <div class="row">212 <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>213 <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>214 </div>215 <div class="row">216 <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>217 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>218 <div class="key wide">219 <svg viewBox="0 0 32 32" fill="#fff" width="48" height="48">220 <path d="M8 8h16v2H8zm0 8h16v2H8zm0 8h16v2H8z"></path>221 </svg>222 </div>223 </div>224 <div class="row">225 <div class="key small">226 <svg viewBox="0 0 32 32" fill="#fff">227 <path d="M6 26l6-16h4l6 16h-4l-1-4H11l-1 4H6zm7-8h6l-3-9-3 9z"></path>228 </svg>229 </div>230 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>231 <div class="key wide">232 <svg viewBox="0 0 32 32" fill="#fff" width="46" height="46">233 <path d="M8 10h16l-6 6 6 6H8l6-6-6-6z"></path>234 </svg>235 </div>236 </div>237 238 <div class="bottom-row">239 <div class="pill">?123</div>240 <div class="key">,</div>241 <div class="key">☺</div>242 <div class="space"></div>243 <div class="key">.</div>244 <div class="search-circle">245 <svg viewBox="0 0 32 32" fill="#18220f">246 <circle cx="14" cy="14" r="9" stroke="#18220f" stroke-width="3" fill="none"></circle>247 <rect x="20" y="20" width="8" height="3" transform="rotate(45 20 20)"></rect>248 </svg>249 </div>250 </div>251 </div>252 </div>253 254 <div class="home-indicator"></div>255</div>256</body>257</html>