GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drill Machine - Reviews</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 28px; box-shadow: 0 18px 40px rgba(0,0,0,0.12);12 }13 14 /* Header / search */15 .header {16 position: relative;17 height: 360px;18 background: linear-gradient(180deg, #9ED9CF 0%, #E7F6F2 100%);19 padding: 40px 40px 0 40px;20 }21 .top-row {22 display: flex; align-items: center; gap: 24px;23 }24 .icon-btn {25 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;26 }27 .search-bar {28 flex: 1; height: 120px; background: #fff; border: 1px solid #DADADA; border-radius: 60px;29 display: flex; align-items: center; padding: 0 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);30 }31 .search-input {32 flex: 1; font-size: 44px; color: #333;33 }34 .scan-icon {35 width: 88px; height: 88px; border-radius: 44px; display: flex; align-items: center; justify-content: center;36 border: 1px solid #DADADA; margin-left: 20px;37 }38 39 .tabs {40 margin-top: 36px; display: flex; align-items: center; border-bottom: 1px solid #E6E6E6; padding-bottom: 18px;41 }42 .tab { font-size: 40px; color: #666; margin-right: 48px; }43 .tab.active { color: #D6651F; font-weight: 700; position: relative; }44 .tab.active::after { content: ""; position: absolute; left: 0; bottom: -19px; width: 120px; height: 10px; background: #D6651F; border-radius: 5px; }45 .uplink {46 margin-left: auto; display: flex; align-items: center; gap: 12px; color: #666; font-size: 40px;47 }48 49 /* Content */50 .content { padding: 32px 36px 0 36px; }51 .review {52 padding: 28px 0; border-bottom: 1px solid #eee;53 }54 .review-header {55 display: flex; align-items: center; gap: 24px;56 }57 .avatar {58 width: 96px; height: 96px; border-radius: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;59 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;60 }61 .reviewer-name { font-size: 40px; font-weight: 600; }62 .stars-row { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }63 .verified { color: #D6651F; font-size: 36px; font-weight: 600; margin-left: 12px; }64 .review-title { font-size: 44px; font-weight: 800; margin-top: 6px; }65 .meta { font-size: 34px; color: #666; margin-top: 12px; }66 .body-text { font-size: 38px; line-height: 1.4; color: #333; margin-top: 18px; }67 .actions {68 margin-top: 24px; display: flex; align-items: center; gap: 32px;69 }70 .pill {71 padding: 22px 34px; font-size: 40px; border: 1px solid #D3D3D3; border-radius: 24px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.06);72 }73 .share {74 display: flex; align-items: center; gap: 16px; color: #555; font-size: 40px;75 }76 .report {77 margin-left: auto; font-size: 40px; color: #777;78 }79 .found-helpful { font-size: 34px; color: #666; margin-top: 14px; }80 81 /* See more and CTA cards */82 .more-row {83 display: flex; align-items: center; justify-content: space-between;84 padding: 34px 16px; font-size: 44px; font-weight: 700; color: #222; border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;85 margin-top: 12px;86 }87 .card {88 margin-top: 24px; background: #fff; border: 1px solid #E6E6E6; border-radius: 24px;89 padding: 34px 26px; display: flex; align-items: center; justify-content: space-between; font-size: 44px; color: #333;90 position: relative;91 }92 .chev-right { width: 40px; height: 40px; }93 .basket {94 position: absolute; right: 34px; top: -36px; background: #F2D33A; color: #222; font-size: 42px; padding: 26px 38px;95 border-radius: 28px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); font-weight: 700;96 }97 98 /* Bottom nav */99 .bottom-nav {100 position: absolute; left: 0; right: 0; bottom: 80px; height: 170px; background: #fff; border-top: 1px solid #E6E6E6;101 display: flex; align-items: center; justify-content: space-around;102 }103 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; }104 .nav-item.active { color: #38A3A5; }105 .nav-label { font-size: 34px; margin-top: 12px; }106 .badge {107 position: absolute; top: -8px; right: -12px; background: #F2D33A; color: #000; font-weight: 800; font-size: 26px; border-radius: 16px;108 padding: 6px 12px; border: 1px solid rgba(0,0,0,0.1);109 }110 111 .home-indicator {112 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);113 width: 300px; height: 14px; background: #C9C9C9; border-radius: 7px;114 }115 116 /* Utility SVG */117 svg { display: block; }118</style>119</head>120<body>121<div id="render-target">122 123 <div class="header">124 <div class="top-row">125 <div class="icon-btn">126 <svg width="48" height="48" viewBox="0 0 24 24">127 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>128 </svg>129 </div>130 131 <div class="search-bar">132 <div class="search-input">drill machine</div>133 <div class="scan-icon">134 <svg width="48" height="48" viewBox="0 0 24 24">135 <rect x="4" y="4" width="16" height="16" rx="3" stroke="#666" stroke-width="2" fill="none"/>136 <circle cx="12" cy="12" r="3" fill="#666"/>137 </svg>138 </div>139 </div>140 </div>141 142 <div class="tabs">143 <div class="tab">Details</div>144 <div class="tab">Questions</div>145 <div class="tab">Compare</div>146 <div class="tab active">Reviews</div>147 <div class="uplink">148 <svg width="36" height="36" viewBox="0 0 24 24">149 <path d="M6 14l6-6 6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 </div>153 </div>154 155 <div class="content">156 <!-- Review 1 -->157 <div class="review">158 <div class="review-header">159 <div class="avatar">[IMG: User Avatar]</div>160 <div class="reviewer-name">RK</div>161 </div>162 163 <div class="stars-row">164 <!-- 4 filled + 1 outline -->165 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>166 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>167 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>168 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>169 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="none" stroke="#CCC" stroke-width="2"/></svg>170 <div class="verified">Verified Purchase</div>171 </div>172 173 <div class="review-title">Quite handy, ideal for personal home use.</div>174 <div class="meta">Reviewed in India on 7 December 2023</div>175 <div class="body-text">176 The product matches with description provided. Looks like a sturdy item. The drill bits provided are sufficient for any home use. I used it for a couple of drillings and found it very convenient to use. Value for money.177 </div>178 179 <div class="actions">180 <div class="pill">Helpful</div>181 <div class="share">182 <svg width="44" height="44" viewBox="0 0 24 24">183 <path d="M18 8a3 3 0 1 0-2.9-3.6L8.8 9.2A3 3 0 0 0 7 9a3 3 0 0 0 1.8 2.8l6.2 4A3 3 0 1 0 16 18l-6.3-4.1A3 3 0 0 0 9 12c0-.4 0-.8-.2-1.2l6.3-4A3 3 0 0 0 18 8z" fill="#777"/>184 </svg>185 <span>Share</span>186 </div>187 <div class="report">Report</div>188 </div>189 </div>190 191 <!-- Review 2 -->192 <div class="review">193 <div class="review-header">194 <div class="avatar">[IMG: User Avatar]</div>195 <div class="reviewer-name">Sid</div>196 </div>197 198 <div class="stars-row">199 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>200 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>201 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>202 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>203 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#FFA726"/></svg>204 <div class="verified">Verified Purchase</div>205 </div>206 207 <div class="review-title">Very good product</div>208 <div class="meta">Reviewed in India on 4 December 2023</div>209 <div class="body-text">Affordable price. Nice product for home use</div>210 <div class="found-helpful">One person found this helpful</div>211 212 <div class="actions">213 <div class="pill">Helpful</div>214 <div class="share">215 <svg width="44" height="44" viewBox="0 0 24 24">216 <path d="M18 8a3 3 0 1 0-2.9-3.6L8.8 9.2A3 3 0 0 0 7 9a3 3 0 0 0 1.8 2.8l6.2 4A3 3 0 1 0 16 18l-6.3-4.1A3 3 0 0 0 9 12c0-.4 0-.8-.2-1.2l6.3-4A3 3 0 0 0 18 8z" fill="#777"/>217 </svg>218 <span>Share</span>219 </div>220 <div class="report">Report</div>221 </div>222 </div>223 224 <!-- More reviews -->225 <div class="more-row">226 <div>See more reviews</div>227 <svg class="chev-right" viewBox="0 0 24 24">228 <path d="M9 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 </svg>230 </div>231 232 <!-- CTA cards -->233 <div class="card">234 <div>Create a video review</div>235 <svg class="chev-right" viewBox="0 0 24 24">236 <path d="M9 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 <div class="basket">Add to Basket</div>239 </div>240 241 <div class="card" style="margin-bottom: 220px;">242 <div>Write a review</div>243 <svg class="chev-right" viewBox="0 0 24 24">244 <path d="M9 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 249 <!-- Bottom Nav -->250 <div class="bottom-nav">251 <div class="nav-item active">252 <svg width="48" height="48" viewBox="0 0 24 24">253 <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z" fill="#38A3A5"/>254 </svg>255 <div class="nav-label">Home</div>256 </div>257 <div class="nav-item">258 <svg width="48" height="48" viewBox="0 0 24 24">259 <circle cx="12" cy="7" r="4" fill="#666"/>260 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#666"/>261 </svg>262 <div class="nav-label">You</div>263 </div>264 <div class="nav-item">265 <svg width="48" height="48" viewBox="0 0 24 24">266 <rect x="4" y="4" width="16" height="6" rx="2" fill="#666"/>267 <rect x="4" y="12" width="16" height="8" rx="2" fill="#666"/>268 </svg>269 <div class="nav-label">More</div>270 </div>271 <div class="nav-item" style="position: relative;">272 <svg width="48" height="48" viewBox="0 0 24 24">273 <path d="M6 6h15l-2 8H7L6 6zM7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#666"/>274 </svg>275 <span class="badge">1</span>276 <div class="nav-label">Cart</div>277 </div>278 <div class="nav-item">279 <svg width="48" height="48" viewBox="0 0 24 24">280 <path d="M4 7h16M4 12h16M4 17h16" stroke="#666" stroke-width="2" stroke-linecap="round"/>281 </svg>282 <div class="nav-label">Menu</div>283 </div>284 </div>285 286 <div class="home-indicator"></div>287</div>288</body>289</html>