Anleitung für Pop-Ups erlauben hinzugefügt

Meldung das Popups nicht erlaubt sind eingefügt.
2025-01-12 12:16:48 +01:00 · 2025-01-12 12:16:48 +01:00 · 85822fefa2
commit 85822fefa2
parent 8b75a1a156
11 changed files with 245 additions and 42 deletions
--- a/2025-01-12_11-42.jpeg
+++ b/2025-01-12_11-42.jpeg
--- a/index.html
+++ b/index.html
@ -18,7 +18,7 @@
      color: white;
      text-align: center;
      padding: 1vh;
-      font-size: 1vw;
+      font-size: 1.5vw;
    }

    .container {
@ -92,7 +92,7 @@
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .checkbox-group label {
-      font-size: 1vw;
+      font-size: 1.5vw;
      color: #3498db;
      font-weight: bold;
    }
@ -106,7 +106,7 @@
      padding: 2vh;
      background-color: #3498db;
      color: white;
-      font-size: 1vw;
+      font-size: 1.5vw;
      margin-top: 5vh;
    }

@ -199,13 +199,22 @@
        <button id="resetButton" onclick="resetForm()">Zurücksetzen</button>
    </div>

+    <div id="popup-warning" style="display: none; background-color: #ffcc00; padding: 10px; text-align: center;">
+        <p>Pop-ups sind blockiert. Bitte erlaube Pop-ups für diese Webseite, um die Suchergebnisse in neuen Tabs zu öffnen.</p>
+        <a href="popup" style="text-decoration: none;">
+          <button style="background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
+              Wie erlaube ich Pop-ups?
+          </button>
+      </a>
+    </div>
+
    </div>

    <div class="checkbox-container">
      <div class="checkbox-group">
        <label class="category-label">
            <input type="checkbox" id="masterKuecheCheckbox" onclick="toggleSubCheckboxes('masterKuecheCheckbox', 'kueche')">
-            <span>Küchen Artikel</span>
+            <u style="color: red; font-weight: bold;">Küchen Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="esmeyer" value="esmeyer" class="kueche-checkbox">
@ -236,7 +245,7 @@
        <div class="checkbox-group">
          <label class="category-label">
              <input type="checkbox" id="masterHygieneCheckbox" onclick="toggleSubCheckboxes('masterHygieneCheckbox', 'hygiene')">
-              <span>Hygiene Artikel</span>
+              <u style="color: red; font-weight: bold;">Hygiene Artikel</u> 
          </label>
          <br>
          <input type="checkbox" id="hygi" value="hygi" class="hygiene-checkbox">
@ -261,7 +270,7 @@
      <div class="checkbox-group">
        <label class="category-label">
            <input type="checkbox" id="masterBaumarktCheckbox" onclick="toggleSubCheckboxes('masterBaumarktCheckbox', 'baumarkt')">
-            <span>Baumarkt Artikel</span>
+            <u style="color: red; font-weight: bold;">Baumarkt Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="hornbach" value="hornbach" class="baumarkt-checkbox">
@ -313,7 +322,7 @@
    <div class="checkbox-group" >
      <label class="category-label elektronik">
        <input type="checkbox" id="masterElektronikCheckbox" onclick="toggleSubCheckboxes('masterElektronikCheckbox', 'elektronik')">
-        <span>Elektronik Artikel</span>
+        <u style="color: red; font-weight: bold;">Elektronik Artikel</u> 
      </label>
      <br>
      <input type="checkbox" id="conrad" value="conrad" class="elektronik-checkbox">
@ -329,7 +338,7 @@
    <div class="checkbox-group">
      <label class="category-label">
          <input type="checkbox" id="masterVerpackungenCheckbox" onclick="toggleSubCheckboxes('masterVerpackungenCheckbox', 'verpackungen')">
-          <span>Verpackungs Artikel</span>
+          <u style="color: red; font-weight: bold;">Verpackungs Artikel</u> 
      </label>
      <br>
      <input type="checkbox" id="papstar" value="papstar" class="verpackungen-checkbox">
@ -345,7 +354,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterSchilderCheckbox" onclick="toggleSubCheckboxes('masterSchilderCheckbox', 'schilder')">
-            <span>Schilder Artikel</span>
+            <u style="color: red; font-weight: bold;">Schilder Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="brewes" value="brewes" class="schilder-checkbox">
@ -361,7 +370,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterLandwirtschaftCheckbox" onclick="toggleSubCheckboxes('masterLandwirtschaftCheckbox', 'landwirtschaft')">
-            <span>Landwirtschaft</span>
+            <u style="color: red; font-weight: bold;">Landwirtschaft</u> 
        </label>
        <br>
        <input type="checkbox" id="siepmann" value="siepmann" class="landwirtschaft-checkbox">
@ -377,7 +386,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterArbeitsschutzCheckbox" onclick="toggleSubCheckboxes('masterArbeitsschutzCheckbox', 'arbeitsschutz')">
-            <span>Arbeitsschutz</span>
+            <u style="color: red; font-weight: bold;">Arbeitsschutz</u> 
        </label>
        <br>
        <input type="checkbox" id="engelbert" value="engelbert" class="arbeitsschutz-checkbox">
@ -393,7 +402,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterMedCheckbox" onclick="toggleSubCheckboxes('masterMedCheckbox', 'med')">
-            <span>Med. Artikel</span>
+            <u style="color: red; font-weight: bold;">Med. Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="oekonomed" value="oekonomed" class="med-checkbox">
@ -409,7 +418,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterStahlCheckbox" onclick="toggleSubCheckboxes('masterStahlCheckbox', 'stahl')">
-            <span>Stahl</span>
+            <u style="color: red; font-weight: bold;">Stahl</u> 
        </label>
        <br>
        <input type="checkbox" id="stahlshop" value="stahlshop" class="stahl-checkbox">
@ -422,7 +431,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterDekoCheckbox" onclick="toggleSubCheckboxes('masterDekoCheckbox', 'deko')">
-            <span>Deko Artikel</span>
+            <u style="color: red; font-weight: bold;">Deko Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="frankflechtwaren" value="frankflechtwaren" class="deko-checkbox">
@ -438,7 +447,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterSaatgutCheckbox" onclick="toggleSubCheckboxes('masterSaatgutCheckbox', 'saatgut')">
-            <span>Saatgut Artikel</span>
+            <u style="color: red; font-weight: bold;">Saatgut Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="saatgutshop" value="saatgutshop" class="saatgut-checkbox">
@ -451,7 +460,7 @@
    <div class="checkbox-group" >
        <label class="category-label">
            <input type="checkbox" id="masterSonstige ArtikelCheckbox" onclick="toggleSubCheckboxes('masterSonstige ArtikelCheckbox', 'sonstige')">
-            <span>Sonstige Artikel</span>
+            <u style="color: red; font-weight: bold;">Sonstige Artikel</u> 
        </label>
        <br>
        <input type="checkbox" id="labelident" value="labelident" class="sonstige-checkbox">
@ -466,37 +475,54 @@
    </div>
  </div>

+
+
  <footer>
    <p>&copy; 2025 Einkauf Suche - Alle Rechte vorbehalten</p>
  </footer>

+  
+
  <script>
-    async function performSearch() {
-      const query = document.getElementById('query').value;
-      const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
-      const selectedWebsites = Array.from(checkboxes).map(checkbox => checkbox.value);
-  
-      if (!query || selectedWebsites.length === 0) {
-        alert('Bitte Suchbegriff und mindestens eine Webseite auswählen.');
-        return;
-      }
-  
-      // Für jede ausgewählte Website eine Anfrage senden
-      for (const website of selectedWebsites) {
-        try {
-          const response = await fetch(`/search?query=${query}&websites=${website}`);
-          const data = await response.json();
-  
-          // Überprüfe, ob die Such-URL existiert und öffne sie in einem neuen Fenster
-          if (data && data.length > 0 && data[0].searchUrl) {
-            window.open(data[0].searchUrl, '_blank');
-          } else {
-            console.error(`Keine gültige URL für ${website} gefunden.`);
-          }
-        } catch (error) {
-          console.error(`Fehler bei der Suche für ${website}:`, error);
+    function checkPopupBlocked() {
+        const popup = window.open('about:blank', '_blank');
+        if (!popup || popup.closed || typeof popup.closed === 'undefined') {
+            document.getElementById('popup-warning').style.display = 'block';
+        } else {
+            popup.close();
+        }
+    }
+
+    // Beim Laden der Seite überprüfen
+    window.onload = checkPopupBlocked;
+
+    async function performSearch() {
+        const query = document.getElementById('query').value;
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+        const selectedWebsites = Array.from(checkboxes).map(checkbox => checkbox.value);
+
+        if (!query || selectedWebsites.length === 0) {
+            alert('Bitte Suchbegriff und mindestens eine Webseite auswählen.');
+            return;
+        }
+
+        for (const website of selectedWebsites) {
+            try {
+                const response = await fetch(`/search?query=${query}&websites=${website}`);
+                const data = await response.json();
+
+                if (data && data.length > 0 && data[0].searchUrl) {
+                    const link = document.createElement('a');
+                    link.href = data[0].searchUrl;
+                    link.target = '_blank';
+                    link.click();
+                } else {
+                    console.error(`Keine gültige URL für ${website} gefunden.`);
+                }
+            } catch (error) {
+                console.error(`Fehler bei der Suche für ${website}:`, error);
+            }
        }
-      }
    }

        function toggleSubCheckboxes(masterCheckboxId, subCheckboxClass) {
--- a/main.go
+++ b/main.go
@ -23,7 +23,7 @@ func main() {
 	// Set up routes
 	http.HandleFunc("/", handleRoot)
 	http.HandleFunc("/config", handleConfig)
-
+	http.HandleFunc("/popup", handlePopupInstructions)
 	http.HandleFunc("/search", handleSearch)
 	http.HandleFunc("/favicon.ico", handleFavicon)

@ -75,6 +75,13 @@ func handleFavicon(w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(http.StatusNoContent)
 }

+func handlePopupInstructions(w http.ResponseWriter, r *http.Request) {
+	tmpl := template.Must(template.ParseFiles("popup.html"))
+	if err := tmpl.Execute(w, nil); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
 func generateSearchUrl(website, query string) string {
 	searchUrls := map[string]string{
 		// ----- Eletronik ----
--- a/popup.html
+++ b/popup.html
@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pop-ups erlauben</title>
+    <style>
+        /* Allgemeine Stile */
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f2f5;
+        }
+
+        header {
+            background-color: #3498db;
+            position: relative;
+            color: white;
+            text-align: center;
+            padding: 1vh;
+            font-size: 1vw;
+        }
+
+        ul {
+            list-style-type: disc;
+            margin-left: 20px;
+        }
+
+        .browser-instructions {
+            background-color: white;
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            margin: 1vh;
+        }
+
+        .container {
+            width: 70%;
+            margin: 0 auto;
+            padding: 1vh 0;
+        }
+
+            /* Responsive Bild */
+        .responsive-image {
+            max-width: 100%; /* Bild wird nie breiter als sein Container */
+            height: auto;    /* Höhe wird proportional angepasst */
+            display: block;  /* Entfernt unnötigen Abstand unter dem Bild */
+            margin: 10px 0;  /* Optional: Abstand oben und unten */
+        }
+
+        footer {
+        text-align: center;
+        padding: 2vh;
+        background-color: #3498db;
+        color: white;
+        font-size: 1.5vw;
+        margin-top: 5vh;
+        }
+
+        /* Tablet-Layout (Bildschirmbreite bis 1200px) */
+        @media (max-width: 1200px) {
+            .container {
+                width: 80%;
+            }
+
+            header {
+                font-size: 2vw;
+            }
+
+            .browser-instructions {
+                padding: 12px;
+            }
+        }
+
+        /* Mobile-Layout (Bildschirmbreite bis 768px) */
+        @media (max-width: 768px) {
+            .container {
+                width: 90%;
+            }
+
+            header {
+                font-size: 3vw;
+                padding: 2vh;
+            }
+
+            .browser-instructions {
+                padding: 10px;
+                margin: 2vh;
+            }
+        }
+
+        /* Sehr kleine Bildschirme (Bildschirmbreite bis 480px) */
+        @media (max-width: 480px) {
+            .container {
+                width: 95%;
+            }
+
+            header {
+                font-size: 4vw;
+                padding: 3vh;
+            }
+
+            .browser-instructions {
+                padding: 8px;
+                margin: 3vh;
+            }
+        }
+    </style>
+
+</head>
+<body>
+    <header>
+        <h1>Pop-ups erlauben</h1>
+    </header>
+    
+    <div class="browser-instructions">
+        <p> Wenn du bei der ersten Suche mehrere Webseiten auswählst wird oben in der Adressleiste eine Meldung erscheinen das die Pop-Ups blockiert wurden. Damit alle suchergebnisse angezeigt werden musst du die Pop-Ups erlauben.</p>
+        <p>Wenn die Pop-Ups erlaubt wurden lade die Seite neu.</p>
+    </div>
+    <div class="browser-instructions">
+        <h2>Google Chrome</h2>
+        <ul>
+            <li>Klicke auf das Pop-Up-Symbol in der Adressleiste.</li>
+            <img src="https://einkauf.diefleckenbuehler.de/public/chrome-popup.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+            <li>Hier <strong>Pop-ups und Weiterleitungen</strong> immer zulassen.</li>
+            <img src="https://einkauf.diefleckenbuehler.de/public/chrome.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+        </ul>
+    </div>
+    
+
+    <div class="browser-instructions">
+        <h2>Mozilla Firefox</h2>
+        <ul>
+            <li>Klicke auf das Einstellungen-Symbol in der Adressleiste.</li>
+            <img src="https://einkauf.diefleckenbuehler.de/public/firefox-popup.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+            <li>Scrolle zu <strong>Pop-ups blockieren</strong> und stelle es auf <strong>Erlauben</strong>.</li>
+
+            <img src="https://einkauf.diefleckenbuehler.de/public/firefox.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+        </ul>
+
+    </div>
+
+    <div class="browser-instructions">
+        <h2>Microsoft Edge</h2>
+        <ul>
+            <li>Klicke auf das Pop-Up-Symbol in der Adressleiste.</li>
+            <img src="https://einkauf.diefleckenbuehler.de/public/edge-popup.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+            <li>Hier <strong>Pop-ups und Weiterleitungen</strong> immer zulassen.</li>
+            <img src="https://einkauf.diefleckenbuehler.de/public/edge.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+
+        </ul>
+    </div>
+
+    <div class="browser-instructions">
+        <h2>Safari (macOS)</h2>
+        <ul>
+            <p>Klicke auf das Pop-Up-Symbol in der Adressleiste. Damit werden die Pop-Ups erlaubt</p>
+            <img src="https://einkauf.diefleckenbuehler.de/public/safari.jpg" alt="Pop-ups in Firefox erlauben" class="responsive-image">
+
+        </ul>
+    </div>
+
+    <footer>
+        <p>&copy; 2025 Einkauf Suche - Alle Rechte vorbehalten</p>
+      </footer>
+    
+
+</body>
+</html>
--- a/public/chrome-popup.jpg
+++ b/public/chrome-popup.jpg
--- a/public/chrome.jpg
+++ b/public/chrome.jpg
--- a/public/edge-popup.jpg
+++ b/public/edge-popup.jpg
--- a/public/edge.jpg
+++ b/public/edge.jpg
--- a/public/firefox-popup.jpg
+++ b/public/firefox-popup.jpg
--- a/public/firefox.jpg
+++ b/public/firefox.jpg
--- a/public/safari.jpg
+++ b/public/safari.jpg