GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Reviews UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 /* Status bar */16 .status-bar {17 height: 80px;18 padding: 0 32px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 font-size: 28px;23 color: #333;24 }25 .status-icons { display: flex; gap: 18px; align-items: center; }26 .status-dot {27 width: 22px; height: 22px; border-radius: 50%; background: #4A4A4A;28 }29 .status-battery {30 width: 36px; height: 22px; border: 2px solid #4A4A4A; border-radius: 4px; position: relative;31 }32 .status-battery::after {33 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #4A4A4A; border-radius: 2px;34 }35 .status-battery .level { width: 24px; height: 16px; background: #4A4A4A; margin: 2px; }36 37 /* Header */38 .header {39 height: 110px;40 display: flex;41 align-items: center;42 padding: 0 24px;43 border-bottom: 1px solid #eee;44 }45 .back {46 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;47 }48 .header-title {49 font-size: 46px; font-weight: 600; margin-left: 8px;50 }51 52 /* Tabs */53 .tabs {54 display: flex;55 gap: 40px;56 padding: 24px;57 border-bottom: 1px solid #eee;58 }59 .tab {60 font-size: 34px;61 color: #666;62 padding-bottom: 14px;63 }64 .tab.active {65 color: #111;66 font-weight: 600;67 border-bottom: 4px solid #111;68 }69 70 /* Rating row */71 .rating-row {72 display: flex;73 align-items: center;74 gap: 20px;75 padding: 30px 24px 10px 24px;76 }77 .rating-score {78 font-size: 64px; font-weight: 700;79 }80 .stars { display: flex; gap: 10px; }81 .filter-row {82 display: flex;83 gap: 24px;84 padding: 16px 24px 8px 24px;85 }86 .chip {87 padding: 16px 28px;88 border: 2px solid #ddd;89 border-radius: 40px;90 font-size: 30px;91 color: #333;92 background: #f9f9f9;93 }94 .chip.selected {95 border-color: #222;96 background: #fff;97 font-weight: 600;98 }99 100 /* Review cards */101 .review {102 padding: 26px;103 border-bottom: 1px solid #eee;104 }105 .user-row {106 display: flex;107 align-items: center;108 gap: 22px;109 }110 .avatar {111 width: 96px; height: 96px; border-radius: 50%;112 background: #4C6EF5; color: #fff; display: flex; align-items: center; justify-content: center;113 font-size: 42px; font-weight: 700;114 }115 .user-info { display: flex; flex-direction: column; }116 .name-line { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 600; }117 .flag {118 width: 72px; height: 44px; background: #E0E0E0; border: 1px solid #BDBDBD;119 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;120 }121 .date { font-size: 28px; color: #666; margin-top: 4px; }122 .review-text {123 font-size: 32px; color: #444; margin: 20px 0;124 }125 .inline-stars { display: flex; gap: 8px; margin: 8px 0; }126 .quote {127 border-left: 5px solid #e5e5e5; padding-left: 20px; margin-top: 14px;128 font-size: 34px; color: #222;129 }130 .helpful {131 display: flex; align-items: center; gap: 14px; color: #666; font-size: 30px; margin-top: 18px;132 }133 134 /* Bottom action bar */135 .bottom-actions {136 position: absolute;137 bottom: 0;138 left: 0; right: 0;139 padding: 18px 24px 26px 24px;140 background: #fff;141 border-top: 1px solid #eee;142 display: flex;143 gap: 26px;144 }145 .action-btn {146 flex: 1;147 height: 120px;148 border-radius: 70px;149 font-size: 36px;150 font-weight: 700;151 display: flex; align-items: center; justify-content: center;152 }153 .btn-outline {154 border: 2px solid #222; color: #222; background: #fff;155 }156 .btn-orange {157 background: #F36A20; color: #fff; border: none;158 }159 160 /* Floating help icon */161 .floating-help {162 position: absolute;163 right: 30px;164 bottom: 200px;165 width: 120px; height: 120px; border-radius: 60px;166 background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0,0,0,0.12);167 display: flex; align-items: center; justify-content: center; gap: 10px;168 }169 .mini-icon {170 width: 46px; height: 46px; background: #E0E0E0; border: 1px solid #BDBDBD;171 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 8px;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="status-bar">180 <div>8:53</div>181 <div class="status-icons">182 <div class="status-dot"></div>183 <div class="status-dot" style="background:#777;"></div>184 <div class="status-dot" style="background:#999;"></div>185 <div class="status-battery"><div class="level"></div></div>186 </div>187 </div>188 189 <!-- Header -->190 <div class="header">191 <div class="back">192 <svg width="38" height="38" viewBox="0 0 24 24">193 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </div>196 <div class="header-title">Reviews</div>197 </div>198 199 <!-- Tabs -->200 <div class="tabs">201 <div class="tab active">Product reviews</div>202 <div class="tab">Store reviews</div>203 </div>204 205 <!-- Rating Row -->206 <div class="rating-row">207 <div class="rating-score">5.0</div>208 <div class="stars">209 <!-- 5 stars -->210 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>211 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>212 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>213 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>214 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>215 </div>216 </div>217 218 <!-- Filters -->219 <div class="filter-row">220 <div class="chip selected">All</div>221 <div class="chip">5 stars (2)</div>222 </div>223 224 <!-- Review 1 -->225 <div class="review">226 <div class="user-row">227 <div class="avatar">n</div>228 <div class="user-info">229 <div class="name-line">230 <div>n***e</div>231 <div class="flag">[IMG: US Flag]</div>232 </div>233 <div class="date">Dec 22, 2023</div>234 </div>235 </div>236 <div class="review-text">237 The phone was more then I expected. Great purchase! I will purchase again.238 </div>239 <div class="inline-stars">240 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>241 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>242 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>243 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>244 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>245 </div>246 <div class="quote">247 The phone was more then I expected. Great purchase! I will purchase again.248 </div>249 <div class="helpful">250 <svg width="34" height="34" viewBox="0 0 24 24">251 <path d="M2 10h6v10H2zM10 10h8c1.1 0 2 .9 2 2v1c0 1.1-.9 2-2 2h-5l1 4-3 1V10z" fill="#7a7a7a"/>252 </svg>253 <div>Helpful (0)</div>254 </div>255 </div>256 257 <!-- Review 2 -->258 <div class="review">259 <div class="user-row">260 <div class="avatar" style="background:#5A76FF;">J</div>261 <div class="user-info">262 <div class="name-line">263 <div>J***a</div>264 <div class="flag" style="width: 78px;">[IMG: AU Flag]</div>265 </div>266 <div class="date">Nov 24, 2023</div>267 </div>268 </div>269 <div class="review-text">perfect</div>270 <div class="inline-stars">271 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>272 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>273 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>274 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>275 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#F58B2A" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>276 </div>277 <div class="quote">perfect</div>278 <div class="helpful">279 <svg width="34" height="34" viewBox="0 0 24 24">280 <path d="M2 10h6v10H2zM10 10h8c1.1 0 2 .9 2 2v1c0 1.1-.9 2-2 2h-5l1 4-3 1V10z" fill="#7a7a7a"/>281 </svg>282 <div>Helpful (1)</div>283 </div>284 </div>285 286 <!-- Floating help icon -->287 <div class="floating-help">288 <div class="mini-icon">?</div>289 <div class="mini-icon">✎</div>290 </div>291 292 <!-- Bottom action buttons -->293 <div class="bottom-actions">294 <div class="action-btn btn-outline">Chat now</div>295 <div class="action-btn btn-orange">Send inquiry</div>296 <div class="action-btn btn-orange">Start order</div>297 </div>298 299</div>300</body>301</html>