improved form styling, responsiveness, colors, added favico

2023-07-10 13:01:38 +02:00 · 2023-07-10 13:01:38 +02:00 · d86a01f680
commit d86a01f680
parent b9f8778f40
11 changed files with 274 additions and 83 deletions
--- a/TODO.md
+++ b/TODO.md
@ -0,0 +1,6 @@
+- ~~Register backend~~
+- Edit Profile:
+  - Change Password
+  - Delete Account
+- ~~Search Result mobile friendly~~
+- ~~fix number input~~
--- a/dashboard.php
+++ b/dashboard.php
--- a/favico.ico
+++ b/favico.ico
--- a/fonts/FiraSans-Regular.woff2
+++ b/fonts/FiraSans-Regular.woff2
--- a/fonts/SourceSansPro-Regular.ttf.woff2
+++ b/fonts/SourceSansPro-Regular.ttf.woff2
--- a/index.php
+++ b/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>
--- a/register.php
+++ b/register.php
--- a/search.old.php
+++ b/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>
--- a/search.php
+++ b/search.php
--- a/style.css
+++ b/style.css
@ -11,34 +11,48 @@

 /* CSS */
@font-face {
-  font-family: 'Fira Sans';
-  src: url('fonts/FiraSans-Regular.woff2');
+  font-family: 'Source Sans Pro';
+  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: linear-gradient(to right, #0f0c29, #302b63, #24243e);
+  background: var(--bg-1); /* fallback for old browsers */
+  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;
-  font-family: 'Fira Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  color: var(--text);
+  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;
+}
+
+
--- a/useradd.php
+++ b/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;
+}
+?>
+