GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>The Pillars of the Earth - Mock UI</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: #EDEDED;14  }15 16  /* Top system status bar */17  .status-bar {18    height: 84px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #cfcfcf;24    font-size: 30px;25  }26  .status-icons { display: flex; align-items: center; gap: 18px; }27  .dot { width: 8px; height: 8px; background: #cfcfcf; border-radius: 50%; display: inline-block; }28 29  /* App bar */30  .app-bar {31    height: 120px;32    display: flex;33    align-items: center;34    padding: 0 26px;35    border-bottom: 1px solid #1f1f1f;36  }37  .app-title {38    font-size: 48px;39    font-weight: 700;40    margin-left: 18px;41    flex: 1;42  }43  .icon-btn {44    width: 60px; height: 60px;45    display: inline-flex;46    align-items: center;47    justify-content: center;48    margin-left: 6px;49    color: #EDEDED;50  }51  .icon svg { width: 44px; height: 44px; fill: #EDEDED; }52 53  /* Chips row */54  .chips-row {55    padding: 18px 22px;56    display: flex;57    gap: 16px;58    border-bottom: 1px solid #1f1f1f;59  }60  .chip {61    display: inline-flex;62    align-items: center;63    gap: 14px;64    background: #2A2A2A;65    color: #EDEDED;66    border-radius: 28px;67    padding: 18px 26px;68    font-size: 30px;69    border: 1px solid #3a3a3a;70    white-space: nowrap;71  }72  .chip .icon svg { width: 32px; height: 32px; fill: #cfcfcf; }73 74  /* Section header */75  .section {76    padding: 24px 26px 8px;77  }78  .section-title {79    display: flex; align-items: center; justify-content: space-between;80    font-size: 40px; font-weight: 700;81    margin-bottom: 18px;82  }83 84  /* Horizontal series list */85  .h-scroller {86    display: flex; gap: 26px; overflow: hidden;87  }88  .series-card {89    width: 328px;90    background: #1a1a1a;91    border-radius: 16px;92    padding: 14px;93    border: 1px solid #222;94  }95  .img {96    background: #E0E0E0; color: #757575;97    border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center;99    text-align: center;100    font-size: 26px; line-height: 1.25;101  }102  .series-img { width: 300px; height: 360px; border-radius: 8px; }103  .series-meta { margin-top: 12px; }104  .series-name { font-size: 30px; font-weight: 700; color: #EEE; }105  .series-sub { font-size: 26px; color: #AFAFAF; margin-top: 4px; }106 107  /* Book list items */108  .list {109    padding: 10px 22px 80px;110  }111  .book-item {112    display: flex; gap: 28px;113    padding: 20px 8px;114    border-bottom: 1px solid #1f1f1f;115  }116  .cover {117    width: 260px; height: 360px;118    border-radius: 10px;119  }120  .book-info { flex: 1; padding-top: 8px; }121  .book-title { font-size: 44px; font-weight: 800; margin-bottom: 10px; color: #FAFAFA; }122  .book-sub { font-size: 30px; color: #BDBDBD; margin-bottom: 8px; }123  .rating { font-size: 30px; color: #DADADA; margin: 6px 0 18px; }124  .price-row { display: flex; gap: 18px; align-items: baseline; }125  .old-price { color: #9E9E9E; text-decoration: line-through; font-size: 30px; }126  .new-price { color: #E6E6E6; font-size: 34px; }127 128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div>8:38</div>136    <div class="status-icons">137      <span class="dot"></span>138      <span class="dot"></span>139      <span class="dot"></span>140      <div style="width:28px;height:18px;border:2px solid #cfcfcf;border-radius:3px; position:relative;">141        <div style="position:absolute; right:2px; top:2px; bottom:2px; width:18px; background:#cfcfcf;"></div>142      </div>143      <div style="font-size:28px;">95%</div>144    </div>145  </div>146 147  <!-- App bar -->148  <div class="app-bar">149    <div class="icon-btn icon" title="Back">150      <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>151    </div>152    <div class="app-title">The Pillars of the Earth</div>153    <div class="icon-btn icon" title="Search">154      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>155    </div>156    <div class="icon-btn icon" title="Mic">157      <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-5-3h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V20h3v2H8v-2h3v-2.1A7 7 0 0 1 7 11z"/></svg>158    </div>159  </div>160 161  <!-- Chips -->162  <div class="chips-row">163    <div class="chip">164      <span class="icon">165        <svg viewBox="0 0 24 24"><path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"/></svg>166      </span>167      Filter168    </div>169    <div class="chip">170      Format171      <span class="icon">172        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>173      </span>174    </div>175    <div class="chip">176      Price177      <span class="icon">178        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>179      </span>180    </div>181    <div class="chip">Price drops</div>182  </div>183 184  <!-- Series section -->185  <div class="section">186    <div class="section-title">187      <span>Series</span>188      <span class="icon">189        <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8-2-2 6-6-6-6 2-2z" fill="#BDBDBD"/></svg>190      </span>191    </div>192 193    <div class="h-scroller">194      <div class="series-card">195        <div class="img series-img">[IMG: Ken Follett - Kingsbridge Novels collage]</div>196        <div class="series-meta">197          <div class="series-name">The Kingsbridge Novels</div>198          <div class="series-sub">4 books</div>199          <div class="series-sub">Ebook series</div>200        </div>201      </div>202      <div class="series-card">203        <div class="img series-img">[IMG: Anne Bishop - Tir Alainn Trilogy collage]</div>204        <div class="series-meta">205          <div class="series-name">Tir Alainn Trilogy</div>206          <div class="series-sub">3 books</div>207          <div class="series-sub">Ebook series</div>208        </div>209      </div>210      <div class="series-card">211        <div class="img series-img">[IMG: Kingsbridge - Another collage]</div>212        <div class="series-meta">213          <div class="series-name">Kingsbridge</div>214          <div class="series-sub">4 books</div>215          <div class="series-sub">Ebook series</div>216        </div>217      </div>218    </div>219  </div>220 221  <!-- Book list -->222  <div class="list">223    <div class="book-item">224      <div class="img cover">[IMG: The Pillars of the Earth cover]</div>225      <div class="book-info">226        <div class="book-title">The Pillars of the Earth</div>227        <div class="book-sub">Book 1</div>228        <div class="rating">Ebook 4.5 ★</div>229        <div class="price-row">230          <div class="old-price">₹673.17</div>231          <div class="new-price">₹336.58</div>232        </div>233      </div>234    </div>235 236    <div class="book-item">237      <div class="img cover">[IMG: The Pillars of the World (Anne Bishop) cover]</div>238      <div class="book-info">239        <div class="book-title">The Pillars of the World</div>240        <div class="book-sub">Book 1</div>241        <div class="rating">Ebook 4.7 ★</div>242        <div class="price-row">243          <div class="old-price">₹462.76</div>244          <div class="new-price">₹323.93</div>245        </div>246      </div>247    </div>248 249    <div class="book-item">250      <div class="img cover">[IMG: World Without End cover]</div>251      <div class="book-info">252        <div class="book-title">World Without End: A Novel</div>253        <div class="book-sub">Book 2</div>254        <div class="rating">Ebook 4.6 ★</div>255        <div class="price-row">256          <div class="old-price">₹749.00</div>257          <div class="new-price">₹399.00</div>258        </div>259      </div>260    </div>261  </div>262 263</div>264</body>265</html>