GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Item - 1984 by George Orwell</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: #000000;13    color: #ffffff;14  }15  /* Top status/app bars */16  .status-bar {17    height: 90px;18    padding: 0 28px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #e0e0e0;23    font-size: 34px;24  }25  .status-right { display: flex; gap: 20px; align-items: center; }26  .app-bar {27    height: 120px;28    padding: 0 28px;29    display: flex;30    align-items: center;31    justify-content: space-between;32  }33  .app-title { font-size: 56px; font-weight: 700; }34  .icon-row { display: flex; gap: 26px; align-items: center; }35  .circle-btn {36    width: 88px; height: 88px;37    background: #1f1f1f;38    border-radius: 44px;39    display: flex; align-items: center; justify-content: center;40    border: 1px solid #2a2a2a;41  }42  .circle-btn svg { fill: none; stroke: #ffffff; stroke-width: 4; }43  .back-wrap { display: flex; align-items: center; gap: 18px; }44  .back-btn {45    width: 72px; height: 72px; border-radius: 36px;46    background: #1f1f1f; display:flex; align-items:center; justify-content:center;47    border: 1px solid #2a2a2a;48  }49  .content {50    padding: 0 40px;51  }52  /* Image area */53  .image-card {54    width: 900px;55    height: 1150px;56    margin: 30px auto 0;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    position: relative;60    display: flex; align-items: center; justify-content: center;61    color: #757575; font-size: 34px; text-align: center;62  }63  .image-top-pill {64    position: absolute; right: 18px; top: 18px;65    background: rgba(255,255,255,0.12);66    color: #dcdcdc;67    border: 1px solid #3a3a3a;68    border-radius: 34px;69    padding: 12px 22px;70    font-size: 32px;71  }72  .image-bottom-cta {73    position: absolute; right: 18px; bottom: 18px;74    display: flex; gap: 16px; align-items: center;75  }76  .pill {77    background: #1f1f1f;78    border: 1px solid #3a3a3a;79    color: #ffffff;80    border-radius: 40px;81    padding: 16px 26px;82    font-size: 32px;83  }84  .heart {85    width: 88px; height: 88px; border-radius: 44px;86    background: #1f1f1f; border: 1px solid #3a3a3a;87    display:flex; align-items:center; justify-content:center;88  }89  /* Details */90  .title {91    margin: 40px 0 8px;92    font-size: 62px; font-weight: 800;93  }94  .subtitle {95    font-size: 38px; color: #cfcfcf; margin-bottom: 26px;96  }97  .seller-row {98    display: flex; align-items: center; gap: 24px;99    margin: 6px 0 26px;100  }101  .seller-avatar {102    width: 72px; height: 72px; border-radius: 36px;103    background: #3ab06c; border: 1px solid #2f8f57;104    display:flex; align-items:center; justify-content:center;105    color:#083e1b; font-weight:700; font-size: 28px;106  }107  .seller-info {108    display: flex; flex-direction: column; gap: 6px;109  }110  .seller-name { font-size: 40px; }111  .seller-feedback { font-size: 34px; color: #bdbdbd; }112  .price {113    font-size: 60px; font-weight: 800; margin: 20px 0 12px;114  }115  .shipping { font-size: 40px; color: #d0d0d0; }116  .est {117    font-size: 40px; margin-top: 28px; color: #ffffff;118  }119  /* Bottom nav */120  .bottom-nav {121    position: absolute; left: 0; bottom: 0;122    width: 100%; height: 180px;123    background: #0a0a0a;124    border-top: 1px solid #1e1e1e;125    display: flex; align-items: center; justify-content: space-around;126  }127  .nav-item {128    display: flex; flex-direction: column; align-items: center; gap: 12px;129    color: #cfcfcf; font-size: 30px;130  }131  .nav-icon {132    width: 96px; height: 96px; border-radius: 48px;133    background: #1f1f1f; border: 1px solid #2a2a2a;134    display:flex; align-items:center; justify-content:center;135  }136  .nav-icon svg { stroke: #ffffff; stroke-width: 4; fill: none; }137  .active .nav-icon {138    background: #173b66; border-color: #1a4f8a;139  }140  .active { color: #ffffff; }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div>6:11</div>149    <div class="status-right">150      <span>84°</span>151      <span>🔋</span>152    </div>153  </div>154 155  <!-- App bar -->156  <div class="app-bar">157    <div class="back-wrap">158      <div class="back-btn">159        <svg width="34" height="34" viewBox="0 0 24 24">160          <path d="M15 5 L7 12 L15 19" />161        </svg>162      </div>163      <div class="app-title">Item</div>164    </div>165    <div class="icon-row">166      <div class="circle-btn">167        <!-- search -->168        <svg width="40" height="40" viewBox="0 0 24 24">169          <circle cx="11" cy="11" r="6"></circle>170          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>171        </svg>172      </div>173      <div class="circle-btn">174        <!-- cart -->175        <svg width="40" height="40" viewBox="0 0 24 24">176          <path d="M3 6 H6 L7.5 16 H18 L20 8 H7" />177          <circle cx="9" cy="20" r="2"></circle>178          <circle cx="16" cy="20" r="2"></circle>179        </svg>180      </div>181      <div class="circle-btn">182        <!-- share -->183        <svg width="40" height="40" viewBox="0 0 24 24">184          <circle cx="6" cy="12" r="2"></circle>185          <circle cx="18" cy="7" r="2"></circle>186          <circle cx="18" cy="17" r="2"></circle>187          <path d="M8 12 L16 7 M8 12 L16 17" />188        </svg>189      </div>190      <div class="circle-btn">191        <!-- more -->192        <svg width="40" height="40" viewBox="0 0 24 24">193          <circle cx="12" cy="5" r="2"></circle>194          <circle cx="12" cy="12" r="2"></circle>195          <circle cx="12" cy="19" r="2"></circle>196        </svg>197      </div>198    </div>199  </div>200 201  <div class="content">202    <!-- Book image -->203    <div class="image-card">204      [IMG: Book Cover - "1984" by George Orwell (Signet Classics)]205      <div class="image-top-pill">1 of 1</div>206      <div class="image-bottom-cta">207        <div class="pill">198</div>208        <div class="heart">209          <svg width="32" height="32" viewBox="0 0 24 24">210            <path d="M12 21 C12 21 5 14 5 9 C5 6.5 6.8 5 9 5 C10.5 5 11.6 6 12 7 C12.4 6 13.5 5 15 5 C17.2 5 19 6.5 19 9 C19 14 12 21 12 21 Z" />211          </svg>212        </div>213      </div>214    </div>215 216    <!-- Details -->217    <div class="title">1984 by George Orwell</div>218    <div class="subtitle">by George Orwell | PB | Good</div>219 220    <div class="seller-row">221      <div class="seller-avatar">TB</div>222      <div class="seller-info">223        <div class="seller-name">thrift.books (3379811)</div>224        <div class="seller-feedback">99.2% positive feedback</div>225      </div>226    </div>227 228    <div class="price">$5.71 <span class="shipping">+ $5.85 shipping</span></div>229    <div class="est">Est. delivery Wed, Oct 18 - Tue, Nov 7</div>230  </div>231 232  <!-- Bottom navigation -->233  <div class="bottom-nav">234    <div class="nav-item">235      <div class="nav-icon">236        <!-- home -->237        <svg width="40" height="40" viewBox="0 0 24 24">238          <path d="M3 12 L12 4 L21 12" />239          <path d="M5 12 V20 H19 V12" />240        </svg>241      </div>242      <div>Home</div>243    </div>244    <div class="nav-item">245      <div class="nav-icon">246        <!-- user -->247        <svg width="40" height="40" viewBox="0 0 24 24">248          <circle cx="12" cy="8" r="4"></circle>249          <path d="M4 20 C4 15 8 13 12 13 C16 13 20 15 20 20" />250        </svg>251      </div>252      <div>My eBay</div>253    </div>254    <div class="nav-item active">255      <div class="nav-icon">256        <!-- search active -->257        <svg width="40" height="40" viewBox="0 0 24 24">258          <circle cx="11" cy="11" r="6"></circle>259          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>260        </svg>261      </div>262      <div>Search</div>263    </div>264    <div class="nav-item">265      <div class="nav-icon">266        <!-- bell -->267        <svg width="40" height="40" viewBox="0 0 24 24">268          <path d="M12 22 C13.2 22 14 21.2 14 20 H10 C10 21.2 10.8 22 12 22 Z" />269          <path d="M6 16 H18 L17 10 C17 7 15 5 12 5 C9 5 7 7 7 10 L6 16 Z" />270        </svg>271      </div>272      <div>Inbox</div>273    </div>274    <div class="nav-item">275      <div class="nav-icon">276        <!-- tag -->277        <svg width="40" height="40" viewBox="0 0 24 24">278          <path d="M3 10 L13 3 L21 11 L11 18 Z" />279          <circle cx="9" cy="9" r="2"></circle>280        </svg>281      </div>282      <div>Selling</div>283    </div>284  </div>285 286</div>287</body>288</html>