GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Document 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: #000000;14    font-family: "Georgia", serif;15    color: #111;16  }17 18  /* Top app bar */19  .top-bar {20    position: absolute;21    top: 80px; /* simulate status bar above */22    left: 0;23    width: 1080px;24    height: 140px;25    background: #111;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    gap: 34px;31  }32  .icon {33    width: 52px;34    height: 52px;35    fill: #EDEDED;36    opacity: 0.95;37  }38  .divider {39    width: 2px;40    height: 40px;41    background: #3a3a3a;42    margin-right: 6px;43  }44  .kebab {45    display: flex;46    flex-direction: column;47    gap: 6px;48    align-items: center;49    justify-content: center;50    width: 36px;51    height: 52px;52  }53  .kebab span {54    width: 8px; height: 8px; background: #EDEDED; border-radius: 50%;55  }56 57  /* Page container */58  .page {59    position: absolute;60    top: 270px;61    left: 0;62    width: 1080px;63    height: 1760px;64    background: #FFFFFF;65  }66  .page-content {67    width: 960px;68    margin: 0 auto;69    padding: 80px 40px 140px 40px;70    box-sizing: border-box;71  }72  .page hr {73    border: none;74    border-top: 2px solid #D9D9D9;75    margin: 40px 0 60px 0;76  }77  .title {78    font-size: 72px;79    font-weight: 700;80    letter-spacing: -0.5px;81    display: inline-block;82    border-bottom: 14px solid #F2D85A; /* yellow highlight underline */83  }84  .subhead {85    margin-top: 40px;86    font-size: 36px;87    font-weight: 700;88    letter-spacing: 1.2px;89  }90  .para {91    margin-top: 34px;92    font-size: 32px;93    line-height: 1.6;94    color: #111;95  }96 97  /* Floating page number chip */98  .page-chip {99    position: absolute;100    top: 360px;101    right: 30px;102    background: #4A4A4A;103    color: #fff;104    font-family: "Roboto", Arial, sans-serif;105    font-size: 34px;106    border-radius: 32px;107    padding: 12px 22px;108  }109 110  /* Bottom tool bar */111  .bottom-bar {112    position: absolute;113    bottom: 120px;114    left: 0;115    width: 1080px;116    height: 180px;117    background: #111;118    border-top: 1px solid #2a2a2a;119    display: flex;120    justify-content: space-around;121    align-items: center;122    box-sizing: border-box;123  }124  .tool {125    width: 160px;126    height: 140px;127    display: flex;128    flex-direction: column;129    align-items: center;130    justify-content: center;131    gap: 14px;132    color: #EDEDED;133    font-family: "Roboto", Arial, sans-serif;134    font-size: 28px;135  }136  .tool svg { width: 56px; height: 56px; fill: #EDEDED; }137 138  /* Gesture pill */139  .gesture-pill {140    position: absolute;141    bottom: 40px;142    left: 50%;143    transform: translateX(-50%);144    width: 280px;145    height: 14px;146    background: #D0D0D0;147    border-radius: 10px;148    opacity: 0.9;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Top App Bar -->156  <div class="top-bar">157    <!-- Back arrow -->158    <svg class="icon" viewBox="0 0 24 24">159      <path d="M14 5l-7 7 7 7v-4h7v-6h-7V5z"/>160    </svg>161    <div class="divider"></div>162    <!-- Undo/redo-like curved arrow -->163    <svg class="icon" viewBox="0 0 24 24">164      <path d="M7 7H3l5-5 5 5H9c4.4 0 8 3.6 8 8 0 .7-.1 1.4-.3 2H14c.2-.6.3-1.3.3-2 0-3.3-2.7-6-6-6z"/>165    </svg>166    <!-- Droplet -->167    <svg class="icon" viewBox="0 0 24 24">168      <path d="M12 3c3 4 7 7 7 12a7 7 0 1 1-14 0c0-5 4-8 7-12z"/>169    </svg>170    <!-- Chat bubble -->171    <svg class="icon" viewBox="0 0 24 24">172      <path d="M4 4h16v12H8l-4 4V4z"/>173    </svg>174    <!-- Search -->175    <svg class="icon" viewBox="0 0 24 24">176      <path d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm8.5 12.5l4 4-1.5 1.5-4-4 1.5-1.5z"/>177    </svg>178    <!-- Share nodes -->179    <svg class="icon" viewBox="0 0 24 24">180      <path d="M18 5a3 3 0 1 1-2.9 3.6L9.7 11a3 3 0 0 1 0 2l5.4 2.4A3 3 0 1 1 14 18l-5.4-2.4A3 3 0 1 1 9 9.4l5.4-2.4A3 3 0 0 1 18 5z"/>181    </svg>182    <!-- Kebab menu -->183    <div class="kebab">184      <span></span><span></span><span></span>185    </div>186  </div>187 188  <!-- Main Page -->189  <div class="page">190    <div class="page-content">191      <hr>192      <div class="title">Chapter 2</div>193 194      <div class="subhead">LOG ENTRY: SOL 7</div>195 196      <div class="para">197        Ok, I’ve had a good night’s sleep, and things don’t seem as hopeless as they did yesterday.198        Today I took stock of supplies, and did a quick EVA to check up on the external equipment. Here’s my situation:199      </div>200      <div class="para">201        The surface mission was supposed to be 31 days. For redundancy, the supply probes had enough food to last the whole crew202        56 days. That way if one or two probes had problems, we'd still have enough food to complete the mission.203      </div>204      <div class="para">205        We were six days in when all hell broke loose, so that leaves enough food to feed six people for 50 days.206        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.207      </div>208      <div class="para">209        The Hab stood up to the storm without any problems. Outside, things aren’t so rosy. I can’t find the satellite dish;210        it probably got blown kilometers away.211      </div>212      <div class="para">213        The MAV is gone, of course. My crewmates took it up to Hermes. Though the bottom half (the landing stage) is still there.214        No reason to take that back up when weight is the enemy. It includes the landing gear, the fuel plant, and anything else215        NASA figured it wouldn’t need for the trip back up to orbit.216      </div>217      <div class="para">218        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.219        Once the chute was exposed it dragged the MDV all over the place, smashing it against every rock in the area.220        Not that the MDV would be much use to me. Its thrusters can’t even lift its own weight. But it might have been valuable221        for parts. Might still be.222      </div>223      <div class="para">224        Both rovers are half-buried in sand, but they’re in good shape otherwise. Their pressure seals are in-tact.225        Operating procedure if a storm hits is to stop motion and wait for the storm to pass.226      </div>227    </div>228  </div>229 230  <!-- Floating page number -->231  <div class="page-chip">8</div>232 233  <!-- Bottom tools bar -->234  <div class="bottom-bar">235    <div class="tool">236      <svg viewBox="0 0 24 24"><path d="M4 5h16v12H9l-5 5V5z"/></svg>237      <div>Comment</div>238    </div>239    <div class="tool">240      <svg viewBox="0 0 24 24"><path d="M5 19l8-8 4 4-8 8H5v-4zM15 3l4 4-3 3-4-4 3-3z"/></svg>241      <div>Highlight</div>242    </div>243    <div class="tool">244      <svg viewBox="0 0 24 24"><path d="M3 17c3-4 6-3 9-1s6 2 9-2" stroke="#EDEDED" stroke-width="2" fill="none"/></svg>245      <div>Draw</div>246    </div>247    <div class="tool">248      <svg viewBox="0 0 24 24"><path d="M6 20V4h12v4H10v12H6z"/></svg>249      <div>Text</div>250    </div>251    <div class="tool">252      <svg viewBox="0 0 24 24"><path d="M4 15l8-8 4 4-8 8H4v-4zM15 4l5 5-2 2-5-5 2-2z"/></svg>253      <div>Fill &amp; Sign</div>254    </div>255    <div class="tool">256      <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/></svg>257      <div>More tools</div>258    </div>259  </div>260 261  <!-- Gesture pill -->262  <div class="gesture-pill"></div>263</div>264</body>265</html>