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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #101010;15    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 96px;24    background: #0E0E0E;25    display: flex;26    align-items: center;27    padding: 0 32px;28    font-weight: 600;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-bar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37    font-weight: 500;38  }39  .icon-dot {40    width: 12px; height: 12px;41    background: #fff; border-radius: 50%;42    opacity: .9;43  }44  .battery {45    display: flex; align-items: center; gap: 12px; font-size: 30px; opacity: .9;46  }47  .battery-shape {48    width: 50px; height: 28px; border: 3px solid #fff; border-radius: 4px; position: relative;49  }50  .battery-shape::after {51    content: "";52    position: absolute; right: -10px; top: 6px;53    width: 8px; height: 16px; background: #fff; border-radius: 2px;54  }55  .battery-level {56    position: absolute; left: 0; top: 0; bottom: 0; width: 60%;57    background: #fff;58  }59 60  /* App bar */61  .app-bar {62    position: absolute;63    top: 96px; left: 0; right: 0;64    height: 140px;65    background: #3C3C3C;66    display: flex;67    align-items: center;68    padding: 0 24px;69    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;70  }71  .app-title {72    margin-left: 12px;73    font-size: 44px;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77    max-width: 650px;78  }79  .app-actions {80    margin-left: auto;81    display: flex;82    align-items: center;83    gap: 28px;84  }85  .icon-btn {86    width: 72px; height: 72px; display: inline-flex; justify-content: center; align-items: center;87  }88  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 3; }89 90  /* Document area */91  .doc-area {92    position: absolute;93    top: 236px; left: 0; right: 0;94    bottom: 220px; /* space for bottom bar */95    background: #EFEFEF;96    overflow: hidden;97  }98  .page-wrap {99    width: 100%;100    height: 100%;101    overflow-y: auto;102    padding: 24px 0;103  }104  .page {105    width: 960px;106    margin: 0 auto;107    background: #fff;108    color: #222;109    border-radius: 6px;110    box-shadow: 0 2px 4px rgba(0,0,0,0.12);111    padding: 40px 44px;112    font-family: "Courier New", Courier, monospace;113    line-height: 1.55;114    font-size: 30px;115  }116  .page h1, .page h2, .page h3 { font-size: 34px; margin: 28px 0 12px; }117  .divider {118    height: 12px; background: #E5E5E5; margin: 28px -44px; border-top: 1px solid #D6D6D6;119  }120 121  /* Floating Edit pill */122  .edit-pill {123    position: absolute;124    left: 36px;125    bottom: 280px;126    background: #2A2A2A;127    color: #FFF;128    border-radius: 36px;129    padding: 18px 26px;130    display: inline-flex;131    align-items: center;132    gap: 16px;133    font-size: 36px;134    box-shadow: 0 6px 14px rgba(0,0,0,0.35);135  }136  .edit-pill svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 3; fill: none; }137 138  /* Bottom action bar */139  .bottom-bar {140    position: absolute;141    left: 0; right: 0; bottom: 0;142    height: 220px;143    background: #2E2E2E;144    padding: 28px 32px;145    display: flex;146    align-items: center;147    gap: 28px;148    box-shadow: 0 -2px 10px rgba(0,0,0,0.4);149  }150  .action {151    width: 180px;152    display: flex; flex-direction: column; align-items: center; gap: 12px;153    color: #CFCFCF; font-size: 28px;154  }155  .action .circle {156    width: 108px; height: 108px; border-radius: 54px;157    background: #3C3C3C;158    display: flex; justify-content: center; align-items: center;159  }160  .action .circle svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 3; fill: none; }161  .spacer { flex: 1; }162  .share-btn {163    background: #1E88E5;164    color: #fff;165    height: 120px;166    min-width: 260px;167    border-radius: 20px;168    display: inline-flex;169    align-items: center;170    justify-content: center;171    gap: 16px;172    font-size: 38px;173    font-weight: 600;174    padding: 0 28px;175    box-shadow: 0 4px 10px rgba(30,136,229,0.5);176  }177  .share-btn svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; fill: none; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    8:41186    <div class="right">187      <div class="icon-dot"></div>188      <div class="icon-dot"></div>189      <div class="icon-dot"></div>190      <div class="battery">191        <div class="battery-shape"><div class="battery-level"></div></div>192        70%193      </div>194    </div>195  </div>196 197  <!-- App bar -->198  <div class="app-bar">199    <div class="icon-btn" aria-label="Back">200      <svg viewBox="0 0 48 48">201        <path d="M30 8 L14 24 L30 40" stroke-linecap="round" stroke-linejoin="round"></path>202      </svg>203    </div>204    <div class="app-title">the-diary-of-anne-fr...</div>205    <div class="app-actions">206      <div class="icon-btn" aria-label="Star">207        <svg viewBox="0 0 48 48">208          <path d="M24 6 L29 18 L42 18 L31 26 L35 38 L24 30 L13 38 L17 26 L6 18 L19 18 Z" fill="none"></path>209        </svg>210      </div>211      <div class="icon-btn" aria-label="Search">212        <svg viewBox="0 0 48 48">213          <circle cx="22" cy="22" r="12"></circle>214          <path d="M31 31 L42 42" stroke-linecap="round"></path>215        </svg>216      </div>217      <div class="icon-btn" aria-label="More">218        <svg viewBox="0 0 48 48">219          <circle cx="24" cy="10" r="3" fill="#fff" stroke="none"></circle>220          <circle cx="24" cy="24" r="3" fill="#fff" stroke="none"></circle>221          <circle cx="24" cy="38" r="3" fill="#fff" stroke="none"></circle>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- Document area -->228  <div class="doc-area">229    <div class="page-wrap">230      <div class="page">231        <p>Anne Frank</p>232        <p>Edited by Otto H. Frank and Mirjam Pressler<br>Translated by Susan Massotty</p>233        <div class="divider"></div>234        <h2>BOOK FLAP</h2>235        <p>Anne Frank's The Diary of a Young Girl is among the most enduring documents of the twentieth century. Since its publication in 1947, it has been read by tens of millions of people all over the world. It remains a beloved and deeply admired testament to the indestructible nature of the human spirit.</p>236        <p>Restored in this Definitive Edition are diary entries that had been omitted from the original edition. These passages, which constitute more material, reinforce the fact that Anne was first and foremost a teenage girl, not a remote and flawless symbol. She fretted about, and tried to cope with, her own emerging sexuality. Like many young girls, she often found herself in disagreement with her mother. And like any teenager, she veered between the carefree nature of a child and the full-fledged sorrow of an adult. Anne emerges more human, more vulnerable, and more vital than ever.</p>237        <p>Anne Frank and her family, fleeing the horrors of Nazi occupation, hid in the back of an Amsterdam warehouse for two years. She was thirteen when the family went into the Secret Annex, and in these pages she grows to be a young woman and a wise observer of human nature as well. With unusual insight, she reveals the relations between eight people living under extraordinary conditions, facing hunger, the ever-present threat of discovery and death, complete estrangement from the outside world, and the boredom, misunderstandings and frustrations of living under such unbearable strain, in such confined quarters.</p>238        <p>A timely story rediscovered by each new generation, The Diary of a Young Girl stands without peer. For both young readers and adults it continues to bring to life this young woman, who for a time survived the worst horror of the modern world and remained triumphantly and heartbreakingly human throughout her ordeal.</p>239        <p>Anne Frank was born on June 12, 1929. She died while imprisoned at Bergen-Belsen, three months short of her sixteenth birthday. Otto H. Frank was the only member of her immediate family to survive the Holocaust. Mirjam Pressler is a popular writer of books for young adults. She lives in Germany. Translated by Susan Massotty.</p>240        <div class="divider"></div>241        <h2>FOREWORD</h2>242        <p>Anne Frank kept a diary from June 12, 1942, to August 1, 1944. Initially, she wrote it strictly for herself. Then, one day in 1944, in a radio broadcast from London, a member of the Dutch government in exile announced that after the war he hoped to collect eyewitness accounts of the suffering of the Dutch people under the German occupation, which could be made available to the public.</p>243        <p>Impressed by this speech, Anne Frank decided that when the war was over she would publish a book based on her diary. She began rewriting and editing her diary, omitting passages she didn’t think were interesting enough and adding others from memory. At the same time, she kept up her original diary.</p>244        <p>The last entry in Anne’s diary is dated August 1, 1944. On August 4, 1944, the eight people hiding in the Secret Annex were arrested. After the war, when it became clear that Anne was dead, her father, Otto Frank, gave the diaries to the world.</p>245        <p>In making his choice, Otto Frank had to bear several points in mind: the book had to be kept short so that it would fit in with a series put out for young people; the content should be suitable for readers of that age; and it should give as complete a picture as possible of daily life in the Secret Annex.</p>246      </div>247    </div>248  </div>249 250  <!-- Floating Edit button -->251  <div class="edit-pill">252    <svg viewBox="0 0 48 48">253      <path d="M10 34 L8 40 L14 38 L34 18 C36 16 36 14 34 12 C32 10 30 10 28 12 L10 30" stroke-linecap="round" stroke-linejoin="round"></path>254    </svg>255    Edit256  </div>257 258  <!-- Bottom action bar -->259  <div class="bottom-bar">260    <div class="action">261      <div class="circle">262        <svg viewBox="0 0 48 48">263          <path d="M8 10 H40 V34 H20 L14 40 V34 H8 Z" stroke-linejoin="round"></path>264        </svg>265      </div>266      <div>Comment</div>267    </div>268    <div class="action">269      <div class="circle">270        <svg viewBox="0 0 48 48">271          <rect x="10" y="10" width="28" height="28" rx="3"></rect>272          <path d="M22 26 L30 18 M26 18 H30 V22" stroke-linecap="round"></path>273        </svg>274      </div>275      <div>Open with</div>276    </div>277    <div class="action">278      <div class="circle">279        <svg viewBox="0 0 48 48">280          <path d="M18 30 C12 30 12 18 18 18 L22 18 M26 30 L30 30 C36 30 36 18 30 18" stroke-linecap="round"></path>281          <path d="M22 24 H26" stroke-linecap="round"></path>282        </svg>283      </div>284      <div>Link</div>285    </div>286    <div class="spacer"></div>287    <div class="share-btn">288      <svg viewBox="0 0 48 48">289        <path d="M34 22 L24 12 L14 22" stroke-linecap="round" stroke-linejoin="round"></path>290        <path d="M24 12 V34" stroke-linecap="round"></path>291      </svg>292      Share293    </div>294  </div>295 296</div>297</body>298</html>