GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>1984 by George Orwell - eBay Style UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0c0c0c;13 color: #fff;14 }15 16 /* Top status bar */17 .status-bar {18 height: 90px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #cfcfcf;24 font-size: 34px;25 }26 .status-right { display: flex; align-items: center; gap: 28px; }27 28 /* Header with title and actions */29 .header {30 height: 120px;31 padding: 0 24px;32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .title {37 font-size: 56px;38 font-weight: 700;39 flex: 1;40 }41 .circle-btn {42 width: 96px;43 height: 96px;44 border-radius: 48px;45 background: #1a1a1a;46 display: flex;47 align-items: center;48 justify-content: center;49 border: 1px solid #2a2a2a;50 }51 .icon { width: 48px; height: 48px; fill: #fff; }52 53 /* Save search row */54 .save-row {55 display: flex;56 align-items: center;57 gap: 18px;58 padding: 18px 36px;59 color: #7fb0ff;60 font-size: 38px;61 }62 .blue-heart {63 width: 44px; height: 44px;64 display: inline-flex; align-items: center; justify-content: center;65 }66 67 /* Sort / Filter row */68 .sort-filter {69 display: flex;70 justify-content: flex-end;71 gap: 48px;72 padding: 12px 36px 24px;73 color: #7fb0ff;74 font-size: 38px;75 }76 .sort-filter .sf-item {77 display: flex; align-items: center; gap: 12px;78 }79 .sf-icon { width: 36px; height: 36px; fill: #7fb0ff; }80 81 /* List area */82 .list {83 padding: 0 24px;84 }85 .card {86 background: #141414;87 border-radius: 24px;88 border: 1px solid #262626;89 display: flex;90 overflow: hidden;91 margin-bottom: 24px;92 }93 .thumb {94 width: 280px;95 background: #E0E0E0;96 border-right: 1px solid #2e2e2e;97 display: flex; align-items: center; justify-content: center;98 color: #757575; font-size: 28px; text-align: center;99 position: relative;100 }101 .fav-pill {102 position: absolute;103 right: 18px; top: 18px;104 width: 78px; height: 78px;105 border-radius: 39px;106 background: #232323;107 border: 1px solid #2b2b2b;108 display: flex; align-items: center; justify-content: center;109 }110 .heart-icon { width: 40px; height: 40px; fill: #fff; }111 112 .info {113 flex: 1;114 padding: 24px;115 }116 .item-title {117 font-size: 42px;118 line-height: 1.2;119 margin-bottom: 10px;120 }121 .rating {122 display: flex; align-items: center; gap: 10px;123 color: #cfcfcf; margin: 10px 0 6px;124 }125 .stars svg { width: 32px; height: 32px; fill: #fff; }126 .price {127 font-size: 48px; font-weight: 800; margin: 8px 0;128 }129 .sub {130 color: #bdbdbd; font-size: 32px; line-height: 1.4;131 }132 .sponsored {133 margin-top: 18px; color: #8c8c8c; font-size: 30px;134 }135 136 .results-count {137 padding: 24px 36px;138 font-size: 40px;139 color: #cfcfcf;140 }141 142 /* Bottom nav */143 .bottom-nav {144 position: absolute;145 bottom: 0; left: 0; right: 0;146 height: 190px;147 background: #101010;148 border-top: 1px solid #2a2a2a;149 display: flex;150 align-items: center;151 justify-content: space-around;152 color: #cfcfcf;153 }154 .nav-item {155 display: flex; flex-direction: column;156 align-items: center; gap: 14px; font-size: 30px;157 }158 .nav-icon {159 width: 80px; height: 80px; border-radius: 40px;160 display: flex; align-items: center; justify-content: center;161 }162 .nav-icon svg { width: 46px; height: 46px; fill: #cfcfcf; }163 .nav-active .nav-icon {164 background: #1f2430;165 border: 2px solid #3a4b7a;166 }167 .nav-active .nav-icon svg { fill: #7fb0ff; }168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status bar -->174 <div class="status-bar">175 <div>6:11</div>176 <div class="status-right">177 <div>84°</div>178 <div>📶</div>179 <div>🔋</div>180 </div>181 </div>182 183 <!-- Header -->184 <div class="header">185 <div class="circle-btn" aria-label="Back">186 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4l-9 8 9 8 1.5-1.7-6.3-5.3 6.3-5.3z"/></svg>187 </div>188 <div class="title">1984 by George Or...</div>189 <div class="circle-btn" aria-label="Search">190 <svg class="icon" viewBox="0 0 24 24"><path d="M21 20l-5.3-5.3a7 7 0 10-1.4 1.4L20 21l1-1zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>191 </div>192 <div class="circle-btn" aria-label="Camera">193 <svg class="icon" viewBox="0 0 24 24"><path d="M7 6l2-2h6l2 2h3v14H2V6h5zm5 12a5 5 0 100-10 5 5 0 000 10z"/></svg>194 </div>195 <div class="circle-btn" aria-label="Cart">196 <svg class="icon" viewBox="0 0 24 24"><path d="M7 6h14l-2 9H8L6 4H2v2h3l2.2 9.7A2 2 0 009 17h10v2H9a4 4 0 01-3.8-2.9L4.6 8H22V6H7zM9 21a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm9 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>197 </div>198 </div>199 200 <!-- Save search -->201 <div class="save-row">202 <div class="blue-heart">203 <svg class="sf-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.2-7.5C-0.2 10.4 1.3 6.5 4.9 6.1c2-.2 3.6.9 4.6 2.2 1-1.3 2.6-2.4 4.6-2.2 3.6.4 5.1 4.3 2.2 7.4C19 16.6 12 21 12 21z"/></svg>204 </div>205 <div>Save this search</div>206 </div>207 208 <!-- Sort / Filter -->209 <div class="sort-filter">210 <div class="sf-item">211 <div>Sort</div>212 <svg class="sf-icon" viewBox="0 0 24 24"><path d="M7 4h2v16H7V4zm8 4h2v12h-2V8zM11 12h2v8h-2v-8z"/></svg>213 </div>214 <div class="sf-item">215 <div>Filter</div>216 <svg class="sf-icon" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4L3 5z"/></svg>217 </div>218 </div>219 220 <!-- Product list -->221 <div class="list">222 223 <!-- Card 1 -->224 <div class="card">225 <div class="thumb">226 [IMG: Book cover - 1984 white]227 <div class="fav-pill">228 <svg class="heart-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.2-7.5C-0.2 10.4 1.3 6.5 4.9 6.1c2-.2 3.6.9 4.6 2.2 1-1.3 2.6-2.4 4.6-2.2 3.6.4 5.1 4.3 2.2 7.4C19 16.6 12 21 12 21z"/></svg>229 </div>230 </div>231 <div class="info">232 <div class="item-title">1984 by George Orwell<br>Pre-Owned</div>233 <div class="rating">234 <div class="stars">235 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>236 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>237 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>238 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>239 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>240 </div>241 <div>(430)</div>242 </div>243 <div class="price">$5.71</div>244 <div class="sub">+$5.85 shipping<br>from United States<br>719 sold</div>245 <div class="sponsored">Sponsored</div>246 </div>247 </div>248 249 <!-- Card 2 -->250 <div class="card">251 <div class="thumb">252 [IMG: Book cover - grey 1984 with eye]253 <div class="fav-pill">254 <svg class="heart-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.2-7.5C-0.2 10.4 1.3 6.5 4.9 6.1c2-.2 3.6.9 4.6 2.2 1-1.3 2.6-2.4 4.6-2.2 3.6.4 5.1 4.3 2.2 7.4C19 16.6 12 21 12 21z"/></svg>255 </div>256 </div>257 <div class="info">258 <div class="item-title">Nineteen Eighty-Four 1984 George Orwell BRANDNEW PAPERBACK BOOK FREE<br>Brand New</div>259 <div class="price">$9.87</div>260 <div class="sub">+$19.11 shipping<br>from Australia<br>74 sold</div>261 <div class="sponsored">Sponsored</div>262 </div>263 </div>264 265 <!-- Card 3 -->266 <div class="card">267 <div class="thumb">268 [IMG: Book cover - 1984 & Animal Farm]269 <div class="fav-pill">270 <svg class="heart-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.2-7.5C-0.2 10.4 1.3 6.5 4.9 6.1c2-.2 3.6.9 4.6 2.2 1-1.3 2.6-2.4 4.6-2.2 3.6.4 5.1 4.3 2.2 7.4C19 16.6 12 21 12 21z"/></svg>271 </div>272 </div>273 <div class="info">274 <div class="item-title">1984 & Animal Farm (2In1) by George Orwell Hardcover Book - NEW<br>Brand New</div>275 <div class="rating">276 <div class="stars">277 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>278 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>279 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>280 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>281 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6 3.4 1.6-6.7-5.2-4.3 6.8-.6L12 2l2.8 7.1 6.8.6-5.2 4.3 1.6 6.7z"/></svg>282 </div>283 <div>(89)</div>284 </div>285 <div class="price">$12.99</div>286 <div class="sub">+$24.61 shipping<br>from United States</div>287 </div>288 </div>289 290 </div>291 292 <div class="results-count">1,100+ results</div>293 294 <!-- Bottom navigation -->295 <div class="bottom-nav">296 <div class="nav-item">297 <div class="nav-icon">298 <svg viewBox="0 0 24 24"><path d="M12 3l10 8v10h-6v-6H8v6H2V11l10-8z"/></svg>299 </div>300 <div>Home</div>301 </div>302 <div class="nav-item">303 <div class="nav-icon">304 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 110 10 5 5 0 010-10zm0 12c-5 0-9 3-9 7h18c0-4-4-7-9-7z"/></svg>305 </div>306 <div>My eBay</div>307 </div>308 <div class="nav-item nav-active">309 <div class="nav-icon">310 <svg viewBox="0 0 24 24"><path d="M21 20l-5.3-5.3a7 7 0 10-1.4 1.4L20 21l1-1zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>311 </div>312 <div>Search</div>313 </div>314 <div class="nav-item">315 <div class="nav-icon">316 <svg viewBox="0 0 24 24"><path d="M2 4h20v14H6l-4 4V4zm4 4v2h12V8H6zm0 4v2h9v-2H6z"/></svg>317 </div>318 <div>Inbox</div>319 </div>320 <div class="nav-item">321 <div class="nav-icon">322 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm2 4h14v2H5V8zm2 4h10v2H7v-2zm2 4h6v2H9v-2z"/></svg>323 </div>324 <div>Selling</div>325 </div>326 </div>327 328</div>329</body>330</html>