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>Product Detail Mock</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: #ffffff;15 color: #222;16 }17 .statusbar {18 height: 100px;19 padding: 20px 30px 0 30px;20 box-sizing: border-box;21 background: #fff;22 color: #1e1e1e;23 font-size: 34px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 }28 .status-left { display: flex; gap: 18px; align-items: center; }29 .status-right { display: flex; gap: 26px; align-items: center; }30 .icon-dot { width: 18px; height: 18px; background: #222; border-radius: 50%; opacity: .8; }31 .navbar {32 height: 110px;33 padding: 0 30px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 background: #ffffff;38 box-sizing: border-box;39 }40 .nav-left, .nav-right { display: flex; align-items: center; gap: 28px; }41 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }42 .icon { width: 48px; height: 48px; }43 .product-image {44 width: 100%;45 height: 880px;46 background: #E0E0E0;47 border-top: 1px solid #d9d9d9;48 border-bottom: 1px solid #d9d9d9;49 display: flex;50 align-items: center;51 justify-content: center;52 color: #757575;53 font-size: 36px;54 position: relative;55 }56 .photo-indicator {57 position: absolute;58 right: 26px;59 bottom: 26px;60 background: rgba(0,0,0,0.55);61 color: #fff;62 font-size: 34px;63 padding: 12px 22px;64 border-radius: 28px;65 }66 .coupon-strip {67 position: relative;68 background: linear-gradient(90deg, #ffbfbf 0%, #ffd0cc 55%, #ffc7c7 100%);69 height: 160px;70 display: flex;71 align-items: center;72 padding: 0 30px;73 box-sizing: border-box;74 gap: 24px;75 }76 .coupon-gift {77 width: 90px; height: 90px; border-radius: 18px; background: #ff7d78;78 display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;79 }80 .coupon-text { font-size: 38px; color: #b6251f; line-height: 1.1; }81 .claim-btn {82 margin-left: auto;83 background: #ff5a55;84 color: #fff;85 padding: 18px 36px;86 border-radius: 32px;87 font-size: 36px;88 font-weight: 700;89 }90 .promo-row {91 background: #fff;92 height: 140px;93 display: flex;94 align-items: center;95 gap: 22px;96 padding: 0 30px;97 box-sizing: border-box;98 border-bottom: 1px solid #eee;99 }100 .promo-left {101 background: #ff4b4b;102 color: #fff;103 padding: 22px 30px;104 border-radius: 18px;105 font-size: 36px;106 font-weight: 700;107 display: inline-flex; align-items: center; gap: 16px;108 }109 .bolt {110 width: 34px; height: 34px; background: #fff; color: #ff4b4b; border-radius: 50%;111 display: inline-flex; align-items: center; justify-content: center; font-weight: 900;112 }113 .countdown {114 margin-left: auto;115 background: #fff2dc;116 color: #111;117 padding: 18px 22px;118 border-radius: 16px;119 display: flex; align-items: center; gap: 12px;120 font-size: 34px;121 }122 .cd-box {123 background: #000; color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; min-width: 70px; text-align: center;124 }125 .price-block {126 padding: 20px 30px 10px 30px;127 display: flex;128 align-items: center;129 gap: 22px;130 }131 .price {132 color: #ff6a00; font-size: 64px; font-weight: 800;133 }134 .old-price { color: #9e9e9e; text-decoration: line-through; font-size: 40px; }135 .badge-disc { background: #ffe7c2; color: #ff7a00; padding: 8px 12px; border-radius: 10px; font-size: 32px; font-weight: 700; }136 .title-row {137 padding: 10px 30px 0 30px;138 display: flex; gap: 20px; align-items: flex-start;139 }140 .title {141 font-size: 42px; line-height: 1.25; color: #333; flex: 1;142 }143 .heart { width: 60px; height: 60px; }144 .rating-row {145 padding: 18px 30px 0 30px;146 display: flex; align-items: center; gap: 16px; color: #777; font-size: 34px;147 }148 .stars { display: flex; gap: 6px; }149 .star { width: 34px; height: 34px; }150 .rank-card {151 margin: 20px 30px 0 30px;152 background: #fff3d9;153 border: 1px solid #f7e2b1;154 padding: 18px 20px;155 border-radius: 16px;156 display: flex; align-items: center; gap: 16px;157 color: #a77400; font-size: 34px;158 }159 .divider { height: 22px; background: #f4f4f4; margin: 24px 0; }160 .section-header {161 padding: 16px 30px; font-size: 40px; font-weight: 700;162 }163 .options-row {164 padding: 0 30px;165 display: flex; align-items: center; gap: 22px;166 }167 .thumb {168 width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 12px;170 }171 .sticky-bar {172 position: absolute; left: 0; right: 0; bottom: 60px;173 height: 160px; background: #ffffff; border-top: 1px solid #e8e8e8;174 display: flex; align-items: center; padding: 0 24px; gap: 24px; box-sizing: border-box;175 }176 .mini {177 width: 140px; height: 120px; border-radius: 18px; border: 1px solid #e9e9e9;178 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;179 color: #333; font-size: 30px;180 }181 .buy-btn {182 margin-left: auto;183 background: #ffc400;184 color: #111;185 font-weight: 800;186 font-size: 44px;187 padding: 26px 60px;188 border-radius: 60px;189 }190 .home-indicator {191 position: absolute; left: 50%; transform: translateX(-50%);192 bottom: 16px; width: 360px; height: 10px; background: #cfcfcf; border-radius: 8px;193 }194 /* Utility small text colors */195 .muted { color: #8c8c8c; }196</style>197</head>198<body>199<div id="render-target">200 <!-- Status bar -->201 <div class="statusbar">202 <div class="status-left">203 <div>10:07</div>204 <div class="muted">21°</div>205 <div class="icon-dot" title="alarm"></div>206 <div class="icon-dot" title="clock"></div>207 </div>208 <div class="status-right">209 <div class="icon-dot" title="do-not-disturb"></div>210 <div class="icon-dot" title="wifi"></div>211 <div class="icon-dot" title="battery"></div>212 </div>213 </div>214 215 <!-- Nav bar -->216 <div class="navbar">217 <div class="nav-left">218 <div class="icon-btn">219 <svg class="icon" viewBox="0 0 24 24" fill="none">220 <path d="M15 19L8 12L15 5" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 </div>224 <div class="nav-right">225 <div class="icon-btn" title="coins">226 <svg class="icon" viewBox="0 0 24 24" fill="none">227 <circle cx="12" cy="12" r="9" stroke="#ffb000" stroke-width="2"/>228 <text x="12" y="16" text-anchor="middle" font-size="12" fill="#ffb000" font-weight="700">$</text>229 </svg>230 </div>231 <div class="icon-btn" title="cart">232 <svg class="icon" viewBox="0 0 24 24" fill="none">233 <path d="M3 5h2l2 12h10l2-9H7" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234 <circle cx="10" cy="20" r="1.5" fill="#111"/>235 <circle cx="17" cy="20" r="1.5" fill="#111"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- Product photo -->242 <div class="product-image">243 [IMG: Juicer product photo]244 <div class="photo-indicator">1 of 5</div>245 </div>246 247 <!-- Coupon strip -->248 <div class="coupon-strip">249 <div class="coupon-gift">250 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">251 <rect x="3" y="8" width="18" height="12" rx="2" fill="white" opacity=".9"/>252 <path d="M3 10h18M12 8v12" stroke="#ff7d78" stroke-width="2"/>253 </svg>254 </div>255 <div class="coupon-text">256 <div>New Buyer Coupon Pack</div>257 <div style="font-weight:800; font-size:44px;">25,91 € OFF</div>258 </div>259 <div class="claim-btn">Claim</div>260 </div>261 262 <!-- Promo row -->263 <div class="promo-row">264 <div class="promo-left">265 <span class="bolt">⚡</span>266 <span>New Buyer Save up to 49% off</span>267 </div>268 <div class="countdown">269 <span>6 Days</span>270 <span class="cd-box">10</span>271 <span>:</span>272 <span class="cd-box">21</span>273 <span>:</span>274 <span class="cd-box">01</span>275 </div>276 </div>277 278 <!-- Price -->279 <div class="price-block">280 <div class="price">12,91 €</div>281 <div class="old-price">25,33 €</div>282 <div class="badge-disc">↓ 49%</div>283 </div>284 285 <!-- Title + wish -->286 <div class="title-row">287 <div class="title">288 Juicers New Electric Portable Blender Juicer Wireless Small Juicer Fruit Cooking Machine Cha...289 </div>290 <svg class="heart" viewBox="0 0 24 24" fill="none">291 <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 6.5 6c2 0 3.2 1.2 3.5 2 0.3-0.8 1.5-2 3.5-2 3 0 5 3 3.5 6.5C19 16.5 12 21 12 21z" stroke="#111" stroke-width="1.8" fill="none"/>292 </svg>293 </div>294 295 <!-- Rating -->296 <div class="rating-row">297 <div class="stars">298 <svg class="star" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3L5 14.2 0 9.3l7-1L12 2z"/></svg>299 <svg class="star" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3L5 14.2 0 9.3l7-1L12 2z"/></svg>300 <svg class="star" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3L5 14.2 0 9.3l7-1L12 2z"/></svg>301 <svg class="star" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3L5 14.2 0 9.3l7-1L12 2z"/></svg>302 <svg class="star" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3L5 14.2 0 9.3l7-1L12 2z"/></svg>303 </div>304 <div>5.0</div>305 <div>|</div>306 <div>3 Sold</div>307 </div>308 309 <!-- Ranking -->310 <div class="rank-card">311 <svg width="40" height="40" viewBox="0 0 24 24" fill="#f4b000">312 <path d="M12 2l2.5 5 5.5.8-4 3.8.9 5.4L12 14.8 7.1 17l.9-5.4-4-3.8L9.5 7 12 2z"/>313 </svg>314 <div>NO.13 in Small kitchen Appliances 30 days Top Ranking list ></div>315 </div>316 317 <div class="divider"></div>318 319 <!-- Options -->320 <div class="section-header">Please Select <span class="muted" style="font-weight:400;">Options</span></div>321 <div class="options-row">322 <div class="thumb">[IMG: Juicer]</div>323 <div class="muted" style="font-size:36px;">Choose color and plug type</div>324 </div>325 326 <!-- Sticky bottom bar -->327 <div class="sticky-bar">328 <div class="mini">329 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">330 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="#111" stroke-width="2"/>331 </svg>332 <div>Store</div>333 </div>334 <div class="mini">335 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">336 <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8z" stroke="#111" stroke-width="2"/>337 </svg>338 <div>Chat</div>339 </div>340 <div class="buy-btn">Buy Now</div>341 </div>342 343 <div class="home-indicator"></div>344</div>345</body>346</html>