GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>UI Render - The Pillars of the Earth</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: #fff;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 64px;22 color: #cfcfcf;23 font-size: 28px;24 display: flex;25 align-items: center;26 padding: 0 28px;27 box-sizing: border-box;28 }29 .status-right {30 margin-left: auto;31 display: flex;32 gap: 22px;33 align-items: center;34 }35 /* App bar */36 .app-bar {37 position: absolute;38 top: 64px;39 left: 0;40 width: 1080px;41 height: 100px;42 display: flex;43 align-items: center;44 padding: 0 24px;45 box-sizing: border-box;46 }47 .icon-btn {48 width: 72px;49 height: 72px;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #cfcfcf;54 }55 .app-actions {56 margin-left: auto;57 display: flex;58 gap: 10px;59 }60 61 /* Content */62 .content {63 position: absolute;64 top: 180px;65 left: 60px;66 right: 60px;67 }68 .book-row {69 display: flex;70 gap: 40px;71 }72 .cover {73 width: 260px;74 height: 370px;75 background: #E0E0E0;76 border: 1px solid #BDBDBD;77 display: flex;78 justify-content: center;79 align-items: center;80 color: #555;81 font-size: 24px;82 text-align: center;83 border-radius: 8px;84 }85 .book-info {86 flex: 1;87 }88 .title {89 font-size: 72px;90 line-height: 78px;91 font-weight: 700;92 margin-top: 6px;93 }94 .author {95 font-size: 36px;96 margin-top: 18px;97 color: #cfcfcf;98 }99 .meta {100 font-size: 32px;101 margin-top: 16px;102 color: #cfcfcf;103 }104 .series-link {105 color: #6db6ff;106 text-decoration: underline;107 cursor: pointer;108 }109 .kicker {110 color: #cfcfcf;111 margin-top: 16px;112 font-size: 30px;113 }114 .released {115 color: #cfcfcf;116 margin-top: 22px;117 font-size: 30px;118 }119 120 /* Ratings & spec row */121 .spec-row {122 display: flex;123 align-items: center;124 gap: 40px;125 margin-top: 36px;126 color: #eaeaea;127 }128 .divider {129 width: 2px;130 height: 50px;131 background: #2a2a2a;132 }133 .spec-block {134 display: flex;135 align-items: center;136 gap: 12px;137 font-size: 30px;138 color: #eaeaea;139 }140 .muted {141 color: #a2a2a2;142 font-size: 28px;143 }144 145 /* Buttons */146 .btn-row {147 display: flex;148 gap: 32px;149 margin-top: 40px;150 }151 .btn-outline {152 width: 420px;153 height: 96px;154 border: 1px solid #3a3a3a;155 border-radius: 16px;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #eaeaea;160 font-size: 34px;161 background: #1a1a1a;162 }163 .btn-primary {164 width: 460px;165 height: 96px;166 border-radius: 16px;167 display: flex;168 align-items: center;169 justify-content: center;170 background: #4da2ff;171 color: #0b1c33;172 font-weight: 700;173 font-size: 36px;174 }175 .list-price {176 margin-top: 18px;177 color: #8f8f8f;178 font-size: 28px;179 }180 .list-price strike {181 color: #7a7a7a;182 }183 184 /* Audio switch */185 .audio-switch {186 margin-top: 36px;187 display: flex;188 align-items: center;189 gap: 18px;190 color: #8fc5ff;191 font-size: 34px;192 }193 .separator {194 width: 100%;195 height: 2px;196 background: #222;197 margin: 40px 0;198 }199 200 /* Bundle section */201 .bundle {202 margin-top: 10px;203 }204 .section-title {205 font-size: 48px;206 font-weight: 700;207 }208 .bundle-row {209 display: flex;210 align-items: center;211 gap: 28px;212 margin-top: 30px;213 }214 .mini-stack {215 display: flex;216 align-items: center;217 position: relative;218 width: 200px;219 height: 160px;220 }221 .mini-cover {222 width: 140px;223 height: 180px;224 background: #E0E0E0;225 border: 1px solid #BDBDBD;226 color: #666;227 font-size: 20px;228 display: flex;229 align-items: center;230 justify-content: center;231 border-radius: 6px;232 }233 .mini-overlay {234 position: absolute;235 left: 110px;236 top: 20px;237 width: 70px;238 height: 120px;239 background: #d0d0d0;240 border: 1px solid #bdbdbd;241 border-radius: 6px;242 }243 .bundle-details {244 color: #cfcfcf;245 font-size: 32px;246 }247 .bundle-sub {248 color: #9c9c9c;249 font-size: 28px;250 margin-top: 8px;251 }252 .build-btn {253 margin-left: auto;254 width: 220px;255 height: 90px;256 border-radius: 16px;257 background: #2b2b2b;258 border: 1px solid #3b3b3b;259 color: #eaeaea;260 display: flex;261 align-items: center;262 justify-content: center;263 font-size: 34px;264 }265 266 /* Continue series */267 .continue {268 margin-top: 60px;269 }270 .cards-row {271 display: flex;272 gap: 36px;273 margin-top: 26px;274 }275 .series-card {276 width: 300px;277 height: 360px;278 background: #E0E0E0;279 border: 1px solid #BDBDBD;280 display: flex;281 align-items: center;282 justify-content: center;283 color: #555;284 font-size: 22px;285 border-radius: 8px;286 }287 .arrow {288 position: absolute;289 right: 60px;290 transform: translateY(-46px);291 color: #8fc5ff;292 }293 /* Simple icon styles */294 svg { fill: currentColor; }295</style>296</head>297<body>298<div id="render-target">299 300 <!-- Status bar -->301 <div class="status-bar">302 <div>8:40</div>303 <div class="status-right">304 <span>◌</span>305 <span>✉</span>306 <span>⏺</span>307 <span>📶</span>308 <span>95%</span>309 </div>310 </div>311 312 <!-- App bar with back & actions -->313 <div class="app-bar">314 <div class="icon-btn" title="Back">315 <svg width="38" height="38" viewBox="0 0 24 24">316 <path d="M15.5 19l-7-7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>317 </svg>318 </div>319 <div class="app-actions">320 <div class="icon-btn" title="Search">321 <svg width="34" height="34" viewBox="0 0 24 24">322 <path d="M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm8 3-4.35-4.35" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>323 </svg>324 </div>325 <div class="icon-btn" title="Save">326 <svg width="34" height="34" viewBox="0 0 24 24">327 <path d="M6 3h12v18l-6-3-6 3z" stroke="currentColor" stroke-width="2" fill="none" stroke-linejoin="round"/>328 </svg>329 </div>330 <div class="icon-btn" title="More">331 <svg width="28" height="28" viewBox="0 0 24 24">332 <circle cx="5" cy="12" r="2"/>333 <circle cx="12" cy="12" r="2"/>334 <circle cx="19" cy="12" r="2"/>335 </svg>336 </div>337 </div>338 </div>339 340 <!-- Main content -->341 <div class="content">342 343 <div class="book-row">344 <div class="cover">[IMG: Book Cover - The Pillars of the Earth]</div>345 346 <div class="book-info">347 <div class="title">The Pillars of the Earth</div>348 <div class="author">Ken Follett</div>349 350 <div class="meta">351 Book 1 · <span class="series-link">The Kingsbridge Novels series</span>352 </div>353 <div class="kicker">Pan Macmillan</div>354 <div class="released">Released Sep 4, 2008</div>355 356 <div class="spec-row">357 <div class="spec-block">358 <span style="font-size:34px;font-weight:700;">4.5</span>359 <span>★</span>360 <span class="muted">159 reviews</span>361 </div>362 <div class="divider"></div>363 <div class="spec-block">364 <svg width="28" height="28" viewBox="0 0 24 24">365 <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/>366 <line x1="8" y1="7" x2="16" y2="7" stroke="currentColor" stroke-width="2"/>367 </svg>368 <span>Ebook</span>369 </div>370 <div class="divider"></div>371 <div class="spec-block">372 <span style="font-size:34px;font-weight:700;">1,100</span>373 <span>Pages</span>374 </div>375 <div class="divider"></div>376 <div class="spec-block">377 <svg width="28" height="28" viewBox="0 0 24 24">378 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14l-5-4.87 6.91-1.01z" fill="none" stroke="currentColor" stroke-width="2"/>379 </svg>380 <span>Eligible</span>381 </div>382 </div>383 384 <div class="btn-row">385 <div class="btn-outline">Free sample</div>386 <div class="btn-primary">Buy ₹336.58</div>387 </div>388 <div class="list-price">List price: <strike>₹673.17</strike></div>389 390 <div class="audio-switch">391 <svg width="40" height="40" viewBox="0 0 24 24">392 <path d="M6 8v8M18 8v8M9 5v14M15 5v14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>393 <circle cx="3" cy="12" r="2" />394 <circle cx="21" cy="12" r="2" />395 </svg>396 <div>Switch to the audiobook</div>397 </div>398 399 <div class="separator"></div>400 401 <div class="bundle">402 <div class="section-title">Ken Follett bundle</div>403 <div class="bundle-row">404 <div class="mini-stack">405 <div class="mini-cover">[IMG: The Pillars of the Earth]</div>406 <div class="mini-overlay"></div>407 </div>408 <div>409 <div class="bundle-details">28 books available</div>410 <div class="bundle-sub">Select any combination</div>411 </div>412 <div class="build-btn">Build</div>413 </div>414 </div>415 416 <div class="continue">417 <div style="display:flex; align-items:center; justify-content:space-between;">418 <div class="section-title">Continue the series</div>419 <div class="arrow">420 <svg width="40" height="40" viewBox="0 0 24 24">421 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>422 </svg>423 </div>424 </div>425 <div class="cards-row">426 <div class="series-card">[IMG: World Without End]</div>427 <div class="series-card">[IMG: The Evening and the Morning]</div>428 <div class="series-card">[IMG: Another Kingsbridge Title]</div>429 </div>430 </div>431 432 </div>433 </div>434 435 </div>436 437</div>438</body>439</html>