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; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 20px 36px;21 display: flex;22 justify-content: space-between;23 align-items: center;24 color: #333;25 font-size: 38px;26 }27 .sb-left { display: flex; align-items: center; gap: 24px; }28 .time { font-weight: 700; }29 .mini-icon {30 width: 36px; height: 36px;31 border: 1px solid #bdbdbd; border-radius: 8px; background: #e0e0e0;32 }33 .sb-right { display: flex; align-items: center; gap: 24px; }34 .wifi svg, .battery svg { display: block; }35 .wifi { width: 64px; height: 40px; }36 .battery { width: 80px; height: 40px; }37 38 /* Close/X icon */39 .close-x {40 position: absolute;41 right: 40px;42 top: 120px;43 font-size: 56px;44 color: #000;45 }46 47 /* Header stars and count */48 .header {49 text-align: center;50 padding-top: 80px;51 }52 .count {53 font-size: 44px;54 font-weight: 700;55 letter-spacing: 1px;56 margin: 0;57 }58 .stars.big {59 margin-top: 24px;60 letter-spacing: 16px;61 font-size: 84px;62 }63 .subtitle {64 margin: 64px 48px 24px;65 font-size: 46px;66 font-weight: 700;67 }68 69 /* Write a review button */70 .cta {71 margin: 0 48px;72 height: 140px;73 border-radius: 8px;74 background: #000;75 color: #fff;76 display: flex; align-items: center; justify-content: center;77 font-size: 40px;78 letter-spacing: 6px;79 font-weight: 700;80 }81 82 /* Review blocks */83 .content { padding: 24px 48px 40px; }84 .review {85 margin-top: 60px;86 border-top: 2px solid #eee;87 padding-top: 40px;88 }89 .review:first-of-type { border-top: none; }90 .review-header {91 display: flex;92 justify-content: space-between;93 align-items: center;94 }95 .stars.small { font-size: 64px; letter-spacing: 12px; }96 .date { font-size: 36px; color: #666; }97 .title {98 margin-top: 24px;99 font-size: 44px;100 font-weight: 800;101 letter-spacing: 0.5px;102 text-transform: none;103 }104 .body {105 margin-top: 18px;106 font-size: 36px;107 color: #4a4a4a;108 line-height: 1.45;109 }110 .recommend {111 margin-top: 26px;112 display: flex; align-items: center; gap: 22px;113 font-size: 36px; font-weight: 700;114 }115 .check {116 width: 48px; height: 48px; border-radius: 50%;117 background: #77b16c; display: flex; align-items: center; justify-content: center;118 color: #fff; font-size: 34px; font-weight: 900;119 }120 .userline {121 margin-top: 22px;122 font-size: 34px;123 color: #666;124 }125 .divider {126 margin-top: 36px;127 height: 2px;128 background: #eee;129 }130 131 /* Bottom handle bar */132 .handle {133 position: absolute;134 bottom: 20px;135 left: 50%;136 transform: translateX(-50%);137 width: 520px;138 height: 16px;139 background: #dcdcdc;140 border-radius: 10px;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div class="sb-left">150 <span class="time">5:14</span>151 <div class="mini-icon" title="Lock"></div>152 <div class="mini-icon" title="Square"></div>153 <div class="mini-icon" title="Ghost"></div>154 <div class="mini-icon" title="Dot"></div>155 </div>156 <div class="sb-right">157 <div class="wifi">158 <svg viewBox="0 0 64 40">159 <path d="M32 30c3 0 6 3 6 6H26c0-3 3-6 6-6z" fill="#333"/>160 <path d="M12 22c11-10 29-10 40 0" stroke="#333" stroke-width="4" fill="none"/>161 <path d="M20 26c7-6 17-6 24 0" stroke="#333" stroke-width="4" fill="none"/>162 </svg>163 </div>164 <div class="battery">165 <svg viewBox="0 0 80 40">166 <rect x="2" y="6" width="70" height="28" rx="6" ry="6" fill="none" stroke="#333" stroke-width="4"/>167 <rect x="6" y="10" width="52" height="20" rx="4" fill="#333"/>168 <rect x="74" y="12" width="6" height="16" rx="2" fill="#333"/>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Close icon -->175 <div class="close-x">✕</div>176 177 <!-- Header -->178 <div class="header">179 <h2 class="count">57 REVIEWS</h2>180 <div class="stars big">★ ★ ★ ★ ★</div>181 </div>182 183 <div class="subtitle">Tell others what you thought</div>184 <div class="cta">WRITE A REVIEW</div>185 186 <!-- Reviews Content -->187 <div class="content">188 189 <!-- Review 1 -->190 <div class="review">191 <div class="review-header">192 <div class="stars small">★ ★ ★ ★ ★</div>193 <div class="date">SEP 22, 2023</div>194 </div>195 <div class="title">LIKE RUNNING ON A CLOUD</div>196 <div class="body">197 I recently started running and was experiencing a lot of soreness after until I started running in these.198 You can really feel the support and forward motion, and my body feels great (as opposed to very sore!)199 after training now. Definitely buy a size down though. I'm usually a women's 7.5, and an Adidas 6.5 fits me perfectly.200 </div>201 <div class="recommend">202 <div class="check">✓</div>203 <div>RECOMMENDS THIS PRODUCT</div>204 </div>205 <div class="userline">ROLLERSKATE76 · VERIFIED PURCHASER</div>206 <div class="divider"></div>207 </div>208 209 <!-- Review 2 -->210 <div class="review">211 <div class="review-header">212 <div class="stars small">★ ★ ★ ★ ★</div>213 <div class="date">SEP 21, 2023</div>214 </div>215 <div class="title">MORE COMFORTABLE THAN MEETS THE EYE.</div>216 <div class="body">217 I'm very happy with my purchase. I've had ankle surgery, and these are so comfortable. Wish they had more colors!218 </div>219 <div class="recommend">220 <div class="check">✓</div>221 <div>RECOMMENDS THIS PRODUCT</div>222 </div>223 <div class="userline">SHOPPINGGURU · VERIFIED PURCHASER</div>224 </div>225 226 </div>227 228 <!-- Bottom handle bar -->229 <div class="handle"></div>230</div>231</body>232</html>