improved form styling, responsiveness, colors, added favico

TODO.md

@@ -0,0 +1,6 @@
+- ~~Register backend~~
+- Edit Profile:
+  - Change Password
+  - Delete Account
+- ~~Search Result mobile friendly~~
+- ~~fix number input~~

dashboard.php

@@ -27,13 +27,14 @@ $table = $conn->query("SELECT * FROM user" . $user_id . " ORDER BY name;");
   <title>Dashboard - CineTrack</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="/style.css" />
+  <link rel="icon" type="image/x-icon" href="/favico.ico">
 </head>
 <body>
   <header>
     <svg width="332.414" height="45.704" viewBox="0 0 332.414 45.704" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#eeeeee" stroke-width="0.25mm" fill="#eeeeee" style="stroke:#eeeeee;stroke-width:0.25mm;fill:#eeeeee"><path d="M 116.543 30.139 L 116.543 34.735 L 134.037 34.735 L 134.037 36.563 L 116.543 36.563 L 116.543 38.391 L 134.037 38.391 L 134.037 40.219 L 116.543 40.219 L 116.543 42.047 L 134.037 42.047 L 134.037 43.876 L 114.715 43.876 L 114.715 7.313 L 134.037 7.313 L 134.037 9.141 L 116.543 9.141 L 116.543 10.969 L 134.037 10.969 L 134.037 12.797 L 116.543 12.797 L 116.543 14.626 L 134.037 14.626 L 134.037 16.454 L 116.543 16.454 L 116.543 20.999 L 133.022 20.999 L 133.022 22.827 L 116.543 22.827 L 116.543 24.655 L 133.022 24.655 L 133.022 26.483 L 116.543 26.483 L 116.543 28.311 L 133.022 28.311 L 133.022 30.139 L 116.543 30.139 Z M 144.93 10.969 L 137.617 10.969 L 137.617 9.141 L 165.039 9.141 L 165.039 10.969 L 157.727 10.969 L 157.727 43.876 L 155.899 43.876 L 155.899 10.969 L 154.07 10.969 L 154.07 43.876 L 152.242 43.876 L 152.242 10.969 L 150.414 10.969 L 150.414 43.876 L 148.586 43.876 L 148.586 10.969 L 146.758 10.969 L 146.758 43.876 L 144.93 43.876 L 144.93 10.969 Z M 182.99 35.547 L 182.99 33.719 L 194.01 33.719 Q 197.387 33.719 200.256 32.094 A 12.292 12.292 0 0 0 204.839 27.575 A 12.325 12.325 0 0 0 206.553 21.176 A 11.212 11.212 0 0 0 204.852 15.222 A 12.587 12.587 0 0 0 200.243 10.792 Q 197.336 9.141 194.01 9.141 L 171.006 9.141 L 171.006 43.876 L 169.178 43.876 L 169.178 7.313 L 194.01 7.313 A 13.956 13.956 0 0 1 199.532 8.443 A 15.294 15.294 0 0 1 203.204 10.631 A 14.022 14.022 0 0 1 204.115 11.439 Q 206.045 13.305 207.213 15.87 Q 208.381 18.434 208.381 21.176 A 16.396 16.396 0 0 1 207.881 25.307 A 13.276 13.276 0 0 1 206.35 28.933 A 13.325 13.325 0 0 1 200.891 33.973 L 204.725 43.876 L 202.77 43.876 L 199.139 34.709 Q 198.453 34.938 197.539 35.167 L 200.967 43.876 L 199.012 43.876 L 195.66 35.471 A 16.591 16.591 0 0 1 194.437 35.543 A 18.931 18.931 0 0 1 194.01 35.547 L 197.234 43.876 L 195.305 43.876 L 192.106 35.547 L 190.455 35.547 L 193.527 43.876 L 191.598 43.876 L 188.5 35.547 L 182.99 35.547 Z M 251.164 25.848 L 251.164 43.876 L 249.336 43.876 L 249.336 25.848 Q 249.336 20.668 246.924 16.593 A 16.57 16.57 0 0 0 240.348 10.296 A 19.056 19.056 0 0 0 232.4 8.114 A 22.838 22.838 0 0 0 231.055 8.075 A 17.698 17.698 0 0 0 222.041 10.436 Q 217.953 12.797 215.617 16.822 A 17.169 17.169 0 0 0 213.281 25.594 A 17.48 17.48 0 0 0 214.284 31.523 A 16.759 16.759 0 0 0 216.011 35.045 A 14.805 14.805 0 0 0 217.026 36.423 A 18.774 18.774 0 0 0 221.038 40.042 A 18.052 18.052 0 0 0 225.939 42.352 A 18.532 18.532 0 0 0 231.283 43.139 A 14.404 14.404 0 0 0 236.971 41.997 L 236.971 43.876 Q 234.152 44.866 231.182 44.866 A 20.895 20.895 0 0 1 225.202 44.002 A 19.183 19.183 0 0 1 219.819 41.451 A 20.551 20.551 0 0 1 215.465 37.464 A 16.942 16.942 0 0 1 212.958 33.242 A 19.899 19.899 0 0 1 212.52 32.094 A 19.674 19.674 0 0 1 211.453 25.621 A 21.851 21.851 0 0 1 211.453 25.594 A 19.326 19.326 0 0 1 212.939 18.091 A 19.174 19.174 0 0 1 216.683 12.25 A 18.41 18.41 0 0 1 217.001 11.921 A 18.595 18.595 0 0 1 222.127 8.289 A 21.764 21.764 0 0 1 223.247 7.783 Q 226.916 6.247 231.055 6.247 A 22.164 22.164 0 0 1 238.013 7.326 A 20.873 20.873 0 0 1 238.977 7.668 A 19.9 19.9 0 0 1 243.966 10.423 A 18.217 18.217 0 0 1 245.375 11.617 A 17.604 17.604 0 0 1 249.197 16.895 A 20.643 20.643 0 0 1 249.615 17.825 A 20.048 20.048 0 0 1 251.126 24.507 A 23.517 23.517 0 0 1 251.164 25.848 Z M 41.742 10.004 L 40.219 10.995 Q 37.324 6.754 32.741 4.292 Q 28.158 1.829 22.852 1.829 A 20.588 20.588 0 0 0 14.689 3.492 A 21.368 21.368 0 0 0 8.88 7.121 A 20.08 20.08 0 0 0 7.973 7.973 A 20.942 20.942 0 0 0 3.704 14.206 A 23.883 23.883 0 0 0 3.491 14.689 A 20.588 20.588 0 0 0 1.828 22.852 A 20.588 20.588 0 0 0 3.491 31.015 A 21.368 21.368 0 0 0 7.12 36.824 A 20.08 20.08 0 0 0 7.973 37.731 A 20.942 20.942 0 0 0 14.206 42 A 23.883 23.883 0 0 0 14.689 42.212 A 20.588 20.88 0 0 0 22.852 43.876 A 20.475 20.475 0 0 0 32.754 41.387 Q 37.35 38.899 40.244 34.659 L 41.717 35.776 A 22.881 22.881 0 0 1 33.592 43.025 A 22.31 22.31 0 0 1 22.852 45.704 Q 18.205 45.704 13.978 43.888 A 23.346 23.346 0 0 1 7.675 39.939 A 21.926 21.926 0 0 1 6.691 39.013 Q 3.631 35.954 1.816 31.726 A 22.257 22.257 0 0 1 0 22.852 Q 0 18.206 1.816 13.978 A 23.346 23.346 0 0 1 5.765 7.676 A 21.926 21.926 0 0 1 6.691 6.691 Q 9.75 3.631 13.978 1.816 A 22.257 22.257 0 0 1 22.852 0.001 A 22.276 22.276 0 0 1 33.617 2.692 Q 38.594 5.383 41.742 10.004 Z M 247.508 25.848 L 247.508 43.876 L 245.68 43.876 L 245.68 25.848 Q 245.68 21.659 243.763 18.421 A 12.875 12.875 0 0 0 238.52 13.458 Q 235.193 11.731 231.055 11.731 A 14.173 14.173 0 0 0 223.869 13.597 A 13.599 13.599 0 0 0 218.778 18.637 A 13.62 13.62 0 0 0 216.938 25.594 A 15.351 15.351 0 0 0 217.392 29.388 A 13.267 13.267 0 0 0 218.131 31.523 A 13.05
Line truncated
   </header>
   <h2>Welcome, <?php echo $username; ?>!</h2>
-  <a href="logout.php">Logout</a>
+  <a class='btn' href="logout.php">Logout</a>
   <br>
   <h3>Search Movies, Shows and more...</h3>
   <form method="post" action="search.php">
@@ -46,31 +47,33 @@ $table = $conn->query("SELECT * FROM user" . $user_id . " ORDER BY name;");
   // Output the HTML table
   if ($table->num_rows > 0) {
     $i = 0;
-    while($row = $table->fetch_assoc()) {
+    while($row = $table->fetch_assoc()):
-      echo "<div><img src='https://image.tmdb.org/t/p/original" . $row["poster"] . "' style='width:12rem;' alt='" . $row["name"] . "' onclick='openPopup(" . $i . ")'></div>";
+  ?>
+  <div><img src='https://image.tmdb.org/t/p/original<?php echo $row["poster"];?>' class='poster' alt='<?php echo $row["name"];?>' onclick='openPopup(<?php echo $i;?>)'></div>
 
-      echo "<div id='popup" . $i . "' class='popup'>";
+    <div id='popup<?php echo $i;?>' class='popup'>
-        echo "<div class='popup-content'>";
+        <div class='popup-content'>
-          echo "<span class='close' onclick='closePopup(" . $i . ")'>&times;</span>";
+          <span class='close' onclick='closePopup(<?php echo $i;?>)'>&times;</span>
-          echo "<h3>" . $row["name"] . "</h3>";
+          <h3><?php echo $row["name"];?></h3>
-          echo "<div class='left_container'><img src='https://image.tmdb.org/t/p/original" . $row["poster"] . "' style='width:12rem;' alt='" . $row["name"] . "'></div>";
+          <div class='left_container'><img src='https://image.tmdb.org/t/p/original<?php echo $row["poster"];?>' class='poster' alt='<?php echo $row["name"];?>'></div>
-          echo "<div class='right_container'>";
+          <div class='right_container'>
-            echo "<p>" . $row["overview"] . "</p>";
+            <p><?php echo $row["overview"]; ?></p>
-            echo "<br>";
+            <br>
-            echo "<div style='text-align:center;'>";
+            <div style='text-align:center;'>
-              echo "<form method='post' action='add.php'>";
+              <form method='post' action='add.php'>
-                echo "<input value='" . $row["name"] . "' style='width:0;height:0;border:none;padding:0 !important;' name='title' required>";
+                <input value='<?php echo $row["name"];?>' class='invisible_input' name='title' required>
-                echo "<input type='number' name='season' value='" . $row["season"] . "' min='1' style='width:5ch' required>";
+                <input type='number' name='season' value='<?php echo $row["season"];?>' min='1' required>
-                echo "<input type='number' name='episode' value='" . $row["episode"] . "' min='1' style='width:5ch' required>";
+                <input type='number' name='episode' value='<?php echo $row["episode"];?>' min='1' required>
-                echo "<input type='submit' value='Update'>";
+                <input type='submit' value='Update'>
-              echo "</form>";
+              </form>
-            echo "</div>";
+            </div>
-          echo "</div>";
+          </div>
-        echo "</div>";
+        </div>
-      echo "</div>";
+      </div>
 
+  <?php
       $i++;
-    }
+    endwhile;
   }
   ?>
   </div>

index.php

@@ -8,6 +8,7 @@
   <title>Login - Cinetrack</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="/style.css" />
+  <link rel="icon" type="image/x-icon" href="/favico.ico">
 </head>
 <body>
   <header>
@@ -31,5 +32,7 @@
   ?>
   </p>
 
+  <p>or</p>
+  <a class='btn' href='register.php'>Register</a>
 </body>
 </html>

register.php

@@ -0,0 +1,40 @@
+<?php if(isset($_SESSION['username'])) {
+  header('Location: dashboard.php');
+  exit;
+} ?>
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Register - Cinetrack</title>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <link rel='stylesheet' type='text/css' href='/style.css' />
+  <link rel="icon" type="image/x-icon" href="/favico.ico">
+</head>
+<body>
+  <header>
+    <svg width='332.414' height='45.704' viewBox='0 0 332.414 45.704' xmlns='http://www.w3.org/2000/svg'><g id='svgGroup' stroke-linecap='round' fill-rule='evenodd' font-size='9pt' stroke='#eeeeee' stroke-width='0.25mm' fill='#eeeeee' style='stroke:#eeeeee;stroke-width:0.25mm;fill:#eeeeee'><path d='M 116.543 30.139 L 116.543 34.735 L 134.037 34.735 L 134.037 36.563 L 116.543 36.563 L 116.543 38.391 L 134.037 38.391 L 134.037 40.219 L 116.543 40.219 L 116.543 42.047 L 134.037 42.047 L 134.037 43.876 L 114.715 43.876 L 114.715 7.313 L 134.037 7.313 L 134.037 9.141 L 116.543 9.141 L 116.543 10.969 L 134.037 10.969 L 134.037 12.797 L 116.543 12.797 L 116.543 14.626 L 134.037 14.626 L 134.037 16.454 L 116.543 16.454 L 116.543 20.999 L 133.022 20.999 L 133.022 22.827 L 116.543 22.827 L 116.543 24.655 L 133.022 24.655 L 133.022 26.483 L 116.543 26.483 L 116.543 28.311 L 133.022 28.311 L 133.022 30.139 L 116.543 30.139 Z M 144.93 10.969 L 137.617 10.969 L 137.617 9.141 L 165.039 9.141 L 165.039 10.969 L 157.727 10.969 L 157.727 43.876 L 155.899 43.876 L 155.899 10.969 L 154.07 10.969 L 154.07 43.876 L 152.242 43.876 L 152.242 10.969 L 150.414 10.969 L 150.414 43.876 L 148.586 43.876 L 148.586 10.969 L 146.758 10.969 L 146.758 43.876 L 144.93 43.876 L 144.93 10.969 Z M 182.99 35.547 L 182.99 33.719 L 194.01 33.719 Q 197.387 33.719 200.256 32.094 A 12.292 12.292 0 0 0 204.839 27.575 A 12.325 12.325 0 0 0 206.553 21.176 A 11.212 11.212 0 0 0 204.852 15.222 A 12.587 12.587 0 0 0 200.243 10.792 Q 197.336 9.141 194.01 9.141 L 171.006 9.141 L 171.006 43.876 L 169.178 43.876 L 169.178 7.313 L 194.01 7.313 A 13.956 13.956 0 0 1 199.532 8.443 A 15.294 15.294 0 0 1 203.204 10.631 A 14.022 14.022 0 0 1 204.115 11.439 Q 206.045 13.305 207.213 15.87 Q 208.381 18.434 208.381 21.176 A 16.396 16.396 0 0 1 207.881 25.307 A 13.276 13.276 0 0 1 206.35 28.933 A 13.325 13.325 0 0 1 200.891 33.973 L 204.725 43.876 L 202.77 43.876 L 199.139 34.709 Q 198.453 34.938 197.539 35.167 L 200.967 43.876 L 199.012 43.876 L 195.66 35.471 A 16.591 16.591 0 0 1 194.437 35.543 A 18.931 18.931 0 0 1 194.01 35.547 L 197.234 43.876 L 195.305 43.876 L 192.106 35.547 L 190.455 35.547 L 193.527 43.876 L 191.598 43.876 L 188.5 35.547 L 182.99 35.547 Z M 251.164 25.848 L 251.164 43.876 L 249.336 43.876 L 249.336 25.848 Q 249.336 20.668 246.924 16.593 A 16.57 16.57 0 0 0 240.348 10.296 A 19.056 19.056 0 0 0 232.4 8.114 A 22.838 22.838 0 0 0 231.055 8.075 A 17.698 17.698 0 0 0 222.041 10.436 Q 217.953 12.797 215.617 16.822 A 17.169 17.169 0 0 0 213.281 25.594 A 17.48 17.48 0 0 0 214.284 31.523 A 16.759 16.759 0 0 0 216.011 35.045 A 14.805 14.805 0 0 0 217.026 36.423 A 18.774 18.774 0 0 0 221.038 40.042 A 18.052 18.052 0 0 0 225.939 42.352 A 18.532 18.532 0 0 0 231.283 43.139 A 14.404 14.404 0 0 0 236.971 41.997 L 236.971 43.876 Q 234.152 44.866 231.182 44.866 A 20.895 20.895 0 0 1 225.202 44.002 A 19.183 19.183 0 0 1 219.819 41.451 A 20.551 20.551 0 0 1 215.465 37.464 A 16.942 16.942 0 0 1 212.958 33.242 A 19.899 19.899 0 0 1 212.52 32.094 A 19.674 19.674 0 0 1 211.453 25.621 A 21.851 21.851 0 0 1 211.453 25.594 A 19.326 19.326 0 0 1 212.939 18.091 A 19.174 19.174 0 0 1 216.683 12.25 A 18.41 18.41 0 0 1 217.001 11.921 A 18.595 18.595 0 0 1 222.127 8.289 A 21.764 21.764 0 0 1 223.247 7.783 Q 226.916 6.247 231.055 6.247 A 22.164 22.164 0 0 1 238.013 7.326 A 20.873 20.873 0 0 1 238.977 7.668 A 19.9 19.9 0 0 1 243.966 10.423 A 18.217 18.217 0 0 1 245.375 11.617 A 17.604 17.604 0 0 1 249.197 16.895 A 20.643 20.643 0 0 1 249.615 17.825 A 20.048 20.048 0 0 1 251.126 24.507 A 23.517 23.517 0 0 1 251.164 25.848 Z M 41.742 10.004 L 40.219 10.995 Q 37.324 6.754 32.741 4.292 Q 28.158 1.829 22.852 1.829 A 20.588 20.588 0 0 0 14.689 3.492 A 21.368 21.368 0 0 0 8.88 7.121 A 20.08 20.08 0 0 0 7.973 7.973 A 20.942 20.942 0 0 0 3.704 14.206 A 23.883 23.883 0 0 0 3.491 14.689 A 20.588 20.588 0 0 0 1.828 22.852 A 20.588 20.588 0 0 0 3.491 31.015 A 21.368 21.368 0 0 0 7.12 36.824 A 20.08 20.08 0 0 0 7.973 37.731 A 20.942 20.942 0 0 0 14.206 42 A 23.883 23.883 0 0 0 14.689 42.212 A 20.588 20.88 0 0 0 22.852 43.876 A 20.475 20.475 0 0 0 32.754 41.387 Q 37.35 38.899 40.244 34.659 L 41.717 35.776 A 22.881 22.881 0 0 1 33.592 43.025 A 22.31 22.31 0 0 1 22.852 45.704 Q 18.205 45.704 13.978 43.888 A 23.346 23.346 0 0 1 7.675 39.939 A 21.926 21.926 0 0 1 6.691 39.013 Q 3.631 35.954 1.816 31.726 A 22.257 22.257 0 0 1 0 22.852 Q 0 18.206 1.816 13.978 A 23.346 23.346 0 0 1 5.765 7.676 A 21.926 21.926 0 0 1 6.691 6.691 Q 9.75 3.631 13.978 1.816 A 22.257 22.257 0 0 1 22.852 0.001 A 22.276 22.276 0 0 1 33.617 2.692 Q 38.594 5.383 41.742 10.004 Z M 247.508 25.848 L 247.508 43.876 L 245.68 43.876 L 245.68 25.848 Q 245.68 21.659 243.763 18.421 A 12.875 12.875 0 0 0 238.52 13.458 Q 235.193 11.731 231.055 11.731 A 14.173 14.173 0 0 0 223.869 13.597 A 13.599 13.599 0 0 0 218.778 18.637 A 13.62 13.62 0 0 0 216.938 25.594 A 15.351 15.351 0 0 0 217.392 29.388 A 13.267 13.267 0 0 0 218.131 31.523 A 13.05Line truncated
+  </header>
+  <h2>Make an account</h2>
+  <form method='post' action='useradd.php'>
+    <label for='username'>Username</label>
+    <input type='text' name='username' required><br><br>
+
+    <label for='password'>Password</label>
+    <input type='password' name='password' minlength='5' required><br>
+    <p class='password_notice'>
+      Your password should be atleast 5 characters long.
+      <br>
+      Do not reuse passwords!
+    </p>
+
+    <br>
+    <input type='submit' value='Register'>
+  </form>
+
+  <p class='error'>
+  <?php
+    if(isset($_GET['userfound'])) echo 'User already exists.';
+  ?>
+  </p>
+</body>
+</html>

search.old.php

@@ -0,0 +1,43 @@
+  <!--<table style="border: thin solid black;border-collapse: collapse;">
+    <tr>
+    <?php
+    foreach($json as $data) {
+      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
+      echo "<td style='border: thin solid black;'><img src='https://image.tmdb.org/t/p/original";
+      echo $data["poster_path"];
+      echo "' style='width:10rem;'><br></td>";
+    }
+    ?>
+    </tr>
+    <tr>
+    <?php
+    foreach($json as $data) {
+      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
+      echo "<td style='border: thin solid black;'>";
+      // title data can either be title or name
+      echo $data["title"];
+      echo $data["name"];
+      // only show year when available
+      echo ($data["first_air_date"] != null) ? " (" . explode("-", $data["first_air_date"])[0] . ")" : '';
+      echo "</td>";
+    }
+    ?>
+    </tr>
+    <tr>
+    <?php
+    foreach($json as $data) {
+      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
+      echo "<td style='border: thin solid black;'>";
+      echo "<form method='post' action='add.php'>";
+      echo "<label>S</label>";
+      echo "<label>Ep</label><br>";
+      echo "<input value='" . $data["name"] . $data["title"] . "' style='width:0;height:0;border:none;padding:0 !important;' name='title' required>";
+      echo "<input type='number' name='season' value='1' min='1' style='width:5ch' required>";
+      echo "<input type='number' name='episode' value='1' min='1' style='width:5ch' required>";
+      echo "<input type='submit' value='Add/Change'><br>";
+      echo "</form>";
+      echo "</td>";
+    }
+    ?>
+    </tr>
+  </table>

search.php

@@ -25,64 +25,52 @@ $response = $client->request('GET', 'https://api.themoviedb.org/3/search/multi?q
 ]);
 $json = json_decode($response->getBody(), true)["results"];
 ?>
-
 <!DOCTYPE html>
-<html></html>
+<html>
 <head>
   <title>Search - CineTrack</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="/style.css" />
+  <link rel="icon" type="image/x-icon" href="/favico.ico">
 </head>
 <body>
   <header>
     <svg width="332.414" height="45.704" viewBox="0 0 332.414 45.704" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#eeeeee" stroke-width="0.25mm" fill="#eeeeee" style="stroke:#eeeeee;stroke-width:0.25mm;fill:#eeeeee"><path d="M 116.543 30.139 L 116.543 34.735 L 134.037 34.735 L 134.037 36.563 L 116.543 36.563 L 116.543 38.391 L 134.037 38.391 L 134.037 40.219 L 116.543 40.219 L 116.543 42.047 L 134.037 42.047 L 134.037 43.876 L 114.715 43.876 L 114.715 7.313 L 134.037 7.313 L 134.037 9.141 L 116.543 9.141 L 116.543 10.969 L 134.037 10.969 L 134.037 12.797 L 116.543 12.797 L 116.543 14.626 L 134.037 14.626 L 134.037 16.454 L 116.543 16.454 L 116.543 20.999 L 133.022 20.999 L 133.022 22.827 L 116.543 22.827 L 116.543 24.655 L 133.022 24.655 L 133.022 26.483 L 116.543 26.483 L 116.543 28.311 L 133.022 28.311 L 133.022 30.139 L 116.543 30.139 Z M 144.93 10.969 L 137.617 10.969 L 137.617 9.141 L 165.039 9.141 L 165.039 10.969 L 157.727 10.969 L 157.727 43.876 L 155.899 43.876 L 155.899 10.969 L 154.07 10.969 L 154.07 43.876 L 152.242 43.876 L 152.242 10.969 L 150.414 10.969 L 150.414 43.876 L 148.586 43.876 L 148.586 10.969 L 146.758 10.969 L 146.758 43.876 L 144.93 43.876 L 144.93 10.969 Z M 182.99 35.547 L 182.99 33.719 L 194.01 33.719 Q 197.387 33.719 200.256 32.094 A 12.292 12.292 0 0 0 204.839 27.575 A 12.325 12.325 0 0 0 206.553 21.176 A 11.212 11.212 0 0 0 204.852 15.222 A 12.587 12.587 0 0 0 200.243 10.792 Q 197.336 9.141 194.01 9.141 L 171.006 9.141 L 171.006 43.876 L 169.178 43.876 L 169.178 7.313 L 194.01 7.313 A 13.956 13.956 0 0 1 199.532 8.443 A 15.294 15.294 0 0 1 203.204 10.631 A 14.022 14.022 0 0 1 204.115 11.439 Q 206.045 13.305 207.213 15.87 Q 208.381 18.434 208.381 21.176 A 16.396 16.396 0 0 1 207.881 25.307 A 13.276 13.276 0 0 1 206.35 28.933 A 13.325 13.325 0 0 1 200.891 33.973 L 204.725 43.876 L 202.77 43.876 L 199.139 34.709 Q 198.453 34.938 197.539 35.167 L 200.967 43.876 L 199.012 43.876 L 195.66 35.471 A 16.591 16.591 0 0 1 194.437 35.543 A 18.931 18.931 0 0 1 194.01 35.547 L 197.234 43.876 L 195.305 43.876 L 192.106 35.547 L 190.455 35.547 L 193.527 43.876 L 191.598 43.876 L 188.5 35.547 L 182.99 35.547 Z M 251.164 25.848 L 251.164 43.876 L 249.336 43.876 L 249.336 25.848 Q 249.336 20.668 246.924 16.593 A 16.57 16.57 0 0 0 240.348 10.296 A 19.056 19.056 0 0 0 232.4 8.114 A 22.838 22.838 0 0 0 231.055 8.075 A 17.698 17.698 0 0 0 222.041 10.436 Q 217.953 12.797 215.617 16.822 A 17.169 17.169 0 0 0 213.281 25.594 A 17.48 17.48 0 0 0 214.284 31.523 A 16.759 16.759 0 0 0 216.011 35.045 A 14.805 14.805 0 0 0 217.026 36.423 A 18.774 18.774 0 0 0 221.038 40.042 A 18.052 18.052 0 0 0 225.939 42.352 A 18.532 18.532 0 0 0 231.283 43.139 A 14.404 14.404 0 0 0 236.971 41.997 L 236.971 43.876 Q 234.152 44.866 231.182 44.866 A 20.895 20.895 0 0 1 225.202 44.002 A 19.183 19.183 0 0 1 219.819 41.451 A 20.551 20.551 0 0 1 215.465 37.464 A 16.942 16.942 0 0 1 212.958 33.242 A 19.899 19.899 0 0 1 212.52 32.094 A 19.674 19.674 0 0 1 211.453 25.621 A 21.851 21.851 0 0 1 211.453 25.594 A 19.326 19.326 0 0 1 212.939 18.091 A 19.174 19.174 0 0 1 216.683 12.25 A 18.41 18.41 0 0 1 217.001 11.921 A 18.595 18.595 0 0 1 222.127 8.289 A 21.764 21.764 0 0 1 223.247 7.783 Q 226.916 6.247 231.055 6.247 A 22.164 22.164 0 0 1 238.013 7.326 A 20.873 20.873 0 0 1 238.977 7.668 A 19.9 19.9 0 0 1 243.966 10.423 A 18.217 18.217 0 0 1 245.375 11.617 A 17.604 17.604 0 0 1 249.197 16.895 A 20.643 20.643 0 0 1 249.615 17.825 A 20.048 20.048 0 0 1 251.126 24.507 A 23.517 23.517 0 0 1 251.164 25.848 Z M 41.742 10.004 L 40.219 10.995 Q 37.324 6.754 32.741 4.292 Q 28.158 1.829 22.852 1.829 A 20.588 20.588 0 0 0 14.689 3.492 A 21.368 21.368 0 0 0 8.88 7.121 A 20.08 20.08 0 0 0 7.973 7.973 A 20.942 20.942 0 0 0 3.704 14.206 A 23.883 23.883 0 0 0 3.491 14.689 A 20.588 20.588 0 0 0 1.828 22.852 A 20.588 20.588 0 0 0 3.491 31.015 A 21.368 21.368 0 0 0 7.12 36.824 A 20.08 20.08 0 0 0 7.973 37.731 A 20.942 20.942 0 0 0 14.206 42 A 23.883 23.883 0 0 0 14.689 42.212 A 20.588 20.88 0 0 0 22.852 43.876 A 20.475 20.475 0 0 0 32.754 41.387 Q 37.35 38.899 40.244 34.659 L 41.717 35.776 A 22.881 22.881 0 0 1 33.592 43.025 A 22.31 22.31 0 0 1 22.852 45.704 Q 18.205 45.704 13.978 43.888 A 23.346 23.346 0 0 1 7.675 39.939 A 21.926 21.926 0 0 1 6.691 39.013 Q 3.631 35.954 1.816 31.726 A 22.257 22.257 0 0 1 0 22.852 Q 0 18.206 1.816 13.978 A 23.346 23.346 0 0 1 5.765 7.676 A 21.926 21.926 0 0 1 6.691 6.691 Q 9.75 3.631 13.978 1.816 A 22.257 22.257 0 0 1 22.852 0.001 A 22.276 22.276 0 0 1 33.617 2.692 Q 38.594 5.383 41.742 10.004 Z M 247.508 25.848 L 247.508 43.876 L 245.68 43.876 L 245.68 25.848 Q 245.68 21.659 243.763 18.421 A 12.875 12.875 0 0 0 238.52 13.458 Q 235.193 11.731 231.055 11.731 A 14.173 14.173 0 0 0 223.869 13.597 A 13.599 13.599 0 0 0 218.778 18.637 A 13.62 13.62 0 0 0 216.938 25.594 A 15.351 15.351 0 0 0 217.392 29.388 A 13.267 13.267 0 0 0 218.131 31.523 A 13.05
Line truncated
   </header>
-  <a href='/dashboard.php'>Go Back</a>
+  <?php
+    if(!empty($json)) {
+      echo "<h2>Search results</h2>";
+    }
+  ?>
+  <a class='btn' href='/dashboard.php'>Go Back</a>
   <?php if(!empty($json)): ?>
-  <h2>Search results:</h2>
+
-  <table style="border: thin solid black;border-collapse: collapse;">
+  <div class='auto-fit'>
-    <tr>
     <?php
-    foreach($json as $data) {
+      foreach($json as $data):
-      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
-      echo "<td style='border: thin solid black;'><img src='https://image.tmdb.org/t/p/original";
-      echo $data["poster_path"];
-      echo "' style='width:10rem;'><br></td>";
-    }
     ?>
-    </tr>
+      <div>
-    <tr>
+        <img src='https://image.tmdb.org/t/p/original<?php echo $data["poster_path"]?>' style='width:10rem;'><br>
-    <?php
+        <p>
-    foreach($json as $data) {
+        <?php
-      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
+          // title data can either be title or name
-      echo "<td style='border: thin solid black;'>";
+          echo $data["title"];
-      // title data can either be title or name
+          echo $data["name"];
-      echo $data["title"];
+          // only show year when available
-      echo $data["name"];
+          echo ($data["first_air_date"] != null) ? " (" . explode("-", $data["first_air_date"])[0] . ")" : '';
-      // only show year when available
+        ?>
-      echo ($data["first_air_date"] != null) ? " (" . explode("-", $data["first_air_date"])[0] . ")" : '';
+        </p>
-      echo "</td>";
+        <form method='post' action='add.php'>
-    }
+          <input value='<?php echo $data["name"] . $data["title"]; ?>' class='invisible_input' name='title' required>
-    ?>
+          <input type='number' name='season' value='1' min='1' required>
-    </tr>
+          <input type='number' name='episode' value='1' min='1' required>
-    <tr>
+          <input type='submit' value='Add/Update'>
-    <?php
+        </form>
-    foreach($json as $data) {
+      </div>
-      if(strcasecmp($data["media_type"], "person") === 0) { continue; }
+    <?php endforeach ?>
-      echo "<td style='border: thin solid black;'>";
+  </div>
-      echo "<form method='post' action='add.php'>";
+
-      echo "<label>S</label>";
+
-      echo "<label>Ep</label><br>";
-      echo "<input value='" . $data["name"] . $data["title"] . "' style='width:0;height:0;border:none;padding:0 !important;' name='title' required>";
-      echo "<input type='number' name='season' value='1' min='1' style='width:5ch' required>";
-      echo "<input type='number' name='episode' value='1' min='1' style='width:5ch' required>";
-      echo "<input type='submit' value='Add/Change'><br>";
-      echo "</form>";
-      echo "</td>";
-    }
-    ?>
-    </tr>
-  </table>
   <?php else: ?>
   <h2>Nothing found...</h2>
   <?php endif ?>

style.css

@@ -11,34 +11,48 @@
 
 /* CSS */
 @font-face {
-  font-family: 'Fira Sans';
+  font-family: 'Source Sans Pro';
-  src: url('fonts/FiraSans-Regular.woff2');
+  src: url('fonts/SourceSansPro-Regular.ttf.woff2');
+}
+
+:root {
+  --red: #fe5f55;
+  --bg-1: #2b5876;
+  --bg-2: #4e4376;
+  --text: #d8d8f6;
+  --darker: #7f9c96;
+  --font: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
 html {
-  background: #0f0c29; /* fallback for old browsers */
+  background: var(--bg-1); /* fallback for old browsers */
-  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
+  background: -webkit-linear-gradient(to right, var(--bg-1), var(--bg-2)); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, var(--bg-1), var(--bg-2)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 
 body {
-  color: #eee;
+  color: var(--text);
-  font-family: 'Fira Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  font-family: var(--font);
   text-align: center;
   margin: 0 auto;
 }
 
 a {
-  color: #eee;
+  color: var(--text);
 }
 
 header {
-  background: #00000088;
+  background: rgba(0, 0, 0, 50);
   backdrop-filter: blur(12px);
   margin: 0;
   padding: .5rem;
   text-align: left;
 }
 
+.error {
+  color: var(--red);
+}
+
 div {
   margin: 0 auto;
 }
@@ -93,10 +107,10 @@ form {
 }
 
 .popup-content {
-  background-color: #24243e;
+  background-color: var(--bg-1);
   margin: 10% auto;
   padding: 20px;
-  border: thin solid #888;
+  border: thin solid var(--darker);
   border-radius: 1rem;
   width: 80%;
   max-width: 60vw;
@@ -104,7 +118,7 @@ form {
 }
 
 .close {
-  color: #888;
+  color: var(--darker);
   float: right;
   font-size: 28px;
   font-weight: bold;
@@ -113,7 +127,7 @@ form {
 
 .close:hover,
 .close:focus {
-  color: #eee;
+  color: var(--text);
   text-decoration: none;
   cursor: pointer;
 }
@@ -121,10 +135,51 @@ form {
 input[type=text],
 input[type=password],
 input[type=submit],
-input[type=number] {
+input[type=number],
+.btn {
   background: rgba(0, 0, 0, 0.5);
-  border: thin solid #888;
+  border: thin solid var(--darker);
   padding: .5rem;
-  color: #eee;
+  color: var(--text);
   border-radius: 1rem;
+  text-decoration: none;
+  font-family: var(--font);
+  font-size: 100%;
+  transition: background 200ms;
 }
+
+input[type=number] {
+  padding: .5rem 1.5rem;
+}
+
+input[type=submit]:hover,
+input[type=text]:hover,
+input[type=text]:focus,
+input[type=password]:hover,
+input[type=password]:focus,
+.btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+  outline: none;
+}
+
+input[type=submit]:active,
+.btn:active {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.poster {
+  width: 12rem;
+}
+
+.invisible_input {
+  width: 0;
+  height: 0;
+  border: none;
+  padding: 0 !important;
+}
+
+input[type=number] {
+  width: 10ch;
+}
+
+

useradd.php

@@ -0,0 +1,53 @@
+<?php
+session_start();
+
+$env = parse_ini_file(".env");
+
+// Connect to db
+$conn = new mysqli($env["HOST"], $env["DBUSER"], $env["DBPASS"], $env["TABLE"]);
+
+if ($conn->connect_error) {
+  die("Connection failed: " . $conn->connect_error);
+}
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") { // When user posts data
+  $username = $_POST["username"];
+  $password = $_POST["password"];
+
+  $result = $conn->query("SELECT * FROM users WHERE username = '$username'");
+
+  if ($result->num_rows > 0) {
+    header("Location: /register.php?userfound");
+    exit;
+  }
+
+  $result = $conn->query("INSERT INTO users (username, password) VALUES ('$username', '$password');");
+
+  if(!$result) {
+    echo "Error adding user " . $username;
+    exit;
+  }
+
+  $user_id = $conn->query("SELECT * FROM users WHERE username = '$username'")->fetch_assoc()["id"];
+
+  $result = $conn->query("CREATE TABLE user$user_id (name VARCHAR(255), season INT, episode INT, overview VARCHAR(2048), poster VARCHAR(255));");
+
+  if(!$result) {
+    echo "Error creating table for " . $username;
+    exit;
+  }
+
+  $result = $conn->query("ALTER TABLE user$user_id ADD UNIQUE KEY unique_name (name);");
+
+  if(!$result) {
+    echo "Error adding unique key to table";
+    exit;
+  }
+
+  $_SESSION["username"] = $username;
+  header("Location: dashboard.php");
+  $conn->close();
+  exit;
+}
+?>
+