GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Samsung RB34C605CB1/EF - Mobile UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0f1418; color:#fff;11  }12  .status-bar {13    height:120px; padding:0 30px;14    display:flex; align-items:center; justify-content:space-between;15    color:#cfd8dc; font-size:38px;16  }17  .orange-banner {18    height:120px; background:#ff7d00; color:#0a1a24;19    display:flex; align-items:center; gap:22px; padding:0 34px;20    font-weight:600; font-size:38px;21  }22  .top-actions {23    height:120px; display:flex; align-items:center; justify-content:space-between;24    padding:0 30px; color:#cfd8dc;25  }26  .icon-btn { width:86px; height:86px; border-radius:12px; display:flex; align-items:center; justify-content:center; }27  .icon-btn svg { width:56px; height:56px; fill:#cfd8dc; }28  .content {29    padding:0 40px;30  }31  .deal-pill {32    position:absolute; right:40px; top:480px;33    background:#ff7d00; color:#1d2b33; padding:20px 26px; border-radius:14px;34    font-weight:700; font-size:36px;35  }36  .main-image {37    width:420px; height:760px; margin:40px auto 20px auto;38    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;39    display:flex; align-items:center; justify-content:center; text-align:center;40    border-radius:8px;41  }42  .thumb-row {43    display:flex; justify-content:center; gap:36px; margin:20px 0 40px 0;44  }45  .thumb {46    width:160px; height:150px; background:#1a2229; border:2px solid #2a3640; border-radius:18px;47    display:flex; align-items:center; justify-content:center; color:#b3c0c9; font-size:30px;48  }49  .title {50    font-size:56px; font-weight:800; margin-top:16px;51  }52  .rating-row { display:flex; align-items:center; gap:18px; margin:20px 0; }53  .stars { display:flex; gap:10px; }54  .star-circle {55    width:50px; height:50px; background:#1a2229; border-radius:50%; border:2px solid #2a3640; display:flex; align-items:center; justify-content:center;56  }57  .star-circle svg { width:34px; height:34px; fill:#5bd35b; }58  .review-text { color:#59a9ff; font-size:36px; }59  .variant {60    background:#1a2229; border:2px solid #2a3640; border-radius:18px;61    padding:28px; font-size:36px; color:#cfd8dc; display:flex; align-items:center; justify-content:space-between;62  }63  .badge-row { display:flex; align-items:center; gap:22px; margin:26px 0; }64  .energy-badge {65    display:flex; align-items:center; gap:12px; font-size:34px;66  }67  .energy-box {68    width:70px; height:70px; border-radius:6px; border:2px solid #9cc35b; color:#9cc35b;69    display:flex; align-items:center; justify-content:center; background:#132117; font-weight:700;70  }71  .link { color:#59a9ff; text-decoration:none; font-size:36px; }72  .price-row { display:flex; align-items:center; justify-content:space-between; margin:26px 0; }73  .price-left { display:flex; align-items:baseline; gap:24px; }74  .price { font-size:56px; font-weight:800; }75  .retail { color:#b0b7bd; text-decoration:line-through; font-size:36px; }76  .delivery { color:#60d661; font-size:36px; display:flex; align-items:center; gap:12px; }77  .delivery svg { width:40px; height:40px; fill:#60d661; }78  .cta {79    height:140px; border-radius:20px; display:flex; align-items:center; justify-content:center;80    font-size:42px; font-weight:800; margin:20px 0;81  }82  .cta.blue { background:#62aafc; color:#0c1b24; }83  .cta.dark { background:#212a31; color:#cfd8dc; border:2px solid #2f3b45; }84  .cta.green { background:#43c84b; color:#0b1d16; }85  .floating-heart {86    position:absolute; right:40px; bottom:520px; width:140px; height:140px; border-radius:22px;87    background:#1a2229; border:2px solid #2a3640; display:flex; align-items:center; justify-content:center;88  }89  .floating-heart svg { width:60px; height:60px; fill:none; stroke:#cfd8dc; stroke-width:6; }90  .bottom-nav {91    position:absolute; bottom:0; left:0; right:0;92    height:220px; background:#12171b; border-top:2px solid #1f2a32;93    display:flex; align-items:center; justify-content:space-around;94  }95  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#cfd8dc; font-size:34px; }96  .nav-item svg { width:68px; height:68px; fill:#cfd8dc; }97  .pill-extra { position:absolute; top:880px; right:40px; } /* to anchor near image */98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>11:30</div>106    <div style="display:flex; align-items:center; gap:24px;">107      <span style="font-size:36px;">ib</span>108      <span style="font-size:36px;">N</span>109      <span style="font-size:36px;">▮</span>110      <span style="font-size:36px;">•</span>111      <svg viewBox="0 0 24 24"><path d="M12 3l9 7-9 7-9-7 9-7z"></path></svg>112      <svg viewBox="0 0 24 24"><path d="M21 12l-9 9-9-9 9-9 9 9z"></path></svg>113    </div>114  </div>115 116  <!-- Orange quick delivery banner -->117  <div class="orange-banner">118    <span style="font-size:50px;">🛵</span>119    <span>Ordered before <span style="font-weight:900;">23:59</span>, delivered tomorrow for <span style="font-weight:900;">free</span></span>120  </div>121 122  <!-- Back / Share -->123  <div class="top-actions">124    <div class="icon-btn">125      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>126    </div>127    <div class="icon-btn">128      <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.9-3.7l-7.2 4.1a3 3 0 000 4.2l7.2 4.1A3 3 0 1018 16" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>129    </div>130  </div>131 132  <!-- Deal pill -->133  <div class="deal-pill">End of Year Deal</div>134 135  <!-- Product image -->136  <div class="content">137    <div class="main-image">[IMG: Samsung Fridge - Anthracite]</div>138 139    <!-- Thumbnails -->140    <div class="thumb-row">141      <div class="thumb">142        <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM10 9l6 3-6 3V9z" fill="#7fb3ff"></path></svg>143      </div>144      <div class="thumb">Front View</div>145      <div class="thumb">In Room</div>146      <div class="thumb">Side View</div>147      <div class="thumb">Chart</div>148      <div class="thumb">+16</div>149    </div>150 151    <!-- Title -->152    <div class="title">Samsung RB34C605CB1/EF</div>153 154    <!-- Ratings -->155    <div class="rating-row">156      <div class="stars">157        <div class="star-circle"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8l3-6z"></path></svg></div>158        <div class="star-circle"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8l3-6z"></path></svg></div>159        <div class="star-circle"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8l3-6z"></path></svg></div>160        <div class="star-circle"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8l3-6z"></path></svg></div>161        <div class="star-circle"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.8L12 17l-5.6 3 1.1-6.8L3 8.9 9 8l3-6z"></path></svg></div>162      </div>163      <div class="review-text">9,1/10 (1.097 reviews)</div>164    </div>165 166    <!-- Variant selection -->167    <div class="variant">168      <div>Kies je koelkast: Anthracite - 230L cooling - 114L fre...</div>169      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"></path></svg>170    </div>171 172    <!-- Energy badge + datasheet -->173    <div class="badge-row">174      <div class="energy-badge">175        <div class="energy-box">C</div>176        <div>Product data sheet</div>177      </div>178      <a class="link" href="#">Product data sheet</a>179    </div>180 181    <!-- Price and delivery -->182    <div class="price-row">183      <div class="price-left">184        <div class="price">679.00</div>185        <div class="retail">Retail price 899.00</div>186      </div>187      <div class="delivery">188        <svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4" stroke="#60d661" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="12" cy="12" r="9" fill="none" stroke="#60d661" stroke-width="2"></circle></svg>189        Delivered tomorrow190      </div>191    </div>192 193    <!-- CTAs -->194    <div class="cta blue">With subscription 25.99 per month</div>195    <div class="cta dark">Pick up in store</div>196    <div class="cta green">In my shopping cart</div>197  </div>198 199  <!-- Floating heart favorite -->200  <div class="floating-heart">201    <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.5C1.5 9 3.4 6.5 6.2 6.5c2 0 3.2 1.1 3.8 2 0.6-0.9 1.8-2 3.8-2 2.8 0 4.7 2.5 3.2 6-2 3.9-9 8.5-9 8.5z"></path></svg>202  </div>203 204  <!-- Bottom navigation -->205  <div class="bottom-nav">206    <div class="nav-item">207      <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H15v-6H9v6H3z"></path></svg>208      <div>start</div>209    </div>210    <div class="nav-item">211      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M16 16l6 6" stroke="#cfd8dc" stroke-width="2" fill="none"></path></svg>212      <div>search</div>213    </div>214    <div class="nav-item">215      <svg viewBox="0 0 24 24"><path d="M3 21h18v-12H3v12zm3-9h4v6H6v-6zm8 0h4v6h-4v-6zM4 6h16v3H4z"></path></svg>216      <div>stores</div>217    </div>218    <div class="nav-item">219      <svg viewBox="0 0 24 24"><path d="M7 6h10l2 6H5l2-6zm-2 8h14v6H5v-6z"></path></svg>220      <div>cart</div>221    </div>222    <div class="nav-item">223      <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"></circle><path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#cfd8dc" stroke-width="2"></path></svg>224      <div>profile</div>225    </div>226  </div>227 228</div>229</body>230</html>