GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#FAFAFA; border-radius:0;11 }12 13 /* Status bar */14 .status-bar {15 height:120px; background:#EDEDED; color:#2E2E2E;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 40px; font-weight:600; font-size:42px;18 }19 .status-right { display:flex; align-items:center; gap:26px; }20 .status-icon { width:42px; height:42px; border-radius:8px; background:#CFCFCF; }21 .battery {22 width:84px; height:42px; border:2px solid #787878; border-radius:8px; position:relative;23 }24 .battery::after { content:""; position:absolute; right:-12px; top:12px; width:8px; height:18px; background:#787878; border-radius:2px; }25 .battery-fill { position:absolute; left:4px; top:4px; bottom:4px; width:60%; background:#66BB6A; border-radius:6px; }26 27 /* Search bar */28 .search-wrap { padding:24px 24px 12px 24px; background:#FFFFFF; }29 .search-bar {30 height:120px; border-radius:24px; background:#F3F6F8; border:1px solid #D6DEE3;31 display:flex; align-items:center; padding:0 28px; gap:24px;32 }33 .icon-btn {34 width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center;35 background:#FFFFFF; border:1px solid #D0D7DC;36 }37 .search-input {38 flex:1; font-size:44px; color:#2E3A43;39 }40 .search-input .hint { color:#7A8894; }41 .mic-btn { width:90px; height:90px; border-radius:45px; background:#CDEBFA; display:flex; align-items:center; justify-content:center; border:1px solid #98D4EE; }42 43 /* Sections */44 .content { padding:12px 24px 0 24px; }45 .section-title {46 font-size:48px; font-weight:800; color:#2B2B2B; letter-spacing:1px; margin:20px 8px;47 }48 .title-row { display:flex; align-items:center; gap:16px; }49 .trend-pill {50 display:inline-flex; align-items:center; padding:26px 28px; margin:16px 0;51 font-size:36px; color:#1F2933; background:#FFFFFF; border:1px solid #D7D7D7; border-radius:18px;52 width:100%;53 }54 55 /* Product cards */56 .cards { display:flex; gap:24px; }57 .card {58 flex:1; min-width:0; background:#FFFFFF; border:1px solid #DADADA; border-radius:16px; overflow:hidden;59 }60 .card-img {61 height:340px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;62 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;63 position:relative;64 }65 .badge {66 position:absolute; left:12px; top:12px; padding:10px 16px; font-size:28px; font-weight:700;67 color:#FFFFFF; background:#4CAF50; border-radius:24px;68 }69 .card-body { padding:18px; font-size:34px; color:#374151; }70 71 /* Keyboard overlay */72 .keyboard {73 position:absolute; left:0; right:0; bottom:0;74 height:980px; background:#121212; color:#FFFFFF; border-top:1px solid #2A2A2A;75 padding-top:22px;76 }77 .kb-tools { display:flex; align-items:center; gap:42px; padding:0 36px 22px 36px; }78 .kb-tool {79 width:76px; height:76px; border-radius:18px; background:#1E1E1E;80 border:1px solid #2D2D2D; display:flex; align-items:center; justify-content:center;81 }82 83 .kb-rows { padding:12px 18px; }84 .kb-row { display:flex; justify-content:space-between; gap:14px; margin:18px 0; }85 .key {86 flex:1; height:120px; border-radius:18px; background:#222; border:1px solid #333;87 display:flex; align-items:center; justify-content:center; font-size:58px; color:#F2F2F2;88 }89 .key.small { flex:0 0 120px; }90 .key.wide { flex:2; }91 .bottom-bar { display:flex; align-items:center; gap:16px; padding:10px 24px; }92 .space { flex:1; height:120px; border-radius:18px; background:#222; border:1px solid #333; display:flex; align-items:center; justify-content:center; font-size:40px; color:#BDBDBD; }93 .search-cta {94 width:140px; height:140px; border-radius:70px; background:#B6F2F2; display:flex; align-items:center; justify-content:center; border:1px solid #8FE1E1;95 }96 97 /* SVG defaults */98 svg { width:44px; height:44px; }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status Bar -->105 <div class="status-bar">106 <div>10:35</div>107 <div class="status-right">108 <div class="status-icon"></div>109 <div class="status-icon"></div>110 <div class="status-icon"></div>111 <div class="battery"><div class="battery-fill"></div></div>112 </div>113 </div>114 115 <!-- Search -->116 <div class="search-wrap">117 <div class="search-bar">118 <div class="icon-btn">119 <!-- back arrow -->120 <svg viewBox="0 0 24 24">121 <path d="M15 18L9 12l6-6" stroke="#263238" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122 </svg>123 </div>124 <div class="search-input">125 <span class="hint">Search for "</span><span style="color:#2F6AA2; font-weight:700;">Runni</span><span class="hint">"</span>126 </div>127 <div class="mic-btn">128 <!-- mic icon -->129 <svg viewBox="0 0 24 24">130 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0M12 19v3" stroke="#0B6E99" stroke-width="2" fill="none" stroke-linecap="round"/>131 </svg>132 </div>133 </div>134 </div>135 136 <!-- Content -->137 <div class="content">138 <div class="title-row">139 <div class="section-title" style="margin:16px 0;">TRENDING SEARCHES</div>140 <!-- trending up icon -->141 <svg viewBox="0 0 24 24">142 <path d="M3 17l6-6 4 4 6-8" stroke="#2F6AA2" stroke-width="2" fill="none" stroke-linecap="round"/>143 </svg>144 </div>145 146 <div class="trend-pill">Easy Adjust Hiking Pole - Mt100 Comfort Black</div>147 <div class="trend-pill">Easy Adjust Hiking Pole - Mt100 Comfort Black</div>148 <div class="trend-pill">Hiking Pole - Mt100 Ergonomic Green</div>149 <div class="trend-pill">Ultra Compact Trekking Pole - Mt900 Black</div>150 <div class="trend-pill">Ultra Compact Trekking Pole - Mt900 Black</div>151 152 <div class="section-title" style="margin:36px 4px;">TRENDING NEAR YOU</div>153 <div class="cards">154 <div class="card">155 <div class="card-img">156 <div class="badge">ECO DESIGN</div>157 [IMG: Grey Outdoor Jacket]158 </div>159 <div class="card-body">Men’s Outdoor Jacket</div>160 </div>161 <div class="card">162 <div class="card-img">[IMG: Navy Sports Shorts]</div>163 <div class="card-body">Lightweight Sports Shorts</div>164 </div>165 </div>166 </div>167 168 <!-- Keyboard Overlay -->169 <div class="keyboard">170 <div class="kb-tools">171 <div class="kb-tool">172 <!-- grid icon -->173 <svg viewBox="0 0 24 24">174 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z" fill="#BDBDBD"/>175 </svg>176 </div>177 <div class="kb-tool">178 <!-- emoji -->179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="12" r="9" fill="none" stroke="#BDBDBD" stroke-width="2"/>181 <circle cx="9" cy="10" r="1.5" fill="#BDBDBD"/>182 <circle cx="15" cy="10" r="1.5" fill="#BDBDBD"/>183 <path d="M8 15c2 2 6 2 8 0" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="kb-tool">187 <!-- GIF label -->188 <span style="font-weight:800; color:#BDBDBD; font-size:30px;">GIF</span>189 </div>190 <div class="kb-tool">191 <!-- translate -->192 <svg viewBox="0 0 24 24">193 <path d="M3 5h8v6H3zM13 5h8v14h-8zM5 17h6" stroke="#BDBDBD" stroke-width="2" fill="none"/>194 </svg>195 </div>196 <div class="kb-tool">197 <!-- settings -->198 <svg viewBox="0 0 24 24">199 <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4l-2-1 1-2-2-2-2 1-1-2h-4l-1 2-2-1-2 2 1 2-2 1v4l2 1-1 2 2 2 2-1 1 2h4l1-2 2 1 2-2-1-2 2-1v-4z" fill="#BDBDBD"/>200 </svg>201 </div>202 <div class="kb-tool">203 <!-- palette -->204 <svg viewBox="0 0 24 24">205 <path d="M12 3a9 9 0 0 0-9 9c0 5 4 9 9 9h4a3 3 0 0 0 0-6h-2a2 2 0 1 1 0-4h2a3 3 0 1 0 0-6h-4z" fill="#BDBDBD"/>206 </svg>207 </div>208 <div class="kb-tool">209 <!-- mic -->210 <svg viewBox="0 0 24 24">211 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0M12 19v3" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>212 </svg>213 </div>214 </div>215 216 <div class="kb-rows">217 <!-- Row 1 -->218 <div class="kb-row">219 <div class="key">Q</div>220 <div class="key">W</div>221 <div class="key">E</div>222 <div class="key">R</div>223 <div class="key">T</div>224 <div class="key">Y</div>225 <div class="key">U</div>226 <div class="key">I</div>227 <div class="key">O</div>228 <div class="key">P</div>229 </div>230 <!-- Row 2 -->231 <div class="kb-row">232 <div class="key">A</div>233 <div class="key">S</div>234 <div class="key">D</div>235 <div class="key">F</div>236 <div class="key">G</div>237 <div class="key">H</div>238 <div class="key">J</div>239 <div class="key">K</div>240 <div class="key">L</div>241 </div>242 <!-- Row 3 -->243 <div class="kb-row">244 <div class="key small">⇧</div>245 <div class="key">Z</div>246 <div class="key">X</div>247 <div class="key">C</div>248 <div class="key">V</div>249 <div class="key">B</div>250 <div class="key">N</div>251 <div class="key">M</div>252 <div class="key small">253 <!-- backspace -->254 <svg viewBox="0 0 24 24">255 <path d="M6 18l-4-6 4-6h11a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6zM11 9l4 4-4 4" stroke="#F2F2F2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 </div>259 <!-- Bottom row -->260 <div class="bottom-bar">261 <div class="key small">?123</div>262 <div class="key small">,</div>263 <div class="space">space</div>264 <div class="key small">.</div>265 <div class="search-cta">266 <!-- search icon -->267 <svg viewBox="0 0 24 24">268 <circle cx="11" cy="11" r="6" stroke="#0E5A61" stroke-width="2" fill="none"/>269 <path d="M16 16l5 5" stroke="#0E5A61" stroke-width="2" stroke-linecap="round"/>270 </svg>271 </div>272 </div>273 </div>274 </div>275 276</div>277</body>278</html>