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 - Search Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #203233;16 }17 18 /* Top app area */19 .app-header {20 background: #2F7D73;21 color: #ffffff;22 width: 100%;23 }24 .status-bar {25 height: 110px;26 padding: 0 32px;27 display: flex;28 align-items: center;29 font-weight: 600;30 font-size: 40px;31 letter-spacing: 0.5px;32 }33 .status-icons {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .status-dot {40 width: 14px; height: 14px; background: #ffffff; border-radius: 50%;41 }42 .status-battery {43 width: 42px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;44 }45 .status-battery::after {46 content: ""; position: absolute; right: -10px; top: 5px; width: 8px; height: 14px; background: #fff; border-radius: 2px;47 }48 .top-divider { height: 8px; background: #3F8A81; }49 50 .brand-row {51 height: 180px;52 display: flex;53 align-items: center;54 padding: 0 32px;55 gap: 28px;56 }57 .hamburger {58 width: 72px; height: 60px; display: inline-flex; flex-direction: column; justify-content: space-between;59 }60 .hamburger span { height: 8px; background: #ffffff; border-radius: 4px; }61 .brand {62 display: flex; align-items: center; gap: 20px; color: #ffffff;63 }64 .brand-logo {65 width: 80px; height: 80px; border: 3px solid #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700;66 }67 .brand-text {68 font-size: 46px; font-weight: 700; letter-spacing: 0.5px;69 }70 .cart-area { margin-left: auto; position: relative; }71 .cart {72 width: 72px; height: 52px;73 }74 .cart-badge {75 position: absolute; right: -4px; top: -8px; background: #ffffff; color: #2F7D73; border-radius: 20px; padding: 6px 12px; font-size: 28px; font-weight: 700;76 border: 2px solid #ffffff;77 }78 79 .search-area {80 padding: 24px 32px 36px 32px;81 }82 .search-bar {83 background: #ffffff;84 border-radius: 8px;85 height: 110px;86 display: flex;87 align-items: center;88 padding: 0 24px;89 box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset;90 border: 2px solid #e0e0e0;91 }92 .search-bar input {93 border: none;94 outline: none;95 font-size: 40px;96 flex: 1;97 color: #203233;98 }99 .search-actions {100 display: flex; align-items: center; gap: 28px;101 }102 .icon-btn {103 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #2F7D73;104 background: transparent;105 }106 .barcode {107 width: 56px; height: 56px; border: 2px solid #2F7D73; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 4px;108 }109 .barcode div { width: 4px; height: 36px; background: #2F7D73; }110 111 /* Content */112 .content {113 background: #ffffff;114 padding: 24px 32px 0 32px;115 }116 .results-row {117 display: flex; align-items: center; gap: 16px; color: #425D59; font-size: 36px;118 }119 .results-row strong { color: #203233; }120 .view-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }121 .view-icon { width: 58px; height: 58px; border: 2px solid #7CAFA6; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; padding: 8px; }122 .view-icon div { background: #7CAFA6; }123 .sort-link {124 color: #2F7D73; font-weight: 700; margin-left: 24px; cursor: default;125 }126 127 .chips {128 margin-top: 24px;129 display: flex; gap: 18px; flex-wrap: wrap;130 }131 .chip {132 background: #F0F4F3; border: 2px solid #D7E4E1; color: #425D59; padding: 20px 28px; font-size: 34px; border-radius: 8px; display: inline-flex; align-items: center; gap: 16px;133 }134 .chip .close { color: #2F7D73; font-weight: 700; }135 136 /* Grid */137 .grid {138 margin-top: 20px;139 display: grid;140 grid-template-columns: 1fr 1fr;141 column-gap: 40px;142 row-gap: 60px;143 padding: 20px 8px 180px 8px;144 }145 .card {146 width: 100%;147 }148 .thumb {149 width: 100%;150 height: 520px;151 background: #E0E0E0;152 border: 1px solid #BDBDBD;153 display: flex; align-items: center; justify-content: center;154 color: #757575; font-size: 34px; text-align: center; padding: 20px;155 border-radius: 6px;156 }157 .title {158 margin-top: 24px;159 font-size: 42px;160 color: #2F7D73;161 font-weight: 700;162 text-decoration: underline;163 }164 .author {165 margin-top: 18px;166 font-size: 38px;167 color: #425D59;168 }169 .price {170 margin-top: 12px;171 font-size: 40px;172 color: #2F7D73;173 font-weight: 800;174 }175 176 /* Bottom home indicator */177 .home-indicator {178 position: absolute;179 bottom: 0;180 left: 0;181 width: 100%;182 height: 120px;183 background: #000000;184 display: flex; align-items: center; justify-content: center;185 }186 .home-pill {187 width: 220px; height: 14px; background: #ffffff; border-radius: 12px; opacity: 0.8;188 }189 190 /* SVG helpers */191 .svg { fill: none; stroke: #ffffff; stroke-width: 6; }192</style>193</head>194<body>195<div id="render-target">196 <div class="app-header">197 <div class="status-bar">198 3:14199 <div class="status-icons">200 <svg width="40" height="40" viewBox="0 0 40 40"><path class="svg" d="M20 4c8 0 14 6 14 14s-6 14-14 14c-6 0-11-4-13-9 3 2 7 2 10-1s4-7 2-10-6-5-9-4c2-3 6-4 10-4z"/></svg>201 <svg width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="14" r="8" stroke="#fff" stroke-width="4" fill="none"/><path d="M6 36c4-8 24-8 28 0" stroke="#fff" stroke-width="4" fill="none"/></svg>202 <svg width="40" height="40" viewBox="0 0 40 40"><path d="M20 6v20" stroke="#fff" stroke-width="4"/><circle cx="20" cy="32" r="2" fill="#fff"/></svg>203 <div class="status-dot"></div>204 <svg width="40" height="40" viewBox="0 0 40 40"><path d="M6 6l28 0 0 20-28 0z" stroke="#fff" stroke-width="4" fill="none"/><circle cx="10" cy="32" r="2" fill="#fff"/><circle cx="30" cy="32" r="2" fill="#fff"/></svg>205 <div class="status-battery"></div>206 </div>207 </div>208 <div class="top-divider"></div>209 <div class="brand-row">210 <div class="hamburger">211 <span></span>212 <span></span>213 <span></span>214 </div>215 <div class="brand">216 <div class="brand-logo">TB</div>217 <div class="brand-text">20 YEARS of thriftbooks</div>218 </div>219 <div class="cart-area">220 <svg class="cart" viewBox="0 0 64 48">221 <path d="M6 8h10l6 22h24l6-18H20" stroke="#fff" stroke-width="4" fill="none"/>222 <circle cx="26" cy="40" r="4" fill="#fff"/>223 <circle cx="46" cy="40" r="4" fill="#fff"/>224 </svg>225 <div class="cart-badge">0</div>226 </div>227 </div>228 <div class="search-area">229 <div class="search-bar">230 <input type="text" value="Pride and Prejudice" />231 <div class="search-actions">232 <div class="icon-btn" style="color:#203233;font-size:42px;">×</div>233 <div class="barcode">234 <div></div><div></div><div></div><div></div>235 </div>236 </div>237 </div>238 </div>239 </div>240 241 <div class="content">242 <div class="results-row">243 <span>1 - 30 of <strong>2,100</strong> results for "<strong>Pride and Prejudice</strong>"</span>244 <div class="view-actions">245 <div class="view-icon">246 <div></div><div></div><div></div><div></div>247 </div>248 <div class="view-icon" style="grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;">249 <div></div><div></div><div></div><div></div>250 </div>251 </div>252 <div class="sort-link">Sort & Filter (1)</div>253 </div>254 255 <div class="chips">256 <div class="chip">Pride and Prejudice <span class="close">×</span></div>257 <div class="chip">Show Out Of Stock Items <span class="close">×</span></div>258 </div>259 260 <div class="grid">261 <!-- Card 1 -->262 <div class="card">263 <div class="thumb">[IMG: Pride and Prejudice book cover]</div>264 <div class="title">Pride and Prejudice</div>265 <div class="author">Jane Austen</div>266 <div class="price">$3.59 - $189.79</div>267 </div>268 269 <!-- Card 2 -->270 <div class="card">271 <div class="thumb">[IMG: Pride & Prejudice (2005) Blu-ray cover]</div>272 <div class="title">Pride & Prejudice (2005)</div>273 <div class="price">$4.39 - $11.69</div>274 </div>275 276 <!-- Card 3 -->277 <div class="card">278 <div class="thumb">[IMG: Illustrated Pride and Prejudice cover]</div>279 <div class="title">Pride and Prejudice</div>280 <div class="author">Jane Austen</div>281 <div class="price">$9.99</div>282 </div>283 284 <!-- Card 4 -->285 <div class="card">286 <div class="thumb">[IMG: Pride And Prejudice classic edition cover]</div>287 <div class="title">Pride And Prejudice</div>288 <div class="price">$6.69</div>289 </div>290 </div>291 </div>292 293 <div class="home-indicator">294 <div class="home-pill"></div>295 </div>296</div>297</body>298</html>