GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">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;10 position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:100px;17 background:#0a6a39; color:#fff;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 32px; box-sizing:border-box;20 font-size:40px; letter-spacing:0.5px;21 }22 .status-icons { display:flex; align-items:center; gap:28px; }23 .status-dot { width:12px; height:12px; background:#cfe6cf; border-radius:50%; opacity:0.8; }24 .status-icon {25 width:44px; height:44px; border:2px solid rgba(255,255,255,0.8); border-radius:8px;26 }27 28 /* App bar with search */29 .app-bar {30 position:absolute; top:100px; left:0; width:100%; height:150px;31 background:#ffffff; display:flex; align-items:center; padding:0 24px; box-sizing:border-box;32 }33 .back-btn {34 width:80px; height:80px; display:flex; align-items:center; justify-content:center;35 margin-right:12px;36 }37 .search-pill {38 flex:1; height:96px; background:#f1f1f1; border-radius:48px;39 display:flex; align-items:center; padding:0 28px; box-sizing:border-box;40 color:#8a8a8a; font-size:38px;41 }42 .search-pill .text { flex:1; padding:0 18px; }43 .mic-btn {44 width:72px; height:72px; background:#2e7d32; border-radius:36px;45 display:flex; align-items:center; justify-content:center;46 }47 48 /* Recent search chip */49 .chip-row {50 position:absolute; top:270px; left:0; width:100%;51 padding:0 28px; box-sizing:border-box; display:flex; align-items:center; gap:18px;52 }53 .chip-icon {54 width:64px; height:64px; border-radius:32px; border:2px solid #d9d9d9; display:flex; align-items:center; justify-content:center;55 }56 .chip {57 height:76px; display:inline-flex; align-items:center; padding:0 28px;58 border:2px solid #d9d9d9; border-radius:38px; font-size:36px; color:#5e5e5e; background:#ffffff;59 }60 .divider {61 position:absolute; top:352px; left:0; width:100%; height:4px; background:#e5e5e5;62 }63 64 /* Trending header */65 .section-header {66 position:absolute; top:394px; left:0; width:100%;67 padding:0 32px; box-sizing:border-box; display:flex; align-items:center; gap:16px;68 color:#7a7a7a; font-size:42px; font-weight:600;69 }70 71 /* Categories row */72 .cards {73 position:absolute; top:480px; left:0; width:100%;74 padding:0 28px; box-sizing:border-box; display:flex; gap:28px;75 }76 .card {77 width:180px; background:#f5f5f5; border-radius:28px; padding:24px 18px; box-sizing:border-box;78 display:flex; flex-direction:column; align-items:center; gap:16px;79 box-shadow: 0 0 0 1px #eeeeee inset;80 }81 .img-ph {82 width:140px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;83 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; text-align:center;84 border-radius:12px;85 }86 .card label {87 font-size:36px; color:#3e3e3e;88 }89 90 /* White content area spacer */91 .content-space { position:absolute; top:780px; left:0; width:100%; height:760px; }92 93 /* Keyboard mock */94 .keyboard {95 position:absolute; left:0; bottom:60px; width:100%; height:820px;96 background:#111; border-top-left-radius:40px; border-top-right-radius:40px;97 color:#e7e7e7;98 }99 .kb-top {100 height:120px; display:flex; align-items:center; gap:60px;101 padding:0 40px; box-sizing:border-box;102 }103 .kb-top .top-icon {104 width:78px; height:78px; border-radius:18px; border:2px solid #2a2a2a; display:flex; align-items:center; justify-content:center;105 }106 107 .keys { padding:0 32px; box-sizing:border-box; display:flex; flex-direction:column; gap:26px; }108 .row { display:flex; gap:16px; justify-content:center; }109 .key {110 width:90px; height:110px; background:#1f1f1f; border-radius:22px; display:flex; align-items:center; justify-content:center;111 font-size:42px; color:#e7e7e7;112 }113 .key.wide { width:140px; }114 .key.extra-wide { width:460px; }115 .key.green {116 background:#c8e6c9; color:#1b5e20; font-weight:bold;117 }118 .key.action {119 background:#2b2b2b;120 }121 122 /* Gesture bar */123 .gesture {124 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);125 width:320px; height:14px; background:#ffffff; border-radius:10px; opacity:0.8;126 }127 128 /* Simple helpers */129 .svg { display:inline-block; }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div>10:09</div>138 <div class="status-icons">139 <div class="status-icon"></div>140 <div class="status-icon"></div>141 <div class="status-dot"></div>142 <div class="status-icon"></div>143 <div class="status-icon"></div>144 </div>145 </div>146 147 <!-- App bar with search -->148 <div class="app-bar">149 <div class="back-btn">150 <svg class="svg" width="48" height="48" viewBox="0 0 24 24">151 <path d="M15 18l-6-6 6-6" stroke="#2e2e2e" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 </div>154 <div class="search-pill">155 <svg class="svg" width="44" height="44" viewBox="0 0 24 24">156 <circle cx="11" cy="11" r="7" stroke="#9e9e9e" stroke-width="2" fill="none"/>157 <path d="M20 20l-4-4" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>158 </svg>159 <div class="text">Aapko Kya Chahiye?</div>160 <div class="mic-btn">161 <svg class="svg" width="36" height="36" viewBox="0 0 24 24">162 <rect x="9" y="4" width="6" height="10" rx="3" fill="#fff"/>163 <path d="M6 11a6 6 0 0012 0M12 17v3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>164 </svg>165 </div>166 </div>167 </div>168 169 <!-- Recent search chip -->170 <div class="chip-row">171 <div class="chip-icon">172 <svg class="svg" width="36" height="36" viewBox="0 0 24 24">173 <path d="M12 5v6l4 2" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174 <path d="M21 12a9 9 0 11-9-9" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/>175 </svg>176 </div>177 <div class="chip">almond chocolate</div>178 </div>179 <div class="divider"></div>180 181 <!-- Trending header -->182 <div class="section-header">183 <svg class="svg" width="44" height="44" viewBox="0 0 24 24">184 <path d="M4 16l6-6 4 4 6-6" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 <div>Trending in your area</div>187 </div>188 189 <!-- Category cards -->190 <div class="cards">191 <div class="card">192 <div class="img-ph">[IMG: Oil]</div>193 <label>Oil</label>194 </div>195 <div class="card">196 <div class="img-ph">[IMG: Ghee]</div>197 <label>Ghee</label>198 </div>199 <div class="card">200 <div class="img-ph">[IMG: Sugar]</div>201 <label>Sugar</label>202 </div>203 <div class="card">204 <div class="img-ph">[IMG: Rice]</div>205 <label>Rice</label>206 </div>207 <div class="card">208 <div class="img-ph">[IMG: Biscuits]</div>209 <label>Biscuits</label>210 </div>211 </div>212 213 <div class="content-space"></div>214 215 <!-- Keyboard mock -->216 <div class="keyboard">217 <div class="kb-top">218 <div class="top-icon"></div>219 <div class="top-icon"></div>220 <div class="top-icon">GIF</div>221 <div class="top-icon"></div>222 <div class="top-icon"></div>223 <div class="top-icon"></div>224 <div class="top-icon">225 <svg class="svg" width="44" height="44" viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="9" stroke="#e7e7e7" stroke-width="2" fill="none"/>227 <path d="M12 6v6l4 2" stroke="#e7e7e7" stroke-width="2" fill="none" stroke-linecap="round"/>228 </svg>229 </div>230 </div>231 232 <div class="keys">233 <div class="row">234 <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><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>235 </div>236 <div class="row">237 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>238 </div>239 <div class="row">240 <div class="key action">⇧</div>241 <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>242 <div class="key action">243 <svg class="svg" width="36" height="36" viewBox="0 0 24 24">244 <path d="M6 6l12 12M6 18L18 6" stroke="#e7e7e7" stroke-width="2" stroke-linecap="round"/>245 </svg>246 </div>247 </div>248 <div class="row">249 <div class="key green wide">?123</div>250 <div class="key action">,</div>251 <div class="key action">😊</div>252 <div class="key extra-wide action"></div>253 <div class="key action">.</div>254 <div class="key green wide">255 <svg class="svg" width="36" height="36" viewBox="0 0 24 24">256 <rect x="9" y="4" width="6" height="10" rx="3" fill="#1b5e20"/>257 <path d="M6 11a6 6 0 0012 0M12 17v3" stroke="#1b5e20" stroke-width="2" fill="none" stroke-linecap="round"/>258 </svg>259 </div>260 </div>261 </div>262 </div>263 264 <div class="gesture"></div>265</div>266</body>267</html>