384 lines
12 KiB
HTML
384 lines
12 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title> Test </title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Modal-Elemente holen
|
||
|
|
const modal = document.getElementById('berichtModal');
|
||
|
|
const btnNew = document.querySelector('.btn-new');
|
||
|
|
const btnClose = document.querySelector('.btn-close');
|
||
|
|
const btnSave = document.querySelector('.btn-save');
|
||
|
|
const titelInput = document.getElementById('titel');
|
||
|
|
const textInput = document.getElementById('text');
|
||
|
|
|
||
|
|
// Funktion, um Sterne zu erzeugen
|
||
|
|
function createStars() {
|
||
|
|
const starContainer = document.createElement('div');
|
||
|
|
starContainer.classList.add('stars'); // Container für Sterne
|
||
|
|
document.body.appendChild(starContainer); // Sterncontainer zum Body hinzufügen
|
||
|
|
|
||
|
|
// Anzahl der Sterne, die du erzeugen möchtest
|
||
|
|
const numStars = 50;
|
||
|
|
|
||
|
|
// Zufällige Sterne erzeugen
|
||
|
|
for (let i = 0; i < numStars; i++) {
|
||
|
|
const star = document.createElement('div');
|
||
|
|
star.classList.add('star');
|
||
|
|
|
||
|
|
// Zufällige Positionen und Größen für Sterne
|
||
|
|
const size = Math.random() * 3 + 1; // Größe zwischen 1 und 4px
|
||
|
|
star.style.width = `${size}px`;
|
||
|
|
star.style.height = `${size}px`;
|
||
|
|
|
||
|
|
// Zufällige Position
|
||
|
|
const x = Math.random() * window.innerWidth; // Zufällige horizontale Position
|
||
|
|
const y = Math.random() * window.innerHeight; // Zufällige vertikale Position
|
||
|
|
star.style.left = `${x}px`;
|
||
|
|
star.style.top = `${y}px`;
|
||
|
|
|
||
|
|
// Zufällige Verzögerung für den Twinkle-Effekt
|
||
|
|
const delay = Math.random() * 2; // Zufällige Verzögerung zwischen 0 und 2s
|
||
|
|
star.style.animationDelay = `${delay}s`;
|
||
|
|
|
||
|
|
starContainer.appendChild(star); // Stern zum Container hinzufügen
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Funktion zum Entfernen der Sterne
|
||
|
|
function removeStars() {
|
||
|
|
const starContainer = document.querySelector('.stars');
|
||
|
|
if (starContainer) {
|
||
|
|
starContainer.remove(); // Entfernt den Container mit den Sternen
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Funktion zum Öffnen des Modals
|
||
|
|
function openModal() {
|
||
|
|
modal.classList.add('show'); // Modal anzeigen mit 'show' Klasse
|
||
|
|
document.body.classList.add('modal-open'); // Hintergrund unscharf machen
|
||
|
|
createStars(); // Sterne erzeugen, wenn das Modal geöffnet wird
|
||
|
|
}
|
||
|
|
|
||
|
|
// Funktion zum Schließen des Modals
|
||
|
|
function closeModal() {
|
||
|
|
modal.classList.remove('show'); // Modal ausblenden durch Entfernen der 'show' Klasse
|
||
|
|
document.body.classList.remove('modal-open'); // Hintergrund zurücksetzen
|
||
|
|
removeStars(); // Sterne entfernen, wenn das Modal geschlossen wird
|
||
|
|
}
|
||
|
|
|
||
|
|
// Funktion zum Speichern eines neuen Berichtshefts
|
||
|
|
function saveReport() {
|
||
|
|
const titel = titelInput.value;
|
||
|
|
const text = textInput.value;
|
||
|
|
|
||
|
|
if (titel && text) {
|
||
|
|
// Hier kannst du das neue Berichtsheft speichern (z.B. in LocalStorage oder in einer Datenbank)
|
||
|
|
alert(`Berichtsheft gespeichert!\nTitel: ${titel}\nText: ${text}`);
|
||
|
|
|
||
|
|
// Modal schließen nach dem Speichern
|
||
|
|
closeModal();
|
||
|
|
|
||
|
|
// Eingabefelder zurücksetzen
|
||
|
|
titelInput.value = '';
|
||
|
|
textInput.value = '';
|
||
|
|
} else {
|
||
|
|
alert('Bitte fülle alle Felder aus!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event-Listener für das Öffnen des Modals
|
||
|
|
btnNew.addEventListener('click', openModal);
|
||
|
|
|
||
|
|
// Event-Listener für das Schließen des Modals
|
||
|
|
btnClose.addEventListener('click', closeModal);
|
||
|
|
|
||
|
|
// Event-Listener für das Speichern des Berichtshefts
|
||
|
|
btnSave.addEventListener('click', saveReport);
|
||
|
|
|
||
|
|
// Wenn der Benutzer außerhalb des Modals klickt, soll es ebenfalls geschlossen werden
|
||
|
|
window.addEventListener('click', function(event) {
|
||
|
|
if (event.target === modal) {
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Mausbewegung über das Grid für 3D-Rotation
|
||
|
|
const reportElements = document.querySelectorAll('.bericht');
|
||
|
|
|
||
|
|
function handleMouseMove(event) {
|
||
|
|
reportElements.forEach((element) => {
|
||
|
|
const rect = element.getBoundingClientRect();
|
||
|
|
const centerX = rect.left + rect.width / 2;
|
||
|
|
const centerY = rect.top + rect.height / 2;
|
||
|
|
|
||
|
|
const deltaX = (event.clientX - centerX) / rect.width;
|
||
|
|
const deltaY = (event.clientY - centerY) / rect.height;
|
||
|
|
|
||
|
|
const rotateX = deltaY * 15;
|
||
|
|
const rotateY = deltaX * -25;
|
||
|
|
const moveX = deltaX * 40;
|
||
|
|
|
||
|
|
// Nur das angeklickte Element wird rotiert und skaliert
|
||
|
|
if (element.matches(':hover')) {
|
||
|
|
element.style.transform = `scale(1.05) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||
|
|
element.style.zIndex = 10; // Erhöht den Stapelwert des Elements, um es hervorzuheben
|
||
|
|
} else {
|
||
|
|
element.style.transform = 'scale(1)'; // Andere Elemente bleiben unverändert
|
||
|
|
element.style.zIndex = 1; // Standardstapelwert
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event-Listener für Mausbewegung
|
||
|
|
document.querySelector('.container').addEventListener('mousemove', handleMouseMove);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: #f4f4f4;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
background-color: #333;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
perspective: 1500px; /* 3D-Effekt */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Stil für die Berichtselemente */
|
||
|
|
.bericht {
|
||
|
|
background-color: white;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||
|
|
position: relative;
|
||
|
|
will-change: transform;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-new {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-new {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background-color: #28a745;
|
||
|
|
color: white;
|
||
|
|
font-size: 30px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s, transform 0.2s;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-new:hover {
|
||
|
|
background-color: #218838;
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal für neues Berichtsheft */
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
transition: opacity 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal.show {
|
||
|
|
display: flex;
|
||
|
|
opacity: 1;
|
||
|
|
z-index: 1000; /* Modal über anderen Inhalten */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hintergrundunschärfe beim Öffnen des Modals */
|
||
|
|
.modal.show::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
filter: blur(10px); /* Hintergrund unscharf */
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal-Inhalt */
|
||
|
|
.modal-content {
|
||
|
|
background-color: white;
|
||
|
|
padding: 40px;
|
||
|
|
border-radius: 8px;
|
||
|
|
width: 500px;
|
||
|
|
max-width: 90%;
|
||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
|
|
transform: scale(1.05); /* Kleinere Zoom-Animation */
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.modal-open {
|
||
|
|
filter: blur(5px); /* Unschärfe des Hintergrunds */
|
||
|
|
transition: filter 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal bleibt scharf und im Vordergrund */
|
||
|
|
.modal.show {
|
||
|
|
z-index: 100; /* Stellt sicher, dass das Modal im Vordergrund ist */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Eingabefelder im Modal */
|
||
|
|
.modal input,
|
||
|
|
.modal textarea {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px 0;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Buttons im Modal */
|
||
|
|
.modal-buttons {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal button {
|
||
|
|
padding: 10px 15px;
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal button:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Schließen-Button im Modal */
|
||
|
|
.btn-close {
|
||
|
|
background-color: #dc3545;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-close:hover {
|
||
|
|
background-color: #c82333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Speichern-Button im Modal */
|
||
|
|
.btn-save {
|
||
|
|
background-color: #28a745;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-save:hover {
|
||
|
|
background-color: #218838;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animation für die Sterne */
|
||
|
|
.stars {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.star {
|
||
|
|
position: absolute;
|
||
|
|
width: 3px;
|
||
|
|
height: 3px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 50%;
|
||
|
|
opacity: 0;
|
||
|
|
animation: star-animation 1s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sterneffekt im Hintergrund */
|
||
|
|
body.modal-open .stars {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 50; /* Überlagert den Hintergrund, aber unter dem Modal */
|
||
|
|
pointer-events: none; /* Verhindert Interaktionen mit den Sternen */
|
||
|
|
}
|
||
|
|
|
||
|
|
.star {
|
||
|
|
position: absolute;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: twinkle 2s infinite alternate;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes twinkle {
|
||
|
|
0% {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal-Styling */
|
||
|
|
#berichtModal {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
z-index: 100; /* Modal ganz oben */
|
||
|
|
background-color: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
width: 400px;
|
||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background-color: white;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-open #berichtModal {
|
||
|
|
z-index: 1000; /* Sicherstellen, dass das Modal immer oben bleibt */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<h1> Deine Berichtshefte </h1>
|
||
|
|
|
||
|
|
<div class="modal-content stars">
|
||
|
|
<p class="bericht" > Berichtsheft 1 </p>
|
||
|
|
</div>
|
||
|
|
<button class="modal"> Add new I guess </button>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|