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 - Reviews</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 .status-bar {17 height: 90px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #1f2937;23 font-weight: 600;24 font-size: 42px;25 }26 .status-icons { display: flex; align-items: center; gap: 22px; }27 .dot { width: 10px; height: 10px; background: #6b7280; border-radius: 50%; display: inline-block; }28 .sb-rect { width: 32px; height: 22px; border: 2px solid #6b7280; border-radius: 4px; position: relative; }29 .sb-rect::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #6b7280; border-radius: 1px; }30 .header {31 height: 120px;32 padding: 0 30px;33 display: flex;34 align-items: center;35 border-bottom: 1px solid #e5e7eb;36 }37 .header-left { display: flex; align-items: center; gap: 18px; }38 .title { font-size: 42px; font-weight: 600; color: #111827; }39 .title-sub { font-size: 36px; color: #10b981; margin-left: 10px; font-weight: 600; }40 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 38px; }41 .icon24 { width: 54px; height: 54px; }42 .content { padding: 24px 36px 0; }43 .thumb-row { display: flex; align-items: center; gap: 24px; }44 .img-ph {45 width: 300px; height: 300px; background: #E0E0E0; border: 1px solid #BDBDBD;46 display: flex; align-items: center; justify-content: center; color: #616161; font-size: 30px; text-align: center;47 }48 .section { margin-top: 30px; }49 .section-title { font-size: 48px; font-weight: 700; color: #111827; margin: 26px 0; }50 .review-card { margin-top: 10px; }51 .review-header { display: flex; align-items: center; justify-content: space-between; }52 .reviewer { display: flex; align-items: center; gap: 24px; }53 .avatar {54 width: 120px; height: 120px; border-radius: 60px; background: #eee; border: 1px solid #d1d5db;55 display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 26px;56 }57 .name-row { display: flex; align-items: center; gap: 14px; }58 .name { font-size: 38px; font-weight: 700; color: #1f2937; letter-spacing: 0.2px; }59 .verified { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 32px; }60 .date { color: #6b7280; font-size: 30px; }61 .stars { margin: 18px 0; display: flex; gap: 10px; }62 .star { width: 44px; height: 44px; }63 .review-title { font-size: 40px; font-weight: 700; margin: 8px 0; }64 .review-text { font-size: 32px; color: #374151; }65 .bullets { margin-top: 16px; font-size: 32px; color: #1f2937; }66 .hashtags { margin-top: 16px; font-size: 30px; color: #6b7280; }67 .cta-outline {68 margin-top: 30px; border: 2px solid #e5e7eb; border-radius: 18px; padding: 36px;69 font-size: 38px; font-weight: 700; color: #111827; display: flex; align-items: center; justify-content: space-between;70 }71 .chev { width: 40px; height: 40px; }72 .divider { margin: 26px 0; height: 1px; background: #e5e7eb; }73 .about { margin-top: 6px; }74 .about-row { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }75 .logo-ph { width: 250px; height: 250px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #616161; font-size: 28px; text-align: center; }76 .about-text { font-size: 32px; color: #374151; line-height: 1.5; }77 .add-bag-row {78 margin: 34px 0 20px;79 display: grid; grid-template-columns: 220px 1fr;80 gap: 24px;81 }82 .wish-outline {83 border: 2px solid #111827; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; height: 120px;84 }85 .heart32 { width: 54px; height: 54px; }86 .bag-btn {87 background: #0a0a0a; color: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center;88 font-size: 40px; font-weight: 700; height: 120px;89 }90 .sim-header { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }91 .sim-title { font-size: 44px; font-weight: 700; }92 .view-all { font-size: 36px; color: #EF476F; font-weight: 600; }93 .sim-list {94 margin-top: 18px; display: flex; gap: 24px; overflow: hidden; padding-bottom: 20px;95 }96 .card {97 width: 320px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; position: relative; background: #fff;98 }99 .card .img {100 width: 100%; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 10px;101 display: flex; align-items: center; justify-content: center; color: #616161; font-size: 28px; text-align: center;102 }103 .fav {104 position: absolute; top: 18px; right: 18px; width: 60px; height: 60px; background: #fff; border: 1px solid #e5e7eb; border-radius: 30px;105 display: flex; align-items: center; justify-content: center;106 box-shadow: 0 2px 4px rgba(0,0,0,.06);107 }108 .card-title { margin-top: 14px; font-size: 28px; color: #374151; height: 60px; overflow: hidden; }109 .gesture {110 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);111 width: 280px; height: 12px; border-radius: 6px; background: #cfd8dc;112 }113</style>114</head>115<body>116<div id="render-target">117 <!-- Status bar -->118 <div class="status-bar">119 <div>12:04</div>120 <div class="status-icons">121 <div class="dot"></div>122 <div class="dot"></div>123 <div class="dot"></div>124 <div class="sb-rect"></div>125 </div>126 </div>127 128 <!-- Top header -->129 <div class="header">130 <div class="header-left">131 <svg class="icon24" viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#111827" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>132 <div class="title">Bewakoof <span class="title-sub">50% Off</span></div>133 </div>134 <div class="header-actions">135 <svg class="icon24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#111827" stroke-width="2.2" fill="none"/><path d="M16 16l5 5" stroke="#111827" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>136 <svg class="icon24" viewBox="0 0 24 24">137 <circle cx="6" cy="12" r="2" fill="#111827"/><circle cx="12" cy="6" r="2" fill="#111827"/><circle cx="18" cy="12" r="2" fill="#111827"/>138 <path d="M7.7 10.7l3.6-3.4M14.7 7.3l3.6 3.4" stroke="#111827" stroke-width="1.6" fill="none" stroke-linecap="round"/>139 </svg>140 <svg class="icon24" viewBox="0 0 24 24"><path d="M12 20s-7-5.2-7-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7 2.8C19 14.8 12 20 12 20z" fill="none" stroke="#111827" stroke-width="2"/></svg>141 <svg class="icon24" viewBox="0 0 24 24">142 <path d="M6 8h12l-1.2 11H7.2L6 8z" fill="none" stroke="#111827" stroke-width="2"/>143 <path d="M9 8a3 3 0 0 1 6 0" stroke="#111827" stroke-width="2" fill="none"/>144 </svg>145 </div>146 </div>147 148 <div class="content">149 <div class="thumb-row">150 <div class="img-ph">[IMG: Blue tank top]</div>151 </div>152 153 <div class="section">154 <div class="section-title">Most Helpful Review</div>155 156 <div class="review-card">157 <div class="review-header">158 <div class="reviewer">159 <div class="avatar">Avatar</div>160 <div>161 <div class="name-row">162 <div class="name">RITUZ KUMAR</div>163 <div class="verified">164 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#3b82f6" stroke-width="2"/><path d="M7 12l3 3 7-7" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>165 <span>Verified buyer</span>166 </div>167 </div>168 </div>169 </div>170 <div class="date">21/01/2023</div>171 </div>172 173 <div class="stars">174 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.1L12 18l-6.3 3.3L7 14.2 2 9.3l7-1z" fill="#111827"/></svg>175 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.1L12 18l-6.3 3.3L7 14.2 2 9.3l7-1z" fill="#111827"/></svg>176 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.1L12 18l-6.3 3.3L7 14.2 2 9.3l7-1z" fill="#111827"/></svg>177 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.1L12 18l-6.3 3.3L7 14.2 2 9.3l7-1z" fill="#111827"/></svg>178 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.1L12 18l-6.3 3.3L7 14.2 2 9.3l7-1z" fill="#111827"/></svg>179 </div>180 181 <div class="review-title">Great product.</div>182 <div class="review-text">Nice</div>183 184 <div class="bullets">Great Fit • Great Quality • Packaging • Speedy Delivery • Value for Money</div>185 <div class="hashtags">#Perfectly matched with Image #Regular Fit #Value for money</div>186 187 <div class="cta-outline">188 <div>Read all Reviews</div>189 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#111827" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>190 </div>191 </div>192 193 <div class="divider"></div>194 195 <div class="about">196 <div class="section-title" style="margin-top:0;">About Bewakoof</div>197 <div class="about-row">198 <div class="logo-ph">[IMG: Bewakoof logo]</div>199 <div class="about-text">200 Imagined and made in India, Bewakoof is a true homegrown fashion brand. Home to quirky, cool and trendy fashion - Bewakoof brings to you Hatke styles that are an extension of you. 3000+ premium quality products to choose from.201 </div>202 </div>203 204 <div class="add-bag-row">205 <div class="wish-outline">206 <svg class="heart32" viewBox="0 0 24 24"><path d="M12 21s-7-5.2-7-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7 2.8C19 14.8 12 21 12 21z" fill="none" stroke="#111827" stroke-width="2"/></svg>207 </div>208 <div class="bag-btn">Add to Bag</div>209 </div>210 211 <div class="sim-header">212 <div class="sim-title">Similar Products</div>213 <div class="view-all">View All</div>214 </div>215 216 <div class="sim-list">217 <div class="card">218 <div class="fav">219 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 21s-7-5.2-7-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7 2.8C19 14.8 12 21 12 21z" fill="none" stroke="#111827" stroke-width="1.8"/></svg>220 </div>221 <div class="img">[IMG: Product]</div>222 <div class="card-title">Solid Tee</div>223 </div>224 225 <div class="card">226 <div class="fav">227 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 21s-7-5.2-7-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7 2.8C19 14.8 12 21 12 21z" fill="none" stroke="#111827" stroke-width="1.8"/></svg>228 </div>229 <div class="img">[IMG: Product]</div>230 <div class="card-title">Printed Tee</div>231 </div>232 233 <div class="card">234 <div class="fav">235 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 21s-7-5.2-7-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7 2.8C19 14.8 12 21 12 21z" fill="none" stroke="#111827" stroke-width="1.8"/></svg>236 </div>237 <div class="img">[IMG: Product]</div>238 <div class="card-title">Casual Tank</div>239 </div>240 </div>241 </div>242 </div>243 </div>244 245 <div class="gesture"></div>246</div>247</body>248</html>