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 - Chair</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top gradient header */15 .top-gradient {16 height: 330px;17 background: linear-gradient(180deg, #88e0d7 0%, #c6efe7 100%);18 position: relative;19 box-shadow: 0 2px 8px rgba(0,0,0,0.08);20 }21 .status-bar {22 height: 70px; display: flex; align-items: center; padding: 0 28px; font-size: 36px; color: #1b1b1b;23 justify-content: space-between;24 }25 .status-left { font-weight: 600; }26 .status-right { display: flex; align-items: center; gap: 24px; }27 .top-row {28 display: flex; align-items: center; gap: 24px;29 padding: 22px 28px 0 28px;30 }31 .icon-btn {32 width: 80px; height: 80px; border-radius: 18px;33 display: flex; align-items: center; justify-content: center; color: #2b2b2b;34 }35 36 .search-wrap {37 flex: 1;38 background: #ffffff;39 border-radius: 28px;40 height: 96px;41 box-shadow: 0 8px 18px rgba(0,0,0,0.16);42 display: flex; align-items: center;43 padding: 0 28px;44 gap: 22px;45 }46 .search-input {47 border: none; outline: none; font-size: 38px; flex: 1; color: #333;48 }49 .search-input::placeholder { color: #8a8a8a; }50 51 /* Tabs */52 .tabs {53 height: 110px; background: #ffffff; display: flex; align-items: center;54 padding: 0 30px; position: relative; border-top-left-radius: 18px; border-top-right-radius: 18px;55 }56 .tab { flex: 0 0 auto; margin-right: 70px; font-size: 42px; color: #222; }57 .tab.active { color: #f26d21; font-weight: 700; position: relative; }58 .tab.active::after {59 content: ""; position: absolute; left: 10px; right: 10px; bottom: -22px; height: 10px;60 background: #f26d21; border-radius: 6px;61 }62 .tabs-right {63 margin-left: auto; display: flex; align-items: center; gap: 18px;64 background: #e9fbf6; padding: 18px 24px; border-radius: 12px;65 }66 67 /* Content area */68 .content { padding: 24px 30px 0 30px; }69 70 /* Promo grid */71 .promo-grid {72 display: grid;73 grid-template-columns: 1fr 1fr;74 grid-auto-rows: 420px;75 gap: 32px;76 margin-top: 16px;77 }78 .img-ph {79 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;80 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;81 text-align: center; padding: 20px;82 }83 .promo-right-top {84 background: #ffffff; border: 1px solid #ececec; border-radius: 8px; padding: 24px; position: relative;85 display: flex; flex-direction: column; justify-content: flex-end;86 }87 .wire-overlay {88 position: absolute; right: 18px; top: 18px; width: 260px; height: 160px; opacity: 0.25;89 border: 1px dashed #888; border-radius: 12px;90 }91 .promo-title {92 font-size: 68px; font-weight: 800; color: #555;93 letter-spacing: 1px; margin: 0;94 }95 .promo-sub { font-size: 36px; color: #333; margin-top: 12px; }96 97 .promo-left-bottom {98 background: #ffffff; border: 1px solid #ececec; border-radius: 8px; padding: 30px; display: flex; flex-direction: column; justify-content: center;99 }100 .etitle { font-size: 60px; font-weight: 800; color: #666; }101 .highlight { color: #9b9b9b; }102 .edesc { margin-top: 12px; color: #666; font-size: 30px; line-height: 1.2; }103 104 /* Compare section */105 .section-title {106 font-size: 62px; font-weight: 800; margin: 28px 0 18px 0;107 }108 .cards {109 display: flex; gap: 36px; overflow: hidden;110 }111 .card {112 width: 320px;113 }114 .card .img-ph { height: 360px; }115 .card-title {116 font-size: 34px; margin-top: 18px; color: #222;117 }118 .card-title .muted { color: #777; font-weight: 600; }119 120 /* Bottom nav */121 .bottom-bar {122 position: absolute; left: 0; right: 0; bottom: 60px; height: 120px; border-top: 1px solid #e9e9e9;123 background: #ffffff; display: flex; justify-content: space-around; align-items: center;124 }125 .nav-item { display: flex; flex-direction: column; align-items: center; color: #1f1f1f; gap: 8px; }126 .nav-item.active { color: #12b4a5; }127 .handle {128 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);129 width: 320px; height: 10px; background: #c9c9c9; border-radius: 8px;130 }131</style>132</head>133<body>134<div id="render-target">135 136 <div class="top-gradient">137 <div class="status-bar">138 <div class="status-left">3:47</div>139 <div class="status-right">140 <!-- WiFi -->141 <svg width="48" height="48" viewBox="0 0 48 48">142 <path d="M6 18c9-8 27-8 36 0" fill="none" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round"/>143 <path d="M12 24c6-6 18-6 24 0" fill="none" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round"/>144 <path d="M18 30c3-3 9-3 12 0" fill="none" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round"/>145 <circle cx="24" cy="36" r="3.5" fill="#1b1b1b"/>146 </svg>147 <!-- Battery -->148 <svg width="56" height="48" viewBox="0 0 56 48">149 <rect x="2" y="10" width="44" height="28" rx="4" ry="4" fill="none" stroke="#1b1b1b" stroke-width="4"/>150 <rect x="6" y="14" width="36" height="20" rx="2" fill="#1b1b1b"/>151 <rect x="46" y="18" width="8" height="12" rx="2" fill="#1b1b1b"/>152 </svg>153 </div>154 </div>155 156 <div class="top-row">157 <!-- Back -->158 <div class="icon-btn">159 <svg width="54" height="54" viewBox="0 0 48 48">160 <path d="M28 10 L14 24 L28 38" fill="none" stroke="#212121" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>161 </svg>162 </div>163 <!-- Search -->164 <div class="search-wrap">165 <svg width="48" height="48" viewBox="0 0 48 48">166 <circle cx="20" cy="20" r="12" fill="none" stroke="#1b1b1b" stroke-width="4"/>167 <path d="M30 30 L42 42" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round"/>168 </svg>169 <input class="search-input" value="chair" />170 <!-- Scan icon -->171 <svg width="52" height="52" viewBox="0 0 48 48">172 <path d="M6 16V8h8M42 16V8h-8M6 32v8h8M42 32v8h-8" fill="none" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>173 </svg>174 </div>175 </div>176 177 <!-- Tabs -->178 <div class="tabs">179 <div class="tab">Details</div>180 <div class="tab active">Compare</div>181 <div class="tab">Reviews</div>182 <div class="tabs-right">183 <svg width="40" height="40" viewBox="0 0 48 48">184 <path d="M12 30 L24 18 L36 30" fill="none" stroke="#1b1b1b" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 </div>187 </div>188 </div>189 190 <div class="content">191 <!-- Promo grid 2x2 -->192 <div class="promo-grid">193 <div class="img-ph">[IMG: Dining set with black chairs]</div>194 195 <div class="promo-right-top">196 <div class="wire-overlay"></div>197 <div style="position:absolute; right:22px; bottom:130px; opacity:.7;">198 <!-- tiny recline icon -->199 <svg width="70" height="70" viewBox="0 0 48 48">200 <circle cx="22" cy="10" r="5" fill="#777"/>201 <path d="M8 22 h16 l6 8 h10" fill="none" stroke="#777" stroke-width="4" stroke-linecap="round"/>202 <path d="M16 22 v12 l-6 8" fill="none" stroke="#777" stroke-width="4" stroke-linecap="round"/>203 </svg>204 </div>205 <h3 class="promo-title">COMFORTABLE</h3>206 <div class="promo-sub">Chairs that can be stacked and take less space</div>207 </div>208 209 <div class="promo-left-bottom">210 <div class="etitle">Easy To <span class="highlight">Assemble</span></div>211 <div class="edesc">212 Provide a sturdy seat for the occupant<br/>213 Designed as per the latest market trends214 </div>215 </div>216 217 <div class="img-ph">[IMG: Side view of perforated chair]</div>218 </div>219 220 <div style="height: 28px;"></div>221 222 <div class="section-title">Compare with similar items</div>223 224 <div class="cards">225 <div class="card">226 <div class="img-ph">[IMG: Black chair]</div>227 <div class="card-title"><span class="muted">This item</span> Ikea<br/>Italian Chair (Wood ,</div>228 </div>229 <div class="card">230 <div class="img-ph">[IMG: White chair]</div>231 <div class="card-title">IKEA ADDE Chair -<br/>by STOCKLAND…</div>232 </div>233 <div class="card">234 <div class="img-ph">[IMG: Metal folding chair]</div>235 <div class="card-title">Ikea Metal<br/>Folding Chair</div>236 </div>237 <div class="card">238 <div class="img-ph">[IMG: Mesh back chair]</div>239 <div class="card-title">Stackable Mesh<br/>Chair, Black</div>240 </div>241 </div>242 </div>243 244 <!-- Bottom navigation -->245 <div class="bottom-bar">246 <div class="nav-item active">247 <svg width="56" height="56" viewBox="0 0 48 48">248 <path d="M8 22 L24 8 L40 22 V40 H28 V28 H20 V40 H8 Z" fill="currentColor"/>249 </svg>250 </div>251 <div class="nav-item">252 <svg width="56" height="56" viewBox="0 0 48 48">253 <circle cx="24" cy="16" r="8" fill="currentColor"/>254 <path d="M8 40c4-8 28-8 32 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>255 </svg>256 </div>257 <div class="nav-item">258 <svg width="56" height="56" viewBox="0 0 48 48">259 <path d="M10 18h28 M14 10h20 M6 26h36 M10 34h28" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>260 </svg>261 </div>262 <div class="nav-item">263 <svg width="56" height="56" viewBox="0 0 48 48">264 <path d="M8 12h4l4 24h20l4-18H14" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>265 <circle cx="20" cy="40" r="3" fill="currentColor"/>266 <circle cx="34" cy="40" r="3" fill="currentColor"/>267 </svg>268 </div>269 <div class="nav-item">270 <svg width="56" height="56" viewBox="0 0 48 48">271 <path d="M8 14h32M8 24h32M8 34h32" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>272 </svg>273 </div>274 </div>275 276 <div class="handle"></div>277</div>278</body>279</html>