GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>M-Classic IP-SUISSE · White…</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 0 0 1px rgba(0,0,0,0.06);14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 34px 36px 0 36px;20 box-sizing: border-box;21 display: flex;22 align-items: center;23 color: #222;24 font-weight: 600;25 font-size: 44px;26 }27 .status-icons {28 margin-left: auto;29 display: flex;30 gap: 26px;31 align-items: center;32 }33 .status-pill {34 width: 52px; height: 52px; border-radius: 10px; background:#EFEFEF; border:1px solid #D0D0D0;35 display:flex; align-items:center; justify-content:center; color:#777; font-size:28px;36 }37 38 /* App bar */39 .app-bar {40 height: 144px;41 display: flex;42 align-items: center;43 padding: 0 30px;44 box-sizing: border-box;45 border-bottom: 1px solid #eee;46 }47 .icon-btn {48 width: 84px; height: 84px; display:flex; align-items:center; justify-content:center; border-radius: 50%;49 }50 .title {51 font-size: 52px; font-weight: 700; color:#1f1f1f;52 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;53 margin-left: 20px;54 }55 .app-actions {56 margin-left: auto; display: flex; align-items: center; gap: 24px;57 }58 .price-small {59 font-size: 36px; color:#333;60 margin-left: 8px;61 }62 63 /* Content */64 .content {65 padding: 34px 36px 160px;66 box-sizing: border-box;67 overflow: hidden;68 }69 .section-title {70 font-size: 54px; font-weight: 800; color:#111; margin: 30px 0 12px;71 }72 .section-text {73 font-size: 44px; color:#333; line-height: 1.4;74 }75 76 /* Rating */77 .rating-row {78 display: flex; align-items: center; gap: 24px; margin-top: 24px;79 }80 .stars { display: flex; gap: 12px; }81 .link {82 font-size: 44px; color:#1463ff; text-decoration: none;83 }84 85 /* M-Check badge */86 .mcheck {87 margin-top: 24px;88 }89 .badge {90 width: 300px; height: 360px; border-radius: 30px; border:1px solid #cbd5c0; background:#f8fff2;91 box-shadow: 0 4px 12px rgba(0,0,0,0.06);92 display:flex; flex-direction: column; align-items: center; justify-content: flex-start;93 }94 .badge-header {95 width: 100%; background:#54AF3B; color:#fff; border-top-left-radius: 30px; border-top-right-radius:30px;96 font-size: 42px; padding: 18px 22px; box-sizing:border-box;97 }98 .badge-stars { display:flex; gap:12px; padding: 20px 0; }99 .cloud {100 width: 180px; height: 120px; border-radius: 20px; background:#ffffff; border:2px dashed #bdd7b4;101 display:flex; align-items:center; justify-content:center; color:#54AF3B; font-weight:800; font-size:56px;102 }103 104 /* Expandable rows */105 .exp-row {106 height: 120px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;107 display:flex; align-items:center; justify-content: space-between; padding: 0 16px 0 0;108 margin-top: 26px;109 }110 .exp-row .label {111 font-size: 54px; font-weight: 700; color:#222;112 padding-left: 20px;113 }114 115 /* More section */116 .more-header {117 display:flex; align-items:center; justify-content: space-between; margin-top: 40px;118 }119 .more-title { font-size: 56px; font-weight: 800; color:#111; }120 .show-all { font-size: 48px; color:#ff7e2d; }121 .product-grid {122 display:flex; gap: 24px; margin-top: 16px;123 }124 .product-card {125 width: 318px; height: 220px; border:1px solid #e0e0e0; border-radius: 24px; background:#fafafa;126 display:flex; align-items:center; justify-content:center; color:#999; font-size: 90px; font-weight: 700;127 }128 129 /* Bottom nav */130 .bottom-nav {131 position: absolute; bottom: 0; left: 0; right: 0;132 height: 164px; border-top: 1px solid #eaeaea; background:#ffffff;133 display:flex; align-items:center; justify-content: space-around;134 }135 .nav-item { display:flex; flex-direction:column; align-items:center; gap: 14px; color:#777; }136 .nav-item .label { font-size: 36px; }137 .nav-item .icon {138 width: 84px; height: 84px; border-radius: 20px; border:1px solid #ddd; background:#f5f5f5;139 display:flex; align-items:center; justify-content:center;140 }141 .nav-item.active { color:#ff7e2d; }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status bar -->148 <div class="status-bar">149 10:05150 <div class="status-icons">151 <div class="status-pill">S</div>152 <div class="status-pill">LR</div>153 <div class="status-pill">🔍</div>154 <div class="status-pill">🧾</div>155 <div class="status-pill">•</div>156 <div class="status-pill">🔋</div>157 </div>158 </div>159 160 <!-- App bar -->161 <div class="app-bar">162 <div class="icon-btn" aria-label="Back">163 <svg width="48" height="48" viewBox="0 0 24 24">164 <path d="M15.5 5.5L9 12l6.5 6.5" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </div>167 <div class="title">M-Classic IP-SUISSE · Whit...</div>168 <div class="app-actions">169 <div class="icon-btn" aria-label="Favorite">170 <svg width="48" height="48" viewBox="0 0 24 24">171 <path d="M12 21s-7-4.7-7-10.3A4.7 4.7 0 0 1 9.7 6a4.7 4.7 0 0 1 2.3 1 4.7 4.7 0 0 1 2.3-1A4.7 4.7 0 0 1 19 10.7C19 16.3 12 21 12 21z" fill="none" stroke="#222" stroke-width="2"/>172 </svg>173 </div>174 <div class="icon-btn" aria-label="Cart">175 <svg width="52" height="52" viewBox="0 0 24 24">176 <path d="M3 5h2l2 12h10l2-9H7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>177 <circle cx="10" cy="20" r="1.7" fill="#222"/>178 <circle cx="18" cy="20" r="1.7" fill="#222"/>179 </svg>180 </div>181 <div class="price-small">105.00</div>182 </div>183 </div>184 185 <!-- Content -->186 <div class="content">187 <div class="section-title">Ingredients</div>188 <div class="section-text">pas de liste d'ingrédients.</div>189 190 <div class="section-title">Allergens</div>191 <div class="section-text">Cereals containing gluten and products thereof</div>192 193 <div class="section-title">Country of Production</div>194 <div class="section-text">Schweizer Produkt</div>195 196 <div class="section-title">Rating</div>197 <div class="rating-row">198 <div class="stars">199 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M12 3.5l2.8 5.6 6.2.9-4.5 4.4 1.1 6.1L12 17.7 6.4 20.5l1.1-6.1-4.5-4.4 6.2-.9L12 3.5z" fill="#222"/></svg>200 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M12 3.5l2.8 5.6 6.2.9-4.5 4.4 1.1 6.1L12 17.7 6.4 20.5l1.1-6.1-4.5-4.4 6.2-.9L12 3.5z" fill="#222"/></svg>201 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M12 3.5l2.8 5.6 6.2.9-4.5 4.4 1.1 6.1L12 17.7 6.4 20.5l1.1-6.1-4.5-4.4 6.2-.9L12 3.5z" fill="#222"/></svg>202 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M12 3.5l2.8 5.6 6.2.9-4.5 4.4 1.1 6.1L12 17.7 6.4 20.5l1.1-6.1-4.5-4.4 6.2-.9L12 3.5z" fill="#222"/></svg>203 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M12 3.5l2.8 5.6 6.2.9-4.5 4.4 1.1 6.1L12 17.7 6.4 20.5l1.1-6.1-4.5-4.4 6.2-.9L12 3.5z" fill="none" stroke="#222" stroke-width="2"/></svg>204 </div>205 <a class="link" href="#">109 ratings on Migipedia</a>206 </div>207 208 <div class="section-title">M-Check</div>209 <div class="mcheck">210 <div class="badge">211 <div class="badge-header">Climate impact</div>212 <div class="badge-stars">213 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6L12 17.2 6.9 19.1l1-5.6-4.1-4 5.7-.8L12 3.5z" fill="#fff" stroke="#3c8f2b" stroke-width="2"/></svg>214 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6L12 17.2 6.9 19.1l1-5.6-4.1-4 5.7-.8L12 3.5z" fill="#fff" stroke="#3c8f2b" stroke-width="2"/></svg>215 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6L12 17.2 6.9 19.1l1-5.6-4.1-4 5.7-.8L12 3.5z" fill="#fff" stroke="#3c8f2b" stroke-width="2"/></svg>216 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6L12 17.2 6.9 19.1l1-5.6-4.1-4 5.7-.8L12 3.5z" fill="#fff" stroke="#3c8f2b" stroke-width="2"/></svg>217 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6L12 17.2 6.9 19.1l1-5.6-4.1-4 5.7-.8L12 3.5z" fill="#fff" stroke="#3c8f2b" stroke-width="2"/></svg>218 </div>219 <div class="cloud">CO₂</div>220 </div>221 </div>222 223 <div class="exp-row">224 <div class="label">Nutritional value</div>225 <svg width="60" height="60" viewBox="0 0 24 24">226 <path d="M9 6l7 6-7 6" fill="none" stroke="#555" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 </div>229 230 <div class="exp-row">231 <div class="label">Further information</div>232 <svg width="60" height="60" viewBox="0 0 24 24">233 <path d="M9 6l7 6-7 6" fill="none" stroke="#555" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 237 <div class="more-header">238 <div class="more-title">More from this category</div>239 <div class="show-all">Show all</div>240 </div>241 <div class="product-grid">242 <div class="product-card">+</div>243 <div class="product-card">+</div>244 <div class="product-card">+</div>245 </div>246 </div>247 248 <!-- Bottom navigation -->249 <div class="bottom-nav">250 <div class="nav-item">251 <div class="icon">M</div>252 <div class="label">Migros</div>253 </div>254 <div class="nav-item">255 <div class="icon">256 <svg width="36" height="36" viewBox="0 0 24 24">257 <rect x="5" y="5" width="14" height="14" fill="none" stroke="#777" stroke-width="2"/>258 <path d="M8 9h8M8 13h8" stroke="#777" stroke-width="2"/>259 </svg>260 </div>261 <div class="label">List</div>262 </div>263 <div class="nav-item">264 <div class="icon">265 <svg width="36" height="36" viewBox="0 0 24 24">266 <path d="M4 10l8-5 8 5v8H4z" fill="none" stroke="#777" stroke-width="2"/>267 </svg>268 </div>269 <div class="label">Wallet</div>270 </div>271 <div class="nav-item">272 <div class="icon">Go</div>273 <div class="label">subitoGo</div>274 </div>275 <div class="nav-item active">276 <div class="icon" style="border-color:#ff7e2d;">277 <svg width="36" height="36" viewBox="0 0 24 24">278 <path d="M3 5h2l2 12h10l2-9H7" fill="none" stroke="#ff7e2d" stroke-width="2"/>279 </svg>280 </div>281 <div class="label">Order</div>282 </div>283 </div>284 285</div>286</body>287</html>