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: Arial, Helvetica, sans-serif; color: #222; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #666;24 font-size: 38px;25 }26 .status-left { display: flex; align-items: center; gap: 22px; }27 .status-icons { display: flex; align-items: center; gap: 18px; }28 .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }29 .icon-signal { width: 36px; height: 28px; border: 3px solid #777; border-top: 0; border-right: 0; transform: rotate(45deg); border-radius: 4px; }30 .icon-battery { width: 36px; height: 18px; border: 3px solid #777; border-radius: 4px; position: relative; }31 .icon-battery::after { content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 10px; background: #777; border-radius: 2px; }32 /* Image area */33 .image-area {34 position: relative;35 height: 980px;36 margin: 0 0 0 0;37 display: flex;38 align-items: center;39 justify-content: center;40 }41 .img-placeholder {42 width: 980px;43 height: 880px;44 background: #E0E0E0;45 border: 1px solid #BDBDBD;46 border-radius: 16px;47 display: flex;48 align-items: center;49 justify-content: center;50 color: #757575;51 font-size: 36px;52 letter-spacing: 0.3px;53 }54 .floating-icon {55 position: absolute;56 right: 36px;57 width: 96px;58 height: 96px;59 background: #fff;60 border: 2px solid #ddd;61 border-radius: 50%;62 box-shadow: 0 6px 16px rgba(0,0,0,0.1);63 display: flex;64 align-items: center;65 justify-content: center;66 color: #666;67 }68 .floating-icon.heart { top: 80px; }69 .floating-icon.share { top: 220px; }70 .carousel-dots {71 height: 60px;72 display: flex;73 justify-content: center;74 align-items: center;75 gap: 18px;76 }77 .dot-small {78 width: 18px; height: 18px; border-radius: 50%;79 background: #CFCFCF;80 }81 .dot-small.active { background: #8A8A8A; }82 /* Ordered info */83 .ordered-info {84 display: flex;85 align-items: center;86 gap: 22px;87 padding: 24px 36px;88 }89 .ordered-info .badge {90 width: 64px; height: 64px; border-radius: 50%;91 background: #E8F5E9; display: flex; align-items: center; justify-content: center;92 border: 1px solid #D6EBD8;93 }94 .ordered-info strong { font-weight: 700; }95 .divider { height: 12px; background: #f0f0f0; width: 100%; }96 /* Product details */97 .product-block { padding: 28px 36px; }98 .product-title {99 font-size: 44px; line-height: 1.3; color: #1b1b1b; margin-bottom: 18px;100 }101 .product-title .brand { font-weight: 800; }102 .ratings-row {103 display: flex; align-items: center; gap: 18px; margin: 16px 0 10px;104 }105 .stars { display: inline-flex; gap: 6px; }106 .ratings-link { color: #1E88E5; font-size: 34px; }107 .assured {108 margin-left: auto; display: flex; align-items: center; gap: 10px; color: #546E7A; font-size: 26px;109 }110 .assured .diamond { width: 34px; height: 34px; border: 3px solid #FFC107; transform: rotate(45deg); border-radius: 6px; position: relative; }111 .assured .diamond::after {112 content:""; position:absolute; width:16px; height:4px; background:#FFC107; top:14px; left:9px;113 }114 .price-row {115 padding: 18px 0 20px; display: flex; align-items: baseline; gap: 26px;116 }117 .off { color: #1B5E20; font-size: 60px; font-weight: 800; }118 .mrp { color: #9E9E9E; font-size: 48px; text-decoration: line-through; }119 .price { font-size: 60px; font-weight: 800; }120 .delivery-row {121 padding: 26px 36px; display: flex; align-items: center; justify-content: space-between;122 }123 .delivery-text { font-size: 40px; color: #444; }124 .delivery-text b { font-weight: 800; color: #111; }125 .change-btn {126 padding: 18px 28px; border: 2px solid #DADADA; border-radius: 14px; background: #fff; font-weight: 700; color: #1976D2;127 }128 /* Floating support badge */129 .floating-support {130 position: absolute;131 right: 56px;132 bottom: 420px;133 width: 120px;134 height: 120px;135 background: #3D5AFE;136 border-radius: 50%;137 box-shadow: 0 10px 24px rgba(0,0,0,0.25);138 display: flex; align-items: center; justify-content: center;139 border: 8px solid #FFD54F;140 color:#fff; font-weight: 900; font-size: 54px;141 }142 /* Bottom action bar */143 .action-bar {144 position: absolute; left: 0; right: 0; bottom: 0;145 height: 210px; display: flex;146 border-top: 1px solid #e5e5e5;147 background: #ffffff;148 }149 .action-left, .action-right { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; }150 .action-left { color: #111; background: #fff; }151 .action-right { background: #F7B733; color: #111; }152 .home-indicator {153 position: absolute; left: 50%; transform: translateX(-50%);154 bottom: 14px; width: 360px; height: 10px; background: #C9C9C9; border-radius: 6px;155 }156 /* Small helpers */157 .muted { color: #6D6D6D; }158 .flex { display: flex; }159 .center { text-align: center; }160 svg { display: block; }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div class="status-left">169 <div style="font-weight:700;">10:30</div>170 <div class="status-icons">171 <span class="dot"></span>172 <span class="dot"></span>173 <span class="dot"></span>174 <span class="dot" style="width:12px;height:12px;"></span>175 </div>176 </div>177 <div class="status-icons">178 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">179 <path d="M3 3l18 18" stroke="#777" stroke-width="2"/>180 <path d="M12 4v2m0 12v2m6-10h-2M8 12H6" stroke="#777" stroke-width="2" />181 </svg>182 <div class="icon-signal"></div>183 <div class="icon-battery"></div>184 </div>185 </div>186 187 <!-- Image area -->188 <div class="image-area">189 <div class="img-placeholder">[IMG: Toy product photo]</div>190 191 <!-- Heart icon -->192 <div class="floating-icon heart">193 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">194 <path d="M12 21s-7-4.6-9.5-7.6C-0.3 9.6 1.5 5 5.4 5c1.8 0 3.3 1 4.1 2.3C10.3 6 11.8 5 13.6 5c3.9 0 5.7 4.6 2.9 8.4C19 16.4 12 21 12 21z"195 stroke="#7A7A7A" stroke-width="1.6" fill="none"/>196 </svg>197 </div>198 <!-- Share icon -->199 <div class="floating-icon share">200 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">201 <path d="M4 12c0 1.1.9 2 2 2h6v3l6-5-6-5v3H6c-1.1 0-2 .9-2 2z" fill="#7A7A7A"/>202 </svg>203 </div>204 </div>205 206 <!-- Carousel dots -->207 <div class="carousel-dots">208 <div class="dot-small active"></div>209 <div class="dot-small"></div>210 <div class="dot-small"></div>211 <div class="dot-small"></div>212 </div>213 214 <!-- Ordered info -->215 <div class="ordered-info">216 <div class="badge">217 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">218 <path d="M3 12l5 5 13-13" stroke="#2E7D32" stroke-width="2.5"/>219 </svg>220 </div>221 <div style="font-size:38px;">222 <strong>14</strong> people ordered this in the last 30 days223 </div>224 </div>225 226 <div class="divider"></div>227 228 <!-- Product details -->229 <div class="product-block">230 <div class="product-title">231 <span class="brand">Lakshita</span> Rotation Dancing & Spinning Rolling Monkey with Light & Sound Toy for Kids (Blue)232 </div>233 234 <div class="ratings-row">235 <div class="stars">236 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.4 2.6 1-6.3L3 8.9 9 8l3-6z" fill="#2E7D32"/></svg>237 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.4 2.6 1-6.3L3 8.9 9 8l3-6z" fill="#2E7D32"/></svg>238 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.4 2.6 1-6.3L3 8.9 9 8l3-6z" fill="#2E7D32"/></svg>239 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.4 2.6 1-6.3L3 8.9 9 8l3-6z" fill="#2E7D32"/></svg>240 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.4 2.6 1-6.3L3 8.9 9 8l3-6z" fill="#C8E6C9"/></svg>241 </div>242 <div class="ratings-link">59 ratings</div>243 <div class="assured">244 <div class="diamond"></div>245 <span>Plus F-ASSURED</span>246 </div>247 </div>248 249 <div class="price-row">250 <div class="off">−70%</div>251 <div class="mrp">999</div>252 <div class="price">₹299</div>253 </div>254 </div>255 256 <div class="divider"></div>257 258 <!-- Delivery -->259 <div class="delivery-row">260 <div class="delivery-text">Deliver to: <b>New Delhi - 110004</b></div>261 <button class="change-btn">CHANGE</button>262 </div>263 264 <!-- Floating support badge -->265 <div class="floating-support">F</div>266 267 <!-- Bottom actions -->268 <div class="action-bar">269 <div class="action-left">Add to cart</div>270 <div class="action-right">Buy now</div>271 <div class="home-indicator"></div>272 </div>273 274</div>275</body>276</html>