GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Qualityland: Visit Tomorrow, Today!</title>6<meta name="viewport" content="width=1440, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9 #render-target {10 width: 1440px; height: 3120px;11 position: relative; overflow: hidden;12 background: #121212; color: #E0E0E0;13 }14 15 /* Top bars */16 .status-bar {17 height: 100px;18 padding: 0 40px;19 display: flex; align-items: center; justify-content: space-between;20 color: #ffffff;21 font-size: 42px; letter-spacing: 0.5px;22 }23 .sb-icons { display: flex; gap: 28px; align-items: center; }24 .app-bar {25 height: 140px; display: flex; align-items: center;26 padding: 0 40px;27 }28 .app-bar .left { display: flex; align-items: center; gap: 40px; }29 .app-bar .right { margin-left: auto; display: flex; gap: 40px; align-items: center; }30 .icon { width: 56px; height: 56px; fill: none; stroke: #E0E0E0; stroke-width: 4px; }31 .icon-fill { fill: #E0E0E0; stroke: none; }32 33 /* Promo banner */34 .promo {35 background: #053b52;36 height: 120px;37 display: flex; align-items: center;38 padding: 0 40px;39 color: #cfe9ff;40 font-size: 42px;41 }42 .promo .gplay { width: 72px; height: 72px; margin-right: 24px; border-radius: 8px; background: linear-gradient(45deg,#34A853,#FBBC04,#4285F4,#EA4335); }43 .promo a { color: #7fc8ff; text-decoration: none; margin-left: 12px; }44 45 /* Content */46 .content { padding: 40px; }47 .hero { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }48 .img-placeholder {49 width: 380px; height: 520px; background: #E0E0E0; border: 1px solid #BDBDBD;50 border-radius: 24px;51 display: flex; align-items: center; justify-content: center;52 color: #757575; font-size: 36px; text-align: center;53 }54 .title { font-size: 86px; line-height: 1.06; font-weight: 700; color: #EDEDED; margin-bottom: 20px; }55 .link { color: #64b5f6; text-decoration: none; font-size: 46px; }56 .meta { font-size: 40px; color: #bdbdbd; margin-top: 6px; }57 .stats {58 display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;59 margin-top: 40px; align-items: center;60 }61 .stat { display: flex; align-items: center; gap: 16px; font-size: 40px; color: #e0e0e0; }62 .divider-v { width: 2px; height: 60px; background: #2b2b2b; justify-self: center; }63 64 .actions { display: flex; gap: 40px; margin-top: 40px; align-items: center; }65 .btn-outline {66 padding: 26px 40px; border: 2px solid #8a8a8a; border-radius: 16px; color: #E0E0E0;67 font-size: 44px; background: transparent;68 }69 .btn-primary {70 padding: 26px 40px; border-radius: 16px; color: #ffffff;71 font-size: 44px; background: #55b4ff; border: none;72 box-shadow: 0 4px 0 #3a8ad6 inset;73 }74 .list-price { font-size: 36px; color: #8a8a8a; margin-top: 20px; }75 .list-price .strike { text-decoration: line-through; }76 77 .audiobook {78 margin-top: 30px; display: flex; align-items: center; gap: 18px;79 color: #7fc8ff; font-size: 42px;80 }81 .hr { height: 2px; background: #2b2b2b; margin: 50px 0; }82 83 /* Bundle */84 .bundle { display: grid; grid-template-columns: 180px 1fr 220px; gap: 30px; align-items: center; }85 .bundle-title { font-size: 58px; font-weight: 600; margin-bottom: 20px; }86 .bundle-desc { font-size: 38px; color: #bdbdbd; }87 .btn-ghost {88 padding: 22px 30px; border: 2px solid #8a8a8a; border-radius: 16px; color: #E0E0E0;89 font-size: 42px; text-align: center; background: transparent;90 }91 92 /* Section headers */93 .section-header {94 display: flex; align-items: center; justify-content: space-between;95 font-size: 56px; font-weight: 600; margin-top: 40px;96 }97 .chevron { width: 52px; height: 52px; stroke: #9e9e9e; stroke-width: 6px; fill: none; }98 .info { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #9e9e9e; color: #9e9e9e;99 display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-left: 16px; }100 101 .about-text { margin-top: 20px; font-size: 42px; line-height: 1.5; color: #cfcfcf; }102 .about-text .strong { color: #e5e5e5; font-weight: 600; letter-spacing: 1px; }103 104 /* Bottom home indicator */105 .home-indicator {106 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);107 width: 360px; height: 20px; background: #eaeaea; border-radius: 12px; opacity: 0.8;108 }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="status-bar">116 <div>12:25</div>117 <div class="sb-icons">118 <!-- Simple Wi-Fi -->119 <svg class="icon" viewBox="0 0 24 24">120 <path d="M2 8c5-4 15-4 20 0"/>121 <path d="M6 12c3-3 9-3 12 0"/>122 <path d="M10 16c2-2 4-2 6 0"/>123 <circle class="icon-fill" cx="12" cy="19" r="2"/>124 </svg>125 <!-- Battery -->126 <svg class="icon" viewBox="0 0 24 24">127 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" />128 <rect class="icon-fill" x="4" y="8" width="12" height="8" />129 <rect x="20" y="9" width="2" height="6" />130 </svg>131 </div>132 </div>133 134 <!-- App bar -->135 <div class="app-bar">136 <div class="left">137 <!-- Back arrow -->138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M15 6l-6 6 6 6"/>140 </svg>141 <div style="width:1px;height:1px;"></div>142 </div>143 <div class="right">144 <!-- Search -->145 <svg class="icon" viewBox="0 0 24 24">146 <circle cx="11" cy="11" r="7"/>147 <path d="M20 20l-4-4"/>148 </svg>149 <!-- Mic -->150 <svg class="icon" viewBox="0 0 24 24">151 <rect x="9" y="5" width="6" height="10" rx="3"/>152 <path d="M5 11c0 4 3 6 7 6s7-2 7-6"/>153 <path d="M12 17v4"/>154 </svg>155 <!-- Bookmark -->156 <svg class="icon" viewBox="0 0 24 24">157 <path d="M6 4h12v16l-6-4-6 4z"/>158 </svg>159 <!-- More (kebab) -->160 <svg class="icon" viewBox="0 0 24 24">161 <circle class="icon-fill" cx="5" cy="12" r="2"/>162 <circle class="icon-fill" cx="12" cy="12" r="2"/>163 <circle class="icon-fill" cx="19" cy="12" r="2"/>164 </svg>165 </div>166 </div>167 168 <!-- Promo banner -->169 <div class="promo">170 <div class="gplay"></div>171 <div>Limited time: Earn extra Play Points.<a href="#">Learn more</a></div>172 </div>173 174 <!-- Main content -->175 <div class="content">176 177 <div class="hero">178 <div class="img-placeholder">[IMG: Book cover]</div>179 <div>180 <div class="title">Qualityland: Visit Tomorrow, Today!</div>181 <div><a class="link" href="#">Marc-Uwe Kling</a></div>182 <div class="meta">Hachette UK</div>183 <div class="meta">Released Jan 9, 2020</div>184 185 <div class="stats">186 <div class="stat">187 <!-- Star -->188 <svg class="icon" viewBox="0 0 24 24">189 <path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/>190 </svg>191 <div>4.6 <span style="color:#9e9e9e; font-size:36px;">• 5 reviews</span></div>192 </div>193 194 <div class="divider-v"></div>195 196 <div class="stat">197 <!-- Bookmark as Ebook -->198 <svg class="icon" viewBox="0 0 24 24">199 <path d="M6 4h12v16l-6-4-6 4z"/>200 </svg>201 <div>Ebook</div>202 </div>203 204 <div class="divider-v"></div>205 206 <div class="stat">207 <!-- Pages -->208 <svg class="icon" viewBox="0 0 24 24">209 <rect x="4" y="4" width="16" height="16" rx="2"/>210 <path d="M8 8h8M8 12h8M8 16h8"/>211 </svg>212 <div>352 Pages</div>213 </div>214 215 <div class="divider-v"></div>216 217 <div class="stat">218 <!-- Gift/eligible -->219 <svg class="icon" viewBox="0 0 24 24">220 <rect x="3" y="9" width="18" height="12" rx="2"/>221 <path d="M3 13h18M11 9V21"/>222 <circle cx="8" cy="6" r="3"/>223 <circle cx="16" cy="6" r="3"/>224 </svg>225 <div>Eligible</div>226 </div>227 </div>228 229 <div class="actions">230 <button class="btn-outline">Free sample</button>231 <button class="btn-primary">Buy ₹277.30</button>232 </div>233 <div class="list-price">List price: <span class="strike">₹554.60</span></div>234 235 <div class="audiobook">236 <!-- Headphones -->237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M4 13v5h3v-5M17 13v5h3v-5"/>239 <path d="M4 13a8 8 0 0116 0"/>240 </svg>241 <div>Switch to the audiobook</div>242 </div>243 </div>244 </div>245 246 <div class="hr"></div>247 248 <!-- Bundle section -->249 <div class="bundle-title">Marc-Uwe Kling bundle</div>250 <div class="bundle">251 <div class="img-placeholder" style="width:160px;height:200px;border-radius:16px;">[IMG: Bundle cover +2]</div>252 <div>253 <div style="font-size:44px;">3 books available</div>254 <div class="bundle-desc">Select any combination</div>255 </div>256 <div><div class="btn-ghost">Build</div></div>257 </div>258 259 <!-- About this ebook -->260 <div class="section-header" style="margin-top: 60px;">261 <div>About this ebook</div>262 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>263 </div>264 <div class="about-text">265 <div class="strong">THIS BOOK IS FOR YOU.</div>266 <div class="strong">YES, YOU SPECIFICALLY.</div>267 <div class="strong">WELCOME TO QUALITYLAND.</div>268 <div style="margin-top:14px;">269 We hope you enjoy your trip to the happiest, most advanced future.270 </div>271 </div>272 273 <!-- Ratings and reviews -->274 <div class="section-header" style="margin-top: 40px;">275 <div style="display:flex; align-items:center;">276 Ratings and reviews <span class="info">i</span>277 </div>278 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>279 </div>280 281 </div>282 283 <div class="home-indicator"></div>284</div>285</body>286</html>