Grisu/PunkteSystem-KSP
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

styling for edit and add subpage

Browse Source
This commit is contained in:
Grisu
2022-06-19 22:51:55 +02:00
parent 22bb085d5e
commit b7e095e910
13 changed files with 469 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/public/add_entry.php
View File

@@ -24,29 +24,44 @@
?> ?>
<body> <body>
<div <?php if(!station_exists($con, $_GET['station'])) { echo "hidden=\"true\"";}?>> <div class="center">
<form action="" method="post"> <div class="headline">
<div id="team-div"> <h2>Ergebniss eintragen</h2>
<label for="team">Mannschaft</label> </div>
<select name="team" id="team"> <div class="form_div">
<?php load_teams_no_points($con, $_GET['station'])?> <form action="" method="post">
</select> <div id="team-div" class="dropdown">
</div> <label for="team">Mannschaft</label>
<label for="points">Punkte: </label> <select name="team" id="team">
<input name="points" id="points" type="number" max="15" min="0" value="0"/><br> <?php load_teams_no_points($con, $_GET['station'])?>
<label for="zeit">Zeit: </label> </select>
<div id="zeit"> </div>
<label for="minutes">Minuten</label> <div class="number_field">
<input name="minutes" id="minutes" type="number" max="60" min="0" value="0"/><br> <label for="points">Punkte: </label>
<label for="seconds">Sekunden</label> <input name="points" id="points" type="number" max="15" min="0" value="0" required/>
<input name="seconds" id="seconds" type="number" max="60" min="0" value="0"/><br> </div>
<label for="miliseconds">Millisekunden</label> <div class="headline">
<input name="miliseconds" id="miliseconds" type="number" max="99" min="0" value="0"/> <h3>Zeit</h3>
</div> </div>
<div> <div id="zeit">
<input id="button" type="submit" value="Eintragen"/> <div class="number_field">
</div> <label for="minutes">Minuten</label>
</form> <input name="minutes" id="minutes" type="number" max="60" min="0" value="0"/>
</div>
<div class="number_field">
<label for="seconds">Sekunden</label>
<input name="seconds" id="seconds" type="number" max="60" min="0" value="0"/>
</div>
<div class="number_field">
<label for="miliseconds">Millisekunden</label>
<input name="miliseconds" id="miliseconds" type="number" max="99" min="0" value="0"/>
</div>
</div>
<div>
<input id="button" type="submit" value="Eintragen" class="btn-confirm"/>
</div>
</form>
</div>
</div> </div>
</body> </body>
<?php <?php

30
app/public/add_station.php
View File

@@ -14,17 +14,25 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Station hinzufügen</h2> <div class="headline">
</div> <h2>Station hinzufügen</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="station_name">Name:</label> <form method="post">
<input id="station_name" type="text" name="station_name"/><br> <div class="txt_field">
<label for="station_pos">Standort:</label> <input id="station_name" type="text" name="station_name" required/>
<input id="station_pos" type="text" name="station_pos"/><br> <span></span>
<input id="button" type="submit" value="Hinzufügen"/> <label for="station_name">Name</label>
</form> </div>
<div class="txt_field">
<input id="station_pos" type="text" name="station_pos" required/>
<span></span>
<label for="station_pos">Standort</label>
</div>
<input id="button" type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>
<?php <?php

40
app/public/add_team.php
View File

@@ -14,22 +14,30 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Mannschaft hinzufügen</h2> <div class="headline">
</div> <h2>Mannschaft hinzufügen</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="team_name">Mannschaftsname</label> <form method="post">
<input type="text" name="team_name"/><br> <div class="txt_field">
<label for="fire_department">Feuerwehr</label> <input type="text" name="team_name" required/>
<input type="text" name="fire_department" list="fire_departments"/><br> <span></span>
<datalist id="fire_departments"> <label for="team_name">Mannschaftsname</label>
<?php </div>
load_fire_departments($con); <div class="txt_field">
?> <input type="text" name="fire_department" list="fire_departments" required/>
</datalist> <datalist id="fire_departments">
<input id="button" type="submit" value="Hinzufügen"> <?php
</form> load_fire_departments($con);
?>
</datalist>
<span></span>
<label for="fire_department">Feuerwehr</label>
</div>
<input id="button" type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>

61
app/public/add_user.php
View File

@@ -30,31 +30,42 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Benutzer hinzufügen</h2> <div class="headline">
</div> <h2>Benutzer hinzufügen</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label><?php echo $error ?></label><br> <form method="post" class="form_class">
<label for="user_name">Benutzername</label> <label><?php echo $error ?></label><br>
<input type="text" name="user_name"/><br> <div class="txt_field">
<label for="password">Passwort</label> <input type="text" name="user_name" required>
<input type="password" name="password"/><br> <span></span>
<label for="user_group">Benutzergruppe</label> <label>Benutzername</label>
<select name="user_group" id="user_group"> </div>
<option value="station">Station</option> <div class="txt_field">
<option value="statistics">Statistik</option> <input type="password" name="password" required>
<option value="admin">Administrator</option> <span></span>
</select><br> <label>Passwort</label>
<label for="bind_station">Gebunden an Station:</label> </div>
<select name="bind_station" id="bind_station"> <div class="dropdown">
<?php <label for="user_group">Benutzergruppe</label>
load_options_stations($con, "", false); <select name="user_group" id="user_group">
?> <option value="station">Station</option>
</select> <option value="statistics">Statistik</option>
<label for="bind_station">(Nur für Benutzergruppe Station)</label><br> <option value="admin">Administrator</option>
<input type="submit" value="Hinzufügen"/> </select>
</form> </div>
<div class="dropdown">
<label for="bind_station">Gebunden an Station (Nur für Gruppe Station)</label>
<select name="bind_station" id="bind_station">
<?php
load_options_stations($con, "", false);
?>
</select>
</div>
<input type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>

168
app/public/css/edit.css Normal file
View File

@@ -0,0 +1,168 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0px;
}
.txt_field_opt {
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0px;
}
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field_opt input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field_opt label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field_opt span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field_opt input:focus ~ label,
.txt_field_opt input:not(:placeholder-shown) ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field_opt input:focus ~ span::before,
.txt_field_opt input:not(:placeholder-shown) ~ span::before{
width: 100%;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.dropdown {
display: flex;
flex-direction: column;
}
.dropdown label {
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.dropdown select {
border-radius: 0px;
height: 30px;
border: none;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.btn-confirm {
margin-bottom: 10px;
border-radius: 0px;
border: none;
height: 30px;
width: 100%;
}
.form_div {
margin-left: 5px;
margin-right: 5px;
}
.number_field {
display: flex;
flex-direction: column;
}
.number_field label {
padding-bottom: 2px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.number_field input {
border: none;
outline: none;
height: 30px;
padding-bottom: 2px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
width: 100%;
}
.headline h3 {
text-align: center;
font-weight: 400;
color: #002e5b;
}
.information {
border-bottom: 1px solid #adadad;
margin-bottom: 5px;
}

22
app/public/css/login.css
View File

@@ -84,14 +84,7 @@ form .txt_field{
.txt_field input:valid ~ span::before{ .txt_field input:valid ~ span::before{
width: 100%; width: 100%;
} }
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="submit"]{ input[type="submit"]{
width: 100%; width: 100%;
height: 50px; height: 50px;
@@ -108,16 +101,3 @@ input[type="submit"]:hover{
border-color: #2691d9; border-color: #2691d9;
transition: .5s; transition: .5s;
} }
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}

96
app/public/css/styles.css
View File

@@ -20,6 +20,7 @@ html {
align-items: center; align-items: center;
background-color: #090CA9; background-color: #090CA9;
color: white; color: white;
width: 100%;
} }
#logo { #logo {
@@ -71,41 +72,10 @@ html {
} }
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: end;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
header { header {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%;
} }
body { body {
@@ -114,6 +84,9 @@ body {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex;
flex-direction: column;
width: 100%;
} }
h1 { h1 {
@@ -126,6 +99,8 @@ h1 {
h1 span{ h1 span{
font-weight: 500; font-weight: 500;
margin-left: 5px;
margin-right: 5px;
} }
div.table-div { div.table-div {
@@ -145,8 +120,8 @@ div.table-div table{
div.table-div th,td { div.table-div th,td {
border: 1px solid; border: 1px solid;
padding-left: 2.5vw; padding-left: .5rem;
padding-right: 2.5vw; padding-right: .5rem;
padding-bottom: 5px; padding-bottom: 5px;
} }
@@ -164,15 +139,16 @@ div.headline h2{
margin: 0px auto; margin: 0px auto;
padding: 10px 0px; padding: 10px 0px;
font-weight: 400; font-weight: 400;
margin-left: 5px;
margin-right: 5px;
} }
.center{ .center{
max-width: 900px; /*max-width: 800px;
min-width: 300px; min-width: 300px;*/
margin: auto; margin: auto;
margin-top: 0px; margin-top: 0px;
background-color: white; background-color: white;
padding-top: 0px;
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
@@ -244,6 +220,8 @@ div.headline h2{
.input-table{ .input-table{
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
margin-left: 5px;
margin-right: 5px;
} }
.select-div { .select-div {
@@ -277,4 +255,48 @@ div.headline h2{
margin: 0px auto; margin: 0px auto;
padding: 10px 0px; padding: 10px 0px;
font-weight: 400; font-weight: 400;
}
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: end;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.center {
margin-left: 2%;
margin-right: 2%;
}
}
@media (max-width: 500px) {
.table-div table{
font-size: 4vmin;
}
} }

32
app/public/edit_station.php
View File

@@ -27,18 +27,26 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Station bearbeiten</h2> <div class="headline">
</div> <h2>Station bearbeiten</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="station_name">Stations Namen:</label> <form method="post">
<input type="text" name="station_name" <?php echo "value=\"" . $row['name'] . "\"" ?> /><br> <div class="txt_field">
<label for="station_pos">Stations Standort:</label> <input type="text" name="station_name" <?php echo "value=\"" . $row['name'] . "\"" ?> />
<input type="text" name="station_pos" <?php echo "value=\"" . $row['standort'] . "\""?>/><br> <span></span>
<input type="hidden" name="station_id" <?php echo "value=\"" . $row ['s_id'] . "\""?>/> <label for="station_name">Stations Namen:</label>
<input type="submit" value="Speichern"/> </div>
</form> <div class="txt_field">
<input type="text" name="station_pos" <?php echo "value=\"" . $row['standort'] . "\""?>/>
<span></span>
<label for="station_pos">Stations Standort:</label>
</div>
<input type="hidden" name="station_id" <?php echo "value=\"" . $row ['s_id'] . "\""?>/>
<input type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>

59
app/public/edit_statistics.php
View File

@@ -34,30 +34,41 @@
} }
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Ergebniss bearbeiten</h2> <div class="headline">
</div> <h2>Ergebniss bearbeiten</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="team_name">Mannschaftsname: </label> <form method="post">
<label for="" name="team_name"><?php echo $row['name']?></label><br> <label class="information">Mannschaftsname: <?php echo $row['name']?></label><br>
<label for="fire_department">Feuerwehr:</label> <label for="fire_department" class="information">Feuerwehr: <?php echo $row["feuerwehr"]?></label><br>
<label for="" name="fire_department"><?php echo $row["feuerwehr"]?></label><br> <div class="number_field">
<label for="points">Punkte:</label> <label for="points">Punkte:</label>
<input type="number" min="0" max="15" name="points" value="<?php echo $row['punkte']?>"/><br> <input type="number" min="0" max="15" name="points" value="<?php echo $row['punkte']?>"/>
<div id="time"> </div>
<?php $time_set = check_time($con, $row['m_id'], $row['s_id']);?> <div class="headline">
<label for="minutes">Minuten:</label> <h3>Zeit</h3>
<input name="minutes" type="number" min="0" max="60" value=<?php if(!$time_set){echo "\"0\"";} else {echo "\"" . get_minutes($con, $row['m_id'], $row['s_id'])->fetch()['minutes'] . "\""; }?>/><br> </div>
<label for="seconds">Sekunden</label> <div id="time">
<input name="seconds" type="number" min="0" max="60" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_seconds($con, $row['m_id'], $row['s_id'])->fetch()['seconds'] . "\""; }?>/><br> <?php $time_set = check_time($con, $row['m_id'], $row['s_id']);?>
<label for="millis">Millisekunden</label> <div class="number_field">
<input name="millis" type="number" min="0" max="99" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_millis($con, $row['m_id'], $row['s_id'])->fetch()['millis'] / 1e4 . "\""; }?>/><br> <label for="minutes">Minuten:</label>
</div> <input name="minutes" type="number" min="0" max="60" value=<?php if(!$time_set){echo "\"0\"";} else {echo "\"" . get_minutes($con, $row['m_id'], $row['s_id'])->fetch()['minutes'] . "\""; }?>/>
<input type="hidden" name="m_id" value=<?php echo $row['m_id'] ?>/> </div>
<input type="hidden" name="s_id" value=<?php echo $row['s_id'] ?>/> <div class="number_field">
<input name="button" type="submit" value="Speichern"/> <label for="seconds">Sekunden</label>
</form> <input name="seconds" type="number" min="0" max="60" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_seconds($con, $row['m_id'], $row['s_id'])->fetch()['seconds'] . "\""; }?>/>
</div>
<div class="number_field">
<label for="millis">Millisekunden</label>
<input name="millis" type="number" min="0" max="99" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_millis($con, $row['m_id'], $row['s_id'])->fetch()['millis'] / 1e4 . "\""; }?>/>
</div>
</div>
<input type="hidden" name="m_id" value=<?php echo $row['m_id'] ?>/>
<input type="hidden" name="s_id" value=<?php echo $row['s_id'] ?>/>
<input name="button" type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>
<?php <?php

42
app/public/edit_team.php
View File

@@ -26,23 +26,31 @@
include("header_footer/header.php"); include("header_footer/header.php");
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Mannschaft bearbeiten</h2> <div class="headline">
</div> <h2>Mannschaft bearbeiten</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="team_name">Mannschaftsname</label> <form method="post">
<input type="text" name="team_name" <?php echo "value=\"" . $row['name'] . "\""?> /><br> <div class="txt_field">
<label for="fire_department">Feuerwehr</label> <input type="text" name="team_name" <?php echo "value=\"" . $row['name'] . "\""?> />
<input type="text" name="fire_department" list="fire_departments" <?php echo "value=\"" . $row['feuerwehr'] . "\"" ?>/><br> <span></span>
<datalist id="fire_departments"> <label for="team_name">Mannschaftsname</label>
<?php </div>
load_fire_departments($con); <div class="txt_field">
?> <input type="text" name="fire_department" list="fire_departments" <?php echo "value=\"" . $row['feuerwehr'] . "\"" ?>/>
</datalist> <datalist id="fire_departments">
<input type="hidden" name="m_id" <?php echo "value=\"" . $row['m_id'] . "\""?> /> <?php
<input type="submit" value="Speichern"/> load_fire_departments($con);
</form> ?>
</datalist>
<span></span>
<label for="fire_department">Feuerwehr</label>
</div>
<input type="hidden" name="m_id" <?php echo "value=\"" . $row['m_id'] . "\""?> />
<input type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>
<?php <?php

69
app/public/edit_user.php
View File

@@ -35,35 +35,46 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Benutzer bearbeiten</h2> <div class="headline">
</div> <h2>Benutzer bearbeiten</h2>
<div> </div>
<form method="post"> <div class="form_div">
<label for="user_name">Benutzername:</label> <form method="post">
<input name="user_name" type="text" value=<?php echo "\"" . $row['user_name'] . "\"";?>/><br> <div class="txt_field">
<label for="password">Neues Passwort:</label> <input name="user_name" type="text" value=<?php echo "\"" . $row['user_name'] . "\"";?> required/>
<input type="password" name="password"/><br> <span></span>
<label for="user_group">Benutzergruppe:</label> <label for="user_name">Benutzername</label>
<select name="user_group" id="user_group"> </div>
<option value="station" <?php if($row['user_group'] == "station"){echo " selected";}?>>Station</option> <div class="txt_field_opt">
<option value="statistics" <?php if($row['user_group'] == "statistics") {echo " selected";}?>>Statistik</option> <input placeholder=" " type="password" name="password" />
<option value="admin" <?php if($row['user_group'] == "admin") {echo " selected";}?>>Admin</option> <span></span>
</select><br> <label for="password">Neues Passwort:</label>
<label for="bind_station">Gebunden an Station:</label> </div>
<select name="bind_station" id="bind_station"> <div class="dropdown">
<?php <label for="user_group">Benutzergruppe:</label>
if($row['s_id'] == null) { <select name="user_group" id="user_group">
load_options_stations($con, "", false); <option value="station" <?php if($row['user_group'] == "station"){echo " selected";}?>>Station</option>
} else { <option value="statistics" <?php if($row['user_group'] == "statistics") {echo " selected";}?>>Statistik</option>
load_options_stations($con, $row['s_id'], false); <option value="admin" <?php if($row['user_group'] == "admin") {echo " selected";}?>>Admin</option>
} </select>
?> </div>
</select> <div class="dropdown">
<label for="bind_station">(Nur für Benutzergruppe Station)</label><br> <label for="bind_station">Gebunden an Station (nur für Gruppe Station)</label>
<input type="hidden" value=<?php echo "\"" . $row['id'] . "\""?> name="id"/> <select name="bind_station" id="bind_station">
<input type="submit" value="ändern"> <?php
</form> if($row['s_id'] == null) {
load_options_stations($con, "", false);
} else {
load_options_stations($con, $row['s_id'], false);
}
?>
</select>
</div>
<input type="hidden" value=<?php echo "\"" . $row['id'] . "\""?> name="id"/>
<input type="submit" value="ändern" class="btn-confirm"/>
</form>
</div>
</div> </div>
</body> </body>
<?php <?php

5
app/public/header_footer/header.php
View File

@@ -6,7 +6,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<script src="../js/navbar.js" defer></script> <link rel="stylesheet" href="css/edit.css">
<script src="js/navbar.js" defer></script>
<script src="js/edit_table.js"></script> <script src="js/edit_table.js"></script>
</head> </head>
<body> <body>
@@ -37,7 +38,7 @@
} }
} }
?> ?>
<li><a href="logout.php">Logout</a></li> <li><a href="logout.php">Logout</a></li>
</ul> </ul>
</div> </div>

2
app/public/login.php
View File

@@ -44,7 +44,7 @@
<h1>PUNKTESYSTEM-KSP</h1> <h1>PUNKTESYSTEM-KSP</h1>
<form method="post"> <form method="post">
<div class="txt_field"> <div class="txt_field">
<input id="user_name" type="text" name="user_name" required> <input id="user_name" type="text" name="user_name" required/>
<span></span> <span></span>
<label>Benutzername</label> <label>Benutzername</label>
</div> </div>