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>Visko Hammer Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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 }13 14 /* Status bar */15 .status-bar {16 height: 110px; background: #4FA7AE; color: #fff; padding: 0 36px;17 display: flex; align-items: center; justify-content: space-between;18 font-size: 34px;19 }20 .status-left { display: flex; align-items: center; gap: 22px; }21 .status-right { display: flex; align-items: center; gap: 28px; }22 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; }23 .battery {24 width: 54px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;25 }26 .battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 12px; background: #fff; border-radius: 2px; }27 .battery .level { position: absolute; left: 3px; top: 3px; width: 36px; height: 16px; background: #fff; }28 29 /* Header / toolbar */30 .toolbar {31 height: 130px; background: #fff; border-bottom: 1px solid #E5E5E5;32 display: flex; align-items: center; justify-content: space-between;33 padding: 0 30px;34 }35 .title-area { display: flex; align-items: center; gap: 26px; }36 .toolbar-title { font-size: 48px; font-weight: 700; color: #111; letter-spacing: 0.5px; }37 .toolbar-actions { display: flex; align-items: center; gap: 34px; }38 .icon-btn { width: 64px; height: 64px; display: grid; place-items: center; }39 .icon { width: 48px; height: 48px; }40 41 /* Filter bar */42 .filters {43 display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED;44 height: 110px; background: #fff;45 }46 .filter-item {47 display: flex; align-items: center; justify-content: center; gap: 16px;48 font-size: 36px; color: #666; border-right: 1px solid #EDEDED;49 }50 .filter-item:last-child { border-right: none; }51 .chevron { width: 24px; height: 24px; }52 53 /* Category chips row */54 .chip-row {55 background: #F3F3F3; padding: 22px 26px; border-bottom: 1px solid #EDEDED;56 display: flex; gap: 22px; height: 120px; align-items: center;57 }58 .chip {59 background: #fff; color: #666; font-size: 36px; padding: 22px 34px;60 border-radius: 18px; box-shadow: 0 3px 8px rgba(0,0,0,0.12);61 border: 1px solid #E6E6E6;62 }63 64 /* Product grid */65 .grid {66 display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0;67 background: #fff;68 }69 .card {70 position: relative; padding: 26px 28px 20px 28px; min-height: 560px; border-bottom: 1px solid #EFEFEF;71 }72 .card:nth-child(odd) { border-right: 1px solid #EFEFEF; }73 .prod-img {74 width: 100%; height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD;75 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;76 border-radius: 8px;77 }78 .heart-wrap {79 position: absolute; right: 20px; top: 160px; width: 86px; height: 86px; border-radius: 50%;80 border: 2px solid #E7E7E7; display: grid; place-items: center; background: #fff;81 }82 .card-title { margin-top: 26px; font-size: 34px; color: #444; line-height: 42px; min-height: 86px; }83 .price-line { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; }84 .price { font-size: 44px; font-weight: 700; color: #111; }85 .old-price { font-size: 34px; color: #9E9E9E; text-decoration: line-through; }86 .discount { font-size: 34px; color: #2A9DF4; margin-top: 6px; }87 .stars { color: #F5A623; font-size: 34px; margin-top: 8px; }88 .ship-tag {89 margin-top: 18px; display: inline-block; border: 2px solid #D7A983; color: #B47A46;90 padding: 12px 22px; border-radius: 12px; font-size: 32px; background: #FFF8F2;91 }92 93 /* Bottom navigation bar */94 .bottom-bar {95 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;96 display: flex; align-items: center; justify-content: center;97 }98 .home-pill {99 width: 220px; height: 12px; border-radius: 8px; background: #fff; opacity: 0.9;100 }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status Bar -->107 <div class="status-bar">108 <div class="status-left">109 <span>11:04</span>110 <span class="dot"></span>111 <span class="dot"></span>112 </div>113 <div class="status-right">114 <span>🔔</span>115 <span>📶</span>116 <div class="battery"><div class="level"></div></div>117 <span>100%</span>118 </div>119 </div>120 121 <!-- Header -->122 <div class="toolbar">123 <div class="title-area">124 <div class="icon-btn">125 <svg class="icon" viewBox="0 0 24 24">126 <path d="M15 6 L9 12 L15 18" fill="none" stroke="#4FA7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>127 </svg>128 </div>129 <div class="toolbar-title">VISKO HAMMER</div>130 </div>131 <div class="toolbar-actions">132 <div class="icon-btn">133 <svg class="icon" viewBox="0 0 24 24">134 <circle cx="10" cy="10" r="7" fill="none" stroke="#4E5A61" stroke-width="2"></circle>135 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#4E5A61" stroke-width="2" stroke-linecap="round"></line>136 </svg>137 </div>138 <div class="icon-btn">139 <svg class="icon" viewBox="0 0 24 24">140 <path d="M3 6 H21 L20 10 H4 Z" fill="none" stroke="#4E5A61" stroke-width="2"></path>141 <circle cx="9" cy="19" r="2" fill="none" stroke="#4E5A61" stroke-width="2"></circle>142 <circle cx="17" cy="19" r="2" fill="none" stroke="#4E5A61" stroke-width="2"></circle>143 </svg>144 </div>145 </div>146 </div>147 148 <!-- Filter Bar -->149 <div class="filters">150 <div class="filter-item">151 <span>Category</span>152 <svg class="chevron" viewBox="0 0 24 24">153 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>154 </svg>155 </div>156 <div class="filter-item">157 <svg class="icon" viewBox="0 0 24 24">158 <line x1="4" y1="6" x2="20" y2="6" stroke="#777" stroke-width="2" />159 <circle cx="9" cy="6" r="2" fill="none" stroke="#777" stroke-width="2"/>160 <line x1="4" y1="12" x2="20" y2="12" stroke="#777" stroke-width="2" />161 <circle cx="15" cy="12" r="2" fill="none" stroke="#777" stroke-width="2"/>162 <line x1="4" y1="18" x2="20" y2="18" stroke="#777" stroke-width="2" />163 <circle cx="6" cy="18" r="2" fill="none" stroke="#777" stroke-width="2"/>164 </svg>165 <span>Filter</span>166 </div>167 <div class="filter-item">168 <span>₹ ↓ Price</span>169 </div>170 <div class="filter-item">171 <svg class="icon" viewBox="0 0 24 24">172 <rect x="4" y="14" width="4" height="6" fill="none" stroke="#777" stroke-width="2"></rect>173 <rect x="10" y="10" width="4" height="10" fill="none" stroke="#777" stroke-width="2"></rect>174 <rect x="16" y="6" width="4" height="14" fill="none" stroke="#777" stroke-width="2"></rect>175 </svg>176 <span>Sort</span>177 </div>178 </div>179 180 <!-- Category Chips -->181 <div class="chip-row">182 <div class="chip">Hammers</div>183 </div>184 185 <!-- Product Grid -->186 <div class="grid">187 <!-- Card 1 -->188 <div class="card">189 <div class="prod-img">[IMG: Cross Pein Hammer]</div>190 <div class="heart-wrap">191 <svg viewBox="0 0 24 24" width="40" height="40">192 <path d="M12 20 C12 20 5 14 5 9 A4 4 0 0 1 9 5 C11 5 12 7 12 7 C12 7 13 5 15 5 A4 4 0 0 1 19 9 C19 14 12 20 12 20 Z" fill="none" stroke="#9E9E9E" stroke-width="2" />193 </svg>194 </div>195 <div class="card-title">Visko 717 100 Gms. Cross Pein ...</div>196 <div class="price-line">197 <div class="price">₹209</div>198 <div class="old-price">₹306</div>199 </div>200 <div class="discount">31% off</div>201 <div class="stars">★ ★ ★ ★ ☆</div>202 <div class="ship-tag">Free shipping</div>203 </div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="prod-img">[IMG: Ball Pein Hammer]</div>208 <div class="heart-wrap">209 <svg viewBox="0 0 24 24" width="40" height="40">210 <path d="M12 20 C12 20 5 14 5 9 A4 4 0 0 1 9 5 C11 5 12 7 12 7 C12 7 13 5 15 5 A4 4 0 0 1 19 9 C19 14 12 20 12 20 Z" fill="none" stroke="#9E9E9E" stroke-width="2" />211 </svg>212 </div>213 <div class="card-title">Visko 716 800 Gms. Ball Pein Ha...</div>214 <div class="price-line">215 <div class="price">₹469</div>216 <div class="old-price">₹846</div>217 </div>218 <div class="discount">44% off</div>219 <div class="ship-tag">Free shipping</div>220 </div>221 222 <!-- Card 3 -->223 <div class="card">224 <div class="prod-img">[IMG: Claw Hammer]</div>225 <div class="heart-wrap" style="top: 560px;">226 <svg viewBox="0 0 24 24" width="40" height="40">227 <path d="M12 20 C12 20 5 14 5 9 A4 4 0 0 1 9 5 C11 5 12 7 12 7 C12 7 13 5 15 5 A4 4 0 0 1 19 9 C19 14 12 20 12 20 Z" fill="none" stroke="#9E9E9E" stroke-width="2" />228 </svg>229 </div>230 <div class="card-title">Visko Claw Hammer with Rubber Grip</div>231 <div class="price-line">232 <div class="price">₹399</div>233 <div class="old-price">₹520</div>234 </div>235 <div class="discount">23% off</div>236 <div class="ship-tag">Free sh