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>Compare Items - Cosco Volleyball</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Top gradient area */15 .top-gradient {16 position: relative;17 width:100%;18 height:230px;19 background: linear-gradient(180deg, #bfe8db 0%, #cbe6e5 100%);20 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;21 }22 .statusbar {23 height:44px; padding:0 24px; color:#1b1b1b; font-size:28px; display:flex; align-items:center; justify-content:space-between;24 opacity:0.85;25 }26 .status-icons { display:flex; align-items:center; gap:18px; }27 .header-row {28 position:absolute; left:0; right:0; top:72px; padding:0 24px; display:flex; align-items:center; gap:16px;29 }30 .icon-btn {31 width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:#222;32 }33 .search-bar {34 flex:1; height:84px; background:#fff; border-radius:18px; box-shadow: 0 2px 6px rgba(0,0,0,0.12);35 display:flex; align-items:center; padding:0 22px; gap:18px; border:1px solid #e6e6e6;36 }37 .search-bar input {38 border:none; outline:none; flex:1; font-size:34px; color:#333;39 }40 .search-right { display:flex; align-items:center; gap:18px; }41 .tabs {42 position:relative; background:#ffffff; height:110px; display:flex; align-items:flex-end; padding:0 12px; gap:8px;43 border-bottom:1px solid #e6e6e6;44 }45 .tab {46 flex:1; text-align:center; font-size:32px; color:#555; padding-bottom:18px;47 }48 .tab.active { color:#e67828; font-weight:700; position:relative; }49 .tab.active::after {50 content:""; position:absolute; left:25%; right:25%; bottom:6px; height:10px; background:#e67828; border-radius:6px;51 }52 .tab-up {53 width:86px; display:flex; align-items:center; justify-content:center;54 }55 56 .section {57 padding:24px 32px;58 }59 .section h2 {60 font-size:48px; margin:18px 0 8px; color:#111; font-weight:800;61 }62 .hr {63 height:2px; background:#e6e6e6; margin:0;64 }65 66 /* Compare cards */67 .compare-cards {68 display:flex; gap:40px; margin-top:16px; padding-bottom:8px; overflow:hidden;69 }70 .card {71 width:330px; text-align:center;72 }73 .ball {74 width:260px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:50%;75 display:flex; align-items:center; justify-content:center; color:#757575; margin:12px auto 18px;76 }77 .card .title { font-size:32px; line-height:1.2; color:#1b1b1b; }78 .card .title .bold { font-weight:700; color:#111; }79 80 /* Comparison table */81 .table {82 width:100%; border:1px solid #dedede; border-radius:12px; overflow:hidden; margin-top:24px;83 }84 .row { display:grid; grid-template-columns: 28% 36% 36%; border-bottom:1px solid #e4e4e4; }85 .cell {86 padding:24px; font-size:30px; color:#333; background:#fff; min-height:86px; display:flex; align-items:center;87 }88 .cell.header { background:#f7f7f7; font-weight:800; color:#444; text-transform:uppercase; font-size:26px; }89 .reviews { color:#6d6d6d; margin-left:10px; font-size:26px; }90 .price { color:#c02424; font-weight:800; }91 .seller { font-size:28px; color:#222; line-height:1.2; }92 .stars { color:#f19b2c; letter-spacing:4px; font-size:32px; }93 94 .more-details {95 margin:16px 0 0; border:1px solid #d8d8d8; border-radius:16px; background:#fafafa; height:110px;96 display:flex; align-items:center; justify-content:center; color:#4b4b4b; font-size:34px; gap:12px;97 }98 99 /* Sponsored section */100 .sponsored { padding:18px 32px 22px; border-top:10px solid #efefef; }101 .sponsored h3 { font-size:48px; color:#111; margin:18px 0 6px; }102 .sponsored .sub { color:#7c7c7c; font-size:26px; display:flex; align-items:center; gap:10px; }103 .sponsored .gallery { display:flex; gap:22px; margin-top:20px; }104 .imgph {105 width:300px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;106 color:#757575;107 }108 109 /* Bottom navigation */110 .bottom-nav {111 position:absolute; left:0; right:0; bottom:90px; height:150px; background:#ffffff; border-top:1px solid #dedede;112 display:flex; align-items:center; justify-content:space-around;113 }114 .nav-item { width:160px; text-align:center; color:#444; font-size:26px; }115 .nav-item .icon { width:56px; height:56px; margin:0 auto 6px; display:block; }116 .nav-item.active { color:#2bb3ad; font-weight:700; position:relative; }117 .nav-item.active::before {118 content:""; position:absolute; top:-6px; left:28px; right:28px; height:10px; background:#2bb3ad; border-radius:6px;119 }120 121 /* Gesture bar */122 .gesture {123 position:absolute; bottom:22px; left:50%; width:320px; height:12px; transform:translateX(-50%);124 background:#bdbdbd; border-radius:12px; opacity:0.8;125 }126 127 /* Small utility icons */128 .ico-signal { width:18px; height:18px; background:#222; border-radius:3px; display:inline-block; }129</style>130</head>131<body>132<div id="render-target">133 <!-- Gradient header -->134 <div class="top-gradient">135 <div class="statusbar">136 <div>11:29</div>137 <div class="status-icons">138 <span style="font-size:26px;">N</span>139 <span class="ico-signal"></span>140 <span style="font-size:26px;">M</span>141 <span class="ico-signal" style="width:22px;"></span>142 </div>143 </div>144 <div class="header-row">145 <div class="icon-btn" aria-label="Back">146 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">147 <polyline points="15 3 6 12 15 21"></polyline>148 </svg>149 </div>150 <div class="search-bar">151 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">152 <circle cx="11" cy="11" r="7"></circle>153 <line x1="16" y1="16" x2="22" y2="22"></line>154 </svg>155 <input type="text" value="Cosco volleyball" />156 <div class="search-right">157 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">158 <rect x="3" y="3" width="18" height="18" rx="3"></rect>159 <circle cx="8" cy="8" r="2"></circle>160 <circle cx="16" cy="16" r="2"></circle>161 </svg>162 <svg width="34" height="34" viewBox="0 0 24 24" fill="#555">163 <path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V5a3 3 0 0 0-3-3zm-6 13.5a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6z"/>164 </svg>165 </div>166 </div>167 </div>168 </div>169 170 <!-- Tabs -->171 <div class="tabs">172 <div class="tab">Details</div>173 <div class="tab">Questions</div>174 <div class="tab active">Compare</div>175 <div class="tab">Reviews</div>176 <div class="tab-up">177 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">178 <polyline points="6 15 12 9 18 15"></polyline>179 </svg>180 </div>181 </div>182 183 <div class="hr"></div>184 185 <!-- Compare section -->186 <div class="section">187 <h2>Compare with similar items</h2>188 189 <div class="compare-cards">190 <div class="card">191 <div class="ball">[IMG: Blue & Yellow Volleyball]</div>192 <div class="title"><span class="bold">This item</span> Cosco Super Volley Volleyball,...</div>193 </div>194 <div class="card">195 <div class="ball">[IMG: Nivia VB-492 Volleyball]</div>196 <div class="title" style="color:#2b6dc6;">Nivia VB-492 Spot Volleyball,...</div>197 </div>198 <div class="card" style="opacity:.6">199 <div class="ball">[IMG: Another Volleyball]</div>200 <div class="title">Nivia Rubber Volleyball,...</div>201 </div>202 </div>203 204 <!-- Comparison table -->205 <div class="table">206 <div class="row">207 <div class="cell header">Rating</div>208 <div class="cell">209 <span class="stars">★★★★★</span>210 <span class="reviews">665 reviews</span>211 </div>212 <div class="cell">213 <span class="stars">★★★★★</span>214 <span class="reviews">640 reviews</span>215 </div>216 </div>217 <div class="row">218 <div class="cell header">Price</div>219 <div class="cell"><span class="price">₹1,056.00</span></div>220 <div class="cell"><span class="price">₹1,119.00</span></div>221 </div>222 <div class="row">223 <div class="cell header">Sold by</div>224 <div class="cell"><div class="seller">AIM SPORTS AND FASHION</div></div>225 <div class="cell"><div class="seller">RetailEZ Pvt Ltd</div></div>226 </div>227 <div class="row">228 <div class="cell header">Value for money</div>229 <div class="cell"><span style="margin-right:12px;">3.1</span><span class="stars">★★★★☆</span></div>230 <div class="cell"><span style="margin-right:12px;">3.7</span><span class="stars">★★★★☆</span></div>231 </div>232 <div class="row">233 <div class="cell header">Durability</div>234 <div class="cell"><span style="margin-right:12px;">3.0</span><span class="stars">★★★☆☆</span></div>235 <div class="cell"><span style="margin-right:12px;">3.4</span><span class="stars">★★★★☆</span></div>236 </div>237 </div>238 239 <div class="more-details">240 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">241 <polyline points="6 9 12 15 18 9"></polyline>242 </svg>243 <span>See more details</span>244 </div>245 </div>246 247 <!-- Sponsored section -->248 <div class="sponsored">249 <h3>Free delivery for eligible orders</h3>250 <div class="sub">Sponsored251 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2">252 <circle cx="12" cy="12" r="9"></circle>253 <line x1="12" y1="8" x2="12" y2="13"></line>254 <circle cx="12" cy="17" r="1"></circle>255 </svg>256 </div>257 <div class="gallery">258 <div class="imgph">[IMG: Volleyball Net Closeup]</div>259 <div class="imgph">[IMG: Volleyball Net Pole]</div>260 <div class="imgph">[IMG: Sports Stopwatch]</div>261 </div>262 </div>263 264 <!-- Bottom navigation -->265 <div class="bottom-nav">266 <div class="nav-item active">267 <svg class="icon" viewBox="0 0 24 24" fill="#2bb3ad">268 <path d="M12 3l9 8h-3v9h-12v-9h-3z"></path>269 </svg>270 <div>Home</div>271 </div>272 <div class="nav-item">273 <svg class="icon" viewBox="0 0 24 24" fill="#666">274 <circle cx="12" cy="8" r="4"></circle>275 <path d="M4 21c0-4 4-6 8-6s8 2 8 6z"></path>276 </svg>277 <div>You</div>278 </div>279 <div class="nav-item">280 <svg class="icon" viewBox="0 0 24 24" fill="#666">281 <rect x="4" y="4" width="7" height="7" rx="1"></rect>282 <rect x="13" y="4" width="7" height="7" rx="1"></rect>283 <rect x="4" y="13" width="7" height="7" rx="1"></rect>284 </svg>285 <div>More</div>286 </div>287 <div class="nav-item">288 <svg class="icon" viewBox="0 0 24 24" fill="#666">289 <path d="M7 4h10l3 7h-16z"></path>290 <circle cx="9" cy="19" r="2"></circle>291 <circle cx="17" cy="19" r="2"></circle>292 </svg>293 <div>Cart</div>294 </div>295 <div class="nav-item">296 <svg class="icon" viewBox="0 0 24 24" fill="#666">297 <path d="M4 6h16v2h-16zM4 11h16v2h-16zM4 16h16v2h-16z"></path>298 </svg>299 <div>Menu</div>300 </div>301 </div>302 303 <div class="gesture"></div>304</div>305</body>306</html>