forked from WEB-IB-SS26/development-ib
Implemented Labor 13
parent
553957ea4d
commit
9e8d74bb66
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="Aufgabe_01.css">
|
||||
<title>Adventskalender</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="day-0"></div>
|
||||
<div id="day-1"></div>
|
||||
<div id="day-2"></div>
|
||||
<div id="day-3"></div>
|
||||
<div id="day-4"></div>
|
||||
<div id="day-5"></div>
|
||||
|
||||
<div id="day-6"></div>
|
||||
<div id="day-7"></div>
|
||||
<div id="day-8"></div>
|
||||
<div id="day-9"></div>
|
||||
<div id="day-10"></div>
|
||||
<div id="day-11"></div>
|
||||
|
||||
<div id="day-12"></div>
|
||||
<div id="day-13"></div>
|
||||
<div id="day-14"></div>
|
||||
<div id="day-15"></div>
|
||||
<div id="day-16"></div>
|
||||
<div id="day-17"></div>
|
||||
|
||||
<div id="day-18"></div>
|
||||
<div id="day-19"></div>
|
||||
<div id="day-20"></div>
|
||||
<div id="day-21"></div>
|
||||
<div id="day-22"></div>
|
||||
<div id="day-23"></div>
|
||||
|
||||
<script src="Aufgabe_01.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
|
||||
var width = 100 / 6;
|
||||
var height = 100 / 4;
|
||||
|
||||
var current_width = 0;
|
||||
var current_height = 0;
|
||||
|
||||
function getRandomColor() { //from https://stackoverflow.com/questions/1484506/random-color-generator
|
||||
var letters = '0123456789ABCDEF';
|
||||
var color = '#';
|
||||
for (var i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
|
||||
for(var i = 0; i < 24; i++){
|
||||
var box = document.getElementById("day-"+i.toString())
|
||||
|
||||
box.style.position = "absolute"
|
||||
box.style.backgroundColor = getRandomColor()
|
||||
|
||||
box.style.height = height.toString()+"%"
|
||||
box.style.width = width.toString()+"%"
|
||||
box.style.border = "2px solid black"
|
||||
box.style.display = "flex"
|
||||
box.style.alignItems = "center"
|
||||
box.style.justifyContent = "center"
|
||||
box.style.fontSize = "24px"
|
||||
box.style.fontWeight = "bold"
|
||||
box.textContent = (i + 1)
|
||||
|
||||
box.style.top = current_height.toString()+"%"
|
||||
box.style.left = current_width.toString()+"%"
|
||||
|
||||
current_width += width
|
||||
if((i+1) % 6 == 0){
|
||||
current_width = 0
|
||||
current_height += height
|
||||
}
|
||||
}
|
||||
|
||||
const current_date = new Date();
|
||||
const today = current_date.getDate();
|
||||
const month = current_date.getMonth();
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
let box = document.getElementById("day-" + i);
|
||||
if (!box) continue;
|
||||
|
||||
box.addEventListener("click", function () {
|
||||
let day = Number.parseInt(box.textContent);
|
||||
|
||||
if (month === 11 && day <= today) {
|
||||
box.style.backgroundColor = 'white';
|
||||
box.textContent = "\u{1F381}";
|
||||
} else {
|
||||
alert("Noch schläft das Türchen – wie ein Geschenk unter dem Baum.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
:root {
|
||||
font-family: "Sansation", sans-serif;
|
||||
font-size: 16px;
|
||||
color-scheme: dark;
|
||||
--bg: #0b1220;
|
||||
--panel: rgba(94, 39, 27, 0.96);
|
||||
--panel-border: rgba(17, 224, 103, 0.18);
|
||||
--accent: #409720;
|
||||
--accent-strong: #988fa8;
|
||||
--muted: #94a3b8;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 24%),
|
||||
linear-gradient(180deg, #b05d54 0%, #83aa93 40%, #7989af 100%);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle at 20% 15%, rgba(83, 186, 24, 0.12) 0, transparent 32%),
|
||||
radial-gradient(circle at 80% 10%, rgba(34, 197, 94, 0.08) 0, transparent 30%),
|
||||
radial-gradient(circle at 50% 80%, rgba(14, 165, 233, 0.07) 0, transparent 28%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: #f8fafc;
|
||||
text-shadow: 0 0 18px rgba(139, 92, 246, 0.35);
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 26px;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
padding: 1.5rem;
|
||||
margin: 0 0 1.5rem;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #d8b4fe;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0.4rem 0 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.95rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
color: #f8fafc;
|
||||
background: #111827;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-strong);
|
||||
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.styled-select {
|
||||
appearance: none;
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%),
|
||||
radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 18%);
|
||||
background-position: right 1rem center, left top;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.styled-checkbox,
|
||||
.styled-radio {
|
||||
appearance: none;
|
||||
margin-right: 0.75rem;
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
border: 2px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 0.5rem;
|
||||
background: #111827;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
.styled-checkbox:hover,
|
||||
.styled-radio:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.styled-checkbox:checked {
|
||||
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked::after {
|
||||
content: "\2713";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -52%);
|
||||
font-size: 1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.styled-radio {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.styled-radio:checked {
|
||||
background: radial-gradient(circle at center, #f8fafc 0%, #8b5cf6 55%, #06b6d4 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.styled-radio:checked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
padding: 1rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 16px 28px rgba(139, 92, 246, 0.22);
|
||||
transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 30px rgba(139, 92, 246, 0.28);
|
||||
}
|
||||
|
||||
.submit-button:focus-visible {
|
||||
outline: 3px solid rgba(124, 58, 237, 0.35);
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 1.2rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="Aufgabe_02.css">
|
||||
<title>Workshop-Anmeldung</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Workshop-Anmeldung</h1>
|
||||
<form action="https://web4-637691723779.europe-west1.run.app/registrierung" method="post">
|
||||
<fieldset>
|
||||
<legend>Persönliche Angaben:</legend>
|
||||
<label for="vorname">Vorname:</label><br>
|
||||
<input type="text" name="vorname" id="vorname" placeholder="Vorname" required><br>
|
||||
|
||||
<label for="nachname">Nachname:</label><br>
|
||||
<input type="text" name="nachname" id="nachname" placeholder="Nachname" required><br>
|
||||
|
||||
<label for="email">E-Mail:</label><br>
|
||||
<input type="email" name="email" id="email" autocomplete="email"><br>
|
||||
|
||||
<label for="telefon">Handynummer:</label><br>
|
||||
<input type="tel" name="telefon" id="telefon" pattern="^01[5-7][0-9]{7,10}$"><br><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Kursauswahl:</legend>
|
||||
<label for="kurs">Kurs:</label><br>
|
||||
<input type="text" name="kurs" id="kurs" value="Webentwicklung Basics" readonly disabled><br><br>
|
||||
|
||||
<label for="sessions">Bevorzugte Sessions:</label><br>
|
||||
<select id="sessions" name="sessions" class="styled-select" multiple size="4">
|
||||
<option value="vormittag">Vormittag</option>
|
||||
<option value="nachmittag">Nachmittag</option>
|
||||
<option value="abendsession">Abend</option>
|
||||
<option value="wochenende">Wochenende</option>
|
||||
</select><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Zusätzliche Optionen:</legend>
|
||||
<input type="checkbox" id="agb" name="agb" class="styled-checkbox" required>
|
||||
<label for="agb">Ich akzeptiere die Teilnahmebedingungen.</label><br>
|
||||
|
||||
<input type="checkbox" id="newsletter" name="newsletter" value="ja" class="styled-checkbox" >
|
||||
<label for="newsletter">Newsletter abonnieren.</label><br>
|
||||
|
||||
<input type="checkbox" id="equipment" name="equipment" value="ja" class="styled-checkbox" >
|
||||
<label for="equipment">Ich benötige spezielles Equipment.</label><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Teilnahmeformat:</legend>
|
||||
Format wählen:<br>
|
||||
<input type="radio" id="online" name="format" value="online" class="styled-radio" required>
|
||||
<label for="online">Online</label><br>
|
||||
|
||||
<input type="radio" id="praesenz" name="format" value="praesenz" class="styled-radio">
|
||||
<label for="praesenz">Präsenz</label><br>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input class="submit-button" type="submit" value="Jetzt anmelden">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue