GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Hardware Shack - Reviews</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Top purple status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 160px;23 background: #4A19D9;24 color: #fff;25 }26 .status-inner {27 height: 160px;28 padding: 24px 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 box-sizing: border-box;33 }34 .status-left {35 display: flex;36 align-items: center;37 gap: 32px;38 opacity: 0.95;39 }40 .status-dot {41 width: 18px; height: 18px; background: #fff; border-radius: 50%;42 }43 .status-text { font-size: 34px; font-weight: 600; letter-spacing: 0.5px; }44 .status-right {45 display: flex; align-items: center; gap: 24px;46 }47 .status-icon {48 width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.7);49 border-radius: 50%;50 }51 52 /* Site header area */53 .site-header {54 position: absolute;55 top: 160px;56 left: 0;57 width: 1080px;58 height: 150px;59 background: #ffffff;60 display: flex;61 align-items: center;62 padding: 0 36px;63 box-sizing: border-box;64 border-bottom: 1px solid #eee;65 }66 .burger {67 width: 84px;68 height: 84px;69 margin-right: 24px;70 display: flex; align-items: center; justify-content: center;71 }72 .burger svg { width: 70px; height: 70px; }73 .brand {74 display: flex; align-items: center;75 gap: 28px;76 flex: 1;77 }78 .logo-box {79 width: 110px; height: 110px;80 background: #E0E0E0; border: 1px solid #BDBDBD;81 display: flex; justify-content: center; align-items: center;82 color: #757575; font-size: 22px; text-align: center; border-radius: 12px;83 }84 .brand-title {85 font-weight: 800; font-size: 54px; letter-spacing: 1px;86 }87 .cart {88 width: 88px; height: 88px; background: #F5C94F; border-radius: 44px;89 display: flex; justify-content: center; align-items: center;90 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;91 margin-left: 16px;92 border: 2px solid rgba(0,0,0,0.06);93 }94 .cart svg { width: 48px; height: 48px; fill: #fff; }95 96 /* Content */97 .content {98 position: absolute;99 top: 310px;100 left: 0;101 width: 100%;102 height: calc(100% - 310px);103 overflow: hidden;104 }105 .section {106 padding: 32px 36px;107 }108 .reviews-label {109 font-size: 40px; font-weight: 700; color: #333;110 margin-bottom: 18px;111 }112 .product-title {113 font-size: 46px; font-weight: 800; line-height: 64px;114 }115 .divider {116 height: 1px; background: #E5E5E5; margin: 24px 0;117 }118 119 /* Review item */120 .review {121 display: grid;122 grid-template-columns: 130px 1fr;123 gap: 26px;124 padding: 20px 0 34px 0;125 border-bottom: 1px solid #EFEFEF;126 }127 .avatar {128 width: 120px; height: 120px; border-radius: 60px;129 background: #EDEDED; border: 1px solid #D6D6D6;130 display: flex; align-items: center; justify-content: center;131 color: #7A7A7A; font-size: 20px;132 }133 .review-head {134 display: flex; align-items: center; gap: 16px; margin-top: 8px;135 }136 .stars { display: flex; gap: 10px; }137 .star svg { width: 40px; height: 40px; }138 .star-fill svg path { fill: #E14A45; }139 .star-outline svg path { stroke: #E14A45; fill: transparent; stroke-width: 2; }140 .reviewer {141 font-size: 42px; font-weight: 800; color: #2c2c2c;142 }143 .date {144 font-size: 34px; color: #7A7A7A; margin-left: 16px;145 }146 .review-text {147 font-size: 38px; color: #666; margin-top: 14px; font-style: italic; line-height: 54px;148 }149 150 /* Bottom gesture bar mimic */151 .gesture-bar {152 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);153 width: 360px; height: 12px; background: #CFCFCF; border-radius: 6px;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Purple status bar -->161 <div class="status-bar">162 <div class="status-inner">163 <div class="status-left">164 <div class="status-text">8:30</div>165 <div class="status-dot"></div>166 <div class="status-dot"></div>167 <div class="status-dot"></div>168 </div>169 <div class="status-right">170 <div class="status-icon"></div>171 <div class="status-icon"></div>172 <div class="status-text">100%</div>173 </div>174 </div>175 </div>176 177 <!-- Site header -->178 <div class="site-header">179 <div class="burger">180 <svg viewBox="0 0 24 24">181 <path fill="#333" d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>182 </svg>183 </div>184 <div class="brand">185 <div class="logo-box">[IMG: Hardware Shack Logo]</div>186 <div class="brand-title">HARDWARE SHACK</div>187 </div>188 <div class="cart">189 <svg viewBox="0 0 24 24">190 <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14h9.68c.75 0 1.41-.41 1.75-1.05l3.02-5.52A1 1 0 0 0 21.72 6H6.31l-.43-2H2v2h2l2.6 10.39c.16.65.74 1.11 1.42 1.11H19v-2H7.16z"></path>191 </svg>192 </div>193 </div>194 195 <!-- Content Area -->196 <div class="content">197 <div class="section">198 <div class="reviews-label">REVIEWS (5)</div>199 <div class="product-title">200 5 reviews for Jon Bhandari Tools 9pcs Hex Key Ball Point Hexagon Wrench Screwdriver Tools Kit201 </div>202 203 <!-- Review 1 -->204 <div class="review">205 <div class="avatar">[Avatar]</div>206 <div>207 <div class="review-head">208 <div class="stars">209 <div class="star star-fill">210 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>211 </div>212 <div class="star star-fill">213 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>214 </div>215 <div class="star star-fill">216 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>217 </div>218 <div class="star star-fill">219 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>220 </div>221 <div class="star star-outline">222 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>223 </div>224 </div>225 </div>226 <div class="reviewer">Narinder Singh <span class="date">– February 11, 2021</span></div>227 <div class="review-text">Excellent tool</div>228 </div>229 </div>230 231 <!-- Review 2 -->232 <div class="review">233 <div class="avatar">[Avatar]</div>234 <div>235 <div class="review-head">236 <div class="stars">237 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>238 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>239 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>240 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>241 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>242 </div>243 </div>244 <div class="reviewer">Manoj <span class="date">– February 11, 2021</span></div>245 <div class="review-text">Superb quality and nice finish</div>246 </div>247 </div>248 249 <!-- Review 3 -->250 <div class="review">251 <div class="avatar">[Avatar]</div>252 <div>253 <div class="review-head">254 <div class="stars">255 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>256 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>257 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>258 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>259 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>260 </div>261 </div>262 <div class="reviewer">Virej <span class="date">– February 11, 2021</span></div>263 <div class="review-text">264 Impressive customer service, provided me with proper tracking details and it arrived before scheduled delivery date, thank you Hardware Shack265 </div>266 </div>267 </div>268 269 <!-- Review 4 -->270 <div class="review">271 <div class="avatar">[Avatar]</div>272 <div>273 <div class="review-head">274 <div class="stars">275 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>276 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>277 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>278 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>279 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>280 </div>281 </div>282 <div class="reviewer">Satish <span class="date">– February 11, 2021</span></div>283 <div class="review-text">Good product</div>284 </div>285 </div>286 287 <!-- Review 5 preview (partially shown) -->288 <div class="review" style="border-bottom: none;">289 <div class="avatar">[Avatar]</div>290 <div>291 <div class="review-head">292 <div class="stars">293 <div class="star star-fill"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>294 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>295 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>296 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>297 <div class="star star-outline"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>298 </div>299 </div>300 <div class="reviewer">Anil <span class="date">– February 12, 2021</span></div>301 <div class="review-text">...</div>302 </div>303 </div>304 305 </div>306 </div>307 308 <!-- Bottom gesture bar -->309 <div class="gesture-bar"></div>310</div>311</body>312</html>