GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Book Detail UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    display: flex;24    align-items: center;25    padding: 0 32px;26    box-sizing: border-box;27    color: #E0E0E0;28    font-size: 34px;29    letter-spacing: 0.5px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36    font-size: 30px;37  }38  .icon {39    width: 42px;40    height: 42px;41    display: inline-block;42  }43  .icon svg { width: 100%; height: 100%; fill: #E0E0E0; }44 45  /* Header actions */46  .header-actions {47    position: absolute;48    top: 120px;49    left: 24px;50    right: 24px;51    display: flex;52    align-items: center;53    gap: 24px;54  }55  .back-btn {56    width: 90px;57    height: 90px;58    display: flex;59    align-items: center;60    justify-content: center;61    border-radius: 24px;62  }63  .share-pill {64    margin-left: auto;65    background: #2A2A2A;66    color: #CFCFCF;67    padding: 28px 40px;68    border-radius: 22px;69    font-size: 42px;70  }71 72  /* Main content */73  .content {74    position: absolute;75    top: 220px;76    left: 40px;77    right: 40px;78  }79  .top-row {80    display: grid;81    grid-template-columns: 260px 1fr;82    gap: 40px;83  }84  .cover {85    width: 260px;86    height: 370px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #757575;93    font-size: 28px;94    text-align: center;95    border-radius: 6px;96  }97  .title {98    font-size: 70px;99    line-height: 80px;100    font-weight: 700;101    margin-top: 6px;102  }103  .author {104    margin-top: 18px;105    font-size: 42px;106    color: #CFCFCF;107  }108  .series-row {109    margin-top: 16px;110    font-size: 38px;111    color: #9EC4FF;112  }113  .publisher {114    margin-top: 20px;115    font-size: 38px;116    color: #CFCFCF;117  }118  .release {119    margin-top: 18px;120    font-size: 36px;121    color: #CFCFCF;122  }123 124  .metrics {125    margin-top: 40px;126    display: flex;127    align-items: center;128    gap: 40px;129    color: #CFCFCF;130    font-size: 36px;131  }132  .rating {133    display: flex;134    align-items: center;135    gap: 16px;136    color: #FFFFFF;137    font-size: 42px;138  }139  .star svg { fill: #FFD54F; }140  .divider {141    width: 2px;142    height: 40px;143    background: #2E2E2E;144  }145 146  .cta-row {147    margin-top: 40px;148    display: flex;149    gap: 24px;150  }151  .btn-outline {152    flex: 0 0 460px;153    border: 1px solid #4B4B4B;154    border-radius: 16px;155    padding: 28px 26px;156    color: #CFCFCF;157    font-size: 40px;158    text-align: center;159    background: #1C1C1C;160  }161  .btn-primary {162    flex: 0 0 460px;163    border-radius: 16px;164    padding: 28px 26px;165    font-size: 40px;166    text-align: center;167    background: #3D8BFF;168    color: #FFFFFF;169  }170  .list-price {171    margin-top: 18px;172    font-size: 34px;173    color: #9E9E9E;174  }175 176  .audiobook {177    margin-top: 70px;178    font-size: 42px;179    color: #9EC4FF;180    display: flex;181    align-items: center;182    gap: 22px;183  }184 185  .section-divider {186    margin-top: 36px;187    height: 2px;188    background: #2E2E2E;189  }190 191  /* Bundle section */192  .bundle {193    margin-top: 40px;194  }195  .section-title {196    font-size: 52px;197    font-weight: 700;198  }199  .bundle-row {200    margin-top: 30px;201    display: flex;202    align-items: center;203    justify-content: space-between;204  }205  .bundle-left {206    display: flex;207    align-items: center;208    gap: 28px;209  }210  .mini-stack {211    position: relative;212    width: 160px;213    height: 220px;214  }215  .mini-card {216    position: absolute;217    width: 160px;218    height: 220px;219    background: #E0E0E0;220    border: 1px solid #BDBDBD;221    display: flex;222    align-items: center;223    justify-content: center;224    color: #757575;225    border-radius: 6px;226  }227  .mini-card.c2 { left: 16px; top: 16px; background: #D7D7D7; }228  .mini-card.c3 { left: 32px; top: 32px; background: #CECECE; }229  .plus-chip {230    position: absolute;231    right: -28px;232    top: 70px;233    background: #2A2A2A;234    color: #CFCFCF;235    padding: 10px 18px;236    border-radius: 12px;237    font-size: 34px;238    border: 1px solid #3A3A3A;239  }240  .bundle-text {241    font-size: 40px;242    color: #CFCFCF;243  }244  .build-btn {245    background: #2A2A2A;246    color: #FFFFFF;247    padding: 26px 50px;248    border-radius: 18px;249    font-size: 44px;250    border: 1px solid #3A3A3A;251  }252 253  /* Continue section */254  .continue {255    margin-top: 60px;256  }257  .covers-row {258    margin-top: 26px;259    display: grid;260    grid-template-columns: repeat(3, 1fr);261    gap: 28px;262  }263  .large-cover {264    width: 320px;265    height: 420px;266    background: #E0E0E0;267    border: 1px solid #BDBDBD;268    display: flex;269    align-items: center;270    justify-content: center;271    color: #757575;272    font-size: 28px;273    border-radius: 8px;274  }275</style>276</head>277<body>278<div id="render-target">279 280  <!-- Status bar -->281  <div class="status-bar">282    <div>8:40</div>283    <div class="status-right">284      <span>⌁</span>285      <span>✓</span>286      <span>✉</span>287      <span>•</span>288      <span class="icon">289        <svg viewBox="0 0 24 24"><path d="M2 12h20v2H2z"/></svg>290      </span>291      <span class="icon">292        <svg viewBox="0 0 24 24"><path d="M12 20c4.41 0 8-3.59 8-8h-2c0 3.31-2.69 6-6 6s-6-2.69-6-6H4c0 4.41 3.59 8 8 8z"/></svg>293      </span>294      <span style="font-size:30px;">95%</span>295    </div>296  </div>297 298  <!-- Header actions -->299  <div class="header-actions">300    <div class="back-btn icon">301      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>302    </div>303    <div class="share-pill">304      Share305    </div>306  </div>307 308  <!-- Main content -->309  <div class="content">310 311    <div class="top-row">312      <div class="cover">[IMG: Book Cover]</div>313 314      <div>315        <div class="title">The Pillars of the Earth</div>316        <div class="author">Ken Follett</div>317        <div class="series-row">Book 1 · The Kingsbridge Novels series</div>318        <div class="publisher">Pan Macmillan</div>319        <div class="release">Released Sep 4, 2008</div>320 321        <div class="metrics">322          <div class="rating">323            <span>4.5</span>324            <span class="star icon" style="width:44px;height:44px;">325              <svg viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>326            </span>327            <span style="font-size:32px;color:#9E9E9E;">159 reviews</span>328          </div>329 330          <div class="divider"></div>331 332          <div>Ebook</div>333          <div class="divider"></div>334          <div>1,100 Pages</div>335          <div class="divider"></div>336          <div>Eligible</div>337        </div>338 339        <div class="cta-row">340          <div class="btn-outline">Free sample</div>341          <div class="btn-primary">Buy ₹336.58</div>342        </div>343        <div class="list-price">List price: ₹673.17</div>344 345        <div class="audiobook">346          <span class="icon" style="width:48px;height:48px;">347            <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 14 0h2a9 9 0 0 0-9-9zm-6 9v6h4v-6H6zm10 0v6h4v-6h-4z"/></svg>348          </span>349          Switch to the audiobook350        </div>351 352      </div>353    </div>354 355    <div class="section-divider"></div>356 357    <!-- Bundle section -->358    <div class="bundle">359      <div class="section-title">Ken Follett bundle</div>360 361      <div class="bundle-row">362        <div class="bundle-left">363          <div class="mini-stack">364            <div class="mini-card c1">[IMG: Cover]</div>365            <div class="mini-card c2"></div>366            <div class="mini-card c3"></div>367            <div class="plus-chip">+27</div>368          </div>369          <div class="bundle-text">370            28 books available<br>371            <span style="font-size:34px;color:#9E9E9E;">Select any combination</span>372          </div>373        </div>374 375        <div class="build-btn">Build</div>376      </div>377    </div>378 379    <!-- Continue the series -->380    <div class="continue">381      <div class="section-title">Continue the series</div>382      <div class="covers-row">383        <div class="large-cover">[IMG: Kingsbridge - World Without End]</div>384        <div class="large-cover">[IMG: Kingsbridge - The Evening and the Morning]</div>385        <div class="large-cover">[IMG: Series Book]</div>386      </div>387    </div>388 389  </div>390 391</div>392</body>393</html>