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">6<title>Product Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 32px; box-shadow: 0 2px 18px rgba(0,0,0,0.06);12 color: #212121;13 }14 /* Status bar */15 .status-bar { height: 96px; padding: 24px 36px 0 36px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }16 .status-right { display: flex; gap: 18px; align-items: center; }17 /* Top search */18 .top-search { display: flex; align-items: center; padding: 12px 24px; gap: 16px; }19 .icon-btn { width: 56px; height: 56px; display: grid; place-items: center; }20 .search-bar {21 flex: 1; height: 64px; background: #F1F3F4; border-radius: 16px;22 display: flex; align-items: center; padding: 0 20px; gap: 16px; color: #757575; border: 1px solid #E0E0E0;23 }24 .search-placeholder { flex: 1; font-size: 30px; }25 .cart-wrap { margin-left: 8px; position: relative; width: 64px; height: 64px; display: grid; place-items: center; }26 .badge { position: absolute; top: 4px; right: 4px; background: #E53935; color: #fff; font-size: 22px; border-radius: 16px; padding: 2px 8px; }27 /* Reviews list */28 .list { padding: 10px 36px 260px 36px; }29 .review-card { padding: 28px 0; border-bottom: 1px solid #E0E0E0; }30 .stars-row { display: flex; align-items: center; gap: 8px; }31 .star { width: 36px; height: 36px; }32 .title { font-size: 44px; font-weight: 700; margin: 10px 0 8px; }33 .meta { color: #757575; font-size: 30px; }34 .body-text { font-size: 34px; line-height: 1.45; margin: 18px 0 22px; }35 .thumbs { display: flex; gap: 18px; margin: 6px 0 20px; }36 .thumbs > div {37 width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;38 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;39 }40 .author-row { display: flex; align-items: center; gap: 12px; font-size: 32px; }41 .gold { color: #F9A825; font-weight: 600; }42 .action-row { display: flex; align-items: center; gap: 20px; margin-top: 18px; }43 .pill {44 display: flex; align-items: center; gap: 12px; border: 1px solid #DADADA; border-radius: 28px;45 padding: 14px 20px; font-size: 30px; color: #424242; background: #fff;46 }47 .verify-row { display: flex; align-items: center; gap: 12px; color: #616161; font-size: 28px; margin-top: 14px; }48 .spacer { flex: 1; }49 .menu-btn { width: 48px; height: 48px; display: grid; place-items: center; }50 /* Bottom actions */51 .bottom-bar {52 position: absolute; left: 0; right: 0; bottom: 90px;53 background: #ffffff; border-top: 1px solid #E0E0E0; padding: 24px 24px; display: flex; gap: 24px; align-items: center; justify-content: space-between;54 }55 .tile { width: 200px; height: 120px; border: 1px solid #E0E0E0; border-radius: 18px; display: grid; place-items: center; }56 .emi-btn {57 flex: 1; height: 120px; border: 1px solid #E0E0E0; border-radius: 18px; background: #fff; font-size: 38px; font-weight: 600; color: #212121;58 display: grid; place-items: center;59 }60 .buy-btn {61 width: 320px; height: 120px; border-radius: 18px; background: #FFC107; font-size: 40px; font-weight: 700; color: #212121;62 display: grid; place-items: center;63 }64 /* Floating action button */65 .fab {66 position: absolute; right: 28px; bottom: 220px; width: 120px; height: 120px; border-radius: 60px;67 background: #FFD740; border: 6px solid #2E6CF6; box-shadow: 0 12px 20px rgba(0,0,0,0.2);68 display: grid; place-items: center;69 }70 /* Gesture pill */71 .gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; width: 240px; height: 16px; border-radius: 10px; background: #000; opacity: 0.9; }72 /* Small helpers */73 .dot { width: 6px; height: 6px; background: #9E9E9E; border-radius: 3px; display: inline-block; margin: 0 10px; }74</style>75</head>76<body>77<div id="render-target">78 79 <!-- Status bar -->80 <div class="status-bar">81 <div style="font-size:42px;">10:36</div>82 <div class="status-right">83 <!-- simple network icon -->84 <svg width="32" height="32"><path d="M2 26 L30 8" stroke="#616161" stroke-width="3"/><circle cx="30" cy="8" r="3" fill="#616161"/></svg>85 <!-- battery icon -->86 <svg width="40" height="24" viewBox="0 0 40 24">87 <rect x="2" y="4" width="32" height="16" rx="4" ry="4" fill="none" stroke="#616161" stroke-width="2"/>88 <rect x="5" y="7" width="24" height="10" rx="2" fill="#616161"/>89 <rect x="34" y="8" width="4" height="8" rx="2" fill="#616161"/>90 </svg>91 </div>92 </div>93 94 <!-- Search header -->95 <div class="top-search">96 <div class="icon-btn">97 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 18 L9 12 L15 6" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>98 </div>99 <div class="search-bar">100 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#757575" stroke-width="2" fill="none"/><line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#757575" stroke-width="2"/></svg>101 <div class="search-placeholder">Search for products</div>102 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 3 C8 3 6 6 6 9 v3 c0 2-1 3-1 3 h14 s-1-1-1-3 V9 c0-3-2-6-6-6z" fill="#616161"/></svg>103 </div>104 <div class="cart-wrap">105 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 5 h3 l2 10 h9 l2-7 H7" fill="none" stroke="#212121" stroke-width="2" stroke-linejoin="round"/><circle cx="10" cy="19" r="2" fill="#212121"/><circle cx="17" cy="19" r="2" fill="#212121"/></svg>106 <div class="badge">1</div>107 </div>108 </div>109 110 <div class="list">111 112 <!-- First review -->113 <div class="review-card">114 <div style="display:flex; align-items:flex-start;">115 <div style="flex:1;">116 <div class="stars-row">117 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>118 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>119 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>120 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>121 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#CFD8DC"/></svg>122 </div>123 <div class="title">Worth the money</div>124 <div class="meta">Review for: Color Green • Storage 128 GB</div>125 <div class="body-text">126 Best mobile phone<br>127 Camera quality is very nice<br>128 Battery backup is very good<br>129 Sound quality is amazing.130 </div>131 132 <div class="thumbs">133 <div>[IMG: Sunset view]</div>134 <div>[IMG: Selfie]</div>135 <div>[IMG: Temple decor]</div>136 <div>[IMG: Phone back]</div>137 <div>[IMG: Phone case]</div>138 </div>139 140 <div class="author-row">141 <span style="font-weight:600;">Sheetla Pras..., Sultanpur</span>142 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#F9A825"/><path d="M12 6 L14 10 L18 10 L15 12.5 L16 17 L12 14.5 L8 17 L9 12.5 L6 10 L10 10 Z" fill="#fff"/></svg>143 <span class="gold">Gold Reviewer</span>144 </div>145 146 <div class="action-row">147 <div class="pill">148 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M2 14 c0-4 3-7 7-7 h6 v10 h-8 c-3 0-5-1-5-3z M16 7 h4 v10 h-4" fill="none" stroke="#424242" stroke-width="2"/></svg>149 <span>Helpful for 311</span>150 </div>151 <div class="pill">152 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M22 10 c0 4-3 7-7 7 h-6 V7 h8 c3 0 5 1 5 3z M8 17 H4 V7 h4" fill="none" stroke="#424242" stroke-width="2"/></svg>153 <span>47</span>154 </div>155 <div class="spacer"></div>156 <div class="menu-btn">157 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#757575"/><circle cx="12" cy="12" r="2" fill="#757575"/><circle cx="12" cy="19" r="2" fill="#757575"/></svg>158 </div>159 </div>160 161 <div class="verify-row">162 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#000"/><path d="M7 12 l3 3 l7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>163 <span>Verified Purchase</span>164 <span class="dot"></span>165 <span>3 months ago</span>166 </div>167 </div>168 </div>169 </div>170 171 <!-- Second review -->172 <div class="review-card">173 <div class="stars-row">174 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>175 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>176 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>177 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>178 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16 L5.5 20 L7.5 13.5 L2 9 L9 9 Z" fill="#2E7D32"/></svg>179 </div>180 <div class="title">Mind-blowing purchase</div>181 <div class="meta">Review for: Color Blue • Storage 128 GB</div>182 <div class="body-text">High quality camera😍</div>183 184 <div class="thumbs">185 <div>[IMG: Rabbits in garden]</div>186 <div>[IMG: Rabbits close-up]</div>187 <div>[IMG: Festive decoration]</div>188 <div>[IMG: Temple decor]</div>189 </div>190 191 <div class="author-row">192 <span style="font-weight:600;">Ajin V, Balaghat</span>193 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#F9A825"/><path d="M12 6 L14 10 L18 10 L15 12.5 L16 17 L12 14.5 L8 17 L9 12.5 L6 10 L10 10 Z" fill="#fff"/></svg>194 <span class="gold">Gold Reviewer</span>195 </div>196 197 <div class="action-row">198 <div class="pill">199 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M2 14 c0-4 3-7 7-7 h6 v10 h-8 c-3 0-5-1-5-3z M16 7 h4 v10 h-4" fill="none" stroke="#424242" stroke-width="2"/></svg>200 <span>Helpful for 2K</span>201 </div>202 <div class="pill">203 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M22 10 c0 4-3 7-7 7 h-6 V7 h8 c3 0 5 1 5 3z M8 17 H4 V7 h4" fill="none" stroke="#424242" stroke-width="2"/></svg>204 <span>331</span>205 </div>206 <div class="spacer"></div>207 <div class="menu-btn">208 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#757575"/><circle cx="12" cy="12" r="2" fill="#757575"/><circle cx="12" cy="19" r="2" fill="#757575"/></svg>209 </div>210 </div>211 212 <div class="verify-row">213 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#000"/><path d="M7 12 l3 3 l7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>214 <span>Verified Purchase</span>215 <span class="dot"></span>216 <span>2 months ago</span>217 </div>218 </div>219 220 <!-- Section footer text -->221 <div style="padding-top: 24px; font-size: 36px; font-weight: 600; color:#212121;">All 214 reviews</div>222 </div>223 224 <!-- Floating action button -->225 <div class="fab">226 <div style="width: 76px; height: 76px; border-radius: 38px; background:#fff; display:grid; place-items:center;">227 <svg width="48" height="48" viewBox="0 0 24 24">228 <circle cx="12" cy="12" r="10" fill="#FFD740"/>229 <text x="12" y="16" text-anchor="middle" font-size="14" font-weight="700" fill="#2E6CF6">f</text>230 </svg>231 </div>232 </div>233 234 <!-- Bottom action bar -->235 <div class="bottom-bar">236 <div class="tile">237 <svg width="48" height="48" viewBox="0 0 24 24">238 <path d="M3 5 h3 l2 10 h9 l2-7 H7" fill="none" stroke="#212121" stroke-width="2" stroke-linejoin="round"/>239 <line x1="18" y1="6" x2="22" y2="6" stroke="#212121" stroke-width="2"/>240 <line x1="20" y1="4" x2="20" y2="8" stroke="#212121" stroke-width="2"/>241 </svg>242 </div>243 <div class="emi-btn">Pay with EMI</div>244 <div class="buy-btn">Buy now</div>245 </div>246 247 <!-- Gesture pill -->248 <div class="gesture"></div>249 250</div>251</body>252</html>