forked from WEB-IB-SS26/development-ib
13: fehlende Dateien zum Labor
parent
d4d1fcef14
commit
c60e067ee6
|
|
@ -0,0 +1,137 @@
|
|||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Sansation", serif;
|
||||
background-color: #020617;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
form {
|
||||
background-color: #0f172a;
|
||||
border-radius: 15px;
|
||||
border-color: #334155;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-style: solid;
|
||||
border-color: #475569;
|
||||
border-radius: 15px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #a78bfa;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.8rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Sansation', sans-serif;
|
||||
color: #ffffff;
|
||||
background-color: #1e293b;
|
||||
border-radius: 5px;
|
||||
border-color: #475569;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: 2em;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 1px #7c3aed;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-family: "Orbitron", sans-serif;
|
||||
color: #64748b;
|
||||
font-size: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
font-family: "Sansation", serif;
|
||||
font-size: 0.8em;
|
||||
background-color: #9333ea;
|
||||
border-color: #7c3aed;
|
||||
height: 2.5rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.styled-select {
|
||||
appearance: none;
|
||||
font-family: 'Sansation', sans-serif;
|
||||
background-color: #1e293b;
|
||||
color: #ffffff;
|
||||
padding: 2px 4px;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.styled-checkbox {
|
||||
appearance: none; /* WEB-IB: bisher unbekannt */
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 4px;
|
||||
background-color: #1e293b;
|
||||
|
||||
vertical-align: middle; /* WEB-IB: bisher unbekannt */
|
||||
cursor: pointer; /* WEB-IB: bisher unbekannt */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked {
|
||||
background-color: #7c3aed;
|
||||
border-color: #7c3aed;
|
||||
}
|
||||
|
||||
.styled-checkbox:checked::after {
|
||||
content: "\2713";
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /* WEB-IB: bisher unbekannt */
|
||||
}
|
||||
|
||||
.styled-radio {
|
||||
appearance: none; /* WEB-IB: bisher unbekannt */
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 50%;
|
||||
background-color: #1e293b;
|
||||
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.styled-radio:checked {
|
||||
border-color: #7c3aed;
|
||||
background-color: #7c3aed;
|
||||
}
|
||||
|
||||
.styled-radio:checked::after {
|
||||
content: "";
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /* WEB-IB: bisher unbekannt */
|
||||
}
|
||||
|
|
@ -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="styles_workshop.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