GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - The War of the Worlds</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: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 110px;24 background: #000;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 30px;29 box-sizing: border-box;30 }31 .status-time {32 font-size: 42px;33 margin-right: auto;34 letter-spacing: 0.5px;35 }36 .status-icons { display: flex; gap: 26px; align-items: center; }37 .dot-icon {38 width: 22px; height: 22px; background:#fff; border-radius: 50%;39 opacity: 0.85;40 }41 .battery {42 width: 42px; height: 22px; border:2px solid #fff; border-radius:4px; position:relative;43 }44 .battery::after {45 content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:1px;46 }47 .battery-level {48 width: 28px; height: 16px; background:#fff; margin:2px; border-radius:2px;49 }50 51 /* App bar */52 .appbar {53 position: absolute;54 top: 110px;55 left: 0;56 width: 100%;57 height: 150px;58 background: #fff;59 display: flex;60 align-items: center;61 padding: 0 28px;62 box-sizing: border-box;63 box-shadow: 0 2px 0 rgba(0,0,0,0.08);64 }65 .app-title {66 font-size: 56px;67 font-weight: 600;68 white-space: nowrap;69 overflow: hidden;70 text-overflow: ellipsis;71 max-width: 700px;72 margin-left: 16px;73 }74 .app-actions { margin-left: auto; display: flex; gap: 36px; }75 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }76 .icon-btn svg { width: 44px; height: 44px; }77 78 /* Content */79 .content {80 position: absolute;81 top: 260px;82 left: 0;83 width: 100%;84 height: 1530px;85 overflow: hidden;86 box-sizing: border-box;87 padding: 0 44px;88 }89 .content p {90 font-size: 38px;91 line-height: 1.6;92 margin: 0 0 28px 0;93 }94 .content .source { color:#666; }95 .section-title {96 font-size: 46px;97 font-weight: 700;98 margin: 28px 0 16px 0;99 }100 .links { padding-left: 38px; }101 .links li { font-size: 42px; margin: 16px 0; }102 .links a { color:#2e6bf5; text-decoration: none; }103 104 /* Premium banner + reader controls */105 .premium-wrap {106 position: absolute;107 left: 0;108 width: 100%;109 bottom: 140px;110 }111 .handle {112 width: 80px; height: 10px; background:#C7C7C7; border-radius: 6px;113 margin: 0 auto 10px auto;114 }115 .premium-banner {116 width: calc(100% - 40px);117 margin: 0 auto;118 height: 170px;119 border-radius: 28px;120 display: flex;121 align-items: center;122 justify-content: space-between;123 padding: 0 30px;124 box-sizing: border-box;125 background: linear-gradient(90deg, #63a36a, #78b394);126 color: #fff;127 }128 .premium-left { display: flex; align-items: center; gap: 24px; }129 .premium-logo {130 width: 110px; height: 110px; border-radius: 18px;131 background: rgba(255,255,255,0.85);132 color:#4c8a5a; font-weight: 700; font-size: 72px;133 display:flex; align-items:center; justify-content:center;134 }135 .premium-text { font-size: 44px; }136 .upgrade-btn {137 background:#fff; color:#2e806c; padding: 22px 40px; border-radius: 40px;138 font-size: 40px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.15);139 }140 141 .reader-panel {142 width: 100%;143 height: 480px;144 background: #f7f7f7;145 padding: 30px 40px 20px 40px;146 box-sizing: border-box;147 }148 .reader-top {149 display: flex;150 align-items: flex-end;151 justify-content: space-between;152 }153 .typography {154 display: flex; align-items: center; gap: 24px;155 }156 .aa { font-size: 140px; font-weight: 700; color:#222; line-height: 1; }157 .default-label { font-size: 40px; color:#444; }158 .dots { margin-top: 8px; display:flex; gap:16px; }159 .dots span { width: 14px; height: 14px; background:#999; border-radius:50%; display:inline-block; }160 161 .themes { display:flex; align-items:center; gap: 40px; }162 .theme-circle {163 width: 96px; height: 96px; border-radius: 50%;164 border: 4px solid rgba(0,0,0,0.15);165 }166 .t-green { background:#eaf6e7; box-shadow: inset 0 0 0 8px #8ec173; }167 .t-beige { background:#e6dac5; }168 .t-black { background:#000; border-color:#333; }169 170 .layouts { display:flex; gap:40px; }171 .layout-icon {172 width: 110px; height: 96px; border-radius: 12px;173 border: 6px solid #aaa; position: relative; background:#fff;174 display:flex; align-items:center; justify-content:center; color:#777; font-size: 54px; font-weight: 700;175 }176 .layout-icon.lines:before {177 content:""; width: 70%; height: 4px; background:#aaa; position:absolute; top:22px; left:15%;178 box-shadow: 0 20px 0 #aaa, 0 40px 0 #aaa, 0 60px 0 #aaa;179 }180 181 .reader-bottom {182 margin-top: 30px;183 display:flex; align-items:center; justify-content: space-between;184 }185 .zoom {186 display:flex; gap: 30px; align-items:center;187 }188 .round-btn {189 width: 84px; height: 84px; border-radius:50%; background:#fff; border:4px solid #bfbfbf;190 display:flex; align-items:center; justify-content:center; font-size: 56px; color:#333;191 box-shadow: 0 2px 0 rgba(0,0,0,0.06);192 }193 .slider {194 width: 180px; height: 12px; background:#d5d5d5; border-radius: 8px;195 }196 197 /* Gesture bar */198 .gesture {199 position: absolute;200 bottom: 20px;201 left: 0;202 width: 100%;203 height: 100px;204 background: #000;205 }206 .gesture .pill {207 width: 280px; height: 14px; background:#fff; border-radius: 10px;208 margin: 0 auto; position: relative; top: 40px;209 }210</style>211</head>212<body>213<div id="render-target">214 <!-- Status bar -->215 <div class="statusbar">216 <div class="status-time">3:49</div>217 <div class="status-icons">218 <div class="dot-icon"></div>219 <div class="battery"><div class="battery-level"></div></div>220 </div>221 </div>222 223 <!-- App bar -->224 <div class="appbar">225 <div class="icon-btn" aria-label="Back">226 <svg viewBox="0 0 24 24">227 <path d="M15 18L9 12l6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>228 </svg>229 </div>230 <div class="app-title">The War of the Wo...</div>231 <div class="app-actions">232 <div class="icon-btn" aria-label="Search">233 <svg viewBox="0 0 24 24">234 <circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"></circle>235 <path d="M20 20l-4-4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"></path>236 </svg>237 </div>238 <div class="icon-btn" aria-label="Bookmark">239 <svg viewBox="0 0 24 24">240 <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#222" stroke-width="2"></path>241 </svg>242 </div>243 <div class="icon-btn" aria-label="Settings">244 <svg viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"></circle>246 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M16.9 16.9l2.1 2.1M4.9 19.1l2.1-2.1M16.9 7.1l2.1-2.1" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"></path>247 </svg>248 </div>249 </div>250 </div>251 252 <!-- Content -->253 <div class="content">254 <p>Herbert George Wells, better known as H. G. Wells, was an English writer best known for such science fiction novels as The Time Machine, The War of the Worlds, The Invisible Man and The Island of Doctor Moreau. He was a prolific writer of both fiction and non-fiction, and produced works in many different genres, including contemporary novels, history, and social commentary. He was also an outspoken socialist.</p>255 <p>His later works become increasingly political and didactic, and only his early science fiction novels are widely read today. Wells, along with Hugo Gernsback and Jules Verne, is sometimes referred to as "The Father of Science Fiction". <span class="source">Source: Wikipedia</span></p>256 257 <div class="section-title">Also available on Feedbooks Wells:</div>258 <ul class="links">259 <li><a href="#">The Time Machine</a> (1895)</li>260 <li><a href="#">A Modern Utopia</a> (1905)</li>261 <li><a href="#">The Invisible Man</a> (1897)</li>262 <li><a href="#">Tales of Space and Time</a> (1900)</li>263 </ul>264 </div>265 266 <!-- Premium + controls -->267 <div class="premium-wrap">268 <div class="handle"></div>269 <div class="premium-banner">270 <div class="premium-left">271 <div class="premium-logo">m</div>272 <div class="premium-text">Go Premium</div>273 </div>274 <div class="upgrade-btn">UPGRADE</div>275 </div>276 277 <div class="reader-panel">278 <div class="reader-top">279 <div class="typography">280 <div class="aa">Aa</div>281 <div>282 <div class="default-label">Default</div>283 <div class="dots"><span></span><span></span><span></span></div>284 </div>285 </div>286 <div class="themes">287 <div class="theme-circle t-green"></div>288 <div class="theme-circle t-beige"></div>289 <div class="theme-circle t-black"></div>290 </div>291 <div class="layouts">292 <div class="layout-icon lines"></div>293 <div class="layout-icon">][</div>294 <div class="layout-icon">▦</div>295 </div>296 </div>297 298 <div class="reader-bottom">299 <div class="zoom">300 <div class="round-btn">−</div>301 <div class="round-btn">+</div>302 </div>303 <div class="slider"></div>304 <div style="width: 120px;"></div>305 </div>306 </div>307 </div>308 309 <!-- Gesture bar -->310 <div class="gesture"><div class="pill"></div></div>311</div>312</body>313</html>