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 Notes UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #202124;15    color: #E8EAED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 96px;25    padding: 0 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #E8EAED;30    font-size: 36px;31    letter-spacing: 1px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon { display: inline-flex; align-items: center; justify-content: center; }39 40  /* Top app/search bar */41  .appbar {42    position: absolute;43    top: 96px;44    left: 0;45    right: 0;46    height: 140px;47    background: #26272A;48    display: flex;49    align-items: center;50    padding: 0 24px 0 16px;51  }52  .back-btn {53    width: 96px;54    height: 96px;55    display: flex;56    align-items: center;57    justify-content: center;58  }59  .search-field {60    flex: 1;61    height: 100%;62    display: flex;63    align-items: center;64    color: #9AA0A6;65    font-size: 46px;66  }67  .search-placeholder {68    margin-left: 8px;69  }70 71  /* Content */72  .content {73    position: absolute;74    top: 236px; /* status + appbar */75    left: 0;76    right: 0;77    bottom: 0;78    padding: 48px 40px 0 40px;79  }80  .section-title {81    color: #C5C7CA;82    font-size: 40px;83    margin-bottom: 36px;84  }85  .no-color {86    width: 160px;87    height: 160px;88    display: flex;89    align-items: center;90    justify-content: center;91  }92 93  /* Keyboard mock */94  .keyboard {95    position: absolute;96    left: 0;97    right: 0;98    bottom: 96px; /* room for gesture pill */99    height: 900px;100    background: #1F2023;101    border-top: 1px solid #2D2E31;102    display: flex;103    flex-direction: column;104    padding-top: 18px;105  }106  .kb-toolbar {107    height: 84px;108    padding: 0 36px;109    display: flex;110    align-items: center;111    gap: 44px;112    color: #DADCE0;113    opacity: .95;114  }115  .tool {116    width: 64px;117    height: 64px;118    border-radius: 16px;119    background: #2B2C30;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 30px; }125  .kb-row { display: flex; gap: 12px; justify-content: center; }126  .key {127    height: 120px;128    width: 90px;129    border-radius: 18px;130    background: #2E3034;131    color: #FFFFFF;132    font-size: 44px;133    display: flex;134    align-items: center;135    justify-content: center;136    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);137  }138  .key.muted { color: #C5C7CA; }139  .key.wide { width: 130px; }140  .key.xwide { width: 160px; }141  .kb-row.row2 { padding-left: 45px; } /* slight stagger */142  .space { width: 460px; }143  .comma, .period { width: 80px; }144  .search-key {145    width: 140px;146    background: #3A3C42;147    color: #E8EAED;148  }149 150  /* Gesture pill */151  .gesture {152    position: absolute;153    left: 50%;154    bottom: 28px;155    transform: translateX(-50%);156    width: 320px;157    height: 10px;158    background: #D0D1D5;159    border-radius: 8px;160    opacity: .85;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Status Bar -->168  <div class="status-bar">169    <div class="status-left">8:21</div>170    <div class="status-right">171      <!-- Simple icons: do not need to be exact -->172      <span class="icon" title="Wi‑Fi">173        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">174          <path d="M2 8a16 16 0 0 1 20 0"/>175          <path d="M5 11a11 11 0 0 1 14 0"/>176          <path d="M8 14a6 6 0 0 1 8 0"/>177          <path d="M12 18h0"/>178        </svg>179      </span>180      <span class="icon" title="Battery">181        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2">182          <rect x="3" y="7" width="16" height="10" rx="2" />183          <rect x="20" y="10" width="2" height="4" />184        </svg>185      </span>186    </div>187  </div>188 189  <!-- App Bar with search field -->190  <div class="appbar">191    <div class="back-btn">192      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">193        <path d="M15 6L9 12l6 6"/>194      </svg>195    </div>196    <div class="search-field">197      <span class="search-placeholder">Search your notes</span>198    </div>199  </div>200 201  <!-- Main content above keyboard -->202  <div class="content">203    <div class="section-title">Colors</div>204    <div class="no-color">205      <svg width="160" height="160" viewBox="0 0 100 100">206        <circle cx="50" cy="50" r="34" fill="none" stroke="#AEB0B4" stroke-width="4"/>207        <line x1="25" y1="75" x2="75" y2="25" stroke="#AEB0B4" stroke-width="4"/>208      </svg>209    </div>210  </div>211 212  <!-- Keyboard -->213  <div class="keyboard">214    <div class="kb-toolbar">215      <div class="tool">216        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2">217          <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>218        </svg>219      </div>220      <div class="tool">221        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2">222          <circle cx="12" cy="12" r="9"/><path d="M4 4l16 16"/>223        </svg>224      </div>225      <div class="tool"><span style="font-weight:700; font-size:22px;">GIF</span></div>226      <div class="tool">227        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>228      </div>229      <div class="tool">230        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2"><path d="M3 4h12l6 6v10H3z"/><path d="M15 4v6h6"/></svg>231      </div>232      <div class="tool">233        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg>234      </div>235    </div>236 237    <div class="rows">238      <div class="kb-row">239        <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>240        <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>241      </div>242      <div class="kb-row row2">243        <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>244        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>245      </div>246      <div class="kb-row">247        <div class="key wide muted">248          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2"><path d="M7 15l5-5 5 5"/></svg>249        </div>250        <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>251        <div class="key wide muted">252          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2" stroke-linecap="round">253            <path d="M6 18l12-12"/><path d="M15 6h3v3"/>254          </svg>255        </div>256      </div>257      <div class="kb-row">258        <div class="key xwide muted">?123</div>259        <div class="key comma muted">,</div>260        <div class="key space muted"></div>261        <div class="key period muted">.</div>262        <div class="key search-key">263          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">264            <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>265          </svg>266        </div>267      </div>268    </div>269  </div>270 271  <!-- Gesture pill -->272  <div class="gesture"></div>273 274</div>275</body>276</html>