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, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Colors */16 :root {17 --brand-green: #2f7d73;18 --brand-green-dark: #256a60;19 --text: #333;20 --muted: #6f7b7a;21 --chip-bg: #eeeeee;22 --chip-border: #d5d5d5;23 --divider: #e5e5e5;24 --tile-title: #2f7d73;25 }26 27 /* Header */28 .app-header {29 position: relative;30 background: var(--brand-green);31 color: #fff;32 padding: 20px 36px 24px 36px;33 }34 .status-bar {35 height: 64px; display: flex; align-items: center; justify-content: space-between;36 font-weight: 600; font-size: 34px;37 }38 .status-right { display: flex; gap: 22px; align-items: center; }39 .header-row {40 margin-top: 8px;41 height: 84px;42 display: flex; align-items: center; justify-content: space-between;43 }44 .brand {45 display: flex; align-items: baseline; gap: 16px; color: #fff;46 }47 .brand .years { font-size: 26px; opacity: 0.9; letter-spacing: 1px; }48 .brand .name { font-size: 54px; font-weight: 700; }49 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }50 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6; }51 .cart-wrap { position: relative; }52 .cart-count {53 position: absolute; right: -6px; top: -6px;54 width: 44px; height: 44px; background: #e8f3f1; color: var(--brand-green-dark);55 border-radius: 50%; font-size: 26px; display: flex; align-items: center; justify-content: center; font-weight: 700;56 border: 2px solid #c7ddd7;57 }58 59 .search-box {60 margin-top: 22px;61 background: #fff; border-radius: 8px;62 height: 104px; display: flex; align-items: center;63 padding: 0 24px; color: var(--text);64 }65 .search-text { flex: 1; font-size: 40px; }66 .search-actions { display: flex; align-items: center; gap: 24px; }67 .search-actions .small-icon svg { width: 44px; height: 44px; stroke: #777; stroke-width: 6; }68 69 /* Summary and controls */70 .results-bar {71 padding: 26px 36px 16px 36px; color: var(--text); font-size: 34px;72 display: flex; align-items: center; justify-content: space-between;73 }74 .view-controls { display: flex; align-items: center; gap: 18px; }75 .view-icon { width: 56px; height: 56px; border: 2px solid #8aa8a3; border-radius: 8px; display: flex; align-items: center; justify-content: center; }76 .view-icon svg { width: 36px; height: 36px; fill: none; stroke: #8aa8a3; stroke-width: 6; }77 .sort-link { color: var(--brand-green-dark); font-weight: 700; font-size: 34px; margin-left: 18px; }78 79 /* Chips */80 .chips { padding: 8px 36px 18px 36px; display: flex; gap: 18px; }81 .chip {82 background: var(--chip-bg); border: 1px solid var(--chip-border);83 border-radius: 8px; padding: 18px 22px; font-size: 32px; color: var(--text);84 display: inline-flex; align-items: center; gap: 16px;85 }86 .chip .x { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }87 .chip .x svg { width: 30px; height: 30px; stroke: #6f7b7a; stroke-width: 6; }88 89 /* Grid */90 .grid {91 padding: 24px 36px 0 36px;92 display: grid; grid-template-columns: 1fr 1fr; gap: 40px 40px;93 }94 .product { text-align: center; }95 .img-ph {96 width: 420px; height: 560px;97 background: #E0E0E0; border: 1px solid #BDBDBD;98 display: inline-flex; align-items: center; justify-content: center;99 color: #757575; font-size: 30px; padding: 16px; text-align: center;100 }101 .title {102 margin-top: 24px; font-size: 40px; color: var(--tile-title); font-weight: 700;103 }104 .sub { margin-top: 8px; font-size: 34px; color: var(--muted); }105 .price { margin-top: 8px; font-size: 36px; font-weight: 700; color: #222; }106 107 /* Divider line for realism */108 .divider { height: 2px; background: var(--divider); margin: 0 36px; }109 110 /* Bottom navigation indicator (device bar) */111 .nav-bar {112 position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; background: #000;113 display: flex; align-items: center; justify-content: center;114 }115 .home-pill { width: 200px; height: 16px; border-radius: 16px; background: #d7d7d7; opacity: 0.9; }116 117 /* Utility small inline icons color overrides */118 .white-stroke { stroke: #fff; }119 .white-fill { fill: #fff; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Header -->126 <div class="app-header">127 <div class="status-bar">128 <div>3:13</div>129 <div class="status-right">130 <!-- simple status glyphs -->131 <svg width="34" height="34"><circle cx="17" cy="17" r="12" stroke="#e6f0ee" stroke-width="4" fill="none"/></svg>132 <svg width="34" height="34"><path d="M4 30 L30 4" stroke="#e6f0ee" stroke-width="4"/></svg>133 <svg width="34" height="34"><circle cx="17" cy="17" r="3" fill="#e6f0ee"/><circle cx="17" cy="17" r="14" stroke="#e6f0ee" stroke-width="4" fill="none"/></svg>134 <svg width="40" height="34"><path d="M4 26h32" stroke="#e6f0ee" stroke-width="4"/><rect x="6" y="6" width="16" height="12" fill="#e6f0ee"/></svg>135 </div>136 </div>137 138 <div class="header-row">139 <div class="icon-btn">140 <!-- Hamburger -->141 <svg viewBox="0 0 24 24" class="white-stroke">142 <path d="M3 6h18M3 12h18M3 18h18"/>143 </svg>144 </div>145 146 <div class="brand">147 <div class="years">20 YEARS OF</div>148 <div class="name">thriftbooks</div>149 </div>150 151 <div class="icon-btn cart-wrap">152 <!-- Cart icon -->153 <svg viewBox="0 0 24 24" class="white-stroke">154 <path d="M3 6h3l2 10h9l2-8H7"/>155 <circle cx="10" cy="20" r="1.8"/>156 <circle cx="17" cy="20" r="1.8"/>157 </svg>158 <div class="cart-count">0</div>159 </div>160 </div>161 162 <div class="search-box">163 <div class="search-text">Pride and Prejudice</div>164 <div class="search-actions">165 <!-- clear -->166 <div class="small-icon">167 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>168 </div>169 <!-- barcode -->170 <div class="small-icon">171 <svg viewBox="0 0 24 24">172 <path d="M3 4v16M6 4v16M9 4v16M13 4v16M17 4v16M21 4v16"/>173 </svg>174 </div>175 </div>176 </div>177 </div>178 179 <!-- Summary and controls -->180 <div class="results-bar">181 <div>1 - 30 of <strong>2,100</strong> results for "<strong>Pride and Prejudice</strong>"</div>182 <div class="view-controls">183 <div class="view-icon">184 <!-- list icon -->185 <svg viewBox="0 0 24 24">186 <path d="M4 6h16M4 12h16M4 18h16"/>187 </svg>188 </div>189 <div class="view-icon">190 <!-- grid icon -->191 <svg viewBox="0 0 24 24">192 <rect x="3" y="3" width="8" height="8"/>193 <rect x="13" y="3" width="8" height="8"/>194 <rect x="3" y="13" width="8" height="8"/>195 <rect x="13" y="13" width="8" height="8"/>196 </svg>197 </div>198 <div class="sort-link">Sort & Filter (1)</div>199 </div>200 </div>201 202 <!-- Chips -->203 <div class="chips">204 <div class="chip">205 Pride and Prejudice206 <span class="x">207 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>208 </span>209 </div>210 <div class="chip">211 Show Out Of Stock Items212 <span class="x">213 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>214 </span>215 </div>216 </div>217 218 <!-- Product grid -->219 <div class="grid">220 <!-- Item 1 -->221 <div class="product">222 <div class="img-ph">[IMG: Book cover - Pride and Prejudice]</div>223 <div class="title">Pride and Prejudice</div>224 <div class="sub">Jane Austen</div>225 <div class="price">$3.59 - $189.79</div>226 </div>227 228 <!-- Item 2 -->229 <div class="product">230 <div class="img-ph">[IMG: Blu-ray cover - Pride & Prejudice (2005)]</div>231 <div class="title">Pride & Prejudice (2005)</div>232 <div class="price">$4.39 - $11.69</div>233 </div>234 235 <!-- Item 3 -->236 <div class="product">237 <div class="img-ph">[IMG: Illustrated cover - Pride and Prejudice]</div>238 <div class="title">Pride and Prejudice</div>239 <div class="sub">Jane Austen</div>240 <div class="price">$9.99</div>241 </div>242 243 <!-- Item 4 -->244 <div class="product">245 <div class="img-ph">[IMG: Vintage cover - Pride and Prejudice]</div>246 <div class="title">Pride And Prejudice</div>247 <div class="price">$6.69</div>248 </div>249 250 <!-- Extra spacing to mimic scrollable content preview -->251 <div class="product">252 <div class="img-ph">[IMG: Collector's edition cover]</div>253 <div class="title">Pride and Prejudice</div>254 <div class="sub">Hardcover</div>255 <div class="price">$12.99</div>256 </div>257 258 <div class="product">259 <div class="img-ph">[IMG: Movie tie-in paperback cover]</div>260 <div class="title">Pride and Prejudice</div>261 <div class="sub">Paperback</div>262 <div class="price">$7.49</div>263 </div>264 </div>265 266 <div class="divider"></div>267 268 <!-- Bottom device navigation bar -->269 <div class="nav-bar"><div class="home-pill"></div></div>270 271</div>272</body>273</html>