GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Dark App UI - Search Empty</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #171c21;19    color: #e9eef5;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #10151a;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 48px;34    box-sizing: border-box;35    font-weight: 600;36    color: #ffffff;37  }38  .status-left {39    font-size: 44px;40    letter-spacing: 0.5px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .status-dot {48    width: 16px;49    height: 16px;50    background: #dfe3e8;51    border-radius: 50%;52  }53  .battery {54    width: 44px;55    height: 24px;56    border: 3px solid #dfe3e8;57    border-radius: 6px;58    position: relative;59  }60  .battery::after {61    content: "";62    position: absolute;63    right: -10px;64    top: 6px;65    width: 8px;66    height: 12px;67    background: #dfe3e8;68    border-radius: 2px;69  }70  .battery .level {71    position: absolute;72    right: 3px;73    top: 3px;74    height: 14px;75    width: 26px;76    background: #dfe3e8;77    border-radius: 3px;78  }79  .wifi {80    width: 36px;81    height: 26px;82  }83  .wifi svg { display: block; }84 85  /* Delivery progress row */86  .progress-area {87    position: absolute;88    top: 120px;89    left: 0;90    width: 1080px;91    height: 86px;92    background: #151a1f;93    display: flex;94    align-items: center;95    gap: 20px;96    padding: 0 48px;97    box-sizing: border-box;98    border-bottom: 1px solid rgba(255,255,255,0.04);99  }100  .truck {101    display: flex;102    align-items: center;103    gap: 10px;104  }105  .flame {106    width: 20px;107    height: 20px;108    background: #ff7626;109    clip-path: polygon(0% 50%, 100% 0%, 90% 50%, 100% 100%);110  }111  .truck svg {112    width: 72px;113    height: 40px;114  }115  .progress-track {116    flex: 1;117    height: 18px;118    background: #3a3f46;119    border-radius: 10px;120    position: relative;121  }122  .progress-fill {123    position: absolute;124    left: 0;125    top: 0;126    height: 18px;127    width: 24px; /* tiny progress to resemble screenshot */128    background: #2b78ff;129    border-radius: 10px;130  }131 132  /* Main dark content (empty state) */133  .content {134    position: absolute;135    top: 206px; /* status + progress */136    left: 0;137    width: 1080px;138    height: calc(2400px - 206px - 260px); /* leave space for bottom nav */139    background: #23272d;140  }141 142  /* Bottom navigation */143  .bottom-nav {144    position: absolute;145    bottom: 48px;146    left: 0;147    width: 1080px;148    height: 260px;149    background: #1f242a;150    border-top: 1px solid rgba(255,255,255,0.06);151    display: flex;152    align-items: center;153    justify-content: space-around;154    box-sizing: border-box;155  }156  .nav-item {157    width: 160px;158    display: flex;159    flex-direction: column;160    align-items: center;161    gap: 24px;162    color: #98a3b3;163    text-align: center;164  }165  .nav-item .label {166    font-size: 42px;167  }168  .nav-item svg {169    width: 98px;170    height: 98px;171    stroke-width: 8;172  }173  .nav-item.active {174    color: #2b78ff;175  }176  .nav-item.active svg path,177  .nav-item.active svg circle,178  .nav-item.active svg rect {179    stroke: #2b78ff;180    fill: none;181  }182  .nav-item svg path,183  .nav-item svg circle,184  .nav-item svg rect {185    stroke: #98a3b3;186    fill: none;187  }188 189  /* Gesture bar */190  .gesture-bar {191    position: absolute;192    bottom: 12px;193    left: 50%;194    transform: translateX(-50%);195    width: 280px;196    height: 14px;197    background: #e9eef5;198    border-radius: 10px;199    opacity: 0.9;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div class="status-left">11:30</div>209    <div class="status-right">210      <!-- simple small icons approximating the screenshot -->211      <div class="status-dot"></div>212      <div class="status-dot" style="opacity:0.65;"></div>213      <div class="status-dot" style="opacity:0.45;"></div>214      <div class="wifi">215        <svg viewBox="0 0 36 26">216          <path d="M2 8c7-6 25-6 32 0" stroke="#dfe3e8" stroke-width="3" fill="none"/>217          <path d="M7 13c5-4 17-4 22 0" stroke="#dfe3e8" stroke-width="3" fill="none"/>218          <path d="M13 18c3-2 9-2 12 0" stroke="#dfe3e8" stroke-width="3" fill="none"/>219          <circle cx="18" cy="22" r="2.8" fill="#dfe3e8"/>220        </svg>221      </div>222      <div class="battery">223        <div class="level"></div>224      </div>225    </div>226  </div>227 228  <!-- Delivery progress row -->229  <div class="progress-area">230    <div class="truck">231      <div class="flame"></div>232      <svg viewBox="0 0 80 44">233        <!-- simple blue delivery truck -->234        <rect x="6" y="10" width="40" height="18" rx="3" fill="#2b78ff"/>235        <rect x="46" y="16" width="20" height="12" rx="2" fill="#2b78ff"/>236        <rect x="56" y="12" width="10" height="6" rx="1" fill="#2b78ff"/>237        <circle cx="20" cy="32" r="6" fill="#1c2430" stroke="#2b78ff" stroke-width="3"/>238        <circle cx="52" cy="32" r="6" fill="#1c2430" stroke="#2b78ff" stroke-width="3"/>239      </svg>240    </div>241    <div class="progress-track">242      <div class="progress-fill"></div>243    </div>244  </div>245 246  <!-- Main content area (empty dark list) -->247  <div class="content"></div>248 249  <!-- Bottom navigation -->250  <div class="bottom-nav">251    <div class="nav-item">252      <svg viewBox="0 0 100 100">253        <path d="M15 60 L50 30 L85 60" />254        <rect x="28" y="60" width="44" height="26" rx="4"/>255      </svg>256      <div class="label">start</div>257    </div>258    <div class="nav-item active">259      <svg viewBox="0 0 100 100">260        <circle cx="44" cy="44" r="28"/>261        <line x1="64" y1="64" x2="88" y2="88"/>262      </svg>263      <div class="label">search</div>264    </div>265    <div class="nav-item">266      <svg viewBox="0 0 100 100">267        <rect x="18" y="40" width="64" height="40" rx="6"/>268        <rect x="14" y="30" width="72" height="14" rx="6"/>269        <rect x="44" y="56" width="12" height="24" rx="3"/>270      </svg>271      <div class="label">stores</div>272    </div>273    <div class="nav-item">274      <svg viewBox="0 0 100 100">275        <path d="M18 30 H36 L42 56 H78 L74 72 H44" />276        <circle cx="40" cy="80" r="7"/>277        <circle cx="70" cy="80" r="7"/>278      </svg>279      <div class="label">cart</div>280    </div>281    <div class="nav-item">282      <svg viewBox="0 0 100 100">283        <circle cx="50" cy="36" r="16"/>284        <path d="M18 84 C18 64, 82 64, 82 84" />285      </svg>286      <div class="label">profile</div>287    </div>288  </div>289 290  <!-- Gesture bar -->291  <div class="gesture-bar"></div>292</div>293</body>294</html>