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; color: #333; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Header */16 .app-header {17 background: #2f7f74;18 color: #fff;19 padding: 34px 36px 24px 36px;20 }21 .header-top {22 display: flex; align-items: center; justify-content: space-between;23 }24 .brand {25 display: flex; align-items: center; gap: 20px;26 }27 .brand .logo-text {28 font-weight: 700; letter-spacing: 0.4px;29 font-size: 46px;30 }31 .brand .years {32 font-size: 26px; opacity: 0.9; margin-right: 8px;33 }34 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }35 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 8; }36 37 .cart-wrap { position: relative; }38 .cart-badge {39 position: absolute; right: -6px; top: -6px;40 width: 42px; height: 42px; border-radius: 21px;41 background: #2f7f74; border: 3px solid #cfe4e0;42 color: #fff; font-weight: 700; font-size: 26px;43 display: flex; align-items: center; justify-content: center;44 }45 46 .search-row {47 margin-top: 26px;48 display: flex; align-items: center; gap: 20px;49 }50 .search-input {51 flex: 1;52 background: #ffffff; border-radius: 8px;53 padding: 30px 32px; font-size: 36px; color: #666;54 border: none;55 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);56 }57 .barcode {58 width: 140px; height: 96px; border-radius: 8px;59 background: #fff; display: flex; align-items: center; justify-content: center;60 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);61 }62 .barcode svg { width: 100px; height: 60px; }63 64 /* Notice card */65 .notice {66 background: #f6f7f7;67 border-top: 1px solid #d7d7d7;68 border-bottom: 1px solid #d7d7d7;69 padding: 26px 36px 30px 36px;70 }71 .notice-row {72 display: flex; align-items: center; gap: 20px;73 font-size: 38px; color: #2f7f74; font-weight: 600;74 margin-bottom: 6px;75 }76 .notice-sub { font-size: 36px; color: #333; font-weight: 600; margin: 4px 0 22px; }77 .divider { height: 2px; background: #d7d7d7; margin: 10px 0 18px; }78 79 .subtotal-card {80 background: #fff; border-radius: 8px; border: 1px solid #e0e0e0;81 padding: 28px 26px; box-shadow: 0 2px 0 rgba(0,0,0,0.04);82 }83 .subtotal-line { font-size: 34px; margin-bottom: 14px; }84 .subtotal-line .price { color: #c0392b; font-weight: 700; }85 .ship-free { font-size: 32px; color: #555; }86 .ship-free .bold { font-weight: 700; color: #333; }87 .ship-free a { color: #2f7f74; text-decoration: underline; }88 89 .cta-row {90 display: flex; gap: 26px; margin-top: 24px;91 }92 .btn {93 flex: 1; padding: 34px 20px; font-size: 40px; font-weight: 700;94 border-radius: 10px; border: none; cursor: default;95 box-shadow: 0 6px 12px rgba(0,0,0,0.15);96 text-align: center;97 }98 .btn.teal { background: #2f7f74; color: #fff; }99 .btn.gold { background: #f0c24b; color: #5b4a1b; }100 101 /* Product section */102 .product {103 padding: 36px;104 }105 .peek {106 color: #2f7f74; font-weight: 700; font-size: 32px;107 display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;108 }109 .peek svg { width: 38px; height: 38px; fill: #2f7f74; }110 111 .prod-grid {112 display: grid; grid-template-columns: 320px 1fr; gap: 32px;113 }114 .cover {115 width: 320px; height: 450px; background: #E0E0E0; border: 1px solid #BDBDBD;116 display: flex; align-items: center; justify-content: center; color: #757575;117 font-size: 28px; text-align: center; padding: 10px;118 }119 120 .title { font-size: 46px; font-weight: 700; margin-bottom: 10px; }121 .byline { font-size: 34px; color: #777; margin-bottom: 20px; }122 .byline a { color: #2f7f74; font-weight: 700; text-decoration: none; }123 124 .price-row { font-size: 42px; margin-bottom: 10px; }125 .price-row .now { color: #c0392b; font-weight: 800; }126 .price-row .save { color: #333; font-weight: 700; }127 .list-price { font-size: 34px; color: #666; margin-bottom: 22px; }128 .list-price .strike { text-decoration: line-through; color: #777; }129 130 .rating {131 display: flex; align-items: center; gap: 14px; margin-top: 14px;132 }133 .rating .stars { display: flex; gap: 4px; }134 .rating a { color: #2f7f74; font-size: 34px; font-weight: 700; text-decoration: none; }135 136 .star { width: 44px; height: 44px; }137 .star svg { width: 100%; height: 100%; }138 .star.gold svg path { fill: #f5c542; stroke: #e0b53a; }139 .star.gray svg path { fill: #d7d7d7; stroke: #c5c5c5; }140 141 /* Select rows */142 .section-label { font-size: 36px; color: #666; margin: 28px 0 12px; }143 .select-row {144 display: flex; align-items: center; justify-content: space-between;145 border: 1px solid #dcdcdc; border-radius: 8px; padding: 28px;146 font-size: 34px; color: #333; margin-bottom: 18px;147 background: #fff;148 }149 .select-row .em { font-weight: 700; }150 .select-row .hint { color: #777; }151 .select-row .chev {152 width: 40px; height: 40px; margin-left: 16px;153 }154 .select-row .chev svg { width: 100%; height: 100%; fill: none; stroke: #888; stroke-width: 8; }155 156 .quantity-row {157 display: flex; align-items: center; gap: 22px; margin: 24px 0 10px;158 font-size: 34px;159 }160 .qty-select {161 width: 150px; height: 90px; border: 1px solid #cfcfcf; border-radius: 8px;162 display: flex; align-items: center; justify-content: center; gap: 12px;163 background: #fff; color: #333; font-size: 36px;164 }165 .qty-select .arrow { width: 28px; height: 28px; }166 .qty-select .arrow svg { width: 100%; height: 100%; fill: none; stroke: #777; stroke-width: 8; }167 .availability { color: #666; }168 .availability .in-cart { color: #2f7f74; font-weight: 800; }169 170 .add-to-cart {171 margin-top: 22px;172 background: #f0c24b; color: #5b4a1b; font-weight: 800; font-size: 40px;173 padding: 32px; border-radius: 10px; text-align: center;174 box-shadow: 0 6px 12px rgba(0,0,0,0.15);175 }176 177 /* Footer spacer to mimic bottom bar */178 .bottom-safe { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: #fff; }179</style>180</head>181<body>182<div id="render-target">183 <div class="app-header">184 <div class="header-top">185 <div class="brand">186 <div class="icon-btn" aria-label="Menu">187 <svg viewBox="0 0 100 100">188 <path d="M10 25h80M10 50h80M10 75h80"></path>189 </svg>190 </div>191 <div>192 <div class="years">20 YEARS OF</div>193 <div class="logo-text">thriftbooks</div>194 </div>195 </div>196 <div class="cart-wrap">197 <div class="icon-btn" aria-label="Cart">198 <svg viewBox="0 0 100 100">199 <path d="M15 25h15l10 45h45l10-35H35"></path>200 <circle cx="45" cy="85" r="8" fill="#fff"></circle>201 <circle cx="75" cy="85" r="8" fill="#fff"></circle>202 </svg>203 </div>204 <div class="cart-badge">1</div>205 </div>206 </div>207 208 <div class="search-row">209 <input class="search-input" type="text" value="Search 13 million titles" readonly>210 <div class="barcode">211 <svg viewBox="0 0 100 60">212 <rect x="5" y="5" width="90" height="50" rx="6" ry="6" fill="none" stroke="#999" stroke-width="4"></rect>213 <path d="M18 12v36M26 12v36M38 12v36M56 12v36M66 12v36M78 12v36" stroke="#999" stroke-width="4"></path>214 </svg>215 </div>216 </div>217 </div>218 219 <div class="notice">220 <div class="notice-row">221 <svg width="40" height="40" viewBox="0 0 24 24">222 <path d="M9 16l-4-4M9 16l10-10" fill="none" stroke="#2f7f74" stroke-width="3" stroke-linecap="round"></path>223 </svg>224 <div>Added to your cart!</div>225 </div>226 <div class="notice-sub">Pride and Prejudice</div>227 <div class="divider"></div>228 229 <div class="subtotal-card">230 <div class="subtotal-line">Cart Subtotal (1 item): <span class="price">$4.39</span></div>231 <div class="ship-free">Add <span class="bold">$10.61</span> to ship this item FREE! <a href="#">Details</a></div>232 <div class="cta-row">233 <div class="btn teal">View Cart</div>234 <div class="btn gold">Proceed to Checkout</div>235 </div>236 </div>237 </div>238 239 <div class="product">240 <div class="peek">241 <span>Peek Inside</span>242 <svg viewBox="0 0 24 24"><path d="M4 6h16l-5 4 5 4H4z"></path></svg>243 </div>244 245 <div class="prod-grid">246 <div>247 <div class="cover">[IMG: Pride and Prejudice book cover]</div>248 <div class="rating">249 <div class="stars">250 <div class="star gold"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7L12 18l-6.2 3.1L7 14.1 2 9.3l6.9-1z"></path></svg></div>251 <div class="star gold"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7L12 18l-6.2 3.1L7 14.1 2 9.3l6.9-1z"></path></svg></div>252 <div class="star gold"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7L12 18l-6.2 3.1L7 14.1 2 9.3l6.9-1z"></path></svg></div>253 <div class="star gold"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7L12 18l-6.2 3.1L7 14.1 2 9.3l6.9-1z"></path></svg></div>254 <div class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7L12 18l-6.2 3.1L7 14.1 2 9.3l6.9-1z"></path></svg></div>255 </div>256 <a href="#">19 reviews</a>257 </div>258 </div>259 260 <div>261 <div class="title">Pride and Prejudice</div>262 <div class="byline">by <a href="#">Jane Austen</a></div>263 <div class="price-row"><span class="now">$4.39</span> <span class="save">Save $3.56!</span></div>264 <div class="list-price">List Price: <span class="strike">$7.95</span></div>265 266 <div class="section-label">Select Format</div>267 <div class="select-row">268 <div>Format: <span class="em">Paperback</span> <span class="hint">($4.19 - $21.24)</span></div>269 <div class="chev"><svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg></div>270 </div>271 272 <div class="section-label">Select Condition <span style="color:#2f7f74; font-weight:700;">?</span></div>273 <div class="select-row">274 <div>Condition: <span class="em">Good</span> $4.39</div>275 <div class="chev"><svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"></path></svg></div>276 </div>277 278 <div class="quantity-row">279 <div>Quantity:</div>280 <div class="qty-select">281 <div>1</div>282 <div class="arrow"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg></div>283 </div>284 <div class="availability">33 Available + <span class="in-cart">1 in Cart</span></div>285 </div>286 287 <div class="add-to-cart">Add to Cart</div>288 </div>289 </div>290 </div>291 292 <div class="bottom-safe"></div>293</div>294</body>295</html>