489 lines
18 KiB
HTML
489 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Einkauf Suche</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f0f2f5;
|
|
}
|
|
|
|
header {
|
|
background-color: #3498db;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.search-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
#query {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
padding: 0.75rem;
|
|
font-size: 1rem;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#searchButton {
|
|
padding: 0.75rem 2rem;
|
|
font-size: 1rem;
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#searchButton:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
.checkbox-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.checkbox-group {
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
max-width: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
font-size: 1.1rem;
|
|
color: #3498db;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background-color: #3498db;
|
|
color: white;
|
|
margin-top: -125px; /* Verschiebt den Footer 20px nach oben */
|
|
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.checkbox-group {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Stile für die Kategorie-Checkbox */
|
|
.category-label {
|
|
font-size: 1.2rem; /* Größere Schriftgröße */
|
|
font-weight: bold; /* Fett für mehr Betonung */
|
|
color: #e67e22; /* Eine auffällige Farbe für die Kategorie */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.category-label input[type="checkbox"] {
|
|
margin-right: 0.5rem;
|
|
transform: scale(1.2); /* Größere Checkbox für die Kategorie */
|
|
}
|
|
|
|
.category-label span {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Normale Checkbox-Stile für die Shops */
|
|
.checkbox-group label {
|
|
font-size: 1rem; /* Normale Schriftgröße für Shops */
|
|
color: #3498db; /* Normale Farbe für Shops */
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Dynamische Spaltenaufteilung */
|
|
grid-gap: 50px; /* Abstand zwischen den Kategorien */
|
|
}
|
|
|
|
.checkbox-group {
|
|
background-color: #f7f7f7;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
display: block; /* Jede Kategorie bekommt ihren eigenen Block */
|
|
}
|
|
|
|
.category-label {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: #e67e22;
|
|
display: block; /* Stellen Sie sicher, dass das Label seine eigene Zeile einnimmt */
|
|
margin-bottom: 0.5px; /* Abstände nach unten */
|
|
white-space: normal; /* Zeilenumbrüche erlauben, falls notwendig */
|
|
line-height: 1.2; /* Einstellen der Zeilenhöhe für bessere Lesbarkeit */
|
|
}
|
|
|
|
.category-label input[type="checkbox"] {
|
|
margin-right: 10px;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
label {
|
|
font-size: 1rem;
|
|
color: #3498db;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Einkauf Suche</h1>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="search-container">
|
|
<label for="query">Suchbegriff:</label>
|
|
<input type="text" id="query" name="query" placeholder="Suchbegriff eingeben..." />
|
|
<button id="searchButton" onclick="performSearch()">Suchen</button>
|
|
</div>
|
|
|
|
<div class="checkbox-container">
|
|
<div class="checkbox-group" style="height: 100px; width: 210px;">
|
|
<label class="category-label elektronik">
|
|
<input type="checkbox" id="masterElektronikCheckbox" onclick="toggleSubCheckboxes('masterElektronikCheckbox', 'elektronik')">
|
|
<span>Elektronik Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="conrad" value="conrad" class="elektronik-checkbox">
|
|
<label for="conrad">Conrad</label><br>
|
|
|
|
<input type="checkbox" id="reichelt" value="reichelt" class="elektronik-checkbox">
|
|
<label for="reichelt">Reichelt</label><br>
|
|
|
|
<input type="checkbox" id="kosatec" value="kosatec" class="elektronik-checkbox">
|
|
<label for="kosatec">Kosatec</label>
|
|
</div>
|
|
|
|
|
|
<div class="checkbox-group" style="height: 100px; width: 210px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterVerpackungenCheckbox" onclick="toggleSubCheckboxes('masterVerpackungenCheckbox', 'verpackungen')">
|
|
<span>Verpackungs Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="papstar" value="papstar" class="verpackungen-checkbox">
|
|
<label for="papstar">Papstar</label><br>
|
|
|
|
<input type="checkbox" id="pacovis" value="pacovis"class="verpackungen-checkbox">
|
|
<label for="pacovis">Pacovis</label><br>
|
|
|
|
<input type="checkbox" id="transpak" value="transpak" class="verpackungen-checkbox">
|
|
<label for="transpak">Transpak</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterBaumarktCheckbox" onclick="toggleSubCheckboxes('masterBaumarktCheckbox', 'baumarkt')">
|
|
<span>Baumarkt Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="hornbach" value="hornbach" class="baumarkt-checkbox">
|
|
<label for="hornbach">Hornbach</label><br>
|
|
|
|
<input type="checkbox" id="wuerth" value="wuerth"class="baumarkt-checkbox">
|
|
<label for="wuerth">Pacovis</label><br>
|
|
|
|
<input type="checkbox" id="fkr" value="fkr" class="baumarkt-checkbox">
|
|
<label for="fkr">FKR</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="contorion" value="contorion" class="baumarkt-checkbox">
|
|
<label for="contorion">Contorion</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="esska" value="esska" class="baumarkt-checkbox">
|
|
<label for="esska">Esska</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="toolineo" value="toolineo" class="baumarkt-checkbox">
|
|
<label for="toolineo">Toolineo</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="voelkner" value="voelkner" class="baumarkt-checkbox">
|
|
<label for="voelkner">Voelkner</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="megabad" value="megabad" class="baumarkt-checkbox">
|
|
<label for="megabad">Megabad</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="baubeschlag" value="baubeschlag" class="baumarkt-checkbox">
|
|
<label for="baubeschlag">Baubeschlag Shop</label>
|
|
<br>
|
|
|
|
<input type="checkbox" id="ips" value="ips" class="baumarkt-checkbox">
|
|
<label for="ips">IPS</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="haefele" value="haefele" class="baumarkt-checkbox">
|
|
<label for="haefele">Häfele</label>
|
|
<label></label>
|
|
<br>
|
|
<input type="checkbox" id="delker" value="delker" class="baumarkt-checkbox">
|
|
<label for="delker">Delker</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 200px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterKuecheCheckbox" onclick="toggleSubCheckboxes('masterKuecheCheckbox', 'kueche')">
|
|
<span>Küchen Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="esmeyer" value="esmeyer" class="kueche-checkbox">
|
|
<label for="esmeyer">Esmeyer</label><br>
|
|
|
|
<input type="checkbox" id="lusini" value="lusini" class="kueche-checkbox">
|
|
<label for="lusini">Lusini</label><br>
|
|
|
|
<input type="checkbox" id="tischwelt" value="tischwelt" class="kueche-checkbox">
|
|
<label for="tischwelt">Tischwelt</label><br>
|
|
|
|
<input type="checkbox" id="schafferer" value="schafferer" class="kueche-checkbox">
|
|
<label for="schafferer">Schafferer</label><br>
|
|
|
|
<input type="checkbox" id="gastrokaufhaus" value="gastrokaufhaus" class="kueche-checkbox">
|
|
<label for="gastrokaufhaus">Gastronomie Kaufhaus</label><br>
|
|
|
|
<input type="checkbox" id="boerner" value="boerner" class="kueche-checkbox">
|
|
<label for="boerner">Börner</label><br>
|
|
|
|
<input type="checkbox" id="ggmgastro" value="ggmgastro" class="kueche-checkbox">
|
|
<label for="ggmgastro">GGM Gastro</label><br>
|
|
|
|
<input type="checkbox" id="gastroteileshop" value="gastroteileshop" class="kueche-checkbox">
|
|
<label for="gastroteileshop">Gastroteile Shop </label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 150px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterHygieneCheckbox" onclick="toggleSubCheckboxes('masterHygieneCheckbox', 'hygiene')">
|
|
<span>Hygiene Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="hygi" value="hygi" class="hygiene-checkbox">
|
|
<label for="hygi">Hygi</label><br>
|
|
|
|
<input type="checkbox" id="proficlean" value="proficlean" class="hygiene-checkbox">
|
|
<label for="proficlean">Proficlean Shop</label><br>
|
|
|
|
<input type="checkbox" id="reinigungsberater" value="reinigungsberater" class="hygiene-checkbox">
|
|
<label for="reinigungsberater">Reinigungsberater</label><br>
|
|
|
|
<input type="checkbox" id="franzmensch" value="franzmensch" class="hygiene-checkbox">
|
|
<label for="franzmensch">Franz Mensch</label><br>
|
|
|
|
<input type="checkbox" id="rossmann" value="rossmann" class="hygiene-checkbox">
|
|
<label for="rossmann">Rossmann</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 100px; position: relative; top: -220px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterSchilderCheckbox" onclick="toggleSubCheckboxes('masterSchilderCheckbox', 'schilder')">
|
|
<span>Schilder Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="brewes" value="brewes" class="schilder-checkbox">
|
|
<label for="brewes">Brewes</label><br>
|
|
|
|
<input type="checkbox" id="schildershop24" value="schildershop24" class="schilder-checkbox">
|
|
<label for="schildershop24">Schildershop 24</label><br>
|
|
|
|
<input type="checkbox" id="vkfrenzel" value="vkfrenzel" class="schilder-checkbox">
|
|
<label for="vkfrenzel">VKF Renzel</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 100px; position: relative; top: -220px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterLandwirtschaftCheckbox" onclick="toggleSubCheckboxes('masterLandwirtschaftCheckbox', 'landwirtschaft')">
|
|
<span>Landwirtschaft</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="siepmann" value="siepmann" class="landwirtschaft-checkbox">
|
|
<label for="siepmann">Siepmann</label><br>
|
|
|
|
<input type="checkbox" id="fksoehnchen" value="fksoehnchen" class="landwirtschaft-checkbox">
|
|
<label for="fksoehnchen">FK Söhnchen</label><br>
|
|
|
|
<input type="checkbox" id="wahlagrar" value="wahlagrar" class="landwirtschaft-checkbox">
|
|
<label for="wahlagrar">Wahl Agrar</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 120px; position: relative; top: -80px; left: -500px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterArbeitsschutzCheckbox" onclick="toggleSubCheckboxes('masterArbeitsschutzCheckbox', 'arbeitsschutz')">
|
|
<span>Arbeitsschutz</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="engelbert" value="engelbert" class="arbeitsschutz-checkbox">
|
|
<label for="engelbert">Engelbert Strauss</label><br>
|
|
|
|
<input type="checkbox" id="arbeitsplatzmattenprofi" value="arbeitsplatzmattenprofi" class="arbeitsschutz-checkbox">
|
|
<label for="arbeitsplatzmattenprofi">Arbeitsplatzmattenprofi</label><br>
|
|
|
|
<input type="checkbox" id="ara" value="ara" class="arbeitsschutz-checkbox">
|
|
<label for="ara">ARA</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 120px; position: relative; top: -80px; left: -500px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterMedCheckbox" onclick="toggleSubCheckboxes('masterMedCheckbox', 'med')">
|
|
<span>Med. Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="oekonomed" value="oekonomed" class="med-checkbox">
|
|
<label for="oekonomed">Oekonomed</label><br>
|
|
|
|
<input type="checkbox" id="praxisdienst" value="praxisdienst" class="med-checkbox">
|
|
<label for="praxisdienst">Praxisdienst</label><br>
|
|
|
|
<input type="checkbox" id="gerl" value="gerl" class="med-checkbox">
|
|
<label for="gerl">Gerl</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 80px; position: relative; top: -40px; left: -500px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterStahlCheckbox" onclick="toggleSubCheckboxes('masterStahlCheckbox', 'stahl')">
|
|
<span>Stahl</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="stahlshop" value="stahlshop" class="stahl-checkbox">
|
|
<label for="stahlshop">Stahlshop</label><br>
|
|
|
|
<input type="checkbox" id="feld" value="feld" class="stahl-checkbox">
|
|
<label for="feld">Feld</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 100px; position: relative; top: -370px; left: 1000px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterDekoCheckbox" onclick="toggleSubCheckboxes('masterDekoCheckbox', 'deko')">
|
|
<span>Deko Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="frankflechtwaren" value="frankflechtwaren" class="deko-checkbox">
|
|
<label for="frankflechtwaren">Frank Flechtwaren</label><br>
|
|
|
|
<input type="checkbox" id="betzold" value="betzold" class="deko-checkbox">
|
|
<label for="betzold">Betzold</label><br>
|
|
|
|
<input type="checkbox" id="vbshobby" value="vbshobby" class="deko-checkbox">
|
|
<label for="vbshobby">VBS Hobby</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 70px; position: relative; top: -230px; left: 750px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterSaatgutCheckbox" onclick="toggleSubCheckboxes('masterSaatgutCheckbox', 'saatgut')">
|
|
<span>Saatgut Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="saatgutshop" value="saatgutshop" class="saatgut-checkbox">
|
|
<label for="saatgutshop">Saagtgut Shop</label><br>
|
|
|
|
<input type="checkbox" id="saatgutmanufaktur" value="saatgutmanufaktur" class="saatgut-checkbox">
|
|
<label for="saatgutmanufaktur">Saagtgut Manufakur</label><br>
|
|
</div>
|
|
|
|
<div class="checkbox-group" style="width: 210px; height: 100px; position: relative; top: -320px; left: 250px;">
|
|
<label class="category-label">
|
|
<input type="checkbox" id="masterSonstige ArtikelCheckbox" onclick="toggleSubCheckboxes('masterSonstige ArtikelCheckbox', 'sonstige')">
|
|
<span>Sonstige Artikel</span>
|
|
</label>
|
|
<br>
|
|
<input type="checkbox" id="labelident" value="labelident" class="sonstige-checkbox">
|
|
<label for="labelident">Label Ident (Etiketten)</label><br>
|
|
|
|
<input type="checkbox" id="ikea" value="ikea" class="sonstige-checkbox">
|
|
<label for="ikea">IKEA</label><br>
|
|
|
|
<input type="checkbox" id="thieme" value="thieme" class="sonstige-checkbox">
|
|
<label for="thieme">Sport Thieme</label><br>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Füge weitere Gruppen hier hinzu -->
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2024 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 toggleSubCheckboxes(masterCheckboxId, subCheckboxClass) {
|
|
const masterCheckbox = document.getElementById(masterCheckboxId);
|
|
const subCheckboxes = document.querySelectorAll(`.${subCheckboxClass}-checkbox`);
|
|
|
|
// Markiere oder demarkiere alle zugehörigen Checkboxen basierend auf dem Status der Master-Checkbox
|
|
subCheckboxes.forEach(checkbox => {
|
|
checkbox.checked = masterCheckbox.checked;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|