GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>The Martian - Reader UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0e0e0e;13    font-family: Arial, Helvetica, sans-serif;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    background: #000;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 24px;29    font-size: 34px;30    letter-spacing: 0.2px;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 20px;36    opacity: 0.9;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 16px;42    opacity: 0.9;43  }44  .status-icon {45    width: 40px;46    height: 40px;47    border-radius: 10px;48    border: 1px solid #555;49    color: #ccc;50    display: flex; align-items: center; justify-content: center;51    font-size: 28px;52  }53 54  /* App bar */55  .appbar {56    position: absolute;57    top: 90px;58    left: 0;59    width: 1080px;60    height: 120px;61    background: #121212;62    display: flex;63    align-items: center;64    padding: 0 24px;65    box-sizing: border-box;66    gap: 22px;67  }68  .appbar-title {69    font-size: 44px;70    color: #fff;71    white-space: nowrap;72    overflow: hidden;73    text-overflow: ellipsis;74    width: 680px;75  }76  .appbar-actions {77    margin-left: auto;78    display: flex;79    gap: 28px;80    align-items: center;81  }82  .icon-btn {83    width: 64px;84    height: 64px;85    border-radius: 12px;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #fff;90  }91  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 4; }92 93  /* Content area */94  .content {95    position: absolute;96    top: 210px; /* status+appbar */97    left: 0;98    width: 1080px;99    height: 2190px;100    overflow: hidden;101    background: #111;102  }103 104  .cover {105    width: 1020px;106    height: 1180px;107    margin: 30px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #757575;114    font-size: 42px;115    text-align: center;116    line-height: 1.2;117  }118 119  .page {120    width: 1020px;121    margin: 0 30px;122    height: 930px;123    background: #ffffff;124    color: #000;125    border: 1px solid #d5d5d5;126    box-sizing: border-box;127    padding: 30px 40px;128    font-family: Georgia, "Times New Roman", serif;129  }130 131  .chapter-title {132    font-size: 64px;133    font-weight: 700;134    margin-bottom: 26px;135  }136  .log-entry {137    font-size: 38px;138    font-weight: 700;139    letter-spacing: 0.5px;140    margin-bottom: 26px;141  }142  .book-text p {143    font-size: 36px;144    line-height: 1.55;145    margin: 14px 0;146  }147 148  /* Progress bar */149  .progress {150    position: absolute;151    bottom: 54px;152    left: 160px;153    width: 760px;154    height: 16px;155    background: #bdbdbd;156    border-radius: 8px;157  }158  .progress::after {159    content: "";160    display: block;161    height: 100%;162    width: 540px;163    background: #7a7a7a;164    border-radius: 8px;165  }166 167  /* Floating action button */168  .fab {169    position: absolute;170    right: 60px;171    bottom: 120px;172    width: 150px;173    height: 150px;174    background: #5c8df6;175    border-radius: 50%;176    box-shadow: 0 8px 24px rgba(0,0,0,0.35);177    display: flex;178    align-items: center;179    justify-content: center;180  }181  .fab svg { width: 80px; height: 80px; stroke: #fff; stroke-width: 8; fill: none; }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="status-bar">189    <div class="status-left">190      <div>8:57</div>191      <div class="status-icon">M</div>192      <div class="status-icon">!</div>193    </div>194    <div class="status-right">195      <div>📶</div>196      <div>🔋</div>197      <div>100%</div>198    </div>199  </div>200 201  <!-- App Bar -->202  <div class="appbar">203    <div class="icon-btn" aria-label="Back">204      <svg viewBox="0 0 24 24">205        <path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"></path>206      </svg>207    </div>208    <div class="appbar-title">The Martian - Andy W...</div>209    <div class="appbar-actions">210      <div class="icon-btn" aria-label="Search">211        <svg viewBox="0 0 24 24">212          <circle cx="10" cy="10" r="6"></circle>213          <path d="M15 15 L21 21" stroke-linecap="round"></path>214        </svg>215      </div>216      <div class="icon-btn" aria-label="Add">217        <svg viewBox="0 0 24 24">218          <path d="M6 3 H18 V21 L12 18 L6 21 Z"></path>219          <path d="M12 8 V14 M9 11 H15" stroke-linecap="round"></path>220        </svg>221      </div>222      <div class="icon-btn" aria-label="Menu">223        <svg viewBox="0 0 24 24">224          <circle cx="12" cy="5" r="2" fill="#fff" stroke="none"></circle>225          <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>226          <circle cx="12" cy="19" r="2" fill="#fff" stroke="none"></circle>227        </svg>228      </div>229    </div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="cover">[IMG: The Martian book cover with Mars surface]</div>235 236    <div class="page">237      <div class="chapter-title">Chapter 1</div>238      <div class="log-entry">LOG ENTRY: SOL 6</div>239      <div class="book-text">240        <p>I’m pretty much fucked. That’s my considered opinion. Fucked.</p>241        <p>Six days in to what should be a greatest two months of my life, and it’s turned in to a nightmare.</p>242        <p>I don’t even know who’ll read this. I guess someone will find it eventually. Maybe a hundred years from now.</p>243        <p>For the record… I didn’t die on Sol 6. Certainly the rest of the crew thought I did, and I can’t blame them. Maybe there’ll be a day of mourning for me, and my Wikipedia page will say “Mark Watney, only human being to have died on Mars.”</p>244        <p>And it’ll be right, probably. Cause I’ll surely die here. Just not on Sol 6 when everyone thinks I did.</p>245      </div>246    </div>247 248    <!-- Floating Action Button -->249    <div class="fab" title="Annotation">250      <svg viewBox="0 0 24 24">251        <path d="M4 15 C8 17, 10 11, 14 13 S20 18, 20 9" stroke-linecap="round"></path>252      </svg>253    </div>254 255    <!-- Progress bar -->256    <div class="progress"></div>257  </div>258 259</div>260</body>261</html>