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>Menu List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #24232B;15    color: #ECECF2;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    padding: 26px 40px 0 40px;26    box-sizing: border-box;27    color: #F5F5FA;28    font-size: 42px;29    display: flex;30    align-items: center;31    justify-content: space-between;32  }33  .status-right {34    display: flex;35    gap: 26px;36    align-items: center;37    color: #fff;38    opacity: 0.9;39  }40  .dot {41    width: 16px; height: 16px; background: #fff; border-radius: 50%;42    display: inline-block;43  }44 45  /* Header / category bar */46  .header {47    position: absolute;48    top: 100px;49    left: 0;50    width: 1080px;51    height: 120px;52    display: flex;53    align-items: center;54    padding: 0 40px;55    box-sizing: border-box;56  }57  .left-chevron {58    width: 52px; height: 52px; border-radius: 26px;59    display: flex; align-items: center; justify-content: center;60    margin-right: 16px;61  }62  .header-title {63    font-weight: 700;64    font-size: 48px;65    color: #8E6CF8;66    display: flex;67    align-items: center;68    gap: 16px;69  }70  .header-actions {71    margin-left: auto;72    display: flex;73    align-items: center;74    gap: 24px;75  }76  .icon-btn {77    width: 68px; height: 68px; border-radius: 34px;78    display: flex; align-items: center; justify-content: center;79  }80  .divider {81    position: absolute;82    top: 218px;83    left: 0;84    width: 1080px;85    height: 2px;86    background: #3A3C46;87  }88 89  /* List container */90  .list {91    position: absolute;92    top: 220px;93    left: 0;94    width: 1080px;95    height: 1900px;96    overflow: hidden;97  }98  .card {99    margin: 28px 36px;100    background: #2B2D36;101    border: 2px solid #3E414B;102    border-radius: 28px;103    display: flex;104    min-height: 320px;105    position: relative;106  }107  .card + .card { margin-top: 32px; }108  .card-text {109    flex: 1;110    padding: 32px 36px;111    box-sizing: border-box;112  }113  .card-title {114    font-size: 46px;115    font-weight: 800;116    margin: 8px 0 16px 0;117    color: #F0F0F6;118  }119  .card-desc {120    font-size: 34px;121    line-height: 1.35;122    color: #B9BDC9;123    max-width: 620px;124  }125  .card-price {126    position: absolute;127    bottom: 24px;128    left: 36px;129    font-size: 40px;130    font-weight: 700;131    color: #E6E7EE;132  }133  .card-media {134    width: 330px;135    border-left: 2px solid #3E414B;136    display: flex; align-items: center; justify-content: center;137    padding: 18px;138    box-sizing: border-box;139    border-top-right-radius: 28px;140    border-bottom-right-radius: 28px;141    position: relative;142  }143  .img-ph {144    width: 100%;145    height: 100%;146    min-height: 260px;147    background: #E0E0E0;148    border: 1px solid #BDBDBD;149    border-radius: 20px;150    display: flex; align-items: center; justify-content: center;151    color: #757575;152    font-size: 30px;153    text-align: center;154    padding: 10px;155    box-sizing: border-box;156  }157 158  /* Plus badge */159  .plus-badge {160    position: absolute;161    right: 26px;162    bottom: 26px;163    width: 92px; height: 92px;164    background: #2B2D36;165    border-radius: 46px;166    box-shadow: 0 6px 20px rgba(0,0,0,0.4);167    display: flex; align-items: center; justify-content: center;168  }169 170  /* Best Seller chip */171  .chip {172    position: absolute;173    top: -22px;174    left: 30px;175    background: #F2C987;176    color: #1F1F26;177    font-weight: 800;178    font-size: 32px;179    padding: 12px 26px;180    border-radius: 26px;181    box-shadow: 0 4px 0 rgba(0,0,0,0.15);182  }183 184  /* Section title */185  .section-title {186    margin: 36px 36px 16px 36px;187    font-size: 50px;188    font-weight: 800;189    color: #F2F2F7;190  }191 192  /* Order bar */193  .order-wrap {194    position: absolute;195    bottom: 120px;196    left: 36px;197    width: 1008px;198    height: 140px;199    border-radius: 80px;200    background: #9C86F7;201    display: flex; align-items: center;202    padding: 0 40px;203    box-sizing: border-box;204    box-shadow: 0 12px 30px rgba(0,0,0,0.45);205    color: #221F2A;206  }207  .order-count {208    width: 92px; height: 92px;209    border-radius: 46px;210    background: #B6A6FB;211    display: flex; align-items: center; justify-content: center;212    font-weight: 800; font-size: 44px;213    color: #1E1C25;214    margin-right: 32px;215  }216  .order-text {217    font-size: 44px;218    font-weight: 800;219    color: #1E1C25;220    flex: 1;221  }222  .order-price {223    font-size: 44px;224    font-weight: 800;225    color: #1E1C25;226  }227 228  /* Home indicator */229  .home-indicator {230    position: absolute;231    bottom: 40px;232    left: 50%;233    transform: translateX(-50%);234    width: 280px;235    height: 12px;236    background: #F2F2F4;237    border-radius: 6px;238    opacity: 0.8;239  }240</style>241</head>242<body>243<div id="render-target">244 245  <!-- Status Bar -->246  <div class="status-bar">247    <div>12:26</div>248    <div class="status-right">249      <span class="dot"></span>250      <span class="dot"></span>251      <span class="dot"></span>252      <span class="dot" style="width:20px;height:20px;"></span>253    </div>254  </div>255 256  <!-- Header -->257  <div class="header">258    <div class="left-chevron">259      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">260        <path d="M6 9l6 6 6-6" stroke="#C7C7D1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261      </svg>262    </div>263    <div class="header-title">264      Featured Items265      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">266        <path d="M6 9l6 6 6-6" stroke="#8E6CF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>267      </svg>268    </div>269    <div class="header-actions">270      <div class="icon-btn">271        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">272          <circle cx="10" cy="10" r="6" stroke="#FFFFFF" stroke-width="2"/>273          <path d="M21 21l-5.5-5.5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>274        </svg>275      </div>276    </div>277  </div>278  <div class="divider"></div>279 280  <!-- List -->281  <div class="list">282 283    <!-- Card 1 -->284    <div class="card">285      <div class="chip">Best Seller</div>286      <div class="card-text">287        <div class="card-title">Chicken Over Rice (VEGAN)</div>288        <div class="card-desc">289          Daring Original Plant Chicken, sautéed peppers and onions, lettuce,290          tomato, vegan mayo, and hot sauce ...291        </div>292        <div class="card-price">$16.00</div>293      </div>294      <div class="card-media">295        <div class="img-ph">[IMG: Chicken over rice bowl]</div>296        <div class="plus-badge">297          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">298            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>299          </svg>300        </div>301      </div>302    </div>303 304    <!-- Card 2 -->305    <div class="card">306      <div class="card-text">307        <div class="card-title">Chorizo Cheesy Fries (VEGAN)</div>308        <div class="card-desc">309          Fries topped with melted Vertage American Cheddar, Abbot's Butcher310          Chorizo, diced onion, and tomato.311        </div>312        <div class="card-price">$12.80</div>313      </div>314      <div class="card-media">315        <div class="img-ph">[IMG: Cheesy chorizo fries]</div>316        <div class="plus-badge">317          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">318            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>319          </svg>320        </div>321      </div>322    </div>323 324    <!-- Card 3 -->325    <div class="card">326      <div class="card-text">327        <div class="card-title">Cheesy BBQ Fries (VEGAN)</div>328        <div class="card-desc">329          Fries topped with melted Vertage American Cheddar, WayFare Nacho330          Cheddar, Abbot's Butcher Ground Beef...331        </div>332        <div class="card-price">$12.80</div>333      </div>334      <div class="card-media">335        <div class="img-ph">[IMG: BBQ fries in foil plate]</div>336        <div class="plus-badge">337          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">338            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>339          </svg>340        </div>341      </div>342    </div>343 344    <!-- Card 4 -->345    <div class="card">346      <div class="card-text">347        <div class="card-title">Burrito Bowl (VEGAN)</div>348        <div class="card-desc">349          Abbot's Butcher Ground Beef, WayFare Nacho Cheddar, sautéed peppers350          and onions, topped with lettuce...351        </div>352        <div class="card-price">$16.00</div>353      </div>354      <div class="card-media">355        <div class="img-ph">[IMG: Burrito bowl with avocado]</div>356        <div class="plus-badge">357          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">358            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>359          </svg>360        </div>361      </div>362    </div>363 364    <!-- Section title -->365    <div class="section-title">Breakfast All Day</div>366 367    <!-- Card 5 (partial view) -->368    <div class="card" style="min-height: 300px;">369      <div class="card-text">370        <div class="card-title">Spicy Breakfast Burrito (VEGA...</div>371        <div class="card-desc">372          Abbot's Butcher Chorizo, WayFare Nacho Cheddar Cheese, Zero Egg,373          hashbrown, spinach, onion, and avo...374        </div>375        <div class="card-price">$16.00</div>376      </div>377      <div class="card-media">378        <div class="img-ph">[IMG: Breakfast burrito halves]</div>379        <div class="plus-badge">380          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">381            <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>382          </svg>383        </div>384      </div>385    </div>386 387  </div>388 389  <!-- Order bar -->390  <div class="order-wrap">391    <div class="order-count">1</div>392    <div class="order-text">View order</div>393    <div class="order-price">$16.00</div>394  </div>395 396  <!-- Home indicator -->397  <div class="home-indicator"></div>398 399</div>400</body>401</html>