GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Lock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:0; box-shadow:none;12 color:#212121;13 }14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:120px;17 background:#EAEAEA; padding:0 36px; box-sizing:border-box;18 display:flex; align-items:center; justify-content:space-between;19 font-size:36px; color:#3C3C3C;20 }21 .status-icons { display:flex; align-items:center; gap:28px; font-size:30px; color:#555; }22 .status-dot { width:26px; height:26px; border-radius:50%; background:#8a8a8a; display:inline-block; }23 .battery { display:flex; align-items:center; gap:8px; }24 /* Image area */25 .hero {26 position:absolute; top:120px; left:0; width:100%; height:960px; background:#fff;27 display:flex; align-items:center; justify-content:center;28 }29 .img-placeholder {30 width:1000px; height:800px; background:#E0E0E0; border:1px solid #BDBDBD;31 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;32 }33 .floating-btn {34 position:absolute; right:36px; width:120px; height:120px; border-radius:60px;35 background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center;36 }37 .btn-heart { top:200px; }38 .btn-share { top:360px; }39 .round-icon svg { width:56px; height:56px; }40 /* Carousel dots */41 .dots {42 position:absolute; top:1110px; left:0; width:100%; display:flex; justify-content:center; gap:18px;43 }44 .dot { width:22px; height:22px; border-radius:50%; background:#CFCFCF; }45 .dot.active { background:#9E9E9E; }46 /* Content */47 .content {48 position:absolute; top:1160px; left:36px; right:36px;49 }50 .title {51 font-size:44px; line-height:1.3; margin-bottom:28px; color:#222;52 }53 .more-link { color:#6C63FF; }54 .price-row { display:flex; align-items:baseline; gap:18px; margin-bottom:22px; }55 .old-price { color:#9E9E9E; font-size:40px; text-decoration:line-through; }56 .new-price { font-size:54px; font-weight:700; color:#111; }57 .per-item { font-size:40px; color:#333; }58 .off { color:#2E7D32; font-size:44px; font-weight:700; }59 .pill-row { display:flex; gap:18px; margin:20px 0; flex-wrap:wrap; }60 .pill {61 display:inline-flex; align-items:center; gap:14px; padding:16px 22px; border-radius:14px;62 font-size:34px; border:1px solid #EEE; background:#FFF7DF; color:#5f4b00;63 }64 .pill.secondary { background:#EFF2FF; color:#3E51B5; border-color:#DDE2FF; }65 .pill svg { width:40px; height:40px; }66 .subtext { font-size:40px; color:#555; margin:18px 0 10px; }67 /* Ratings */68 .ratings { display:flex; align-items:center; gap:18px; margin:16px 0 32px; }69 .stars { display:flex; gap:6px; }70 .stars svg { width:42px; height:42px; }71 .rating-text { font-size:36px; color:#757575; }72 .divider { height:1px; background:#E0E0E0; margin:30px 0; }73 /* Offer strip */74 .offer {75 font-size:50px; font-weight:700; color:#111; display:flex; align-items:baseline; gap:18px;76 margin-bottom:26px;77 }78 .offer .strike { font-size:44px; color:#9E9E9E; text-decoration:line-through; font-weight:500; }79 .offer .with { font-size:44px; color:#2E7D32; font-weight:700; }80 /* Bottom CTA bar */81 .cta-bar {82 position:absolute; left:0; bottom:90px; width:100%; background:#fff; box-shadow:0 -8px 18px rgba(0,0,0,0.08);83 padding:24px 36px; box-sizing:border-box; display:flex; gap:32px;84 }85 .btn {86 flex:1; height:120px; border-radius:18px; font-size:46px; font-weight:700; cursor:default;87 display:flex; align-items:center; justify-content:center;88 }89 .btn.secondary { background:#ffffff; border:2px solid #D9D9D9; color:#2D2D2D; }90 .btn.primary { background:#5E45FF; color:#fff; }91 /* Navigation pill */92 .nav-pill {93 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);94 width:220px; height:14px; border-radius:7px; background:#C9C9C9;95 }96</style>97</head>98<body>99<div id="render-target">100 <!-- Status bar -->101 <div class="status-bar">102 <div>10:32</div>103 <div class="status-icons">104 <span class="status-dot"></span>105 <span class="status-dot"></span>106 <div class="battery">107 <svg viewBox="0 0 24 24">108 <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="#777"></rect>109 <rect x="20" y="9" width="2" height="6" fill="#777"></rect>110 <rect x="4" y="7" width="14" height="10" fill="#BDBDBD"></rect>111 </svg>112 <span>92%</span>113 </div>114 </div>115 </div>116 117 <!-- Product image area -->118 <div class="hero">119 <div class="img-placeholder">[IMG: Metal brass lock with keys]</div>120 </div>121 122 <!-- Floating action buttons -->123 <div class="floating-btn btn-heart round-icon">124 <!-- Heart outline icon -->125 <svg viewBox="0 0 24 24">126 <path d="M12 21s-7-4.6-9.5-8.3C.7 10 .9 6.9 3.3 5.2 5.5 3.7 8.4 4.3 10 6c1.6-1.7 4.5-2.3 6.7-.8 2.4 1.7 2.6 4.8 .8 7.5C19 16.4 12 21 12 21z" fill="none" stroke="#555" stroke-width="1.5"/>127 </svg>128 </div>129 <div class="floating-btn btn-share round-icon">130 <!-- Share arrow icon -->131 <svg viewBox="0 0 24 24">132 <circle cx="5" cy="12" r="3" fill="#777"></circle>133 <circle cx="19" cy="5" r="3" fill="#777"></circle>134 <circle cx="19" cy="19" r="3" fill="#777"></circle>135 <path d="M7.7 11.4L16 7.2M7.7 12.6L16 16.8" stroke="#777" stroke-width="2" fill="none" />136 </svg>137 </div>138 139 <!-- Carousel dots -->140 <div class="dots">141 <div class="dot active"></div>142 <div class="dot"></div>143 <div class="dot"></div>144 </div>145 146 <!-- Content -->147 <div class="content">148 <div class="title">149 Metal brass push lock with 2 keys each for suitcase bags / Traveling bag padlock...150 <span class="more-link">more</span>151 </div>152 153 <div class="price-row">154 <div class="old-price">₹100</div>155 <div class="new-price">₹33</div>156 <div class="per-item">per item</div>157 <div class="off">67% off</div>158 </div>159 160 <div class="pill-row">161 <div class="pill">Minimum 5 items</div>162 <div class="pill secondary">163 <svg viewBox="0 0 24 24">164 <rect x="1" y="8" width="15" height="10" rx="2" fill="#5360FF"></rect>165 <rect x="16" y="11" width="7" height="7" rx="2" fill="#5360FF"></rect>166 <rect x="3" y="10" width="3" height="2" fill="#fff"></rect>167 </svg>168 Free Delivery169 </div>170 </div>171 172 <div class="subtext">Free Delivery</div>173 174 <div class="ratings">175 <div class="stars">176 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#2E7D32"/></svg>177 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#2E7D32"/></svg>178 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#2E7D32"/></svg>179 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#2E7D32"/></svg>180 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7.4L12 18l-6.3 3.7 1.3-7.4-5.1-5 7-1z" fill="#C8E6C9"/></svg>181 </div>182 <div class="rating-text">24 ratings & 1 reviews</div>183 </div>184 185 <div class="divider"></div>186 187 <div class="offer">188 <div>₹24</div>189 <div class="strike">₹33</div>190 <div class="with">with 1 offer</div>191 </div>192 </div>193 194 <!-- Bottom CTA bar -->195 <div class="cta-bar">196 <div class="btn secondary">Add to cart</div>197 <div class="btn primary">Buy Now</div>198 </div>199 200 <div class="nav-pill"></div>201</div>202</body>203</html>