Candidate 1

Erik-Donath · Nov 28, 2024 · b0d00ea · b0d00ea
1 parent df5ad33
commit b0d00ea
Show file tree

Hide file tree

Showing 8 changed files with 356 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Weg-Von-Jesus
+# Weg von Jesus
 Eine Karte, welche unter Github Pages gehostet wird, aufwelcher man bei Verschiedenen Punkten Ereignisse in Jesus lebens sehen kann.
 
 # Project Base

diff --git a/css/main.css b/css/main.css
@@ -3,19 +3,48 @@
     margin: 0;
 }
 
-#map {
-    height: 1000px;
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
+    background-color: white;
+    text-align: center;
+    padding: 10px 0;
+    z-index: 1000;
+    border-bottom: 1px solid #ccc;
 }
 
-.leaflet-popup-content {
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
+header h1 {
+    margin: 0;
+    color: #333;
+    font-size: 2em;
+}
+
+header a {
+    color: #333;
+    text-decoration: none;
+    margin: 0 10px;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: white;
     text-align: center;
+    padding: 10px 0;
+    z-index: 1000;
+    border-top: 1px solid #ccc;
+}
+
+footer a {
+    color: #333;
+    text-decoration: none;
+    margin: 0 10px;
 }
 
-.leaflet-popup-content img {
-    max-width: auto;
-    height: auto;
+footer a:hover {
+    text-decoration: underline;
 }
diff --git a/css/map.css b/css/map.css
@@ -0,0 +1,48 @@
+#map {
+    height: calc(100vh);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.leaflet-top {
+    top: 60px;
+}
+
+.leaflet-control-zoom {
+    margin-top: 80px !important;
+}
+
+.leaflet-popup-content {
+    width: 350px !important;
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 15px;
+}
+
+.leaflet-popup-content img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    margin: 10px 0;
+}
+
+.leaflet-popup-content p {
+    margin: 0 0 10px 0;
+    text-align: justify;
+    line-height: 1.5;
+}
+
+.leaflet-popup {
+    margin-bottom: 60px;
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: 8px;
+    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+}
+
+.leaflet-popup-scrolled {
+    border: none;
+}
diff --git a/index.html b/index.html
@@ -3,15 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Weg-Von-Jesus</title>
+    <title>Weg von Jesus</title>
+
+    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="css/map.css" />
+
+    <!-- Extern Liberies -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-
-    <link rel="stylesheet" href="css/main.css" />
 </head>
 <body>
-    <div id="map"></div>
-    <script src="js/main.js"></script>
+    <header>
+        <h1><a href="/index.html" class="link">Weg von Jesus</a></h1>
+    </header>
+    <main>
+        <div id="map"></div>
+        <script src="js/main.js"></script>
+    </main>
+    <footer>
+        <a href="/README.md">README</a> | <a href="/LICENSE">LICENSE</a> | <a href="https://github.com/Erik-Donath">&copy; Copyright Erik Donath</a>
+    </footer>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,36 +1,32 @@
 function errorOn404(response) {
-    if(!response.ok) throw new Error("Failed to load Resurce. Status: " + response.status);
+    if(!response.ok)
+        throw new Error("Failed to load resource. Status: " + response.status);
     return response;
 }
 
 document.addEventListener('DOMContentLoaded', function() {
     var map = L.map('map', {
         crs: L.CRS.Simple,
-        minZoom: -3
+        minZoom: 0,
+        maxZoom: 5
     });
 
     function addMarker(position, file) {
         var marker = L.marker(position).addTo(map);
 
         var popup = L.popup({
-            closeButton: true,
+            closeButton: false,
             autoClose: true,
-            closeOnClick: false,
+            closeOnClick: true,
             offset: L.point(0, 20)
         });
-
-        popup.on('contentloaded', function() {
-            popup.getElement().querySelector('img').addEventListener('load', function() {
-                popup.update();
-            });
-        });
-
+
         fetch(file)
             .then(response => errorOn404(response))
             .then(response => response.text())
             .then(markdown => {
-                var htmlContent = marked.parse(markdown);
-                popup.setContent(htmlContent);
+                var html = marked.parse(markdown);
+                popup.setContent(html);
             })
             .catch(error => {
                 console.error('Failed to load Markdown File: ', error);
@@ -59,5 +55,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 addMarker(markerData.position, markerData.file);
             });
         })
-        .catch(error => console.error('Failed to load JSON File: ', error));
+        .catch(error => {
+            console.error('Failed to load JSON File: ', error);
+            alert("Fehler beim Laden der Hauptdatei.");
+        });
 });
diff --git a/res/data.json b/res/data.json
@@ -1,6 +1,6 @@
 {
     "minBounds": [0, 0],
-    "maxBounds": [1000, 1000],
+    "maxBounds": [500, 500],
     "map": "res/karte.png",
     "marker": [
       {
@@ -14,6 +14,14 @@
       {
         "position": [100, 300],
         "file": "README.md"
+      },
+      {
+        "position": [250, 250],
+        "file": "res/marker3.md"
+      },
+      {
+        "position": [0, 0],
+        "file": "res/marker4.md"
       }
     ]
   }
diff --git a/res/marker3.md b/res/marker3.md
@@ -0,0 +1,19 @@
+# Lorem ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
+
+Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   
+
+Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.   
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
+