GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>L’usine Sliced White Bread - UI Replication</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #111;15  }16  /* Header */17  .header {18    position: absolute;19    left: 0; top: 0;20    width: 100%;21    height: 270px;22    background: #C83D5A; /* rosy/pink top bar */23  }24  .status-bar {25    height: 80px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 16px;38  }39  .title-row {40    display: flex;41    align-items: center;42    padding: 18px 32px 0 32px;43    color: #fff;44  }45  .title-row h1 {46    font-size: 54px;47    font-weight: 700;48    margin: 0 0 0 24px;49  }50 51  /* Product area */52  .content {53    position: absolute;54    left: 0; top: 270px;55    width: 100%;56    padding-bottom: 60px;57  }58  .product-img {59    width: 420px;60    height: 170px;61    margin: 56px auto 26px auto;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex;65    align-items: center;66    justify-content: center;67    color: #757575;68    font-size: 28px;69  }70  .product-title {71    text-align: center;72    font-size: 64px;73    font-weight: 700;74    margin: 14px 40px 10px 40px;75  }76  .product-sub {77    text-align: center;78    font-size: 40px;79    color: #666;80    margin-bottom: 40px;81  }82 83  .section-title {84    font-size: 54px;85    font-weight: 700;86    padding: 0 32px;87    margin: 0 0 10px 0;88  }89 90  /* Shop list */91  .shop-list { margin-top: 10px; }92  .shop-item {93    display: flex;94    align-items: center;95    padding: 28px 32px;96    border-top: 1px solid #EAEAEA;97  }98  .logo {99    width: 120px;100    height: 120px;101    margin-right: 28px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    color: #757575;105    font-size: 24px;106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .shop-text {111    flex: 1;112  }113  .shop-name {114    font-size: 46px;115    font-weight: 700;116    margin: 0 0 8px 0;117  }118  .meta {119    font-size: 34px;120    color: #666;121    margin-bottom: 8px;122  }123  .rating {124    display: inline-flex;125    align-items: center;126    gap: 12px;127    font-size: 40px;128    color: #1a1a1a;129  }130  .rating .count {131    color: #888;132    font-size: 36px;133  }134  .chevron {135    width: 48px;136    height: 48px;137    margin-left: 12px;138  }139 140  /* Bottom home indicator */141  .home-indicator {142    position: absolute;143    bottom: 30px;144    left: 50%;145    transform: translateX(-50%);146    width: 420px;147    height: 16px;148    background: #111;149    border-radius: 10px;150    opacity: 0.75;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Header -->158  <div class="header">159    <div class="status-bar">160      <div class="status-left">161        <span>8:00</span>162        <!-- Small location pin -->163        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">164          <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 5.4 10.2 5.7 10.5.2.2.5.2.6 0C12.6 18.2 18 12.5 18 8c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/>165        </svg>166      </div>167      <div class="status-right" style="display:flex;align-items:center;gap:18px;">168        <!-- WiFi icon -->169        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">170          <path d="M12 18.5c.7 0 1.3.6 1.3 1.3S12.7 21 12 21s-1.3-.6-1.3-1.3.6-1.2 1.3-1.2zM3 9.5C6.3 6.8 9.2 6 12 6s5.7.8 9 3.5l-1.5 1.5C16.9 8 14.5 7.4 12 7.4S7.1 8 4.6 10.5L3 9.5zm3.7 3.6C8.7 11.3 10.4 11 12 11s3.3.3 5.3 2.1l-1.5 1.5c-1.4-1.2-2.7-1.6-3.8-1.6s-2.4.4-3.8 1.6l-1.5-1.5z"/>171        </svg>172        <!-- Battery icon -->173        <svg width="44" height="24" viewBox="0 0 44 24" fill="none">174          <rect x="2" y="4" width="34" height="16" rx="3" stroke="#fff" stroke-width="2"/>175          <rect x="5" y="7" width="28" height="10" fill="#fff"/>176          <rect x="38" y="8" width="4" height="8" rx="1.5" fill="#fff"/>177        </svg>178      </div>179    </div>180 181    <div class="title-row">182      <!-- Back arrow -->183      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">184        <path d="M15.5 5l-7 7 7 7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>185      </svg>186      <h1>L’usine Sliced White Bread</h1>187    </div>188  </div>189 190  <div class="content">191    <div class="product-img">[IMG: L’usine bread pack]</div>192 193    <div class="product-title">L’usine Sliced White Bread</div>194    <div class="product-sub">600 gr</div>195 196    <div class="section-title">Shops</div>197 198    <div class="shop-list">199 200      <!-- Shop 1 -->201      <div class="shop-item">202        <div class="logo">[Logo]</div>203        <div class="shop-text">204          <div class="shop-name">Smile On JVC Supermarket</div>205          <div class="meta">15 mins</div>206          <div class="rating">207            <!-- Star icon -->208            <svg width="42" height="42" viewBox="0 0 24 24">209              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>210            </svg>211            <span>4.8</span>212            <span class="count">(500+)</span>213          </div>214        </div>215        <!-- Chevron -->216        <svg class="chevron" viewBox="0 0 24 24" fill="none">217          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>218        </svg>219      </div>220 221      <!-- Shop 2 -->222      <div class="shop-item">223        <div class="logo">[Logo]</div>224        <div class="shop-text">225          <div class="shop-name">Jameelaas Star Supermarket</div>226          <div class="meta">15 mins</div>227          <div class="rating">228            <svg width="42" height="42" viewBox="0 0 24 24">229              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>230            </svg>231            <span>4.9</span>232            <span class="count">(500+)</span>233          </div>234        </div>235        <svg class="chevron" viewBox="0 0 24 24" fill="none">236          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>237        </svg>238      </div>239 240      <!-- Shop 3 -->241      <div class="shop-item">242        <div class="logo">[Logo]</div>243        <div class="shop-text">244          <div class="shop-name">Atlantics Supermarket</div>245          <div class="meta">15 mins</div>246          <div class="rating">247            <svg width="42" height="42" viewBox="0 0 24 24">248              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>249            </svg>250            <span>4.8</span>251            <span class="count">(500+)</span>252          </div>253        </div>254        <svg class="chevron" viewBox="0 0 24 24" fill="none">255          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>256        </svg>257      </div>258 259      <!-- Shop 4 -->260      <div class="shop-item">261        <div class="logo">[Logo]</div>262        <div class="shop-text">263          <div class="shop-name">Trust Value Supermarket</div>264          <div class="meta">15 mins</div>265          <div class="rating">266            <svg width="42" height="42" viewBox="0 0 24 24">267              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>268            </svg>269            <span>4.9</span>270            <span class="count">(500+)</span>271          </div>272        </div>273        <svg class="chevron" viewBox="0 0 24 24" fill="none">274          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>275        </svg>276      </div>277 278      <!-- Shop 5 -->279      <div class="shop-item">280        <div class="logo">[Logo]</div>281        <div class="shop-text">282          <div class="shop-name">Classic Minimart</div>283          <div class="meta">15 mins</div>284          <div class="rating">285            <svg width="42" height="42" viewBox="0 0 24 24">286              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>287            </svg>288            <span>5.0</span>289            <span class="count">(401)</span>290          </div>291        </div>292        <svg class="chevron" viewBox="0 0 24 24" fill="none">293          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>294        </svg>295      </div>296 297      <!-- Shop 6 -->298      <div class="shop-item">299        <div class="logo">[Logo]</div>300        <div class="shop-text">301          <div class="shop-name">Best In Village Supermarket</div>302          <div class="meta">20 mins</div>303          <div class="rating">304            <svg width="42" height="42" viewBox="0 0 24 24">305              <path fill="#F29C38" d="M12 2l2.9 6 6.6.7-4.9 4.2 1.5 6.4L12 16.8 5.9 19.3l1.5-6.4-4.9-4.2 6.6-.7L12 2z"/>306            </svg>307            <span>4.8</span>308            <span class="count">(461)</span>309          </div>310        </div>311        <svg class="chevron" viewBox="0 0 24 24" fill="none">312          <path d="M9 5l7 7-7 7" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>313        </svg>314      </div>315 316    </div>317  </div>318 319  <div class="home-indicator"></div>320</div>321</body>322</html>