GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Reader UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#f5f5f5;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, serif;14    color:#222;15  }16 17  /* Status bar */18  .status {19    position:absolute; top:0; left:0; right:0; height:120px;20    background:#000;21    color:#fff;22    display:flex; align-items:center; justify-content:space-between;23    padding:0 26px;24    box-sizing:border-box;25    font-size:40px; font-weight:600;26    letter-spacing:0.5px;27  }28  .status .icons { display:flex; align-items:center; gap:26px; }29  .s-rect { width:36px; height:36px; background:#fff; border-radius:6px; opacity:.95; }30  .s-dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:.95; }31 32  /* Top app bar */33  .appbar {34    position:absolute; top:120px; left:0; right:0; height:150px;35    background:#fff;36    display:flex; align-items:center; justify-content:space-between;37    padding:0 28px;38    box-sizing:border-box;39    box-shadow:0 1px 0 rgba(0,0,0,.06);40  }41  .left-actions, .right-actions { display:flex; align-items:center; gap:28px; }42  .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:50%; }43  .icon-btn svg { width:54px; height:54px; fill:#616161; stroke:#616161; }44 45  .content {46    position:absolute; top:270px; left:0; right:0; bottom:0;47  }48 49  /* Side peeking cards */50  .peek-card {51    position:absolute; top:340px; width:250px; height:1120px;52    background:#ffffff;53    border-radius:26px;54    box-shadow:0 10px 24px rgba(0,0,0,.12);55    color:#9e9e9e;56    padding:38px;57    box-sizing:border-box;58    font-size:28px; line-height:44px;59  }60  .peek-left { left:28px; }61  .peek-right { right:28px; }62 63  /* Main reading card */64  .card {65    position:absolute; top:320px; left:140px; right:140px;66    background:#ffffff;67    border-radius:28px;68    box-shadow:0 12px 30px rgba(0,0,0,.15);69    padding:56px 58px 42px 58px;70    box-sizing:border-box;71  }72  .reading {73    font-family: Georgia, "Times New Roman", serif;74    font-size:40px;75    line-height:1.6;76    color:#222;77  }78  .reading p { margin:0 0 28px 0; text-indent:34px; }79  .reading p:first-child { text-indent:0; }80  .meta {81    margin-top:26px;82    color:#757575;83    font-size:28px;84    display:flex; align-items:center; justify-content:space-between;85  }86 87  /* Buy button */88  .buy-wrap {89    position:absolute; top:1620px; left:0; right:0;90    display:flex; justify-content:center;91  }92  .buy-btn {93    background:#1976d2; color:#fff; border-radius:18px;94    padding:28px 60px; font-size:42px; font-weight:600;95    box-shadow:0 8px 18px rgba(25,118,210,.35);96  }97 98  /* Bottom controls */99  .bottom-area {100    position:absolute; left:0; right:0; bottom:170px;101    height:260px;102  }103  .bookmark-fab {104    position:absolute; left:300px; top:-40px;105    width:64px; height:64px; border-radius:10px;106    background:#1976d2; display:flex; align-items:center; justify-content:center;107    box-shadow:0 6px 14px rgba(0,0,0,.25);108  }109  .bookmark-fab svg { width:40px; height:40px; fill:#fff; }110 111  .controls {112    position:absolute; left:60px; right:60px; bottom:110px;113    display:flex; align-items:center; justify-content:space-between;114  }115  .hamburger { width:88px; height:88px; display:flex; align-items:center; justify-content:center; }116  .hamburger svg { width:60px; height:60px; stroke:#424242; fill:none; stroke-width:6; }117  .progress {118    flex:1; margin:0 24px; position:relative; height:18px;119  }120  .track {121    position:absolute; top:50%; transform:translateY(-50%);122    left:0; right:0; height:8px; background:#e0e0e0; border-radius:6px;123  }124  .thumb {125    position:absolute; left:18%; top:50%; transform:translate(-50%, -50%);126    width:40px; height:40px; background:#1976d2; border-radius:50%;127    box-shadow:0 2px 6px rgba(0,0,0,.25);128  }129  .page-count {130    width:180px; text-align:right; color:#616161; font-size:34px;131  }132 133  /* Gesture bar */134  .gesture {135    position:absolute; left:50%; transform:translateX(-50%);136    bottom:60px; width:360px; height:14px; background:#cfcfcf; border-radius:10px;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status">145    <div>6:18</div>146    <div class="icons">147      <div class="s-rect"></div>148      <div class="s-rect" style="border-radius:50%"></div>149      <div class="s-rect"></div>150      <div class="s-rect"></div>151      <div class="s-dot"></div>152      <div class="s-rect" style="width:22px;height:38px;border-radius:4px;"></div>153    </div>154  </div>155 156  <!-- App bar -->157  <div class="appbar">158    <div class="left-actions">159      <div class="icon-btn">160        <svg viewBox="0 0 24 24">161          <path d="M15.5 4.5 L7 12 L15.5 19.5" stroke="#616161" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>162        </svg>163      </div>164    </div>165    <div class="right-actions">166      <div class="icon-btn" title="Search">167        <svg viewBox="0 0 24 24">168          <circle cx="11" cy="11" r="6.5" stroke="#616161" stroke-width="2.5" fill="none"/>169          <path d="M16.5 16.5 L21 21" stroke="#616161" stroke-width="2.5" stroke-linecap="round"/>170        </svg>171      </div>172      <div style="font-size:46px; color:#616161;">Aa</div>173      <div class="icon-btn" title="More">174        <svg viewBox="0 0 24 24">175          <circle cx="5" cy="12" r="2" />176          <circle cx="12" cy="12" r="2" />177          <circle cx="19" cy="12" r="2" />178        </svg>179      </div>180    </div>181  </div>182 183  <!-- Content - peeking cards -->184  <div class="peek-card peek-left">…</div>185  <div class="peek-card peek-right">…</div>186 187  <!-- Main reading card -->188  <div class="card">189    <div class="reading">190      <p>picture… that looks and feels like a documentary film and… has a hard, truthful ring,” Steinbeck reported after seeing its Hollywood preview.) Recently, Frank Galati faithfully adapted the novel for his Chicago-based Steppenwolf Company, whose Broadway production won a Tony Award as Best Play in 1990. The Grapes of Wrath has also been translated into nearly thirty languages. It seems that Steinbeck’s words continue, in Warren French’s apt phrase, “the education of the heart.”</p>191      <p>Every strong novel redefines our conception of the genre’s dimensions and reorders our awareness of its possibilities. Like other products of rough-hewn American genius—Harriet Beecher Stowe’s Uncle Tom’s Cabin, Mark Twain’s Adventures of Huckleberry Finn, and Alice Walker’s The Color Purple (three other “flawed” novels that also humanize America’s…</p>192    </div>193    <div class="meta">194      <span>65 pages left in sample</span>195      <span>2%</span>196    </div>197  </div>198 199  <!-- Buy button -->200  <div class="buy-wrap">201    <div class="buy-btn">Buy ₹309.13</div>202  </div>203 204  <!-- Bottom reading controls -->205  <div class="bottom-area">206    <div class="bookmark-fab" title="Bookmark">207      <svg viewBox="0 0 24 24">208        <path d="M6 2 h12 a2 2 0 0 1 2 2 v18 l-8-4 -8 4 V4 a2 2 0 0 1 2-2 z"/>209      </svg>210    </div>211 212    <div class="controls">213      <div class="hamburger" title="Contents">214        <svg viewBox="0 0 24 24">215          <path d="M3 6 H21 M3 12 H21 M3 18 H14" stroke-linecap="round"/>216        </svg>217      </div>218      <div class="progress">219        <div class="track"></div>220        <div class="thumb"></div>221      </div>222      <div class="page-count">12 / 723</div>223    </div>224  </div>225 226  <!-- Gesture bar -->227  <div class="gesture"></div>228 229</div>230</body>231</html>