GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>M-Classic IP-SUISSE · White flour - UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-weight: 600;25    font-size: 38px;26    color: #111;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 28px;32    color: #555;33    font-size: 34px;34  }35  .dot { width: 12px; height: 12px; background:#555; border-radius: 50%; display:inline-block; }36 37  /* App bar */38  .app-bar {39    height: 120px;40    padding: 0 28px;41    border-bottom: 1px solid #eee;42    display: flex;43    align-items: center;44    gap: 18px;45  }46  .app-title {47    font-size: 48px;48    font-weight: 700;49    color: #222;50    flex: 1;51    white-space: nowrap;52    overflow: hidden;53    text-overflow: ellipsis;54  }55  .icon-btn {56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61    border-radius: 36px;62  }63  .cart-wrap {64    position: relative;65    display: flex;66    align-items: center;67    gap: 16px;68  }69  .cart-amount {70    font-size: 36px;71    color: #333;72    margin-left: 8px;73  }74 75  /* Product image */76  .product-image {77    width: 480px;78    height: 640px;79    margin: 40px auto 20px auto;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    display: flex;83    align-items: center;84    justify-content: center;85    color: #757575;86    border-radius: 8px;87    text-align: center;88    line-height: 1.2;89  }90 91  /* Price and title */92  .price {93    font-size: 108px;94    font-weight: 800;95    margin: 20px 36px 10px 36px;96    letter-spacing: 1px;97  }98  .product-title {99    margin: 0 36px;100    font-size: 52px;101    font-weight: 700;102    color: #222;103  }104  .sub-info {105    margin: 22px 36px 0 36px;106    display: flex;107    gap: 36px;108    font-size: 44px;109    color: #777;110  }111 112  /* Buttons */113  .cta {114    margin: 40px 36px 0 36px;115    background: #F36F21;116    color: #fff;117    height: 128px;118    border-radius: 28px;119    display: flex;120    align-items: center;121    justify-content: center;122    gap: 24px;123    font-size: 52px;124    font-weight: 800;125  }126  .availability {127    margin: 34px 36px;128    display: flex;129    align-items: center;130    gap: 24px;131    font-size: 50px;132    color: #d65a19;133  }134 135  /* Sections */136  .section {137    margin-top: 30px;138    border-top: 1px solid #eee;139    padding: 30px 36px 0 36px;140  }141  .section-header {142    display: flex;143    align-items: center;144    justify-content: space-between;145    font-size: 50px;146    font-weight: 800;147    color: #222;148    padding-bottom: 20px;149  }150  .brand-title {151    font-size: 46px;152    color: #333;153    margin: 20px 36px;154    font-weight: 700;155  }156  .brand-grid {157    display: flex;158    gap: 28px;159    padding: 0 36px 0 36px;160  }161  .brand-item {162    width: 240px;163    height: 240px;164    background: #E0E0E0;165    border: 1px solid #BDBDBD;166    border-radius: 30px;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #757575;171    font-size: 40px;172    text-align: center;173  }174 175  /* Bottom navigation */176  .bottom-nav {177    position: absolute;178    bottom: 0;179    left: 0;180    width: 100%;181    border-top: 1px solid #eee;182    background: #fff;183    height: 220px;184    display: flex;185    align-items: center;186    justify-content: space-around;187  }188  .nav-item {189    display: flex;190    flex-direction: column;191    align-items: center;192    gap: 16px;193    font-size: 38px;194    color: #666;195  }196  .nav-item.active { color: #F36F21; }197  .nav-icon {198    width: 90px;199    height: 90px;200    border-radius: 20px;201    display: flex;202    align-items: center;203    justify-content: center;204    background: #f7f7f7;205    border: 1px solid #e5e5e5;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status Bar -->213  <div class="status-bar">214    <div>10:04</div>215    <div class="status-icons">216      <span>LR</span>217      <span>Q</span>218      <span>S</span>219      <span class="dot"></span>220      <!-- Simple signal/wifi/battery group -->221      <svg width="36" height="36"><rect x="4" y="8" width="28" height="20" rx="4" fill="#666"/></svg>222      <svg width="36" height="36"><path d="M2 30 L18 14 L34 30" stroke="#666" stroke-width="4" fill="none"/></svg>223      <svg width="36" height="36"><rect x="6" y="8" width="20" height="20" rx="3" fill="#666"/><rect x="28" y="14" width="4" height="8" fill="#666"/></svg>224    </div>225  </div>226 227  <!-- App Bar -->228  <div class="app-bar">229    <div class="icon-btn" title="Back">230      <svg width="56" height="56" viewBox="0 0 24 24">231        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232      </svg>233    </div>234    <div class="app-title">M-Classic IP-SUISSE · White flour</div>235    <div class="icon-btn" title="Favorite">236      <svg width="56" height="56" viewBox="0 0 24 24">237        <path d="M12 21s-7-4.35-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.65-7 10-7 10z" stroke="#333" stroke-width="2" fill="none"/>238      </svg>239    </div>240    <div class="cart-wrap">241      <div class="icon-btn" title="Cart">242        <svg width="56" height="56" viewBox="0 0 24 24">243          <path d="M6 6h15l-2 8H8L6 6z" stroke="#333" stroke-width="2" fill="none"/>244          <circle cx="9" cy="20" r="2" fill="#333"/>245          <circle cx="17" cy="20" r="2" fill="#333"/>246        </svg>247      </div>248      <div class="cart-amount">105.00</div>249    </div>250  </div>251 252  <!-- Product Image -->253  <div class="product-image">[IMG: M-Classic IP-SUISSE flour bag]</div>254 255  <!-- Price and Title -->256  <div class="price">2.10</div>257  <div class="product-title">M-Classic IP-SUISSE · White flour</div>258 259  <!-- Sub info -->260  <div class="sub-info">261    <div>1 kg</div>262    <div>0.21/100g</div>263  </div>264 265  <!-- Add to basket -->266  <div class="cta">267    <svg width="60" height="60" viewBox="0 0 24 24">268      <path d="M6 6h15l-2 8H8L6 6z" stroke="#fff" stroke-width="2" fill="none"/>269      <circle cx="9" cy="20" r="2" fill="#fff"/>270      <circle cx="17" cy="20" r="2" fill="#fff"/>271    </svg>272    <div>Add to basket</div>273  </div>274 275  <!-- Availability -->276  <div class="availability">277    <svg width="56" height="56" viewBox="0 0 24 24">278      <path d="M12 2C7.58 2 4 5.58 4 10c0 6 8 12 8 12s8-6 8-12c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#d65a19"/>279    </svg>280    <div>Check availability in stores</div>281  </div>282 283  <!-- Attributes section -->284  <div class="section">285    <div class="section-header">286      <div>Most important attributes</div>287      <svg width="50" height="50" viewBox="0 0 24 24">288        <path d="M6 10l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>289      </svg>290    </div>291  </div>292 293  <div class="brand-title">Brand & labels</div>294  <div class="brand-grid">295    <div class="brand-item">[IMG: MClassic logo]</div>296    <div class="brand-item">[IMG: IP-SUISSE label]</div>297    <div class="brand-item">[IMG: Swiss flag]</div>298  </div>299 300  <!-- Spacer to keep content above bottom nav -->301  <div style="height: 180px;"></div>302 303  <!-- Bottom Navigation -->304  <div class="bottom-nav">305    <div class="nav-item">306      <div class="nav-icon">307        <svg width="48" height="48" viewBox="0 0 24 24">308          <path d="M3 10l9-7 9 7v10H3V10z" stroke="#666" stroke-width="2" fill="none"/>309        </svg>310      </div>311      <div>Migros</div>312    </div>313    <div class="nav-item">314      <div class="nav-icon">315        <svg width="48" height="48" viewBox="0 0 24 24">316          <path d="M6 4h12v4H6zM6 10h12v4H6zM6 16h12v4H6z" fill="#666"/>317        </svg>318      </div>319      <div>List</div>320    </div>321    <div class="nav-item">322      <div class="nav-icon">323        <svg width="48" height="48" viewBox="0 0 24 24">324          <rect x="4" y="6" width="16" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>325          <path d="M4 10h16" stroke="#666" stroke-width="2"/>326        </svg>327      </div>328      <div>Wallet</div>329    </div>330    <div class="nav-item">331      <div class="nav-icon">332        <svg width="48" height="48" viewBox="0 0 24 24">333          <path d="M5 17l7-10 7 10H5z" stroke="#666" stroke-width="2" fill="none"/>334        </svg>335      </div>336      <div>subitoGo</div>337    </div>338    <div class="nav-item active">339      <div class="nav-icon" style="background:#fff;border-color:#F36F21;">340        <svg width="48" height="48" viewBox="0 0 24 24">341          <rect x="3" y="7" width="18" height="12" rx="2" stroke="#F36F21" stroke-width="2" fill="none"/>342          <path d="M9 7V3h6v4" stroke="#F36F21" stroke-width="2"/>343        </svg>344      </div>345      <div>Order</div>346    </div>347  </div>348 349</div>350</body>351</html>