GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Page - Walking Shoes</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 110px;19 background: #e6e6e6;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .icon {34 width: 48px;35 height: 48px;36 display: inline-flex;37 align-items: center;38 justify-content: center;39 }40 .icon svg { width: 100%; height: 100%; }41 42 /* Top action icons */43 .top-actions {44 position: absolute;45 top: 140px;46 left: 0;47 right: 0;48 padding: 0 36px;49 display: flex;50 justify-content: space-between;51 align-items: center;52 }53 .left-actions {54 display: flex; gap: 24px; align-items: center;55 }56 .right-actions {57 display: flex; gap: 40px; align-items: center;58 }59 60 /* Product media area */61 .media-area {62 position: absolute;63 top: 110px;64 left: 0;65 right: 0;66 height: 980px;67 display: flex;68 align-items: center;69 justify-content: center;70 padding: 80px 40px 40px;71 }72 .img-placeholder {73 width: 980px;74 height: 540px;75 background: #E0E0E0;76 border: 1px solid #BDBDBD;77 border-radius: 10px;78 display: flex;79 align-items: center;80 justify-content: center;81 color: #757575;82 font-size: 34px;83 text-align: center;84 }85 86 /* Share FAB */87 .share-fab {88 position: absolute;89 right: 44px;90 top: 960px;91 width: 110px;92 height: 110px;93 background: #ffffff;94 border: 2px solid #dfe6eb;95 border-radius: 60px;96 display: flex;97 align-items: center;98 justify-content: center;99 box-shadow: 0 6px 16px rgba(0,0,0,0.1);100 }101 102 /* Below media controls */103 .below-media {104 position: absolute;105 top: 1090px;106 left: 0;107 right: 0;108 padding: 0 36px;109 display: flex;110 align-items: center;111 justify-content: space-between;112 }113 .btn-outline {114 border: 2px solid #dfe6eb;115 color: #3b4b5a;116 background: #fff;117 padding: 18px 26px;118 border-radius: 16px;119 display: inline-flex;120 align-items: center;121 gap: 16px;122 font-size: 34px;123 }124 .dots {125 position: absolute;126 left: 0; right: 0;127 top: 1180px;128 display: flex;129 justify-content: center;130 gap: 26px;131 }132 .dot {133 width: 16px; height: 16px; border-radius: 50%;134 background: #99a8b5;135 }136 .dot.active { background: #2d6cdf; width: 18px; height: 18px; }137 138 .rating-badge {139 position: absolute;140 right: 44px;141 top: 1210px;142 background: #f7f9fc;143 border: 2px solid #dfe6eb;144 border-radius: 18px;145 padding: 12px 20px;146 font-size: 30px;147 display: inline-flex;148 align-items: center;149 gap: 10px;150 color: #2e3c49;151 }152 .star {153 width: 34px; height: 34px; background: #ffd34d; border-radius: 6px;154 display: inline-flex; align-items: center; justify-content: center; color: #7a5b00; font-weight: bold;155 }156 157 /* Product details */158 .details {159 position: absolute;160 top: 1290px;161 left: 0;162 right: 0;163 padding: 0 36px;164 }165 .brand {166 color: #6c7a89;167 font-size: 30px;168 letter-spacing: 0.5px;169 margin-bottom: 8px;170 }171 .title {172 font-size: 52px;173 font-weight: 700;174 line-height: 1.25;175 color: #111;176 margin-bottom: 18px;177 }178 .id-line {179 display: flex; align-items: center; gap: 16px; color: #7d8b98; font-size: 30px; margin-top: 10px;180 }181 .strike {182 color: #7d8b98; font-size: 32px; text-decoration: line-through; margin-top: 18px;183 }184 .price-row {185 display: flex; align-items: center; gap: 26px; margin-top: 14px;186 }187 .price-tag {188 background: #ffe353;189 padding: 26px 36px;190 border-radius: 16px;191 display: inline-block;192 font-size: 56px;193 font-weight: 800;194 color: #1b1b1b;195 }196 .offer {197 color: #d33c34;198 font-size: 36px;199 font-weight: 600;200 }201 .divider {202 height: 18px;203 background: #f0f2f5;204 margin: 34px -36px 0;205 }206 207 /* Colors */208 .colors {209 padding: 28px 36px 0;210 }211 .section-title {212 font-size: 38px;213 font-weight: 700;214 color: #222;215 margin-bottom: 24px;216 }217 .thumbs {218 display: flex; gap: 26px;219 }220 .thumb {221 width: 210px; height: 210px; border-radius: 26px;222 background: #E0E0E0; border: 1px solid #BDBDBD;223 display: flex; align-items: center; justify-content: center;224 color: #757575; font-size: 28px; text-align: center;225 }226 227 /* Chat bubble */228 .chat-fab {229 position: absolute;230 right: 44px;231 bottom: 270px;232 width: 160px;233 height: 160px;234 border-radius: 80px;235 background: #3f89ff;236 display: flex; align-items: center; justify-content: center;237 box-shadow: 0 10px 22px rgba(0,0,0,0.18);238 }239 .chat-fab svg { width: 80px; height: 80px; fill: #fff; }240 241 /* Bottom bar */242 .bottom-bar {243 position: absolute;244 left: 20px;245 right: 20px;246 bottom: 40px;247 background: #ffffff;248 border-radius: 22px;249 padding: 28px;250 box-shadow: 0 8px 28px rgba(0,0,0,0.12);251 display: flex;252 gap: 28px;253 align-items: center;254 }255 .wish-box {256 width: 130px;257 height: 130px;258 background: #ffffff;259 border-radius: 20px;260 border: 2px solid #e6ebf1;261 display: flex; align-items: center; justify-content: center;262 }263 .add-to-cart {264 flex: 1;265 background: #ffe353;266 border-radius: 20px;267 height: 130px;268 display: flex; align-items: center; justify-content: center;269 font-size: 44px;270 font-weight: 800;271 color: #1b1b1b;272 letter-spacing: 2px;273 gap: 20px;274 }275 .cart-icon {276 width: 56px; height: 56px;277 }278</style>279</head>280<body>281<div id="render-target">282 283 <!-- Status bar -->284 <div class="status-bar">285 <div class="time">9:33</div>286 <div class="status-right">287 <!-- Simple wifi dot -->288 <div class="icon">289 <svg viewBox="0 0 24 24">290 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#333"/>291 <path d="M2 9c5-5 15-5 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>292 <path d="M5 12c4-4 10-4 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>293 <path d="M8 15c2-2 6-2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>294 </svg>295 </div>296 <!-- Battery -->297 <div class="icon">298 <svg viewBox="0 0 24 24">299 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>300 <rect x="4" y="8" width="12" height="8" fill="#333"></rect>301 <rect x="20" y="10" width="2" height="4" fill="#333"></rect>302 </svg>303 </div>304 </div>305 </div>306 307 <!-- Action icons -->308 <div class="top-actions">309 <div class="left-actions">310 <div class="icon">311 <svg viewBox="0 0 24 24">312 <path d="M15 4L7 12l8 8" stroke="#1d1d1d" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </div>315 </div>316 <div class="right-actions">317 <div class="icon">318 <svg viewBox="0 0 24 24">319 <circle cx="11" cy="11" r="7" stroke="#1d1d1d" stroke-width="2" fill="none"></circle>320 <path d="M16 16l5 5" stroke="#1d1d1d" stroke-width="2" />321 </svg>322 </div>323 <div class="icon">324 <svg viewBox="0 0 24 24">325 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#1d1d1d" stroke-width="2" fill="none"/>326 </svg>327 </div>328 <div class="icon">329 <svg viewBox="0 0 24 24">330 <path d="M7 7h14l-2 9H9L7 7z" stroke="#1d1d1d" stroke-width="2" fill="none"/>331 <circle cx="9" cy="20" r="2" fill="#1d1d1d"></circle>332 <circle cx="18" cy="20" r="2" fill="#1d1d1d"></circle>333 <path d="M7 7L6 4H3" stroke="#1d1d1d" stroke-width="2" fill="none"/>334 </svg>335 </div>336 </div>337 </div>338 339 <!-- Product image -->340 <div class="media-area">341 <div class="img-placeholder">[IMG: Grey Walking Shoe]</div>342 </div>343 344 <!-- Share FAB -->345 <div class="share-fab">346 <svg viewBox="0 0 24 24">347 <circle cx="18" cy="5" r="3" fill="#3f89ff"></circle>348 <circle cx="6" cy="12" r="3" fill="#3f89ff"></circle>349 <circle cx="18" cy="19" r="3" fill="#3f89ff"></circle>350 <path d="M8.8 11l6.5-4.2M8.8 13l6.5 4.2" stroke="#3f89ff" stroke-width="2" fill="none" stroke-linecap="round"/>351 </svg>352 </div>353 354 <!-- Below media controls -->355 <div class="below-media">356 <div class="btn-outline">357 <svg width="34" height="34" viewBox="0 0 24 24">358 <path d="M12 2l3 7h7l-5.5 4 2.1 7-6.6-4.6L5 20l2-7L2 9h7l3-7z" stroke="#3b4b5a" fill="none" stroke-width="1.5"/>359 </svg>360 <span>View similar</span>361 </div>362 </div>363 364 <div class="dots">365 <div class="dot"></div>366 <div class="dot active"></div>367 <div class="dot"></div>368 <div class="dot"></div>369 <div class="dot"></div>370 <div class="dot"></div>371 </div>372 373 <div class="rating-badge">374 <div class="star">★</div>375 <div>4.46 (9.4k)</div>376 </div>377 378 <!-- Product details -->379 <div class="details">380 <div class="brand">NEWFEEL</div>381 <div class="title">Men Walking Shoes PW 100 - Grey</div>382 <div class="id-line">383 <svg width="30" height="30" viewBox="0 0 24 24">384 <circle cx="12" cy="12" r="10" stroke="#7d8b98" stroke-width="2" fill="none"></circle>385 <rect x="11" y="6" width="2" height="8" fill="#7d8b98"></rect>386 <rect x="11" y="16" width="2" height="2" fill="#7d8b98"></rect>387 </svg>388 <span>ID: 8486177</span>389 </div>390 <div class="strike">₹999</div>391 <div class="price-row">392 <div class="price-tag">₹699</div>393 <div class="offer">(+1 Offer)</div>394 </div>395 <div class="divider"></div>396 </div>397 398 <div class="colors">399 <div class="section-title">COLORS AVAILABLE</div>400 <div class="thumbs">401 <div class="thumb">[IMG: Grey Variant]</div>402 <div class="thumb">[IMG: Black Variant]</div>403 <div class="thumb">[IMG: Navy Variant]</div>404 </div>405 </div>406 407 <!-- Chat bubble -->408 <div class="chat-fab" title="Help">409 <svg viewBox="0 0 24 24">410 <path d="M4 4h16v12H7l-3 4V4z" />411 <circle cx="9" cy="10" r="1.5"></circle>412 <circle cx="13" cy="10" r="1.5"></circle>413 <circle cx="17" cy="10" r="1.5"></circle>414 </svg>415 </div>416 417 <!-- Bottom bar -->418 <div class="bottom-bar">419 <div class="wish-box">420 <svg width="66" height="66" viewBox="0 0 24 24">421 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#3f89ff" stroke-width="2" fill="none"/>422 <path d="M17 6v4" stroke="#3f89ff" stroke-width="2"/>423 </svg>424 </div>425 <div class="add-to-cart">426 <span>ADD TO CART</span>427 <svg class="cart-icon" viewBox="0 0 24 24">428 <path d="M7 7h14l-2 9H9L7 7z" stroke="#1b1b1b" stroke-width="2" fill="none"/>429 <circle cx="9" cy="20" r="2" fill="#1b1b1b"></circle>430 <circle cx="18" cy="20" r="2" fill="#1b1b1b"></circle>431 </svg>432 </div>433 </div>434 435</div>436</body>437</html>