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 Suggestions</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1a1a1a;17  }18 19  /* Header */20  .top-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 300px;26    background: #d34b5f;27  }28  .status {29    position: absolute;30    top: 30px;31    left: 40px;32    right: 40px;33    height: 60px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #fff;38    font-size: 38px;39    letter-spacing: 0.5px;40    opacity: 0.95;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .header-content {48    position: absolute;49    left: 28px;50    right: 28px;51    top: 110px;52    height: 140px;53    display: flex;54    align-items: center;55    gap: 24px;56  }57  .back-btn {58    width: 80px;59    height: 80px;60    display: flex;61    align-items: center;62    justify-content: center;63    cursor: default;64  }65  .search-field {66    flex: 1;67    height: 120px;68    background: #ffffff;69    border-radius: 30px;70    box-shadow: 0 2px 0 rgba(255,255,255,0.25) inset;71    display: flex;72    align-items: center;73    padding: 0 28px;74  }75  .search-input-text {76    font-size: 44px;77    color: #444;78    letter-spacing: 0.2px;79    flex: 1;80  }81  .search-caret {82    width: 2px;83    height: 56px;84    background: #d34b5f;85    margin-left: 6px;86    border-radius: 2px;87  }88  .scan-icon {89    width: 84px;90    height: 84px;91    border-radius: 20px;92    background: #f5f5f5;93    border: 1px solid #e0e0e0;94    display: flex;95    align-items: center;96    justify-content: center;97    margin-left: 16px;98  }99  .header-bottom-line {100    position: absolute;101    left: 0;102    bottom: 0;103    width: 1080px;104    height: 8px;105    background: rgba(255,255,255,0.7);106  }107 108  /* Suggestions section */109  .content {110    position: absolute;111    left: 0;112    right: 0;113    top: 300px;114    bottom: 120px;115    overflow: hidden;116    background: #ffffff;117  }118  .section {119    padding: 40px 40px 0 40px;120  }121  .title {122    font-size: 58px;123    font-weight: 700;124    margin-bottom: 26px;125  }126  .suggestion {127    position: relative;128    padding: 34px 120px 34px 40px;129    font-size: 46px;130    color: #333;131  }132  .suggestion.bold { font-weight: 700; color: #000; }133  .suggestion .sub {134    font-weight: 400;135    color: #777;136    margin-left: 10px;137    font-size: 42px;138  }139  .divider {140    height: 2px;141    background: #e9e9e9;142    margin: 0 40px;143  }144  .arrow-right {145    position: absolute;146    right: 40px;147    top: 50%;148    transform: translateY(-50%);149    width: 48px;150    height: 48px;151  }152 153  .see-all {154    padding: 34px 40px;155    font-size: 46px;156    color: #333;157  }158  .see-all .highlight {159    color: #d34b5f;160    font-weight: 700;161  }162 163  /* Recent searches */164  .recent-item {165    display: flex;166    align-items: center;167    padding: 28px 40px;168    gap: 24px;169  }170  .recent-text {171    flex: 1;172    height: 56px;173    border-radius: 28px;174    background: linear-gradient(90deg, #f0f0f3, #fbfbfd);175  }176  .clear-btn {177    width: 56px;178    height: 56px;179  }180  .magnifier {181    width: 52px;182    height: 52px;183    color: #c7c7c7;184  }185 186  /* Bottom gesture bar */187  .gesture-bar {188    position: absolute;189    bottom: 22px;190    left: 50%;191    transform: translateX(-50%);192    width: 280px;193    height: 16px;194    background: #eaeaea;195    border-radius: 20px;196  }197  .bottom-black {198    position: absolute;199    bottom: 0;200    left: 0;201    width: 1080px;202    height: 70px;203    background: #000;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Header -->211  <div class="top-bar">212    <div class="status">213      <div>9:19</div>214      <div class="status-icons">215        <!-- Wi-Fi icon -->216        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">217          <path d="M12 18.5c.7 0 1.2.5 1.2 1.2S12.7 21 12 21s-1.2-.5-1.2-1.3.5-1.2 1.2-1.2zM2.3 9.8A15.7 15.7 0 0 1 12 6c3.6 0 7 1.2 9.7 3.8l-1.7 1.7A13 13 0 0 0 12 8c-3.2 0-6.2 1.2-8.6 3.4L2.3 9.8zm3.5 3.5A11 11 0 0 1 12 10c2.7 0 5.3 1 7.2 2.9l-1.6 1.6A8.6 8.6 0 0 0 12 12.6c-2.2 0-4.2.8-5.8 2.2l-1.4-1.5zm3.6 3.6A6.4 6.4 0 0 1 12 14.7c1.7 0 3.3.6 4.6 1.7l-1.6 1.6a4 4 0 0 0-3-1c-1 0-2 .3-2.8 1.1l-1.8-1.7z"/>218        </svg>219        <!-- Battery icon -->220        <svg width="50" height="50" viewBox="0 0 26 26" fill="#ffffff" aria-hidden="true">221          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>222          <rect x="4" y="8" width="14" height="8" fill="#fff"/>223          <rect x="21" y="10" width="3" height="4" fill="#fff"/>224        </svg>225      </div>226    </div>227 228    <div class="header-content">229      <!-- Back arrow -->230      <div class="back-btn">231        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">232          <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>233        </svg>234      </div>235 236      <!-- Search field -->237      <div class="search-field">238        <div class="search-input-text">bread buns</div>239        <div class="search-caret"></div>240        <div class="scan-icon">241          <!-- Barcode scanner icon -->242          <svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">243            <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#888" stroke-width="1.5"/>244            <path d="M7 9v6M10 9v6M13 9v6M16 9v6" stroke="#888" stroke-width="1.2"/>245          </svg>246        </div>247      </div>248    </div>249 250    <div class="header-bottom-line"></div>251  </div>252 253  <!-- Content -->254  <div class="content">255    <div class="section">256      <div class="title">Suggestions</div>257 258      <div class="suggestion">bread buns259        <svg class="arrow-right" viewBox="0 0 24 24" fill="none">260          <path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262      </div>263      <div class="divider"></div>264 265      <div class="suggestion" style="color:#9e9e9e;">bread bun266        <svg class="arrow-right" viewBox="0 0 24 24" fill="none">267          <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>268        </svg>269      </div>270      <div class="divider"></div>271 272      <div class="suggestion bold">bread buns <span class="sub">8</span>273        <svg class="arrow-right" viewBox="0 0 24 24" fill="none">274          <path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>275        </svg>276      </div>277      <div class="divider"></div>278 279      <div class="suggestion" style="color:#9e9e9e;">bread bun pandesal280        <svg class="arrow-right" viewBox="0 0 24 24" fill="none">281          <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>282        </svg>283      </div>284      <div class="divider" style="margin-bottom: 8px;"></div>285 286      <div class="see-all">See all results for <span class="highlight">bread buns</span></div>287      <div class="divider" style="margin-top: 8px;"></div>288 289      <!-- Recent searches (blurred placeholders) -->290      <div class="recent-item">291        <svg class="magnifier" viewBox="0 0 24 24" fill="none">292          <circle cx="10" cy="10" r="6.5" stroke="#c7c7c7" stroke-width="2"/>293          <path d="M16 16l5 5" stroke="#c7c7c7" stroke-width="2" stroke-linecap="round"/>294        </svg>295        <div class="recent-text"></div>296        <svg class="clear-btn" viewBox="0 0 24 24" fill="none">297          <path d="M6 6l12 12M18 6l-12 12" stroke="#c7c7c7" stroke-width="2.5" stroke-linecap="round"/>298        </svg>299      </div>300      <div class="divider"></div>301      <div class="recent-item">302        <svg class="magnifier" viewBox="0 0 24 24" fill="none">303          <circle cx="10" cy="10" r="6.5" stroke="#c7c7c7" stroke-width="2"/>304          <path d="M16 16l5 5" stroke="#c7c7c7" stroke-width="2" stroke-linecap="round"/>305        </svg>306        <div class="recent-text"></div>307        <svg class="clear-btn" viewBox="0 0 24 24" fill="none">308          <path d="M6 6l12 12M18 6l-12 12" stroke="#c7c7c7" stroke-width="2.5" stroke-linecap="round"/>309        </svg>310      </div>311      <div class="divider"></div>312    </div>313  </div>314 315  <!-- Gesture bar and bottom black area -->316  <div class="gesture-bar"></div>317  <div class="bottom-black"></div>318</div>319</body>320</html>