GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hardware Shack - Product</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #ffffff;18 }19 20 /* Top status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 120px;27 background: #2b0d4d; /* deep purple */28 color: #fff;29 display: flex;30 align-items: center;31 justify-content: space-between;32 padding: 0 40px;33 box-sizing: border-box;34 }35 .status-left {36 display: flex;37 align-items: center;38 gap: 26px;39 font-weight: 600;40 font-size: 34px;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 26px;46 }47 .icon-dot, .icon-circle {48 width: 26px;49 height: 26px;50 border-radius: 50%;51 background: rgba(255,255,255,0.8);52 }53 .wifi {54 width: 40px;55 height: 26px;56 border-radius: 20px;57 border: 3px solid #fff;58 position: relative;59 }60 .wifi::before, .wifi::after {61 content: '';62 position: absolute;63 left: 50%;64 transform: translateX(-50%);65 border: 3px solid #fff;66 border-radius: 50%;67 }68 .wifi::before {69 top: -12px;70 width: 30px; height: 30px;71 border-color: transparent transparent #fff #fff;72 transform: translateX(-50%) rotate(45deg);73 }74 .battery {75 width: 24px;76 height: 36px;77 border: 3px solid #fff;78 position: relative;79 }80 .battery::after {81 content: '';82 position: absolute;83 top: -8px;84 left: 8px;85 width: 8px; height: 8px;86 background: #fff;87 border-radius: 2px;88 }89 90 /* Header */91 .header {92 position: absolute;93 top: 120px;94 left: 0;95 width: 1080px;96 height: 180px;97 background: #ffffff;98 display: flex;99 align-items: center;100 padding: 0 36px;101 box-sizing: border-box;102 }103 .hamburger {104 width: 86px;105 height: 86px;106 border-radius: 10px;107 display: flex;108 align-items: center;109 justify-content: center;110 margin-right: 26px;111 }112 .hamburger svg {113 width: 64px; height: 64px;114 fill: none; stroke: #2b2b2b; stroke-width: 10;115 }116 .brand {117 display: flex;118 align-items: center;119 gap: 26px;120 flex: 1;121 }122 .brand-badge {123 width: 140px;124 height: 120px;125 background: #f3c12d;126 border-radius: 18px;127 display: flex;128 align-items: center;129 justify-content: center;130 color: #2b2b2b;131 font-weight: 800;132 font-size: 26px;133 border: 2px solid #d0ab1a;134 }135 .brand-name {136 font-weight: 800;137 font-size: 56px;138 color: #2b2b2b;139 letter-spacing: 1px;140 }141 .cart {142 width: 110px;143 height: 110px;144 background: #f3c12d;145 border-radius: 55px;146 display: flex;147 align-items: center;148 justify-content: center;149 border: 4px solid #e2b21c;150 margin-left: 18px;151 }152 .cart svg {153 width: 60px; height: 60px;154 fill: none; stroke: #2b2b2b; stroke-width: 8;155 }156 157 /* Product image placeholder */158 .product-image {159 position: absolute;160 top: 300px;161 left: 0;162 width: 1080px;163 height: 860px;164 background: #E0E0E0;165 border-top: 1px solid #BDBDBD;166 border-bottom: 1px solid #BDBDBD;167 display: flex;168 align-items: center;169 justify-content: center;170 color: #757575;171 font-size: 38px;172 }173 174 /* Discount badge */175 .discount-badge {176 position: absolute;177 top: 360px;178 left: 40px;179 width: 160px;180 height: 160px;181 background: #000000;182 border-radius: 80px;183 color: #ffffff;184 display: flex;185 align-items: center;186 justify-content: center;187 font-size: 52px;188 font-weight: 800;189 }190 191 /* Content area */192 .content {193 position: absolute;194 top: 1180px;195 left: 36px;196 right: 36px;197 }198 .breadcrumbs {199 color: #6f6f6f;200 font-size: 36px;201 text-transform: uppercase;202 letter-spacing: 1px;203 margin-bottom: 16px;204 }205 .title {206 font-size: 64px;207 font-weight: 800;208 color: #1a1a1a;209 line-height: 1.2;210 margin: 20px 0 10px;211 }212 .arrow-circle {213 width: 96px;214 height: 96px;215 border-radius: 48px;216 border: 2px solid #cfcfcf;217 display: inline-flex;218 align-items: center;219 justify-content: center;220 margin: 20px 0;221 }222 .arrow-circle svg {223 width: 44px; height: 44px; stroke: #8a8a8a; stroke-width: 8; fill: none;224 }225 .price {226 font-size: 56px;227 font-weight: 800;228 color: #1a1a1a;229 margin-top: 16px;230 margin-bottom: 16px;231 }232 .description {233 font-size: 36px;234 color: #4d4d4d;235 line-height: 1.5;236 }237 238 /* Loading overlay */239 .loading-overlay {240 position: absolute;241 top: 300px; /* dims the area where product image lives and beyond */242 left: 0;243 width: 1080px;244 height: 1500px;245 background: rgba(0, 0, 0, 0.35);246 display: flex;247 align-items: center;248 justify-content: center;249 }250 .loading-card {251 width: 900px;252 padding: 60px 80px;253 background: #ffffff;254 border-radius: 16px;255 box-shadow: 0 30px 80px rgba(0,0,0,0.35);256 display: flex;257 align-items: center;258 gap: 50px;259 }260 .spinner {261 width: 120px;262 height: 120px;263 border: 14px solid #c1f3ea;264 border-top-color: #55d9c7;265 border-radius: 50%;266 animation: spin 1.1s linear infinite;267 }268 .loading-text {269 font-size: 44px;270 color: #2b2b2b;271 font-weight: 700;272 }273 @keyframes spin {274 to { transform: rotate(360deg); }275 }276 277 /* bottom pill (navigation bar hint) */278 .bottom-pill {279 position: absolute;280 bottom: 34px;281 left: 50%;282 transform: translateX(-50%);283 width: 360px;284 height: 14px;285 background: #d9d9d9;286 border-radius: 7px;287 }288</style>289</head>290<body>291<div id="render-target">292 293 <!-- Status Bar -->294 <div class="status-bar">295 <div class="status-left">296 <div>12:53</div>297 <div class="icon-circle"></div>298 <div class="icon-circle"></div>299 <div class="icon-dot"></div>300 </div>301 <div class="status-icons">302 <div class="wifi"></div>303 <div class="battery"></div>304 </div>305 </div>306 307 <!-- Header -->308 <div class="header">309 <div class="hamburger">310 <svg viewBox="0 0 64 64">311 <path d="M6 14 H58 M6 32 H58 M6 50 H58"></path>312 </svg>313 </div>314 <div class="brand">315 <div class="brand-badge">HS</div>316 <div class="brand-name">HARDWARE SHACK</div>317 </div>318 <div class="cart">319 <svg viewBox="0 0 64 64">320 <path d="M10 14 H18 L22 40 H50 L54 24 H24"></path>321 <circle cx="26" cy="52" r="5"></circle>322 <circle cx="46" cy="52" r="5"></circle>323 </svg>324 </div>325 </div>326 327 <!-- Product image placeholder -->328 <div class="product-image">[IMG: Product Image Placeholder]</div>329 330 <!-- Discount badge -->331 <div class="discount-badge">-11%</div>332 333 <!-- Loading overlay and card -->334 <div class="loading-overlay">335 <div class="loading-card">336 <div class="spinner"></div>337 <div class="loading-text">Loading</div>338 </div>339 </div>340 341 <!-- Content details -->342 <div class="content">343 <div class="breadcrumbs">Home / Paints / Primer and Wall Putty</div>344 345 <div class="title">Asian Paints Trucare Interior<br>Wall Primer – Water Thinnable</div>346 347 <div class="arrow-circle">348 <svg viewBox="0 0 64 64">349 <path d="M18 20 L38 32 L18 44" stroke-linecap="round" stroke-linejoin="round"></path>350 </svg>351 </div>352 353 <div class="price">₹258.00 – ₹3,060.00</div>354 355 <div class="description">Get excellent coverage with a wall primer that doesn’t</div>356 </div>357 358 <div class="bottom-pill"></div>359</div>360</body>361</html>