Edited: docker-compose.yaml

README.md

@@ -40,7 +40,7 @@ define('DB_NAME', 'your db name');
 3. Start an local web server
 - You can use php's integrated server by running this:
 ```bash
-php -S localhost:8000
+php -S localhost:8000 -t ./public
 ```
 - You can use any host and any port you want.
 

app/controllers/AuthController.php

@@ -25,10 +25,10 @@ class AuthController extends Controller  {
             if($result === true) {
                 $this->redirect('/dashboard');
             } else {
-                $this->view('auth/signin', ['error' => $result]);
+                $this->view('auth/signin', ['error' => $result], 'noheader');
             }
         } else {
-            $this->view('auth/signin', ['title' => 'Log In']);
+            $this->view('auth/signin', ['title' => 'Log In'], 'noheader');
         }
     }
 
@@ -54,7 +54,7 @@ class AuthController extends Controller  {
                 $this->view('auth/signup', [
                     'error' => 'Please correct the errors below.',
                     'validationErrors' => $validator->errors() ?: [],
-                ]);
+                ], 'noheader');
                 return;
             }
 
@@ -67,13 +67,13 @@ class AuthController extends Controller  {
                 $this->view('auth/signup', [
                     'error' => $result,
                     'validationErrors' => [],
-                ]);
+                ], 'noheader');
             }
         } else {
             $this->view('auth/signup', [
                 'title' => 'Register',
                 'validationErrors' => [],
-            ]);
+            ], 'noheader');
         }
     }
 

app/views/auth/signin.php

@@ -25,4 +25,9 @@
 
         <input type="submit" value="Sign In">
     </form>
+
+    <div class="bordered">
+        <p>New to Habit Tracker?</p>
+        <a href="/auth/signup">Create an account</a>
+    </div>
 </section>

app/views/auth/signup.php

@@ -37,4 +37,9 @@
 
         <input type="submit" value="Sign Up">
     </form>
+
+    <div class="bordered">
+        <p>Already have an account?</p>
+        <a href="/auth/signin">Sign in</a>
+    </div>
 </section>

app/views/dashboard/index.php

@@ -2,7 +2,10 @@
 
 <section class="dashboard">
     <h1>Welcome, <?= htmlspecialchars($_SESSION['user']['username']) ?>!</h1>
-    <a href="/habits/create" class="btn-primary">Create new habit!</a>
+    <div>
+        <a href="/habits/create" class="btn-green">Create new habit!</a>
+        <a href="/habits" class="btn-primary">List all habits</a>
+    </div>
     <div class="card-wrapper">
         <section class="card upcoming">
             <h2>Upcoming</h2>

app/views/habits/create.php

@@ -10,10 +10,10 @@
     <?php endif; ?>
 
     <form method="POST" action="/habits/create">
-        <label for="name">Habit Name:</label>
+        <label for="name">Habit Name</label>
         <input type="text" name="name" id="name" required value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
 
-        <label for="frequency">Frequency:</label>
+        <label for="frequency">Frequency</label>
         <select name="frequency" id="frequency" onchange="toggleCustomFrequency(this.value)">
             <option value="Daily">Daily</option>
             <option value="Weekly">Weekly</option>
@@ -21,7 +21,7 @@
         </select>
 
         <div id="custom-frequency" style="display: none;">
-            <label id="lbl_dow">Days of the Week:</label>
+            <label id="lbl_dow">Days of the Week</label>
             <div class="dow_chb_wrapper">
                 <label for="dow_mon">Monday</label>
                 <input type="checkbox" name="days_of_week[]" id="dow_mon" value="1">
@@ -51,10 +51,10 @@
                 <input type="checkbox" name="days_of_week[]" id="dow_sun" value="7">
             </div>
 
-            <label for="days_of_month" id="lbl_dom">Days of the Month:</label>
+            <label for="days_of_month" id="lbl_dom">Days of the Month</label>
             <input type="text" name="days_of_month" id="days_of_month" placeholder="1,15 (comma-separated)">
 
-            <label for="months">Months:</label>
+            <label for="months">Months</label>
             <input type="text" name="months" id="months" placeholder="1,7,12 (comma-separated)">
         </div>
 

app/views/habits/index.php

@@ -3,33 +3,22 @@
     <?php if (empty($this->get('habits'))): ?>
         <p>No habits yet. <a href="/habits/create">Create your first habit</a>.</p>
     <?php else: ?>
-        <table>
-            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Frequency</th>
-                    <th>Custom Schedule</th>
-                    <th>Points</th>
-                    <th>Created At</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php foreach ($this->get('habits') as $habit): ?>
-                    <tr>
-                        <td><?= htmlspecialchars($habit['title']) ?></td>
-                        <td><?= htmlspecialchars($habit['frequency']) ?></td>
-                        <td><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></td>
-                        <td><?= htmlspecialchars($habit['reward_points']) ?></td>
-                        <td><?= htmlspecialchars($habit['created_at']) ?></td>
-                        <td>
-                            <a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
-                            <a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
-                        </td>
-                    </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
-        <a href="/habits/create">Create new habit!</a>
+        <div class="habits-wrapper">
+        <?php foreach ($this->get('habits') as $habit): ?>
+            <div class="habit bordered">
+                <b><?= htmlspecialchars($habit['title']) ?></b>
+                <p>Frequency: <?= htmlspecialchars($habit['frequency']) ?></p>
+                <?php if (isset($habit['custom_frequency'])): ?>
+                    <p><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></p>
+                <?php endif; ?>
+                    <p><?= htmlspecialchars($habit['reward_points']) ?></p>
+                    <p><?= htmlspecialchars($habit['created_at']) ?></p>
+                    <a href="/habits/done">Mark as done</a> |
+                    <a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
+                    <a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
+            </div>
+        <?php endforeach; ?>
+        </div>
+        <a href="/habits/create" class="btn-green">Create new habit!</a>
     <?php endif; ?>
 </section>

app/views/layouts/base.php

@@ -10,13 +10,23 @@
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/global.css">
     <link rel="stylesheet" href="/css/vars.css">
+    <link rel="stylesheet" href="/css/header.css">
     <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
   </head>
   <body>
     <header>
-      <a href="/auth/signin">Log In</a>
-      <a href="/auth/signup">Sign Up</a>
-      <a href="/auth/logout">Log Out</a>
+      <div id="hd-left">
+        <a href="/"><img src="/img/logo.jpg" alt="home"></a>
+        <label><?= $data['title'] ?></label>
+      </div>
+      <div id="hd-right">
+        <?php if (!isset($_SESSION['user'])): ?>
+        <a href="/auth/signin">Log In</a>
+        <a href="/auth/signup">Sign Up</a>
+        <?php else: ?>
+        <a href="/auth/logout" class="btn-secondary">Sign out</a>
+        <?php endif; ?>
+      </div>
     </header>
     <main class="content">
       <?= $content ?>

app/views/layouts/noheader.php

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="Filip Rojek | http://filiprojek.cz">
+    <meta name="email" content="webmaster(@)fofrweb.com">
+    <meta name="copyright" content="(c) filiprojek.cz">
+    <title>Habit Tracker | <?= $data['title'] ?></title>
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/global.css">
+    <link rel="stylesheet" href="/css/vars.css">
+    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+  </head>
+  <body>
+    <main class="content">
+      <?= $content ?>
+    </main>
+  </body>
+</html>

config/environment.php.example

@@ -0,0 +1,6 @@
+<?php
+
+define('DB_HOST', '0.0.0.0');
+define('DB_NAME', 'habit_tracker'); 
+define('DB_USER', 'username'); 
+define('DB_PASS', 'password');

core/Controller.php

@@ -16,8 +16,8 @@ class Controller {
      * @param string $viewName
      * @param array $data
      */
-    public function view($viewName, $data = []) {
+    public function view($viewName, $data = [], $layout = "base") {
         $view = new View();
-        $view->render($viewName, $data);
+        $view->render($viewName, $data, $layout);
     }
 }

core/Router.php

@@ -78,7 +78,7 @@ class Router {
         } else {
             http_response_code(404);
             $view = new View();
-            $view->render('errors/404');
+            $view->render('errors/404', [], 'noheader');
         }
     }
 }

docker-compose.yaml

@@ -1,27 +1,31 @@
 services:
   mariadb:
     image: mariadb:11.4 # LTS at 25. 12. 2025
-    restart: always
+    restart: on-failure:2
     environment:
       MARIADB_ROOT_PASSWORD: root
     ports:
       - 3306:3306
+    profiles: ["prod", "dev"]
 
   phpmyadmin:
     image: phpmyadmin
-    restart: always
+    restart: on-failure:2
     ports:
       - 8080:80
     environment:
       - PMA_ARBITRARY=1
+    profiles: ["dev"]
 
   habittracker:
     build:
       context: .
       dockerfile: Dockerfile
-    #volumes:
-    #  - .:/var/www/html
+    volumes:
+      - .:/var/www/html
     ports:
       - 8000:80
     depends_on:
       - mariadb
+    restart: on-failure:2
+    profiles: ["prod"]

public/css/dashboard.css

@@ -1,7 +1,6 @@
 .dashboard {
   display: flex;
   flex-direction: column;
-  width: 100vw;
   align-items: center;
 }
 

public/css/form.css

@@ -3,7 +3,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100vw;
 }
 
 body {
@@ -59,3 +58,21 @@ select {
 .form small.error {
   width: 15rem;
 }
+
+.form .bordered {
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  width: 17rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.form .bordered a {
+  text-decoration: none;
+  color: var(--clr-link-blue);
+}
+
+.form .bordered a:hover {
+  text-decoration: underline;
+}

public/css/global.css

@@ -1,32 +1,47 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
 
 body {
-  font-family: "Open Sans", serif;
-  background-color: var(--clr-primary);
-  color: white;
-  font-size: 14px;
+	font-family: "Open Sans", serif;
+	background-color: var(--clr-primary);
+	color: white;
+	font-size: 14px;
 }
 
 a {
-  color: white;
+	color: white;
 }
 
 h1 {
-  margin-top: .5rem;
-  margin-bottom: 1rem;
+	margin-top: .5rem;
+	margin-bottom: 1rem;
 }
 
 .btn-primary,
+.btn-secondary,
+.btn-tertiary,
+.btn-green,
 .btn-danger {
-  background-color: var(--clr-green);
-  padding: .5rem;
-  text-decoration: none;
-  cursor: pointer;
-  border-radius: var(--border-radious);
-  border: var(--borderWidth-thin) solid var(--clr-border);
+	background-color: var(--clr-primary);
+	padding: .5rem;
+	text-decoration: none;
+	cursor: pointer;
+	border-radius: var(--border-radious);
+	border: var(--borderWidth-thin) solid var(--clr-border);
+}
+
+.btn-secondary {
+	background-color: var(--clr-secondary);
+}
+
+.btn-tertiary {
+	background-color: var(--clr-tertiary);
+}
+
+.btn-green {
+	background-color: var(--clr-green);
 }
 
 .btn-danger {
-  background-color: var(--clr-danger-muted) !important;
-  border: var(--borderWidth-thin) solid var(--clr-border-danger);
+	background-color: var(--clr-danger-muted);
+	border: var(--borderWidth-thin) solid var(--clr-border-danger);
 }

public/css/habits_dashboard.css

@@ -1,26 +1,15 @@
-.habits h1 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.habits-wrapper {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-.habits table {
-  width: 100%;
-  border-collapse: collapse;
+.habits .bordered {
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  width: 17rem;
+  padding: 1rem;
   margin-top: 1rem;
-}
-
-.habits table th,
-.habits table td {
-  border: 1px solid #ccc;
-  padding: 8px;
-  text-align: left;
-}
-
-.habits a {
-  color: #007bff;
-  text-decoration: none;
-}
-
-.habits a:hover {
-  text-decoration: underline;
+  text-align: center;
 }

public/css/header.css

@@ -0,0 +1,26 @@
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+  width: 100vw;
+  height: 3rem;
+  background: var(--clr-secondary);
+  border-radius: var(--border-radious);
+  border-bottom: var(--borderWidth-thin) solid var(--clr-border);
+}
+
+#hd-left,
+#hd-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+header a img {
+  height: 2rem;
+}
+
+header a {
+  text-decoration: none;
+}

public/css/main.css

@@ -6,7 +6,7 @@
 
 main {
   display: flex;
-  gap: 2rem;
+  flex-direction: column;
   margin-top: 2rem;
   margin-bottom: 2rem;
   padding: 0 var(--container-size);

public/css/vars.css

@@ -6,6 +6,13 @@
   --clr-green: #238636;
   --clr-danger-muted: #f851491a;
 
+  --clr-link-blue: #4493f8;
+  --clr-light-blue: #39a2ae;
+  --clr-light-green: #71f79f;
+  --clr-red: #9b1d20;
+  --clr-orange: #e08e45;
+  --clr-gray-blue: #627c85;
+
   --border-radious: 5px;
   --borderWidth-thin: max(1px, 0.0625rem);
   --clr-border: #3d444db3;