GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Kindle - The Alchemist</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background: transparent; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#121212; color:#FFFFFF; font-family: "Segoe UI", Arial, Helvetica, sans-serif;11  }12  .status-bar {13    height:80px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;14    color:#EDEDED; font-size:34px;15  }16  .status-right { display:flex; align-items:center; gap:22px; }17  .icon-dot { width:24px; height:24px; background:#EDEDED; border-radius:50%; }18  .icon-battery { width:42px; height:22px; border:2px solid #EDEDED; border-radius:4px; position:relative; }19  .icon-battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#EDEDED; border-radius:2px; }20  .app-header {21    height:110px; border-bottom:1px solid #1e1e1e; display:flex; align-items:center; padding:0 28px;22  }23  .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }24  .header-title { margin-left:12px; font-size:40px; letter-spacing:0.5px; color:#CFCFCF; }25  .close-btn { margin-left:auto; width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:#BDBDBD; font-size:54px; }26  .content { padding:32px 28px 40px; }27  .book-top { display:flex; gap:34px; align-items:flex-start; }28  .cover {29    width:230px; height:320px; background:#E0E0E0; border:1px solid #BDBDBD;30    display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; line-height:1.3;31  }32  .details { flex:1; }33  .title { font-size:66px; font-weight:700; margin-top:6px; }34  .author { color:#4aa3ff; font-size:40px; margin-top:12px; }35  .rating-row { display:flex; align-items:center; gap:14px; margin-top:14px; color:#CFCFCF; font-size:36px; }36  .stars { display:flex; gap:6px; }37  .badge { display:inline-block; background:#e98019; color:#141414; font-weight:700; font-size:30px; padding:10px 14px; border-radius:8px; margin-left:8px; }38  .category { color:#4aa3ff; font-size:34px; line-height:1.3; margin-top:8px; }39  .price { font-size:48px; font-weight:700; margin-top:28px; }40  .buy-on { color:#C3C3C3; font-size:34px; margin-top:6px; }41  .note { font-size:36px; line-height:1.4; color:#F1F1F1; margin:26px 0 30px; }42  .cta-btn {43    width:100%; padding:28px 20px; border-radius:8px; text-align:center; font-size:42px; font-weight:700; border:none; cursor:pointer;44  }45  .primary { background:#f6a11a; color:#0f0f0f; }46  .secondary { background:#3c3c3c; color:#EDEDED; margin-top:18px; }47  .blue-link { margin:28px 0 10px; color:#4aa3ff; font-size:34px; }48  .divider { height:1px; background:#1e1e1e; margin:28px 0; }49  .section-title { font-size:42px; font-weight:800; letter-spacing:0.4px; margin:10px 0 18px; }50  .tabs { display:flex; gap:60px; border-bottom:1px solid #1e1e1e; }51  .tab { font-size:36px; color:#91c4ff; padding:20px 0; position:relative; }52  .tab.active { color:#4aa3ff; }53  .tab.active::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:6px; background:#2e7ad7; border-radius:3px; }54  .text { font-size:36px; color:#EDEDED; line-height:1.6; margin-top:22px; }55  /* SVG sizing helpers */56  svg { display:block; }57</style>58</head>59<body>60<div id="render-target">61 62  <!-- Status Bar -->63  <div class="status-bar">64    <div class="status-left">2:52</div>65    <div class="status-right">66      <div class="icon-dot"></div>67      <div class="icon-dot"></div>68      <div class="icon-battery"></div>69    </div>70  </div>71 72  <!-- App Header -->73  <div class="app-header">74    <div class="back-btn">75      <svg width="40" height="40" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M15.5 5l-7 7 7 7" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>76    </div>77    <div class="header-title">DISCOVER NEW BOOKS</div>78    <div class="close-btn">×</div>79  </div>80 81  <!-- Main Content -->82  <div class="content">83 84    <div class="book-top">85      <div class="cover">[IMG: Book Cover - The Alchemist]</div>86 87      <div class="details">88        <div class="title">The Alchemist</div>89        <div class="author">Paulo Coelho</div>90 91        <div class="rating-row">92          <div>4.6</div>93          <div class="stars">94            <!-- Star Icons -->95            <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.91-1L12 2z" fill="#f5a623"/></svg>96            <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.91-1L12 2z" fill="#f5a623"/></svg>97            <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.91-1L12 2z" fill="#f5a623"/></svg>98            <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.91-1L12 2z" fill="#f5a623"/></svg>99            <!-- Half star via gradient -->100            <svg width="34" height="34" viewBox="0 0 24 24">101              <defs>102                <linearGradient id="halfGrad" x1="0" y1="0" x2="1" y2="0">103                  <stop offset="50%" stop-color="#f5a623"/>104                  <stop offset="50%" stop-color="#3b3b3b"/>105                </linearGradient>106              </defs>107              <path d="M12 2l3.09 6.3 6.91 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.91-1L12 2z" fill="url(#halfGrad)"/>108            </svg>109          </div>110          <div style="color:#A7A7A7;">143,827</div>111        </div>112 113        <div class="category"><span class="badge">#1 Best Seller</span> in Two-Hour<br>Education &amp; Reference Short<br>Reads</div>114 115        <div class="price">$14.99</div>116        <div class="buy-on">Buy on Amazon.com</div>117      </div>118    </div>119 120    <div class="note">121      This app does not support purchasing Kindle books. To buy, visit Amazon.com/ebooks.122    </div>123 124    <button class="cta-btn primary">ADD TO LIST</button>125    <button class="cta-btn secondary">DOWNLOAD SAMPLE</button>126 127    <div class="blue-link">WHY CAN'T I BUY KINDLE BOOKS?</div>128 129    <div class="divider"></div>130 131    <div class="section-title">BOOK OVERVIEW</div>132 133    <div class="tabs">134      <div class="tab active">DESCRIPTION</div>135      <div class="tab">EDITORIAL REVIEWS</div>136    </div>137 138    <div class="text">139      A special 25th anniversary edition of the extraordinary international bestseller, including a new Foreword by Paulo Coelho.140    </div>141    <div class="text">142      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.143    </div>144    <div class="text">145      Paulo Coelho's masterpiece tells the mystical story of an inspiring journey...146    </div>147 148  </div>149</div>150</body>151</html>