GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - The Pillars of the Earth</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 }16 17 /* General */18 .thin { font-weight: 300; }19 .muted { color: #B0B0B0; }20 .divider {21 height: 1px;22 background: #2a2a2a;23 width: 100%;24 margin: 24px 0;25 }26 .content { padding: 24px 36px; }27 28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 0; left: 0; right: 0;32 height: 90px;33 padding: 0 28px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #EDEDED;38 font-size: 34px;39 letter-spacing: 0.5px;40 }41 .status-icons { display: flex; gap: 28px; align-items: center; }42 .icon { width: 48px; height: 48px; fill: #EDEDED; }43 44 /* App bar */45 .app-bar {46 position: absolute;47 top: 90px;48 left: 0; right: 0;49 height: 100px;50 padding: 0 20px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 }55 .left-actions { display: flex; align-items: center; gap: 18px; }56 .right-actions { display: flex; align-items: center; gap: 26px; }57 .app-icon { width: 56px; height: 56px; fill: #EDEDED; }58 59 /* Title + cover section */60 .top-section {61 position: absolute;62 top: 190px;63 left: 0; right: 0;64 }65 .book-area {66 display: flex;67 gap: 36px;68 padding: 0 36px;69 }70 .cover {71 width: 320px;72 height: 450px;73 background: #E0E0E0;74 border: 1px solid #BDBDBD;75 color: #757575;76 display: flex;77 align-items: center;78 justify-content: center;79 text-align: center;80 font-size: 28px;81 border-radius: 8px;82 }83 .details {84 flex: 1;85 }86 .title {87 font-size: 72px;88 line-height: 82px;89 font-weight: 700;90 margin-top: 6px;91 margin-bottom: 18px;92 }93 .author {94 font-size: 38px;95 margin-bottom: 12px;96 color: #EDEDED;97 }98 .meta-line {99 display: flex;100 flex-wrap: wrap;101 gap: 10px;102 font-size: 32px;103 color: #B0B0B0;104 margin-bottom: 10px;105 }106 .linkish { color: #79A9FF; cursor: pointer; }107 .released { font-size: 30px; color: #B0B0B0; margin-top: 8px; }108 109 /* Stats */110 .stats {111 display: flex;112 align-items: center;113 gap: 36px;114 margin-top: 28px;115 margin-bottom: 24px;116 color: #EDEDED;117 font-size: 30px;118 }119 .stat-item { display: flex; align-items: center; gap: 10px; }120 .vsep { width: 1px; height: 40px; background: #2a2a2a; }121 122 /* Buttons */123 .btn-row { display: flex; gap: 24px; margin-top: 18px; }124 .btn {125 height: 100px;126 padding: 0 36px;127 border-radius: 18px;128 font-size: 34px;129 display: flex;130 align-items: center;131 justify-content: center;132 cursor: pointer;133 white-space: nowrap;134 }135 .btn-outline {136 border: 1px solid #3a3a3a;137 background: #1a1a1a;138 color: #EDEDED;139 }140 .btn-primary {141 background: #4285F4;142 color: #FFFFFF;143 box-shadow: 0 6px 14px rgba(66,133,244,0.35);144 }145 .list-price {146 font-size: 28px;147 color: #9E9E9E;148 margin-top: 10px;149 }150 .list-price s { color: #7c7c7c; }151 152 /* Audiobook switch */153 .audio-switch {154 display: flex;155 align-items: center;156 gap: 16px;157 margin-top: 30px;158 font-size: 34px;159 color: #9EC2FF;160 }161 .headset { width: 48px; height: 48px; fill: #9EC2FF; }162 163 /* Bundle section */164 .section-title {165 font-size: 48px;166 font-weight: 600;167 margin-top: 32px;168 margin-bottom: 24px;169 }170 .bundle {171 display: flex;172 align-items: center;173 justify-content: space-between;174 background: transparent;175 padding: 0 36px;176 }177 .bundle-left { display: flex; align-items: center; gap: 26px; }178 .mini-stack {179 width: 140px;180 height: 190px;181 background: #E0E0E0;182 border: 1px solid #BDBDBD;183 display: flex;184 align-items: center;185 justify-content: center;186 color: #757575;187 border-radius: 8px;188 }189 .bundle-text {190 font-size: 36px;191 color: #EDEDED;192 line-height: 48px;193 }194 .btn-build {195 background: #2b2b2b;196 border: 1px solid #3a3a3a;197 color: #FFFFFF;198 padding: 0 44px;199 height: 92px;200 border-radius: 18px;201 font-size: 36px;202 display: flex; align-items: center; justify-content: center;203 }204 205 /* Continue the series */206 .series-row {207 display: flex;208 gap: 28px;209 padding: 0 36px;210 margin-top: 16px;211 }212 .series-cover {213 width: 320px;214 height: 420px;215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 color: #757575;218 display: flex;219 align-items: center; justify-content: center;220 border-radius: 8px;221 font-size: 26px;222 text-align: center;223 }224 225 /* Bottom gesture bar */226 .gesture-bar {227 position: absolute;228 bottom: 24px;229 left: 50%;230 transform: translateX(-50%);231 width: 540px;232 height: 14px;233 background: #CFCFCF;234 border-radius: 7px;235 opacity: 0.65;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Status bar -->243 <div class="status-bar">244 <div>8:43</div>245 <div class="status-icons">246 <!-- simple connectivity icons as dots/lines -->247 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="10" width="4" height="6" rx="1"></rect><rect x="9" y="8" width="4" height="8" rx="1"></rect><rect x="15" y="6" width="4" height="10" rx="1"></rect></svg>248 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20A10 10 0 0 1 12 2z" fill="none" stroke="#EDEDED" stroke-width="2"></path><circle cx="12" cy="12" r="5" fill="#EDEDED"></circle></svg>249 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18" stroke="#EDEDED" stroke-width="2"></path></svg>250 <svg class="icon" viewBox="0 0 24 24"><path d="M19 7l-7 7-7-7" stroke="#EDEDED" stroke-width="2" fill="none"></path></svg>251 <!-- battery -->252 <svg class="icon" viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="3" stroke="#EDEDED" stroke-width="2" fill="none"></rect><rect x="4" y="7" width="16" height="10" fill="#EDEDED"></rect><rect x="24" y="9" width="2" height="6" fill="#EDEDED"></rect></svg>253 </div>254 </div>255 256 <!-- App bar -->257 <div class="app-bar">258 <div class="left-actions">259 <svg class="app-icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>260 </div>261 <div class="right-actions">262 <!-- search -->263 <svg class="app-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#EDEDED" stroke-width="2" fill="none"></circle><path d="M20 20l-4.5-4.5" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>264 <!-- bookmark -->265 <svg class="app-icon" viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="#EDEDED"></path></svg>266 <!-- more-vert -->267 <svg class="app-icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#EDEDED"></circle><circle cx="12" cy="12" r="2" fill="#EDEDED"></circle><circle cx="12" cy="19" r="2" fill="#EDEDED"></circle></svg>268 </div>269 </div>270 271 <!-- Main top section -->272 <div class="top-section">273 <div class="book-area">274 <div class="cover">[IMG: Book Cover - The Pillars of the Earth]</div>275 <div class="details">276 <div class="title">The Pillars of the Earth</div>277 <div class="author">Ken Follett</div>278 <div class="meta-line">279 <span>Book 1 ·</span>280 <span class="linkish">The Kingsbridge Novels</span>281 <span>series</span>282 </div>283 <div class="meta-line">Pan Macmillan</div>284 <div class="released">Released Sep 4, 2008</div>285 286 <div class="stats">287 <div class="stat-item">288 <span style="font-size:34px;">4.5</span>289 <svg class="icon" viewBox="0 0 24 24">290 <path d="M12 2l3.1 6.8 7 .9-5 4.9 1.3 7.4L12 18l-6.4 3.9 1.3-7.4-5-4.9 7-.9z" fill="#FFD54F"></path>291 </svg>292 </div>293 <span class="muted">159 reviews</span>294 <div class="vsep"></div>295 <div class="stat-item">296 <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z" stroke="#EDEDED" stroke-width="2" fill="none"></path><path d="M7 8h10M7 12h10M7 16h10" stroke="#EDEDED" stroke-width="2"></path></svg>297 <span>Ebook</span>298 </div>299 <div class="vsep"></div>300 <div class="stat-item">301 <span>1,100</span>302 <span class="muted">Pages</span>303 </div>304 <div class="vsep"></div>305 <div class="stat-item">306 <svg class="icon" viewBox="0 0 24 24"><path d="M6 12l4 4 8-8" stroke="#7CFC8A" stroke-width="2" fill="none"></path></svg>307 <span>Eligible</span>308 </div>309 </div>310 311 <div class="btn-row">312 <div class="btn btn-outline">Free sample</div>313 <div>314 <div class="btn btn-primary">Buy ₹336.58</div>315 <div class="list-price">List price: <s>₹673.17</s></div>316 </div>317 </div>318 319 <div class="audio-switch">320 <svg class="headset" viewBox="0 0 24 24">321 <path d="M12 4a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H7a3 3 0 0 0-3 3v-3a8 8 0 0 1 16 0v3a3 3 0 0 0-3-3h-2v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z" fill="#9EC2FF"></path>322 </svg>323 <span>Switch to the audiobook</span>324 </div>325 </div>326 </div>327 328 <div class="divider"></div>329 330 <!-- Bundle section -->331 <div class="content">332 <div class="section-title">Ken Follett bundle</div>333 </div>334 <div class="bundle">335 <div class="bundle-left">336 <div class="mini-stack">[IMG: Book Cover Stack]</div>337 <div class="bundle-text">338 <div>28 books available</div>339 <div class="muted" style="font-size:30px;">Select any combination</div>340 </div>341 </div>342 <div class="btn-build">Build</div>343 </div>344 345 <div class="content">346 <div class="section-title">Continue the series</div>347 </div>348 <div class="series-row">349 <div class="series-cover">[IMG: Kingsbridge 1327 - Book Cover]</div>350 <div class="series-cover">[IMG: Kingsbridge 997 - Book Cover]</div>351 <div class="series-cover">[IMG: Another Series Book Cover]</div>352 </div>353 </div>354 355 <div class="gesture-bar"></div>356</div>357</body>358</html>