GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0c0c0c;13    color: #eee;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 16px 24px;24    box-sizing: border-box;25    color: #cfcfcf;26    display: flex;27    align-items: center;28    justify-content: flex-end;29    gap: 18px;30    font-size: 26px;31  }32  .status-dot { width: 8px; height: 8px; background: #cfcfcf; border-radius: 50%; display: inline-block; }33 34  /* Search header area */35  .header {36    position: absolute;37    top: 90px;38    left: 0;39    width: 1080px;40    height: 140px;41    display: flex;42    align-items: center;43    padding: 0 24px;44    box-sizing: border-box;45    gap: 18px;46  }47  .icon-btn {48    width: 64px;49    height: 64px;50    border-radius: 32px;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #ddd;55  }56  .search-bar {57    flex: 1;58    height: 96px;59    border-radius: 48px;60    background: #1f1f1f;61    display: flex;62    align-items: center;63    padding: 0 28px;64    box-sizing: border-box;65    gap: 20px;66  }67  .search-text {68    flex: 1;69    font-size: 38px;70    color: #f2f2f2;71  }72  .circle-icon {73    width: 48px;74    height: 48px;75    border-radius: 24px;76    background: #2a2a2a;77    display: flex;78    align-items: center;79    justify-content: center;80  }81 82  /* Result list */83  .results {84    position: absolute;85    top: 260px;86    left: 0;87    width: 1080px;88    padding: 0 32px;89    box-sizing: border-box;90  }91  .result-item {92    height: 130px;93    display: flex;94    align-items: center;95    gap: 26px;96    border-bottom: 1px solid #1a1a1a;97  }98  .note-icon {99    width: 52px;100    height: 52px;101    border-radius: 8px;102    background: #2b2b2b;103    display: flex;104    align-items: center;105    justify-content: center;106    border: 1px solid #3a3a3a;107  }108  .result-title {109    font-size: 44px;110    color: #ffffff;111  }112 113  /* Overlay card */114  .overlay-card {115    position: absolute;116    left: 32px;117    bottom: 980px;118    width: 1016px;119    height: 320px;120    background: #141414;121    border: 1px solid #2a2a2a;122    border-radius: 26px;123    box-shadow: 0 12px 24px rgba(0,0,0,0.5);124    padding: 30px;125    box-sizing: border-box;126  }127  .overlay-header {128    display: flex;129    align-items: center;130    justify-content: space-between;131  }132  .overlay-title {133    font-size: 54px;134    font-weight: 700;135    color: #e6e6e6;136  }137  .overlay-body {138    margin-top: 14px;139    font-size: 34px;140    color: #cfcfcf;141    line-height: 1.4;142  }143  .upgrade {144    margin-top: 20px;145    font-size: 40px;146    color: #7AD16F;147    font-weight: 700;148  }149 150  /* Suggestions bar above keyboard */151  .suggestions {152    position: absolute;153    bottom: 860px;154    left: 0;155    width: 1080px;156    height: 90px;157    display: flex;158    align-items: center;159    gap: 18px;160    padding: 0 24px;161    box-sizing: border-box;162  }163  .chip {164    padding: 14px 26px;165    border-radius: 40px;166    background: #1d1d1d;167    border: 1px solid #2c2c2c;168    font-size: 36px;169    color: #e8e8e8;170  }171 172  /* Keyboard mock */173  .keyboard {174    position: absolute;175    bottom: 0;176    left: 0;177    width: 1080px;178    height: 860px;179    background: #151515;180    border-top: 1px solid #2a2a2a;181    box-sizing: border-box;182    padding: 28px;183  }184  .keys-row {185    display: flex;186    justify-content: center;187    gap: 18px;188    margin-bottom: 22px;189  }190  .key {191    width: 88px;192    height: 110px;193    border-radius: 20px;194    background: #242424;195    color: #f0f0f0;196    font-size: 44px;197    display: flex;198    align-items: center;199    justify-content: center;200    border: 1px solid #333;201  }202  .key-wide { width: 170px; }203  .bottom-bar {204    display: flex;205    justify-content: space-between;206    align-items: center;207    margin-top: 16px;208    padding: 0 8px;209  }210  .space-key { flex: 1; height: 110px; border-radius: 22px; background: #242424; border: 1px solid #333; margin: 0 16px; }211  .round-key { width: 110px; height: 110px; border-radius: 26px; background: #242424; border: 1px solid #333; display: flex; align-items: center; justify-content: center; color: #f0f0f0; font-size: 48px; }212 213  /* Simple SVG icons coloring */214  svg { width: 40px; height: 40px; fill: none; stroke: #dcdcdc; stroke-width: 4px; }215  .tiny svg { width: 30px; height: 30px; }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <span>12:16</span>224    <span class="status-dot"></span>225    <span>🔔</span>226    <span class="status-dot"></span>227    <span>📍</span>228    <span>🔊</span>229    <span>🔋</span>230  </div>231 232  <!-- Search Header -->233  <div class="header">234    <div class="icon-btn">235      <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20"/></svg>236    </div>237 238    <div class="search-bar">239      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14 L20 20"/></svg>240      <div class="search-text">India Democracy</div>241      <div class="circle-icon tiny">242        <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"/></svg>243      </div>244    </div>245 246    <div class="icon-btn">247      <svg viewBox="0 0 24 24"><path d="M4 5 H20 L14 12 V19 L10 19 V12 Z"/></svg>248    </div>249  </div>250 251  <!-- Results list -->252  <div class="results">253    <div class="result-item">254      <div class="note-icon">255        <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" ry="2"/><path d="M8 8 H16 M8 12 H16"/></svg>256      </div>257      <div class="result-title">India Democracy</div>258    </div>259  </div>260 261  <!-- Overlay card -->262  <div class="overlay-card">263    <div class="overlay-header">264      <div class="overlay-title">See more results</div>265      <div class="circle-icon tiny">266        <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"/></svg>267      </div>268    </div>269    <div class="overlay-body">270      Evernote Personal finds words inside docs and PDFs.271    </div>272    <div class="upgrade">Upgrade</div>273  </div>274 275  <!-- Suggestions -->276  <div class="suggestions">277    <div class="chip">Democracy</div>278    <div class="chip">Democracy'</div>279  </div>280 281  <!-- Keyboard -->282  <div class="keyboard">283    <div class="keys-row">284      <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>285      <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>286    </div>287    <div class="keys-row">288      <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>289      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>290    </div>291    <div class="keys-row">292      <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>293      <div class="key">n</div><div class="key">m</div>294      <div class="key-wide">⌫</div>295    </div>296 297    <div class="bottom-bar">298      <div class="round-key">?123</div>299      <div class="round-key">,</div>300      <div class="round-key">😊</div>301      <div class="space-key"></div>302      <div class="round-key">.</div>303      <div class="round-key">304        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14 L20 20"/></svg>305      </div>306    </div>307  </div>308 309</div>310</body>311</html>