GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Product Reviews Screen</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; color:#222;10 }11 .statusbar{12 height:120px; background:#EDEDED; padding:0 36px; display:flex; align-items:center; justify-content:space-between;13 font-size:40px; color:#333;14 }15 .topbar{16 height:120px; display:flex; align-items:center; padding:0 24px;17 }18 .icon-btn{ width:96px; height:96px; display:flex; align-items:center; justify-content:center; }19 .spacer{ flex:1; }20 .heading-area{ display:flex; padding:12px 36px 0 36px; }21 .left-col{ width:560px; }22 .left-col .big-number{ font-size:56px; font-weight:700; line-height:1.1; }23 .left-col .small{ color:#666; font-size:36px; }24 .dist-col{ flex:1; padding-top:8px; }25 .bar-row{ display:flex; align-items:center; margin:22px 0; }26 .bar-label{ width:100px; color:#444; font-size:36px; }27 .bar-track{ background:#F2F2F2; height:14px; border-radius:8px; width:430px; margin-right:18px; overflow:hidden; }28 .bar-fill{ background:#F1C40F; height:100%; width:40px; }29 .bar-fill.small{ width:22px; }30 .bar-num{ width:120px; text-align:right; color:#555; font-size:36px; }31 .blue-btn{32 margin:32px 36px; background:#2F75BE; color:#fff; height:120px; display:flex; align-items:center; justify-content:center;33 border-radius:16px; font-size:44px; font-weight:700;34 }35 .section-header{ display:flex; align-items:center; justify-content:space-between; padding:0 36px; }36 .section-header .title{ font-size:48px; font-weight:700; }37 .sorter{ display:flex; align-items:center; background:#F5F7FA; border:1px solid #D5DDEA; color:#333;38 border-radius:16px; padding:22px 28px; font-size:38px;39 }40 .review{ padding:28px 36px; border-top:1px solid #ECECEC; }41 .rating-line{ display:flex; align-items:center; gap:22px; color:#666; font-size:36px; }42 .rate-box{43 width:96px; height:96px; border-radius:12px; background:#F1F4F9; display:flex; align-items:center; justify-content:center;44 font-size:40px; font-weight:700;45 }46 .review h3{ margin:28px 0 12px 0; font-size:48px; }47 .review p{ margin:8px 0; color:#444; font-size:40px; line-height:1.35; }48 .meta{ display:flex; align-items:center; gap:18px; margin:18px 0; color:#4D7A57; font-size:38px; }49 .meta .name{ color:#222; }50 .muted{ color:#6f6f6f; }51 .actions{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }52 .action-left{ display:flex; gap:42px; align-items:center; }53 .count{ display:flex; align-items:center; gap:12px; color:#555; font-size:38px; }54 .report{ color:#666; font-size:42px; }55 /* bottom bar */56 .bottom-bar{57 position:absolute; left:0; right:0; bottom:0; height:170px; background:#fff; border-top:1px solid #E6E6E6;58 display:flex; align-items:center; gap:24px; padding:20px 24px;59 }60 .fav-btn{61 width:160px; height:120px; background:#fff; border:1px solid #E6E6E6; border-radius:26px; display:flex; align-items:center; justify-content:center;62 }63 .cta{64 flex:1; height:120px; background:#FFE24A; border-radius:20px; display:flex; align-items:center; justify-content:center;65 font-size:48px; font-weight:800; color:#222;66 }67 .chat-fab{68 position:absolute; right:36px; bottom:210px; width:160px; height:160px; background:#3D7EC1; border-radius:50%;69 display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.15);70 }71 .chip{ color:#888; }72 /* simple icon styles */73 svg{ display:block; }74</style>75</head>76<body>77<div id="render-target">78 79 <!-- Status bar -->80 <div class="statusbar">81 <div>9:37</div>82 <div style="display:flex; align-items:center; gap:22px;">83 <!-- simple signal dot -->84 <svg width="36" height="36"><circle cx="18" cy="18" r="6" fill="#999"/></svg>85 <!-- battery -->86 <svg width="48" height="36" viewBox="0 0 24 12">87 <rect x="1" y="2" width="18" height="8" rx="2" fill="#999"/>88 <rect x="20" y="4" width="3" height="4" rx="1" fill="#999"/>89 </svg>90 </div>91 </div>92 93 <!-- Top bar -->94 <div class="topbar">95 <div class="icon-btn">96 <svg width="60" height="60" viewBox="0 0 24 24">97 <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>98 </svg>99 </div>100 <div class="spacer"></div>101 <div class="icon-btn">102 <!-- search -->103 <svg width="64" height="64" viewBox="0 0 24 24">104 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2.4" fill="none"/>105 <path d="M20 20l-4-4" stroke="#222" stroke-width="2.4" stroke-linecap="round"/>106 </svg>107 </div>108 <div class="icon-btn">109 <!-- heart -->110 <svg width="64" height="64" viewBox="0 0 24 24">111 <path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z" fill="none" stroke="#222" stroke-width="2.2" stroke-linejoin="round"/>112 </svg>113 </div>114 <div class="icon-btn">115 <!-- cart -->116 <svg width="64" height="64" viewBox="0 0 24 24">117 <circle cx="9" cy="20" r="1.6" fill="#222"/><circle cx="17" cy="20" r="1.6" fill="#222"/>118 <path d="M3 4h2l2.5 11h10l1.5-7H7" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119 </svg>120 </div>121 </div>122 123 <!-- Header area with numbers and tiny distribution -->124 <div class="heading-area">125 <div class="left-col">126 <div class="big-number">9409 Verified</div>127 <div class="big-number">Reviews</div>128 </div>129 <div class="dist-col">130 <div class="bar-row">131 <div class="bar-label">2 ★</div>132 <div class="bar-track"><div class="bar-fill small"></div></div>133 <div class="bar-num">187</div>134 </div>135 <div class="bar-row">136 <div class="bar-label">1 ★</div>137 <div class="bar-track"><div class="bar-fill" style="width:46px;"></div></div>138 <div class="bar-num">405</div>139 </div>140 </div>141 </div>142 143 <!-- Write a review button -->144 <div class="blue-btn">Write a review</div>145 146 <!-- Reviews header -->147 <div class="section-header">148 <div class="title">Reviews (9409)</div>149 <div class="sorter">150 <div style="margin-right:18px; color:#777; font-size:36px;">Sort by</div>151 <div>Most Helpful</div>152 <svg width="34" height="34" viewBox="0 0 24 24" style="margin-left:12px;">153 <path d="M6 9l6 6 6-6" fill="none" stroke="#666" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 </div>157 158 <!-- Review 1 -->159 <div class="review">160 <div class="rating-line">161 <div class="rate-box">5 ★</div>162 <div class="muted">Product Experience (1 week or less)</div>163 </div>164 <h3>thubsup</h3>165 <p>it's a super quality product with fare price color combo is noiseless. i'm waiting for the black colour launch .................</p>166 <div class="meta">167 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#2ECC71"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round"/></svg>168 <span class="name">AKSHAY (India)</span>169 <span class="muted">| 22-11-2018</span>170 </div>171 <div class="actions">172 <div class="action-left">173 <div class="count">174 <svg width="48" height="48" viewBox="0 0 24 24">175 <path d="M2 14h4v8H2zM8 22h7a3 3 0 003-3V9a2 2 0 00-2-2h-5l.8-3.3L12 2 8 7v15z" fill="none" stroke="#666" stroke-width="1.8" stroke-linejoin="round"/>176 </svg>177 <span>166</span>178 </div>179 <div class="count">180 <svg width="48" height="48" viewBox="0 0 24 24">181 <path d="M4 5h16v11H7l-3 3V5z" fill="none" stroke="#666" stroke-width="1.8" stroke-linejoin="round"/>182 </svg>183 <span>31</span>184 </div>185 </div>186 <div class="report">Report</div>187 </div>188 </div>189 190 <!-- Review 2 -->191 <div class="review">192 <div class="rating-line">193 <div class="rate-box">5 ★</div>194 <div class="muted">Product Experience (2 to 8 weeks)</div>195 </div>196 <h3>Worth for money</h3>197 <p class="muted">Add more colours</p>198 <div class="meta">199 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#2ECC71"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round"/></svg>200 <span class="name">JOSEPH (India)</span>201 <span class="muted">| 09-11-2018</span>202 </div>203 <div class="actions">204 <div class="action-left">205 <div class="count">206 <svg width="48" height="48" viewBox="0 0 24 24">207 <path d="M2 14h4v8H2zM8 22h7a3 3 0 003-3V9a2 2 0 00-2-2h-5l.8-3.3L12 2 8 7v15z" fill="none" stroke="#666" stroke-width="1.8" stroke-linejoin="round"/>208 </svg>209 <span>103</span>210 </div>211 <div class="count">212 <svg width="48" height="48" viewBox="0 0 24 24">213 <path d="M4 5h16v11H7l-3 3V5z" fill="none" stroke="#666" stroke-width="1.8" stroke-linejoin="round"/>214 </svg>215 <span>22</span>216 </div>217 </div>218 <div class="report">Report</div>219 </div>220 </div>221 222 <!-- Review 3 (partial) -->223 <div class="review">224 <div class="rating-line">225 <div class="rate-box">5 ★</div>226 <div class="muted">Product Experience (2 to 8 weeks)</div>227 </div>228 <h3>Shoes are good but..</h3>229 <p class="muted">Shoes are good but how do I clean this. It became filthy when I ...</p>230 </div>231 232 <!-- floating chat bubble -->233 <div class="chat-fab">234 <svg width="84" height="84" viewBox="0 0 24 24">235 <path d="M4 5h16v11H8l-4 4V5z" fill="#fff"/>236 <circle cx="9" cy="11" r="1.2" fill="#3D7EC1"/>237 <circle cx="12" cy="11" r="1.2" fill="#3D7EC1"/>238 <circle cx="15" cy="11" r="1.2" fill="#3D7EC1"/>239 </svg>240 </div>241 242 <!-- Bottom bar -->243 <div class="bottom-bar">244 <div class="fav-btn">245 <svg width="64" height="64" viewBox="0 0 24 24">246 <path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z" fill="none" stroke="#1E6BB8" stroke-width="2.2" stroke-linejoin="round"/>247 </svg>248 </div>249 <div class="cta">250 ADD TO CART251 <svg width="64" height="64" viewBox="0 0 24 24" style="margin-left:22px;">252 <circle cx="9" cy="20" r="1.6" fill="#222"/><circle cx="17" cy="20" r="1.6" fill="#222"/>253 <path d="M3 4h2l2.5 11h10l1.5-7H7" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 258</div>259</body>260</html>