diff --git a/index.html b/index.html
index 960a443bae1e7298d5a197b2ce38cfae57a9973c..ad0b550a9094b031ce33e2d0657ba7214c8aaff8 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Interaktive Karte und Tabelle</title>
+ <title>Stahlskelettkirchen der Hochmoderne</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
diff --git a/script.js b/script.js
index bd47041c26a861aedef8599e2253b4fa82fc8cd1..188bf7bf371c3c57873d0dbf72bc52c6536d5614 100644
--- a/script.js
+++ b/script.js
@@ -12,7 +12,7 @@ document.addEventListener("DOMContentLoaded", function () {
{
coords: [52.2799, 8.0472],
dataBefund: "1",
- name: "TEST"
+ name: "Heilig Kreuz Kirche"
}
// Füge hier weitere Markierungen hinzu
];
diff --git a/style.css b/style.css
index 6be95766cf9ae289a32bd6eb5793bc86b4d479aa..6c89dab53aa2b999ad29d8e13f90d89afed6a750 100644
--- a/style.css
+++ b/style.css
@@ -1,46 +1,99 @@
-/* Stil für die Karte */
-.karte-container {
- width: 50%;
- background-color: #f0f0f0;
- padding: 20px;
- box-sizing: border-box;
- overflow: hidden;
+.ausgewaehlt {
+ background-color: #00eaff; /* Beispiel für Hervorhebung */
+ border: 2px solid rgb(0, 234, 255); /* Beispiel für Rahmen um die Markierung */
}
-#map {
+/* Stil für die Isometrie und die Markierungen */
+.karte {
+ position: relative;
width: 100%;
- height: 500px;
+ height: 500px; /* Passe die Höhe an deine Isometrie an */
+ background-color: #f0f0f0; /* Hintergrundfarbe für die Isometrie */
+}
+
+.markierung {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background-color: rgba(255, 0, 106, 0.68); /* Farbe der Markierungen */
+ border: 2px solid rgba(255, 0, 106, 0.68);
+ border-radius: 50%; /* Runde Form für die Markierungen */
+ cursor: pointer;
}
/* Stil für die Tabelle */
-.tabelle-container {
- width: 50%;
- padding: 20px;
- box-sizing: border-box;
- overflow-x: auto;
+table {
+ border-collapse: collapse; /* Rand zwischen den Zellen entfernen */
+ width: 100%; /* Volle Breite verwenden */
+ border: 1px solid #ccc; /* Umrandung der Tabelle */
+}
+
+/* Stil für Tabellenzeilen */
+table tr {
+ border-bottom: 1px solid #ccc; /* Unterstrich zwischen den Zeilen */
+}
+
+/* Stil für Tabellenzellen */
+table th, table td {
+ padding: 8px; /* Abstand zwischen Inhalt und Zelle */
+ text-align: left; /* Text links ausrichten */
+ border-right: 1px solid #ccc; /* Trennlinien zwischen den Spalten */
+}
+
+/* Stil für die letzte Spalte */
+table th:last-child, table td:last-child {
+ border-right: none; /* Keine Trennlinie für die letzte Spalte */
}
.container {
- display: flex;
- width: 100%;
+ display: flex; /* Flexbox verwenden */
+ width: 100%; /* Volle Breite des Containers */
+}
+
+/* Stil für das Bild */
+.karte-container {
+ width: 50%; /* Breite des Containers auf 50% des verfügbaren Platzes einstellen */
+ background-color: #f0f0f0; /* Hintergrundfarbe für das Bild */
+ padding: 20px; /* Innenabstand des Containers */
+ box-sizing: border-box; /* Box-Modell auf border-box einstellen */
+}
+
+.karte-container img {
+ width: 100%; /* Volle Breite des Bildcontainers */
+ height: auto; /* Automatische Höhe für das Bild */
+}
+
+/* Stil für die Tabelle */
+.tabelle-container {
+ width: 50%; /* Breite des Containers auf 50% des verfügbaren Platzes einstellen */
+ padding: 20px; /* Innenabstand des Containers */
+ box-sizing: border-box; /* Box-Modell auf border-box einstellen */
+ overflow-x: hidden; /* Horizontales Scrollen verhindern */
}
/* Responsives Verhalten für die Schriftgröße */
body {
- font-size: 16px;
+ font-size: 16px; /* Standard-Schriftgröße für den Text */
}
@media screen and (max-width: 768px) {
body {
- font-size: 14px;
+ font-size: 14px; /* Reduziere die Schriftgröße auf kleinen Bildschirmen */
}
.container {
- flex-direction: column;
+ flex-direction: column; /* Spaltenlayout auf kleinen Bildschirmen */
}
.karte-container,
.tabelle-container {
- width: 100%;
+ width: 100%; /* Volle Breite auf kleinen Bildschirmen */
}
}
+
+.bildnachweis {
+ text-align: center;
+ margin-top: 10px;
+ font-size: 12px;
+ color: #555;
+}