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 Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 .screen {20 position: absolute;21 inset: 0;22 overflow-y: auto;23 padding-bottom: 40px;24 box-sizing: border-box;25 }26 27 /* Top summary */28 .top-summary {29 padding: 80px 56px 40px;30 position: relative;31 text-align: center;32 }33 .close-btn {34 position: absolute;35 right: 40px;36 top: 56px;37 width: 56px;38 height: 56px;39 cursor: default;40 }41 .close-btn:before,42 .close-btn:after {43 content: "";44 position: absolute;45 left: 8px;46 right: 8px;47 top: 26px;48 height: 2px;49 background: #111;50 transform-origin: center;51 }52 .close-btn:before { transform: rotate(45deg); }53 .close-btn:after { transform: rotate(-45deg); }54 55 .count {56 font-weight: 800;57 font-size: 42px;58 letter-spacing: 1px;59 margin-bottom: 18px;60 }61 .stars {62 display: inline-flex;63 gap: 22px;64 align-items: center;65 justify-content: center;66 }67 .star {68 width: 80px;69 height: 80px;70 fill: #111;71 }72 73 .divider {74 height: 2px;75 background: #eee;76 margin: 40px 0;77 }78 79 /* CTA write review */80 .prompt {81 text-align: center;82 color: #2b2b2b;83 font-weight: 700;84 font-size: 44px;85 margin: 18px 0 32px;86 }87 .cta {88 margin: 0 48px 48px;89 background: #000;90 color: #fff;91 text-transform: uppercase;92 height: 120px;93 border-radius: 2px;94 display: flex;95 align-items: center;96 justify-content: center;97 letter-spacing: 8px;98 font-weight: 800;99 font-size: 36px;100 }101 102 /* Reviews list */103 .reviews { padding: 0 40px 20px; }104 .review {105 padding: 28px 16px 36px;106 }107 .review + .review { border-top: 2px solid #efefef; }108 .row {109 display: flex;110 align-items: center;111 justify-content: space-between;112 }113 .date {114 font-size: 34px;115 color: #6f6f6f;116 letter-spacing: 0.5px;117 }118 .title {119 margin: 26px 0 12px;120 font-size: 46px;121 font-weight: 800;122 text-transform: uppercase;123 letter-spacing: 1px;124 }125 .body {126 font-size: 36px;127 line-height: 1.5;128 color: #8a8a8a;129 margin-bottom: 22px;130 }131 132 .recommend {133 display: inline-flex;134 align-items: center;135 gap: 16px;136 padding: 14px 0 8px;137 font-weight: 800;138 text-transform: uppercase;139 color: #1a1a1a;140 letter-spacing: 1px;141 font-size: 34px;142 }143 .check {144 width: 40px;145 height: 40px;146 }147 148 .meta {149 display: flex;150 align-items: center;151 gap: 16px;152 padding-top: 22px;153 margin-top: 14px;154 border-top: 2px solid #efefef;155 font-size: 34px;156 letter-spacing: 0.5px;157 }158 .author {159 font-weight: 800;160 }161 .dot { color: #888; }162 .verified {163 color: #6f6f6f;164 text-transform: uppercase;165 }166</style>167</head>168<body>169<div id="render-target">170 <div class="screen">171 <!-- Top rating summary -->172 <div class="top-summary">173 <div class="close-btn" aria-hidden="true"></div>174 <div class="count">616 REVIEWS</div>175 <div class="stars" aria-label="Average rating">176 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>177 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>178 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>179 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>180 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>181 </div>182 </div>183 184 <div class="divider"></div>185 186 <!-- Prompt + CTA -->187 <div class="prompt">Tell others what you thought</div>188 <div class="cta">Write a review</div>189 190 <!-- Reviews -->191 <div class="reviews">192 <!-- Review 1 -->193 <div class="review">194 <div class="row">195 <div class="stars">196 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>197 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>198 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>199 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>200 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>201 </div>202 <div class="date">Nov 9, 2023</div>203 </div>204 <div class="title">Stylish and comfortable</div>205 <div class="body">Great everyday shoe. They look good with everything</div>206 207 <div class="recommend">208 <svg class="check" viewBox="0 0 24 24" aria-hidden="true">209 <circle cx="12" cy="12" r="12" fill="#39C16C"></circle>210 <path d="M7 12.5l3 3 7-7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 Recommends this product213 </div>214 215 <div class="meta">216 <span class="author">GHYY</span>217 <span class="dot">·</span>218 <span class="verified">Verified Purchaser</span>219 </div>220 </div>221 222 <!-- Review 2 -->223 <div class="review">224 <div class="row">225 <div class="stars">226 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>227 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>228 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>229 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>230 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>231 </div>232 <div class="date">Nov 9, 2023</div>233 </div>234 <div class="title">Such a fun pair!</div>235 <div class="body">The perfect fit. I went a size down. So comfortable.</div>236 237 <div class="recommend">238 <svg class="check" viewBox="0 0 24 24" aria-hidden="true">239 <circle cx="12" cy="12" r="12" fill="#39C16C"></circle>240 <path d="M7 12.5l3 3 7-7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 Recommends this product243 </div>244 245 <div class="meta">246 <span class="author">DHAGGETT</span>247 <span class="dot">·</span>248 <span class="verified">Verified Purchaser</span>249 </div>250 </div>251 252 <!-- Review 3 -->253 <div class="review">254 <div class="row">255 <div class="stars">256 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>257 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>258 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>259 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>260 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3 6.8 20l1.2-5.1L3 10l5.4-.5L12 4l3.6 5.5L21 10l-5 4.9L17.2 20z"/></svg>261 </div>262 <div class="date">Nov 9, 2023</div>263 </div>264 <div class="title">Would like to buy all the colors</div>265 <div class="body">These shoes are fashionable and comfortable. I love them</div>266 </div>267 </div>268 </div>269</div>270</body>271</html>