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>ThriftBooks - Product</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative; overflow: hidden;11 width: 1080px; height: 2400px;12 background: #ffffff;13 color: #333;14 }15 16 /* Top app bar */17 .appbar {18 position: absolute; left: 0; top: 0;19 width: 100%; height: 220px;20 background: #2e7d72;21 color: #fff;22 box-sizing: border-box;23 padding: 40px 40px 20px 40px;24 }25 .appbar .row {26 display: flex; align-items: center; justify-content: space-between;27 }28 .brand {29 display: flex; align-items: center; gap: 18px;30 }31 .brand .logo-text {32 font-weight: 700; letter-spacing: 0.5px;33 }34 .brand .logo-text .small {35 font-size: 30px; opacity: 0.9;36 }37 .brand .logo-text .big {38 font-size: 46px; display: block; margin-top: 4px;39 }40 .icon-btn {41 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;42 }43 .cart-wrap {44 position: relative;45 }46 .cart-wrap .badge {47 position: absolute; right: -8px; top: -8px;48 width: 48px; height: 48px; border-radius: 24px;49 background: #ffffff; color: #2e7d72; font-weight: 700;50 display: flex; align-items: center; justify-content: center;51 font-size: 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);52 }53 54 /* Search bar */55 .search-bar {56 position: absolute; left: 40px; right: 40px; top: 168px;57 height: 96px; background: #fff; border-radius: 8px;58 box-shadow: 0 2px 0 rgba(0,0,0,0.08);59 display: flex; align-items: center; padding: 0 24px; gap: 24px;60 border: 1px solid #dcdcdc;61 }62 .search-input {63 flex: 1; color: #777; font-size: 36px;64 }65 .barcode {66 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;67 }68 69 /* Content area */70 .content {71 position: absolute; top: 280px; left: 0; right: 0; bottom: 0;72 overflow-y: auto; padding: 0 40px 40px;73 box-sizing: border-box;74 }75 76 /* Product header */77 .product-top {78 display: flex; gap: 32px;79 padding: 28px 0 16px;80 border-bottom: 1px solid #eeeeee;81 }82 .cover-wrap {83 width: 300px;84 }85 .peek {86 color: #2e7d72; font-weight: 700; margin-bottom: 10px; font-size: 32px;87 display: flex; align-items: center; gap: 12px;88 }89 .peek svg { width: 36px; height: 36px; }90 .img-placeholder {91 width: 300px; height: 420px;92 background: #E0E0E0; border: 1px solid #BDBDBD;93 display: flex; align-items: center; justify-content: center;94 color: #757575; font-size: 30px; text-align: center; padding: 8px; box-sizing: border-box;95 }96 .details {97 flex: 1;98 }99 .title {100 font-size: 52px; font-weight: 700; margin: 6px 0;101 }102 .byline {103 font-size: 32px; color: #555; margin-bottom: 20px;104 }105 .byline a { color: #2e7d72; text-decoration: none; font-weight: 700; }106 .price-row { margin: 10px 0 16px; }107 .price {108 color: #d6423e; font-weight: 800; font-size: 58px; margin-right: 16px;109 }110 .save { color: #333; font-size: 36px; font-weight: 700; }111 .list-price { color: #666; font-size: 32px; }112 .list-price del { color: #666; }113 .rating {114 display: flex; align-items: center; gap: 12px; margin: 16px 0;115 }116 .rating .stars svg { width: 44px; height: 44px; }117 .rating .reviews { color: #2e7d72; font-size: 32px; }118 119 /* Select rows */120 .section-label {121 font-size: 32px; color: #666; margin: 26px 0 12px;122 }123 .select-row {124 height: 100px; border: 1px solid #e0e0e0; border-radius: 6px;125 display: flex; align-items: center; justify-content: space-between;126 padding: 0 24px; font-size: 34px; box-shadow: 0 2px 0 rgba(0,0,0,0.05);127 }128 .select-row .value b { font-weight: 800; }129 .chev { width: 36px; height: 36px; }130 131 /* Quantity */132 .qty-row {133 display: flex; align-items: center; gap: 24px; margin: 28px 0;134 font-size: 36px;135 }136 .qty-select {137 width: 140px; height: 90px; border: 1px solid #cfcfcf; border-radius: 8px;138 display: flex; align-items: center; justify-content: space-between;139 padding: 0 16px; box-sizing: border-box; background: #fafafa;140 }141 .available { color: #666; font-size: 30px; }142 143 /* CTA */144 .cta {145 height: 120px; background: #f1c34e; color: #333; font-weight: 800; font-size: 42px;146 border-radius: 8px; display: flex; align-items: center; justify-content: center;147 box-shadow: 0 6px 12px rgba(0,0,0,0.15); margin: 10px 0 24px;148 }149 150 /* Wish list */151 .wish {152 color: #2e7d72; font-weight: 700; font-size: 40px; display: flex; align-items: center; gap: 16px;153 margin: 24px 0 28px;154 }155 .wish svg { width: 48px; height: 48px; }156 157 /* Editions banner */158 .banner {159 height: 120px; background: #f5f5f5; border-radius: 8px; border: 1px solid #e6e6e6;160 display: flex; align-items: center; justify-content: space-between;161 padding: 0 24px; box-shadow: 0 6px 10px rgba(0,0,0,0.08);162 margin-bottom: 30px;163 }164 .banner .left { display: flex; align-items: center; gap: 18px; color: #2e7d72; font-size: 36px; font-weight: 700; }165 .banner .left svg { width: 54px; height: 54px; }166 .banner .chev { width: 40px; height: 40px; }167 168 /* Social row */169 .social { display: flex; gap: 18px; margin: 10px 0 40px; }170 .social .btn {171 width: 160px; height: 90px; border-radius: 4px; display: flex; align-items: center; justify-content: center;172 color: #fff; font-weight: 800; font-size: 32px;173 }174 .btn.facebook { background: #3b5998; }175 .btn.pinterest { background: #cb1f27; }176 .btn.twitter { background: #1da1f2; }177 .btn.share { background: #2e7d72; }178 179 /* Android gesture bar */180 .gesture-bar {181 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);182 width: 360px; height: 12px; background: #1a1a1a; border-radius: 6px; opacity: 0.25;183 }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Header / App bar -->190 <div class="appbar">191 <div class="row">192 <div class="icon-btn">193 <svg viewBox="0 0 24 24" width="48" height="48" fill="#fff">194 <rect x="2" y="5" width="20" height="2"></rect>195 <rect x="2" y="11" width="20" height="2"></rect>196 <rect x="2" y="17" width="20" height="2"></rect>197 </svg>198 </div>199 <div class="brand">200 <div class="logo-text">201 <span class="small">20 YEARS OF</span>202 <span class="big">thriftbooks</span>203 </div>204 </div>205 <div class="cart-wrap icon-btn">206 <svg viewBox="0 0 24 24" width="48" height="48" fill="#fff">207 <path d="M7 6h14l-1.5 9H8L7 6z"></path>208 <circle cx="9" cy="20" r="2"></circle>209 <circle cx="18" cy="20" r="2"></circle>210 </svg>211 <div class="badge">0</div>212 </div>213 </div>214 </div>215 216 <!-- Search bar -->217 <div class="search-bar">218 <div class="search-input">Search 13 million titles</div>219 <div class="barcode">220 <svg viewBox="0 0 64 64" width="64" height="64">221 <rect x="6" y="10" width="4" height="44" fill="#bdbdbd"></rect>222 <rect x="14" y="10" width="6" height="44" fill="#9e9e9e"></rect>223 <rect x="26" y="10" width="3" height="44" fill="#bdbdbd"></rect>224 <rect x="34" y="10" width="5" height="44" fill="#9e9e9e"></rect>225 <rect x="45" y="10" width="3" height="44" fill="#bdbdbd"></rect>226 <rect x="53" y="10" width="4" height="44" fill="#9e9e9e"></rect>227 </svg>228 </div>229 </div>230 231 <!-- Content -->232 <div class="content">233 234 <div class="product-top">235 <div class="cover-wrap">236 <div class="peek">237 Peek Inside238 <svg viewBox="0 0 24 24" fill="#2e7d72">239 <path d="M8 4l8 8-8 8" stroke="#2e7d72" stroke-width="2" fill="none"></path>240 </svg>241 </div>242 <div class="img-placeholder">[IMG: Pride and Prejudice book cover]</div>243 </div>244 245 <div class="details">246 <div class="title">Pride and Prejudice</div>247 <div class="byline">by <a href="#">Jane Austen</a></div>248 249 <div class="price-row">250 <span class="price">$4.39</span>251 <span class="save">Save $3.56!</span>252 <div class="list-price">List Price: <del>$7.95</del></div>253 </div>254 255 <div class="rating">256 <div class="stars">257 <svg viewBox="0 0 24 24">258 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="#f3c13a"></polygon>259 </svg>260 <svg viewBox="0 0 24 24">261 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="#f3c13a"></polygon>262 </svg>263 <svg viewBox="0 0 24 24">264 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="#f3c13a"></polygon>265 </svg>266 <svg viewBox="0 0 24 24">267 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="#f3c13a"></polygon>268 </svg>269 <svg viewBox="0 0 24 24">270 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="#d0d0d0"></polygon>271 </svg>272 </div>273 <div class="reviews">19 reviews</div>274 </div>275 </div>276 </div>277 278 <!-- Select Format -->279 <div class="section-label">Select Format</div>280 <div class="select-row">281 <div class="value">Format: <b>Paperback</b> ($4.19 - $21.24)</div>282 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">283 <path d="M9 6l6 6-6 6"></path>284 </svg>285 </div>286 287 <!-- Select Condition -->288 <div class="section-label">Select Condition</div>289 <div class="select-row">290 <div class="value">Condition: <b>Good</b> $4.39</div>291 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">292 <path d="M9 6l6 6-6 6"></path>293 </svg>294 </div>295 296 <!-- Quantity -->297 <div class="qty-row">298 <div style="min-width: 180px;">Quantity:</div>299 <div class="qty-select">300 <div>1</div>301 <svg viewBox="0 0 24 24" width="34" height="34" fill="#777">302 <path d="M6 9l6 6 6-6"></path>303 </svg>304 </div>305 <div class="available">34 Available</div>306 </div>307 308 <!-- Add to cart -->309 <div class="cta">Add to Cart</div>310 311 <!-- Wish list -->312 <div class="wish">313 <svg viewBox="0 0 24 24" fill="#2e7d72">314 <path d="M12 21s-7-4.6-9-8.5C1 9.5 3.5 7 6.5 7c2 0 3.5 1.2 4.5 2.6C12 8.2 13.5 7 15.5 7 18.5 7 21 9.5 21 12.5 19 16.4 12 21 12 21z"></path>315 </svg>316 Add to Wish List317 </div>318 319 <!-- Editions banner -->320 <div class="banner">321 <div class="left">322 <svg viewBox="0 0 24 24" fill="#2e7d72">323 <path d="M4 4h12v16H4z"></path>324 <path d="M18 6h2v12h-2z"></path>325 </svg>326 See All 2111 Editions from $3.59327 </div>328 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">329 <path d="M9 6l6 6-6 6"></path>330 </svg>331 </div>332 333 <!-- Social buttons -->334 <div class="social">335 <div class="btn facebook">f</div>336 <div class="btn pinterest">p</div>337 <div class="btn twitter">t</div>338 <div class="btn share">339 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">340 <circle cx="6" cy="12" r="3"></circle>341 <circle cx="18" cy="6" r="3"></circle>342 <circle cx="18" cy="18" r="3"></circle>343 <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#fff" stroke-width="2" fill="none"></path>344 </svg>345 </div>346 </div>347 348 <div style="border-top:1px solid #eaeaea; margin-top: 20px;"></div>349 </div>350 351 <!-- Gesture bar -->352 <div class="gesture-bar"></div>353</div>354</body>355</html>