GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Ratings & Reviews UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Status bar */14 .statusbar {15 height: 120px; background: #212121; color: #fff;16 display: flex; align-items: center; padding: 0 40px; font-weight: 600;17 }18 .status-left { font-size: 40px; }19 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }20 .status-icon { width: 38px; height: 38px; opacity: 0.95; }21 .battery {22 width: 68px; height: 32px; border: 3px solid #fff; border-radius: 6px; position: relative; margin-left: 8px;23 }24 .battery::after { content:""; position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:8px; height:16px; background:#fff; border-radius:2px; }25 .battery .level { position:absolute; left:4px; top:4px; bottom:4px; right:12px; background:#fff; border-radius:3px; }26 .percent { font-size: 36px; margin-left: 14px; }27 28 /* Header */29 .header {30 height: 190px; display: flex; align-items: center; gap: 24px; padding: 0 36px;31 border-bottom: 1px solid #eee;32 }33 .back-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }34 .title-wrap { display: flex; flex-direction: column; }35 .title { font-size: 44px; font-weight: 700; color: #222; }36 .subtitle { font-size: 30px; color: #777; margin-top: 8px; }37 .rating-inline { color: #2BA84A; font-weight: 700; margin-left: 8px; }38 39 /* Sort bar */40 .sortbar {41 height: 140px; display: flex; align-items: center; padding: 0 36px;42 border-bottom: 1px solid #eee; background: #fff;43 }44 .sort-left { display: flex; align-items: center; gap: 18px; color:#666; font-size: 34px; }45 .sort-right { margin-left: 20px; color: #ff3b6e; font-weight: 700; font-size: 34px; }46 47 /* Chips */48 .chips { padding: 16px 36px 28px; }49 .tag {50 display: inline-flex; align-items: center; margin: 14px 12px 14px 0;51 background: #fafafa; border: 1px solid #E0E0E0; border-radius: 26px;52 font-size: 30px; color: #555; padding: 18px 28px 18px 56px; position: relative;53 }54 .tag::before {55 content:""; position:absolute; left:20px; top:50%; transform:translateY(-50%);56 width:14px; height:40px; background:#2BA84A; border-radius: 8px;57 }58 59 /* Reviews */60 .review { border-top: 1px solid #eee; padding: 36px; }61 .rev-head { display:flex; align-items:center; justify-content:space-between; color:#777; }62 .rev-head-left { display:flex; align-items:center; gap:16px; font-size: 30px; }63 .rev-head-right { font-size: 28px; color:#999; }64 .verify { display:flex; align-items:center; gap:10px; color:#4CAF50; font-weight:600; }65 .rating-row { display:flex; align-items:center; gap:18px; margin-top: 26px; }66 .rating-badge {67 background:#EAF7E9; color:#2BA84A; font-weight:700; border-radius: 24px;68 padding: 10px 20px; font-size: 32px;69 }70 .rev-title { font-size: 40px; font-weight:700; color:#222; }71 .rev-text { margin-top: 20px; font-size: 30px; line-height: 1.5; color:#555; }72 .more { color:#ff3b6e; font-weight:700; }73 74 .rev-chips { margin-top: 22px; }75 76 /* Bottom gesture bar */77 .bottom-bar {78 position:absolute; left:0; right:0; bottom:0; height: 120px; background:#000000;79 display:flex; align-items:center; justify-content:center;80 }81 .home-pill { width: 220px; height: 12px; background:#ffffff; border-radius: 10px; opacity:0.9; }82 83 /* Simple inline SVG styling */84 svg { display:block; }85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status bar -->91 <div class="statusbar">92 <div class="status-left">9:40</div>93 <div class="status-right">94 <!-- simple icons -->95 <svg class="status-icon" viewBox="0 0 24 24">96 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>97 <path d="M7 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>98 </svg>99 <svg class="status-icon" viewBox="0 0 24 24">100 <path d="M4 18h16M4 12h12M4 6h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>101 </svg>102 <svg class="status-icon" viewBox="0 0 24 24">103 <path d="M12 3v18M3 12h18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>104 </svg>105 <div class="battery"><div class="level"></div></div>106 <div class="percent">100%</div>107 </div>108 </div>109 110 <!-- Header -->111 <div class="header">112 <div class="back-btn">113 <svg width="48" height="48" viewBox="0 0 24 24">114 <path d="M15 6l-6 6 6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>115 </svg>116 </div>117 <div class="title-wrap">118 <div class="title">Ratings & Reviews</div>119 <div class="subtitle">Philips BRE245/00... | <span class="rating-inline">4.1★</span></div>120 </div>121 </div>122 123 <!-- Sort bar -->124 <div class="sortbar">125 <div class="sort-left">126 <svg width="40" height="40" viewBox="0 0 24 24">127 <path d="M4 7h16M7 12h10M10 17h4" stroke="#777" stroke-width="2" stroke-linecap="round"></path>128 </svg>129 <span>Sort</span>130 </div>131 <div class="sort-right">Most Recent ↑</div>132 </div>133 134 <!-- First cluster of chips -->135 <div class="chips">136 <div class="tag">5/5 Easy to use</div>137 <div class="tag">5/5 Portability</div>138 <div class="tag">5/5 Delivery</div>139 <div class="tag">5/5 For sensitive skin</div>140 <div class="tag">5/5 Easy to clean</div>141 </div>142 143 <!-- Review 1 -->144 <div class="review">145 <div class="rev-head">146 <div class="rev-head-left">147 <svg width="40" height="40" viewBox="0 0 24 24">148 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"></circle>149 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>150 </svg>151 <div class="verify">152 <svg width="34" height="34" viewBox="0 0 24 24">153 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"></circle>154 <path d="M7 12l3 3 6-6" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"></path>155 </svg>156 <span>Verified Buyer</span>157 </div>158 </div>159 <div class="rev-head-right">19th Feb 2022</div>160 </div>161 162 <div class="rating-row">163 <div class="rating-badge">5★</div>164 <div class="rev-title">Best hair removal from roots</div>165 </div>166 167 <div class="rev-text">168 it is very painfull but to reduce pain first trim the hair and wait for 7 days after new h<span class="more">...more</span>169 </div>170 171 <div class="rev-chips">172 <div class="tag">5/5 Easy to use</div>173 <div class="tag">5/5 Portability</div>174 <div class="tag">5/5 Delivery</div>175 <div class="tag">3/5 For sensitive skin</div>176 <div class="tag">5/5 Easy to clean</div>177 </div>178 </div>179 180 <!-- Review 2 -->181 <div class="review">182 <div class="rev-head">183 <div class="rev-head-left">184 <svg width="40" height="40" viewBox="0 0 24 24">185 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"></circle>186 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>187 </svg>188 <span style="color:#666; font-size:30px;">varsham********@gm...</span>189 <div class="verify">190 <svg width="34" height="34" viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"></circle>192 <path d="M7 12l3 3 6-6" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"></path>193 </svg>194 <span>Verified Buyer</span>195 </div>196 </div>197 <div class="rev-head-right">12th Sep 2021</div>198 </div>199 200 <div class="rating-row">201 <div class="rating-badge">5★</div>202 <div class="rev-title">Amazing purchase!</div>203 </div>204 205 <div class="rev-text">206 Very handy product. Extremely useful for hair removal. Just like threading but hurts wayy <span class="more">...more</span>207 </div>208 </div>209 210 <!-- Review 3 -->211 <div class="review">212 <div class="rev-head">213 <div class="rev-head-left">214 <svg width="40" height="40" viewBox="0 0 24 24">215 <path d="M12 4c-3 0-5 2-5 5 0 3 2 5 5 5s5-2 5-5c0-3-2-5-5-5z" fill="none" stroke="#777" stroke-width="2"></path>216 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>217 </svg>218 <span style="color:#444; font-size:30px;">Sweta Gupta</span>219 <div class="verify">220 <svg width="34" height="34" viewBox="0 0 24 24">221 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"></circle>222 <path d="M7 12l3 3 6-6" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"></path>223 </svg>224 <span>Verified Buyer</span>225 </div>226 </div>227 <div class="rev-head-right">11th Sep 2021</div>228 </div>229 230 <div class="rating-row">231 <div class="rating-badge">5★</div>232 <div class="rev-title">Saviour</div>233 </div>234 235 <div class="rev-text">236 Got rid of waxing mess…this was a long awaited buy237 </div>238 </div>239 240 <!-- Review 4 -->241 <div class="review">242 <div class="rev-head">243 <div class="rev-head-left">244 <svg width="40" height="40" viewBox="0 0 24 24">245 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"></circle>246 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>247 </svg>248 <span style="color:#444; font-size:30px;">RANJITHKUMAR CHAN...</span>249 <div class="verify">250 <svg width="34" height="34" viewBox="0 0 24 24">251 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"></circle>252 <path d="M7 12l3 3 6-6" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"></path>253 </svg>254 <span>Verified Buyer</span>255 </div>256 </div>257 <div class="rev-head-right">7th Sep 2021</div>258 </div>259 260 <div class="rating-row">261 <div class="rating-badge">5★</div>262 <div class="rev-title">Does what it claims</div>263 </div>264 265 <div class="rev-text">266 first time painful, but online videos helped a lot, best solution instead of toxic chemica<span class="more">...more</span>267 </div>268 </div>269 270 <!-- Review 5 (partial) -->271 <div class="review">272 <div class="rev-head">273 <div class="rev-head-left">274 <svg width="40" height="40" viewBox="0 0 24 24">275 <path d="M12 4c-3 0-5 2-5 5 0 3 2 5 5 5s5-2 5-5c0-3-2-5-5-5z" fill="none" stroke="#777" stroke-width="2"></path>276 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"></path>277 </svg>278 <span style="color:#444; font-size:30px;">Reema Patel</span>279 <div class="verify">280 <svg width="34" height="34" viewBox="0 0 24 24">281 <circle cx="12" cy="12" r="10" fill="none" stroke="#4CAF50" stroke-width="2"></circle>282 <path d="M7 12l3 3 6-6" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"></path>283 </svg>284 <span>Verified Buyer</span>285 </div>286 </div>287 <div class="rev-head-right">4th Sep 2021</div>288 </div>289 290 <div class="rating-row">291 <div class="rating-badge">5★</div>292 <div class="rev-title">Very nice product</div>293 </div>294 </div>295 296 <!-- Bottom gesture bar -->297 <div class="bottom-bar">298 <div class="home-pill"></div>299 </div>300</div>301</body>302</html>