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 - Padlock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 .topbar {15 height: 160px;16 display: flex; align-items: center;17 padding: 0 48px;18 }19 .topbar .left, .topbar .right { display: flex; align-items: center; }20 .topbar .left { flex: 1; }21 .topbar .right { gap: 40px; }22 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }23 .hero {24 width: 100%; height: 380px;25 display: flex; align-items: center; justify-content: center;26 }27 .divider { height: 2px; background: #E5E5E5; margin: 0 48px; }28 .variants { padding: 40px 48px; display: flex; gap: 40px; }29 .thumb {30 width: 180px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;31 display: flex; align-items: center; justify-content: center; color: #757575;32 border-radius: 12px;33 }34 .thumb.selected { border: 4px solid #000; }35 .content { padding: 0 48px; }36 .title { margin-top: 20px; }37 .title .name { font-weight: 800; letter-spacing: 0.5px; font-size: 40px; }38 .title .subtitle { color: #666; font-size: 34px; margin-top: 8px; }39 .price { font-size: 72px; font-weight: 800; margin: 40px 0; }40 .section-title { font-size: 52px; font-weight: 800; margin: 40px 0 20px; }41 .row { display: flex; align-items: center; justify-content: space-between; height: 120px; font-size: 40px; }42 .row .right { display: flex; align-items: center; gap: 16px; color: #111; }43 .stars { display: flex; gap: 8px; }44 .stars svg { width: 40px; height: 40px; }45 .row-divider { height: 2px; background: #EFEFEF; margin: 0 -48px; }46 .pill-btn {47 position: absolute; left: 60px; right: 60px; bottom: 280px;48 height: 120px; background: #2357A6; color: #fff;49 border-radius: 60px; display: flex; align-items: center; justify-content: center;50 font-weight: 800; font-size: 42px; letter-spacing: 0.3px;51 box-shadow: 0 6px 16px rgba(0,0,0,0.15);52 }53 .mrp { position: absolute; left: 48px; bottom: 210px; font-size: 34px; color: #555; }54 .bottom-nav {55 position: absolute; left: 0; right: 0; bottom: 80px;56 height: 160px; border-top: 1px solid #EEE;57 display: flex; align-items: center; justify-content: space-around;58 color: #777;59 }60 .bottom-nav .nav-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }61 .gesture {62 position: absolute; left: 50%; transform: translateX(-50%);63 bottom: 20px; width: 340px; height: 14px; background: #000; border-radius: 7px; opacity: 0.8;64 }65</style>66</head>67<body>68<div id="render-target">69 70 <!-- Top navigation -->71 <div class="topbar">72 <div class="left">73 <div class="icon-btn">74 <svg viewBox="0 0 24 24" width="48" height="48">75 <path d="M15 5L8 12l7 7" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>76 </svg>77 </div>78 </div>79 <div class="right">80 <div class="icon-btn">81 <!-- Share icon -->82 <svg viewBox="0 0 24 24" width="44" height="44">83 <circle cx="18" cy="5" r="2.5" fill="#000"/>84 <circle cx="6" cy="12" r="2.5" fill="#000"/>85 <circle cx="18" cy="19" r="2.5" fill="#000"/>86 <path d="M8 12l8-7M8 12l8 7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>87 </svg>88 </div>89 <div class="icon-btn">90 <!-- Heart outline -->91 <svg viewBox="0 0 24 24" width="48" height="48">92 <path d="M12 20s-7-4.6-9-8.6C1.2 8.2 3.4 5.5 6.5 5.5c2 0 3.3 1.1 4.1 2.2.8-1.1 2.1-2.2 4.1-2.2 3.1 0 5.3 2.7 3.5 5.9C19 15.4 12 20 12 20z"93 fill="none" stroke="#000" stroke-width="2"/>94 </svg>95 </div>96 </div>97 </div>98 99 <!-- Hero image -->100 <div class="hero">101 <div style="width: 900px; height: 320px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">102 [IMG: Product hero - padlock]103 </div>104 </div>105 106 <div class="divider"></div>107 108 <!-- Variant thumbnails -->109 <div class="variants">110 <div class="thumb selected">[IMG: White padlock]</div>111 <div class="thumb">[IMG: Black padlock]</div>112 </div>113 114 <!-- Product info -->115 <div class="content">116 <div class="title">117 <div class="name">ELLOVEN</div>118 <div class="subtitle">padlock, white</div>119 </div>120 <div class="price">Rs. 199</div>121 122 <div class="section-title">Product information</div>123 124 <div class="row">125 <div>Reviews</div>126 <div class="right">127 <div class="stars">128 <!-- 4 filled stars and one outlined to mimic half -->129 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.3-6.3 3.3 1.3-7-5.1-5 7-1z" fill="#000"/></svg>130 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.3-6.3 3.3 1.3-7-5.1-5 7-1z" fill="#000"/></svg>131 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.3-6.3 3.3 1.3-7-5.1-5 7-1z" fill="#000"/></svg>132 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.3-6.3 3.3 1.3-7-5.1-5 7-1z" fill="#000"/></svg>133 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.3-6.3 3.3 1.3-7-5.1-5 7-1z" fill="none" stroke="#000" stroke-width="2"/></svg>134 </div>135 <div style="font-size:36px; color:#333;">(13)</div>136 </div>137 </div>138 <div class="row-divider"></div>139 140 <div class="row">141 <div>Product size</div>142 <div class="right">143 <svg viewBox="0 0 24 24" width="40" height="40">144 <path d="M6 9l6 6 6-6" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145 </svg>146 </div>147 </div>148 <div class="row-divider"></div>149 150 <div class="row">151 <div>More info</div>152 <div class="right">153 <svg viewBox="0 0 24 24" width="40" height="40">154 <path d="M6 15l6-6 6 6" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155 </svg>156 </div>157 </div>158 159 </div>160 161 <!-- Add to bag button -->162 <div class="pill-btn">Add to bag Rs. 199</div>163 <div class="mrp">MRP Rs.279 (incl. tax)</div>164 165 <!-- Bottom navigation -->166 <div class="bottom-nav">167 <div class="nav-icon">168 <svg viewBox="0 0 24 24" width="64" height="64">169 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="none" stroke="#777" stroke-width="2"/>170 </svg>171 </div>172 <div class="nav-icon">173 <svg viewBox="0 0 24 24" width="64" height="64">174 <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"/>175 <path d="M21 21l-4.5-4.5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>176 </svg>177 </div>178 <div class="nav-icon">179 <svg viewBox="0 0 24 24" width="64" height="64">180 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/>181 <path d="M4 20a8 6 0 0 1 16 0" fill="none" stroke="#777" stroke-width="2"/>182 </svg>183 </div>184 <div class="nav-icon">185 <svg viewBox="0 0 24 24" width="64" height="64">186 <path d="M12 21s-7-4.6-9-8.6C1.2 9.2 3.4 6.5 6.5 6.5c2 0 3.3 1.1 4.1 2.2.8-1.1 2.1-2.2 4.1-2.2 3.1 0 5.3 2.7 3.5 5.9C19 16.4 12 21 12 21z"187 fill="none" stroke="#777" stroke-width="2"/>188 </svg>189 </div>190 <div class="nav-icon">191 <svg viewBox="0 0 24 24" width="64" height="64">192 <path d="M6 7h12l-2 11H8L6 7z" fill="none" stroke="#777" stroke-width="2"/>193 <circle cx="9" cy="20" r="1.5" fill="#777"/>194 <circle cx="15" cy="20" r="1.5" fill="#777"/>195 </svg>196 </div>197 </div>198 199 <div class="gesture"></div>200</div>201</body>202</html>