code under construction
This commit is contained in:
Angelo Rodriguez
parent
fb848b9244
commit
02341dccee
26 changed files with 820 additions and 1 deletions
384
core/templates/test.html
Executable file
384
core/templates/test.html
Executable file
|
|
@ -0,0 +1,384 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue