GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>M-Classic IP-SUISSE · White Flour - Product Detail</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    box-shadow: 0 2px 10px rgba(0,0,0,0.08);14    border-radius: 24px;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    color: #333;24    font-size: 34px;25  }26  .status-right {27    margin-left: auto;28    display: flex;29    align-items: center;30    gap: 26px;31    color: #666;32    font-size: 30px;33  }34  .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    display: flex;40    align-items: center;41    padding: 0 24px;42    border-bottom: 1px solid #eee;43  }44  .icon-btn {45    width: 88px;46    height: 88px;47    border-radius: 16px;48    display: flex;49    align-items: center;50    justify-content: center;51    color: #333;52  }53  .title {54    font-size: 44px;55    font-weight: 600;56    color: #222;57    margin-left: 18px;58    white-space: nowrap;59    overflow: hidden;60    text-overflow: ellipsis;61    width: 580px;62  }63  .app-actions {64    margin-left: auto;65    display: flex;66    align-items: center;67    gap: 26px;68  }69  .badge-col {70    display: flex;71    flex-direction: column;72    align-items: center;73    font-size: 30px;74    color: #666;75  }76  .amount {77    margin-top: 6px;78    color: #333;79    font-weight: 600;80  }81 82  /* Content area */83  .content {84    position: absolute;85    left: 0;86    right: 0;87    top: 230px; /* status(90) + appbar(140) */88    bottom: 210px; /* space for bottom nav */89    overflow: auto;90    padding: 0 36px 40px;91  }92 93  /* Section headers */94  .section-row {95    display: flex;96    align-items: center;97    justify-content: space-between;98    padding: 30px 6px;99    border-bottom: 1px solid #eee;100  }101  .section-title {102    font-size: 42px;103    font-weight: 700;104    color: #222;105  }106 107  .info-block {108    padding: 28px 6px 8px;109  }110  .info-label {111    font-size: 36px;112    color: #333;113    font-weight: 700;114    margin-bottom: 18px;115  }116  .info-text {117    font-size: 34px;118    color: #444;119    line-height: 1.45;120  }121  .spacer-xxl { height: 18px; }122 123  /* Bottom navigation */124  .bottom-nav {125    position: absolute;126    left: 0;127    right: 0;128    bottom: 60px;129    height: 160px;130    border-top: 1px solid #eee;131    background: #fff;132    display: flex;133    align-items: center;134    justify-content: space-around;135    padding: 14px 0;136  }137  .nav-item {138    display: flex;139    flex-direction: column;140    align-items: center;141    color: #888;142    font-size: 32px;143  }144  .nav-icon {145    width: 86px;146    height: 86px;147    border-radius: 20px;148    background: #f2f2f2;149    border: 1px solid #d8d8d8;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #7b7b7b;154    margin-bottom: 10px;155    font-weight: 700;156  }157  .nav-item.active { color: #ff7a1a; }158  .nav-item.active .nav-icon { color: #ff7a1a; border-color: #ffc9a3; background: #fff3e9; }159 160  /* Home indicator */161  .home-indicator {162    position: absolute;163    left: 50%;164    transform: translateX(-50%);165    bottom: 16px;166    width: 480px;167    height: 12px;168    border-radius: 12px;169    background: #cfcfcf;170  }171 172  /* Simple chevrons and back arrow */173  svg { display: block; }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status Bar -->180  <div class="status-bar">181    <div>10:06</div>182    <div class="status-right">183      <div>S</div>184      <div style="border:1px solid #aaa; padding:4px 8px; border-radius:6px;">LR</div>185      <div>🔍</div>186      <div style="border:1px solid #aaa; padding:4px 8px; border-radius:6px;">📄</div>187      <span class="dot"></span>188      <div>📶</div>189      <div>🔋</div>190    </div>191  </div>192 193  <!-- App Bar -->194  <div class="app-bar">195    <div class="icon-btn">196      <svg width="48" height="48" viewBox="0 0 24 24">197        <path d="M15 5 L7 12 L15 19" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198      </svg>199    </div>200    <div class="title">M-Classic IP-SUISSE · Whit...</div>201    <div class="app-actions">202      <div class="icon-btn" title="Favorite" style="font-size:42px;">♡</div>203      <div class="badge-col">204        <div class="icon-btn" title="Basket" style="font-size:40px;">🛒</div>205        <div class="amount">105.00</div>206      </div>207    </div>208  </div>209 210  <!-- Content -->211  <div class="content">212 213    <div class="section-row">214      <div class="section-title">Nutritional value</div>215      <div>216        <svg width="48" height="48" viewBox="0 0 24 24">217          <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218        </svg>219      </div>220    </div>221 222    <div class="section-row" style="border-bottom: none; padding-bottom: 14px;">223      <div class="section-title">Further information</div>224      <div>225        <svg width="48" height="48" viewBox="0 0 24 24">226          <path d="M6 15 L12 9 L18 15" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227        </svg>228      </div>229    </div>230 231    <div class="info-block">232      <div class="info-label">Legal designation/Regulated product name</div>233      <div class="info-text">Weizenweissmehl</div>234    </div>235 236    <div class="info-block">237      <div class="info-label">Distribution</div>238      <div class="info-text">239        Migros-Genossenschafts-Bund<br>240        Limmatstrasse 152, CH-8031 Zürich241      </div>242    </div>243 244    <div class="info-block">245      <div class="info-label">Article number</div>246      <div class="info-text">104611000000</div>247    </div>248 249    <div class="info-block">250      <div class="info-label">Weitere Zusatzangaben</div>251      <div class="info-text">Mehl kann durch natürliche Wasserabgabe an Gewicht verlieren.</div>252    </div>253 254    <div class="info-block">255      <div class="info-label">Flour type (Germany)</div>256      <div class="info-text">550</div>257    </div>258 259    <div class="info-block">260      <div class="info-label">Packaging type</div>261      <div class="info-text">Papierbeutel</div>262    </div>263 264    <div class="info-block">265      <div class="info-label">Notes for preparation</div>266      <div class="info-text">backen</div>267    </div>268 269    <div class="spacer-xxl"></div>270  </div>271 272  <!-- Bottom Navigation -->273  <div class="bottom-nav">274    <div class="nav-item">275      <div class="nav-icon">M</div>276      <div>Migros</div>277    </div>278    <div class="nav-item">279      <div class="nav-icon">🗒</div>280      <div>List</div>281    </div>282    <div class="nav-item">283      <div class="nav-icon">💳</div>284      <div>Wallet</div>285    </div>286    <div class="nav-item">287      <div class="nav-icon">Go</div>288      <div>subitoGo</div>289    </div>290    <div class="nav-item active">291      <div class="nav-icon">🚚</div>292      <div>Order</div>293    </div>294  </div>295 296  <div class="home-indicator"></div>297</div>298</body>299</html>