GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Samsung Refrigerator List - Mock</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: #0f1418;13 color: #e9edf1;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #ffffff;24 font-weight: 600;25 font-size: 34px;26 background: transparent;27 }28 .status-icons {29 display: flex;30 gap: 28px;31 align-items: center;32 }33 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.7; }34 35 /* Search bar */36 .search-wrap {37 padding: 12px 24px;38 }39 .search-bar {40 height: 120px;41 border-radius: 20px;42 background: #1c232a;43 display: flex;44 align-items: center;45 padding: 0 30px;46 gap: 24px;47 color: #b7c0c8;48 font-size: 38px;49 border: 1px solid #2a3340;50 }51 .search-input {52 flex: 1;53 }54 55 /* Section heading */56 .section-heading {57 font-size: 40px;58 line-height: 54px;59 padding: 24px 32px 8px 32px;60 color: #f2f6fa;61 }62 63 /* Product card */64 .card {65 margin: 18px 24px;66 border-radius: 16px;67 background: #12181e;68 border: 1px solid #2a3440;69 padding: 28px;70 position: relative;71 }72 .card-row {73 display: flex;74 gap: 26px;75 }76 .img-placeholder {77 width: 230px;78 height: 590px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 color: #757575;82 display: flex;83 justify-content: center;84 align-items: center;85 font-size: 26px;86 text-align: center;87 }88 .card-content {89 flex: 1;90 }91 .title {92 font-size: 48px;93 color: #3aa0ff;94 font-weight: 700;95 margin-bottom: 16px;96 }97 .rating {98 display: flex;99 align-items: center;100 gap: 14px;101 margin-bottom: 18px;102 }103 .rating .reviews { color: #b9c3cf; font-size: 34px; }104 .star-group { display: inline-flex; gap: 6px; }105 .bullet-list { color: #d7dee6; font-size: 34px; margin: 8px 0 12px 0; }106 .bullet-list li { margin: 12px 0; }107 .datasheet-link { color: #3aa0ff; font-size: 36px; margin: 16px 0; display: inline-block; }108 109 .energy-tag {110 display: inline-flex;111 align-items: center;112 gap: 10px;113 margin-top: 6px;114 }115 .energy-scale {116 width: 38px; height: 60px; background: #2b3744; color: #cfd8e3;117 display: flex; align-items: center; justify-content: center;118 border-radius: 6px; font-size: 24px; writing-mode: vertical-rl; text-orientation: mixed;119 }120 .energy-label {121 background: #f5d24b; color: #0f1418; font-weight: 800;122 padding: 4px 10px; border-radius: 8px; font-size: 34px;123 }124 125 .price-row { display: flex; align-items: baseline; gap: 26px; margin: 16px 0; }126 .price { font-size: 52px; font-weight: 800; color: #fefefe; }127 .retail { font-size: 34px; color: #9aa6b2; text-decoration: line-through; }128 129 .status-row {130 display: flex; align-items: center; gap: 18px;131 color: #75e076; font-size: 38px; font-weight: 700;132 margin: 8px 0 0 0;133 }134 135 .deal-badge {136 position: absolute;137 left: 20px;138 bottom: 260px;139 background: #d45c0e;140 color: #fff;141 font-weight: 800;142 font-size: 30px;143 padding: 12px 18px;144 border-radius: 12px;145 }146 147 .choice-badge {148 position: absolute;149 left: 22px;150 top: 260px;151 background: #2d7ef3;152 color: #fff;153 font-weight: 800;154 font-size: 32px;155 padding: 16px 20px;156 border-radius: 12px;157 }158 159 .cart-btn {160 position: absolute;161 right: 28px;162 bottom: 34px;163 width: 150px; height: 150px;164 border-radius: 22px;165 background: #46b833;166 display: flex; align-items: center; justify-content: center;167 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);168 }169 170 .compare-row {171 display: flex; align-items: center; gap: 18px;172 padding: 22px 10px 6px 10px;173 color: #ced7e0; font-size: 36px;174 }175 .checkbox {176 width: 38px; height: 38px; border: 3px solid #a9b5c4; border-radius: 8px;177 }178 179 /* Filter bar */180 .filter-wrap {181 margin: 24px 24px 20px 24px;182 background: #16202a;183 border: 1px solid #2a3440;184 border-radius: 16px;185 height: 120px;186 display: flex; align-items: center; justify-content: center;187 }188 .filter-btn {189 background: #256af2; color: #fff; border: none;190 font-size: 42px; font-weight: 800;191 padding: 16px 46px; border-radius: 16px; cursor: default;192 }193 194 /* Bottom navigation */195 .bottom-nav {196 position: absolute;197 bottom: 0;198 left: 0;199 width: 1080px;200 height: 170px;201 background: #0b1015;202 border-top: 1px solid #263242;203 display: flex;204 justify-content: space-around;205 align-items: center;206 color: #aeb8c4;207 font-size: 34px;208 }209 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }210 .nav-item.active { color: #ffffff; }211 .screen-content { height: 2100px; overflow: hidden; }212 .green { color: #75e076; }213 .blue { color: #3aa0ff; }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div>11:30</div>222 <div class="status-icons">223 <span class="dot"></span>224 <span class="dot"></span>225 <span class="dot"></span>226 <span class="dot"></span>227 </div>228 </div>229 230 <div class="screen-content">231 <!-- Search -->232 <div class="search-wrap">233 <div class="search-bar">234 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">235 <circle cx="10" cy="10" r="7" stroke="#b7c0c8" stroke-width="2"></circle>236 <line x1="16" y1="16" x2="22" y2="22" stroke="#b7c0c8" stroke-width="2"></line>237 </svg>238 <div class="search-input">Samsung refrigerator</div>239 </div>240 </div>241 242 <!-- Section heading -->243 <div class="section-heading">244 Our choice for a fridge freezer combination with No Frost245 </div>246 247 <!-- Product Card 1 -->248 <div class="card">249 <div class="choice-badge">Coolblue's Choice</div>250 <div class="card-row">251 <div class="img-placeholder">[IMG: Samsung Fridge]</div>252 <div class="card-content">253 <div class="title">Samsung RB34C605CB1/EF</div>254 <div class="rating">255 <div class="star-group">256 <!-- 6 green stars -->257 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>258 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>259 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>260 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>261 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>262 </div>263 <div class="reviews">1,097 reviews</div>264 </div>265 266 <ul class="bullet-list">267 <li>Fridge freezer combination (185.3cm high)</li>268 <li>C energy label (costs € 65.20 per year)</li>269 <li>No Frost: never defrost again</li>270 </ul>271 272 <div class="energy-tag">273 <div class="energy-scale">A↑G</div>274 <div class="energy-label">C</div>275 <a class="datasheet-link" href="#">Product data sheet</a>276 </div>277 278 <div class="price-row">279 <div class="price">679.00</div>280 <div class="retail">Retail price 899.00</div>281 </div>282 283 <div class="status-row">284 <svg width="42" height="42" viewBox="0 0 24 24">285 <circle cx="12" cy="12" r="10" fill="none" stroke="#75e076" stroke-width="2"></circle>286 <polyline points="7,12 11,16 17,8" fill="none" stroke="#75e076" stroke-width="2"></polyline>287 </svg>288 Delivered tomorrow289 </div>290 </div>291 </div>292 293 <div class="deal-badge">End of Year Deal</div>294 295 <div class="cart-btn">296 <svg width="90" height="90" viewBox="0 0 24 24">297 <path d="M3 5h3l2 10h9l2-8H7" fill="none" stroke="#ffffff" stroke-width="2"></path>298 <circle cx="10" cy="20" r="2" fill="#ffffff"></circle>299 <circle cx="18" cy="20" r="2" fill="#ffffff"></circle>300 </svg>301 </div>302 303 <div class="compare-row">304 <div class="checkbox"></div>305 <div>Compare</div>306 </div>307 </div>308 309 <!-- Product Card 2 -->310 <div class="card">311 <div class="card-row">312 <div class="img-placeholder" style="height: 620px;">[IMG: Samsung Fridge]</div>313 <div class="card-content">314 <div class="title">Samsung RB38C7B6AB1/EF</div>315 <div class="rating">316 <div class="star-group">317 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>318 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>319 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>320 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>321 <svg width="40" height="40" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,21 12,16 6,21 8,13 2,9 9,9" fill="#55c463"></polygon></svg>322 </div>323 <div class="reviews">102 reviews</div>324 </div>325 326 <ul class="bullet-list">327 <li>Fridge freezer combination (203cm high)</li>328 <li>A energy label (costs € 43.20 per year)</li>329 <li>No Frost: never defrost again</li>330 </ul>331 332 <div class="energy-tag">333 <div class="energy-scale">A↑G</div>334 <div class="energy-label" style="background:#88e76b;">A</div>335 <a class="datasheet-link" href="#">Product data sheet</a>336 </div>337 338 <div class="price-row">339 <div class="price">1,249.00</div>340 <div class="retail">Retail price 1,499.00</div>341 </div>342 343 <div class="status-row">344 <svg width="42" height="42" viewBox="0 0 24 24">345 <circle cx="12" cy="12" r="10" fill="none" stroke="#75e076" stroke-width="2"></circle>346 <polyline points="7,12 11,16 17,8" fill="none" stroke="#75e076" stroke-width="2"></polyline>347 </svg>348 Delivered tomorrow349 </div>350 </div>351 </div>352 353 <div class="deal-badge" style="bottom: 210px;">End of Year Deal</div>354 355 <div class="cart-btn">356 <svg width="90" height="90" viewBox="0 0 24 24">357 <path d="M3 5h3l2 10h9l2-8H7" fill="none" stroke="#ffffff" stroke-width="2"></path>358 <circle cx="10" cy="20" r="2" fill="#ffffff"></circle>359 <circle cx="18" cy="20" r="2" fill="#ffffff"></circle>360 </svg>361 </div>362 363 <div class="compare-row">364 <div class="checkbox"></div>365 <div>Compare</div>366 </div>367 </div>368 369 <!-- Filter bar -->370 <div class="filter-wrap">371 <button class="filter-btn">Filter</button>372 </div>373 </div>374 375 <!-- Bottom navigation -->376 <div class="bottom-nav">377 <div class="nav-item">378 <svg width="54" height="54" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10h-6v-6H9v6H3z" fill="#aeb8c4"></path></svg>379 <div>start</div>380 </div>381 <div class="nav-item active">382 <svg width="54" height="54" viewBox="0 0 24 24">383 <circle cx="10" cy="10" r="7" stroke="#ffffff" stroke-width="2" fill="none"></circle>384 <line x1="16" y1="16" x2="22" y2="22" stroke="#ffffff" stroke-width="2"></line>385 </svg>386 <div>search</div>387 </div>388 <div class="nav-item">389 <svg width="54" height="54" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-9L12 3 5 11v9z" fill="#aeb8c4"></path></svg>390 <div>stores</div>391 </div>392 <div class="nav-item">393 <svg width="54" height="54" viewBox="0 0 24 24">394 <path d="M3 5h3l2 10h9l2-8H7" fill="none" stroke="#aeb8c4" stroke-width="2"></path>395 <circle cx="10" cy="20" r="2" fill="#aeb8c4"></circle>396 <circle cx="18" cy="20" r="2" fill="#aeb8c4"></circle>397 </svg>398 <div>cart</div>399 </div>400 <div class="nav-item">401 <svg width="54" height="54" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#aeb8c4"></circle><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#aeb8c4"></path></svg>402 <div>profile</div>403 </div>404 </div>405 406</div>407</body>408</html>