GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Item - 1984 by George Orwell</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000000; color: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0;17 width: 100%; height: 96px;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; box-sizing: border-box;20 color: #fff; font-weight: 600; letter-spacing: 0.5px;21 }22 .status-right { display: flex; align-items: center; gap: 28px; opacity: 0.9; }23 .status-icon svg { width: 36px; height: 36px; }24 25 /* Header */26 .header {27 position: absolute; top: 96px; left: 0;28 width: 100%; height: 110px;29 display: flex; align-items: center;30 padding: 0 28px; box-sizing: border-box;31 }32 .back-btn {33 width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;34 }35 .title { font-size: 56px; font-weight: 700; margin-left: 8px; }36 37 /* Product image area */38 .image-wrap {39 position: absolute; top: 240px; left: 90px;40 width: 900px; height: 1160px;41 background: #111; border-radius: 6px;42 display: flex; align-items: center; justify-content: center;43 }44 .product-image {45 width: 850px; height: 1020px;46 background: #E0E0E0; border: 1px solid #BDBDBD;47 display: flex; align-items: center; justify-content: center;48 color: #757575; font-size: 36px; text-align: center;49 }50 51 /* Overlay menu (three-dot menu) */52 .overlay-menu {53 position: absolute; top: 210px; right: 70px;54 width: 640px; background: #1c1c1c; border-radius: 24px;55 box-shadow: 0 20px 40px rgba(0,0,0,0.6);56 padding: 24px 0;57 }58 .overlay-item {59 padding: 30px 36px; font-size: 40px; color: #eaeaea;60 border-bottom: 1px solid rgba(255,255,255,0.08);61 }62 .overlay-item:last-child { border-bottom: none; }63 64 /* Heart count pill */65 .like-pill {66 position: absolute; top: 1320px; right: 100px;67 height: 100px; min-width: 240px; padding: 0 28px;68 background: #1f1f1f; border-radius: 60px;69 display: flex; align-items: center; justify-content: space-between;70 font-size: 40px;71 }72 .like-pill .count { font-weight: 700; color: #dcdcdc; }73 .like-pill .heart {74 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;75 }76 77 /* Details section */78 .details {79 position: absolute; top: 1470px; left: 32px; right: 32px;80 }81 .item-title {82 font-size: 58px; font-weight: 800; margin: 12px 0 6px 0;83 }84 .subtitle {85 font-size: 40px; color: #bdbdbd;86 }87 88 /* Seller row */89 .seller {90 margin-top: 40px;91 display: flex; align-items: center; justify-content: space-between;92 }93 .seller-left { display: flex; align-items: center; gap: 24px; }94 .avatar {95 width: 96px; height: 96px; border-radius: 48px; background: #2a2a2a;96 display: flex; align-items: center; justify-content: center; border: 1px solid #444;97 color: #a7d0f4; font-weight: 700;98 }99 .seller-text .name { font-size: 44px; font-weight: 700; }100 .seller-text .meta { font-size: 34px; color: #a8a8a8; margin-top: 4px; }101 .chevron {102 width: 52px; height: 52px; opacity: 0.9;103 }104 105 .price {106 margin-top: 40px; font-size: 64px; font-weight: 800;107 }108 .shipping {109 font-size: 46px; color: #cfcfcf; margin-left: 12px;110 }111 .delivery {112 margin-top: 22px; font-size: 40px; color: #cecece;113 }114 115 /* Bottom navigation bar */116 .bottom-nav {117 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px;118 background: #0a0a0a; border-top: 1px solid #1e1e1e;119 display: flex; align-items: center; justify-content: space-around;120 }121 .nav-item {122 display: flex; flex-direction: column; align-items: center; gap: 10px;123 color: #dcdcdc; font-size: 34px;124 }125 .nav-item svg { width: 64px; height: 64px; }126 .nav-item.active .icon-wrap {127 width: 140px; height: 92px; background: #152238; border-radius: 46px;128 display: flex; align-items: center; justify-content: center;129 }130 .icon-wrap svg { width: 60px; height: 60px; }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status Bar -->137 <div class="status-bar">138 <div class="status-left">6:12</div>139 <div class="status-right">140 <div class="status-icon">141 <!-- GPS / location dot -->142 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#fff"/></svg>143 </div>144 <div class="status-icon">145 <!-- Wi-Fi -->146 <svg viewBox="0 0 24 24">147 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>148 <path d="M6 13c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>149 <circle cx="12" cy="17" r="2" fill="#fff"/>150 </svg>151 </div>152 <div class="status-icon">153 <!-- Battery -->154 <svg viewBox="0 0 32 24">155 <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>156 <rect x="4" y="6" width="18" height="12" fill="#fff"/>157 <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>158 </svg>159 </div>160 </div>161 </div>162 163 <!-- Header -->164 <div class="header">165 <div class="back-btn">166 <svg viewBox="0 0 36 36">167 <path d="M22 6 L10 18 L22 30" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 <div class="title">Item</div>171 </div>172 173 <!-- Product Image Area -->174 <div class="image-wrap">175 <div class="product-image">[IMG: Book Cover - "1984" by George Orwell]</div>176 </div>177 178 <!-- Overlay menu -->179 <div class="overlay-menu">180 <div class="overlay-item">Watch this item</div>181 <div class="overlay-item">Share this item</div>182 <div class="overlay-item">Report this item</div>183 <div class="overlay-item">Help & Contact</div>184 </div>185 186 <!-- Like count pill -->187 <div class="like-pill">188 <div class="count">198</div>189 <div class="heart">190 <svg viewBox="0 0 32 32">191 <path d="M16 28s-9-6-9-12a6 6 0 0 1 11-3 6 6 0 0 1 11 3c0 6-9 12-9 12l-4-0z"192 fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>193 </svg>194 </div>195 </div>196 197 <!-- Details -->198 <div class="details">199 <div class="item-title">1984 by George Orwell</div>200 <div class="subtitle">by George Orwell | PB | Good</div>201 202 <div class="seller">203 <div class="seller-left">204 <div class="avatar">TB</div>205 <div class="seller-text">206 <div class="name">thrift.books (3379811)</div>207 <div class="meta">99.2% positive feedback</div>208 </div>209 </div>210 <div class="chevron">211 <svg viewBox="0 0 24 24">212 <path d="M8 4 L16 12 L8 20" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 </div>216 217 <div class="price">$5.71 <span class="shipping">+ $5.85 shipping</span></div>218 <div class="delivery">Est. delivery Wed, Oct 18 - Tue, Nov 7</div>219 </div>220 221 <!-- Bottom Navigation -->222 <div class="bottom-nav">223 <div class="nav-item">224 <div class="icon-wrap">225 <svg viewBox="0 0 32 32">226 <path d="M4 14 L16 4 L28 14" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>227 <rect x="8" y="14" width="16" height="12" fill="none" stroke="#fff" stroke-width="2"/>228 </svg>229 </div>230 <div>Home</div>231 </div>232 233 <div class="nav-item">234 <div class="icon-wrap">235 <svg viewBox="0 0 32 32">236 <circle cx="16" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/>237 <path d="M6 26c3-6 17-6 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>238 </svg>239 </div>240 <div>My eBay</div>241 </div>242 243 <div class="nav-item active">244 <div class="icon-wrap">245 <svg viewBox="0 0 32 32">246 <circle cx="14" cy="14" r="9" stroke="#fff" stroke-width="2" fill="none"/>247 <path d="M22 22 L28 28" stroke="#fff" stroke-width="3" stroke-linecap="round"/>248 </svg>249 </div>250 <div>Search</div>251 </div>252 253 <div class="nav-item">254 <div class="icon-wrap">255 <svg viewBox="0 0 32 32">256 <path d="M16 4 L16 20" stroke="#fff" stroke-width="2"/>257 <circle cx="16" cy="24" r="2" fill="#fff"/>258 </svg>259 </div>260 <div>Inbox</div>261 </div>262 263 <div class="nav-item">264 <div class="icon-wrap">265 <svg viewBox="0 0 32 32">266 <path d="M6 10 L26 10 L26 26 L6 26 Z" stroke="#fff" stroke-width="2" fill="none"/>267 <path d="M10 6 L22 6 L22 10" stroke="#fff" stroke-width="2" fill="none"/>268 </svg>269 </div>270 <div>Selling</div>271 </div>272 </div>273 274</div>275</body>276</html>