GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Van Heusen - Similar Products</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);12 }13 14 /* Status bar */15 .status-bar {16 height: 80px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; color: #333; font-weight: 600; font-size: 36px;17 }18 .status-icons { display: flex; align-items: center; gap: 22px; }19 .status-icon { width: 34px; height: 34px; opacity: 0.65; }20 21 /* Header */22 .header {23 height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px;24 }25 .header-left { display: flex; align-items: center; gap: 24px; }26 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }27 .brand-mark {28 width: 52px; height: 52px; border-radius: 18px;29 background: linear-gradient(135deg, #FF5A7A, #FFC63D 70%, #7A52FF);30 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 30px;31 }32 .brand-title { font-size: 46px; font-weight: 700; }33 .header-actions { display: flex; align-items: center; gap: 28px; }34 35 /* Info banner */36 .info-block { padding: 16px 36px 24px; }37 .info-title { font-size: 38px; font-weight: 800; color: #1F2937; margin-bottom: 8px; }38 .info-desc { font-size: 30px; color: #6B7280; }39 .divider { height: 2px; background: #EFEFEF; margin: 18px 0; }40 41 /* Sections */42 .section { padding: 12px 36px 0; }43 .section-title { font-size: 40px; font-weight: 800; color: #1F2937; }44 .section-sub { font-size: 28px; color: #EF4444; font-weight: 700; margin-top: 8px; }45 46 /* Grid & Cards */47 .grid { display: flex; gap: 24px; margin-top: 24px; }48 .card { flex: 0 0 calc((100% - 48px) / 3); background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; }49 .card-image {50 position: relative; width: 100%; height: 420px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;51 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 12px;52 }53 .rating-pill {54 position: absolute; left: 16px; bottom: 16px; background: #ffffff; border: 1px solid #E5E7EB; border-radius: 22px;55 padding: 8px 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: #374151; font-size: 28px;56 box-shadow: 0 2px 6px rgba(0,0,0,0.06);57 }58 .card-body { padding: 18px; }59 .brand { font-size: 34px; font-weight: 800; margin-bottom: 8px; }60 .price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }61 .price { font-size: 34px; font-weight: 800; }62 .old-price { font-size: 28px; color: #9CA3AF; text-decoration: line-through; }63 .discount { font-size: 28px; color: #F97316; font-weight: 800; }64 .subtext { font-size: 28px; color: #6B7280; }65 66 .ad-badge { margin-left: 10px; font-size: 24px; color: #6B7280; border: 1px solid #D1D5DB; border-radius: 10px; padding: 6px 10px; font-weight: 700; }67 68 /* Bottom home indicator */69 .home-indicator {70 position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);71 width: 320px; height: 12px; background: #1F2937; opacity: 0.2; border-radius: 8px;72 }73 74 /* SVG defaults */75 svg { display: block; }76</style>77</head>78<body>79<div id="render-target">80 81 <!-- Status bar -->82 <div class="status-bar">83 <div>10:17</div>84 <div class="status-icons">85 <svg class="status-icon" viewBox="0 0 24 24">86 <rect x="3" y="7" width="14" height="10" rx="2" ry="2" fill="#444"></rect>87 <rect x="17" y="10" width="3" height="4" rx="1" ry="1" fill="#444"></rect>88 </svg>89 <svg class="status-icon" viewBox="0 0 24 24">90 <path d="M7 20h10a2 2 0 0 0 2-2V6" stroke="#444" stroke-width="2" fill="none"></path>91 <path d="M17 4h3v3" stroke="#444" stroke-width="2" fill="none"></path>92 </svg>93 <svg class="status-icon" viewBox="0 0 24 24">94 <path d="M6 8v8l6 4V4L6 8z" fill="#444"></path>95 </svg>96 <svg class="status-icon" viewBox="0 0 24 24">97 <circle cx="12" cy="12" r="3" fill="#444"></circle>98 </svg>99 </div>100 </div>101 102 <!-- Header -->103 <div class="header">104 <div class="header-left">105 <div class="icon-btn">106 <svg width="40" height="40" viewBox="0 0 24 24">107 <path d="M15 6 L9 12 L15 18" stroke="#1F2937" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>108 </svg>109 </div>110 <div class="brand-mark">M</div>111 <div class="brand-title">Van Heusen</div>112 </div>113 <div class="header-actions">114 <div class="icon-btn">115 <svg width="40" height="40" viewBox="0 0 24 24">116 <circle cx="6" cy="8" r="2" fill="#1F2937"></circle>117 <circle cx="18" cy="6" r="2" fill="#1F2937"></circle>118 <circle cx="18" cy="18" r="2" fill="#1F2937"></circle>119 <path d="M7.7 8.8 L16.3 6.9" stroke="#1F2937" stroke-width="2"></path>120 <path d="M7.8 9.9 L16.2 17" stroke="#1F2937" stroke-width="2"></path>121 </svg>122 </div>123 <div class="icon-btn">124 <svg width="40" height="40" viewBox="0 0 24 24">125 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#1F2937" stroke-width="2"></path>126 </svg>127 </div>128 <div class="icon-btn">129 <svg width="40" height="40" viewBox="0 0 24 24">130 <path d="M6 8h12l-1 11H7L6 8z" fill="none" stroke="#1F2937" stroke-width="2"></path>131 <path d="M9 8V6h6v2" stroke="#1F2937" stroke-width="2"></path>132 </svg>133 </div>134 </div>135 </div>136 137 <!-- Info banner -->138 <div class="info-block">139 <div class="info-title">Easy 14 days returns and exchanges</div>140 <div class="info-desc">Choose to return or exchange for a different size (if available) within 14 days.</div>141 </div>142 <div class="divider"></div>143 144 <!-- Fastest selling similar products -->145 <div class="section">146 <div class="section-title">Fastest selling similar products</div>147 <div class="section-sub">Likely to be sold out soon</div>148 149 <div class="grid">150 <!-- Card 1 -->151 <div class="card">152 <div class="card-image">153 <div>[IMG: Person wearing white formal shirt]</div>154 <div class="rating-pill">155 <span>3.8</span>156 <svg width="24" height="24" viewBox="0 0 24 24">157 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>158 </svg>159 </div>160 </div>161 <div class="card-body">162 <div class="brand">Van Heusen</div>163 <div class="price-row"><div class="price">₹2,599</div></div>164 <div class="subtext">Pure Cotton Custom Shirt</div>165 </div>166 </div>167 168 <!-- Card 2 -->169 <div class="card">170 <div class="card-image">171 <div>[IMG: Person wearing black casual shirt]</div>172 <div class="rating-pill">173 <span>4.2</span>174 <svg width="24" height="24" viewBox="0 0 24 24">175 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>176 </svg>177 </div>178 </div>179 <div class="card-body">180 <div class="brand">Allen Solly</div>181 <div class="price-row">182 <div class="old-price">₹2,499</div>183 <div class="price">₹1,874</div>184 <div class="discount">25% OFF</div>185 </div>186 <div class="subtext">Men Slim Fit Casual Shirt</div>187 </div>188 </div>189 190 <!-- Card 3 -->191 <div class="card">192 <div class="card-image">193 <div>[IMG: Person wearing black formal shirt]</div>194 <div class="rating-pill">195 <span>4.5</span>196 <svg width="24" height="24" viewBox="0 0 24 24">197 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>198 </svg>199 </div>200 </div>201 <div class="card-body">202 <div class="brand">Louis Philippe</div>203 <div class="price-row"><div class="price">₹2,999</div></div>204 <div class="subtext">Men Formal Shirt</div>205 </div>206 </div>207 </div>208 </div>209 210 <!-- Sponsored Products -->211 <div class="section" style="margin-top: 34px;">212 <div style="display:flex; align-items:center;">213 <div class="section-title">Sponsored Products</div>214 <div class="ad-badge">AD</div>215 </div>216 217 <div class="grid">218 <!-- Card 4 -->219 <div class="card">220 <div class="card-image">221 <div>[IMG: Person wearing navy slim fit shirt]</div>222 <div class="rating-pill">223 <span>4.1</span>224 <svg width="24" height="24" viewBox="0 0 24 24">225 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>226 </svg>227 </div>228 </div>229 <div class="card-body">230 <div class="brand">Van Heusen</div>231 <div class="price-row">232 <div class="old-price">₹2,999</div>233 <div class="price">₹2,249</div>234 <div class="discount">25% OFF</div>235 </div>236 <div class="subtext">Slim Fit Formal Shirt</div>237 </div>238 </div>239 240 <!-- Card 5 -->241 <div class="card">242 <div class="card-image">243 <div>[IMG: Person wearing dark teal cotton formal shirt]</div>244 <div class="rating-pill">245 <span>4.5</span>246 <svg width="24" height="24" viewBox="0 0 24 24">247 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>248 </svg>249 </div>250 </div>251 <div class="card-body">252 <div class="brand">Van Heusen</div>253 <div class="price-row"><div class="price">₹2,299</div></div>254 <div class="subtext">Slim Fit Cotton Formal Shirt</div>255 </div>256 </div>257 258 <!-- Card 6 -->259 <div class="card">260 <div class="card-image">261 <div>[IMG: Person wearing black spread collar shirt]</div>262 <div class="rating-pill">263 <span>4.3</span>264 <svg width="24" height="24" viewBox="0 0 24 24">265 <path d="M12 3l3 6 6 .9-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z" fill="#10B981"></path>266 </svg>267 </div>268 </div>269 <div class="card-body">270 <div class="brand">Louis Philippe</div>271 <div class="price-row">272 <div class="old-price">₹2,599</div>273 <div class="price">₹1,999</div>274 </div>275 <div class="subtext">Spread Collar Shirt</div>276 </div>277 </div>278 </div>279 </div>280 281 <div class="home-indicator"></div>282</div>283</body>284</html>