WorldTeacher
5e37b57c9b
Some checks failed
Docker Build (PR) / Build Docker image (pull_request) Has been cancelled
201 lines
10 KiB
HTML
Executable File
201 lines
10 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Semesterapparatsantrag</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
|
|
<!-- removed legacy inline styles that forced black borders on tables/td/th -->
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container header-inner">
|
|
<div class="header-left">
|
|
<img class="logo" src="https://www.ph-freiburg.de/_assets/cc3dd7db45300ecc1f3aeed85bda5532/Images/logo-big-blue.svg" alt="PH Freiburg Logo" />
|
|
<div class="brand">
|
|
<div class="brand-title">Bibliothek der Pädagogischen Hochschule Freiburg</div>
|
|
<div class="brand-sub">Hochschulbibliothek · Semesterapparate</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode">
|
|
<span class="mdi mdi-theme-light-dark" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="card">
|
|
<h1>Static Information</h1>
|
|
<form method="post" action="/submit" class="request-form">
|
|
<!-- Replace table with two-row grid layout -->
|
|
<div class="grid-form">
|
|
<div class="form-field">
|
|
<label for="name">Name</label>
|
|
<input type="text" name="name" id="name" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="lastname">Nachname</label>
|
|
<input type="text" name="lastname" id="lastname" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="title">Titel (optional)</label>
|
|
<input type="text" name="title" id="title">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="telno">Telefonnummer</label>
|
|
<input type="number" name="telno" id="telno" required>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="mail">Email</label>
|
|
<input type="email" name="mail" id="mail" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="apparatsname">Apparatsname</label>
|
|
<input type="text" name="apparatsname" id="apparatsname" maxlength="40" required>
|
|
<div id="apparatsname-warning" class="field-info hidden" role="status" aria-live="polite">Name will be changed to keep in line with requirements</div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="subject">Fach</label>
|
|
<select name="subject" id="subject" required>
|
|
<option value="">-- Auswählen --</option>
|
|
<option>Biologie</option>
|
|
<option>Chemie</option>
|
|
<option>Deutsch</option>
|
|
<option>Englisch</option>
|
|
<option>Erziehungswirtschaft</option>
|
|
<option>Französisch</option>
|
|
<option>Geographie</option>
|
|
<option>Geschichte</option>
|
|
<option>Gesundheitspädagogik</option>
|
|
<option>Haushalt / Textil</option>
|
|
<option>Kunst</option>
|
|
<option>Mathematik / Informatik</option>
|
|
<option>Medien in der Bildung</option>
|
|
<option>Musik</option>
|
|
<option>Philosophie</option>
|
|
<option>Physik</option>
|
|
<option>Politikwissenschaft</option>
|
|
<option>Prorektorat Lehre und Studium</option>
|
|
<option>Psychologie</option>
|
|
<option>Soziologie</option>
|
|
<option>Sport</option>
|
|
<option>Technik</option>
|
|
<option>Theologie</option>
|
|
<option>Wirtschaftslehre</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Semester</label>
|
|
<div class="inline-controls">
|
|
<label class="radio"><input type="radio" name="semester_type" value="SoSe" required>Sommer</label>
|
|
<label class="radio"><input type="radio" name="semester_type" value="WiSe" required>Winter</label>
|
|
<input type="number" name="semester_year" placeholder="Jahr" required>
|
|
</div>
|
|
<div class="inline-controls start" style="margin-top: 0.5rem;">
|
|
<label class="checkbox"><input type="checkbox" name="dauerapparat" value="true"> Dauerapparat</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Medien</h2>
|
|
<table id="book-table" class="data-table">
|
|
<tr>
|
|
<th>Autorenname</th><th>Jahr/Auflage</th><th>Titel</th><th>Signatur (wenn vorhanden)</th>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="text" name="authorname" required></td>
|
|
<td><input type="text" name="year" required></td>
|
|
<td><input type="text" name="booktitle" required></td>
|
|
<td><input type="text" name="signature"></td>
|
|
</tr>
|
|
</table>
|
|
<button type="button" class="btn btn-secondary" onclick="addRow()">+ Medium hinzufügen</button>
|
|
|
|
<div class="actions">
|
|
<button type="submit" class="btn btn-primary">Absenden</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="footer-note">
|
|
Hinweis: Weitere Informationen zu den Semesterapparaten finden Sie auf den Seiten der Hochschulbibliothek der PH Freiburg.
|
|
<br>
|
|
<a href="https://www.ph-freiburg.de/bibliothek.html" target="_blank" rel="noopener noreferrer">Zur Bibliothek</a>
|
|
<!-- add a spacer -->
|
|
|
|
<br>
|
|
<a href="https://www.ph-freiburg.de/bibliothek/lernen/semesterapparate.html" target="_blank" rel="noopener noreferrer">Zu den Semesterapparaten</a>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
// Provide global addRow used by the "+ Medium hinzufügen" button
|
|
function addRow() {
|
|
const table = document.getElementById("book-table");
|
|
const row = table.insertRow(-1);
|
|
row.innerHTML = `
|
|
<td><input type="text" name="authorname" required></td>
|
|
<td><input type="text" name="year" required></td>
|
|
<td><input type="text" name="booktitle" required></td>
|
|
<td><input type="text" name="signature"></td>
|
|
`;
|
|
}
|
|
|
|
(function() {
|
|
const STORAGE_KEY = 'theme';
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const saved = localStorage.getItem(STORAGE_KEY);
|
|
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem(STORAGE_KEY, theme);
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (btn) {
|
|
const label = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
|
|
btn.setAttribute('aria-label', label);
|
|
btn.title = label;
|
|
}
|
|
}
|
|
|
|
setTheme(saved || (prefersDark ? 'dark' : 'light'));
|
|
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (btn) {
|
|
btn.addEventListener('click', () => {
|
|
const current = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
|
setTheme(current === 'dark' ? 'light' : 'dark');
|
|
});
|
|
}
|
|
})();
|
|
|
|
// Apparatsname dynamic warning: show when length exceeds (37 - len(lastname))
|
|
(function() {
|
|
function updateWarning() {
|
|
const last = document.getElementById('lastname');
|
|
const app = document.getElementById('apparatsname');
|
|
const warn = document.getElementById('apparatsname-warning');
|
|
if (!last || !app || !warn) return;
|
|
const lastLen = (last.value || '').length;
|
|
const appLen = (app.value || '').length;
|
|
const threshold = Math.max(0, 37 - lastLen);
|
|
if (appLen > threshold) {
|
|
warn.classList.remove('hidden');
|
|
} else {
|
|
warn.classList.add('hidden');
|
|
}
|
|
}
|
|
document.addEventListener('input', (e) => {
|
|
if (e.target && (e.target.id === 'lastname' || e.target.id === 'apparatsname')) {
|
|
updateWarning();
|
|
}
|
|
});
|
|
document.addEventListener('DOMContentLoaded', updateWarning);
|
|
// run once on load
|
|
updateWarning();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|