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>Amazon Reviews UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: none;15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 /* Top blue status/header bar */19 .top-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 220px;23 background: #3d5afe;24 padding: 24px 36px 0 36px;25 box-sizing: border-box;26 }27 .status-row {28 display: flex; align-items: center; justify-content: space-between;29 color: #fff; font-weight: 600; font-size: 40px;30 }31 .status-icons { display: flex; align-items: center; gap: 28px; }32 .chips-row {33 margin-top: 28px;34 display: flex; gap: 18px;35 }36 .chip {37 background: #4f6dd2;38 color: #fff;39 padding: 22px 28px;40 border-radius: 28px;41 font-size: 34px;42 white-space: nowrap;43 display: flex; align-items: center; gap: 16px;44 }45 .chip .close {46 width: 36px; height: 36px;47 border-radius: 18px;48 background: rgba(255,255,255,0.25);49 display: inline-flex; align-items: center; justify-content: center;50 font-size: 30px; line-height: 30px;51 }52 53 /* Content area */54 .content {55 position: absolute; left: 0; right: 0;56 top: 220px; bottom: 0;57 padding: 40px 42px 160px 42px;58 box-sizing: border-box;59 overflow: hidden;60 }61 .review {62 margin-bottom: 68px;63 border-bottom: 1px solid #eee;64 padding-bottom: 40px;65 }66 .rating-row {67 display: flex; align-items: center; gap: 18px;68 margin-bottom: 10px;69 }70 .verified {71 color: #d96c16; font-weight: 700; font-size: 34px;72 }73 .title {74 font-size: 48px; font-weight: 800; margin: 10px 0 18px 0;75 }76 .meta {77 color: #6f6f6f; font-size: 34px; margin-bottom: 20px;78 }79 .text {80 font-size: 38px; line-height: 1.45; color: #222; margin-bottom: 18px;81 }82 .helpful-note {83 color: #6f6f6f; font-size: 34px; margin: 20px 0 26px 0;84 }85 .actions {86 display: flex; align-items: center; justify-content: space-between;87 }88 .actions-left { display: flex; align-items: center; gap: 30px; }89 .btn {90 background: #fff; border: 1px solid #dcdcdc; border-radius: 26px;91 padding: 22px 30px; font-size: 40px; color: #333;92 box-shadow: 0 4px 10px rgba(0,0,0,0.08);93 }94 .share {95 display: flex; align-items: center; gap: 18px; color: #555; font-size: 40px;96 }97 .report {98 color: #8a8a8a; font-size: 40px;99 }100 101 .user-row {102 display: flex; align-items: center; gap: 24px;103 margin: 12px 0 18px 0;104 }105 .avatar {106 width: 86px; height: 86px; border-radius: 50%;107 background: #E0E0E0; border: 1px solid #BDBDBD;108 display: flex; align-items: center; justify-content: center;109 color: #757575; font-size: 20px;110 }111 .username { font-size: 40px; color: #333; font-weight: 600; }112 113 /* Floating action button */114 .fab {115 position: absolute; right: 40px; bottom: 240px;116 width: 120px; height: 120px; border-radius: 60px;117 background: #3d5afe; box-shadow: 0 8px 20px rgba(0,0,0,0.25);118 display: flex; align-items: center; justify-content: center;119 }120 .fab svg { width: 60px; height: 60px; fill: #fff; }121 122 /* Bottom ad/install strip */123 .ad-strip {124 position: absolute; left: 0; right: 0; bottom: 120px;125 display: flex; align-items: center; justify-content: space-between;126 padding: 20px 26px; box-sizing: border-box;127 border-top: 1px solid #eee;128 background: #fff;129 }130 .ad-left {131 display: flex; align-items: center; gap: 20px;132 }133 .ad-img {134 width: 120px; height: 120px;135 background: #E0E0E0; border: 1px solid #BDBDBD;136 display: flex; align-items: center; justify-content: center; color: #757575;137 border-radius: 12px;138 }139 .ad-text { font-size: 34px; color: #333; }140 .install-btn {141 background: #1e73ff; color: #fff; font-size: 42px; font-weight: 700;142 padding: 22px 36px; border-radius: 8px;143 }144 145 /* Gesture bar */146 .gesture-bar {147 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);148 width: 680px; height: 18px; background: #000; border-radius: 9px;149 opacity: 0.8;150 }151 152 /* Icons */153 .star svg { width: 42px; height: 42px; }154 .star.fill { fill: #ff9900; }155 .star.outline { fill: #ffd699; opacity: 0.6; }156 .share svg { width: 40px; height: 40px; fill: #666; }157 .wifi, .battery, .notif { width: 40px; height: 40px; }158</style>159</head>160<body>161<div id="render-target">162 163 <div class="top-bar">164 <div class="status-row">165 <div>9:26</div>166 <div class="status-icons">167 <!-- Simple icons -->168 <svg class="wifi" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 18c.9 0 1.7.3 2.3.9l-2.3 2.3-2.3-2.3c.6-.6 1.4-.9 2.3-.9zm0-4c2 0 3.9.8 5.3 2.2l-1.4 1.4C14.8 16.3 13.4 15.8 12 15.8s-2.8.5-3.9 1.4l-1.4-1.4C8.1 14.8 10 14 12 14zm0-4c3.6 0 7 1.4 9.6 4l-1.4 1.4C17.9 13.1 15 12 12 12s-5.9 1.1-8.2 3.1L2.4 14C5 11.4 8.4 10 12 10z"/></svg>169 <svg class="notif" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>170 <svg class="battery" viewBox="0 0 24 24"><path fill="#ffffff" d="M16 6h2v2h2v8h-2v2h-2v-2H4V8h12V6zM6 10v4h8v-4H6z"/></svg>171 </div>172 </div>173 <div class="chips-row">174 <div class="chip"><span class="close">×</span><span>Amazon.</span></div>175 <div class="chip">Flipkar</div>176 <div class="chip">2gud.co</div>177 <div class="chip">Google.</div>178 <div class="chip">Relian</div>179 <div class="chip">Shop</div>180 </div>181 </div>182 183 <div class="content">184 <!-- Review 1 -->185 <div class="review">186 <div class="rating-row">187 <span class="star fill">188 <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>189 </span>190 <span class="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></span>191 <span class="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></span>192 <span class="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></span>193 <span class="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></span>194 <span class="verified">Verified Purchase</span>195 </div>196 <div class="title">Good quality</div>197 <div class="meta">Reviewed in India on 2 September 2023</div>198 <div class="meta">Size: Pack of 1 | Colour: Silver-Matt</div>199 <div class="text">200 Good quality sturdy stopper. But comes with low quality screw. I had difficult time installing and had to use different screws by painfully pulling out the original ones with pliers. Their head was getting damaged with slightest slip while tightening.201 </div>202 <div class="helpful-note">2 people found this helpful</div>203 <div class="actions">204 <div class="actions-left">205 <div class="btn">Helpful</div>206 <div class="share">207 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 13.7a3 3 0 0 0 0-3.4l6.5-3.8A3 3 0 1 0 14 5a3 3 0 0 0 .1.7L7.6 9.5a3 3 0 1 0 0 5l6.5 3.8c-.1.2-.1.5-.1.7a3 3 0 1 0 4-2.8z"/></svg>208 <span>Share</span>209 </div>210 </div>211 <div class="report">Report</div>212 </div>213 </div>214 215 <!-- Review 2 -->216 <div class="review">217 <div class="user-row">218 <div class="avatar">[IMG: User Avatar]</div>219 <div class="username">Rajan Patel</div>220 </div>221 <div class="rating-row">222 <span class="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></span>223 <span class="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></span>224 <span class="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></span>225 <span class="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></span>226 <span class="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></span>227 <span class="verified">Verified Purchase</span>228 </div>229 <div class="title">Very good product</div>230 <div class="meta">Reviewed in India on 16 September 2023</div>231 <div class="meta">Size: Pack of 3 | Colour: Silver-Matt</div>232 <div class="text">I advice to buy , nice quality , long last</div>233 <div class="actions">234 <div class="actions-left">235 <div class="btn">Helpful</div>236 <div class="share">237 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 13.7a3 3 0 0 0 0-3.4l6.5-3.8A3 3 0 1 0 14 5a3 3 0 0 0 .1.7L7.6 9.5a3 3 0 1 0 0 5l6.5 3.8c-.1.2-.1.5-.1.7a3 3 0 1 0 4-2.8z"/></svg>238 <span>Share</span>239 </div>240 </div>241 <div class="report">Report</div>242 </div>243 </div>244 245 <!-- Review 3 -->246 <div class="review">247 <div class="user-row">248 <div class="avatar">[IMG: User Avatar]</div>249 <div class="username">vivek thakur</div>250 </div>251 <div class="rating-row">252 <span class="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></span>253 <span class="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></span>254 <span class="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></span>255 <span class="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></span>256 <span class="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></span>257 <span class="verified">Verified Purchase</span>258 </div>259 <div class="title">Sturdy metal, good quality rubber</div>260 <div class="meta">Reviewed in India on 19 August 2023</div>261 <div class="meta">Size: Pack of 4 | Colour: Silver-Matt</div>262 <div class="text">Works as advertised, good finish</div>263 <div class="actions">264 <div class="actions-left">265 <div class="btn">Helpful</div>266 <div class="share">267 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 13.7a3 3 0 0 0 0-3.4l6.5-3.8A3 3 0 1 0 14 5a3 3 0 0 0 .1.7L7.6 9.5a3 3 0 1 0 0 5l6.5 3.8c-.1.2-.1.5-.1.7a3 3 0 1 0 4-2.8z"/></svg>268 <span>Share</span>269 </div>270 </div>271 <div class="report">Report</div>272 </div>273 </div>274 </div>275 276 <!-- Floating action button -->277 <div class="fab">278 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>279 </div>280 281 <!-- Bottom ad/install strip -->282 <div class="ad-strip">283 <div class="ad-left">284 <div class="ad-img">[IMG: Ad Icon]</div>285 <div class="ad-text">Foreign Products To Buy</div>286 </div>287 <div class="install-btn">Install</div>288 </div>289 290 <!-- Gesture bar -->291 <div class="gesture-bar"></div>292</div>293</body>294</html>