GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Editorial Review - Product</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #303234;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 background: #3a3c3e;26 color: #fff;27 font-size: 44px;28 letter-spacing: 0.5px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 opacity: 0.92;35 }36 .status-dot { width: 14px; height: 14px; background: #d7d7d7; border-radius: 50%; display: inline-block; }37 38 /* App bar */39 .app-bar {40 height: 120px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 padding: 0 32px;45 background: #2b2d2f;46 border-bottom: 1px solid #2a2a2a;47 }48 .app-left {49 display: flex;50 align-items: center;51 gap: 34px;52 }53 .app-right {54 display: flex;55 align-items: center;56 gap: 18px;57 }58 .cart {59 width: 72px; height: 72px; position: relative;60 display: flex; align-items: center; justify-content: center;61 border: 1px solid #555; border-radius: 12px;62 background: #3a3a3a;63 }64 .badge {65 position: absolute; top: -10px; right: -10px;66 background: #f5a623; color: #000; font-weight: 700;67 font-size: 28px; width: 44px; height: 44px;68 border-radius: 50%; display: flex; align-items: center; justify-content: center;69 border: 2px solid #2b2d2f;70 }71 72 /* Content */73 .content {74 padding: 36px 40px 0 40px;75 }76 h1.section-title {77 margin: 0 0 20px 0;78 font-size: 54px;79 font-weight: 800;80 color: #eaeaea;81 }82 .progress {83 height: 18px;84 background: #1f2122;85 border-radius: 14px;86 overflow: hidden;87 margin-bottom: 28px;88 }89 .progress .fill {90 width: 32%;91 height: 100%;92 background: #f0b427;93 }94 .paragraph {95 font-size: 36px;96 line-height: 1.6;97 color: #d8d8d8;98 margin-bottom: 40px;99 }100 .subtle {101 font-size: 36px;102 color: #c9c9c9;103 margin: 8px 0 4px 0;104 }105 h2 {106 font-size: 48px;107 font-weight: 800;108 color: #f1f1f1;109 margin: 52px 0 24px 0;110 }111 .list {112 display: flex;113 flex-direction: column;114 gap: 26px;115 margin-bottom: 32px;116 }117 .list-item {118 display: flex;119 align-items: center;120 gap: 28px;121 }122 .list-item span {123 font-size: 38px;124 color: #e6e6e6;125 }126 .thumb {127 width: 46px; height: 46px;128 }129 .thumb.red path { fill: #ff5b57; }130 .thumb.green path { fill: #70d56a; }131 132 /* Recent items */133 .recent-header {134 display: flex;135 align-items: center;136 justify-content: space-between;137 margin-top: 40px;138 }139 .recent-title {140 font-size: 50px;141 font-weight: 800;142 color: #eaeaea;143 }144 .clear-btn {145 font-size: 40px;146 color: #cfcfcf;147 }148 .recent-progress {149 height: 16px;150 background: #1f2122;151 border-radius: 14px;152 overflow: hidden;153 margin: 22px 0 28px 0;154 }155 .recent-progress .fill { width: 24%; height: 100%; background: #f0b427; }156 157 .recent-card {158 width: 420px; height: 420px;159 border: 2px solid #222;160 background: #2b2b2b;161 display: flex; align-items: center; justify-content: center;162 }163 .img-placeholder {164 width: 380px; height: 360px;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 display: flex; align-items: center; justify-content: center;168 color: #757575; font-size: 34px;169 }170 171 /* Bottom bar */172 .bottom-bar {173 position: absolute;174 left: 0; right: 0; bottom: 80px;175 height: 170px;176 background: #161717;177 display: flex;178 align-items: center;179 justify-content: space-between;180 padding: 0 48px;181 border-top: 1px solid #242424;182 }183 .bar-actions {184 display: flex;185 align-items: center;186 gap: 56px;187 }188 .cta {189 font-size: 54px;190 font-weight: 800;191 letter-spacing: 1px;192 color: #ffffff;193 }194 195 .home-indicator {196 position: absolute;197 bottom: 20px; left: 50%;198 transform: translateX(-50%);199 width: 360px; height: 12px; border-radius: 8px;200 background: #f9f9f9; opacity: 0.6;201 }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Status Bar -->208 <div class="status-bar">209 <div class="status-left">9:51</div>210 <div class="status-right">211 <!-- simple app icons -->212 <span class="status-dot"></span>213 <span class="status-dot"></span>214 <span class="status-dot"></span>215 <!-- wifi icon -->216 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">217 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-6.5-5c3.6-3.3 9.4-3.3 13 0l-1.8 1.8c-2.7-2.4-6.6-2.4-9.3 0L5.5 13.5Zm-3.4-3.4c5.5-5 14.2-5 19.7 0l-1.9 1.9c-4.7-4.3-11.3-4.3-16 0L2.1 10.1Z" fill="#fff"/>218 </svg>219 <!-- battery icon -->220 <svg width="48" height="48" viewBox="0 0 28 28" fill="none">221 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"/>222 <rect x="4" y="8" width="12" height="8" fill="#fff"/>223 <rect x="22" y="10" width="4" height="4" rx="1" fill="#fff"/>224 </svg>225 </div>226 </div>227 228 <!-- App Bar -->229 <div class="app-bar">230 <div class="app-left">231 <!-- back arrow -->232 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">233 <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 <!-- menu lines -->236 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">237 <path d="M4 8h16M4 16h10" stroke="#dcdcdc" stroke-width="3" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="app-right">241 <div class="cart">242 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">243 <path d="M3 4h2l2 12h10l2-8H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>244 <circle cx="10" cy="20" r="2" fill="#fff"/>245 <circle cx="17" cy="20" r="2" fill="#fff"/>246 </svg>247 <div class="badge">0</div>248 </div>249 </div>250 </div>251 252 <!-- Content -->253 <div class="content">254 <h1 class="section-title">Editorial Review</h1>255 <div class="progress"><div class="fill"></div></div>256 257 <div class="paragraph">258 The Samsung refrigerator in question here is an excellent purchase, as it comes with a Family Hub that allows you to connect with your family members, communicate, plan, and entertain in new ways. The filter provided in the middle of the inner drawer ensures that you get clean and filtered water.259 </div>260 261 <div class="paragraph">262 Customer reviews of this refrigerator are overwhelmingly positive, with users praising the product for being as described, as well as the prompt delivery (within three weeks).263 </div>264 265 <div class="subtle">Key</div>266 267 <h2>Pros</h2>268 <div class="list">269 <div class="list-item">270 <svg class="thumb green" viewBox="0 0 24 24">271 <path d="M2 13h4v8H2v-8Zm20-1.5c0-.8-.7-1.5-1.5-1.5H14l1-4.5c.1-.7-.2-1.4-.8-1.8l-1.2-.7L10 9v9h9.5c.8 0 1.5-.7 1.5-1.5v-4Z"/>272 </svg>273 <span>Comes with a Family Hub for easy connectivity</span>274 </div>275 <div class="list-item">276 <svg class="thumb green" viewBox="0 0 24 24">277 <path d="M2 13h4v8H2v-8Zm20-1.5c0-.8-.7-1.5-1.5-1.5H14l1-4.5c.1-.7-.2-1.4-.8-1.8l-1.2-.7L10 9v9h9.5c.8 0 1.5-.7 1.5-1.5v-4Z"/>278 </svg>279 <span>Filter in the inner drawer for clean water</span>280 </div>281 <div class="list-item">282 <svg class="thumb green" viewBox="0 0 24 24">283 <path d="M2 13h4v8H2v-8Zm20-1.5c0-.8-.7-1.5-1.5-1.5H14l1-4.5c.1-.7-.2-1.4-.8-1.8l-1.2-.7L10 9v9h9.5c.8 0 1.5-.7 1.5-1.5v-4Z"/>284 </svg>285 <span>Prompt delivery</span>286 </div>287 <div class="list-item">288 <svg class="thumb green" viewBox="0 0 24 24">289 <path d="M2 13h4v8H2v-8Zm20-1.5c0-.8-.7-1.5-1.5-1.5H14l1-4.5c.1-.7-.2-1.4-.8-1.8l-1.2-.7L10 9v9h9.5c.8 0 1.5-.7 1.5-1.5v-4Z"/>290 </svg>291 <span>Key</span>292 </div>293 </div>294 295 <h2>Cons</h2>296 <div class="list">297 <div class="list-item">298 <svg class="thumb red" viewBox="0 0 24 24">299 <path d="M22 11h-4V3h4v8ZM2 12.5c0 .8.7 1.5 1.5 1.5H10l-1 4.5c-.1.7.2 1.4.8 1.8l1.2.7L14 15V6H4.5C3.7 6 3 6.7 3 7.5v5Z"/>300 </svg>301 <span>Curbside delivery requires the customer to bring it into their home</span>302 </div>303 </div>304 305 <div class="recent-header">306 <div class="recent-title">Recent items</div>307 <div class="clear-btn">Clear</div>308 </div>309 <div class="recent-progress"><div class="fill"></div></div>310 311 <div class="recent-card">312 <div class="img-placeholder">[IMG: Samsung Refrigerator]</div>313 </div>314 </div>315 316 <!-- Bottom bar actions -->317 <div class="bottom-bar">318 <div class="bar-actions">319 <!-- heart -->320 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">321 <path d="M12 21s-6.5-4.7-9-8.2C1.5 10 3 7 6 7c2 0 3.3 1.2 4 2.4C10.7 8.2 12 7 14 7c3 0 4.5 3 3 5.8C18.5 16.3 12 21 12 21Z" stroke="#fff" stroke-width="2" fill="none"/>322 </svg>323 <!-- share -->324 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">325 <circle cx="5" cy="12" r="3" stroke="#fff" stroke-width="2"/>326 <circle cx="19" cy="5" r="3" stroke="#fff" stroke-width="2"/>327 <circle cx="19" cy="19" r="3" stroke="#fff" stroke-width="2"/>328 <path d="M8 11l8-4M8 13l8 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>329 </svg>330 </div>331 <div class="cta">ADD TO CART</div>332 </div>333 334 <div class="home-indicator"></div>335</div>336</body>337</html>