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>Search UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; color:#212121;12 }13 14 /* Status bar */15 .status-bar {16 height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17 color:#3c4043; font-size:38px; letter-spacing:0.2px;18 }19 .status-right { display:flex; align-items:center; gap:28px; }20 .icon { width:40px; height:40px; display:inline-block; }21 .icon svg { width:100%; height:100%; fill:#5f6368; }22 23 /* Content area (scrollable above keyboard) */24 .content {25 position:absolute; left:0; right:0; top:110px; bottom:840px; overflow-y:auto;26 }27 28 /* Search row */29 .search-wrap { padding:18px 28px 10px 24px; display:flex; align-items:center; gap:22px; }30 .back-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }31 .search-bar {32 flex:1; height:112px; border-radius:56px; background:#fff; border:1px solid #e0e0e0;33 box-shadow: 0 1px 2px rgba(0,0,0,0.08); display:flex; align-items:center; padding:0 28px;34 }35 .search-placeholder { flex:1; color:#9e9e9e; font-size:42px; }36 .mic-btn { width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center; background:#f1f3f4; }37 38 /* Quick chips */39 .chips-row { padding:12px 24px 8px; display:flex; align-items:center; gap:24px; }40 .chip {41 flex: 1 1 0; min-width:0;42 height:120px; border-radius:60px; background:#f6f7f8; display:flex; align-items:center; padding:0 28px; gap:22px;43 border:1px solid #ececec;44 }45 .chip .circle {46 width:64px; height:64px; border-radius:50%; background:#ffffff; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;47 }48 .chip .labels { line-height:1.05; }49 .chip .labels .title { font-weight:600; font-size:36px; color:#3c4043; }50 .chip .labels .sub { font-size:30px; color:#9e9e9e; margin-top:6px; }51 .divider-v {52 width:2px; align-self:stretch; background:#e6e6e6; border-radius:1px;53 }54 .more-chip { width:140px; flex:0 0 auto; justify-content:center; }55 56 /* Section header */57 .section-header {58 padding:28px 32px 8px; display:flex; align-items:center; justify-content:space-between; color:#616161;59 font-size:34px; letter-spacing:0.2px;60 }61 62 /* Recent list */63 .list { padding:0 0 20px; }64 .item {65 padding:28px 32px; display:flex; gap:26px; align-items:flex-start;66 border-top:1px solid #ececec;67 }68 .item:first-child { border-top:0; }69 .left-icon {70 width:72px; height:72px; border-radius:36px; background:#f0f1f2; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;71 }72 .left-icon.blue { background:#e8f0fe; border-color:#c6dafc; }73 .texts { flex:1; min-width:0; }74 .title { font-size:40px; color:#202124; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }75 .subtitle { margin-top:10px; font-size:32px; color:#757575; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }76 .subtitle .green { color:#0f9d58; font-weight:600; }77 78 /* Keyboard mock */79 .keyboard {80 position:absolute; left:0; right:0; bottom:56px; height:780px; background:#111315; color:#e9eaed;81 border-top-left-radius:24px; border-top-right-radius:24px; box-shadow:0 -4px 12px rgba(0,0,0,0.28);82 padding:18px 22px 24px;83 }84 .kb-toolbar { display:flex; align-items:center; gap:26px; padding:8px 6px 6px; }85 .kb-toolbar .tool {86 width:64px; height:64px; border-radius:18px; background:#1c1f21; display:flex; align-items:center; justify-content:center; border:1px solid #2a2e31;87 color:#c8cdd2; font-size:26px;88 }89 .kb-rows { margin-top:10px; }90 .row { display:flex; justify-content:space-between; gap:14px; padding:14px 4px; }91 .key {92 flex:1; height:120px; background:#1f2326; border-radius:18px; display:flex; align-items:center; justify-content:center; border:1px solid #2a2e31;93 font-size:46px; color:#e9eaed;94 }95 .key.wide { flex:1.6; }96 .key.space { flex:6.4; }97 .key.circle {98 width:120px; flex:0 0 120px; border-radius:60px;99 }100 .key.func { background:#252a2e; color:#cbd1d6; }101 .key.accent { background:#cfe9ff; color:#0b57d0; border-color:#cfe9ff; }102 .kb-bottom { display:flex; gap:14px; padding:14px 4px; }103 .home-indicator {104 position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:340px; height:10px; background:#cfcfcf; border-radius:8px;105 }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status Bar -->112 <div class="status-bar">113 <div class="time">3:37</div>114 <div class="status-right">115 <span class="icon" title="location">116 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>117 </span>118 <span class="icon" title="signal-wifi">119 <svg viewBox="0 0 24 24"><path d="M12 20l4-5H8l4 5zM2 8l2 2c6-5 12-5 18 0l2-2C16-1 8-1 2 8z"/></svg>120 </span>121 <span class="icon" title="battery">122 <svg viewBox="0 0 24 24"><path d="M16 6h2v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h11z"/></svg>123 </span>124 </div>125 </div>126 127 <!-- Scrollable content -->128 <div class="content">129 130 <!-- Search bar -->131 <div class="search-wrap">132 <div class="back-btn">133 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>134 </div>135 <div class="search-bar">136 <div class="search-placeholder">Search here</div>137 <div class="mic-btn">138 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-5-3h2a3 3 0 0 0 6 0h2a5 5 0 0 1-10 0zm4 6h2v3h-2z" fill="#5f6368"/></svg>139 </div>140 </div>141 </div>142 143 <!-- Quick chips row -->144 <div class="chips-row">145 <div class="chip">146 <div class="circle">147 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>148 </div>149 <div class="labels">150 <div class="title">Home</div>151 <div class="sub">Set location</div>152 </div>153 </div>154 <div class="divider-v"></div>155 <div class="chip">156 <div class="circle">157 <svg class="icon" viewBox="0 0 24 24"><path d="M7 4h10v4H7V4zm-2 6h14v10H5V10zm4 2v6h6v-6H9z"/></svg>158 </div>159 <div class="labels">160 <div class="title">Work</div>161 <div class="sub">Set location</div>162 </div>163 </div>164 <div class="divider-v"></div>165 <div class="chip more-chip">166 <div class="circle">167 <svg class="icon" viewBox="0 0 24 24"><path d="M5 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>168 </div>169 <div class="labels">170 <div class="title">More</div>171 </div>172 </div>173 </div>174 175 <div class="section-header">176 <div>Recent</div>177 <span class="icon">178 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>179 </span>180 </div>181 182 <!-- Recent list -->183 <div class="list">184 <div class="item">185 <div class="left-icon">186 <svg class="icon" viewBox="0 0 24 24"><path d="M12 8v5l4 2 .8-1.8-2.8-1.2V8zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>187 </div>188 <div class="texts">189 <div class="title">Jama Masjid, Chandni Chowk</div>190 <div class="subtitle">New Delhi, Delhi</div>191 </div>192 </div>193 194 <div class="item">195 <div class="left-icon">196 <svg class="icon" viewBox="0 0 24 24"><path d="M12 8v5l4 2 .8-1.8-2.8-1.2V8zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>197 </div>198 <div class="texts">199 <div class="title">Connaught Place</div>200 <div class="subtitle">New Delhi, Delhi</div>201 </div>202 </div>203 204 <div class="item">205 <div class="left-icon blue">206 <svg class="icon" viewBox="0 0 24 24"><path fill="#1a73e8" d="M12 2l6 6-6 14-6-14 6-6zm0 5.5L9.5 9h5L12 7.5z"/></svg>207 </div>208 <div class="texts">209 <div class="title">Arjan Garh</div>210 <div class="subtitle">Metro Station Arjan Garh, Aya Nagar, New Delhi...</div>211 </div>212 </div>213 214 <div class="item">215 <div class="left-icon">216 <svg class="icon" viewBox="0 0 24 24"><path d="M12 8v5l4 2 .8-1.8-2.8-1.2V8zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>217 </div>218 <div class="texts">219 <div class="title">GlobalLogic Technologies Limited</div>220 <div class="subtitle"><span class="green">Open</span> · Closes 1:30 AM</div>221 </div>222 </div>223 224 <div class="item">225 <div class="left-icon">226 <svg class="icon" viewBox="0 0 24 24"><path d="M12 8v5l4 2 .8-1.8-2.8-1.2V8zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>227 </div>228 <div class="texts">229 <div class="title">All India Institute Of Medical Sciences</div>230 <div class="subtitle">Sri Aurobindo Marg, Ansari Nagar...</div>231 </div>232 </div>233 </div>234 </div>235 236 <!-- Keyboard -->237 <div class="keyboard">238 <div class="kb-toolbar">239 <div class="tool">😊</div>240 <div class="tool">GIF</div>241 <div class="tool">242 <svg class="icon" viewBox="0 0 24 24"><path fill="#c8cdd2" d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm1-5h-2v3h2V2zM4.22 5.64L2.8 7.05l2.12 2.12 1.41-1.41L4.22 5.64zM19.78 5.64l-2.12 2.12 1.41 1.41 2.12-2.12-1.41-1.41z"/></svg>243 </div>244 <div class="tool">Gx</div>245 <div class="tool">⋯</div>246 <div class="tool">247 <svg class="icon" viewBox="0 0 24 24"><path fill="#c8cdd2" d="M17 5H7v14h10V5zm-2 12H9V7h6v10z"/></svg>248 </div>249 </div>250 251 <div class="kb-rows">252 <div class="row">253 <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>254 <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>255 </div>256 <div class="row" style="padding-left:44px; padding-right:44px;">257 <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>258 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>259 </div>260 <div class="row">261 <div class="key func circle">↑</div>262 <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>263 <div class="key">n</div><div class="key">m</div>264 <div class="key func circle">265 <svg class="icon" viewBox="0 0 24 24"><path fill="#cbd1d6" d="M6 19l6-6 6 6 2-2-8-8-8 8z"/></svg>266 </div>267 </div>268 <div class="kb-bottom">269 <div class="key func circle">?123</div>270 <div class="key func circle">,</div>271 <div class="key func circle">☺</div>272 <div class="key space">space</div>273 <div class="key func circle">.</div>274 <div class="key accent circle">275 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 15.5 14zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/></svg>276 </div>277 </div>278 </div>279 </div>280 281 <div class="home-indicator"></div>282</div>283</body>284</html>