GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Document Viewer Mock</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: #181818;14    border-radius: 24px;15    box-shadow: 0 20px 50px rgba(0,0,0,0.35);16    font-family: Arial, Helvetica, sans-serif;17    color: #fff;18  }19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 32px;31    font-size: 34px;32  }33  .status-left { display: flex; align-items: center; gap: 28px; }34  .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.85; }35  .status-dot {36    width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%;37    display: inline-block;38  }39  .status-right {40    margin-left: auto;41    display: flex; align-items: center; gap: 18px;42    font-weight: 600;43  }44  .battery-icon {45    width: 50px; height: 26px; border: 3px solid #fff; border-radius: 4px; position: relative;46  }47  .battery-icon::after {48    content: "";49    position: absolute; right: -9px; top: 6px;50    width: 8px; height: 14px; background: #fff; border-radius: 2px;51  }52  .battery-fill { position: absolute; left: 3px; top: 3px; height: 18px; width: 60%; background: #76ff03; }53  /* App bar */54  .app-bar {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 160px;60    background: #3a3a3a;61    display: flex;62    align-items: center;63    padding: 0 24px;64  }65  .app-left, .app-right { display: flex; align-items: center; }66  .app-left { gap: 22px; }67  .app-title {68    font-size: 40px;69    color: #fff;70    opacity: 0.95;71    white-space: nowrap;72    overflow: hidden;73    text-overflow: ellipsis;74    max-width: 660px;75  }76  .app-right {77    margin-left: auto;78    gap: 30px;79  }80  .icon-btn {81    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;82    border-radius: 40px;83  }84  .icon-btn svg { fill: none; stroke: #fff; stroke-width: 50; }85  .star-icon svg { stroke: none; fill: #fff; opacity: 0.9; }86  /* Document area */87  .doc-area {88    position: absolute;89    top: 280px;90    left: 0;91    width: 1080px;92    height: 1780px;93    background: #ffffff;94    color: #1e1e1e;95    overflow: hidden;96    padding: 36px 48px 120px 48px;97  }98  .doc-content {99    font-family: "Courier New", Courier, monospace;100    font-size: 30px;101    line-height: 1.6;102    letter-spacing: 0.2px;103  }104  .doc-divider {105    height: 2px;106    background: #d0d0d0;107    margin: 22px 0;108  }109  /* Bottom floating toolbar */110  .bottom-toolbar {111    position: absolute;112    bottom: 48px;113    left: 40px;114    width: 1000px;115    height: 160px;116    background: #2a2a2a;117    border-radius: 28px;118    box-shadow: 0 8px 24px rgba(0,0,0,0.35);119    display: flex;120    align-items: center;121    padding: 0 28px;122    gap: 24px;123  }124  .tool-icon {125    width: 100px; height: 100px;126    border-radius: 50%;127    background: #3a3a3a;128    display: flex; align-items: center; justify-content: center;129  }130  .tool-icon svg { stroke: #fff; stroke-width: 60; fill: none; }131  .pill {132    background: #4a4a4a;133    color: #fff;134    border-radius: 28px;135    padding: 18px 28px;136    font-size: 34px;137  }138  .mini-btn {139    width: 120px; height: 100px; border-radius: 18px; background: #3a3a3a;140    display: flex; align-items: center; justify-content: center;141  }142  .mini-btn svg { stroke: #fff; stroke-width: 60; fill: none; }143  .share-btn {144    margin-left: auto;145    background: #1e88e5;146    color: #fff;147    border-radius: 28px;148    padding: 22px 36px;149    font-size: 36px;150    font-weight: 600;151  }152</style>153</head>154<body>155<div id="render-target">156  <!-- Status Bar -->157  <div class="status-bar">158    <div class="status-left">159      <span>8:43</span>160      <div class="status-icons">161        <span style="background:#9e9e9e;color:#000;padding:6px 10px;border-radius:6px;font-weight:700;font-size:26px;">N</span>162        <span style="background:#9e9e9e;color:#000;padding:6px 10px;border-radius:6px;font-weight:700;font-size:26px;">LR</span>163        <span style="background:#9e9e9e;color:#000;padding:6px 10px;border-radius:6px;font-weight:700;font-size:26px;">G</span>164        <span class="status-dot"></span>165      </div>166    </div>167    <div class="status-right">168      <svg width="36" height="36" viewBox="0 0 24 24" style="opacity:0.9"><circle cx="12" cy="12" r="9" fill="#fff"/></svg>169      <div class="battery-icon">170        <div class="battery-fill"></div>171      </div>172      <span>72%</span>173    </div>174  </div>175 176  <!-- App Bar -->177  <div class="app-bar">178    <div class="app-left">179      <div class="icon-btn">180        <svg viewBox="0 0 1200 1200" width="64" height="64">181          <path d="M800 200 L400 600 L800 1000" />182        </svg>183      </div>184      <div class="app-title">the-diary-of-anne-fr...</div>185    </div>186    <div class="app-right">187      <div class="icon-btn star-icon">188        <svg viewBox="0 0 1200 1200" width="64" height="64">189          <path d="M600 150 L720 450 L1040 480 L800 690 L870 1020 L600 850 L330 1020 L400 690 L160 480 L480 450 Z"/>190        </svg>191      </div>192      <div class="icon-btn">193        <svg viewBox="0 0 1200 1200" width="64" height="64">194          <circle cx="520" cy="520" r="300"></circle>195          <line x1="820" y1="820" x2="1100" y2="1100"></line>196        </svg>197      </div>198      <div class="icon-btn">199        <svg viewBox="0 0 1200 1200" width="64" height="64">200          <circle cx="600" cy="300" r="60" fill="#fff"></circle>201          <circle cx="600" cy="600" r="60" fill="#fff"></circle>202          <circle cx="600" cy="900" r="60" fill="#fff"></circle>203        </svg>204      </div>205    </div>206  </div>207 208  <!-- Document Content -->209  <div class="doc-area">210    <div class="doc-content">211      Anne Frank212 213      Edited by Otto H. Frank and Mirjam Pressler214      Translated by Susan Massotty215 216      -- : --217 218      BOOK FLAP219 220      Anne Frank's The Diary of a Young Girl is among the most enduring documents of the221      twentieth century. Since its publication in 1947, it has been read by tens of222      millions of people all over the world. It remains a beloved and deeply admired223      testament to the indestructable nature of the human spirit.224 225      Restore in this Definitive Edition are diary entries that had been omitted from226      the original edition. These passages, which constitute 30 percent more material,227      reinforce the fact that Anne was first and foremost a teenage girl, not a remote228      and flawless symbol. She fretted about, and tried to cope with, her own emerging229      sexuality. Like many young girls, she often found herself in disagreement with her230      mother. And like any teenager, she veered between the carefree nature of a child231      and the full-fledged sorrow of an adult. Anne emerges more human, more vulnerable,232      and more vital than ever.233 234      Anne Frank and her family, fleeing the horrors of Nazi occupation, hid in the back235      of an Amsterdam warehouse for two years. She was thirteen when the family went236      into the Secret Annex, and in these pages she grows to be a young woman and a wise237      observer of human nature as well. With unusual insight, she reveals the relations238      between eight people living under extraordinary conditions, facing hunger, the239      ever-present threat of discovery and death, complete estrangement from the outside240      world, and above all, the boredom, the petty misunderstandings, and the241      frustrations of living under such unbearable strain, in such confined quarters.242 243      A timely story rediscovered by each new generation, The Diary of a Young Girl244      stands without peer. For both young readers and adults it continues to bring to245      life this young woman, who for a time survived the worst horror of the modern246      world had seen — and who remained triumphantly and heartbreakingly human247      throughout her ordeal. For those who know and love Anne Frank, The Definitive248      Edition is a chance to discover her anew. For readers who have not yet encountered249      her, this is the edition to cherish.250 251      ANNE FRANK was born on June 12, 1929. She died while imprisoned at Bergen-Belsen,252      three months short of her sixteenth birthday. OTTO H. FRANK was the only member of253      his immediate family to survive the Holocaust. He died in 1980. MIRJAM PRESSLER254      is a popular writer of books for young adults. She lives in Germany.255 256      Translated by Susan Massotty.257 258      -- : --259 260      FOREWORD261 262      Anne Frank kept a diary from June 12, 1942, to August 1, 1944. Initially, she263      wrote it strictly for herself. Then, one day in 1944, Gerrit Bolkestein, a member264      of the Dutch government in exile, announced in a radio broadcast from London that265      after the war he hoped to collect eyewitness accounts of the suffering of the266      Dutch people under the German occupation, which could be made available to the267      public. As an example, he specifically mentioned letters and diaries.268 269      Impressed by this speech, Anne Frank decided that when the war was over she would270      publish a book based on her diary. She began rewriting and editing her diary,271      improving on the text, omitting passages she didn't think were interesting enough272      and adding others from memory. At the same time, she kept up her original diary.273 274      The last entry in Anne's diary is dated August 1, 1944. On August 4, 1944, the275      eight people hiding in the Secret Annex were arrested. Miep Gies and Bep Voskuijl,276      the two secretaries working in the building, found Anne's diaries strewn all over277      the floor. Miep Gies tucked them away in a desk drawer for safekeeping. After the278      war, when it became clear that Anne was dead, she gave the diaries, unread, to279      Anne's father, Otto Frank.280 281      After the liberation, Otto Frank decided to fulfill his daughter's wish and282      publish a diary. He selected material from versions a and b, editing them into a283      version later referred to as version c. Readers all over the world know284      The Diary of a Young Girl.285 286      In making his choice, Otto Frank had to bear several points in mind. To begin287      with, the book had to be kept short so that it would fit in with a series put out288      by the publisher.289    </div>290  </div>291 292  <!-- Bottom Floating Toolbar -->293  <div class="bottom-toolbar">294    <div class="tool-icon">295      <!-- Chat bubble icon -->296      <svg viewBox="0 0 1200 1200" width="70" height="70">297        <path d="M300 300 H900 V700 H600 L450 850 V700 H300 Z" />298      </svg>299    </div>300    <div class="pill">Edit</div>301    <div class="mini-btn">302      <!-- Open-in-new icon -->303      <svg viewBox="0 0 1200 1200" width="70" height="70">304        <rect x="260" y="300" width="520" height="520"></rect>305        <path d="M700 300 H940 V540 M940 300 L640 600" />306      </svg>307    </div>308    <div class="mini-btn">309      <!-- Link icon -->310      <svg viewBox="0 0 1200 1200" width="70" height="70">311        <path d="M420 500 C420 380 560 360 640 440 L700 500" />312        <path d="M780 700 C780 820 640 840 560 760 L500 700" />313        <line x1="540" y1="540" x2="660" y2="660"></line>314      </svg>315    </div>316    <div class="share-btn">Share</div>317  </div>318</div>319</body>320</html>