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>Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; color: #222;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 /* Status bar */15 .status-bar {16 height: 110px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;17 color: #333; font-weight: 600; font-size: 40px;18 }19 .status-icons { display: flex; align-items: center; gap: 26px; }20 .icon-wifi, .icon-battery { width: 44px; height: 44px; }21 /* Header */22 .header {23 height: 140px; display: flex; align-items: center; gap: 25px; padding: 0 40px;24 border-bottom: 1px solid #eee;25 }26 .back-icon { width: 48px; height: 48px; }27 .title { font-size: 60px; font-weight: 600; }28 /* Tabs */29 .tabs { display: flex; gap: 80px; padding: 30px 40px 0; font-size: 42px; }30 .tab { color: #777; }31 .tab.active { color: #222; font-weight: 600; position: relative; }32 .tab.active::after {33 content: ""; position: absolute; left: 0; bottom: -26px; width: 240px; height: 8px; background: #333; border-radius: 4px;34 }35 .tabbar-divider { height: 1px; background: #eee; margin: 26px 0 0; }36 /* Score + bars */37 .score-area { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 40px; padding: 40px; align-items: start; }38 .score-left { padding-top: 10px; }39 .score-value { font-size: 120px; font-weight: 700; }40 .score-sub { display: inline-block; margin-left: 18px; font-size: 46px; color: #777; }41 .score-badge { margin-left: 10px; font-size: 48px; color: #2b8d2b; font-weight: 600; }42 .metric { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 36px; }43 .metric label { font-size: 44px; color: #444; }44 .metric .barwrap { grid-column: 1 / span 2; height: 18px; background: #f1f1f1; border-radius: 10px; margin: 20px 0; position: relative; }45 .metric .bar { height: 100%; background: #ff6a00; border-radius: 10px; }46 .metric .value { font-size: 42px; color: #666; }47 /* Chips */48 .chips { padding: 10px 40px 0; display: flex; flex-wrap: wrap; gap: 24px; }49 .chip {50 padding: 22px 40px; border: 2px solid #ddd; border-radius: 50px; font-size: 40px; color: #555; background: #fff;51 }52 .chip.primary {53 border: 4px solid #222; color: #222; font-weight: 600;54 }55 /* Reviews list */56 .reviews { padding: 30px 40px 260px; }57 .review-item { margin-top: 40px; }58 .review-header { display: grid; grid-template-columns: 100px 1fr auto; column-gap: 28px; align-items: center; }59 .avatar {60 width: 100px; height: 100px; border-radius: 50%; background: #4a6cf3; color: #fff;61 display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: 700;62 }63 .reviewer { font-size: 40px; font-weight: 600; color: #444; }64 .date { font-size: 34px; color: #888; margin-top: 6px; }65 .badge { display: inline-flex; align-items: center; gap: 12px; margin-left: 14px; font-size: 34px; color: #1a4ed8; border: 1px solid #cdd7ff; background: #eaf0ff; padding: 6px 16px; border-radius: 20px; }66 .edit-qt {67 width: 92px; height: 92px; border-radius: 50%; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center;68 color: #888;69 }70 .stars { display: flex; gap: 8px; margin: 26px 0; }71 .star { width: 38px; height: 38px; }72 .review-text { font-size: 42px; line-height: 1.45; color: #333; margin-bottom: 26px; }73 .product-ref {74 display: grid; grid-template-columns: 140px 1fr; gap: 26px; align-items: center;75 background: #f6f6f6; border-radius: 24px; padding: 24px; border: 1px solid #e5e5e5;76 }77 .img-ph {78 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;79 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; border-radius: 18px;80 }81 .prod-title { font-size: 40px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }82 .divider { height: 1px; background: #eee; margin: 36px 0; }83 /* Bottom action bar */84 .action-bar {85 position: absolute; left: 0; right: 0; bottom: 74px; height: 220px; background: #fff;86 border-top: 1px solid #eee; display: flex; align-items: center; justify-content: center; gap: 36px;87 padding: 0 40px;88 }89 .btn {90 height: 120px; border-radius: 60px; padding: 0 60px; font-size: 44px; font-weight: 700; display: flex; align-items: center; justify-content: center;91 }92 .btn-outline { border: 3px solid #222; color: #222; background: #fff; }93 .btn-primary { background: #ff6a00; color: #fff; border: none; }94 .home-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #000; opacity: 0.2; border-radius: 8px; }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status bar -->101 <div class="status-bar">102 <div>3:52</div>103 <div class="status-icons">104 <svg class="icon-wifi" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/><path d="M6 12c3-3 9-3 12 0" stroke="#666" stroke-width="2" fill="none"/><circle cx="12" cy="16" r="2" fill="#666"/></svg>105 <svg class="icon-battery" viewBox="0 0 28 24">106 <rect x="1" y="5" width="22" height="14" rx="2" stroke="#666" fill="none" stroke-width="2"></rect>107 <rect x="3" y="7" width="15" height="10" rx="1" fill="#666"></rect>108 <rect x="24" y="9" width="3" height="6" rx="1" fill="#666"></rect>109 </svg>110 </div>111 </div>112 113 <!-- Header -->114 <div class="header">115 <svg class="back-icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>116 <div class="title">Reviews</div>117 </div>118 119 <!-- Tabs -->120 <div class="tabs">121 <div class="tab">Product reviews</div>122 <div class="tab active">Store reviews</div>123 </div>124 <div class="tabbar-divider"></div>125 126 <!-- Score + metrics -->127 <div class="score-area">128 <div class="score-left">129 <span class="score-value">4.3</span>130 <span class="score-sub">/5</span>131 <span class="score-badge">Satisfied</span>132 <div style="margin-top: 30px; color:#666; font-size:38px;"></div>133 </div>134 <div class="score-right">135 <div class="metric">136 <label>Supplier service</label>137 <div class="value">4.0</div>138 <div class="barwrap"><div class="bar" style="width:78%;"></div></div>139 </div>140 <div class="metric">141 <label>On-time shipment</label>142 <div class="value">4.1</div>143 <div class="barwrap"><div class="bar" style="width:82%;"></div></div>144 </div>145 <div class="metric">146 <label>Product quality</label>147 <div class="value">4.9</div>148 <div class="barwrap"><div class="bar" style="width:98%;"></div></div>149 </div>150 </div>151 </div>152 153 <!-- Chips -->154 <div class="chips">155 <div class="chip primary">All</div>156 <div class="chip">With photos/videos (25)</div>157 <div class="chip">5 stars (2992)</div>158 <div class="chip">4 stars (38)</div>159 <div class="chip">3 stars (18)</div>160 <div class="chip">2 stars (7)</div>161 <div class="chip">1 star (13)</div>162 </div>163 164 <!-- Reviews List -->165 <div class="reviews">166 167 <!-- Review item 1 -->168 <div class="review-item">169 <div class="review-header">170 <div class="avatar">J</div>171 <div>172 <div class="reviewer">J***l</div>173 <div class="date">Nov 16, 2023</div>174 </div>175 <div></div>176 </div>177 178 <div class="stars">179 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>180 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>181 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>182 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>183 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>184 </div>185 186 <div class="review-text">187 Arrived and was exactly what I ordered. I ordered one size up and glad I did.188 </div>189 190 <div class="product-ref">191 <div class="img-ph">[IMG: Black boot]</div>192 <div class="prod-title">M99 Men's high top alpine boots Padded ...</div>193 </div>194 </div>195 196 <div class="divider"></div>197 198 <!-- Review item 2 -->199 <div class="review-item">200 <div class="review-header">201 <div class="avatar" style="background:#5b8af4;">C</div>202 <div>203 <div class="reviewer">C***a <span class="badge">204 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l9 5-9 15-9-15 9-5z" fill="#3b57f5"/></svg> Platinum205 </span></div>206 <div class="date">Sep 18, 2023</div>207 </div>208 <div class="edit-qt">209 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M4 20h16" stroke="#aaa" stroke-width="2"/><path d="M14 4l6 6-8 8H6V12l8-8z" stroke="#aaa" stroke-width="2" fill="none"/></svg>210 </div>211 </div>212 213 <div class="stars" style="opacity:.6">214 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>215 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>216 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>217 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>218 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6a00" d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>219 </div>220 </div>221 222 </div>223 224 <!-- Bottom action buttons -->225 <div class="action-bar">226 <div class="btn btn-outline">Chat now</div>227 <div class="btn btn-primary" style="min-width:320px;">Send inquiry</div>228 <div class="btn btn-primary" style="min-width:320px;">Start order</div>229 </div>230 231 <div class="home-indicator"></div>232</div>233</body>234</html>