GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Reconstruction</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0; box-shadow:none;11 }12 13 /* Header */14 .header {15 position:absolute; top:0; left:0; width:100%; height:280px; background:#0A78A6;16 color:#fff;17 }18 .status-bar {19 height:80px; display:flex; align-items:center; padding:0 32px; font-size:28px; opacity:0.9; justify-content:space-between;20 }21 .search-row {22 display:flex; align-items:center; padding:0 32px; margin-top:16px; gap:24px;23 }24 .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }25 .search-box {26 flex:1; height:96px; background:#fff; border-radius:48px; display:flex; align-items:center; padding:0 28px; color:#7a7a7a; font-size:34px; box-shadow:0 2px 0 rgba(0,0,0,0.06) inset;27 }28 .search-placeholder { flex:1; }29 .cart-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }30 31 /* Divider below header */32 .divider { position:absolute; top:280px; left:0; width:100%; height:14px; background:#f1f1f1; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; }33 34 /* Content */35 .content { position:absolute; top:294px; left:0; right:0; bottom:0; overflow:hidden auto; padding-bottom:260px; }36 .section-title { font-size:44px; font-weight:800; margin:48px 40px 24px; }37 .products-row { display:flex; gap:32px; padding:0 40px; }38 .card { width:320px; }39 .thumb {40 position:relative; width:100%; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:24px;41 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; padding:10px;42 }43 .heart {44 position:absolute; top:12px; right:12px; width:40px; height:40px; background:#ffffffcc; border-radius:50%;45 display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,0.15);46 }47 .title { font-size:30px; line-height:36px; color:#444; margin-top:16px; }48 .price-row { margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }49 .price { font-size:34px; font-weight:700; color:#000; }50 .old-price { font-size:28px; color:#9e9e9e; text-decoration:line-through; }51 .deal {52 font-size:26px; color:#1f7a3b; background:#DDF4E1; border-radius:12px; padding:6px 12px; font-weight:700;53 }54 .add-row { margin-top:18px; display:flex; align-items:center; gap:16px; }55 .add-btn {56 height:70px; padding:0 34px; border:1px solid #d0d8de; border-radius:35px; background:#fff; color:#0878a2; font-weight:700; font-size:32px;57 display:flex; align-items:center; justify-content:center;58 }59 .plus-btn {60 width:70px; height:70px; border-radius:35px; border:1px solid #d0d8de; background:#fff; display:flex; align-items:center; justify-content:center;61 }62 63 /* Ratings section */64 .ratings { margin:48px 40px 0; }65 .ratings-title { font-size:42px; font-weight:800; margin-bottom:24px; }66 .ratings-grid { display:flex; gap:40px; }67 .ratings-left { width:280px; }68 .big-score { font-size:120px; font-weight:800; line-height:1; }69 .stars-line { display:flex; gap:6px; margin:12px 0 8px; color:#bdbdbd; }70 .ratings-note { font-size:30px; color:#777; }71 .ratings-right { flex:1; }72 .dist-row { display:flex; align-items:center; gap:16px; margin-bottom:16px; }73 .dist-label { width:40px; color:#777; display:flex; align-items:center; gap:4px; font-size:30px; }74 .bar { flex:1; height:44px; background:#e9ecef; border-radius:22px; position:relative; overflow:hidden; }75 .bar > span { position:absolute; left:0; top:0; height:100%; width:0%; background:#f8c24c; }76 .percent { width:70px; text-align:right; color:#777; font-size:30px; }77 78 /* Explore more row (above bottom bar) */79 .explore { margin:44px 40px; display:flex; align-items:center; justify-content:space-between; color:#0878a2; }80 .explore small { color:#777; display:block; font-size:28px; margin-bottom:4px; }81 .view-link { font-size:34px; font-weight:700; display:flex; align-items:center; gap:10px; }82 83 /* Bottom sticky bar */84 .bottom-bar {85 position:absolute; bottom:0; left:0; width:100%; height:180px; background:#fff; border-top:1px solid #e6e6e6;86 display:flex; align-items:center; justify-content:flex-end; padding:0 40px;87 box-shadow:0 -6px 18px rgba(0,0,0,0.06);88 }89 .cta-btn {90 height:104px; padding:0 60px; border-radius:52px; background:#0A78A6; color:#fff; font-size:40px; font-weight:800; border:none;91 display:flex; align-items:center; justify-content:center;92 }93 94 /* Simple star icon style */95 .star { width:28px; height:28px; }96</style>97</head>98<body>99<div id="render-target">100 101 <div class="header">102 <div class="status-bar">103 <div>4:48</div>104 <div>100%</div>105 </div>106 <div class="search-row">107 <div class="icon-btn">108 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">109 <path d="M15 18L9 12L15 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>110 </svg>111 </div>112 <div class="search-box">113 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" style="margin-right:10px;">114 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2"/>115 <path d="M20 20L16.5 16.5" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>116 </svg>117 <div class="search-placeholder">Search JioMart</div>118 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" style="margin-right:12px;">119 <path d="M12 3v10" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>120 <path d="M9 13h6v4a3 3 0 01-6 0v-4z" stroke="#7a7a7a" stroke-width="2"/>121 </svg>122 </div>123 <div class="cart-btn">124 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">125 <path d="M4 6h2l2 10h10l2-7H8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>126 <circle cx="10" cy="20" r="1.6" fill="#fff"/>127 <circle cx="17" cy="20" r="1.6" fill="#fff"/>128 </svg>129 </div>130 </div>131 </div>132 133 <div class="divider"></div>134 135 <div class="content">136 <div class="section-title">Similar Products</div>137 138 <div class="products-row">139 <!-- Card 1 -->140 <div class="card">141 <div class="thumb">142 [IMG: Screwdriver Set - box and bits]143 <div class="heart">144 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">145 <path d="M12 21s-7-5.2-9-8.3C1.7 9.5 3.4 7 6.4 7c1.7 0 3 .9 3.6 2.1C10.6 7.9 11.9 7 13.6 7c3 0 4.7 2.5 3.4 5.7C19 15.8 12 21 12 21z" stroke="#E06666" stroke-width="1.5" fill="#fff"/>146 </svg>147 </div>148 </div>149 <div class="title">Tools Titan 25 in 1<br>SCREWDRIVER SET 1</div>150 <div class="price-row">151 <div class="price">₹259.00</div>152 <div class="old-price">₹1299.00</div>153 <div class="deal">80% OFF</div>154 </div>155 <div class="add-row">156 <div class="add-btn">Add</div>157 <div class="plus-btn">158 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">159 <path d="M12 5v14M5 12h14" stroke="#0878a2" stroke-width="2" stroke-linecap="round"/>160 </svg>161 </div>162 </div>163 </div>164 165 <!-- Card 2 -->166 <div class="card">167 <div class="thumb">168 [IMG: Screwdriver handle and bits]169 <div class="heart">170 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">171 <path d="M12 21s-7-5.2-9-8.3C1.7 9.5 3.4 7 6.4 7c1.7 0 3 .9 3.6 2.1C10.6 7.9 11.9 7 13.6 7c3 0 4.7 2.5 3.4 5.7C19 15.8 12 21 12 21z" stroke="#E06666" stroke-width="1.5" fill="#fff"/>172 </svg>173 </div>174 </div>175 <div class="title">Tools Titan 25 IN 1<br>SCREWDRIVER SET 8</div>176 <div class="price-row">177 <div class="price">₹265.00</div>178 <div class="old-price">₹799.00</div>179 <div class="deal">66% OFF</div>180 </div>181 <div class="add-row">182 <div class="add-btn">Add</div>183 <div class="plus-btn">184 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">185 <path d="M12 5v14M5 12h14" stroke="#0878a2" stroke-width="2" stroke-linecap="round"/>186 </svg>187 </div>188 </div>189 </div>190 191 <!-- Card 3 -->192 <div class="card">193 <div class="thumb">194 [IMG: Bits set with case]195 <div class="heart">196 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">197 <path d="M12 21s-7-5.2-9-8.3C1.7 9.5 3.4 7 6.4 7c1.7 0 3 .9 3.6 2.1C10.6 7.9 11.9 7 13.6 7c3 0 4.7 2.5 3.4 5.7C19 15.8 12 21 12 21z" stroke="#E06666" stroke-width="1.5" fill="#fff"/>198 </svg>199 </div>200 </div>201 <div class="title">Tools Titan 25 in 1<br>SCREWDRIVER SET</div>202 <div class="price-row">203 <div class="price">₹259.00</div>204 <div class="old-price">₹1299.00</div>205 <div class="deal">80% OFF</div>206 </div>207 <div class="add-row">208 <div class="add-btn">Add</div>209 <div class="plus-btn">210 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">211 <path d="M12 5v14M5 12h14" stroke="#0878a2" stroke-width="2" stroke-linecap="round"/>212 </svg>213 </div>214 </div>215 </div>216 </div>217 218 <!-- Ratings & Reviews -->219 <div class="ratings">220 <div class="ratings-title">Ratings & Reviews</div>221 <div class="ratings-grid">222 <div class="ratings-left">223 <div class="big-score">0</div>224 <div class="stars-line">225 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>226 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>227 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>228 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>229 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>230 </div>231 <div class="ratings-note">0 ratings</div>232 </div>233 <div class="ratings-right">234 <div class="dist-row">235 <div class="dist-label">5236 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>237 </div>238 <div class="bar"><span style="width:0%"></span></div>239 <div class="percent">0%</div>240 </div>241 <div class="dist-row">242 <div class="dist-label">4243 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>244 </div>245 <div class="bar"><span style="width:0%"></span></div>246 <div class="percent">0%</div>247 </div>248 <div class="dist-row">249 <div class="dist-label">3250 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>251 </div>252 <div class="bar"><span style="width:0%"></span></div>253 <div class="percent">0%</div>254 </div>255 <div class="dist-row">256 <div class="dist-label">2257 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>258 </div>259 <div class="bar"><span style="width:0%"></span></div>260 <div class="percent">0%</div>261 </div>262 <div class="dist-row">263 <div class="dist-label">1264 <svg class="star" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 17.3l-6.2 3.4 1.5-6.8L2 9.7l6.9-.7L12 2l3.1 7 6.9.7-5.3 4.2 1.5 6.8z"/></svg>265 </div>266 <div class="bar"><span style="width:0%"></span></div>267 <div class="percent">0%</div>268 </div>269 </div>270 </div>271 </div>272 273 <!-- Explore More -->274 <div class="explore">275 <div>276 <small>Explore More!</small>277 <div class="view-link">View Categories278 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">279 <path d="M8 5l8 7-8 7" stroke="#0878a2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 <div></div>284 </div>285 286 </div>287 288 <!-- Bottom bar -->289 <div class="bottom-bar">290 <button class="cta-btn">Add to Cart</button>291 </div>292 293</div>294</body>295</html>