GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Reviews Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 .status-bar {16 height: 110px;17 padding: 0 40px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 color: #1f1f1f;22 font-size: 40px;23 }24 .status-icons { display: flex; align-items: center; gap: 26px; }25 .dot { width: 12px; height: 12px; background: #9e9e9e; border-radius: 50%; }26 .header {27 height: 120px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 gap: 20px;32 border-bottom: 1px solid #eee;33 }34 .header-title { font-size: 52px; font-weight: 700; }35 .section { padding: 26px 40px; }36 .rates { display: flex; align-items: center; gap: 16px; font-size: 36px; }37 .stars svg { width: 36px; height: 36px; margin-right: 6px; }38 .pill-row { display: flex; gap: 16px; padding: 20px 40px; }39 .pill {40 padding: 16px 28px;41 border-radius: 40px;42 border: 1px solid #ddd;43 font-size: 32px;44 color: #444;45 background: #fff;46 }47 .pill.active {48 background: #ffe6d6;49 border-color: #ff8a50;50 color: #ff6d00;51 font-weight: 600;52 }53 .notice {54 margin: 24px 32px;55 padding: 30px 32px;56 background: #f6f7f9;57 border-radius: 28px;58 border: 1px solid #ebedf0;59 display: flex;60 justify-content: space-between;61 align-items: center;62 font-size: 32px;63 color: #707579;64 }65 .link { color: #2f7dde; cursor: pointer; }66 .sort-row {67 padding: 22px 40px;68 display: flex;69 justify-content: flex-end;70 align-items: center;71 gap: 18px;72 color: #707579;73 font-size: 32px;74 }75 .divider { height: 1px; background: #eee; margin: 20px 0; }76 .review-card { padding: 24px 40px 0 40px; }77 .review-header {78 display: flex; align-items: center; justify-content: space-between;79 }80 .user {81 display: flex; align-items: center; gap: 20px;82 }83 .avatar {84 width: 72px; height: 72px; border-radius: 50%;85 background: #E0E0E0; border: 1px solid #BDBDBD;86 display: flex; align-items: center; justify-content: center;87 color: #757575; font-size: 20px;88 }89 .name-row { display: flex; align-items: center; gap: 14px; }90 .name { font-size: 36px; font-weight: 700; }91 .badge {92 font-size: 26px; font-weight: 700; color: #7a5a00;93 background: #ffecb3; border: 1px solid #f5d56a; border-radius: 10px; padding: 6px 12px;94 }95 .date { color: #8f9399; font-size: 30px; }96 .rating-line { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 32px; color: #707579; }97 .rating-line .stars svg { width: 30px; height: 30px; }98 .review-text { margin-top: 18px; font-size: 34px; line-height: 1.5; color: #333; }99 .more { margin-top: 10px; font-size: 32px; color: #2f7dde; }100 .gallery { margin-top: 24px; padding-right: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }101 .img-placeholder {102 height: 230px; border-radius: 24px;103 background: #E0E0E0; border: 1px solid #BDBDBD;104 display: flex; align-items: center; justify-content: center;105 color: #757575; font-size: 28px; text-align: center;106 }107 .country-row {108 margin: 26px 40px 0 40px; display: flex; align-items: center; gap: 16px; font-size: 32px; color: #555;109 }110 .flag { width: 48px; height: 32px; border: 1px solid #c7c7c7; background: linear-gradient(#fff 50%, #d32f2f 50%); border-radius: 4px; }111 .meta-row {112 margin: 20px 40px; display: flex; align-items: center; gap: 26px; color: #7a7a7a; font-size: 30px;113 }114 .meta-row .icon { width: 36px; height: 36px; }115 .bottom-bar {116 position: absolute; left: 0; right: 0; bottom: 110px;117 height: 150px; border-top: 1px solid #e5e5e5; background: #fff;118 display: grid; grid-template-columns: 170px 1fr 1fr; align-items: center; padding: 0 32px; gap: 20px;119 }120 .bar-icon { display: flex; align-items: center; justify-content: center; }121 .bar-btn {122 height: 92px; background: #f2f2f2; border: 1px solid #e0e0e0; border-radius: 48px;123 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #333; font-weight: 600;124 }125 .home-handle {126 position: absolute; left: 50%; transform: translateX(-50%);127 bottom: 40px; width: 420px; height: 10px; background: #d0d0d0; border-radius: 8px;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status Bar -->135 <div class="status-bar">136 <div>7:34</div>137 <div class="status-icons">138 <div class="dot"></div>139 <div class="dot"></div>140 <div class="dot"></div>141 <svg width="40" height="40" viewBox="0 0 24 24">142 <path d="M2 8h20v8H2z" fill="#777"/>143 <path d="M22 10h2v4h-2z" fill="#777"/>144 </svg>145 </div>146 </div>147 148 <!-- Header -->149 <div class="header">150 <svg width="54" height="54" viewBox="0 0 24 24">151 <path d="M15 18L9 12l6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 <div class="header-title">Reviews</div>154 </div>155 156 <!-- Rates -->157 <div class="section rates">158 <div>Rates:</div>159 <div class="stars">160 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>161 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>162 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>163 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>164 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>165 </div>166 <div style="color:#444;">4.8 / 5</div>167 </div>168 169 <!-- Filter Pills -->170 <div class="pill-row">171 <div class="pill active">All</div>172 <div class="pill">Image 67</div>173 <div class="pill">Positive 230+</div>174 <div class="pill">Neutral 2</div>175 <div class="pill">Negative 6</div>176 </div>177 178 <!-- Translation Notice -->179 <div class="notice">180 <div>A part of the review has been auto-translated</div>181 <div class="link">Show Original</div>182 </div>183 184 <!-- Sort Row -->185 <div class="sort-row">186 <div style="font-weight:600;color:#444;">Default</div>187 <div>|</div>188 <div>Newest</div>189 </div>190 191 <div class="divider"></div>192 193 <!-- Review Card -->194 <div class="review-card">195 <div class="review-header">196 <div class="user">197 <div class="avatar">[IMG]</div>198 <div>199 <div class="name-row">200 <div class="name">BG384311324</div>201 <div class="badge">VIP2</div>202 </div>203 </div>204 </div>205 <div class="date">18/11/2022</div>206 </div>207 208 <div class="rating-line">209 <div class="stars">210 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>211 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>212 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>213 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>214 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5.1-5 7-1z" fill="#ff6d00"/></svg>215 </div>216 <div style="color:#222;">I EU Plug</div>217 </div>218 219 <div class="review-text">220 Projector comes in 5 business days, package was in good condition. Quality of this product I high especially when we take price into consideration.221 200 ANSI lumens is enough for display about 100" screen on white wall, in total darkness (perfect for budget home theatre). In condition with any light only way to have visi...222 </div>223 <div class="more">More</div>224 225 <div class="gallery">226 <div class="img-placeholder">[IMG: Projector in dark room]</div>227 <div class="img-placeholder">[IMG: Movie scene projection]</div>228 <div class="img-placeholder">[IMG: Projector on tripod]</div>229 <div class="img-placeholder">[IMG: Projector side view]</div>230 <div class="img-placeholder">[IMG: Projector front view]</div>231 <div class="img-placeholder">[IMG: 2 More]</div>232 </div>233 234 <div class="country-row">235 <div class="flag"></div>236 <div>Poland</div>237 </div>238 239 <div class="meta-row">240 <svg class="icon" viewBox="0 0 24 24">241 <path d="M4 4h16v10H7l-3 3V4z" fill="#8f9399"/>242 </svg>243 <div>1</div>244 <svg class="icon" viewBox="0 0 24 24">245 <path d="M12 21l-1.5-1.3C6 16 4 13.8 4 11a4 4 0 0 1 7-2.6A4 4 0 0 1 18 11c0 2.8-2 5-6.5 8.7L12 21z" fill="#8f9399"/>246 </svg>247 <div>0</div>248 </div>249 </div>250 251 <!-- Bottom Action Bar -->252 <div class="bottom-bar">253 <div class="bar-icon">254 <svg width="48" height="48" viewBox="0 0 24 24">255 <path d="M7 6h14l-2 9H8L7 6z" fill="#777"/>256 <circle cx="9" cy="19" r="2" fill="#777"/>257 <circle cx="17" cy="19" r="2" fill="#777"/>258 </svg>259 </div>260 <div class="bar-btn">Buy Now</div>261 <div class="bar-btn">Add to Cart</div>262 </div>263 264 <!-- Home handle -->265 <div class="home-handle"></div>266</div>267</body>268</html>