GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #f7f7f7;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 110px; background: #138A3C; color: #fff;18 display: flex; align-items: center; padding: 0 34px;19 box-sizing: border-box;20 }21 .status-left { font-size: 40px; font-weight: 500; }22 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }23 .status-icon { width: 36px; height: 36px; opacity: 0.9; }24 25 /* App bar with search */26 .app-bar {27 position: absolute; top: 110px; left: 0; right: 0;28 height: 170px; background: #138A3C; display: flex; align-items: center;29 padding: 0 28px; box-sizing: border-box;30 }31 .back-btn { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; margin-right: 18px; }32 .search-wrap {33 flex: 1; height: 110px; background: #ffffff; border-radius: 20px;34 display: flex; align-items: center; padding: 0 22px; box-sizing: border-box;35 box-shadow: 0 2px 6px rgba(0,0,0,0.1);36 }37 .search-icon { width: 50px; height: 50px; margin-right: 18px; opacity: 0.6; }38 .search-text {39 flex: 1; font-size: 40px; color: #222; white-space: nowrap; overflow: hidden;40 }41 .search-text .highlight { color: #138A3C; }42 .clear-btn {43 width: 60px; height: 60px; border-radius: 50%; background: #D7F5E2;44 display: flex; align-items: center; justify-content: center; margin-left: 12px;45 }46 .clear-btn svg { width: 34px; height: 34px; stroke: #138A3C; }47 48 /* Suggestion overlay */49 .content-area { position: absolute; top: 280px; left: 0; right: 0; bottom: 900px; }50 .dim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }51 .suggestion-sheet {52 position: absolute; top: 10px; left: 0; right: 0;53 background: #fff; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.2);54 margin: 0 0; padding: 12px 0;55 }56 .suggestion-item {57 display: flex; align-items: center; padding: 20px 34px; gap: 22px; cursor: default;58 }59 .suggestion-item .text { font-size: 38px; color: #333; flex: 1; }60 .suggestion-item .arrow { width: 40px; height: 40px; opacity: 0.6; }61 62 /* Trending section (dimmed behind) */63 .trending {64 position: absolute; top: 220px; left: 30px; right: 30px;65 color: #333;66 }67 .trending-title { display: flex; align-items: center; gap: 16px; font-size: 40px; color: #333; }68 .trend-list { display: flex; gap: 26px; margin-top: 30px; }69 .trend-item { width: 170px; }70 .img-ph {71 width: 170px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;72 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 18px;73 }74 .trend-label { text-align: center; font-size: 32px; color: #333; margin-top: 16px; }75 76 /* Keyboard */77 .keyboard {78 position: absolute; left: 0; right: 0; bottom: 0;79 height: 900px; background: #0E0E0F; color: #fff; border-top-left-radius: 18px; border-top-right-radius: 18px;80 }81 .kb-suggestions {82 height: 120px; background: #1b1b1c; display: flex; align-items: center; padding: 0 30px; box-sizing: border-box; gap: 26px;83 font-size: 36px;84 }85 .kb-chip {86 color: #d7d7d7; background: #2a2a2b; padding: 10px 24px; border-radius: 20px;87 }88 .kb-spacer { margin-left: auto; display: flex; align-items: center; gap: 26px; }89 .kb-mic svg { width: 40px; height: 40px; }90 91 .kb-rows { padding: 24px 22px; box-sizing: border-box; }92 .kb-row { display: grid; grid-gap: 14px; margin-bottom: 18px; }93 .row1 { grid-template-columns: repeat(10, 1fr); }94 .row2 { grid-template-columns: 0.9fr repeat(8, 1fr) 0.9fr; } /* a..l with small margins */95 .row3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.6fr; }96 .row4 { grid-template-columns: 1.6fr 1fr 1fr 5fr 1fr 1.6fr; }97 98 .key {99 height: 120px; background: #1d1d1e; border-radius: 16px;100 display: flex; align-items: center; justify-content: center; font-size: 46px; color: #eaeaea;101 }102 .key.secondary { background: #2b2b2c; color: #dcdcdc; }103 .key.action { background: #B8F6CC; color: #103e21; }104 .key.icon svg { width: 50px; height: 50px; }105 .space { font-size: 28px; color: #999; }106 107 /* Home indicator */108 .home-indicator {109 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);110 width: 300px; height: 12px; background: #e9e9e9; border-radius: 12px; opacity: 0.9;111 }112</style>113</head>114<body>115<div id="render-target">116 <!-- Status Bar -->117 <div class="status-bar">118 <div class="status-left">10:11</div>119 <div class="status-right">120 <!-- simple glyphs to mimic status icons -->121 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>122 <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" fill="#fff"/></svg>123 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18l-5-12-4 9-3-6z" fill="#fff"/></svg>124 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="3"/></svg>125 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/></svg>126 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18v-3H3v3zm0-6h14v-3H3v3zm0-6h10V3H3v3z" fill="#fff"/></svg>127 <svg class="status-icon" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="18" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="9" y="2" width="6" height="2" fill="#fff"/></svg>128 </div>129 </div>130 131 <!-- App Bar -->132 <div class="app-bar">133 <div class="back-btn">134 <svg viewBox="0 0 24 24" width="60" height="60">135 <path d="M15 5l-7 7 7 7" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>136 </svg>137 </div>138 <div class="search-wrap">139 <svg class="search-icon" viewBox="0 0 24 24">140 <circle cx="10" cy="10" r="6" fill="none" stroke="#333" stroke-width="2"/><path d="M14 14l6 6" stroke="#333" stroke-width="2"/>141 </svg>142 <div class="search-text">Toblerone milk <span class="highlight">chocolate</span></div>143 <div class="clear-btn">144 <svg viewBox="0 0 24 24" fill="none">145 <path d="M6 6l12 12M18 6L6 18" stroke-width="2"/>146 </svg>147 </div>148 </div>149 </div>150 151 <!-- Content Area with dim and suggestion dropdown -->152 <div class="content-area">153 <div class="dim"></div>154 155 <div class="suggestion-sheet">156 <div class="suggestion-item">157 <div class="text">toblerone milk chocolate</div>158 <svg class="arrow" viewBox="0 0 24 24">159 <path d="M8 5l8 7-8 7" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 </div>163 164 <!-- Trending section behind (dimmed) -->165 <div class="trending">166 <div class="trending-title">167 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 17l5-6 4 4 7-9" stroke="#666" stroke-width="2" fill="none"/></svg>168 <span>Trending in your area</span>169 </div>170 <div class="trend-list">171 <div class="trend-item">172 <div class="img-ph">[IMG: Oil]</div>173 <div class="trend-label">Oil</div>174 </div>175 <div class="trend-item">176 <div class="img-ph">[IMG: Ghee]</div>177 <div class="trend-label">Ghee</div>178 </div>179 <div class="trend-item">180 <div class="img-ph">[IMG: Sugar]</div>181 <div class="trend-label">Sugar</div>182 </div>183 <div class="trend-item">184 <div class="img-ph">[IMG: Rice]</div>185 <div class="trend-label">Rice</div>186 </div>187 <div class="trend-item">188 <div class="img-ph">[IMG: Biscuits]</div>189 <div class="trend-label">Biscuits</div>190 </div>191 </div>192 </div>193 </div>194 195 <!-- Keyboard -->196 <div class="keyboard">197 <div class="kb-suggestions">198 <div class="kb-chip">chocolate</div>199 <div class="kb-chip">chocolates</div>200 <div class="kb-chip">🍫</div>201 <div class="kb-chip">🍜</div>202 <div class="kb-spacer">203 <div class="kb-mic">204 <svg viewBox="0 0 24 24">205 <rect x="9" y="4" width="6" height="10" rx="3" fill="#dcdcdc"/>206 <path d="M6 11a6 6 0 0012 0M12 17v4" stroke="#dcdcdc" stroke-width="2" fill="none"/>207 </svg>208 </div>209 </div>210 </div>211 <div class="kb-rows">212 <div class="kb-row row1">213 <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>214 <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>215 </div>216 <div class="kb-row row2">217 <div class="key secondary">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>218 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key secondary">l</div>219 </div>220 <div class="kb-row row3">221 <div class="key icon secondary">222 <svg viewBox="0 0 24 24"><path d="M8 16l4-4 4 4" stroke="#dcdcdc" stroke-width="2" fill="none"/></svg>223 </div>224 <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>225 <div class="key icon secondary">226 <svg viewBox="0 0 24 24"><path d="M5 5h14v14H5z" fill="none" stroke="#dcdcdc" stroke-width="2"/><path d="M15 9l-6 6" stroke="#dcdcdc" stroke-width="2"/></svg>227 </div>228 </div>229 <div class="kb-row row4">230 <div class="key secondary">?123</div>231 <div class="key secondary">,</div>232 <div class="key secondary">😊</div>233 <div class="key space">space</div>234 <div class="key secondary">.</div>235 <div class="key action icon">236 <svg viewBox="0 0 24 24">237 <circle cx="10" cy="10" r="6" fill="none" stroke="#0f5f2e" stroke-width="2"/><path d="M14 14l6 6" stroke="#0f5f2e" stroke-width="2"/>238 </svg>239 </div>240 </div>241 </div>242 <div class="home-indicator"></div>243 </div>244</div>245</body>246</html>