Studium
/
DH_Alumni
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

full mockup done

This commit is contained in:
Johannes Theiner 2021-04-20 11:22:09 +02:00
parent 4d69a5ea46
commit 6a83944afe
4 changed files with 1081 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1000
MOCK_DATA.json Normal file
View File

File diff suppressed because it is too large Load Diff

1
general.php
View File

@ -7,6 +7,7 @@ function returnHeader() {
<head>
<title>Alumni Max Emden</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>

12
index.php
View File

@ -21,21 +21,21 @@ returnHeader();
<div class="py-1">
<label class="px-1 text-sm text-gray-600" for="name">Name</label>
<input type="text" name="name" id="name" class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
<input type="text" name="name" id="name" required class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
border-gray-300 placeholder-gray-600
shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
<div class="py-1">
<label class="px-1 text-sm text-gray-600" for="email">E-Mail Adresse</label>
<input type="email" name="email" id="email" class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
<input type="email" name="email" id="email" required class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
border-gray-300 placeholder-gray-600
shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
<div class="py-1">
<label class="px-1 text-sm text-gray-600" for="year">Jahrgang</label>
<select name="year" id="email" class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
<select name="year" id="year" required class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
border-gray-300 placeholder-gray-600
shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
<?php
@ -50,14 +50,14 @@ returnHeader();
<div class="py-1">
<label class="px-1 text-sm text-gray-600" for="birthday">Geburtstag</label>
<input type="date" name="birthday" id="birthday" class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
<input type="date" name="birthday" id="birthday" required class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
border-gray-300 placeholder-gray-600
shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</div>
<div class="py-1">
<label class="px-1 text-sm text-gray-600" for="vocation">Tätigkeit</label>
<textarea name="vocation" id="vocation" class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
<textarea name="vocation" id="vocation" required class="text-md block px-3 py-2 rounded-lg w-full bg-white border-2
border-gray-300 placeholder-gray-600
shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none">
</textarea>
@ -65,7 +65,7 @@ returnHeader();
<div class="flex justify-start">
<label class="block text-gray-500 font-bold my-4 flex items-center">
<input class="leading-loose text-pink-600 top-0" type="checkbox" id="terms" name="terms"/>
<input class="leading-loose text-pink-600 top-0" type="checkbox" id="terms" name="terms" required/>
<span class="ml-2 text-sm py-2 text-gray-600 text-left">Ich akzeptiere hiermit
<a href="https://max-emden.de/wordpress/impressum/" target="_blank"
class="font-semibold text-black border-b-2 border-gray-200 hover:border-gray-500">

74
overview.php Normal file
View File

@ -0,0 +1,74 @@
<?php
require_once 'general.php';
returnHeader();
$file = file_get_contents("MOCK_DATA.json");
if ($file === false) {
// deal with error...
}
$entries = json_decode($file, true);
if ($entries === null) {
// deal with error...
}
?>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg relative space-y-32">
<div class="md:mt-6 top-0 right-0 absolute">
<button class="bg-blue-500 px-2 py-2 text-lg font-semibold tracking-wider text-white rounded hover:bg-blue-600">als CSV exportieren</button>
<button class="bg-blue-500 px-4 py-2 text-lg font-semibold tracking-wider text-white rounded hover:bg-blue-600">ausloggen</button>
</div>
<table id="overviewTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Tätigkeit</th>
<th>E-Mail Adresse</th>
<th>Jahrgang</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<?php
foreach ($entries as $entry) {
?>
<tr>
<td><?php echo $entry["name"] ?></td>
<td><?php echo $entry["vocation"] ?></td>
<td><?php echo $entry["email"] ?></td>
<td><?php echo $entry["year"] ?></td>
<td><?php echo $entry["age"] ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#overviewTable').DataTable({
language: {
url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/German.json'
}
});
});
</script>
<?php
returnFooter();