update 03/14/2024

n-km · Mar 14, 2024 · 8c46bab · 8c46bab
1 parent e24e16e
commit 8c46bab
Show file tree

Hide file tree

Showing 2 changed files with 150 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="style.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+    </head>
+    <body>
+
+        <div class="content">
+            <h2>pdf-viewer</h2>
+            push your link - view modern
+            <form action=""id="pdfForm">
+                <input type="text" id="pdfLink">
+                <input type="submit" id="SEND">
+                <label for="SEND">View PDF</label>
+            </form>
+
+            <iframe frameborder="0" id="pdfViewer"></iframe>
+
+        </div>
+
+
+        <button id="shareButton"><span class="material-symbols-outlined">share</span></button>
+
+
+
+        <script>
+             document.getElementById("pdfForm").addEventListener("submit", function(event) {
+            event.preventDefault(); // Verhindert das Neuladen der Seite
+            var pdfLink = document.getElementById("pdfLink").value;
+            if (pdfLink) {
+                document.getElementById("pdfViewer").src = "https://docs.google.com/gview?url=" + encodeURIComponent(pdfLink) + "&embedded=true";
+                document.getElementById("pdfViewer").addEventListener("load", function() {
+                    // Box-Schatten aktivieren, wenn der PDF-Viewer geladen ist
+                    document.querySelector(".content iframe").style.boxShadow = "0 0 3px black";
+                });
+            } else {
+                alert("Bitte gib einen gültigen PDF-Link ein.");
+            }
+        });
+
+
+
+        window.addEventListener("DOMContentLoaded", function() {
+    var queryString = window.location.search;
+    var urlParams = new URLSearchParams(queryString);
+    var pdfLink = urlParams.get('pdfLink');
+
+    if (pdfLink) {
+        document.getElementById("pdfViewer").src = "https://docs.google.com/gview?url=" + encodeURIComponent(pdfLink) + "&embedded=true";
+        document.getElementById("pdfViewer").addEventListener("load", function() {
+            // Box-Schatten aktivieren, wenn der PDF-Viewer geladen ist
+            document.querySelector(".content iframe").style.boxShadow = "0 0 3px black";
+        });
+    } 
+});
+
+
+document.getElementById("shareButton").addEventListener("click", function() {
+            var pdfLink = encodeURIComponent(document.getElementById("pdfLink").value);
+            var shareURL = window.location.href.split('?')[0] + "?pdfLink=" + pdfLink;
+            navigator.clipboard.writeText(shareURL)
+                .then(function() {
+                    alert("Link wurde kopiert und kann geteilt werden: " + shareURL);
+                })
+                .catch(function() {
+                    alert("Das Kopieren des Links ist fehlgeschlagen.");
+                });
+        });
+        </script>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,70 @@
+body {
+    margin: 15px;
+}
+.content {
+    background-color: white;
+    border-radius: 0px;
+    border-width: 0px;
+    box-shadow: 0 0 3px black;
+    padding: 20px;
+    font-family: 'PT Mono';
+}
+.content input[type=text] {
+    padding: 5px;
+    border-radius: 0px;
+    border-style: double;
+    outline: none;
+    font-family: 'PT Mono';
+    transition: 0.2s;
+}
+.content input[type=text]:focus {
+    border-color: black;
+}
+.content input[type=submit] {
+    display: none;
+}
+.content label {
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 3px;
+    border-width: 1px;
+    border-color: transparent;
+    background-color: white;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.content label:hover {
+    text-decoration: underline;
+    background-color: black;
+    color: white;
+}
+.content iframe {
+    width: 70%;
+    margin-top: 20px;
+    border-radius: 10px;
+    margin-left: 15%;
+    height: 70vh;
+    box-shadow: none;
+}
+#shareButton {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    padding: 10px;
+    border-radius: 20px 20px 20px 3px;
+    font-size: 40px;
+    width: 70px;
+    height: 70px;
+    cursor: pointer;
+    transition: 0.2s;
+    border-style: double;
+}
+#shareButton:hover {
+    background-color: black;
+    color: white;
+}