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;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: #212121;17 }18 19 /* Top status bar */20 .status-bar {21 height: 88px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #424242;27 font-size: 34px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .status-icons svg { width: 42px; height: 42px; fill: #616161; }35 36 /* App bar */37 .app-bar {38 height: 132px;39 display: flex;40 align-items: center;41 gap: 24px;42 padding: 0 24px 0 16px;43 border-bottom: 1px solid #EEEEEE;44 }45 .back-btn {46 width: 96px;47 height: 96px;48 display: flex;49 align-items: center;50 justify-content: center;51 }52 .app-title {53 font-size: 52px;54 font-weight: 600;55 color: #212121;56 }57 58 /* Content area */59 .content {60 position: absolute;61 left: 0;62 right: 0;63 top: 220px;64 bottom: 230px; /* leave room for bottom bar */65 overflow: hidden;66 padding: 12px 32px 0 32px;67 }68 69 .review {70 padding: 24px 0 20px 0;71 border-left: 4px solid #EEEEEE;72 margin-left: 18px;73 margin-bottom: 44px;74 }75 76 .review-header {77 display: flex;78 align-items: center;79 gap: 24px;80 padding-left: 18px;81 }82 .avatar {83 width: 92px;84 height: 92px;85 border-radius: 50%;86 background: #5C6BC0;87 color: #FFFFFF;88 font-size: 48px;89 font-weight: 600;90 display: flex;91 align-items: center;92 justify-content: center;93 }94 .name-date {95 display: flex;96 flex-direction: column;97 gap: 8px;98 }99 .name-line {100 display: flex;101 align-items: center;102 gap: 16px;103 font-size: 36px;104 color: #424242;105 }106 .badge {107 display: inline-flex;108 align-items: center;109 gap: 8px;110 background: #E3F2FD;111 color: #1976D2;112 border-radius: 20px;113 padding: 8px 16px;114 font-size: 30px;115 font-weight: 600;116 }117 .date {118 font-size: 30px;119 color: #9E9E9E;120 }121 122 .stars {123 display: flex;124 gap: 6px;125 margin: 18px 0 10px 18px;126 }127 .stars svg { width: 40px; height: 40px; fill: #FF6F00; }128 129 .review-text {130 padding: 0 24px 0 18px;131 font-size: 36px;132 line-height: 1.4;133 color: #424242;134 }135 136 .product-pill {137 margin: 24px 24px 0 18px;138 background: #F3F3F3;139 border-radius: 24px;140 display: flex;141 align-items: center;142 padding: 18px;143 gap: 20px;144 }145 .img-placeholder {146 width: 140px;147 height: 140px;148 background: #E0E0E0;149 border: 1px solid #BDBDBD;150 border-radius: 16px;151 display: flex;152 justify-content: center;153 align-items: center;154 color: #757575;155 font-size: 28px;156 text-align: center;157 padding: 8px;158 }159 .product-title {160 font-size: 36px;161 color: #616161;162 white-space: nowrap;163 overflow: hidden;164 text-overflow: ellipsis;165 }166 167 /* Floating helper */168 .floating-helper {169 position: absolute;170 right: 40px;171 bottom: 350px;172 width: 116px;173 height: 116px;174 border-radius: 58px;175 background: #FFFFFF;176 box-shadow: 0 6px 16px rgba(0,0,0,0.12);177 border: 1px solid #EEEEEE;178 display: flex;179 align-items: center;180 justify-content: center;181 }182 .helper-inner {183 position: relative;184 width: 76px;185 height: 76px;186 border-radius: 50%;187 background: #F5F5F5;188 display: flex;189 align-items: center;190 justify-content: center;191 }192 .helper-inner svg { width: 44px; height: 44px; fill: #616161; }193 .pencil {194 position: absolute;195 right: -6px;196 bottom: -6px;197 width: 36px;198 height: 36px;199 border-radius: 18px;200 background: #FFFFFF;201 border: 1px solid #E0E0E0;202 display: flex;203 align-items: center;204 justify-content: center;205 }206 207 /* Bottom actions */208 .bottom-bar {209 position: absolute;210 left: 0;211 right: 0;212 bottom: 92px;213 height: 180px;214 background: #FFFFFF;215 border-top: 1px solid #EEEEEE;216 display: flex;217 align-items: center;218 justify-content: space-evenly;219 padding: 0 24px;220 }221 .btn {222 height: 110px;223 border-radius: 56px;224 padding: 0 44px;225 font-size: 40px;226 font-weight: 700;227 display: flex;228 align-items: center;229 justify-content: center;230 letter-spacing: 0.2px;231 }232 .btn-outline {233 background: #FFFFFF;234 border: 2px solid #BDBDBD;235 color: #424242;236 }237 .btn-primary {238 background: #FF7F23;239 color: #FFFFFF;240 border: none;241 box-shadow: 0 6px 10px rgba(255,127,35,0.25);242 }243 244 /* Gesture bar */245 .gesture-bar {246 position: absolute;247 left: 50%;248 transform: translateX(-50%);249 bottom: 24px;250 width: 300px;251 height: 18px;252 background: #000000;253 border-radius: 9px;254 opacity: 0.85;255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status bar -->262 <div class="status-bar">263 <div>3:53</div>264 <div class="status-icons">265 <!-- Signal -->266 <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>267 <!-- Wi-Fi -->268 <svg viewBox="0 0 24 24"><path d="M12 20l4-4H8l4 4zm-7-9a16 16 0 0 1 14 0l1.4-1.4a18 18 0 0 0-16.8 0L5 11zM3.5 8.5A20 20 0 0 1 20.5 8.5L22 7A22 22 0 0 0 2 7l1.5 1.5z"/></svg>269 <!-- Battery -->270 <svg viewBox="0 0 24 24"><path d="M16 5h2v2h2v10h-2v2h-2V5zM2 7h12v10H2V7z"/></svg>271 </div>272 </div>273 274 <!-- App bar -->275 <div class="app-bar">276 <div class="back-btn">277 <svg viewBox="0 0 24 24" width="56" height="56" fill="#424242"><path d="M15 18l-6-6 6-6"/></svg>278 </div>279 <div class="app-title">Reviews</div>280 </div>281 282 <!-- Content -->283 <div class="content">284 285 <!-- Review 1 -->286 <div class="review">287 <div class="stars">288 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>289 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>290 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>291 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>292 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>293 </div>294 <div class="review-text">295 Arrived and was exactly what I ordered. I ordered one size up and glad I did.296 </div>297 <div class="product-pill">298 <div class="img-placeholder">[IMG: Black alpine boot]</div>299 <div class="product-title">M99 Men's high top alpine boots Padded …</div>300 </div>301 </div>302 303 <!-- Review 2 -->304 <div class="review">305 <div class="review-header">306 <div class="avatar">C</div>307 <div class="name-date">308 <div class="name-line">309 <span>C***a</span>310 <span class="badge">311 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 2l8 8-8 12L4 10l8-8z"/></svg>312 Platinum313 </span>314 </div>315 <div class="date">Sep 18, 2023</div>316 </div>317 </div>318 <div class="stars">319 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>320 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>321 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>322 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>323 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>324 </div>325 <div class="review-text">326 the quality of the shoe is as it is on the picture. the shoes are very comfortable and easy to walk with. Infact they are too cute and I like them327 </div>328 <div class="product-pill">329 <div class="img-placeholder">[IMG: Pink/black running sneakers]</div>330 <div class="product-title">813 New design dazzling gradient color …</div>331 </div>332 </div>333 334 <!-- Review 3 -->335 <div class="review">336 <div class="review-header">337 <div class="avatar">f</div>338 <div class="name-date">339 <div class="name-line"><span>f***t</span></div>340 <div class="date">Sep 18, 2023</div>341 </div>342 </div>343 <div class="stars">344 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>345 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>346 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>347 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>348 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,21 12,17 5,21 7,13 2,9 9,9"/></svg>349 </div>350 <div class="review-text">351 I love these shoes, and customer service is very friendly and I love this store, shoes are very beautiful, very comfortable.352 </div>353 <div class="product-pill">354 <div class="img-placeholder">[IMG: Mauve slip-on sneakers]</div>355 <div class="product-title">723 Slip on Shoes Flat Manufacturer …</div>356 </div>357 </div>358 359 </div>360 361 <!-- Floating helper -->362 <div class="floating-helper">363 <div class="helper-inner">364 <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 0 0-6 6h2a4 4 0 1 1 4 4v3h2v-3a6 6 0 0 0-2-10z"/></svg>365 <div class="pencil">366 <svg viewBox="0 0 24 24" width="20" height="20" fill="#757575"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM21.41 6.34a1.25 1.25 0 0 0 0-1.77l-2.98-2.98a1.25 1.25 0 0 0-1.77 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>367 </div>368 </div>369 </div>370 371 <!-- Bottom actions -->372 <div class="bottom-bar">373 <div class="btn btn-outline">Chat now</div>374 <div class="btn btn-primary">Send inquiry</div>375 <div class="btn btn-primary">Start order</div>376 </div>377 378 <!-- Gesture bar -->379 <div class="gesture-bar"></div>380 381</div>382</body>383</html>