├── .vscode
    └── settings.json
├── add.php
├── database.php
├── delete.php
├── edit.php
├── home.php
├── index.php
├── login.php
├── logout.php
├── partials
    ├── footer.php
    ├── header.php
    └── navbar.php
├── register.php
├── sql
    └── setup.sql
└── static
    ├── css
        └── index.css
    ├── img
        ├── background.jpg
        └── logo.png
    └── js
        └── welcome.js


/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "[php]": {
 3 |         "editor.tabSize": 2
 4 |     },
 5 |     "[html]": {
 6 |         "editor.tabSize": 2
 7 |     },
 8 |     "[javascript]": {
 9 |         "editor.tabSize": 2
10 |     },
11 |     "files.insertFinalNewline": true,
12 |     "editor.fontSize": 24,
13 |     "editor.lineHeight": 26,
14 |     "terminal.integrated.fontSize": 24,
15 |     "window.zoomLevel": 2
16 | }
17 | 


--------------------------------------------------------------------------------
/add.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 |   require "database.php";
 4 | 
 5 |   session_start();
 6 | 
 7 |   if (!isset($_SESSION["user"])) {
 8 |     header("Location: login.php");
 9 |     return;
10 |   }
11 | 
12 |   $error = null;
13 | 
14 |   if ($_SERVER["REQUEST_METHOD"] == "POST") {
15 |     if (empty($_POST["name"]) || empty($_POST["phone_number"])) {
16 |       $error = "Please fill all the fields.";
17 |     } else if (strlen($_POST["phone_number"]) < 9) {
18 |       $error = "Phone number must be at least 9 characters.";
19 |     } else {
20 |       $name = $_POST["name"];
21 |       $phoneNumber = $_POST["phone_number"];
22 | 
23 |       $statement = $conn->prepare("INSERT INTO contacts (user_id, name, phone_number) VALUES ({$_SESSION['user']['id']}, :name, :phone_number)");
24 |       $statement->bindParam(":name", $_POST["name"]);
25 |       $statement->bindParam(":phone_number", $_POST["phone_number"]);
26 |       $statement->execute();
27 | 
28 |       $_SESSION["flash"] = ["message" => "Contact {$_POST['name']} added."];
29 | 
30 |       header("Location: home.php");
31 |       return;
32 |     }
33 |   }
34 | ?>
35 | 
36 | <?php require "partials/header.php" ?>
37 | 
38 | <div class="container pt-5">
39 |   <div class="row justify-content-center">
40 |     <div class="col-md-8">
41 |       <div class="card">
42 |         <div class="card-header">Add New Contact</div>
43 |         <div class="card-body">
44 |           <?php if ($error): ?>
45 |             <p class="text-danger">
46 |               <?= $error ?>
47 |             </p>
48 |           <?php endif ?>
49 |           <form method="POST" action="add.php">
50 |             <div class="mb-3 row">
51 |               <label for="name" class="col-md-4 col-form-label text-md-end">Name</label>
52 | 
53 |               <div class="col-md-6">
54 |                 <input id="name" type="text" class="form-control" name="name" autocomplete="name" autofocus>
55 |               </div>
56 |             </div>
57 | 
58 |             <div class="mb-3 row">
59 |               <label for="phone_number" class="col-md-4 col-form-label text-md-end">Phone Number</label>
60 | 
61 |               <div class="col-md-6">
62 |                 <input id="phone_number" type="tel" class="form-control" name="phone_number" autocomplete="phone_number" autofocus>
63 |               </div>
64 |             </div>
65 | 
66 |             <div class="mb-3 row">
67 |               <div class="col-md-6 offset-md-4">
68 |                 <button type="submit" class="btn btn-primary">Submit</button>
69 |               </div>
70 |             </div>
71 |           </form>
72 |         </div>
73 |       </div>
74 |     </div>
75 |   </div>
76 | </div>
77 | 
78 | <?php require "partials/footer.php" ?>
79 | 
80 | 


--------------------------------------------------------------------------------
/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $host = "localhost";
 4 | $database = "contacts_app";
 5 | $user = "root";
 6 | $password = "";
 7 | 
 8 | try {
 9 |   $conn = new PDO("mysql:host=$host;dbname=$database", $user, $password);
10 |   // foreach ($conn->query("SHOW DATABASES") as $row) {
11 |   //   print_r($row);
12 |   // }
13 |   // die();
14 | } catch (PDOException $e) {
15 |   die("PDO Connection Error: " . $e->getMessage());
16 | }
17 | 


--------------------------------------------------------------------------------
/delete.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require "database.php";
 4 | 
 5 | session_start();
 6 | 
 7 | if (!isset($_SESSION["user"])) {
 8 |   header("Location: login.php");
 9 |   return;
10 | }
11 | 
12 | $id = $_GET["id"];
13 | 
14 | $statement = $conn->prepare("SELECT * FROM contacts WHERE id = :id LIMIT 1");
15 | $statement->execute([":id" => $id]);
16 | 
17 | if ($statement->rowCount() == 0) {
18 |   http_response_code(404);
19 |   echo("HTTP 404 NOT FOUND");
20 |   return;
21 | }
22 | 
23 | $contact = $statement->fetch(PDO::FETCH_ASSOC);
24 | 
25 | if ($contact["user_id"] !== $_SESSION["user"]["id"]) {
26 |   http_response_code(403);
27 |   echo("HTTP 403 UNAUTHORIZED");
28 |   return;
29 | }
30 | 
31 | $conn->prepare("DELETE FROM contacts WHERE id = :id")->execute([":id" => $id]);
32 | 
33 | $_SESSION["flash"] = ["message" => "Contact {$contact['name']} deleted."];
34 | 
35 | header("Location: home.php");
36 | 


--------------------------------------------------------------------------------
/edit.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 |   require "database.php";
  4 | 
  5 |   session_start();
  6 | 
  7 |   if (!isset($_SESSION["user"])) {
  8 |     header("Location: login.php");
  9 |     return;
 10 |   }
 11 | 
 12 |   $id = $_GET["id"];
 13 | 
 14 |   $statement = $conn->prepare("SELECT * FROM contacts WHERE id = :id LIMIT 1");
 15 |   $statement->execute([":id" => $id]);
 16 | 
 17 |   if ($statement->rowCount() == 0) {
 18 |     http_response_code(404);
 19 |     echo("HTTP 404 NOT FOUND");
 20 |     return;
 21 |   }
 22 | 
 23 |   $contact = $statement->fetch(PDO::FETCH_ASSOC);
 24 | 
 25 |   if ($contact["user_id"] !== $_SESSION["user"]["id"]) {
 26 |     http_response_code(403);
 27 |     echo("HTTP 403 UNAUTHORIZED");
 28 |     return;
 29 |   }
 30 | 
 31 |   $error = null;
 32 | 
 33 |   if ($_SERVER["REQUEST_METHOD"] == "POST") {
 34 |     if (empty($_POST["name"]) || empty($_POST["phone_number"])) {
 35 |       $error = "Please fill all the fields.";
 36 |     } else if (strlen($_POST["phone_number"]) < 9) {
 37 |       $error = "Phone number must be at least 9 characters.";
 38 |     } else {
 39 |       $name = $_POST["name"];
 40 |       $phoneNumber = $_POST["phone_number"];
 41 | 
 42 |       $statement = $conn->prepare("UPDATE contacts SET name = :name, phone_number = :phone_number WHERE id = :id");
 43 |       $statement->execute([
 44 |         ":id" => $id,
 45 |         ":name" => $_POST["name"],
 46 |         ":phone_number" => $_POST["phone_number"],
 47 |       ]);
 48 | 
 49 |       $_SESSION["flash"] = ["message" => "Contact {$_POST['name']} updated."];
 50 | 
 51 |       header("Location: home.php");
 52 |       return;
 53 |     }
 54 |   }
 55 | ?>
 56 | 
 57 | <?php require "partials/header.php" ?>
 58 | 
 59 | <div class="container pt-5">
 60 |   <div class="row justify-content-center">
 61 |     <div class="col-md-8">
 62 |       <div class="card">
 63 |         <div class="card-header">Add New Contact</div>
 64 |         <div class="card-body">
 65 |           <?php if ($error): ?>
 66 |             <p class="text-danger">
 67 |               <?= $error ?>
 68 |             </p>
 69 |           <?php endif ?>
 70 |           <form method="POST" action="edit.php?id=<?= $contact['id'] ?>">
 71 |             <div class="mb-3 row">
 72 |               <label for="name" class="col-md-4 col-form-label text-md-end">Name</label>
 73 | 
 74 |               <div class="col-md-6">
 75 |                 <input value="<?= $contact['name'] ?>" id="name" type="text" class="form-control" name="name" autocomplete="name" autofocus>
 76 |               </div>
 77 |             </div>
 78 | 
 79 |             <div class="mb-3 row">
 80 |               <label for="phone_number" class="col-md-4 col-form-label text-md-end">Phone Number</label>
 81 | 
 82 |               <div class="col-md-6">
 83 |                 <input value="<?= $contact['phone_number'] ?>" id="phone_number" type="tel" class="form-control" name="phone_number" autocomplete="phone_number" autofocus>
 84 |               </div>
 85 |             </div>
 86 | 
 87 |             <div class="mb-3 row">
 88 |               <div class="col-md-6 offset-md-4">
 89 |                 <button type="submit" class="btn btn-primary">Submit</button>
 90 |               </div>
 91 |             </div>
 92 |           </form>
 93 |         </div>
 94 |       </div>
 95 |     </div>
 96 |   </div>
 97 | </div>
 98 | 
 99 | <?php require "partials/footer.php" ?>
100 | 
101 | 


--------------------------------------------------------------------------------
/home.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | require "database.php";
 4 | 
 5 | session_start();
 6 | 
 7 | if (!isset($_SESSION["user"])) {
 8 |   header("Location: login.php");
 9 |   return;
10 | }
11 | 
12 | $contacts = $conn->query("SELECT * FROM contacts WHERE user_id = {$_SESSION['user']['id']}");
13 | 
14 | ?>
15 | 
16 | <?php require "partials/header.php" ?>
17 | 
18 | <div class="container pt-4 p-3">
19 |   <div class="row">
20 |     
21 |     <?php if ($contacts->rowCount() == 0): ?>
22 |       <div class="col-md-4 mx-auto">
23 |         <div class="card card-body text-center">
24 |           <p>No contacts saved yet</p>
25 |           <a href="add.php">Add One!</a>
26 |         </div>
27 |       </div>
28 |     <?php endif ?>
29 |     <?php foreach ($contacts as $contact): ?>
30 |       <div class="col-md-4 mb-3">
31 |         <div class="card text-center">
32 |           <div class="card-body">
33 |             <h3 class="card-title text-capitalize"><?= $contact["name"] ?></h3>
34 |             <p class="m-2"><?= $contact["phone_number"] ?></p>
35 |             <a href="edit.php?id=<?= $contact["id"] ?>" class="btn btn-secondary mb-2">Edit Contact</a>
36 |             <a href="delete.php?id=<?= $contact["id"] ?>" class="btn btn-danger mb-2">Delete Contact</a>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     <?php endforeach ?>
41 | 
42 |   </div>
43 | </div>
44 | 
45 | <?php require "partials/footer.php" ?>
46 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php require "partials/header.php" ?>
 2 | 
 3 | <div class="welcome d-flex align-items-center justify-content-center">
 4 |   <div class="text-center">
 5 |     <h1>Store Your Contacts Now</h1>
 6 |     <a class="btn btn-lg btn-dark" href="register.php">Get Started</a>
 7 |   </div>
 8 | </div>
 9 | 
10 | <?php require "partials/footer.php" ?>
11 | 


--------------------------------------------------------------------------------
/login.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 |   require "database.php";
 4 | 
 5 |   $error = null;
 6 | 
 7 |   if ($_SERVER["REQUEST_METHOD"] == "POST") {
 8 |     if (empty($_POST["email"]) || empty($_POST["password"])) {
 9 |       $error = "Please fill all the fileds.";
10 |     } else if (!str_contains($_POST["email"], "@")) {
11 |       $error = "Email format is incorrect.";
12 |     } else {
13 |       $statement = $conn->prepare("SELECT * FROM users WHERE email = :email LIMIT 1");
14 |       $statement->bindParam(":email", $_POST["email"]);
15 |       $statement->execute();
16 | 
17 |       if ($statement->rowCount() == 0) {
18 |         $error = "Invalid credentials.";
19 |       } else {
20 |         $user = $statement->fetch(PDO::FETCH_ASSOC);
21 | 
22 |         if (!password_verify($_POST["password"], $user["password"])) {
23 |           $error = "Invalid credentials.";
24 |         } else {
25 |           session_start();
26 | 
27 |           unset($user["password"]);
28 | 
29 |           $_SESSION["user"] = $user;
30 | 
31 |           header("Location: home.php");
32 |         }
33 |       }
34 |     }
35 |   }
36 | ?>
37 | 
38 | <?php require "partials/header.php" ?>
39 | 
40 | <div class="container pt-5">
41 |   <div class="row justify-content-center">
42 |     <div class="col-md-8">
43 |       <div class="card">
44 |         <div class="card-header">Login</div>
45 |         <div class="card-body">
46 |           <?php if ($error): ?>
47 |             <p class="text-danger">
48 |               <?= $error ?>
49 |             </p>
50 |           <?php endif ?>
51 |           <form method="POST" action="login.php">
52 |             <div class="mb-3 row">
53 |               <label for="email" class="col-md-4 col-form-label text-md-end">Email</label>
54 | 
55 |               <div class="col-md-6">
56 |                 <input id="email" type="email" class="form-control" name="email" autocomplete="email" autofocus>
57 |               </div>
58 |             </div>
59 | 
60 |             <div class="mb-3 row">
61 |               <label for="password" class="col-md-4 col-form-label text-md-end">Password</label>
62 | 
63 |               <div class="col-md-6">
64 |                 <input id="password" type="password" class="form-control" name="password" autocomplete="password" autofocus>
65 |               </div>
66 |             </div>
67 | 
68 |             <div class="mb-3 row">
69 |               <div class="col-md-6 offset-md-4">
70 |                 <button type="submit" class="btn btn-primary">Submit</button>
71 |               </div>
72 |             </div>
73 |           </form>
74 |         </div>
75 |       </div>
76 |     </div>
77 |   </div>
78 | </div>
79 | 
80 | <?php require "partials/footer.php" ?>
81 | 
82 | 


--------------------------------------------------------------------------------
/logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | session_start();
4 | session_destroy();
5 | header("Location: index.php");
6 | 


--------------------------------------------------------------------------------
/partials/footer.php:
--------------------------------------------------------------------------------
1 |     </main>
2 |   </body>
3 | </html>
4 | 


--------------------------------------------------------------------------------
/partials/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |   <!-- Bootstrap -->
 9 |   <link
10 |     rel="stylesheet"
11 |     href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/darkly/bootstrap.min.css"
12 |     integrity="sha512-ZdxIsDOtKj2Xmr/av3D/uo1g15yxNFjkhrcfLooZV5fW0TT7aF7Z3wY1LOA16h0VgFLwteg14lWqlYUQK3to/w=="
13 |     crossorigin="anonymous"
14 |     referrerpolicy="no-referrer"
15 |   />
16 |   <script
17 |     defer
18 |     src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
19 |     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
20 |     crossorigin="anonymous"
21 |   ></script>
22 | 
23 |   <!-- Static Content -->
24 |   <link rel="stylesheet" href="./static/css/index.css" />
25 |   <?php $uri = parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH) ?>
26 |   <?php if ($uri == "/contacts-app/" || $uri == "/contacts-app/index.php"): ?>
27 |     <script defer src="./static/js/welcome.js"></script>
28 |   <?php endif ?>
29 | 
30 |   <title>Contacts App</title>
31 | </head>
32 | <body>
33 |   <?php require "navbar.php" ?>
34 | 
35 |   
36 |   <?php if (isset($_SESSION["flash"])): ?>
37 |     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
38 |       <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
39 |         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
40 |       </symbol>
41 |     </svg>
42 | 
43 |     <div class="container mt-4">
44 |       <div class="alert alert-success d-flex align-items-center" role="alert">
45 |         <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
46 |         <div class="ml-2">
47 |           <?= $_SESSION["flash"]["message"] ?>
48 |         </div>
49 |       </div>
50 |     </div>
51 |     <?php unset($_SESSION["flash"]) ?>
52 |   <?php endif ?>
53 | 
54 | 
55 |   <main>
56 |     <!-- Content Here -->
57 | 


--------------------------------------------------------------------------------
/partials/navbar.php:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 2 |   <div class="container-fluid">
 3 |     <a class="navbar-brand font-weight-bold" href="index.php">
 4 |       <img class="mr-2" src="./static/img/logo.png" />
 5 |       ContactsApp
 6 |     </a>
 7 |     <button
 8 |       class="navbar-toggler"
 9 |       type="button"
10 |       data-bs-toggle="collapse"
11 |       data-bs-target="#navbarNav"
12 |       aria-controls="navbarNav"
13 |       aria-expanded="false"
14 |       aria-label="Toggle navigation"
15 |     >
16 |       <span class="navbar-toggler-icon"></span>
17 |     </button>
18 |     <div class="collapse navbar-collapse" id="navbarNav">
19 |       <div class="d-flex justify-content-between w-100">
20 |         <ul class="navbar-nav">
21 |           <?php if (isset($_SESSION["user"])): ?>
22 |             <li class="nav-item">
23 |               <a class="nav-link" href="home.php">Home</a>
24 |             </li>
25 |             <li class="nav-item">
26 |               <a class="nav-link" href="add.php">Add Contact</a>
27 |             </li>
28 |             <li class="nav-item">
29 |               <a class="nav-link" href="logout.php">Logout</a>
30 |             </li>
31 |           <?php else: ?>
32 |             <li class="nav-item">
33 |               <a class="nav-link" href="register.php">Register</a>
34 |             </li>
35 |             <li class="nav-item">
36 |               <a class="nav-link" href="login.php">Login</a>
37 |             </li>
38 |           <?php endif ?>
39 |         </ul>
40 |         <?php if (isset($_SESSION["user"])): ?>
41 |           <div class="p-2">
42 |             <?= $_SESSION["user"]["email"] ?>
43 |           </div>
44 |         <?php endif ?>
45 |       </div>
46 |     </div>
47 |   </div>
48 | </nav>
49 | 


--------------------------------------------------------------------------------
/register.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 |   require "database.php";
 4 | 
 5 |   $error = null;
 6 | 
 7 |   if ($_SERVER["REQUEST_METHOD"] == "POST") {
 8 |     if (empty($_POST["name"]) || empty($_POST["email"]) || empty($_POST["password"])) {
 9 |       $error = "Please fill all the fileds.";
10 |     } else if (!str_contains($_POST["email"], "@")) {
11 |       $error = "Email format is incorrect.";
12 |     } else {
13 |       $statement = $conn->prepare("SELECT * FROM users WHERE email = :email");
14 |       $statement->bindParam(":email", $_POST["email"]);
15 |       $statement->execute();
16 | 
17 |       if ($statement->rowCount() > 0) {
18 |         $error = "This email is taken.";
19 |       } else {
20 |         $conn
21 |           ->prepare("INSERT INTO users (name, email, password) VALUES (:name, :email, :password)")
22 |           ->execute([
23 |             ":name" => $_POST["name"],
24 |             ":email" => $_POST["email"],
25 |             ":password" => password_hash($_POST["password"], PASSWORD_BCRYPT),
26 |           ]);
27 | 
28 |           $statement = $conn->prepare("SELECT * FROM users WHERE email = :email LIMIT 1");
29 |           $statement->bindParam(":email", $_POST["email"]);
30 |           $statement->execute();
31 |           $user = $statement->fetch(PDO::FETCH_ASSOC);
32 | 
33 |           session_start();
34 |           $_SESSION["user"] = $user;
35 | 
36 |           header("Location: home.php");
37 |       }
38 |     }
39 |   }
40 | ?>
41 | 
42 | <?php require "partials/header.php" ?>
43 | 
44 | <div class="container pt-5">
45 |   <div class="row justify-content-center">
46 |     <div class="col-md-8">
47 |       <div class="card">
48 |         <div class="card-header">Register</div>
49 |         <div class="card-body">
50 |           <?php if ($error): ?>
51 |             <p class="text-danger">
52 |               <?= $error ?>
53 |             </p>
54 |           <?php endif ?>
55 |           <form method="POST" action="register.php">
56 |             <div class="mb-3 row">
57 |               <label for="name" class="col-md-4 col-form-label text-md-end">Name</label>
58 | 
59 |               <div class="col-md-6">
60 |                 <input id="name" type="text" class="form-control" name="name" autocomplete="name" autofocus>
61 |               </div>
62 |             </div>
63 | 
64 |             <div class="mb-3 row">
65 |               <label for="email" class="col-md-4 col-form-label text-md-end">Email</label>
66 | 
67 |               <div class="col-md-6">
68 |                 <input id="email" type="email" class="form-control" name="email" autocomplete="email" autofocus>
69 |               </div>
70 |             </div>
71 | 
72 |             <div class="mb-3 row">
73 |               <label for="password" class="col-md-4 col-form-label text-md-end">Password</label>
74 | 
75 |               <div class="col-md-6">
76 |                 <input id="password" type="password" class="form-control" name="password" autocomplete="password" autofocus>
77 |               </div>
78 |             </div>
79 | 
80 |             <div class="mb-3 row">
81 |               <div class="col-md-6 offset-md-4">
82 |                 <button type="submit" class="btn btn-primary">Submit</button>
83 |               </div>
84 |             </div>
85 |           </form>
86 |         </div>
87 |       </div>
88 |     </div>
89 |   </div>
90 | </div>
91 | 
92 | <?php require "partials/footer.php" ?>
93 | 
94 | 


--------------------------------------------------------------------------------
/sql/setup.sql:
--------------------------------------------------------------------------------
 1 | DROP DATABASE IF EXISTS contacts_app;
 2 | 
 3 | CREATE DATABASE contacts_app;
 4 | 
 5 | USE contacts_app;
 6 | 
 7 | CREATE TABLE users (
 8 |     id INT AUTO_INCREMENT PRIMARY KEY,
 9 |     name VARCHAR(255),
10 |     email VARCHAR(255) UNIQUE,
11 |     password VARCHAR(255)
12 | );
13 | 
14 | CREATE TABLE contacts (
15 |     id INT AUTO_INCREMENT PRIMARY KEY,
16 |     name VARCHAR(255),
17 |     user_id INT NOT NULL,
18 |     phone_number VARCHAR(255),
19 | 
20 |     FOREIGN KEY (user_id) REFERENCES users(id)
21 | );
22 | 


--------------------------------------------------------------------------------
/static/css/index.css:
--------------------------------------------------------------------------------
 1 | .navbar img {
 2 |     width: 1.2rem;
 3 | }
 4 | 
 5 | .welcome {
 6 |     background: url('/contacts-app/static/img/background.jpg');
 7 |     background-position: center center;
 8 |     background-size: cover;
 9 | }
10 | 


--------------------------------------------------------------------------------
/static/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-php/ca39aed8034f9dfa33c4afc88047614659868210/static/img/background.jpg


--------------------------------------------------------------------------------
/static/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-php/ca39aed8034f9dfa33c4afc88047614659868210/static/img/logo.png


--------------------------------------------------------------------------------
/static/js/welcome.js:
--------------------------------------------------------------------------------
 1 | const navbar = document.querySelector(".navbar");
 2 | const welcome = document.querySelector(".welcome");
 3 | const navbarToggle = document.querySelector("#navbarNav");
 4 | 
 5 | const resizeBakgroundImg = () => {
 6 |   const height = window.innerHeight - navbar.clientHeight;
 7 |   welcome.style.height = `${height}px`;
 8 | };
 9 | 
10 | 
11 | navbarToggle.ontransitionend = resizeBakgroundImg;
12 | navbarToggle.ontransitionstart = resizeBakgroundImg;
13 | window.onresize = resizeBakgroundImg;
14 | window.onload = resizeBakgroundImg;
15 | 


--------------------------------------------------------------------------------