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>Product Reviews UI</title>7<style>8 :root{9 --text:#111;10 --muted:#6b7280;11 --line:#e5e7eb;12 --green:#2e7d32;13 --bg:#ffffff;14 }15 body{ margin:0; padding:0; background:transparent; }16 #render-target{17 width:1080px; height:2400px; position:relative; overflow:hidden;18 background:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;19 color:var(--text);20 }21 /* Status bar */22 .statusbar{23 height:96px; padding:0 40px; display:flex; align-items:flex-end; box-sizing:border-box;24 font-size:34px; color:#2b2b2b;25 }26 .statusbar .right{ margin-left:auto; display:flex; align-items:center; gap:18px; }27 .dot{ width:10px; height:10px; background:#888; border-radius:50%; display:inline-block; }28 /* App bar */29 .appbar{30 height:132px; display:flex; align-items:center; padding:0 36px; box-sizing:border-box;31 }32 .appbar .title{33 display:flex; flex-direction:column; line-height:1.2; margin-left:20px;34 }35 .appbar .brand{ font-weight:600; font-size:44px; }36 .appbar .price{ font-size:36px; color:#1f2937; }37 .appbar .offer{ color:var(--green); margin-left:10px; font-weight:600; }38 .appbar .actions{ margin-left:auto; display:flex; align-items:center; gap:30px; }39 .icon-btn svg{ width:56px; height:56px; stroke:#1f2937; }40 .divider{ height:2px; background:var(--line); }41 /* List item (return policy) */42 .list-item{ padding:36px 40px; box-sizing:border-box; }43 .list-item .row{ display:flex; align-items:center; }44 .list-item .row .label{ font-size:42px; font-weight:600; margin-left:22px; }45 .list-item .sub{ color:var(--muted); font-size:34px; margin-top:12px; margin-left:88px; }46 .row .chev{ margin-left:auto; }47 .row svg{ stroke:#111; }48 /* Reviews section */49 .content{ padding:18px 40px 180px; }50 .section-title{ font-size:54px; font-weight:700; margin:24px 0 22px; }51 .stars-small{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }52 .stars-small svg{ width:48px; height:48px; }53 .rating-big{ font-size:120px; font-weight:700; margin:6px 0; }54 .based-on{ color:var(--muted); font-size:36px; }55 .img-ph{56 width:320px; height:320px; background:#E0E0E0; border:1px solid #BDBDBD; 57 display:flex; align-items:center; justify-content:center; color:#757575;58 border-radius:6px; margin-top:40px;59 font-size:30px; text-align:center;60 }61 .subsection-title{ font-size:46px; font-weight:700; margin:54px 0 24px; }62 .review-header{ display:flex; align-items:center; }63 .avatar{64 width:108px; height:108px; border-radius:50%; background:#efe9f6; display:flex; align-items:center; justify-content:center;65 color:#8b5cf6; font-weight:700; margin-right:24px; font-size:42px;66 }67 .name-line{ display:flex; align-items:center; gap:16px; }68 .name{ font-weight:700; font-size:40px; }69 .verified{ display:flex; align-items:center; gap:10px; color:#4b5563; font-size:34px; }70 .review-header .date{ margin-left:auto; color:#9ca3af; font-size:34px; }71 .stars-row{ margin:24px 0 18px; }72 .stars-row svg{ width:54px; height:54px; }73 .review-title{ font-size:44px; font-weight:700; margin:16px 0; }74 .review-body{ font-size:38px; color:#1f2937; }75 .chips{ margin-top:20px; color:#111; font-size:34px; }76 .chips .dot{ width:10px; height:10px; background:#9ca3af; margin:0 16px; }77 .hashtags{ margin-top:26px; color:#6b7280; font-size:34px; }78 /* Sticky Add to Bag */79 .bottom-bar{80 position:absolute; left:0; right:0; bottom:64px; padding:0 36px; box-sizing:border-box;81 }82 .add-container{83 height:140px; border:2px solid #1f2937; border-radius:20px; overflow:hidden; display:flex; background:#fff;84 }85 .like-slot{86 width:180px; display:flex; align-items:center; justify-content:center; border-right:2px solid #1f2937; background:#fff;87 }88 .primary-btn{89 flex:1; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:700;90 }91 .home-indicator{92 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);93 width:360px; height:10px; background:#111; opacity:.12; border-radius:10px;94 }95</style>96</head>97<body>98<div id="render-target">99 <!-- Status bar -->100 <div class="statusbar">101 <div>12:04</div>102 <div class="right">103 <span>B</span>104 <span class="dot"></span>105 <span class="dot"></span>106 <span class="dot"></span>107 </div>108 </div>109 110 <!-- App bar -->111 <div class="appbar">112 <div class="icon-btn" aria-label="Back">113 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2">114 <path d="M15 19l-7-7 7-7" />115 </svg>116 </div>117 <div class="title">118 <div class="brand">Bewakoof</div>119 <div class="price">120 ₹150 <span class="offer">50% Off</span>121 </div>122 </div>123 <div class="actions">124 <div class="icon-btn" aria-label="Search">125 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">126 <circle cx="11" cy="11" r="7"></circle>127 <path d="M20 20l-3.5-3.5"></path>128 </svg>129 </div>130 <div class="icon-btn" aria-label="Share">131 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">132 <path d="M4 12v6a2 2 0 0 0 2 2h12"/>133 <path d="M16 6l-8 4v4l8 4V6z"/>134 </svg>135 </div>136 <div class="icon-btn" aria-label="Wishlist">137 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">138 <path d="M12 21s-7-4.8-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.2-7 10-7 10z"/>139 </svg>140 </div>141 <div class="icon-btn" aria-label="Bag">142 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">143 <path d="M6 8h12l-1 12H7L6 8z"/>144 <path d="M9 8V6a3 3 0 0 1 6 0v2"/>145 </svg>146 </div>147 </div>148 </div>149 <div class="divider"></div>150 151 <!-- Return and exchange policy -->152 <div class="list-item">153 <div class="row">154 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke-width="2">155 <circle cx="12" cy="12" r="9"></circle>156 <path d="M12 8l-3 3 3 3"></path>157 <path d="M9 11h6"></path>158 </svg>159 <div class="label">Return and exchange policy</div>160 <div class="chev">161 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke-width="2">162 <path d="M6 9l6 6 6-6"></path>163 </svg>164 </div>165 </div>166 <div class="sub">Know more about return and exchange</div>167 </div>168 169 <div class="divider"></div>170 171 <!-- Reviews content -->172 <div class="content">173 <div class="section-title">Customer Reviews</div>174 <div class="stars-small">175 <!-- 3 filled, 1 half, 1 outline to approximate 3.5 -->176 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>177 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>178 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>179 <!-- Half star -->180 <svg viewBox="0 0 24 24">181 <defs>182 <clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath>183 </defs>184 <polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5" fill="#111" clip-path="url(#half)"></polygon>185 <polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5" fill="none" stroke="#111" stroke-width="1.6"></polygon>186 </svg>187 <!-- Outline star -->188 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">189 <polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/>190 </svg>191 </div>192 193 <div class="rating-big">3.5/5</div>194 <div class="based-on">Based on 26 ratings</div>195 196 <div class="img-ph">[IMG: User Review Photo]</div>197 198 <div class="subsection-title">Most Helpful Review</div>199 200 <div class="review-header">201 <div class="avatar">RK</div>202 <div>203 <div class="name-line">204 <div class="name">RITUZ KUMAR</div>205 <div class="verified">206 <svg width="28" height="28" viewBox="0 0 24 24" fill="#64748b">207 <circle cx="12" cy="12" r="10"></circle>208 <path d="M7 12l3 3 7-7" fill="none" stroke="#fff" stroke-width="2"></path>209 </svg>210 <span>Verified buyer</span>211 </div>212 </div>213 </div>214 <div class="date">21/01/2023</div>215 </div>216 217 <div class="stars-row">218 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>219 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>220 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>221 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>222 <svg viewBox="0 0 24 24" fill="#111"><polygon points="12,2 15,9.5 23,9.5 17,14 19.5,22 12,17.5 4.5,22 7,14 1,9.5 9,9.5"/></svg>223 </div>224 225 <div class="review-title">Great product.</div>226 <div class="review-body">Nice</div>227 228 <div class="chips">229 Great Fit <span class="dot"></span>230 Great Quality <span class="dot"></span>231 Packaging <span class="dot"></span>232 Speedy Delivery <span class="dot"></span>233 Value for Money234 </div>235 236 <div class="hashtags">#Perfectly matched with Image #Regular Fit #Value for money</div>237 </div>238 239 <!-- Sticky bottom action -->240 <div class="bottom-bar">241 <div class="add-container">242 <div class="like-slot" aria-label="Wishlist">243 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">244 <path d="M12 21s-7-4.8-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.2-7 10-7 10z"/>245 </svg>246 </div>247 <div class="primary-btn">Add to Bag</div>248 </div>249 </div>250 251 <div class="home-indicator"></div>252</div>253</body>254</html>