GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>The War of the Wo… - Reader</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; border-radius:0; box-shadow:none;10 }11 /* Top status bar */12 .status-bar {13 position:absolute; top:0; left:0; width:100%; height:120px;14 background:#000; color:#fff; padding:0 32px; box-sizing:border-box;15 display:flex; align-items:center; justify-content:space-between;16 font-size:42px;17 }18 .status-right { display:flex; align-items:center; gap:24px; }19 .dot { width:18px; height:18px; background:#fff; border-radius:50%; opacity:0.9; display:inline-block; }20 /* Header */21 .header {22 position:absolute; top:120px; left:0; width:100%; height:120px;23 display:flex; align-items:center; padding:0 32px; box-sizing:border-box;24 border-bottom:1px solid #e6e6e6; background:#fff;25 }26 .header-title {27 font-size:60px; font-weight:700; color:#1a1a1a; margin-left:20px;28 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;29 max-width:720px;30 }31 .header-icons { margin-left:auto; display:flex; align-items:center; gap:36px; }32 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }33 .icon-btn svg { width:56px; height:56px; stroke:#222; fill:none; stroke-width:36; }34 .back-btn svg { width:60px; height:60px; stroke:#222; }35 /* Content */36 .content {37 position:absolute; top:240px; left:0; right:0; bottom:360px;38 padding:32px 40px 240px 40px; box-sizing:border-box; overflow:hidden;39 }40 .para {41 font-size:44px; line-height:1.55; color:#2a2a2a; margin-bottom:26px;42 }43 .source { color:#666; }44 .section-title {45 font-size:52px; font-weight:800; color:#111; margin-top:24px; margin-bottom:18px;46 }47 .book-list { list-style:disc; padding-left:56px; margin:0; }48 .book-list li {49 font-size:52px; line-height:1.6; color:#2f6cf7; margin:6px 0;50 }51 .year { color:#333; margin-left:16px; }52 /* Bottom overlay */53 .premium {54 position:absolute; left:0; bottom:0; width:100%; height:360px;55 background:linear-gradient(90deg,#6fbe77,#3fb096);56 border-top-left-radius:24px; border-top-right-radius:24px;57 padding:28px 32px; box-sizing:border-box; color:#fff;58 }59 .premium-top {60 display:flex; align-items:center; justify-content:space-between;61 font-size:42px; margin-bottom:20px;62 }63 .slider-line {64 position:relative; width:100%; height:14px; background:rgba(255,255,255,0.5);65 border-radius:8px; margin-top:10px;66 }67 .slider-knob {68 position:absolute; left:50%; top:-12px; width:36px; height:36px; border-radius:50%;69 background:#fff; transform:translateX(-50%);70 }71 .premium-body {72 display:flex; align-items:center; justify-content:space-between; margin-top:12px;73 }74 .m-logo {75 width:96px; height:96px; border-radius:16px; background:#ffffff;76 color:#2f8f6d; display:flex; align-items:center; justify-content:center;77 font-weight:800; font-size:60px; margin-right:24px;78 }79 .premium-text { font-size:54px; font-weight:700; }80 .upgrade-btn {81 background:#ffffff; color:#177a63; padding:18px 36px; border-radius:48px;82 font-size:46px; font-weight:800; border:2px solid rgba(0,0,0,0.1);83 }84 .bottom-tools {85 position:absolute; left:0; bottom:22px; width:100%;86 display:flex; align-items:center; justify-content:space-around;87 padding:0 42px; box-sizing:border-box;88 }89 .tool {90 display:flex; flex-direction:column; align-items:center; color:#e6fff6;91 font-size:40px;92 }93 .tool svg { width:60px; height:60px; fill:none; stroke:#fff; stroke-width:36; }94 .tool-label { margin-top:8px; font-size:40px; color:#ffffff; opacity:0.95; }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status Bar -->101 <div class="status-bar">102 <div>3:48</div>103 <div class="status-right">104 <span class="dot"></span>105 <span class="dot" style="opacity:0.7;"></span>106 <span style="width:120px; height:36px; background:#fff; display:inline-block; border-radius:8px;"></span>107 </div>108 </div>109 110 <!-- Header -->111 <div class="header">112 <div class="back-btn icon-btn">113 <svg viewBox="0 0 24 24">114 <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/>115 </svg>116 </div>117 <div class="header-title">The War of the Wo…</div>118 <div class="header-icons">119 <div class="icon-btn">120 <svg viewBox="0 0 24 24">121 <circle cx="10" cy="10" r="6"></circle>122 <path d="M15 15 L22 22" stroke-linecap="round"/>123 </svg>124 </div>125 <div class="icon-btn">126 <svg viewBox="0 0 24 24">127 <path d="M6 3 H18 V21 L12 17 L6 21 Z" stroke-linejoin="round"/>128 </svg>129 </div>130 <div class="icon-btn">131 <svg viewBox="0 0 24 24">132 <circle cx="12" cy="12" r="8"></circle>133 <path d="M12 8 V12 L15 14" stroke-linecap="round"/>134 </svg>135 </div>136 </div>137 </div>138 139 <!-- Content -->140 <div class="content">141 <p class="para">142 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.143 </p>144 <p class="para">145 He was also an outspoken socialist. 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>146 </p>147 148 <div class="section-title">Also available on Feedbooks Wells:</div>149 <ul class="book-list">150 <li>The Time Machine <span class="year">(1895)</span></li>151 <li>A Modern Utopia <span class="year">(1905)</span></li>152 <li>The Invisible Man <span class="year">(1897)</span></li>153 <li>Tales of Space and Time <span class="year">(1900)</span></li>154 <li>The Island of Dr. Moreau <span class="year">(1896)</span></li>155 <li>The Food of the Gods and How It Came to Earth <span class="year">(1904)</span></li>156 <li>The Sleeper Awakes <span class="year">(1910)</span></li>157 <li>The Story of the Inexperienced Ghost <span class="year">(1902)</span></li>158 <li>The First Men in the Moon <span class="year">(1901)</span></li>159 </ul>160 </div>161 162 <!-- Bottom Premium Overlay -->163 <div class="premium">164 <div class="premium-top">165 <div>About</div>166 <div>p.1 of 199 • 0%</div>167 </div>168 <div class="slider-line">169 <div class="slider-knob"></div>170 </div>171 172 <div class="premium-body">173 <div style="display:flex; align-items:center;">174 <div class="m-logo">m</div>175 <div class="premium-text">Go Premium</div>176 </div>177 <div class="upgrade-btn">UPGRADE</div>178 </div>179 180 <div class="bottom-tools">181 <div class="tool">182 <svg viewBox="0 0 24 24">183 <path d="M4 6 H20 M4 12 H20 M4 18 H20" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="tool">187 <div class="tool-label">Aa</div>188 </div>189 <div class="tool">190 <svg viewBox="0 0 24 24">191 <circle cx="6" cy="12" r="3"></circle>192 <circle cx="12" cy="6" r="3"></circle>193 <circle cx="18" cy="12" r="3"></circle>194 <path d="M7 11 L11 7 M13 7 L17 11" stroke-linecap="round"/>195 </svg>196 </div>197 <div class="tool">198 <svg viewBox="0 0 24 24">199 <path d="M6 3 H18 V21 H6 Z" />200 <path d="M6 9 H18" />201 </svg>202 </div>203 <div class="tool">204 <svg viewBox="0 0 24 24">205 <path d="M4 8 V16 C4 19 7 21 12 21 C17 21 20 19 20 16 V8" />206 <path d="M4 8 C4 5 7 3 12 3 C17 3 20 5 20 8" />207 </svg>208 </div>209 </div>210 </div>211 212</div>213</body>214</html>