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>Reviews - Drill Machine</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 /* Header */15 .header {16 width: 100%;17 height: 260px;18 background: linear-gradient(90deg, #a6e5e0, #c4edce);19 position: relative;20 }21 .status-bar {22 height: 56px;23 padding: 0 28px;24 display: flex; align-items: center; justify-content: space-between;25 font-size: 30px; color: #1a1a1a;26 }27 .status-icons { display: flex; align-items: center; gap: 22px; color: #4a4a4a; }28 .status-dot { width: 10px; height: 10px; background:#4a4a4a; border-radius: 50%; display:inline-block; }29 .toolbar {30 position: absolute; left: 0; right: 0; top: 92px;31 padding: 0 24px; display: flex; align-items: center; gap: 18px;32 }33 .back-btn {34 width: 80px; height: 80px; border: none; background: transparent; display:flex; align-items:center; justify-content:center; cursor: default;35 }36 .search-box {37 flex: 1;38 height: 110px; background: #fff; border-radius: 22px;39 box-shadow: 0 4px 10px rgba(0,0,0,0.15);40 display: flex; align-items: center; padding: 0 26px; gap: 22px;41 font-size: 40px; color: #777;42 }43 .search-placeholder { color:#444; font-size: 40px; }44 .spacer { flex:1; }45 .scanner {46 width: 64px; height: 64px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color:#6e6e6e;47 }48 49 /* Content area */50 .content {51 position: absolute; top: 260px; bottom: 180px; left: 0; right: 0;52 overflow: hidden; padding: 24px 32px 0 32px;53 }54 .scroll {55 height: 100%; overflow-y: auto; padding-right: 10px;56 }57 .review {58 padding: 18px 4px 28px 4px;59 border-bottom: 1px solid #eee;60 }61 .row { display: flex; align-items: center; }62 .avatar {63 width: 84px; height: 84px; border-radius: 50%;64 background: #E0E0E0; border: 1px solid #BDBDBD;65 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 26px; margin-right: 22px;66 }67 .author { font-size: 36px; color:#2a2a2a; font-weight: 600; }68 .stars { display:flex; align-items:center; gap: 6px; margin-top: 16px; }69 .verified { color:#c26a1d; font-weight:700; margin-left: 14px; font-size: 32px; }70 .title { font-size: 46px; font-weight: 800; margin-top: 12px; }71 .meta { color:#666; font-size: 32px; margin-top: 6px; }72 .body { color:#222; font-size: 36px; line-height: 1.4; margin-top: 14px; }73 .actions { display:flex; align-items:center; gap: 28px; margin-top: 26px; }74 .btn-helpful {75 padding: 22px 36px; font-size: 40px; border-radius: 24px; background:#fff;76 border: 1px solid #e5e5e5; box-shadow: 0 6px 12px rgba(0,0,0,0.08); color:#2a2a2a;77 }78 .share { display:flex; align-items:center; gap: 16px; color:#6a6a6a; font-size: 38px; }79 .report { margin-left: auto; color:#6a6a6a; font-size: 38px; }80 81 .thumbs { display:flex; gap: 30px; margin: 24px 0 8px 0; }82 .img-ph {83 flex: 1; height: 300px; background:#E0E0E0; border: 1px solid #BDBDBD;84 border-radius: 24px; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px;85 }86 .see-more { color:#0a8f94; font-size: 36px; margin-top: 10px; }87 .muted { color:#7d7d7d; font-size: 32px; margin-top: 14px; }88 89 /* Bottom navigation */90 .tabbar {91 position: absolute; left:0; right:0; bottom: 60px; height: 160px;92 border-top: 1px solid #e6e6e6; background:#fff;93 display:flex; align-items:center; justify-content: space-around;94 }95 .tab {96 display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 10px; color:#7a7a7a; font-size: 32px;97 }98 .tab.active { color:#049e9d; }99 .gesture {100 position: absolute; left: 50%; transform: translateX(-50%);101 bottom: 16px; width: 360px; height: 12px; background:#bdbdbd; border-radius: 8px;102 }103 104 /* SVG helper sizes */105 .icon-32 { width: 48px; height: 48px; }106 .icon-40 { width: 56px; height: 56px; }107</style>108</head>109<body>110<div id="render-target">111 112 <div class="header">113 <div class="status-bar">114 <div>8:23</div>115 <div class="status-icons">116 <span>◯</span>117 <span>ib</span>118 <span>LR</span>119 <span class="status-dot"></span>120 <span>◯</span>121 <span>📶</span>122 <span>81%</span>123 </div>124 </div>125 126 <div class="toolbar">127 <button class="back-btn" aria-label="Back">128 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">129 <path d="M15 18l-6-6 6-6"/>130 </svg>131 </button>132 133 <div class="search-box">134 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2" stroke-linecap="round">135 <circle cx="11" cy="11" r="7"></circle>136 <path d="M21 21l-3.5-3.5"></path>137 </svg>138 <div class="search-placeholder">drill machine</div>139 <div class="spacer"></div>140 <div class="scanner" aria-label="Scan">141 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#6e6e6e" stroke-width="2" stroke-linecap="round">142 <path d="M4 9V6a2 2 0 0 1 2-2h3"/>143 <path d="M20 9V6a2 2 0 0 0-2-2h-3"/>144 <path d="M4 15v3a2 2 0 0 0 2 2h3"/>145 <path d="M20 15v3a2 2 0 0 1-2 2h-3"/>146 </svg>147 </div>148 </div>149 </div>150 </div>151 152 <div class="content">153 <div class="scroll">154 155 <!-- Review 1 -->156 <div class="review">157 <div class="row">158 <div class="avatar">Avatar</div>159 <div class="author">RK</div>160 </div>161 162 <div class="stars">163 <!-- 4 filled stars -->164 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>165 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>166 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>167 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>168 <!-- 1 outline star -->169 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#D1D5DB" d="M12 4.8l1.9 4 4.4.6-3.2 3.1.8 4.4L12 15.7 8.1 17l.8-4.4L5.7 9.4l4.4-.6L12 4.8z"/></svg>170 <div class="verified">Verified Purchase</div>171 </div>172 173 <div class="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">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="btn-helpful">Helpful</div>181 <div class="share">182 <svg class="icon-32" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">183 <circle cx="18" cy="5" r="3"></circle>184 <circle cx="6" cy="12" r="3"></circle>185 <circle cx="18" cy="19" r="3"></circle>186 <path d="M8.6 13.5l6.8 3.9M15.4 6.6L8.6 10.5"/>187 </svg>188 <span>Share</span>189 </div>190 <div class="report">Report</div>191 </div>192 </div>193 194 <!-- Review 2 -->195 <div class="review">196 <div class="row">197 <div class="avatar">Avatar</div>198 <div class="author">rakesh</div>199 </div>200 201 <div class="stars">202 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>203 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>204 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>205 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#F59E0B" d="M12 3l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8 6.9 18.7l1-5.7-4.1-4 5.7-.8z"/></svg>206 <svg class="icon-32" viewBox="0 0 24 24"><path fill="#D1D5DB" d="M12 4.8l1.9 4 4.4.6-3.2 3.1.8 4.4L12 15.7 8.1 17l.8-4.4L5.7 9.4l4.4-.6L12 4.8z"/></svg>207 <div class="verified">Verified Purchase</div>208 </div>209 210 <div class="title">Decent product !!</div>211 <div class="meta">Reviewed in India on 16 November 2023</div>212 213 <div class="thumbs">214 <div class="img-ph">[IMG: Drill machine in box]</div>215 <div class="img-ph">[IMG: Packaging photo]</div>216 </div>217 218 <div class="body">219 This product has been delievered with all accessories as mentioned, i have used the masonry bit to drill the wall (which was my primary concern) - it went well with little force but yes reverse drill not there so while pulling out you need to clear the space more in...220 </div>221 <div class="see-more">See more</div>222 <div class="muted">One person found this helpful</div>223 </div>224 225 </div>226 </div>227 228 <div class="tabbar">229 <div class="tab active">230 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#049e9d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">231 <path d="M3 11l9-7 9 7"></path><path d="M9 22V12h6v10"></path>232 </svg>233 <div>Home</div>234 </div>235 <div class="tab">236 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7"/></svg>237 <div>You</div>238 </div>239 <div class="tab">240 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><rect x="3" y="3" width="18" height="6" rx="2"/><rect x="3" y="11" width="18" height="6" rx="2"/><rect x="3" y="19" width="18" height="2" rx="1"/></svg>241 <div>More</div>242 </div>243 <div class="tab">244 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1.8"/><circle cx="18" cy="20" r="1.8"/></svg>245 <div>Cart</div>246 </div>247 <div class="tab">248 <svg class="icon-40" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>249 <div>Menu</div>250 </div>251 </div>252 253 <div class="gesture"></div>254</div>255</body>256</html>