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>Item - Reviews</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000; color: #fff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 .status-bar {16 height: 96px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 36px; font-size: 34px; color: #fff;19 }20 .status-right { display: flex; align-items: center; gap: 22px; color: #fff; }21 .dot { width: 10px; height: 10px; background: #999; border-radius: 50%; display: inline-block; }22 .header {23 height: 120px;24 display: flex; align-items: center; justify-content: space-between;25 padding: 0 24px 0 12px;26 }27 .left-header {28 display: flex; align-items: center; gap: 22px;29 }30 .back-btn {31 width: 88px; height: 88px; border-radius: 44px;32 display: flex; align-items: center; justify-content: center;33 }34 .title { font-size: 48px; font-weight: 600; }35 .icon-row { display: flex; align-items: center; gap: 20px; }36 .icon-btn {37 width: 88px; height: 88px; border-radius: 44px;38 background: #121212; border: 1px solid #2a2a2a;39 display: flex; align-items: center; justify-content: center;40 position: relative;41 }42 .badge {43 position: absolute; right: 8px; top: 8px;44 width: 30px; height: 30px; border-radius: 15px;45 background: #E53935; color: #fff; font-size: 20px;46 display: flex; align-items: center; justify-content: center;47 font-weight: 700;48 }49 .filter-row {50 padding: 12px 36px 0 36px;51 display: flex; justify-content: flex-end;52 }53 .pill {54 padding: 22px 30px;55 background: #121212; border: 1px solid #2a2a2a; border-radius: 48px;56 color: #fff; font-size: 34px; display: inline-flex; align-items: center; gap: 14px;57 }58 .content { padding: 18px 36px 0 36px; }59 .review {60 margin-top: 28px;61 }62 .review-header {63 display: flex; align-items: center; gap: 18px;64 color: #c8e6c9; font-size: 30px;65 }66 .plus {67 width: 40px; height: 40px; border-radius: 20px; background: #2ecc71;68 display: flex; align-items: center; justify-content: center;69 }70 .plus svg { width: 24px; height: 24px; }71 .review-meta { color: #9e9e9e; font-size: 30px; }72 .review-body {73 margin-top: 18px; font-size: 36px; line-height: 1.4; color: #fff;74 }75 .divider {76 height: 1px; background: #2a2a2a; margin: 26px 0;77 }78 .cta {79 margin: 60px 36px 0 36px;80 display: flex; justify-content: center;81 }82 .outline-btn {83 width: 900px; padding: 28px 30px; border-radius: 60px;84 border: 2px solid #3d7dfc; color: #66a3ff; background: transparent;85 text-align: center; font-size: 40px; font-weight: 600;86 }87 .section {88 margin-top: 70px; padding: 0 36px;89 }90 .section-head {91 display: flex; justify-content: space-between; align-items: baseline;92 }93 .section-title { font-size: 44px; font-weight: 700; }94 .sponsored { color: #9e9e9e; font-size: 26px; margin-top: 10px; }95 .see-all {96 padding: 20px 30px; border-radius: 40px; border: 1px solid #2a2a2a;97 background: #121212; color: #fff; font-size: 32px; display: inline-flex; align-items: center; gap: 10px;98 }99 .cards {100 margin-top: 26px; display: flex; gap: 24px;101 padding-bottom: 180px;102 }103 .card {104 width: 500px; border-radius: 22px; overflow: hidden; background: #121212; border: 1px solid #2a2a2a;105 position: relative;106 }107 .card-img {108 width: 100%; height: 300px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;109 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;110 }111 .heart {112 position: absolute; right: 16px; top: 16px;113 width: 64px; height: 64px; border-radius: 32px; background: rgba(0,0,0,0.6);114 display: flex; align-items: center; justify-content: center; border: 1px solid #2a2a2a;115 }116 .card-body { padding: 18px; color: #fff; font-size: 30px; }117 .bottom-nav {118 position: absolute; left: 0; right: 0; bottom: 70px;119 height: 150px; background: #111; border-top: 1px solid #2a2a2a;120 display: flex; align-items: center; justify-content: space-around;121 padding: 0 24px;122 }123 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #cfcfcf; font-size: 26px; }124 .nav-item.active .nav-icon { background: #1f2a44; }125 .nav-icon {126 width: 88px; height: 88px; border-radius: 44px; background: #1b1b1b;127 display: flex; align-items: center; justify-content: center; border: 1px solid #2a2a2a;128 }129 .home-indicator {130 position: absolute; bottom: 20px; left: 50%;131 width: 240px; height: 10px; transform: translateX(-50%);132 background: #fff; border-radius: 6px; opacity: 0.8;133 }134 /* Simple icon styling */135 svg { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }136</style>137</head>138<body>139<div id="render-target">140 141 <!-- Status bar -->142 <div class="status-bar">143 <div>1:34</div>144 <div class="status-right">145 <!-- A few simple status glyphs -->146 <span>🔈</span>147 <span>🔍</span>148 <span>•</span>149 <span>⭘</span>150 <span style="display:flex; align-items:center; gap:8px;">151 <svg width="32" height="20" viewBox="0 0 32 20"><rect x="1" y="3" width="26" height="14" rx="3" fill="#fff"></rect><rect x="28" y="7" width="3" height="6" rx="1.5" fill="#fff"></rect></svg>152 <span>100%</span>153 </span>154 </div>155 </div>156 157 <!-- Header -->158 <div class="header">159 <div class="left-header">160 <div class="back-btn">161 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 6L9 12l6 6"></path></svg>162 </div>163 <div class="title">Item</div>164 </div>165 <div class="icon-row">166 <div class="icon-btn">167 <!-- search -->168 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5"></path></svg>169 </div>170 <div class="icon-btn">171 <!-- cart -->172 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 6h15l-2 8H7z"></path><circle cx="8" cy="19" r="2"></circle><circle cx="17" cy="19" r="2"></circle></svg>173 <div class="badge">1</div>174 </div>175 <div class="icon-btn">176 <!-- share -->177 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="18" cy="18" r="3"></circle><path d="M8.5 10.5l7-4M8.5 13.5l7 4"></path></svg>178 </div>179 <div class="icon-btn">180 <!-- more -->181 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>182 </div>183 </div>184 </div>185 186 <!-- Filter pill -->187 <div class="filter-row">188 <div class="pill">189 <span>All ratings</span>190 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>191 </div>192 </div>193 194 <!-- Reviews -->195 <div class="content">196 197 <div class="review">198 <div class="review-header">199 <div class="plus">200 <svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12" stroke="#fff" /></svg>201 </div>202 <div class="review-meta">203 b***8 (707) • Past 6 months204 </div>205 </div>206 <div class="review-body">207 Perfect precision tool set. Already used to upgrade RAM in laptop. Has a bit for every precision job you will need from working on eyeglasses to computer repair ext. seller sent set quickly and communicated about order.208 </div>209 <div class="divider"></div>210 </div>211 212 <div class="review">213 <div class="review-header">214 <div class="plus">215 <svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12" stroke="#fff" /></svg>216 </div>217 <div class="review-meta">218 5***e (21) • Past 6 months219 </div>220 </div>221 <div class="review-body">222 It’s a right handy tool kit with magnetic tips for the little tiny screws my eyes are getting lazy on me and fingers also. The tools help a lot with not loosing screws &nuts & stuff. Thanks Gadev45223 </div>224 <div class="divider"></div>225 </div>226 227 <div class="review">228 <div class="review-header">229 <div class="plus">230 <svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12" stroke="#fff" /></svg>231 </div>232 <div class="review-meta">233 9***9 (413) • Past 6 months234 </div>235 </div>236 <div class="review-body" style="font-weight:600;">237 GREAT ITEM WIREHARD 62 in 1 Precision Screwdriver Set - Repair Tool Kit - Magnetic Bit Set QND FAST SHIPPING238 </div>239 </div>240 241 <div class="cta">242 <div class="outline-btn">See all feedback</div>243 </div>244 245 <!-- Inspired section -->246 <div class="section">247 <div class="section-head">248 <div>249 <div class="section-title">Inspired by your recent views</div>250 <div class="sponsored">Sponsored</div>251 </div>252 <div class="see-all">253 <span>See all</span>254 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>255 </div>256 </div>257 258 <div class="cards">259 <div class="card">260 <div class="card-img">[IMG: Precision tool kit thumbnail]</div>261 <div class="heart">262 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.7-9-8.1C1.1 10.1 2.6 7 5.5 7c1.7 0 3 1 3.7 2.2C9.9 8 11.3 7 13 7c2.9 0 4.4 3.1 2.5 5.9C19 16.3 12 21 12 21z" fill="#fff" stroke="none"/></svg>263 </div>264 <div class="card-body">Magnetic Screwdriver Set • Sponsored</div>265 </div>266 <div class="card">267 <div class="card-img">[IMG: Electronics repair kit]</div>268 <div class="heart">269 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-7-4.7-9-8.1C1.1 10.1 2.6 7 5.5 7c1.7 0 3 1 3.7 2.2C9.9 8 11.3 7 13 7c2.9 0 4.4 3.1 2.5 5.9C19 16.3 12 21 12 21z" fill="#fff" stroke="none"/></svg>270 </div>271 <div class="card-body">Precision Bits & Handle • Sponsored</div>272 </div>273 </div>274 </div>275 </div>276 277 <!-- Bottom Navigation -->278 <div class="bottom-nav">279 <div class="nav-item">280 <div class="nav-icon">281 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9H3z"></path></svg>282 </div>283 <div>Home</div>284 </div>285 <div class="nav-item">286 <div class="nav-icon">287 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-7 8-7s8 3 8 7"></path></svg>288 </div>289 <div>My eBay</div>290 </div>291 <div class="nav-item active">292 <div class="nav-icon">293 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5"></path></svg>294 </div>295 <div>Search</div>296 </div>297 <div class="nav-item">298 <div class="nav-icon" style="position: relative;">299 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 3l7 6v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9z"></path><path d="M12 13v4"></path></svg>300 <div class="badge" style="right:-8px; top:-8px; width:28px; height:28px; font-size:18px;">1</div>301 </div>302 <div>Inbox</div>303 </div>304 <div class="nav-item">305 <div class="nav-icon">306 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 3l6 6-6 12-6-12z"></path></svg>307 </div>308 <div>Selling</div>309 </div>310 </div>311 312 <div class="home-indicator"></div>313</div>314</body>315</html>