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>Document Viewer - Romeo and Juliet</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top dark area: status bar + app bar */23  .top-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    background: #424242;29    color: #fff;30    box-shadow: 0 2px 6px rgba(0,0,0,0.25);31  }32  .status-bar {33    height: 110px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    padding: 0 36px;38    font-size: 36px;39    letter-spacing: 0.2px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 28px;45    font-size: 40px;46  }47  .moon {48    width: 38px; height: 38px;49    border-radius: 50%;50    border: 2px solid #fff;51    position: relative;52    display: inline-block;53  }54  .moon::after {55    content: "";56    position: absolute;57    right: 4px; top: 4px;58    width: 20px; height: 20px;59    background: #424242;60    border-radius: 50%;61  }62 63  .app-bar {64    height: 150px;65    display: flex;66    align-items: center;67    gap: 28px;68    padding: 0 28px 0 24px;69  }70  .app-title {71    font-size: 48px;72    font-weight: 600;73    color: #fff;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77    max-width: 880px;78  }79  .icon-btn {80    width: 72px;81    height: 72px;82    display: flex;83    align-items: center;84    justify-content: center;85  }86 87  /* Content area */88  .page {89    position: absolute;90    top: 260px; /* status (110) + app (150) */91    left: 0;92    right: 0;93    bottom: 360px; /* toolbars + gesture area */94    padding: 40px 60px 240px 60px;95    overflow: hidden;96    background: #ffffff;97  }98  .play-text {99    font-family: Georgia, "Times New Roman", Times, serif;100    font-size: 64px;101    line-height: 108px;102    color: #222;103  }104  .stage-dir {105    font-family: Georgia, "Times New Roman", Times, serif;106    font-style: italic;107    font-size: 58px;108    line-height: 96px;109    color: #333;110    text-align: right;111    margin: 40px 20px;112  }113 114  /* Bottom tools */115  .tools-wrap {116    position: absolute;117    left: 0;118    bottom: 160px;119    width: 1080px;120  }121  .slider-bar {122    height: 150px;123    background: #3f3f3f;124    display: flex;125    align-items: center;126    padding: 0 36px;127    color: #fff;128    gap: 24px;129  }130  .slider-container {131    flex: 1;132    display: flex;133    align-items: center;134    gap: 24px;135  }136  .slider-track {137    position: relative;138    width: 720px;139    height: 6px;140    background: #607d8b;141    border-radius: 3px;142  }143  .slider-thumb {144    position: absolute;145    top: -16px;146    left: 34px; /* near the left, low zoom */147    width: 40px;148    height: 40px;149    background: #ffffff;150    border-radius: 50%;151    box-shadow: 0 2px 4px rgba(0,0,0,0.35);152  }153  .slider-percent {154    font-size: 42px;155    opacity: 0.9;156    margin-left: auto;157    margin-right: 4px;158  }159 160  .tool-bar {161    height: 160px;162    background: #3f3f3f;163    display: flex;164    align-items: center;165    justify-content: space-around;166    color: #fff;167    padding: 0 40px;168  }169 170  .gesture {171    position: absolute;172    bottom: 64px;173    left: 50%;174    transform: translateX(-50%);175    width: 360px;176    height: 16px;177    background: #eaeaea;178    border-radius: 24px;179  }180 181  /* Simple helpers for SVG icons */182  svg { display: block; }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Top dark status + app bar -->189  <div class="top-bar">190    <div class="status-bar">191      <div style="display:flex; align-items:center; gap:20px;">192        <span>1:00</span>193        <span class="moon"></span>194      </div>195      <div class="status-right">196        <span title="Wi‑Fi">📶</span>197        <!-- Battery -->198        <svg width="56" height="36" viewBox="0 0 32 20" aria-label="Battery">199          <rect x="1" y="3" width="26" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>200          <rect x="28" y="7" width="3" height="6" rx="1" fill="#fff"/>201          <rect x="3" y="5" width="18" height="10" fill="#fff"/>202        </svg>203      </div>204    </div>205    <div class="app-bar">206      <!-- Back -->207      <div class="icon-btn">208        <svg width="54" height="54" viewBox="0 0 24 24" aria-label="Back">209          <path d="M15 5 L8 12 L15 19" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210        </svg>211      </div>212      <div class="app-title">Romeo and Juliet - William Shakespe...</div>213      <!-- Kebab -->214      <div class="icon-btn" style="margin-left:auto;">215        <svg width="54" height="54" viewBox="0 0 24 24" aria-label="Menu">216          <circle cx="12" cy="5" r="2" fill="#fff"/>217          <circle cx="12" cy="12" r="2" fill="#fff"/>218          <circle cx="12" cy="19" r="2" fill="#fff"/>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Main reading content -->225  <div class="page">226    <div class="play-text">227      <div>To know our farther pleasure</div>228      <div>in this case,</div>229      <div>To old Free-town, our</div>230      <div>common judgement-place.</div>231      <div>Once more, on pain of death,</div>232      <div>all men depart.</div>233    </div>234 235    <div class="stage-dir">[Exeunt Prince and<br>236      Attendants; Capulet, Lady<br>237      Capulet, Tybalt, Citizens and<br>238      Servants.]</div>239 240    <div class="play-text">241      <div>MONTAGUE.</div>242      <div>Who set this ancient quarrel</div>243      <div>new abroach?</div>244      <div>Speak, nephew, were you by</div>245      <div>when it began?</div>246 247      <div style="margin-top:60px;">BENVOLIO.</div>248      <div>Here were the servants of</div>249      <div>...</div>250    </div>251  </div>252 253  <!-- Bottom toolbars -->254  <div class="tools-wrap">255    <!-- Slider bar -->256    <div class="slider-bar">257      <!-- Left chevron -->258      <div class="icon-btn">259        <svg width="50" height="50" viewBox="0 0 24 24" aria-label="Prev">260          <path d="M15 5 L8 12 L15 19" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262      </div>263 264      <div class="slider-container">265        <div class="slider-track">266          <div class="slider-thumb"></div>267        </div>268      </div>269 270      <div class="slider-percent">6.6%</div>271 272      <!-- Right chevron -->273      <div class="icon-btn">274        <svg width="50" height="50" viewBox="0 0 24 24" aria-label="Next">275          <path d="M9 5 L16 12 L9 19" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276        </svg>277      </div>278    </div>279 280    <!-- Icon bar -->281    <div class="tool-bar">282      <!-- Device icon -->283      <div class="icon-btn">284        <svg width="64" height="64" viewBox="0 0 24 24" aria-label="Device">285          <rect x="5" y="2" width="14" height="20" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>286          <rect x="10" y="18" width="4" height="1.8" fill="#fff"/>287        </svg>288      </div>289 290      <!-- Circle with slash (disable/annotation) -->291      <div class="icon-btn">292        <svg width="64" height="64" viewBox="0 0 24 24" aria-label="Disable">293          <circle cx="12" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2"/>294          <path d="M6 6 L18 18" stroke="#fff" stroke-width="2"/>295        </svg>296      </div>297 298      <!-- Vertical align icon -->299      <div class="icon-btn">300        <svg width="64" height="64" viewBox="0 0 24 24" aria-label="Align">301          <path d="M12 4 L12 20" stroke="#fff" stroke-width="2"/>302          <path d="M8 8 L12 4 L16 8" stroke="#fff" stroke-width="2" fill="none"/>303          <path d="M8 16 L12 20 L16 16" stroke="#fff" stroke-width="2" fill="none"/>304          <rect x="6" y="11" width="12" height="2" fill="#fff"/>305        </svg>306      </div>307 308      <!-- List bullets -->309      <div class="icon-btn">310        <svg width="64" height="64" viewBox="0 0 24 24" aria-label="List">311          <circle cx="5" cy="6" r="1.6" fill="#fff"/>312          <circle cx="5" cy="12" r="1.6" fill="#fff"/>313          <circle cx="5" cy="18" r="1.6" fill="#fff"/>314          <rect x="8" y="5" width="12" height="2" fill="#fff"/>315          <rect x="8" y="11" width="12" height="2" fill="#fff"/>316          <rect x="8" y="17" width="12" height="2" fill="#fff"/>317        </svg>318      </div>319 320      <!-- More (kebab) -->321      <div class="icon-btn">322        <svg width="64" height="64" viewBox="0 0 24 24" aria-label="More">323          <circle cx="12" cy="5" r="2" fill="#fff"/>324          <circle cx="12" cy="12" r="2" fill="#fff"/>325          <circle cx="12" cy="19" r="2" fill="#fff"/>326        </svg>327      </div>328    </div>329  </div>330 331  <!-- Gesture pill -->332  <div class="gesture"></div>333 334</div>335</body>336</html>