GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Reviews UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:24px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);11 }12 13 /* Status bar */14 .status-bar {15 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 color:#444; font-weight:600; font-size:34px;17 }18 .status-left { display:flex; align-items:center; gap:18px; }19 .status-right { display:flex; align-items:center; gap:22px; }20 .status-chip {21 width:46px; height:34px; background:#D9D9D9; border-radius:6px;22 }23 .battery {24 display:flex; align-items:center; gap:10px; color:#666; font-weight:600;25 }26 .wifi-icon, .lock-icon {27 width:34px; height:34px;28 }29 30 /* Header with search */31 .header {32 padding:16px 36px 8px 36px;33 }34 .search-row {35 display:flex; align-items:center; gap:22px;36 }37 .icon-btn {38 width:64px; height:64px; display:flex; align-items:center; justify-content:center;39 }40 .search-bar {41 flex:1; height:86px; background:#F0F0F0; border-radius:18px; border:1px solid #E0E0E0;42 display:flex; align-items:center; padding:0 24px; color:#888; font-size:38px;43 }44 .search-bar .placeholder { flex:1; }45 .cart-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }46 47 /* Content */48 .content { padding:0 36px 220px 36px; } /* extra bottom padding above sticky bar */49 .section { margin-top:10px; }50 .subtle { color:#8b8b8b; font-size:32px; }51 .review-title { color:#222; font-size:40px; font-weight:600; margin:8px 0 14px 0; }52 .review-text { color:#222; font-size:42px; line-height:1.35; margin-bottom:20px; }53 .img-thumb {54 width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px;55 display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px; margin-bottom:16px;56 }57 .user-line {58 color:#6c6c6c; font-size:34px;59 }60 .actions { display:flex; gap:22px; margin:18px 0; flex-wrap:wrap; }61 .pill {62 display:flex; align-items:center; gap:16px; border:2px solid #D0D0D0; border-radius:38px;63 padding:18px 26px; color:#555; font-size:32px; background:#fff;64 }65 .verified { display:flex; align-items:center; gap:12px; color:#616161; font-size:30px; }66 .divider { height:1px; background:#E6E6E6; margin:28px 0; }67 68 .stars { display:flex; align-items:center; gap:8px; margin-top:8px; }69 .stars svg { width:34px; height:34px; }70 .green { color:#0DB14B; }71 72 .menu-dot { color:#999; font-size:40px; }73 74 .row-link {75 display:flex; align-items:center; justify-content:space-between;76 padding:30px 0; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF;77 }78 .row-link .text { font-size:40px; font-weight:700; color:#222; }79 .chevron { width:36px; height:36px; }80 81 .qa-header {82 display:flex; align-items:center; justify-content:space-between; margin:28px 0;83 }84 .qa-header .title { font-size:48px; font-weight:700; color:#222; }85 .qa-search {86 display:flex; align-items:center; gap:16px; border:2px solid #D0D0D0; border-radius:12px; padding:14px 18px; color:#3A63F0; font-size:34px; background:#fff;87 }88 .qa-item { margin:16px 0; }89 .qa-item .q { font-size:36px; font-weight:600; color:#222; }90 .qa-item .a { font-size:34px; color:#444; }91 92 /* Floating circular logo */93 .floating-logo {94 position:absolute; right:36px; bottom:320px;95 width:120px; height:120px; border-radius:60px; background:linear-gradient(145deg,#3A63F0,#2748C9);96 display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,0.2);97 }98 .floating-logo .inner {99 width:92px; height:92px; border-radius:46px; background:#FFD217; display:flex; align-items:center; justify-content:center;100 color:#0b3cbd; font-weight:800; font-size:56px;101 }102 103 /* Sticky bottom bar */104 .bottom-bar {105 position:absolute; left:0; bottom:0; width:100%; height:150px; display:flex;106 }107 .bottom-btn {108 flex:1; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:700; color:#fff;109 }110 .bottom-btn.black { background:#000; }111 .bottom-btn.yellow { background:#FFC313; color:#1e1e1e; }112 113 /* Home indicator */114 .home-indicator {115 position:absolute; bottom:8px; left:50%; transform:translateX(-50%);116 width:280px; height:10px; background:#D0D0D0; border-radius:6px;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="status-left">126 <div>8:40</div>127 <svg class="lock-icon" viewBox="0 0 24 24">128 <rect x="6" y="10" width="12" height="10" rx="2" fill="#777"></rect>129 <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#777" stroke-width="2" fill="none"></path>130 </svg>131 <div class="status-chip"></div>132 <div class="status-chip"></div>133 </div>134 <div class="status-right">135 <svg class="wifi-icon" viewBox="0 0 24 24">136 <path d="M2 8c5-4 15-4 20 0" stroke="#777" stroke-width="2" fill="none"></path>137 <path d="M5 12c4-3 10-3 14 0" stroke="#777" stroke-width="2" fill="none"></path>138 <path d="M9 16c3-2 5-2 8 0" stroke="#777" stroke-width="2" fill="none"></path>139 <circle cx="12" cy="19" r="1.8" fill="#777"></circle>140 </svg>141 <div class="battery">142 <svg viewBox="0 0 28 18" width="36" height="24">143 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#777" fill="none" stroke-width="2"></rect>144 <rect x="23" y="6" width="3" height="6" rx="1" fill="#777"></rect>145 <rect x="3" y="5" width="14" height="8" rx="1.5" fill="#777"></rect>146 </svg>147 <span>33%</span>148 </div>149 </div>150 </div>151 152 <!-- Header -->153 <div class="header">154 <div class="search-row">155 <div class="icon-btn">156 <svg viewBox="0 0 24 24" width="40" height="40">157 <path d="M15 4L7 12l8 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>158 </svg>159 </div>160 <div class="search-bar">161 <div class="placeholder">Search for products</div>162 <svg viewBox="0 0 24 24" width="38" height="38">163 <rect x="9" y="4" width="6" height="10" rx="3" fill="#777"></rect>164 <rect x="10.5" y="13" width="3" height="4" rx="1" fill="#777"></rect>165 </svg>166 </div>167 <div class="cart-btn">168 <svg viewBox="0 0 24 24" width="40" height="40">169 <path d="M3 5h3l2 10h10l2-7H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170 <circle cx="9" cy="19" r="1.8" fill="#333"></circle>171 <circle cx="17" cy="19" r="1.8" fill="#333"></circle>172 </svg>173 </div>174 </div>175 </div>176 177 <div class="content">178 179 <!-- Review block 1 -->180 <div class="section">181 <div class="subtle">Review for: Size 7</div>182 <div class="review-title">3rd class quality</div>183 <div class="img-thumb">[IMG: White Shoe Photo]</div>184 <div class="user-line">Flipkart Cust..., New Delhi</div>185 186 <div class="actions">187 <div class="pill">188 <svg viewBox="0 0 24 24" width="34" height="34">189 <path d="M2 14h5v7h8c2 0 2-3 2-3l1-6h-8l1-6c0-1-1-2-2-2H7" stroke="#777" stroke-width="2" fill="none"></path>190 </svg>191 <span>Helpful for 237</span>192 </div>193 <div class="pill">194 <svg viewBox="0 0 24 24" width="34" height="34">195 <path d="M2 10h5V3h8c2 0 2 3 2 3l1 6h-8l1 6c0 1-1 2-2 2H7" stroke="#777" stroke-width="2" fill="none"></path>196 </svg>197 <span>69</span>198 </div>199 <div class="menu-dot">⋮</div>200 </div>201 202 <div class="verified">203 <svg viewBox="0 0 24 24" width="30" height="30">204 <circle cx="12" cy="12" r="10" fill="#111"></circle>205 <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"></path>206 </svg>207 <span>Verified Purchase · 1 month ago</span>208 </div>209 </div>210 211 <div class="divider"></div>212 213 <!-- Review block 2 -->214 <div class="section">215 <div class="stars">216 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.2 2.2 7L12 16l-6.5 4.2 2.2-7L2 9h7z" fill="#12B24B"></path></svg>217 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.2 2.2 7L12 16l-6.5 4.2 2.2-7L2 9h7z" fill="#12B24B"></path></svg>218 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.2 2.2 7L12 16l-6.5 4.2 2.2-7L2 9h7z" fill="#12B24B"></path></svg>219 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.2 2.2 7L12 16l-6.5 4.2 2.2-7L2 9h7z" fill="#12B24B"></path></svg>220 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.2 2.2 7L12 16l-6.5 4.2 2.2-7L2 9h7z" fill="#12B24B"></path></svg>221 <div style="font-size:40px; color:#222; font-weight:700; margin-left:8px;">Super!</div>222 </div>223 <div class="review-text">This product was very useful for me ❤️❤️</div>224 <div class="img-thumb">[IMG: Shoe on Counter]</div>225 <div class="user-line">Rahul Kumar, Gopalganj · Silver Reviewer</div>226 227 <div class="actions">228 <div class="pill">229 <svg viewBox="0 0 24 24" width="34" height="34">230 <path d="M2 14h5v7h8c2 0 2-3 2-3l1-6h-8l1-6c0-1-1-2-2-2H7" stroke="#777" stroke-width="2" fill="none"></path>231 </svg>232 <span>Helpful for 325</span>233 </div>234 <div class="pill">235 <svg viewBox="0 0 24 24" width="34" height="34">236 <path d="M2 10h5V3h8c2 0 2 3 2 3l1 6h-8l1 6c0 1-1 2-2 2H7" stroke="#777" stroke-width="2" fill="none"></path>237 </svg>238 <span>124</span>239 </div>240 <div class="menu-dot">⋮</div>241 </div>242 243 <div class="verified">244 <svg viewBox="0 0 24 24" width="30" height="30">245 <circle cx="12" cy="12" r="10" fill="#111"></circle>246 <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"></path>247 </svg>248 <span>Verified Purchase · 1 month ago</span>249 </div>250 </div>251 252 <div class="row-link">253 <div class="text">All 260 reviews</div>254 <svg class="chevron" viewBox="0 0 24 24">255 <path d="M9 5l7 7-7 7" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>256 </svg>257 </div>258 259 <!-- Q&A -->260 <div class="qa-header">261 <div class="title">Questions and Answers</div>262 <div class="qa-search">263 <svg viewBox="0 0 24 24" width="30" height="30">264 <circle cx="11" cy="11" r="7" stroke="#3A63F0" stroke-width="2" fill="none"></circle>265 <path d="M20 20l-4-4" stroke="#3A63F0" stroke-width="2" fill="none" stroke-linecap="round"></path>266 </svg>267 <span>Search</span>268 </div>269 </div>270 271 <div class="qa-item">272 <div class="q">Q: This is water proof or not</div>273 <div class="a">A: No sir, it's not water proof.</div>274 </div>275 276 <div class="qa-item">277 <div class="q">Q: Does the white color get dirty easily?</div>278 <div class="a">A: It needs regular cleaning to look fresh.</div>279 </div>280 </div>281 282 <!-- Floating round logo -->283 <div class="floating-logo">284 <div class="inner">f</div>285 </div>286 287 <!-- Bottom sticky bar -->288 <div class="bottom-bar">289 <div class="bottom-btn black">Add to cart</div>290 <div class="bottom-btn yellow">Buy now</div>291 </div>292 293 <div class="home-indicator"></div>294</div>295</body>296</html>