GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>UI Render - The Alchemist Detail</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: #121212;13    color: #EEEEEE;14  }15 16  /* Top App Bar */17  .app-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #1A1A1A;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    border-bottom: 1px solid #2a2a2a;29  }30  .app-title {31    color: #C8E6FF;32    font-size: 38px;33    letter-spacing: 0.5px;34    margin-left: 16px;35  }36  .spacer { flex: 1; }37 38  /* Icons */39  .icon {40    width: 56px;41    height: 56px;42    display: inline-flex;43    justify-content: center;44    align-items: center;45    color: #B0BEC5;46  }47  .icon svg { width: 40px; height: 40px; fill: none; stroke: #B0BEC5; stroke-width: 4; }48 49  /* Content */50  .content {51    position: absolute;52    top: 120px;53    left: 0;54    width: 100%;55    padding: 40px;56    box-sizing: border-box;57  }58 59  .row {60    display: flex;61    align-items: flex-start;62  }63  .cover {64    width: 230px;65    height: 330px;66    background: #E0E0E0;67    border: 1px solid #BDBDBD;68    color: #757575;69    display: flex;70    justify-content: center;71    align-items: center;72    font-size: 22px;73    text-align: center;74    margin-right: 36px;75  }76 77  .book-info {78    flex: 1;79    min-width: 0;80  }81  .title {82    font-size: 64px;83    font-weight: 700;84    color: #F5F5F5;85    line-height: 1.1;86    margin-top: -8px;87    margin-bottom: 8px;88  }89  .author {90    font-size: 36px;91    color: #55A6E6;92    margin-bottom: 8px;93  }94 95  .rating-row {96    display: flex;97    align-items: center;98    margin: 8px 0 16px 0;99  }100  .stars { display: inline-flex; margin-right: 16px; }101  .stars svg { width: 36px; height: 36px; fill: #FFC107; margin-right: 4px; }102  .reviews {103    font-size: 34px;104    color: #9EC8FF;105    margin-left: 18px;106  }107 108  .badge-row {109    display: flex;110    align-items: center;111    flex-wrap: wrap;112    margin: 8px 0 24px;113  }114  .badge {115    background: #E07A1F;116    color: white;117    font-size: 28px;118    padding: 8px 12px;119    border-radius: 6px;120    margin-right: 14px;121  }122  .category {123    font-size: 32px;124    color: #58A9FF;125  }126 127  .price {128    font-size: 40px;129    color: #FFFFFF;130    margin: 6px 0;131  }132  .buy-note {133    font-size: 30px;134    color: #B0BEC5;135    margin-bottom: 20px;136  }137  .warning {138    font-size: 30px;139    color: #C9D1D9;140    margin: 24px 0;141  }142 143  .btn {144    height: 110px;145    border-radius: 8px;146    font-size: 36px;147    font-weight: 700;148    display: flex;149    align-items: center;150    justify-content: center;151    margin-bottom: 18px;152    letter-spacing: 0.5px;153    cursor: default;154  }155  .btn.primary {156    background: #E6A21A;157    color: #1C1C1C;158  }159  .btn.light {160    background: #FFFFFF;161    color: #1C1C1C;162  }163 164  .link {165    color: #59AAFF;166    font-size: 32px;167    margin: 18px 0 28px;168  }169 170  .section-title {171    font-size: 40px;172    font-weight: 700;173    margin-top: 26px;174    margin-bottom: 18px;175    letter-spacing: 0.4px;176  }177 178  .tabs {179    border-bottom: 2px solid #2a2a2a;180    display: flex;181  }182  .tab {183    padding: 18px 0;184    margin-right: 40px;185    font-size: 34px;186    color: #8AB4F8;187    position: relative;188  }189  .tab.active {190    color: #59AAFF;191  }192  .tab.active::after {193    content: "";194    position: absolute;195    left: 0;196    bottom: -2px;197    height: 4px;198    width: 240px;199    background: #59AAFF;200  }201 202  .description {203    margin-top: 26px;204    font-size: 34px;205    color: #DDDDDD;206    line-height: 1.55;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Top app bar -->214  <div class="app-bar">215    <div class="icon" aria-label="Back">216      <svg viewBox="0 0 24 24">217        <path d="M15 5 L7 12 L15 19" />218      </svg>219    </div>220    <div class="app-title">DISCOVER NEW BOOKS</div>221    <div class="spacer"></div>222    <div class="icon" aria-label="Close">223      <svg viewBox="0 0 24 24">224        <path d="M5 5 L19 19 M19 5 L5 19" />225      </svg>226    </div>227  </div>228 229  <!-- Content -->230  <div class="content">231    <div class="row">232      <div class="cover">[IMG: Book cover "The Alchemist"]</div>233 234      <div class="book-info">235        <div class="title">The Alchemist</div>236        <div class="author">Paulo Coelho</div>237 238        <div class="rating-row">239          <div class="stars">240            <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"/></svg>241            <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"/></svg>242            <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"/></svg>243            <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"/></svg>244            <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" /></svg>245          </div>246          <div style="font-size:34px;color:#B0BEC5;">4.6</div>247          <div class="reviews">143,827</div>248        </div>249 250        <div class="badge-row">251          <div class="badge">#1 Best Seller</div>252          <div class="category">in Two-Hour Education & Reference Short Reads</div>253        </div>254 255        <div class="price">$14.99</div>256        <div class="buy-note">Buy on Amazon.com</div>257 258        <div class="warning">This app does not support purchasing Kindle books. To buy, visit Amazon.com/ebooks.</div>259 260        <div class="btn primary">ADD TO LIST</div>261        <div class="btn light">DOWNLOAD SAMPLE</div>262 263        <div class="link">WHY CAN'T I BUY KINDLE BOOKS?</div>264 265        <div class="section-title">BOOK OVERVIEW</div>266 267        <div class="tabs">268          <div class="tab active">DESCRIPTION</div>269          <div class="tab">EDITORIAL REVIEWS</div>270        </div>271 272        <div class="description">273          A special 25th anniversary edition of the extraordinary international bestseller, including a new Foreword by Paulo Coelho.274          <br><br>275          Combining magic, mysticism, wisdom and wonder into an inspiring tale of self-discovery, The Alchemist has become a modern classic, selling millions of copies around the world and transforming the lives of countless readers across generations.276          <br><br>277          Paulo Coelho's masterpiece tells the mystical story of an Andalusian shepherd boy who yearns to travel in search of a worldly treasure.278        </div>279      </div>280    </div>281  </div>282 283</div>284</body>285</html>