GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile Reading Screen - The War of the Worlds</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:120px; background:#000;17    color:#fff;18    display:flex; align-items:center;19    padding:0 32px;20    box-sizing:border-box;21  }22  .status-left { font-size:44px; font-weight:600; }23  .status-right { margin-left:auto; display:flex; gap:18px; align-items:center; }24  .status-dot { width:26px; height:26px; background:#fff; border-radius:50%; opacity:0.85; }25  .status-tiny { width:18px; height:18px; border-radius:50%; background:#fff; opacity:0.7; }26 27  /* Top app bar */28  .app-bar {29    position:absolute; top:120px; left:0; right:0;30    height:140px; background:#ffffff;31    display:flex; align-items:center;32    padding:0 28px;33    box-sizing:border-box;34    border-bottom:1px solid #e9e9e9;35  }36  .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }37  .title {38    font-size:54px; font-weight:700; color:#1a1a1a; margin-left:6px;39  }40  .app-actions { margin-left:auto; display:flex; gap:36px; align-items:center; }41  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; color:#2c2c2c; }42 43  /* Article content */44  .content {45    position:absolute; top:260px; left:0; right:0; bottom:0;46    padding:0 56px 520px 56px; /* leave space for bottom sheet */47    box-sizing:border-box;48    overflow:hidden;49  }50  .article {51    font-size:44px; line-height:74px; color:#1f1f1f;52    text-align:justify;53    word-spacing:14px;54  }55 56  /* Bottom sheet */57  .bottom-sheet {58    position:absolute; left:0; right:0; bottom:0;59    height:520px; background:#ffffff;60    border-top-left-radius:36px; border-top-right-radius:36px;61    box-shadow:0 -8px 24px rgba(0,0,0,0.12);62  }63  .premium-banner {64    position:absolute; left:24px; right:24px; top:-120px;65    height:160px; border-radius:28px;66    background:linear-gradient(90deg, #75b46f, #2a8b80);67    display:flex; align-items:center;68    padding:0 32px; box-sizing:border-box;69    color:#fff; font-weight:700; font-size:48px;70  }71  .upgrade-btn {72    margin-left:auto; background:#ffffff; color:#1a1a1a;73    padding:22px 34px; border-radius:50px; font-size:40px; font-weight:700;74    box-shadow:0 2px 6px rgba(0,0,0,0.15);75  }76  .sheet-content { padding:40px 56px; box-sizing:border-box; }77  .slider {78    width:160px; height:10px; background:#e5e5e5; border-radius:6px; position:relative; margin:0 auto 36px auto;79  }80  .slider::after { content:""; position:absolute; left:50%; top:-14px; width:48px; height:48px; background:#cfcfcf; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.2); }81  .font-row { display:flex; align-items:flex-end; gap:42px; }82  .font-big { font-size:150px; font-weight:700; color:#1a1a1a; line-height:1; }83  .font-caption { margin-top:18px; font-size:40px; color:#777; }84  .size-controls { margin-left:auto; display:flex; align-items:center; gap:32px; }85  .circ-btn { width:72px; height:72px; border-radius:36px; border:2px solid #c9c9c9; display:flex; align-items:center; justify-content:center; font-size:56px; color:#5a5a5a; }86  .theme-row { margin-top:28px; display:flex; gap:34px; align-items:center; }87  .theme { width:100px; height:100px; border-radius:50%; border:2px solid #c9c9c9; }88  .theme.green { background:#eaf6e4; }89  .theme.beige { background:#e7d9c3; }90  .theme.black { background:#000; }91  .align-row { margin-top:38px; display:flex; gap:40px; align-items:center; }92  .tool {93    width:120px; height:120px; border-radius:16px; border:3px solid #bfbfbf;94    display:flex; align-items:center; justify-content:center; color:#727272; font-size:64px; background:#f7f7f7;95  }96 97  /* Home indicator */98  .home-indicator {99    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);100    width:480px; height:18px; background:#000; border-radius:9px; opacity:0.8;101  }102 103  /* Simple icons */104  svg { display:block; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div class="status-left">3:49</div>113    <div class="status-right">114      <div class="status-dot"></div>115      <div class="status-dot"></div>116      <div class="status-tiny"></div>117    </div>118  </div>119 120  <!-- App Bar -->121  <div class="app-bar">122    <div class="back-btn">123      <svg width="64" height="64" viewBox="0 0 24 24">124        <path d="M15 6 L9 12 L15 18" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125      </svg>126    </div>127    <div class="title">The War of the Wo...</div>128    <div class="app-actions">129      <div class="icon-btn">130        <svg width="56" height="56" viewBox="0 0 24 24">131          <circle cx="11" cy="11" r="6.5" stroke="#222" stroke-width="2" fill="none"/>132          <path d="M17 17 L21 21" stroke="#222" stroke-width="2" stroke-linecap="round"/>133        </svg>134      </div>135      <div class="icon-btn">136        <svg width="56" height="56" viewBox="0 0 24 24">137          <path d="M6 4 H18 V21 L12 17 L6 21 Z" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>138        </svg>139      </div>140      <div class="icon-btn" style="font-size:52px;">⚙️</div>141    </div>142  </div>143 144  <!-- Article Content -->145  <div class="content">146    <div class="article">147      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.     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  often  referred  to  as  one  of  the  “fathers  of  science  fiction."148    </div>149  </div>150 151  <!-- Bottom Sheet with Premium Banner -->152  <div class="bottom-sheet">153    <div class="premium-banner">154      <div>Go Premium</div>155      <div class="upgrade-btn">UPGRADE</div>156    </div>157    <div class="sheet-content">158      <div class="slider"></div>159 160      <div class="font-row">161        <div class="font-big">Aa</div>162        <div>163          <div class="font-caption">Default</div>164          <div style="display:flex; gap:8px; margin-top:12px;">165            <div style="width:14px; height:14px; background:#999; border-radius:50%;"></div>166            <div style="width:14px; height:14px; background:#999; border-radius:50%;"></div>167            <div style="width:14px; height:14px; background:#999; border-radius:50%;"></div>168          </div>169        </div>170        <div class="size-controls">171          <div class="circ-btn">−</div>172          <div class="circ-btn">+</div>173        </div>174      </div>175 176      <div class="theme-row">177        <div class="theme green"></div>178        <div class="theme beige"></div>179        <div class="theme black"></div>180      </div>181 182      <div class="align-row">183        <div class="tool">☰</div>184        <div class="tool">][</div>185        <div class="tool">≡</div>186      </div>187    </div>188  </div>189 190  <!-- Home indicator -->191  <div class="home-indicator"></div>192</div>193</body>194</html>