GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>PDF Viewer - Chapter Page</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: "Roboto", Arial, sans-serif;15    color: #212121;16  }17 18  /* Top system/status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #000000;26  }27 28  /* App toolbar */29  .app-bar {30    position: absolute;31    top: 110px;32    left: 0;33    width: 1080px;34    height: 140px;35    background: #1F1F1F;36    display: flex;37    align-items: center;38    padding: 0 36px;39    box-sizing: border-box;40    color: #EEE;41    gap: 32px;42  }43  .icon {44    width: 64px;45    height: 64px;46    fill: #E0E0E0;47  }48  .button-chip {49    background: #1976D2;50    color: #fff;51    font-weight: 600;52    font-size: 38px;53    padding: 16px 28px;54    border-radius: 16px;55  }56  .spacer { flex: 1; }57  .kebab { margin-left: 12px; }58 59  /* Page canvas */60  .page {61    position: absolute;62    top: 270px; /* below app bar */63    left: 0;64    width: 1080px;65    height: 1680px;66    background: #ffffff;67    box-sizing: border-box;68    padding: 36px 72px 160px 72px;69  }70  .top-divider {71    width: 100%;72    height: 4px;73    background: #CFCFCF;74    margin-bottom: 28px;75  }76  .chapter-title {77    font-family: "Georgia", "Times New Roman", serif;78    font-weight: 700;79    font-size: 92px;80    color: #000;81    margin: 16px 0 14px 0;82  }83  .underline {84    width: 260px;85    height: 12px;86    background: #FFCC00;87    border-radius: 6px;88    margin-bottom: 48px;89  }90  .subhead {91    font-family: "Georgia", "Times New Roman", serif;92    font-size: 44px;93    font-weight: 700;94    letter-spacing: 1px;95    margin-bottom: 36px;96  }97  .p {98    font-family: "Georgia", "Times New Roman", serif;99    font-size: 40px;100    line-height: 1.7;101    color: #111;102    margin-bottom: 28px;103  }104 105  /* Page number pill on right */106  .page-pill {107    position: absolute;108    top: 340px;109    right: -14px;110    width: 140px;111    height: 80px;112    background: #2A2A2A;113    color: #fff;114    border-radius: 40px;115    display: flex;116    align-items: center;117    justify-content: center;118    font-weight: 700;119    font-size: 40px;120    box-shadow: 0 4px 10px rgba(0,0,0,0.25);121  }122 123  /* Snackbar */124  .snackbar {125    position: absolute;126    bottom: 220px;127    left: 24px;128    width: 1032px;129    min-height: 120px;130    background: #0F9D58;131    color: #fff;132    border-radius: 12px;133    display: flex;134    align-items: center;135    padding: 24px 28px;136    box-sizing: border-box;137    gap: 22px;138    box-shadow: 0 6px 16px rgba(0,0,0,0.25);139  }140  .snackbar .msg {141    font-size: 36px;142    line-height: 1.4;143    flex: 1;144  }145  .snackbar .close {146    width: 44px;147    height: 44px;148    border-radius: 50%;149    border: 2px solid rgba(255,255,255,0.75);150    display: flex;151    align-items: center;152    justify-content: center;153    font-weight: 700;154    font-size: 28px;155    opacity: 0.9;156  }157 158  /* Bottom annotation toolbar */159  .bottom-bar {160    position: absolute;161    bottom: 70px;162    left: 0;163    width: 1080px;164    height: 160px;165    background: #2B2B2B;166    display: flex;167    align-items: center;168    justify-content: space-around;169    color: #E0E0E0;170  }171  .bar-item {172    display: flex;173    flex-direction: column;174    align-items: center;175    gap: 12px;176    font-size: 28px;177  }178  .bar-icon {179    width: 64px;180    height: 64px;181    fill: #BDBDBD;182  }183 184  /* Android navigation pill */185  .nav-pill {186    position: absolute;187    bottom: 18px;188    left: 50%;189    transform: translateX(-50%);190    width: 220px;191    height: 18px;192    background: #CFCFCF;193    border-radius: 12px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <div class="status-bar"></div>201 202  <div class="app-bar">203    <!-- Back -->204    <svg class="icon" viewBox="0 0 24 24">205      <path d="M15 18l-6-6 6-6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206    </svg>207 208    <div class="button-chip">SHARED</div>209 210    <!-- Document -->211    <svg class="icon" viewBox="0 0 24 24">212      <path d="M7 3h7l5 5v13H7z" fill="#E0E0E0"/>213      <path d="M14 3v6h6" fill="#1F1F1F"/>214    </svg>215 216    <!-- Search -->217    <svg class="icon" viewBox="0 0 24 24">218      <circle cx="11" cy="11" r="6" stroke="#E0E0E0" stroke-width="2" fill="none"/>219      <path d="M20 20l-4.5-4.5" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"/>220    </svg>221 222    <!-- Filter -->223    <svg class="icon" viewBox="0 0 24 24">224      <path d="M3 5h18l-7 8v6l-4-2v-4z" fill="#E0E0E0"/>225    </svg>226 227    <!-- Share -->228    <svg class="icon" viewBox="0 0 24 24">229      <circle cx="6" cy="12" r="3" fill="#E0E0E0"/>230      <circle cx="18" cy="6" r="3" fill="#E0E0E0"/>231      <circle cx="18" cy="18" r="3" fill="#E0E0E0"/>232      <path d="M9 12l6-6M9 12l6 6" stroke="#E0E0E0" stroke-width="2" fill="none"/>233    </svg>234 235    <div class="spacer"></div>236 237    <!-- Kebab -->238    <svg class="icon kebab" viewBox="0 0 24 24">239      <circle cx="12" cy="5" r="2" fill="#E0E0E0"/>240      <circle cx="12" cy="12" r="2" fill="#E0E0E0"/>241      <circle cx="12" cy="19" r="2" fill="#E0E0E0"/>242    </svg>243  </div>244 245  <div class="page">246    <div class="top-divider"></div>247 248    <div class="chapter-title">Chapter 2</div>249    <div class="underline"></div>250 251    <div class="subhead">LOG ENTRY: SOL 7</div>252 253    <div class="p">Ok, I’ve had a good night’s sleep, and things don’t seem as hopeless as they did yesterday.</div>254    <div class="p">Today I took stock of supplies, and did a quick EVA to check up on the external equipment. Here’s my situation:</div>255    <div class="p">The surface mission was supposed to be 31 days. For redundancy, the supply probes had enough food to last the whole crew 56 days. That way if one or two probes had problems, we'd still have enough food to complete the mission.</div>256    <div class="p">We were six days in when all hell broke loose, so that leaves enough food to feed six people for 50 days. I’m just one guy, so it’ll last me 300 days. And that’s if I don’t ration it. So I’ve got a fair bit of time.</div>257    <div class="p">The Hab stood up to the storm without any problems. Outside, things aren’t so rosy. I can’t find the satellite dish; it probably got blown kilometers away.</div>258    <div class="p">The MAV is gone, of course. My crewmates took it up to Hermes. Though the bottom half (the landing stage) is still there. No reason to take that back up when weight is the enemy. It includes the landing gear, the fuel plant, and anything else NASA figured it wouldn’t need for the trip back up to orbit.</div>259    <div class="p">The MDV is on its side and there’s a breach in the hull. Looks like the storm ripped the cowling off the reserve chute (which we didn’t have to use on landing). Once the chute was exposed it dragged the MDV all over the place, smashing it against every rock in the area.</div>260  </div>261 262  <div class="page-pill">8</div>263 264  <div class="snackbar">265    <svg class="icon" viewBox="0 0 24 24">266      <circle cx="12" cy="12" r="10" fill="none" stroke="#FFFFFF" stroke-width="2"/>267      <path d="M7 12l3 3 7-7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>268    </svg>269    <div class="msg">Link copied. Your name and email address will be visible to anyone with the link.</div>270    <div class="close">×</div>271  </div>272 273  <div class="bottom-bar">274    <div class="bar-item">275      <svg class="bar-icon" viewBox="0 0 24 24">276        <path d="M4 20l6-2 10-10-4-4-10 10z" fill="#BDBDBD"/>277      </svg>278      <div>Draw</div>279    </div>280    <div class="bar-item">281      <svg class="bar-icon" viewBox="0 0 24 24">282        <path d="M5 5h14v4H5zm0 6h10v4H5z" fill="#BDBDBD"/>283      </svg>284      <div>Text</div>285    </div>286    <div class="bar-item">287      <svg class="bar-icon" viewBox="0 0 24 24">288        <text x="4" y="18" font-size="16" fill="#BDBDBD" font-family="Arial" font-weight="700">T</text>289      </svg>290      <div>Title</div>291    </div>292    <div class="bar-item">293      <svg class="bar-icon" viewBox="0 0 24 24">294        <path d="M4 5h16v10H8l-4 4z" fill="#BDBDBD"/>295      </svg>296      <div>Comment</div>297    </div>298    <div class="bar-item">299      <svg class="bar-icon" viewBox="0 0 24 24">300        <circle cx="6" cy="12" r="3" fill="#BDBDBD"/>301        <circle cx="18" cy="6" r="3" fill="#BDBDBD"/>302        <circle cx="18" cy="18" r="3" fill="#BDBDBD"/>303        <path d="M9 12l6-6M9 12l6 6" stroke="#BDBDBD" stroke-width="2" fill="none"/>304      </svg>305      <div>Share</div>306    </div>307    <div class="bar-item">308      <svg class="bar-icon" viewBox="0 0 24 24">309        <circle cx="12" cy="5" r="2" fill="#BDBDBD"/>310        <circle cx="12" cy="12" r="2" fill="#BDBDBD"/>311        <circle cx="12" cy="19" r="2" fill="#BDBDBD"/>312      </svg>313      <div>More</div>314    </div>315  </div>316 317  <div class="nav-pill"></div>318 319</div>320</body>321</html>