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>Migros Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    padding: 30px 48px 0 48px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #555;26    font-size: 34px;27  }28  .status-icons { display: flex; gap: 28px; align-items: center; }29  .icon {30    width: 44px; height: 44px;31  }32 33  /* Header */34  .header {35    padding: 16px 48px 20px 48px;36    display: flex;37    align-items: center;38    justify-content: space-between;39  }40  .brand {41    font-size: 68px;42    font-weight: 700;43    letter-spacing: 0.3px;44  }45  .header-actions { display: flex; gap: 36px; }46  .action-btn .icon { width: 56px; height: 56px; }47 48  /* Segment buttons */49  .segments {50    display: flex;51    border-top: 1px solid #E5E5E5;52    border-bottom: 1px solid #E5E5E5;53    margin-top: 18px;54  }55  .segment {56    width: 50%;57    padding: 28px 48px;58    display: flex;59    align-items: center;60    gap: 22px;61    font-size: 40px;62    color: #333;63    position: relative;64  }65  .segment:first-child { border-right: 1px solid #EEEEEE; }66  .segment .icon { width: 44px; height: 44px; }67 68  /* Promo banner */69  .promo-wrap { padding: 36px 48px 10px 48px; }70  .promo {71    height: 440px;72    background: #4A2258;73    border-radius: 12px;74    position: relative;75    overflow: hidden;76  }77  .promo:before {78    content: "";79    position: absolute;80    top: -30px;81    left: 50%;82    transform: translateX(-50%);83    width: 0; height: 0;84    border-style: solid;85    border-width: 30px 22px 0 22px;86    border-color: #4A2258 transparent transparent transparent;87  }88  .promo .img {89    position: absolute;90    inset: 0;91    margin: 0;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #ddd;96    font-size: 34px;97    letter-spacing: 0.2px;98    background: transparent;99  }100  .promo .img::before {101    content: "[IMG: Promotional banner with peanuts, chocolates and tableware]";102    background: rgba(255,255,255,0.06);103    padding: 14px 24px;104    border: 1px solid rgba(255,255,255,0.18);105    border-radius: 8px;106  }107  .promo .badge {108    position: absolute;109    top: 24px;110    right: 24px;111    background: #FF7A1A;112    color: #fff;113    font-weight: 700;114    font-size: 32px;115    padding: 10px 18px;116    border-radius: 8px;117  }118  .promo-title {119    padding: 18px 48px 0 48px;120    font-size: 44px;121    font-weight: 700;122    color: #222;123  }124 125  /* Offers header */126  .offers-header {127    padding: 36px 48px 10px 48px;128    display: flex;129    align-items: flex-end;130    justify-content: space-between;131  }132  .offers-title {133    font-size: 60px;134    font-weight: 700;135  }136  .offers-sub {137    padding: 0 48px;138    font-size: 34px;139    color: #8A8A8A;140    margin-top: 4px;141  }142  .show-all {143    color: #FF7A1A;144    font-size: 36px;145    font-weight: 600;146  }147 148  /* Product cards scroller */149  .cards {150    padding: 24px 48px 32px 48px;151    display: flex;152    gap: 32px;153    overflow-x: auto;154    -webkit-overflow-scrolling: touch;155  }156  .card {157    min-width: 300px;158    width: 300px;159    background: #fff;160    border-radius: 26px;161    box-shadow: 0 6px 20px rgba(0,0,0,0.08);162    position: relative;163  }164  .card .img {165    width: 100%;166    height: 250px;167    background: #E0E0E0;168    border: 1px solid #BDBDBD;169    border-radius: 26px 26px 0 0;170    display: flex;171    align-items: center;172    justify-content: center;173    color: #757575;174    font-size: 28px;175  }176  .card .overlay {177    position: absolute;178    top: 16px;179    right: 16px;180    width: 56px; height: 56px;181    border-radius: 12px;182    background: #fff;183    border: 1px solid #DADADA;184    display: flex; align-items: center; justify-content: center;185  }186  .card .hit {187    position: absolute;188    left: 18px;189    top: 220px;190    transform: translateY(50%);191    background: #FF7A1A;192    color: #fff;193    font-weight: 800;194    font-size: 30px;195    padding: 6px 14px;196    border-radius: 8px;197  }198  .card-content {199    padding: 32px 22px 26px 22px;200  }201  .price {202    font-size: 56px;203    font-weight: 800;204  }205  .title {206    margin-top: 8px;207    font-size: 34px;208    color: #444;209    line-height: 1.15;210  }211 212  /* Bottom placeholders */213  .bottom-placeholders {214    padding: 20px 48px 260px 48px; /* leave space for nav */215    display: grid;216    grid-template-columns: 1fr 1fr;217    gap: 24px;218  }219  .ph {220    height: 240px;221    background: #F1F1F1;222    border-radius: 26px;223    border: 1px solid #E0E0E0;224  }225 226  /* Bottom navigation */227  .bottom-nav {228    position: absolute;229    bottom: 0; left: 0; right: 0;230    height: 200px;231    background: #fff;232    border-top: 1px solid #E6E6E6;233    display: flex;234    align-items: center;235    justify-content: space-around;236    padding: 18px 0 0 0;237  }238  .nav-item {239    display: flex;240    flex-direction: column;241    align-items: center;242    gap: 12px;243    color: #777;244    font-size: 30px;245  }246  .nav-item .icon { width: 58px; height: 58px; }247  .nav-item.active { color: #FF7A1A; font-weight: 700; }248  .home-indicator {249    position: absolute;250    bottom: 210px;251    left: 50%;252    transform: translateX(-50%);253    width: 320px;254    height: 12px;255    background: #BDBDBD;256    border-radius: 8px;257    opacity: 0.8;258  }259</style>260</head>261<body>262<div id="render-target">263 264  <!-- Status bar -->265  <div class="status-bar">266    <div>9:07</div>267    <div class="status-icons">268      <!-- Signal/WiFi -->269      <svg class="icon" viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z" fill="#777"/></svg>270      <!-- Battery -->271      <svg class="icon" viewBox="0 0 24 24"><rect x="1" y="6" width="19" height="12" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/><rect x="3" y="8" width="11" height="8" fill="#777"/><rect x="20" y="9" width="3" height="6" rx="1" fill="#777"/></svg>272    </div>273  </div>274 275  <!-- Header -->276  <div class="header">277    <div class="brand">Migros</div>278    <div class="header-actions">279      <div class="action-btn">280        <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2"/><path d="M20 20l-4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>281      </div>282      <div class="action-btn">283        <svg class="icon" viewBox="0 0 24 24"><path d="M12 2c-3 0-6 2-6 5v4l-2 2v1h16v-1l-2-2V7c0-3-3-5-6-5zM9 19a3 3 0 006 0" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>284      </div>285      <div class="action-btn">286        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>287      </div>288    </div>289  </div>290 291  <!-- Segments -->292  <div class="segments">293    <div class="segment">294      <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10" stroke="#333" stroke-width="2" stroke-linecap="round" fill="none"/></svg>295      <div>All products</div>296    </div>297    <div class="segment">298      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6c0 4-6 12-6 12S6 13 6 9a6 6 0 016-6zm0 4a2 2 0 110 4 2 2 0 010-4z" fill="#333"/></svg>299      <div>Find stores</div>300    </div>301  </div>302 303  <!-- Promo banner -->304  <div class="promo-wrap">305    <div class="promo">306      <div class="badge">Up to 40%</div>307      <div class="img"></div>308    </div>309  </div>310  <div class="promo-title">Weekend sensation - only from this Thursday to Sunday</div>311 312  <!-- Offers header -->313  <div class="offers-header">314    <div class="offers-title">Offers in the stores</div>315    <div class="show-all">Show all</div>316  </div>317  <div class="offers-sub">No region selected</div>318 319  <!-- Product cards -->320  <div class="cards">321    <!-- Card 1 -->322    <div class="card">323      <div class="img">[IMG: Fleece blanket product]</div>324      <div class="overlay">325        <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 5v14M5 12h14" stroke="#777" stroke-width="2" stroke-linecap="round" fill="none"/></svg>326      </div>327      <div class="hit">Hit</div>328      <div class="card-content">329        <div class="price">19.95</div>330        <div class="title">Fleecedecke</div>331      </div>332    </div>333 334    <!-- Card 2 -->335    <div class="card">336      <div class="img">[IMG: Gas lighter Flexy]</div>337      <div class="overlay">338        <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 5v14M5 12h14" stroke="#777" stroke-width="2" stroke-linecap="round" fill="none"/></svg>339      </div>340      <div class="hit">Hit</div>341      <div class="card-content">342        <div class="price">7.95</div>343        <div class="title">Stabfeuerzeug Flexy</div>344      </div>345    </div>346 347    <!-- Card 3 -->348    <div class="card">349      <div class="img">[IMG: LED Indoor light chain]</div>350      <div class="overlay">351        <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 5v14M5 12h14" stroke="#777" stroke-width="2" stroke-linecap="round" fill="none"/></svg>352      </div>353      <div class="hit">Hit</div>354      <div class="card-content">355        <div class="price">4.95</div>356        <div class="title">Indoor-Lichterkette</div>357      </div>358    </div>359 360    <!-- Card 4 -->361    <div class="card">362      <div class="img">[IMG: Promo product]</div>363      <div class="overlay">364        <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 5v14M5 12h14" stroke="#777" stroke-width="2" stroke-linecap="round" fill="none"/></svg>365      </div>366      <div class="hit">15</div>367      <div class="card-content">368        <div class="price">2.80</div>369        <div class="title">Opti... Poul...</div>370      </div>371    </div>372  </div>373 374  <!-- Bottom placeholders -->375  <div class="bottom-placeholders">376    <div class="ph"></div>377    <div class="ph"></div>378  </div>379 380  <!-- Home indicator (gesture bar) -->381  <div class="home-indicator"></div>382 383  <!-- Bottom navigation -->384  <div class="bottom-nav">385    <div class="nav-item active">386      <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" fill="#FF7A1A"/></svg>387      <div>Migros</div>388    </div>389    <div class="nav-item">390      <svg class="icon" viewBox="0 0 24 24"><path d="M5 5h14v2H5zm0 6h14v2H5zm0 6h10v2H5z" fill="#777"/></svg>391      <div>List</div>392    </div>393    <div class="nav-item">394      <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2" fill="none" stroke="#777" stroke-width="2"/><path d="M7 10h10M7 13h6" stroke="#777" stroke-width="2"/></svg>395      <div>Wallet</div>396    </div>397    <div class="nav-item">398      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="10" fill="#777" font-family="Arial" font-weight="700">Go</text></svg>399      <div>subitoGo</div>400    </div>401    <div class="nav-item">402      <svg class="icon" viewBox="0 0 24 24"><path d="M3 16h2l1-3h13l2 3h-2M6 16v3h12v-3M7 19a2 2 0 11.001-4.001A2 2 0 017 19zm10 0a2 2 0 11.001-4.001A2 2 0 0117 19z" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>403      <div>Order</div>404    </div>405  </div>406 407</div>408</body>409</html>