Greg/SportAttendanceSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create initial HTML template for sport attendance system with responsive design

Browse Source
This commit is contained in:
Greg 2025-05-10 13:10:57 +02:00
parent 9313568e0d
commit 8256d34d55
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
templates/index.html
View File

@ -2,22 +2,40 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sport Attendance Sheet</title> <title>Sport Attendance Sheet</title>
<style> <style>
body { font-family: Arial, sans-serif; margin: 2em; } body { font-family: Arial, sans-serif; margin: 2em; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; } .table-container { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 700px; margin-bottom: 1em; }
th, td { border: 1px solid #ccc; padding: 0.5em; text-align: center; } th, td { border: 1px solid #ccc; padding: 0.5em; text-align: center; }
th { background: #f0f0f0; } th { background: #f0f0f0; }
.clickable { cursor: pointer; background: #e7f7e7; } .clickable { cursor: pointer; background: #e7f7e7; }
.yes { background: #b6e7b6; font-weight: bold; } .yes { background: #b6e7b6; font-weight: bold; }
input[type="text"] { width: 90%; } input[type="text"] { width: 90%; }
#add-date { margin-top: 1em; } #add-date { margin-top: 1em; }
.name-col { width: 140px; min-width: 140px; max-width: 140px; } .name-col { width: 140px; min-width: 100px; max-width: 180px; }
@media (max-width: 900px) {
body { margin: 1em; }
.name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
th, td { padding: 0.3em; }
table { min-width: 600px; }
}
@media (max-width: 600px) {
body { margin: 0.5em; }
h1 { font-size: 1.2em; }
.name-col { width: 90px; min-width: 70px; max-width: 110px; font-size: 0.9em; }
th, td { padding: 0.2em; font-size: 0.9em; }
table { min-width: 400px; }
}
</style>
</style> </style>
</head> </head>
<body> <body>
<h1>Sport Attendance Sheet</h1> <h1>Sport Attendance Sheet</h1>
<div id="attendance-table"></div> <div class="table-container">
<div id="attendance-table"></div>
</div>
<button id="add-date">Add Date</button> <button id="add-date">Add Date</button>
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
</body> </body>