|
|
| Zeile 1: |
Zeile 1: |
| <!DOCTYPE html>
| |
| <html lang="de">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Familienangebote August 2026</title>
| |
|
| |
| <style>
| |
| body{
| |
| font-family: Arial, sans-serif;
| |
| margin:20px;
| |
| background:#f5f5f5;
| |
| }
| |
|
| |
| h1{
| |
| text-align:center;
| |
| }
| |
|
| |
| .calendar{
| |
| display:grid;
| |
| grid-template-columns:repeat(7,1fr);
| |
| gap:10px;
| |
| }
| |
|
| |
| .weekday{
| |
| font-weight:bold;
| |
| text-align:center;
| |
| padding:10px;
| |
| background:#0077b6;
| |
| color:white;
| |
| }
| |
|
| |
| .day{
| |
| background:white;
| |
| border-radius:8px;
| |
| min-height:120px;
| |
| padding:8px;
| |
| cursor:pointer;
| |
| box-shadow:0 2px 4px rgba(0,0,0,.15);
| |
| }
| |
|
| |
| .day:hover{
| |
| background:#eef7ff;
| |
| }
| |
|
| |
| .day-number{
| |
| font-weight:bold;
| |
| margin-bottom:5px;
| |
| }
| |
|
| |
| .entry{
| |
| background:#e8f4ff;
| |
| margin-top:4px;
| |
| padding:4px;
| |
| border-radius:4px;
| |
| font-size:12px;
| |
| }
| |
|
| |
| .modal{
| |
| display:none;
| |
| position:fixed;
| |
| inset:0;
| |
| background:rgba(0,0,0,.5);
| |
| justify-content:center;
| |
| align-items:center;
| |
| }
| |
|
| |
| .modal-content{
| |
| background:white;
| |
| padding:20px;
| |
| width:500px;
| |
| max-width:95%;
| |
| border-radius:10px;
| |
| }
| |
|
| |
| input, textarea{
| |
| width:100%;
| |
| margin-bottom:10px;
| |
| padding:8px;
| |
| }
| |
|
| |
| button{
| |
| padding:8px 14px;
| |
| margin-right:5px;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
|
| |
| <h1>Familienangebote August 2026</h1>
| |
|
| |
| <div class="calendar" id="calendar"></div>
| |
|
| |
| <div class="modal" id="modal">
| |
| <div class="modal-content">
| |
| <h2 id="modalTitle"></h2>
| |
|
| |
| <input id="angebot" placeholder="Angebot">
| |
|
| |
| <input id="uhrzeit" placeholder="Uhrzeit">
| |
|
| |
| <input id="zielgruppe" placeholder="Zielgruppe">
| |
|
| |
| <input id="anmeldung" placeholder="Anmeldung">
| |
|
| |
| <input id="link" placeholder="Link zum Angebot">
| |
|
| |
| <button onclick="saveEntry()">Speichern</button>
| |
| <button onclick="closeModal()">Schließen</button>
| |
|
| |
| <hr>
| |
|
| |
| <div id="existingEntries"></div>
| |
| </div>
| |
| </div>
| |
|
| |
| <script>
| |
|
| |
| const weekdays = [
| |
| "Mo","Di","Mi","Do","Fr","Sa","So"
| |
| ];
| |
|
| |
| const calendar = document.getElementById("calendar");
| |
|
| |
| weekdays.forEach(day=>{
| |
| const div=document.createElement("div");
| |
| div.className="weekday";
| |
| div.textContent=day;
| |
| calendar.appendChild(div);
| |
| });
| |
|
| |
| // August 2026 beginnt an einem Samstag
| |
| for(let i=0;i<5;i++){
| |
| const empty=document.createElement("div");
| |
| calendar.appendChild(empty);
| |
| }
| |
|
| |
| for(let day=1; day<=31; day++){
| |
|
| |
| const div=document.createElement("div");
| |
| div.className="day";
| |
|
| |
| div.innerHTML=`
| |
| <div class="day-number">${day}</div>
| |
| <div id="entries-${day}"></div>
| |
| `;
| |
|
| |
| div.onclick=()=>openModal(day);
| |
|
| |
| calendar.appendChild(div);
| |
| }
| |
|
| |
| let currentDay=null;
| |
|
| |
| function getData(){
| |
| return JSON.parse(localStorage.getItem("august2026")) || {};
| |
| }
| |
|
| |
| function saveData(data){
| |
| localStorage.setItem("august2026",JSON.stringify(data));
| |
| }
| |
|
| |
| function openModal(day){
| |
|
| |
| currentDay=day;
| |
|
| |
| document.getElementById("modal").style.display="flex";
| |
| document.getElementById("modalTitle").textContent=
| |
| "Einträge für " + day + ". August 2026";
| |
|
| |
| renderEntries(day);
| |
| }
| |
|
| |
| function closeModal(){
| |
| document.getElementById("modal").style.display="none";
| |
| }
| |
|
| |
| function saveEntry(){
| |
|
| |
| const angebot=document.getElementById("angebot").value;
| |
| const uhrzeit=document.getElementById("uhrzeit").value;
| |
| const zielgruppe=document.getElementById("zielgruppe").value;
| |
| const anmeldung=document.getElementById("anmeldung").value;
| |
| const link=document.getElementById("link").value;
| |
|
| |
| if(!angebot) return;
| |
|
| |
| const data=getData();
| |
|
| |
| if(!data[currentDay]){
| |
| data[currentDay]=[];
| |
| }
| |
|
| |
| data[currentDay].push({
| |
| angebot,
| |
| uhrzeit,
| |
| zielgruppe,
| |
| anmeldung,
| |
| link
| |
| });
| |
|
| |
| saveData(data);
| |
|
| |
| document.getElementById("angebot").value="";
| |
| document.getElementById("uhrzeit").value="";
| |
| document.getElementById("zielgruppe").value="";
| |
| document.getElementById("anmeldung").value="";
| |
| document.getElementById("link").value="";
| |
|
| |
| renderEntries(currentDay);
| |
| renderCalendar();
| |
| }
| |
|
| |
| function deleteEntry(day,index){
| |
|
| |
| const data=getData();
| |
|
| |
| data[day].splice(index,1);
| |
|
| |
| saveData(data);
| |
|
| |
| renderEntries(day);
| |
| renderCalendar();
| |
| }
| |
|
| |
| function renderEntries(day){
| |
|
| |
| const data=getData();
| |
| const container=document.getElementById("existingEntries");
| |
|
| |
| container.innerHTML="";
| |
|
| |
| if(!data[day]) return;
| |
|
| |
| data[day].forEach((entry,index)=>{
| |
|
| |
| container.innerHTML += `
| |
| <div style="border:1px solid #ddd;padding:8px;margin-bottom:8px;">
| |
| <strong>${entry.angebot}</strong><br>
| |
| Uhrzeit: ${entry.uhrzeit}<br>
| |
| Zielgruppe: ${entry.zielgruppe}<br>
| |
| Anmeldung: ${entry.anmeldung}<br>
| |
| <a href="${entry.link}" target="_blank">
| |
| Angebot öffnen
| |
| </a><br><br>
| |
|
| |
| <button onclick="deleteEntry(${day},${index})">
| |
| Löschen
| |
| </button>
| |
| </div>
| |
| `;
| |
| });
| |
| }
| |
|
| |
| function renderCalendar(){
| |
|
| |
| const data=getData();
| |
|
| |
| for(let day=1; day<=31; day++){
| |
|
| |
| const container=
| |
| document.getElementById(`entries-${day}`);
| |
|
| |
| container.innerHTML="";
| |
|
| |
| if(data[day]){
| |
|
| |
| data[day].forEach(entry=>{
| |
|
| |
| const div=document.createElement("div");
| |
| div.className="entry";
| |
| div.textContent=
| |
| entry.uhrzeit + " - " + entry.angebot;
| |
|
| |
| container.appendChild(div);
| |
| });
| |
| }
| |
| }
| |
| }
| |
|
| |
| renderCalendar();
| |
|
| |
| </script>
| |
|
| |
| </body>
| |
| </html>
| |
|
| |
|
| |
|
| |
| <!DOCTYPE html> | | <!DOCTYPE html> |
| <html lang="de"> | | <html lang="de"> |
