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>Product Reviews UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #212121;14 }15 #render-target {16 position: relative;17 overflow: hidden;18 width: 1080px;19 height: 2400px;20 background: #ffffff;21 }22 23 /* Status bar */24 .status-bar {25 height: 110px;26 padding: 0 40px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #424242;31 font-size: 40px;32 letter-spacing: 1px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .icon {40 display: inline-flex;41 align-items: center;42 justify-content: center;43 }44 .icon svg {45 width: 44px;46 height: 44px;47 fill: #424242;48 }49 .divider {50 height: 2px;51 background: #E0E0E0;52 margin: 24px 60px 0 60px;53 }54 55 /* Reviews list */56 .content {57 padding: 8px 60px 0 60px;58 }59 .review {60 margin-top: 32px;61 }62 .review .row {63 display: flex;64 align-items: center;65 justify-content: space-between;66 }67 .stars {68 display: flex;69 gap: 16px;70 }71 .star svg {72 width: 48px;73 height: 48px;74 }75 .star.filled svg {76 fill: #000000;77 stroke: none;78 }79 .star.empty svg {80 fill: none;81 stroke: #BDBDBD;82 stroke-width: 2;83 }84 .meta {85 font-size: 34px;86 color: #616161;87 }88 .title {89 margin-top: 38px;90 font-size: 52px;91 font-weight: 700;92 color: #111111;93 }94 .body {95 margin-top: 26px;96 font-size: 36px;97 line-height: 1.55;98 color: #616161;99 }100 101 /* Bottom gesture bar */102 .bottom-bar {103 position: absolute;104 left: 0;105 right: 0;106 bottom: 0;107 height: 120px;108 background: #000000;109 display: flex;110 align-items: center;111 justify-content: center;112 }113 .home-pill {114 width: 300px;115 height: 14px;116 border-radius: 14px;117 background: #D6D6D6;118 }119</style>120</head>121<body>122<div id="render-target">123 <div class="status-bar">124 <div>3:38</div>125 <div class="status-icons">126 <div class="icon">127 <!-- Small rounded rectangle (signal) -->128 <svg viewBox="0 0 24 24">129 <rect x="2" y="6" width="5" height="12" rx="1.5"></rect>130 <rect x="9" y="9" width="5" height="9" rx="1.5"></rect>131 <rect x="16" y="12" width="5" height="6" rx="1.5"></rect>132 </svg>133 </div>134 <div class="icon">135 <!-- WiFi icon -->136 <svg viewBox="0 0 24 24">137 <path d="M2 8c5-4 15-4 20 0" stroke="#424242" stroke-width="2" fill="none" />138 <path d="M5 12c4-3 10-3 14 0" stroke="#424242" stroke-width="2" fill="none" />139 <path d="M9 16c2-2 4-2 6 0" stroke="#424242" stroke-width="2" fill="none" />140 <circle cx="12" cy="19" r="1.6" />141 </svg>142 </div>143 <div class="icon">144 <!-- Notifications dot -->145 <svg viewBox="0 0 24 24">146 <circle cx="12" cy="12" r="4"></circle>147 </svg>148 </div>149 <div class="icon">150 <!-- Battery -->151 <svg viewBox="0 0 28 24">152 <rect x="1" y="5" width="22" height="14" rx="2" ry="2" stroke="#424242" stroke-width="2" fill="none"></rect>153 <rect x="3" y="7" width="14" height="10" fill="#424242"></rect>154 <rect x="24" y="9" width="3" height="6" rx="1" fill="#424242"></rect>155 </svg>156 </div>157 </div>158 </div>159 160 <!-- First visible divider -->161 <div class="divider"></div>162 163 <div class="content">164 <!-- Review 1 -->165 <div class="review">166 <div class="row">167 <div class="stars">168 <span class="star filled">169 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg>170 </span>171 <span class="star filled">172 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg>173 </span>174 <span class="star filled">175 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg>176 </span>177 <span class="star filled">178 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg>179 </span>180 <span class="star filled">181 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg>182 </span>183 </div>184 <div class="meta">Ishita · 12/12/2022</div>185 </div>186 <div class="title">Very useful</div>187 <div class="body">Useful and affordable. Decent built quality.</div>188 </div>189 190 <div class="divider"></div>191 192 <!-- Review 2 -->193 <div class="review">194 <div class="row">195 <div class="stars">196 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>197 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>198 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>199 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>200 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>201 </div>202 <div class="meta">BERNARD · 11/22/2022</div>203 </div>204 <div class="title">Elloven</div>205 <div class="body">206 I Love it. Small but strong, all metallic combination lock. Someone broke my other lock (plastic housing) and stole my carbon / kevlar motorcycle gloves! So, thanks IKEA for the Elloven! <3207 </div>208 </div>209 210 <div class="divider"></div>211 212 <!-- Review 3 -->213 <div class="review">214 <div class="row">215 <div class="stars">216 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>217 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>218 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>219 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>220 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>221 </div>222 <div class="meta">Manoj · 11/11/2022</div>223 </div>224 <div class="title">Valuable Lock</div>225 <div class="body">-Good quality product</div>226 </div>227 228 <div class="divider"></div>229 230 <!-- Review 4 -->231 <div class="review">232 <div class="row">233 <div class="stars">234 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>235 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>236 <span class="star empty"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>237 <span class="star empty"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>238 <span class="star empty"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>239 </div>240 <div class="meta">Aditya · 09/28/2022</div>241 </div>242 <div class="title">Small size</div>243 <div class="body">Small size</div>244 </div>245 246 <div class="divider"></div>247 248 <!-- Review 5 -->249 <div class="review">250 <div class="row">251 <div class="stars">252 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>253 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>254 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>255 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>256 <span class="star filled"><svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.6 7.1.6-5.3 4.5 1.7 7.1L12 17.8l-6.4 3 1.7-7.1-5.3-4.5 7.1-.6L12 2z"/></svg></span>257 </div>258 <div class="meta">Ravi · 09/21/2022</div>259 </div>260 <div class="title">Very good</div>261 <div class="body">Super design and very comfortable in locking</div>262 </div>263 </div>264 265 <div class="bottom-bar">266 <div class="home-pill"></div>267 </div>268</div>269</body>270</html>