Base mainpage + base CSS

2017-03-26 17:00:41 +02:00 · 2017-03-26 17:00:41 +02:00 · d01a5db0ff
commit d01a5db0ff
parent ca17ede359
4 changed files with 80 additions and 3 deletions
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@ -0,0 +1,49 @@
+/** Header **/
+.header {
+    height: 150px;
+    margin-bottom: 30px;
+}
+
+.top > .container {
+    position: relative;
+    padding-top: 20px;
+    height: 100px;
+}
+
+.user {
+    text-align: right;
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+}
+
+.menu {
+    background: #0094ff;
+    padding: 15px 0;
+    height: 50px;
+}
+
+ul.nv {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nv > li {
+    float: left;
+    margin-right: 50px;
+}
+
+.nv > li > a {
+    color: white;
+}
+
+.nv > li > a:hover {
+    color: white;
+}
+
+/** Footer **/
+.footer {
+    color: grey;
+    margin-top: 50px;
+}
--- a/templates/__footer.phtml
+++ b/templates/__footer.phtml
@ -1,2 +1,8 @@
+</div>
+<div class="footer">
+    <div class="container">
+        Copyright Daniel Boutros, Christiaan Goossens & Jelmer Hinssen 2017.<br/>In opdracht van het Stedelijk Gymnasium Nijmegen.
+    </div>
+</div>
 </body>
 </html>
--- a/templates/__header.phtml
+++ b/templates/__header.phtml
@ -4,5 +4,30 @@
        <meta charset="utf-8"/>
        <title>Inforbank</title>
        <link rel="stylesheet" href="assets/css/main.css">
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
+        <div class="header">
+            <div class="top">
+                <div class="container">
+                    <img src="assets/logo.png" alt="Inforbank"></img>
+                    <div class="user">
+                        Welkom <?= $klant['voornaam'] ?> <?php
+                            if ($klant['tussenvoegsel'] !== "") {
+                                echo " " . $klant['tussenvoegsel'];
+                            }
+                        ?> <?= $klant['achternaam'] ?><br/>
+                        <a href="/logout">Uitloggen</a>
+                    </div>
+                </div>
+            </div>
+            <div class="menu">
+                <div class="container">
+                    <ul class="nv">
+                        <li><a href="/">Rekeningen</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="container">
--- a/templates/index.phtml
+++ b/templates/index.phtml
@ -1,8 +1,5 @@
 <?php include '__header.phtml'; ?>

-<p>Welkom klant <?= $_SESSION['userid'] ?></p>
-<a href="/logout">Uitloggen</a>
-<br/>
 <pre><?php echo json_encode($klant); ?></pre>
 <pre><?php echo json_encode($rekeningen); ?></pre>