Anwendung HTML CSS und JS in einer Datei
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<script type="text/javascript" src="<https://www.gstatic.com/charts/loader.js>"></script>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined>" />
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #0e0e0e;
color: #fff;
}
.sidebar {
position: fixed; /* Sidebar remains fixed */
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: #131313;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar ul {
top: 20vh;
position: relative; /* Für Indicator-Positionierung */
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.sidebar li {
margin-bottom: 20px;
position: relative;
display: flex;
justify-content: center; /* Zentriert die Buttons horizontal */
}
.sidebar button {
background: #131313;
border: none;
border-radius: 0 10px 10px 0;
padding: 10px;
width: 100%;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column; /* Icons über Text */
align-items: center;
gap: 5px;
color: #f1f1f1;
transition: background-color 0.3s ease, color 0.3s ease;
}
.sidebar button span.material-icons {
font-size: 24px; /* Größe des Icons */
color: #f1f1f1;
}
.sidebar button span:last-child {
font-size: 14px; /* Größe des Textes */
}
.sidebar button.active {
background: #474747;
color: #fff;
}
.sidebar .indicator {
position: absolute;
left: -4px; /* Position links neben den Buttons */
width: 4px; /* Breite des Indicators */
background: #f1f1f1; /* Farbe des Indicators */
transition: top 0.3s ease, height 0.3s ease; /* Glatte Übergänge */
z-index: 10; /* Über anderen Elementen */
}
.sidebar .home-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between; /* Icon und Text linksbündig */
background-color: #131313;
border: 1px solid #fff; /* Weißer Rahmen */
border-radius: 5px;
padding: 10px 12px; /* Polsterung für besseren Look */
color: #fff;
font-size: 16px;
text-align: left; /* Links ausrichten */
width: 100%;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease;
gap: 10px; /* Abstand zwischen Icon und Text */
}
.sidebar .home-button span {
display: inline-block; /* Sicherstellen, dass Icon und Text korrekt nebeneinander stehen */
}
.sidebar .home-button span.material-symbols-outlined {
font-size: 30px; /* Größe des Icons */
position: absolute; /* Icon unabhängig platzieren */
left: 30px; /* Abstand vom linken Rand */
}
.sidebar .home-button span:nth-child(2) {
flex: 1; /* Beschriftung nimmt den verfügbaren Platz ein */
text-align: center; /* Beschriftung wird zentriert */
}
.sidebar .home-button:hover {
background-color: #474747; /* Hover-Farbe */
}
.main {
margin-left: 220px;
padding: 0 20px 20px 20px;
}
.sticky {
position: sticky;
top: 0;
z-index: 1000;
background-color: #0e0e0e;
padding: 20px 20px 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
transition: margin 0.3s ease; /* Glatter Übergang */
}
.chip {
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
font-size: 14px;
transition: background-color 0.3s, border-color 0.3s, color 0.3s, padding 0.3s ease, font-size 0.3s ease;
}
.section {
height: 80vh;
border-bottom: 1px solid #ccc;
padding: 20px 0 20px 20px;
width: 100%;
}
.datepicker-toggle {
display: inline-flex;
justify-content: space-between;
align-items: center;
position: relative;
background-color: #131313;
cursor: pointer;
padding: 8px 12px;
width: 245px;
border: 2px solid #fff;
border-radius: 7px;
color: #fff;
transition: border-width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease; /* Glatter Übergang */
}
.datepicker-toggle span {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
transition: font-size 0.3s ease;
}
.datestyle {
background-color: #131313;
color: #fff;
border: none;
height: 100%;
width: 100%;
cursor: pointer;
font-size: 15px;
appearance: none; /* Entfernt browser-spezifische Styles */
-webkit-appearance: none; /* Für Safari */
-moz-appearance: none; /* Für Firefox */
transition: font-size 0.3s ease;
}
.datepicker-toggle input::-webkit-calendar-picker-indicator {
display: none; /* Versteckt das Standard-Symbol des Datepickers */
}
</style>
</head>
<body>
<div class="sidebar">
<button class="home-button" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
<span style="font-size: 20px;" class="material-symbols-outlined">arrow_back</span>
<span>Home</span>
</button>
<ul id="sidebar-list">
<div id="indicator" class="indicator"></div>
<li>
<button onclick="scrollToSection('section1')" class="active">
<span class="material-symbols-outlined">bar_chart</span>
<span>Täglich</span>
</button>
</li>
<li>
<button onclick="scrollToSection('section2')">
<span class="material-symbols-outlined">stacked_bar_chart</span>
<span>Monat Zahlen</span>
</button>
</li>
<li>
<button onclick="scrollToSection('section3')">
<span class="material-symbols-outlined">stacked_line_chart</span>
<span>Monat Trends</span>
</button>
</li>
<li>
<button onclick="scrollToSection('section4')">
<span class="material-symbols-outlined">pie_chart</span>
<span>Jahres Gesamt</span>
</button>
</li>
</ul>
</div>
<div class="main">
<div class="sticky">
<div class="datepicker-toggle">
<input type="date" id="datePicker" class="datestyle" onchange="updateSelectedDate()">
<span class="material-symbols-outlined" onclick="openDatePicker()">event</span>
</div>
<div class="chips" id="chipsContainer"></div>
</div>
<div id="section1" class="section">
<h2>Täglich</h2>
<div id="chart_div" style="width: 100%; height: 70vh;"></div>
</div>
<div id="section2" class="section">
<h2>Monat Zahlen</h2>
<div id="chart_div_month" style="width: 100%; height:70vh;"></div>
</div>
<div id="section3" class="section">
<h2>Monat Trends</h2>
<div id="chart_div_month_line" style="width: 100%; height: 70vh;"></div>
</div>
<div id="section4" class="section">
<h2>Jahres Gesamt</h2>
<div id="chart_div_pie" style="width: 100%; height: 70vh;"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const sections = [
{ id: "section1", label: "Täglich", offset: 100 },
{ id: "section2", label: "Monat Zahlen", offset: 130 }, // Individueller Offset für section2
{ id: "section3", label: "Monat Trends", offset: 100 },
{ id: "section4", label: "Jahres Gesamt", offset: 100 },
];
const indicator = document.getElementById("indicator");
const buttons = Array.from(document.querySelectorAll("#sidebar-list li button"));
function setActiveSection(sectionId) {
const activeButton = buttons.find((button) =>
button.textContent.trim().includes(
sections.find((s) => s.id === sectionId).label
)
);
if (activeButton) {
buttons.forEach((button) => button.classList.remove("active"));
activeButton.classList.add("active");
// Update indicator position
indicator.style.top = `${activeButton.parentElement.offsetTop}px`;
indicator.style.height = `${activeButton.offsetHeight}px`;
}
}
function updateActiveSectionOnScroll() {
const scrollPosition = window.scrollY + window.innerHeight / 2;
sections.forEach((section) => {
const element = document.getElementById(section.id);
const offset = section.offset; // Offset pro Section
if (
element.offsetTop - offset <= scrollPosition &&
element.offsetTop + element.offsetHeight - offset > scrollPosition
) {
setActiveSection(section.id);
}
});
}
// Initialize indicator for the first section
setActiveSection(sections[0].id);
// Update active section on scroll
window.addEventListener("scroll", updateActiveSectionOnScroll);
// Smooth scrolling and active state change on button click
buttons.forEach((button, index) => {
button.addEventListener("click", () => {
const targetSection = document.getElementById(sections[index].id);
const targetOffset = sections[index].offset; // Offset pro Section
const targetPosition = targetSection.offsetTop - targetOffset;
window.scrollTo({ top: targetPosition, behavior: "smooth" });
setActiveSection(sections[index].id);
});
});
});
function openDatePicker() {
const dateInput = document.getElementById("datePicker");
dateInput.showPicker(); // Zeigt den nativen Datepicker an (unterstützt von modernen Browsern)
}
// Initialize Google Charts
google.charts.load('current', { packages: ['corechart'] });
function getTodayDate() {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
document.addEventListener('DOMContentLoaded', () => {
const datePicker = document.getElementById("datePicker");
const today = getTodayDate();
datePicker.value = today; // Setze das heutige Datum im Date Picker
selectedDate = today; // Initialisiere die `selectedDate`-Variable
updateCharts(); // Lade die Diagramme basierend auf dem heutigen Datum
});
const today = new Date();
const formattedDate = today.toISOString().split('T')[0];
const chipColors = [
"#ffd700", "#ffb14e", "#fa8775", "#ea5f94", "#cd34b5", "#f669f4", "#9775ff", "#00ff00",
"#00ffff", "#00bfff", "#abfb70", "#ff6f61", "#ffb3c1", "#00bda0", "#ff00ff", "#fcff18"
];
const chipLabels = [
"Aal", "Meerneunauge", "Maifisch", "Brachse", "Zobel", "Güster", "Rapfen", "Aland",
"Ukelei", "Wels", "Nase", "Barbe", "Lachs", "Forelle", "Döbel", "Karpfen"
];
const fishColorMap = {
"Aal": "#ffd700",
"Meerneunauge": "#ffb14e",
"Maifisch": "#fa8775",
"Brachse": "#ea5f94",
"Zobel": "#cd34b5",
"Güster": "#f669f4",
"Rapfen": "#9775ff",
"Aland": "#00ff00",
"Ukelei": "#00ffff",
"Wels": "#00bfff",
"Nase": "#abfb70",
"Barbe": "#ff6f61",
"Lachs": "#ffb3c1",
"Forelle": "#00bda0",
"Döbel": "#ff00ff",
"Karpfen": "#fcff18"
};
const dailyFishToColumnMap = {
"Aal": "H", "Meerneunauge": "I", "Maifisch": "J", "Brachse": "K",
"Zobel": "L", "Güster": "M", "Rapfen": "N", "Aland": "O",
"Ukelei": "P", "Wels": "Q", "Nase": "R", "Barbe": "S",
"Lachs": "T", "Forelle": "U", "Döbel": "V", "Karpfen": "W"
};
const fishToColumnMap = {
"Aal": "AA", "Meerneunauge": "AB", "Maifisch": "AC", "Brachse": "AD",
"Zobel": "AE", "Güster": "AF", "Rapfen": "AG", "Aland": "AH",
"Ukelei": "AI", "Wels": "AJ", "Nase": "AK", "Barbe": "AL",
"Lachs": "AM", "Forelle": "AN", "Döbel": "AO", "Karpfen": "AP"
};
const fishTypes = Object.keys(fishToColumnMap);
let selectedDate = new Date().toISOString().split('T')[0];
function updateSelectedDate() {
const datePicker = document.getElementById("datePicker");
selectedDate = datePicker.value;
console.log("Updated selected date:", selectedDate);
updateCharts(); // Aktualisiere die Diagramme, wenn das Datum geändert wird
}
let selectedFish = [...chipLabels];
const chipsContainer = document.getElementById('chipsContainer');
chipLabels.forEach((label, index) => {
const chip = document.createElement('div');
chip.textContent = label;
chip.className = 'chip';
chip.style.backgroundColor = fishColorMap[label];
chip.style.color = '#000';
chip.style.border = `2px solid ${fishColorMap[label]}`;
chip.dataset.active = "true";
chip.addEventListener('click', () => {
if (chip.dataset.active === "true") {
chip.dataset.active = "false";
chip.style.backgroundColor = '#474747';
chip.style.color = '#fff';
chip.style.border = '2px solid #474747';
} else {
chip.dataset.active = "true";
chip.style.backgroundColor = fishColorMap[label];
chip.style.color = '#000';
chip.style.border = `2px solid ${fishColorMap[label]}`;
}
updateSelectedFish();
});
chipsContainer.appendChild(chip);
});
function updateSelectedFish() {
selectedFish = Array.from(document.querySelectorAll('.chip'))
.filter(chip => chip.dataset.active === "true")
.map(chip => chip.textContent);
console.log("Updated selected fish:", selectedFish); // Debugging
// Wenn keine Fische ausgewählt sind, breche ab
if (selectedFish.length === 0) {
console.warn("No fish selected. Clearing charts.");
clearCharts(); // Diagramme zurücksetzen, wenn keine Chips ausgewählt sind
return;
}
updateCharts(); // Diagramme neu laden
}
console.log('Selected fish:', selectedFish);
function updateCharts() {
console.log(`Updating charts for date: ${selectedDate} and fish:`, selectedFish);
// Zeichne die Diagramme nur, wenn Chips ausgewählt sind
if (selectedFish.length > 0) {
drawDailyChart();
drawMonthlyChart();
drawMonthlyLineChart();
drawYearlyPieChart();
} else {
clearCharts();
}
}
function drawDailyChart() {
if (!selectedDate) {
console.error("No date selected.");
return;
}
if (selectedFish.length === 0) {
console.error("No fish selected for daily chart.");
return;
}
const getColorsForSelectedFish = () => {
return selectedFish.map(fish => fishColorMap[fish]);
};
const fishColumns = selectedFish
.map(fish => `SUM(${dailyFishToColumnMap[fish]})`)
.join(", ");
const query = new google.visualization.Query(
"<https://docs.google.com/spreadsheets/d/1i-0HYoiLWieAK4XNKwA-khVLoJhGEkG61E0NbuTsqSo/edit?usp=sharingheaders=1>"
);
const dateFilter = `WHERE F = '${selectedDate}'`; // Verwende das ausgewählte Datum
query.setQuery(
`SELECT G, ${fishColumns} ${dateFilter} GROUP BY G ORDER BY G`
);
query.send(response => {
if (response.isError()) {
console.error("Error in query:", response.getMessage());
return;
}
const rawData = response.getDataTable();
if (!rawData) {
console.error("No data returned for daily chart.");
return;
}
const data = new google.visualization.DataTable();
data.addColumn("string", "Zeit");
selectedFish.forEach(fish => {
data.addColumn("number", fish);
data.addColumn({ type: "string", role: "tooltip" });
});
for (let i = 0; i < rawData.getNumberOfRows(); i++) {
const row = [rawData.getValue(i, 0)];
selectedFish.forEach((fish, index) => {
const count = rawData.getValue(i, index + 1);
row.push(count);
row.push(`${fish}: ${count}`);
});
data.addRow(row);
}
//neu
const options = {
title: 'Fischzahlen - Ausgewählter Tag',
backgroundColor: '#0e0e0e',
titleTextStyle: {
color: 'white'
},
isStacked: true,
hAxis: {
title: 'Zeit',
titleTextStyle: { color: 'white' },
textStyle: { color: 'white' }
},
vAxis: { title: 'Anzahl',
format: '0',
min: 0,
titleTextStyle: { color: 'white' },
textStyle: { color: 'white' }
},
chartArea: { width: '70%', height: '80%' },
legend: 'none',
backgroundColor: '#0e0e0e',
colors: getColorsForSelectedFish(),
};
const chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
console.log("Drawing Daily Chart");
}
//monthly bar chart
function drawMonthlyChart() {
if (!selectedDate) {
console.error("No date selected.");
return;
}
if (selectedFish.length === 0) {
console.error("No fish selected for monthly chart.");
return;
}
const [year, month] = selectedDate.split('-');
const startOfMonth = `${year}-${month}-01`;
const endOfMonth = new Date(year, month, 0).toISOString().split('T')[0];
const fishColumns = selectedFish
.map(fish => `SUM(${fishToColumnMap[fish]})`)
.join(", ");
const query = new google.visualization.Query(
"<https://docs.google.com/spreadsheets/d/1i-0HYoiLWieAK4XNKwA-khVLoJhGEkG61E0NbuTsqSo/edit?usp=sharingheaders=1>"
);
const monthFilter = `WHERE F >= '${startOfMonth}' AND F <= '${endOfMonth}'`;
query.setQuery(`SELECT Z, ${fishColumns} ${monthFilter } GROUP BY Z ORDER BY Z`);
console.log(`Query: SELECT Z, ${fishColumns} ${monthFilter} GROUP BY Z ORDER BY Z`);
query.send(response => {
if (response.isError()) {
console.error("Error in query:", response.getMessage());
return;
}
const rawData = response.getDataTable();
if (!rawData || rawData.getNumberOfRows() === 0) {
console.error("No data returned for monthly chart.");
const container = document.getElementById("chart_div_month");
container.innerHTML = "<p style='color: white; text-align: center;'>Keine Daten für den Monat verfügbar</p>";
return;
}
const data = new google.visualization.DataTable();
data.addColumn("string", "Datum");
selectedFish.forEach(fish => {
data.addColumn("number", fish);
data.addColumn({ type: "string", role: "tooltip" }); // Tooltip für jeden Fisch
});
for (let i = 0; i < rawData.getNumberOfRows(); i++) {
const row = [rawData.getValue(i, 0)];
selectedFish.forEach((fish, index) => {
const count = rawData.getValue(i, index + 1);
row.push(count); // Anzahl
row.push(`${fish}: ${count}`); // Tooltip
});
data.addRow(row);
}
const options = {
title: "Fischzahlen - Monatliche Balkendiagramm",
backgroundColor: "#0e0e0e",
titleTextStyle: {
color: "white",
},
hAxis: {
title: "Datum",
titleTextStyle: { color: "white" },
textStyle: { color: "white" },
},
vAxis: {
title: "Anzahl",
format: "0",
minValue: 0,
titleTextStyle: { color: "white" },
textStyle: { color: "white" },
},
chartArea: {
width: "70%",
height: "80%",
},
isStacked: true,
legend: "none",
colors: selectedFish.map(fish => fishColorMap[fish]),
};
const chart = new google.visualization.ColumnChart(document.getElementById("chart_div_month"));
chart.draw(data, options);
});
}
function drawMonthlyLineChart() {
if (!selectedDate) {
console.error("No date selected.");
return;
}
if (selectedFish.length === 0) {
console.error("No fish selected for monthly line chart.");
return;
}
const [year, month] = selectedDate.split('-');
const startOfMonth = `${year}-${month}-01`;
const endOfMonth = new Date(year, month, 0).toISOString().split('T')[0];
const fishColumns = selectedFish
.map(fish => `SUM(${fishToColumnMap[fish]})`)
.join(", ");
const query = new google.visualization.Query(
"<https://docs.google.com/spreadsheets/d/1i-0HYoiLWieAK4XNKwA-khVLoJhGEkG61E0NbuTsqSo/edit?usp=sharingheaders=1>"
);
const monthFilter = `WHERE F >= '${startOfMonth}' AND F <= '${endOfMonth}'`;
query.setQuery(`SELECT Z, ${fishColumns} ${monthFilter} GROUP BY Z ORDER BY Z`);
console.log(`Query: SELECT Z, ${fishColumns} ${monthFilter} GROUP BY Z ORDER BY Z`);
query.send(response => {
if (response.isError()) {
console.error("Error in query:", response.getMessage());
return;
}
const rawData = response.getDataTable();
if (!rawData || rawData.getNumberOfRows() === 0) {
console.error("No data returned for monthly line chart.");
const container = document.getElementById("chart_div_month_line");
container.innerHTML = "<p style='color: white; text-align: center;'>Keine Daten für den Monat verfügbar</p>";
return;
}
const data = new google.visualization.DataTable();
data.addColumn("string", "Datum");
selectedFish.forEach(fish => {
data.addColumn("number", fish);
data.addColumn({ type: "string", role: "tooltip" }); // Tooltip für jeden Fisch
});
for (let i = 0; i < rawData.getNumberOfRows(); i++) {
const row = [rawData.getValue(i, 0)];
selectedFish.forEach((fish, index) => {
const count = rawData.getValue(i, index + 1);
row.push(count); // Anzahl
row.push(`${fish}: ${count}`); // Tooltip
});
data.addRow(row);
}
const options = {
title: "Fischzahlen - Monatliche Liniendiagramm",
backgroundColor: "#0e0e0e",
titleTextStyle: {
color: "white",
},
hAxis: {
title: "Datum",
titleTextStyle: { color: "white" },
textStyle: { color: "white" },
},
vAxis: {
title: "Anzahl",
format: "0",
minValue: 0,
titleTextStyle: { color: "white" },
textStyle: { color: "white" },
},
chartArea: {
width: "70%",
height: "80%",
},
legend: "none",
colors: selectedFish.map(fish => fishColorMap[fish]),
};
const chart = new google.visualization.LineChart(document.getElementById("chart_div_month_line"));
chart.draw(data, options);
});
}
function drawYearlyPieChart() {
if (!selectedDate) {
console.error("No date selected.");
return;
}
if (selectedFish.length === 0) {
console.error("No fish selected for yearly pie chart.");
return;
}
const year = selectedDate.split('-')[0];
const startOfYear = `${year}-01-01`;
const endOfYear = `${year}-12-31`;
const fishColumns = selectedFish
.map(fish => `SUM(${fishToColumnMap[fish]})`)
.join(", ");
const query = new google.visualization.Query(
"<https://docs.google.com/spreadsheets/d/1i-0HYoiLWieAK4XNKwA-khVLoJhGEkG61E0NbuTsqSo/edit?usp=sharingheaders=1>"
);
const yearFilter = `WHERE F >= '${startOfYear}' AND F <= '${endOfYear}'`;
query.setQuery(`SELECT ${fishColumns} ${yearFilter}`);
console.log(`Query: SELECT ${fishColumns} ${yearFilter}`);
query.send(response => {
if (response.isError()) {
console.error("Error in query:", response.getMessage());
return;
}
const rawData = response.getDataTable();
if (!rawData || rawData.getNumberOfColumns() === 0) {
console.error("No data returned for yearly pie chart.");
const container = document.getElementById("chart_div_pie");
container.innerHTML = "<p style='color: white; text-align: center;'>Keine Daten für das Jahr verfügbar</p>";
return;
}
const data = new google.visualization.DataTable();
data.addColumn("string", "Fischart");
data.addColumn("number", "Anzahl");
selectedFish.forEach((fish, index) => {
const value = rawData.getValue(0, index);
if (value !== null) {
data.addRow([fish, value]);
}
});
const options = {
title: `Jährliche Fischzahlen (in Prozent) - ${year}`,
pieHole: 0.4,
pieSliceText: "percentage",
pieSliceBorderColor: "#fff",
backgroundColor: "#0e0e0e",
titleTextStyle: {
color: "white",
},
pieSliceTextStyle: {
color: "#0e0e0e",
},
chartArea: {
width: "80%",
height: "80%",
},
legend: "none",
colors: selectedFish.map(fish => fishColorMap[fish]),
};
const chart = new google.visualization.PieChart(document.getElementById("chart_div_pie"));
chart.draw(data, options);
});
}
google.charts.setOnLoadCallback(() => {
updateCharts();
});
window.addEventListener("scroll", () => {
const stickyElement = document.querySelector(".chips");
const datepickerToggle = document.querySelector(".datepicker-toggle");
const datepickerToggleSpan = document.querySelector(".datepicker-toggle span");
const datestyle = document.querySelector(".datestyle")
const chipstyle = document.querySelectorAll(".chip");
if (window.scrollY > 0) {
chipstyle.forEach(chip => {
chip.style.padding = "4px 8px"; // Schmalere Chips
chip.style.fontSize = "12px"; // Optional: Kleinere Schrift
});
} else {
chipstyle.forEach(chip => {
chip.style.padding = "8px 12px"; // Original-Chip-Größe
chip.style.fontSize = "14px"; // Optional: Ursprüngliche Schriftgröße
});
}
if (window.scrollY > 0) {
// Änderungen bei Scroll
stickyElement.style.marginTop = "10px";
datepickerToggle.style.borderWidth = "1px";
datepickerToggle.style.paddingTop = "0px";
datepickerToggle.style.paddingBottom = "0px";
datepickerToggle.style.paddingLeft = "3px";
datepickerToggle.style.paddingRight = "3px";
datepickerToggle.style.borderRadius = "2px";
datepickerToggleSpan.style.fontSize = "15px";
datestyle.style.fontSize = "10px";
} else {
// Zurücksetzen, wenn oben
stickyElement.style.marginTop = "20px";
datepickerToggle.style.borderWidth = "2px";
datepickerToggle.style.paddingTop = "8px";
datepickerToggle.style.paddingBottom = "8px";
datepickerToggle.style.paddingLeft = "12px";
datepickerToggle.style.paddingRight = "12px";
datepickerToggle.style.borderRadius = "7px";
datepickerToggleSpan.style.fontSize = "24px";
datestyle.style.fontSize = "15px";
}
});
</script>
</body>
</html>