Ive waitet way too long

.gitignore

@@ -0,0 +1 @@
+app/venv/

.nvim/rsync.toml_alt

@@ -0,0 +1,2 @@
+# remote_path="/srv/http/"
+# remote_path="dev@10.0.0.25:/var/www/html/"

app.js

@@ -0,0 +1,348 @@
+class PDFView {
+  constructor(nameRoute) {
+    this.loadingTask = pdfjsLib.getDocument(nameRoute);
+    this.pdfDoc = null;
+    this.canvas = document.querySelector("#cnv");
+    this.ctx = this.canvas.getContext("2d");
+    this.scale = 1.5;
+    this.numPage = 1;
+    this.maxheight =
+      window.innerHeight -
+      document.getElementById("buttonsdiv").getBoundingClientRect().height;
+    this.maxwidth = document
+      .getElementById("cnvdiv")
+      .getBoundingClientRect().width;
+    this.rendering = false;
+    this.loadingTask.promise.then((pdfDoc_) => {
+      this.pdfDoc = pdfDoc_;
+      document.querySelector("#npages").innerHTML = this.pdfDoc.numPages;
+      this.GeneratePDF();
+    });
+  }
+  GeneratePDF() {
+    this.rendering = true;
+    this.pdfDoc.getPage(this.numPage).then((page) => {
+      let unscaled = page.getViewport({ scale: 1.0 });
+      this.scale = Math.min(
+        this.maxheight / unscaled.height,
+        this.maxwidth / unscaled.width,
+      );
+    });
+    this.pdfDoc.getPage(this.numPage).then((page) => {
+      let viewport = page.getViewport({ scale: this.scale });
+      this.canvas.height = viewport.height;
+      this.canvas.width = viewport.width;
+
+      let renderContext = {
+        canvasContext: this.ctx,
+        viewport: viewport,
+      };
+      doc.cnv.width = this.canvas.width;
+      doc.cnv.height = this.canvas.height;
+      document.getElementById("rightdiv").style.width =
+        ((doc.cnv.width / screen.width) * 100).toString() + "vw";
+      document.getElementById("controldiv").style.width =
+        ((1 - doc.cnv.width / screen.width) * 100).toString() + "vw";
+      doc.pagescales[this.numPage] = {
+        scale: this.scale,
+        width: doc.cnv.width,
+        height: doc.cnv.height,
+      };
+
+      var renderTask = page.render(renderContext);
+      renderTask.promise.then(() => {
+        doc.drawRects();
+        this.rendering = false;
+      });
+    });
+    document.querySelector("#npage").innerHTML = this.numPage;
+  }
+
+  WaitToRender() {
+    if (this.rendering) {
+      window.setTimeout(this.WaitToRender.bind(this), 100);
+    } else {
+      this.GeneratePDF();
+    }
+  }
+
+  PrevPage() {
+    if (this.numPage === 1) {
+      return;
+    }
+    this.numPage--;
+    this.WaitToRender();
+  }
+
+  NextPage() {
+    if (this.numPage >= this.pdfDoc.numPages) {
+      return;
+    }
+    this.numPage++;
+    this.WaitToRender();
+  }
+  RenderPage() {
+    this.WaitToRender();
+  }
+}
+class Rectangle {
+  constructor(canvas, sx, sy, ex, ey, color, alpha = 1) {
+    this.x = sx < ex ? sx : ex;
+    this.y = sy < ey ? sy : ey;
+    this.width = Math.abs(ex - sx);
+    this.height = Math.abs(ey - sy);
+    this.color = color;
+    this.context = canvas.getContext("2d");
+    this.alpha = alpha;
+  }
+  draw() {
+    this.context.globalAlpha = this.alpha;
+    this.context.beginPath();
+    this.context.rect(this.x, this.y, this.width, this.height);
+    this.context.fillStyle = this.color;
+    this.context.strokeStyle = "black";
+    this.context.lineWidth = 1;
+
+    this.context.fill();
+    this.context.stroke();
+  }
+  makeTuple() {
+    return [this.x, this.y, this.width, this.height];
+  }
+}
+class PDFDocument {
+  constructor(filename) {
+    this.pdf = new PDFView(filename);
+    this.fname = filename;
+    this.rects = [];
+    this.cnv = document.querySelector("#drw_cnv");
+    this.ctx = this.cnv.getContext("2d");
+    this.temprect = new Rectangle(this.cnv, 0, 0, 0, 0, "white", 0);
+    this.pagescales = [];
+    this.startX = 0;
+    this.startY = 0;
+  }
+  drawAll() {
+    //context = cnv.getContext("2d");
+    this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height);
+    //pdf.RenderPage();
+    this.drawRects();
+  }
+  drawRects() {
+    if (!(this.pdf.numPage in this.rects)) {
+      this.rects[this.pdf.numPage] = [];
+    }
+    this.temprect.draw();
+    for (var i = 0; i < this.rects[this.pdf.numPage].length; i++) {
+      var shape = this.rects[this.pdf.numPage][i];
+      shape.draw();
+    }
+  }
+  addRect(endpos) {
+    var re = new Rectangle(
+      this.cnv,
+      this.startX,
+      this.startY,
+      endpos.x,
+      endpos.y,
+      "black",
+    );
+    this.rects[this.pdf.numPage].push(re);
+    this.drawAll();
+  }
+  clearCnv() {
+    this.rects[this.pdf.numPage] = [];
+    //context = cnv.getContext("2d");
+    this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height);
+    //pdf.RenderPage();
+    this.temprect = new Rectangle(this.cnv, 0, 0, 0, 0, "black", 0);
+  }
+  clearAll() {
+    this.rects = [];
+    this.clearCnv();
+  }
+  get paramRects() {
+    let prects = [];
+    for (var k = 0; k < this.rects.length; k++) {
+      prects[k] = [];
+      //console.log(this.rects[k]);
+      if (this.rects[k] === undefined) {
+        continue;
+      }
+      //console.log(this.rects[k].length);
+      //console.log(0 < this.rects[k].length);
+      let len = this.rects[k].length;
+      for (var i = 0; i < len; i++) {
+        //console.log(this.rects[k][i]);
+        prects[k].push([this.rects[k][i].makeTuple()]);
+        //console.log(prects[k][i]);
+      }
+    }
+    return prects;
+  }
+}
+var mouseIsDown = false;
+//var startX = 0;
+//var startY = 0;
+//var pdf;
+//var cnv = document.querySelector("#drw_cnv");
+//var ctx = cnv.getContext("2d");
+//var rects = {};
+//var temprect = new Rectangle(cnv, 0, 0, 0, 0, "white", 0);
+//var pagescales = {};
+
+function getMousePos(cnv, eve) {
+  var rect = cnv.getBoundingClientRect();
+  return {
+    x: eve.clientX - rect.left,
+    y: eve.clientY - rect.top,
+  };
+}
+function mouseDown(eve) {
+  //console.log(eve);
+  if (eve.buttons != 1) {
+    return;
+  }
+  if (mouseIsDown) {
+    return;
+  }
+  mouseIsDown = true;
+  var pos = getMousePos(cnv, eve);
+  doc.startX = pos.x;
+  doc.startY = pos.y;
+}
+function mouseUp(eve) {
+  //console.log(eve);
+  if (eve.buttons != 0) {
+    return;
+  }
+  if (!mouseIsDown) {
+    return;
+  }
+  mouseIsDown = false;
+  doc.addRect(getMousePos(cnv, eve));
+  doc.temprect = new Rectangle(doc.cnv, 0, 0, 0, 0, "black", 0);
+}
+
+//var mousexy = 0;
+function mouSexy(eve) {
+  if (mouseIsDown) {
+    var pos = getMousePos(doc.cnv, eve);
+    doc.temprect = new Rectangle(
+      doc.cnv,
+      doc.startX,
+      doc.startY,
+      pos.x,
+      pos.y,
+      "black",
+      0.5,
+    );
+    doc.drawAll();
+  }
+}
+function scrollPage(eve) {
+  console.log(eve);
+  if (eve.ctrlKey) {
+    return;
+  }
+  if (eve.deltaY > 0) {
+    doc.pdf.NextPage();
+  } else {
+    doc.pdf.PrevPage();
+  }
+}
+const initDraw = () => {
+  var cnv = document.querySelector("#drw_cnv");
+  cnv.addEventListener("mousedown", mouseDown, false);
+  cnv.addEventListener("mouseup", mouseUp, false);
+  cnv.addEventListener("mousemove", mouSexy, false);
+  cnv.addEventListener("wheel", scrollPage, false);
+};
+function submitPdf(eve) {
+  eve.preventDefault();
+  var formdata = new FormData(eve.target);
+  console.log(doc.paramRects);
+  formdata.append("rects", JSON.stringify(doc.paramRects));
+  formdata.append("pagescales", JSON.stringify(doc.pagescales));
+  formdata.append("fname", doc.fname);
+  console.log(formdata);
+  submitForm(formdata);
+}
+async function submitForm(formData) {
+  try {
+    const response = await fetch("http://127.0.0.1:8000/submit", {
+      method: "POST",
+      body: formData,
+    });
+    //let responseJSON=await response.json();
+    if (response.ok) {
+      console.log("Submit OK");
+      console.log(response);
+    } else {
+      console.log("Submit failed");
+    }
+  } catch (error) {
+    console.error("Error" + error);
+  }
+}
+function uploadPdf(eve) {
+  eve.preventDefault();
+  const fileupload = document.querySelector("#filepicker");
+  const file = fileupload.files[0];
+  if (!file) {
+    alert("Please Choose a file");
+    return;
+  }
+  const formData = new FormData();
+  formData.append("file", file);
+  uploadFile(formData);
+}
+async function uploadFile(formData) {
+  try {
+    const response = await fetch("http://127.0.0.1:8000/uploadfile", {
+      method: "POST",
+      body: formData,
+    });
+    let responseJSON = await response.json();
+
+    if (response.ok) {
+      console.log("upload OK " + responseJSON["filename"]);
+      console.log(response);
+      delete doc.pdf;
+      delete doc;
+      doc = new PDFDocument(responseJSON.path);
+    } else {
+      console.log("upload failed");
+    }
+  } catch (error) {
+    console.error("Error: " + error);
+  }
+}
+
+function initUpload() {
+  document.querySelector("#uploadform").addEventListener("submit", uploadPdf);
+  document.querySelector("#submitform").addEventListener("submit", submitPdf);
+}
+function initListeners() {
+  document.querySelector("#prev").addEventListener("click", function() {
+    doc.pdf.PrevPage();
+  });
+  document.querySelector("#next").addEventListener("click", function() {
+    doc.pdf.NextPage();
+  });
+  document.querySelector("#clr").addEventListener("click", function() {
+    doc.clearCnv();
+  });
+  document.querySelector("#ca").addEventListener("click", function() {
+    doc.clearAll();
+  });
+}
+const startPdf = () => {
+  doc = new PDFDocument("./VO_Mathematik_3.pdf");
+  //pdf = new PDFView("./VO_Mathematik_3.pdf");
+  initDraw();
+  initUpload();
+  initListeners();
+};
+
+window.addEventListener("load", startPdf);

app/main.py

@@ -0,0 +1,45 @@
+from typing import Annotated
+from typing import List, Dict, Tuple
+from datetime import date
+from fastapi import FastAPI, File, UploadFile, Request, Form
+from fastapi.staticfiles import StaticFiles
+
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="./"), name="static")
+
+
+@app.post("/files/")
+async def create_file(file: Annotated[bytes, File()]):
+    return {"filesize": len(file)}
+
+
+@app.post("/uploadfile/")
+async def create_upload_file(file: UploadFile):
+    content = await file.read()
+    filename = file.filename if file.filename is not None else "None"
+    with open("./app/files/" + filename, "wb") as f:
+        f.write(content)
+    app.mount("/files", StaticFiles(directory="./app/files/"), name="files")
+    return {"filename": filename, "path": "/files/" + filename}
+
+
+@app.post("/submit/")
+async def get_submittion(
+    lva: Annotated[str, Form()],
+    prof: Annotated[str, Form()],
+    fname: Annotated[str, Form()],
+    sem: Annotated[str, Form()],
+    stype: Annotated[str, Form()],
+    date: Annotated[str, Form()],
+    rects: Annotated[str, Form()],  # List[List[Tuple[float, float, float, float]]],
+    pagescales: Annotated[str, Form()],  # Annotated[List[Dict[str, float]], Form()],
+):
+    print(lva, prof, fname, stype, sem, date, rects, pagescales)
+    return {"done": "ok"}
+
+
+# async def get_submittion(request: Request):
+#     reqJson = await request.form()
+#     print(reqJson)
+#     return {"done": "ok"}

app/main_flask.py_

@@ -0,0 +1,21 @@
+import flask
+
+app = flask.Flask(__name__)
+app.secret_key = "test"
+
+
+@app.route("/")
+def view_index():
+    return flask.render_template("../index.html")
+
+
+@app.route("/handle_post", methods=["POST"])
+def handle_post():
+    if request.method == "POST":
+        file = request.args.get("file")
+        print(file)
+    return flask.render_template("../index.html")
+
+
+if __name__ == "__main__":
+    app.run()

favicon/generated_from.txt

@@ -0,0 +1 @@
+https://realfavicongenerator.net/

favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Unizeug",
+  "short_name": "Unizeug",
+  "icons": [
+    {
+      "src": "/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

index.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Unizeug uploader</title>
+  <link rel="stylesheet" href="style.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
+  <script src="app.js" defer></script>
+  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+  <meta name="apple-mobile-web-app-title" content="Unizeug" />
+  <link rel="manifest" href="/favicon/site.webmanifest" />
+</head>
+
+<body>
+  <div class="main">
+    <div class="left" id="controldiv">
+      <div id="fileupload">
+        <form id="uploadform">
+          <label for="filepicker">Choose a pdf file</label>
+          <input type="file" id="filepicker" />
+          <button type="submit" id="upload" method="POST">Upload</button>
+        </form>
+      </div>
+      <div id="submitdiv">
+        <form id="submitform" ,onsubmit="submitFile(event)">
+          <label for="lva">Lehrveranstaltung:</label>
+          <input type="text" id="lva" name="lva" placeholder="Lehrveranstaltung" /><br />
+          <label for="prof">Vortragende*r:</label>
+          <input type="text" id="prof" name="prof" placeholder="Vortragende*r" /><br />
+          <label for="name">Ding:</label>
+          <input type="text" id="name" name="fname" placeholder="Prüfung" /><br />
+          <label for="sem">Semester:</label>
+          <input type="text" id="sem" name="sem" placeholder="2024W" /><br />
+          <input type="radio" id="pruefung" name="stype" value="pruefung" checked="checked" />
+          <label for="pruefung">Prüfung</label><br />
+          <input type="radio" id="klausur" name="stype" value="klausur" />
+          <label for="klausur">Klausur</label><br />
+          <input type="radio" id="uebung" name="stype" value="uebung" />
+          <label for="uebung">Übung</label><br />
+          <input type="radio" id="labor" name="stype" value="labor" />
+          <label for="labor">Labor</label><br />
+          <input type="radio" id="unterlagen" name="stype" value="unterlagen" />
+          <label for="unterlagen">Unterlagen</label><br />
+          <input type="radio" id="zusammenfassungen" name="stype" value="zusammenfassungen" />
+          <label for="zusammenfassungen">Zusammenfassungen</label><br />
+          <input type="radio" id="multimedia" name="stype" value="multimedia" />
+          <label for="multimedia">Multimedia</label><br />
+          <label for="date">Datum</label>
+          <input type="date" id="date" name="date" /><br />
+          <button type="submit" id="send">Senden</button>
+        </form>
+      </div>
+    </div>
+    <div class="right" id="rightdiv">
+      <div class="buttons" id="buttonsdiv">
+        <button id="prev">Prev</button><button id="next">Next</button>
+        <div>
+          <span id="npage"></span>
+          <span>/</span>
+          <span id="npages"></span>
+        </div>
+        <button id="clr">Clear Page</button><button id="ca">Claer All</button>
+      </div>
+      <div id="cnvdiv">
+        <div class="stack" id="cnvcont">
+          <canvas id="cnv"></canvas>
+          <canvas id="drw_cnv"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

index_a.html

@@ -0,0 +1,368 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Apache2 Debian Default Page: It works</title>
+    <style type="text/css" media="screen">
+  * {
+    margin: 0px 0px 0px 0px;
+    padding: 0px 0px 0px 0px;
+  }
+
+  body, html {
+    padding: 3px 3px 3px 3px;
+
+    background-color: #D8DBE2;
+
+    font-family: Verdana, sans-serif;
+    font-size: 11pt;
+    text-align: center;
+  }
+
+  div.main_page {
+    position: relative;
+    display: table;
+
+    width: 800px;
+
+    margin-bottom: 3px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0px 0px 0px 0px;
+
+    border-width: 2px;
+    border-color: #212738;
+    border-style: solid;
+
+    background-color: #FFFFFF;
+
+    text-align: center;
+  }
+
+  div.page_header {
+    height: 99px;
+    width: 100%;
+
+    background-color: #F5F6F7;
+  }
+
+  div.page_header span {
+    margin: 15px 0px 0px 50px;
+
+    font-size: 180%;
+    font-weight: bold;
+  }
+
+  div.page_header img {
+    margin: 3px 0px 0px 40px;
+
+    border: 0px 0px 0px;
+  }
+
+  div.table_of_contents {
+    clear: left;
+
+    min-width: 200px;
+
+    margin: 3px 3px 3px 3px;
+
+    background-color: #FFFFFF;
+
+    text-align: left;
+  }
+
+  div.table_of_contents_item {
+    clear: left;
+
+    width: 100%;
+
+    margin: 4px 0px 0px 0px;
+
+    background-color: #FFFFFF;
+
+    color: #000000;
+    text-align: left;
+  }
+
+  div.table_of_contents_item a {
+    margin: 6px 0px 0px 6px;
+  }
+
+  div.content_section {
+    margin: 3px 3px 3px 3px;
+
+    background-color: #FFFFFF;
+
+    text-align: left;
+  }
+
+  div.content_section_text {
+    padding: 4px 8px 4px 8px;
+
+    color: #000000;
+    font-size: 100%;
+  }
+
+  div.content_section_text pre {
+    margin: 8px 0px 8px 0px;
+    padding: 8px 8px 8px 8px;
+
+    border-width: 1px;
+    border-style: dotted;
+    border-color: #000000;
+
+    background-color: #F5F6F7;
+
+    font-style: italic;
+  }
+
+  div.content_section_text p {
+    margin-bottom: 6px;
+  }
+
+  div.content_section_text ul, div.content_section_text li {
+    padding: 4px 8px 4px 16px;
+  }
+
+  div.section_header {
+    padding: 3px 6px 3px 6px;
+
+    background-color: #8E9CB2;
+
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 112%;
+    text-align: center;
+  }
+
+  div.section_header_red {
+    background-color: #CD214F;
+  }
+
+  div.section_header_grey {
+    background-color: #9F9386;
+  }
+
+  .floating_element {
+    position: relative;
+    float: left;
+  }
+
+  div.table_of_contents_item a,
+  div.content_section_text a {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  div.table_of_contents_item a:link,
+  div.table_of_contents_item a:visited,
+  div.table_of_contents_item a:active {
+    color: #000000;
+  }
+
+  div.table_of_contents_item a:hover {
+    background-color: #000000;
+
+    color: #FFFFFF;
+  }
+
+  div.content_section_text a:link,
+  div.content_section_text a:visited,
+   div.content_section_text a:active {
+    background-color: #DCDFE6;
+
+    color: #000000;
+  }
+
+  div.content_section_text a:hover {
+    background-color: #000000;
+
+    color: #DCDFE6;
+  }
+
+  div.validator {
+  }
+    </style>
+  </head>
+  <body>
+    <div class="main_page">
+      <div class="page_header floating_element">
+        <img src="/icons/openlogo-75.png" alt="Debian Logo" class="floating_element"/>
+        <span class="floating_element">
+          Apache2 Debian Default Page
+        </span>
+      </div>
+<!--      <div class="table_of_contents floating_element">
+        <div class="section_header section_header_grey">
+          TABLE OF CONTENTS
+        </div>
+        <div class="table_of_contents_item floating_element">
+          <a href="#about">About</a>
+        </div>
+        <div class="table_of_contents_item floating_element">
+          <a href="#changes">Changes</a>
+        </div>
+        <div class="table_of_contents_item floating_element">
+          <a href="#scope">Scope</a>
+        </div>
+        <div class="table_of_contents_item floating_element">
+          <a href="#files">Config files</a>
+        </div>
+      </div>
+-->
+      <div class="content_section floating_element">
+
+
+        <div class="section_header section_header_red">
+          <div id="about"></div>
+          It works!
+        </div>
+        <div class="content_section_text">
+          <p>
+                This is the default welcome page used to test the correct 
+                operation of the Apache2 server after installation on Debian systems.
+                If you can read this page, it means that the Apache HTTP server installed at
+                this site is working properly. You should <b>replace this file</b> (located at
+                <tt>/var/www/html/index.html</tt>) before continuing to operate your HTTP server.
+          </p>
+
+
+          <p>
+                If you are a normal user of this web site and don't know what this page is
+                about, this probably means that the site is currently unavailable due to
+                maintenance.
+                If the problem persists, please contact the site's administrator.
+          </p>
+
+        </div>
+        <div class="section_header">
+          <div id="changes"></div>
+                Configuration Overview
+        </div>
+        <div class="content_section_text">
+          <p>
+                Debian's Apache2 default configuration is different from the
+                upstream default configuration, and split into several files optimized for
+                interaction with Debian tools. The configuration system is
+                <b>fully documented in
+                /usr/share/doc/apache2/README.Debian.gz</b>. Refer to this for the full
+                documentation. Documentation for the web server itself can be
+                found by accessing the <a href="/manual">manual</a> if the <tt>apache2-doc</tt>
+                package was installed on this server.
+
+          </p>
+          <p>
+                The configuration layout for an Apache2 web server installation on Debian systems is as follows:
+          </p>
+          <pre>
+/etc/apache2/
+|-- apache2.conf
+|       `--  ports.conf
+|-- mods-enabled
+|       |-- *.load
+|       `-- *.conf
+|-- conf-enabled
+|       `-- *.conf
+|-- sites-enabled
+|       `-- *.conf
+          </pre>
+          <ul>
+                        <li>
+                           <tt>apache2.conf</tt> is the main configuration
+                           file. It puts the pieces together by including all remaining configuration
+                           files when starting up the web server.
+                        </li>
+
+                        <li>
+                           <tt>ports.conf</tt> is always included from the
+                           main configuration file. It is used to determine the listening ports for
+                           incoming connections, and this file can be customized anytime.
+                        </li>
+
+                        <li>
+                           Configuration files in the <tt>mods-enabled/</tt>,
+                           <tt>conf-enabled/</tt> and <tt>sites-enabled/</tt> directories contain
+                           particular configuration snippets which manage modules, global configuration
+                           fragments, or virtual host configurations, respectively.
+                        </li>
+
+                        <li>
+                           They are activated by symlinking available
+                           configuration files from their respective
+                           *-available/ counterparts. These should be managed
+                           by using our helpers
+                           <tt>
+                                a2enmod,
+                                a2dismod,
+                           </tt>
+                           <tt>
+                                a2ensite,
+                                a2dissite,
+                            </tt>
+                                and
+                           <tt>
+                                a2enconf,
+                                a2disconf
+                           </tt>. See their respective man pages for detailed information.
+                        </li>
+
+                        <li>
+                           The binary is called apache2. Due to the use of
+                           environment variables, in the default configuration, apache2 needs to be
+                           started/stopped with <tt>/etc/init.d/apache2</tt> or <tt>apache2ctl</tt>.
+                           <b>Calling <tt>/usr/bin/apache2</tt> directly will not work</b> with the
+                           default configuration.
+                        </li>
+          </ul>
+        </div>
+
+        <div class="section_header">
+            <div id="docroot"></div>
+                Document Roots
+        </div>
+
+        <div class="content_section_text">
+            <p>
+                By default, Debian does not allow access through the web browser to
+                <em>any</em> file apart of those located in <tt>/var/www</tt>,
+                <a href="http://httpd.apache.org/docs/2.4/mod/mod_userdir.html" rel="nofollow">public_html</a>
+                directories (when enabled) and <tt>/usr/share</tt> (for web
+                applications). If your site is using a web document root
+                located elsewhere (such as in <tt>/srv</tt>) you may need to whitelist your
+                document root directory in <tt>/etc/apache2/apache2.conf</tt>.
+            </p>
+            <p>
+                The default Debian document root is <tt>/var/www/html</tt>. You
+                can make your own virtual hosts under /var/www. This is different
+                to previous releases which provides better security out of the box.
+            </p>
+        </div>
+
+        <div class="section_header">
+          <div id="bugs"></div>
+                Reporting Problems
+        </div>
+        <div class="content_section_text">
+          <p>
+                Please use the <tt>reportbug</tt> tool to report bugs in the
+                Apache2 package with Debian. However, check <a
+                href="http://bugs.debian.org/cgi-bin/pkgreport.cgi?ordering=normal;archive=0;src=apache2;repeatmerged=0"
+                rel="nofollow">existing bug reports</a> before reporting a new bug.
+          </p>
+          <p>
+                Please report bugs specific to modules (such as PHP and others)
+                to respective packages, not to the web server itself.
+          </p>
+        </div>
+
+
+
+
+      </div>
+    </div>
+    <div class="validator">
+    </div>
+  </body>
+</html>
+

run.txt

@@ -0,0 +1 @@
+python -m uvicorn app.main:app --reload

script.js

@@ -0,0 +1,47 @@
+//const c = document.getElementById("pdf_canvas");
+//const pdf_url = "./VO_Mathematik_3.pdf";
+//import * as pdfjsLib from "./pdf.mjs";
+//pdfjsLib.GlobalWorkerOptions.workerSrc = './pdf.worker.mjs';
+//pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc) {
+//  // Continue with further steps.
+//});
+//pdfDoc.getPage(1).then(function(page) {
+//  // Continue with further steps.
+//});
+//const viewport = page.getViewport({ scale: 1 });
+//canvas.width = viewport.width;
+//canvas.height = viewport.height;
+//const ctx = canvas.getContext('2d');
+//const renderContext = {
+//  canvasContext: ctx,
+//  viewport: viewport,
+//};
+//
+//page.render(renderContext);
+//pdfjsLib
+//  .getDocument(pdfUrl)
+//  .promise.then(function(pdfDoc) {
+//    // Handling and rendering logic.
+//  })
+//  .catch(function(error) {
+//    console.log('Error loading PDF file:', error);
+//  });
+//var ctx = c.getContext("2d");
+//ctx.moveTo(0, 0);
+//ctx.lineTo(10000, 10000);
+//ctx.stroke();
+//import pdfjsLib from 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.9.155/+esm'
+const PDFStart = nameRoute => {
+}
+const startPdf = () => {
+  PDFStart('./VO_Mathematik_3.pdf')
+}
+window.addEventListener('load', startPdf);
+let loadingTask = pdfjsLib.getDocument(nameRoute),
+  pdfDoc = null,
+  canvas = document.querySelector('#cnv'),
+  ctx = canvas.getContext('2d'),
+  scale = 1.5,
+  numPage = 1;
+loadingTask.promise.then(pdfDoc_ => { pdfDoc = pdfDoc_; document.querySelector('#npages').innerHTML = pdfDoc.numPages; GeneratePDF(numPage) });
+const GeneratePDF = numPage => { pdfDoc.getPage(numPage).then(page => { let viewport = page.getViewport({ scale: scale }); canvas.height = viewport.height; canvas.width = viewport.width; let renderContext = { canvasContext: ctx, viewport: viewport }page.render(renderContext); })document.querySelector('#npages').innerHTML = numPage; };

style.css

@@ -0,0 +1,74 @@
+html,
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+body {
+  overflow: hidden;
+  background-color: slategrey;
+}
+
+.right {
+  height: 100%;
+  margin: 0;
+  width: 75vw;
+  float: right;
+  background-color: navy;
+}
+
+.left {
+  background-color: blueviolet;
+  height: 100%;
+  float: left;
+}
+
+span {
+  color: lightgray;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.fullsize {
+  height: 100%;
+  margin: 0;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.main {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#cnvdiv {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  /*display: flex;*/
+  /*text-align: center;*/
+  /*justify-content: center;*/
+}
+
+.stack {
+  position: relative;
+  height: 100%;
+  /*text-align: center;*/
+  /*float: right;*/
+  /*margin-right: 0;*/
+  /*margin-left: auto;*/
+  /*display: block;*/
+}
+
+.stack>canvas {
+  position: absolute;
+  /*display: block;*/
+  /*display: inline;*/
+  left: 0;
+  top: 0;
+}