Add demo-04: signature list generator with code cleanup task

This commit is contained in:
Benjamin Hackl 2026-01-15 23:02:09 +01:00
commit caed60a2d9
5 changed files with 405 additions and 0 deletions

120
demo-04/index.html Normal file
View file

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<meta name="description" content="Generator turning UNIGRAZonline / CAMPUSonline based student lists into nicely formatted signature lists for checking attendance">
<meta name="author" content="Benjamin Hackl">
<title>Signature List Generator</title>
</head>
<body>
<nav class="navbar navbar-light bg-unigraz">
<div class="container-fluid">
<a class="navbar-brand" href="https://imsc.uni-graz.at">Math @ Uni Graz</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#contactModal" data-bs-toggle="modal">Feedback / Contact</a>
</li>
</ul>
</div>
</nav>
<section class="generator-input container mt-3">
<h1>Signature List Generator</h1>
<p>
<strong>Important:</strong>
Everything happens in your browser and locally on your computer,
no sensitive data is transmitted anywhere.
</p>
<div class="form-group mb-3">
<div class="row mb-3">
<div class="col-12">
<label for="lvname" class="form-label">Course name</label>
<input id="lvname" type="text" class="form-control" value="MAT.001: Meine tolle Lehrveranstaltung">
</div>
</div>
<div class="row mb-3" style="align-items: baseline;">
<div class="col-12 col-md-8">
<label for="groupname" class="form-label">Group name</label>
<input id="groupname" type="text" class="form-control" placeholder="Group name" value="Gruppe 42">
<select class="form-select" hidden disabled id="groupname-select">
</select>
</div>
<div class="col-12 col-md-4">
<label for="date" class="form-label">Date on list</label>
<input id="date" type="date" class="form-control">
</div>
</div>
<div class="row mb-3">
<div class="col-auto">
<input type="checkbox" class="form-check-input" id="group_from_file">
<label class="form-check-label" for="group_from_file">
Filter by group name from file
</label>
</div>
<div class="col-auto">
<input checked type="checkbox" class="form-check-input" id="include_logo">
<label class="form-check-label" for="include_logo">
Include logo on list
</label>
</div>
</div>
<div class="row">
<div class="col-12 col-md-9 mb-3">
<label for="fileinput" class="form-label">List of students exported from UNIGRAZonline (as <i>CSV for Excel</i>)</label>
<input id="fileinput" type="file" class="form-control">
</div>
<div class="col-12 col-md-3 mb-3 d-flex align-items-end">
<button id="printbtn" class="btn btn-unigraz" onclick="window.print();">
Print table</button>
</div>
</div>
<hr>
</div>
</section>
<section class="container">
<img id="logo" src="logo.png" height="60">
<h5 id="list-caption"></h5>
<h6 id="list-subcaption"></h6>
<table>
<thead>
<tr>
<th>Name</th>
<th>Unterschrift</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
<tfoot>
<tr><td colspan="2">
<span id="foot-title"></span>
<span id="foot-group-date"></span>
</td></tr>
</tfoot>
</table>
</section>
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contactModalLabel">Contact / Feedback</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Please send bug reports, feature requests, and other related feedback directly to <a href="mailto:benjamin.hackl@uni-graz.at">Benjamin Hackl</a>&mdash;or message me via <a href="https://matrix.to/#/@benjamin.hackl:uni-graz.at">uniCHAT / matrix</a>.
</div>
<div class="modal-footer">
Made with
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#af4e37" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>
by <a href="https://behackl.dev">behackl.dev</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js" integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>