GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Discover New Books</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:#0f1012; color:#fff;12  }13 14  /* Status bar */15  .status-bar {16    height:90px; padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#ffffffcc; font-size:36px;19  }20  .status-icons { display:flex; align-items:center; gap:24px; }21  .dot { width:10px; height:10px; background:#9ea2a5; border-radius:50%; display:inline-block; }22 23  /* Top navigation */24  .top-nav {25    height:110px; padding:0 28px;26    display:flex; align-items:center; justify-content:space-between;27    border-bottom:1px solid #1e2226;28  }29  .top-left { display:flex; align-items:center; gap:20px; }30  .title { font-size:42px; letter-spacing:1px; color:#e9edf0; }31  .icon-btn svg { width:54px; height:54px; fill:#e9edf0; }32 33  /* Search section */34  .search-row { display:flex; align-items:center; gap:22px; padding:28px; }35  .hamburger { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#1a1d21; }36  .search-box {37    flex:1; height:90px; border-radius:10px; background:#2a2e33;38    display:flex; align-items:center; justify-content:space-between; padding:0 24px;39    color:#bfc6cc; font-size:34px;40  }41  .search-placeholder { opacity:0.9; }42 43  /* Hero sample section */44  .hero {45    display:flex; gap:28px; padding:18px 28px 0 28px;46  }47  .book-cover {48    width:200px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;49    display:flex; align-items:center; justify-content:center; color:#555; font-size:28px;50  }51  .hero-text { flex:1; }52  .thanks { font-size:48px; color:#49b046; margin-top:2px; }53  .hero-desc { font-size:36px; line-height:1.4; color:#dfe3e6; margin-top:10px; }54  .cta-row { padding:28px; display:flex; flex-direction:column; gap:22px; }55  .btn {56    height:110px; border-radius:8px; display:flex; align-items:center; justify-content:center;57    font-size:40px; font-weight:bold; letter-spacing:0.5px;58  }59  .btn.primary { background:#2b6ef3; color:#fff; }60  .btn.secondary { background:#3a3d42; color:#e7ebee; }61 62  /* Section titles */63  .section-title {64    padding:20px 28px; font-size:42px; font-weight:bold; color:#e7ebee;65  }66 67  /* Cards */68  .card-row { display:flex; gap:32px; padding:10px 28px 0 28px; }69  .card {70    width:320px;71  }72  .card .img {73    width:320px; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;74    display:flex; align-items:center; justify-content:center; color:#555; font-size:26px;75    border-radius:6px;76  }77  .card .title {78    font-size:36px; color:#eff2f5; margin-top:16px; line-height:1.2;79  }80  .stars { display:flex; align-items:center; gap:8px; margin-top:12px; }81  .stars svg { width:32px; height:32px; }82  .reviews { color:#bfc6cc; font-size:30px; margin-top:10px; }83  .price { color:#ff7a57; font-size:38px; margin-top:10px; }84 85  /* Customers also read */86  .thumb-row { display:flex; gap:32px; padding:10px 28px 0 28px; }87  .thumb {88    width:240px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;89    display:flex; align-items:center; justify-content:center; color:#555; font-size:24px;90    border-radius:6px;91  }92 93  /* Bottom home indicator */94  .home-indicator {95    position:absolute; bottom:22px; left:50%;96    transform:translateX(-50%);97    width:280px; height:14px; background:#9aa0a6; border-radius:8px; opacity:0.6;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status Bar -->105  <div class="status-bar">106    <div>2:53</div>107    <div class="status-icons">108      <span class="dot"></span>109      <span class="dot"></span>110      <span class="dot"></span>111      <svg width="40" height="40" viewBox="0 0 24 24" fill="#e9edf0"><path d="M17 7H7v10h10V7zm2-2v14H5V5h14z"/></svg>112    </div>113  </div>114 115  <!-- Top Navigation -->116  <div class="top-nav">117    <div class="top-left">118      <div class="icon-btn">119        <svg viewBox="0 0 24 24"><path d="M15.5 5.5 9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/></svg>120      </div>121      <div class="title">DISCOVER NEW BOOKS</div>122    </div>123    <div class="icon-btn">124      <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/></svg>125    </div>126  </div>127 128  <!-- Search -->129  <div class="search-row">130    <div class="hamburger">131      <svg width="38" height="38" viewBox="0 0 24 24" fill="#cfd3d7"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>132    </div>133    <div class="search-box">134      <div class="search-placeholder">Search in Kindle Store</div>135      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfd3d7"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 16 16.5l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>136    </div>137  </div>138 139  <!-- Hero section with book sample -->140  <div class="hero">141    <div class="book-cover">[IMG: The Alchemist Cover]</div>142    <div class="hero-text">143      <div class="thanks">Thanks, Levi!</div>144      <div class="hero-desc">145        The free sample for <b>The Alchemist</b> will automatically appear in your library146        when the download is complete.147      </div>148    </div>149  </div>150 151  <div class="cta-row">152    <div class="btn primary">READ NOW</div>153    <div class="btn secondary">CONTINUE SHOPPING</div>154  </div>155 156  <!-- Recommendations -->157  <div class="section-title">RECOMMENDED FOR YOU BASED ON 'THE ALCHEMIST'</div>158  <div class="card-row">159    <!-- Card 1 -->160    <div class="card">161      <div class="img">[IMG: Book Cover]</div>162      <div class="title">The Four<br>Agreements: A</div>163      <div class="stars">164        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>165        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>166        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>167        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>168        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>169      </div>170      <div class="reviews">110,100 reviews</div>171      <div class="price">$7.74</div>172    </div>173 174    <!-- Card 2 -->175    <div class="card">176      <div class="img">[IMG: Book Cover]</div>177      <div class="title">MONEY Master<br>the Game: 7</div>178      <div class="stars">179        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>180        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>181        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>182        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>183        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>184      </div>185      <div class="reviews">13,663 reviews</div>186      <div class="price">$16.99</div>187    </div>188 189    <!-- Card 3 -->190    <div class="card">191      <div class="img">[IMG: Book Cover]</div>192      <div class="title">Think and Grow<br>Rich</div>193      <div class="stars">194        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>195        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>196        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>197        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>198        <svg viewBox="0 0 24 24"><path fill="#ffa726" d="M12 17.3l-5.4 3.2 1.4-6.1-4.7-4 6.2-.5 2.5-5.7 2.5 5.7 6.2.5-4.7 4 1.4 6.1z"/></svg>199      </div>200      <div class="reviews">24,149 reviews</div>201      <div class="price">$2.85</div>202    </div>203  </div>204 205  <!-- Customers also read -->206  <div class="section-title" style="margin-top:24px;">CUSTOMERS WHO READ THIS BOOK ALSO READ</div>207  <div class="thumb-row">208    <div class="thumb">[IMG: Book Thumbnail]</div>209    <div class="thumb">[IMG: Book Thumbnail]</div>210    <div class="thumb">[IMG: Book Thumbnail]</div>211  </div>212 213  <div class="home-indicator"></div>214</div>215</body>216</html>