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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0;20    width: 100%; height: 120px;21    padding: 0 40px;22    display: flex; align-items: center; justify-content: space-between;23    box-sizing: border-box;24  }25  .status-left { font-size: 42px; font-weight: 600; letter-spacing: 1px; }26  .status-right { display: flex; gap: 28px; align-items: center; }27  .icon { display: inline-flex; align-items: center; justify-content: center; }28  .icon svg { width: 38px; height: 38px; }29 30  /* Header */31  .header {32    position: relative;33    margin-top: 130px;34    padding: 0 48px;35  }36  .title {37    font-size: 64px; font-weight: 800; letter-spacing: 0.3px;38    margin-bottom: 36px;39  }40  .cart-btn {41    position: absolute; right: 48px; top: 20px;42    width: 72px; height: 72px;43  }44  .cart-btn svg { width: 72px; height: 72px; }45 46  /* Search field */47  .search-field {48    width: calc(100% - 96px);49    height: 130px;50    margin: 0 auto 40px auto;51    border: 6px solid #222; border-radius: 28px;52    background: #F6F6F6;53    display: flex; align-items: center;54    box-sizing: border-box; padding: 0 30px;55  }56  .search-icon svg { width: 46px; height: 46px; }57  .placeholder {58    margin-left: 22px;59    font-size: 38px; color: #777; font-weight: 600;60  }61 62  /* Sections */63  .section {64    padding: 0 48px;65  }66  .section-title {67    font-size: 48px; font-weight: 800; margin: 24px 0;68  }69  .list {70    border-top: 2px solid #E5E5E5;71  }72  .list-item {73    display: flex; align-items: center;74    height: 120px;75    font-size: 42px; font-weight: 600; color: #222;76    box-sizing: border-box;77  }78  .list-item + .list-item { border-top: 2px solid #E5E5E5; }79  .list-item .li-icon { width: 60px; height: 60px; margin-right: 28px; }80  .li-icon svg { width: 60px; height: 60px; }81 82  /* Keyboard mock */83  .keyboard {84    position: absolute; left: 0; bottom: 0;85    width: 100%; height: 920px;86    background: #F2EDF7;87    border-top: 2px solid #E6E2EB;88    box-sizing: border-box;89    padding: 22px 26px;90  }91  .kbd-top-tools {92    display: flex; align-items: center; gap: 26px;93    margin-bottom: 20px;94  }95  .tool {96    width: 92px; height: 92px;97    background: #E9E4F1; border-radius: 26px;98    display: flex; align-items: center; justify-content: center;99    color: #333; font-weight: 700; font-size: 28px;100  }101  .keys-row {102    display: flex; gap: 16px; margin-bottom: 16px;103    justify-content: center;104  }105  .key {106    background: #FFFFFF; border-radius: 26px;107    height: 118px; min-width: 88px;108    display: flex; align-items: center; justify-content: center;109    font-size: 44px; font-weight: 600; color: #111;110    box-shadow: 0 1px 0 rgba(0,0,0,0.08);111  }112  .key.wide { min-width: 180px; }113  .space { flex: 1; min-width: 420px; }114  .hint-bar {115    position: absolute; bottom: 22px; left: 50%;116    transform: translateX(-50%);117    width: 360px; height: 10px; background: #BFBFBF; border-radius: 10px;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status Bar -->125  <div class="status-bar">126    <div class="status-left">3:50</div>127    <div class="status-right">128      <!-- "ovo" small text placeholder -->129      <div style="font-size:28px;font-weight:700;color:#666;">ovo</div>130      <!-- small square -->131      <div style="width:40px;height:32px;border-radius:6px;background:#8D8D8D;"></div>132      <!-- Wi-Fi icon -->133      <div class="icon">134        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">135          <path d="M2 9c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 15c3-2 5-2 8 0M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>136        </svg>137      </div>138      <!-- Battery icon -->139      <div class="icon">140        <svg viewBox="0 0 28 20" fill="none" stroke="#333" stroke-width="2">141          <rect x="1" y="3" width="22" height="14" rx="2"></rect>142          <rect x="3" y="5" width="14" height="10" fill="#333"></rect>143          <rect x="23" y="7" width="4" height="6" rx="1"></rect>144        </svg>145      </div>146    </div>147  </div>148 149  <!-- Header -->150  <div class="header">151    <div class="title">Search</div>152    <div class="cart-btn">153      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">154        <path d="M3 5h3l2 10h10l2-8H7"/>155        <circle cx="10" cy="20" r="2"></circle>156        <circle cx="18" cy="20" r="2"></circle>157      </svg>158    </div>159 160    <div class="search-field">161      <div class="search-icon">162        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">163          <circle cx="11" cy="11" r="7"></circle>164          <path d="M20 20l-4-4"></path>165        </svg>166      </div>167      <div class="placeholder">Search DoorDash</div>168    </div>169  </div>170 171  <!-- Recently Viewed -->172  <div class="section">173    <div class="section-title">Recently Viewed</div>174    <div class="list">175      <div class="list-item">176        <div class="li-icon">177          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">178            <circle cx="12" cy="12" r="9"></circle>179            <path d="M12 7v6l4 2"></path>180          </svg>181        </div>182        <div>7-eleven</div>183      </div>184      <div class="list-item">185        <div class="li-icon">186          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">187            <circle cx="12" cy="12" r="9"></circle>188            <path d="M12 7v6l4 2"></path>189          </svg>190        </div>191        <div>gluten free restaurants</div>192      </div>193    </div>194  </div>195 196  <!-- Top Searches -->197  <div class="section" style="margin-top: 24px;">198    <div class="section-title">Top Searches</div>199    <div class="list">200      <div class="list-item">201        <div class="li-icon">202          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">203            <circle cx="11" cy="11" r="7"></circle>204            <path d="M20 20l-4-4"></path>205          </svg>206        </div>207        <div>Coffee</div>208      </div>209      <div class="list-item">210        <div class="li-icon">211          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">212            <circle cx="11" cy="11" r="7"></circle>213            <path d="M20 20l-4-4"></path>214          </svg>215        </div>216        <div>Wings</div>217      </div>218      <div class="list-item">219        <div class="li-icon">220          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">221            <circle cx="11" cy="11" r="7"></circle>222            <path d="M20 20l-4-4"></path>223          </svg>224        </div>225        <div>Tacos</div>226      </div>227      <div class="list-item">228        <div class="li-icon">229          <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">230            <circle cx="11" cy="11" r="7"></circle>231            <path d="M20 20l-4-4"></path>232          </svg>233        </div>234        <div>Milk</div>235      </div>236    </div>237  </div>238 239  <!-- Keyboard Mock -->240  <div class="keyboard">241    <div class="kbd-top-tools">242      <div class="tool">⌂</div>243      <div class="tool">🙂</div>244      <div class="tool">GIF</div>245      <div class="tool">⚙︎</div>246      <div class="tool">Gᴛ</div>247      <div class="tool">🎨</div>248      <div class="tool">🎤</div>249    </div>250    <div class="keys-row">251      <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><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>252    </div>253    <div class="keys-row" style="padding: 0 40px;">254      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>255    </div>256    <div class="keys-row" style="padding: 0 100px;">257      <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>258      <div class="key wide">⌫</div>259    </div>260    <div class="keys-row" style="align-items: center;">261      <div class="key wide">?123</div>262      <div class="key">,</div>263      <div class="key wide">🙂</div>264      <div class="key space"> </div>265      <div class="key">.</div>266      <div class="key wide">🔍</div>267    </div>268    <div class="hint-bar"></div>269  </div>270 271</div>272</body>273</html>