MusikimUnterricht.de

Benutzer-Werkzeuge

Webseiten-Werkzeuge

links:gema

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
links:gema [22/03/2026 10:50] – Eric Weberlinks:gema [22/03/2026 10:57] (aktuell) – Eric Weber
Zeile 14: Zeile 14:
 <title>Schulübersicht GEMA-Abfrage</title> <title>Schulübersicht GEMA-Abfrage</title>
  
-<!-- PapaParse (CSV Parser) --> 
 <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
  
 <style> <style>
  
-/* ---------- Grunddesign ---------- */+/* ========================= 
 +   NUR INNERHALB VON #gema-app 
 +   ========================= */
  
-body {+#gema-app {
   font-family: Arial, sans-serif;   font-family: Arial, sans-serif;
-  background:#f4f6f9; +  background: transparent; 
-  margin:20px;+  padding:20px;
 } }
  
-input {+/* Input */ 
 + 
 +#gema-app input {
   width:100%;   width:100%;
   max-width:400px;   max-width:400px;
Zeile 36: Zeile 39:
 } }
  
-#info {+/* Info */ 
 + 
 +#gema-app #info {
   font-weight:bold;   font-weight:bold;
   margin-bottom:15px;   margin-bottom:15px;
 } }
  
-/* ---------- Tabelle ---------- */+/* Button */ 
 + 
 +#gema-app .toggle-btn { 
 +  margin-bottom:15px; 
 +  padding:8px 14px; 
 +  border:none; 
 +  border-radius:8px; 
 +  background:#2c7be5; 
 +  color:white; 
 +  cursor:pointer; 
 +} 
 + 
 +#gema-app .toggle-btn:hover { 
 +  background:#1a5fd1; 
 +} 
 + 
 +#gema-app .toggle-btn:focus, 
 +#gema-app .toggle-btn:active { 
 +  background:#2c7be5; 
 +  outline:none; 
 +} 
 + 
 +#gema-app .toggle-btn:focus-visible { 
 +  outline:3px solid #1a5fd1; 
 +} 
 + 
 +/* Tabelle */
  
-.table-wrapper {+#gema-app .table-wrapper {
   overflow-x:auto;   overflow-x:auto;
 } }
  
-table {+#gema-app table {
   border-collapse: collapse;   border-collapse: collapse;
   width:100%;   width:100%;
Zeile 56: Zeile 87:
 } }
  
-th {+#gema-app th {
   padding:12px;   padding:12px;
   background:linear-gradient(to right,#f0f0f0,#e6e6e6);   background:linear-gradient(to right,#f0f0f0,#e6e6e6);
Zeile 63: Zeile 94:
 } }
  
-td {+#gema-app td {
   padding:12px;   padding:12px;
   border-bottom:1px solid #eee;   border-bottom:1px solid #eee;
 } }
  
-tr:hover {+#gema-app tr:hover {
   background:#f9fbff;   background:#f9fbff;
 } }
  
-/* ---------- Button ---------- */+/* Kartenansicht */
  
-.toggle-btn { +#gema-app.card-view table, 
-  margin-bottom:15px; +#gema-app.card-view thead, 
-  padding:8px 14px; +#gema-app.card-view tbody, 
-  border:none; +#gema-app.card-view th, 
-  border-radius:8px; +#gema-app.card-view td, 
-  background:#2c7be5; +#gema-app.card-view tr {
-  color:white; +
-  cursor:pointer; +
-} +
- +
-.toggle-btn:hover { +
-  background:#1a5fd1; +
-} +
- +
-.toggle-btn:focus, +
-.toggle-btn:active { +
-  background:#2c7be5; +
-  color:white; +
-  outline:none; +
-} +
- +
-.toggle-btn:focus-visible { +
-  outline:3px solid #1a5fd1; +
-} +
- +
-/* ---------- Karten ---------- */ +
- +
-.card-view table, +
-.card-view thead, +
-.card-view tbody, +
-.card-view th, +
-.card-view td, +
-.card-view tr {+
   display:block;   display:block;
 } }
  
-.card-view thead {+#gema-app.card-view thead {
   display:none;   display:none;
 } }
  
-.card-view tr {+#gema-app.card-view tr {
   margin-bottom:20px;   margin-bottom:20px;
   background:white;   background:white;
Zeile 123: Zeile 127:
 } }
  
-.card-view td {+#gema-app.card-view td {
   display:flex;   display:flex;
   gap:10px;   gap:10px;
Zeile 129: Zeile 133:
 } }
  
-.card-view td:before {+#gema-app.card-view td:before {
   content: attr(data-label);   content: attr(data-label);
   font-weight:bold;   font-weight:bold;
Zeile 136: Zeile 140:
 } }
  
-/* ---------- Mobile ---------- */+/* Mobile fallback */
  
 @media (max-width:768px) { @media (max-width:768px) {
-  body:not(.force-table) .table-wrapper table, +  #gema-app:not(.force-table) .table-wrapper table, 
-  body:not(.force-table) .table-wrapper thead, +  #gema-app:not(.force-table) .table-wrapper thead, 
-  body:not(.force-table) .table-wrapper tbody, +  #gema-app:not(.force-table) .table-wrapper tbody, 
-  body:not(.force-table) .table-wrapper th, +  #gema-app:not(.force-table) .table-wrapper th, 
-  body:not(.force-table) .table-wrapper td, +  #gema-app:not(.force-table) .table-wrapper td, 
-  body:not(.force-table) .table-wrapper tr {+  #gema-app:not(.force-table) .table-wrapper tr {
     display:block;     display:block;
   }   }
  
-  body:not(.force-table) .table-wrapper thead {+  #gema-app:not(.force-table) .table-wrapper thead {
     display:none;     display:none;
   }   }
  
-  body:not(.force-table) .table-wrapper tr {+  #gema-app:not(.force-table) .table-wrapper tr {
     margin-bottom:20px;     margin-bottom:20px;
     background:white;     background:white;
Zeile 160: Zeile 164:
   }   }
  
-  body:not(.force-table) .table-wrapper td {+  #gema-app:not(.force-table) .table-wrapper td {
     display:flex;     display:flex;
     gap:10px;     gap:10px;
Zeile 166: Zeile 170:
   }   }
  
-  body:not(.force-table) .table-wrapper td:before {+  #gema-app:not(.force-table) .table-wrapper td:before {
     content: attr(data-label);     content: attr(data-label);
     font-weight:bold;     font-weight:bold;
Zeile 175: Zeile 179:
 </style> </style>
 </head> </head>
 +
 <body> <body>
 +
 +<div id="gema-app">
  
 <input type="text" id="searchInput" placeholder="🔍 Suche..."> <input type="text" id="searchInput" placeholder="🔍 Suche...">
Zeile 196: Zeile 203:
 </div> </div>
  
-<script>+</div>
  
-/* -------- Google Sheets URL -------- */+<script>
  
-const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSwWpyG-nbRkwF_0InvmPsBRij8J11wELxBpuX0U_rSYi1e26YdDC8zy5giF_5XYOn7vz9feNopYrwZ/pub?output=csv"+/* -------- Google Sheets -------- */
  
-/* -------- Daten laden (PapaParse) -------- */+const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSwWpyG-nbRkwF_0InvmPsBRij8J11wELxBpuX0U_rSYi1e26YdDC8zy5giF_5XYOn7vz9feNopYrwZ/pub?output=csv";
  
 Papa.parse(sheetURL, { Papa.parse(sheetURL, {
Zeile 210: Zeile 217:
   complete: function(results) {   complete: function(results) {
  
-    const data = results.data; +    const tbody = document.querySelector("#gema-app #schoolTable tbody");
-    const tbody = document.querySelector("#schoolTable tbody");+
  
-    data.forEach(row => {+    results.data.forEach(row => {
  
       const tr = document.createElement("tr");       const tr = document.createElement("tr");
Zeile 232: Zeile 238:
 }); });
  
-/* -------- GEMA Icons -------- */+/* -------- GEMA Ampel -------- */
  
 function getGemaIcon(status) { function getGemaIcon(status) {
Zeile 254: Zeile 260:
 } }
  
-/* -------- Suche (schnell) -------- */+/* -------- Suche -------- */
  
 function debounce(func, delay) { function debounce(func, delay) {
Zeile 264: Zeile 270:
 } }
  
-document.getElementById("searchInput").addEventListener("keyup", debounce(function() {+document.querySelector("#gema-app #searchInput") 
 +.addEventListener("keyup", debounce(function() {
  
   let filter = this.value.toLowerCase();   let filter = this.value.toLowerCase();
-  let rows = document.querySelectorAll("#schoolTable tbody tr");+  let rows = document.querySelectorAll("#gema-app tbody tr");
   let visibleCount = 0;   let visibleCount = 0;
  
Zeile 279: Zeile 286:
   });   });
  
-  document.getElementById("info").textContent =+  document.querySelector("#gema-app #info").textContent =
     visibleCount + " Schule(n) gefunden";     visibleCount + " Schule(n) gefunden";
  
Zeile 287: Zeile 294:
  
 function sortTable(n) { function sortTable(n) {
-  let table = document.getElementById("schoolTable");+  let table = document.querySelector("#gema-app #schoolTable");
   let rows = Array.from(table.tBodies[0].rows);   let rows = Array.from(table.tBodies[0].rows);
   let asc = table.getAttribute("data-dir") !== "asc";   let asc = table.getAttribute("data-dir") !== "asc";
Zeile 301: Zeile 308:
 } }
  
-/* -------- Ansicht wechseln -------- */+/* -------- Ansicht -------- */
  
 function toggleView() { function toggleView() {
-  document.body.classList.toggle("card-view"); +  document.getElementById("gema-app").classList.toggle("card-view"); 
-  document.body.classList.toggle("force-table");+  document.getElementById("gema-app").classList.toggle("force-table");
 } }
  
links/gema.1774173030.txt.gz · Zuletzt geändert: von Eric Weber