GD-ML/AndroidCode

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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 1080px; height: 100px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    color: #eaeaea;30    font-size: 40px;31    font-weight: 600;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 20px;37  }38  .status-icons svg { width: 38px; height: 38px; fill: #eaeaea; }39 40  /* Header search row */41  .search-row {42    position: absolute;43    top: 120px;44    left: 28px;45    width: 1024px;46    height: 110px;47    display: flex;48    align-items: center;49    gap: 22px;50  }51  .back-btn {52    width: 110px; height: 100px;53    background: #2a2a2f;54    border-radius: 28px;55    display: flex; align-items: center; justify-content: center;56  }57  .search-input {58    flex: 1;59    height: 100px;60    background: #2d2d31;61    border-radius: 28px;62    display: flex; align-items: center;63    padding: 0 28px;64    box-sizing: border-box;65    font-size: 44px;66    color: #ffffff;67  }68 69  /* Result card */70  .results-area {71    position: absolute;72    top: 270px;73    left: 48px;74    right: 48px;75  }76  .card {77    width: 680px;78    background: #6b6831;79    color: #ffffff;80    border-radius: 28px;81    padding: 30px;82    box-sizing: border-box;83    box-shadow: 0 6px 14px rgba(0,0,0,0.25);84  }85  .card-title {86    font-size: 56px;87    font-weight: 700;88    margin: 0 0 22px 0;89  }90  .card-date {91    font-size: 30px;92    color: #efe9c8;93    text-align: right;94  }95 96  /* Keyboard */97  .keyboard {98    position: absolute;99    bottom: 0; left: 0;100    width: 1080px;101    height: 820px;102    background: #1b1b1f;103    box-shadow: 0 -8px 18px rgba(0,0,0,0.5);104    display: flex;105    flex-direction: column;106  }107 108  .suggestions {109    height: 96px;110    display: flex;111    align-items: center;112    gap: 18px;113    padding: 0 22px;114    border-bottom: 1px solid #28282d;115    color: #e6e6e6;116    box-sizing: border-box;117  }118  .dot-grid {119    width: 58px; height: 58px; background: #2a2a2f; border-radius: 12px;120    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);121    gap: 4px; padding: 6px; box-sizing: border-box;122  }123  .dot-grid span { display: block; background: #8b8b90; border-radius: 50%; }124  .suggestion {125    background: #2a2a2f;126    padding: 10px 20px;127    border-radius: 14px;128    font-size: 30px;129  }130  .spacer { flex: 1; }131  .mic {132    width: 56px; height: 56px; background: #2a2a2f; border-radius: 50%;133    display: flex; align-items: center; justify-content: center;134  }135  .mic svg { width: 30px; height: 30px; fill: #e6e6e6; }136 137  .rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 10px 18px 18px; box-sizing: border-box; }138  .row { display: flex; justify-content: center; gap: 14px; }139 140  .key {141    width: 88px; height: 110px;142    background: #2a2a2f;143    border-radius: 16px;144    display: flex; align-items: center; justify-content: center;145    color: #eaeaea;146    font-size: 36px; font-weight: 500;147    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);148  }149  .key.wide-1 { width: 140px; }150  .key.wide-2 { width: 180px; }151  .key.space { width: 520px; }152  .key.small { width: 110px; }153  .key.icon svg { width: 38px; height: 38px; fill: #eaeaea; }154 155  /* Gesture pill */156  .gesture-pill {157    position: absolute;158    bottom: 12px; left: 50%;159    transform: translateX(-50%);160    width: 280px; height: 10px;161    background: #e5e5e5;162    opacity: 0.85;163    border-radius: 10px;164    z-index: 5;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status Bar -->172  <div class="status-bar">173    <div class="time">8:52</div>174    <div class="status-icons">175      <!-- Simple warning triangle -->176      <svg viewBox="0 0 24 24"><path d="M12 3L1 21h22L12 3zm0 12.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-1-7h2v5h-2z"/></svg>177      <!-- Cloud -->178      <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 100-8 5 5 0 10-10 1A4 4 0 006 18z"/></svg>179      <!-- Wi-Fi -->180      <svg viewBox="0 0 24 24"><path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-6-4a10 10 0 0112 0l-1.4 1.4a8 8 0 00-9.2 0L6 14.5zm-3-4a16 16 0 0118 0l-1.5 1.3a14 14 0 00-15 0L3 10.5z"/></svg>181      <!-- Battery -->182      <svg viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="2"></rect><rect x="24" y="9" width="3" height="6"></rect></svg>183    </div>184  </div>185 186  <!-- Search Row -->187  <div class="search-row">188    <div class="back-btn">189      <svg width="46" height="46" viewBox="0 0 24 24">190        <path fill="#eaeaea" d="M15.4 3.4L7.8 11l7.6 7.6-1.4 1.4L5 11l9-9 1.4 1.4z"/>191      </svg>192    </div>193    <div class="search-input">DBW</div>194  </div>195 196  <!-- Results -->197  <div class="results-area">198    <div class="card">199      <div class="card-title">DBW</div>200      <div class="card-date">10 Aug, 2023</div>201    </div>202  </div>203 204  <!-- Keyboard -->205  <div class="keyboard">206    <div class="suggestions">207      <div class="dot-grid">208        <span></span><span></span><span></span>209        <span></span><span></span><span></span>210        <span></span><span></span><span></span>211      </div>212      <div class="suggestion">DBW</div>213      <div class="suggestion">DBWR</div>214      <div class="suggestion">dbwsc...est.id8 @gmail.com</div>215      <div class="spacer"></div>216      <div class="mic">217        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zm-5 7v3h-2v-3h2z"/></svg>218      </div>219    </div>220 221    <div class="rows">222      <div class="row">223        <div class="key">q</div>224        <div class="key">w</div>225        <div class="key">e</div>226        <div class="key">r</div>227        <div class="key">t</div>228        <div class="key">y</div>229        <div class="key">u</div>230        <div class="key">i</div>231        <div class="key">o</div>232        <div class="key">p</div>233      </div>234      <div class="row">235        <div class="key">a</div>236        <div class="key">s</div>237        <div class="key">d</div>238        <div class="key">f</div>239        <div class="key">g</div>240        <div class="key">h</div>241        <div class="key">j</div>242        <div class="key">k</div>243        <div class="key">l</div>244      </div>245      <div class="row">246        <div class="key wide-1 icon">247          <svg viewBox="0 0 24 24"><path d="M12 4l-4 6h8l-4-6zm-4 8l4 6 4-6H8z"/></svg>248        </div>249        <div class="key">z</div>250        <div class="key">x</div>251        <div class="key">c</div>252        <div class="key">v</div>253        <div class="key">b</div>254        <div class="key">n</div>255        <div class="key">m</div>256        <div class="key wide-1 icon">257          <svg viewBox="0 0 24 24"><path d="M6 19l6-6-6-6 2-2 8 8-8 8-2-2z"/></svg>258        </div>259      </div>260      <div class="row">261        <div class="key wide-2">?123</div>262        <div class="key small">,</div>263        <div class="key small">😊</div>264        <div class="key space"></div>265        <div class="key small">.</div>266        <div class="key wide-1 icon">267          <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>268        </div>269      </div>270    </div>271  </div>272 273  <div class="gesture-pill"></div>274</div>275</body>276</html>