assembler-institute · MiquelAbella · Dec 22, 2022 · Dec 22, 2022 · Dec 22, 2022 · Dec 22, 2022
diff --git a/assets/vstShop.jpg b/assets/vstShop.jpg
diff --git a/exercises/server_variables.php b/exercises/server_variables.php
@@ -0,0 +1,15 @@
+<?php 
+
+session_start();
+
+$_SESSION['browser'] = $_SERVER['HTTP_USER_AGENT'];
+$_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
+$_SESSION['time'] = time();
+
+
+echo "<pre>";
+print_r($_SESSION);
+echo "</pre>";
+
+echo php_ini_loaded_file();
+
diff --git a/index.php b/index.php
@@ -0,0 +1,39 @@
+<?php
+require_once("./modules/sessioncontrol.php");
+checkUser();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <form id="login-form" action="./modules/login.php" method="POST">
+            <label for="email">3mail</label>
+            <input required type="email" name="email" id="email">
+            <label for="password">P4ss</label>
+            <input required type="password" name="password" id="password">
+            <button type="submit">Enter</button>
+        </form>
+    </header>
+    <main id="login-section">
+        <h1 id="title" class="title">WORK SP4C3</h1>
+        <h2 id="subtitle" class="subtitle">Do your magic</h2>
+        <?php
+        checkLoginError();
+        ?>
+    </main>
+</body>
+
+</html>
diff --git a/modules/login.php b/modules/login.php
@@ -0,0 +1,4 @@
+<?php
+
+require_once("sessioncontrol.php");
+loginUser();
diff --git a/modules/logout.php b/modules/logout.php
@@ -0,0 +1,4 @@
+<?php 
+require_once("sessioncontrol.php");
+destroySession();
+?>
diff --git a/modules/sessioncontrol.php b/modules/sessioncontrol.php
@@ -0,0 +1,61 @@
+<?php
+
+function loginUser()
+{
+    session_start();
+
+    $emaildb = '[email protected]';
+    $passworddb = 'm';
+
+    $email = $_REQUEST['email'];
+    $password = $_REQUEST['password'];
+
+    if ($email === $emaildb && $password === $passworddb) {
+        $_SESSION['email'] = $email;
+        header('Location: ../panel.php');
+    } else {
+        header('Location: ../index.php?error=notvalidlogin');
+    }
+}
+
+function checkSession()
+{
+    session_start();
+
+    if (!isset($_SESSION['email'])) {
+        header('Location: index.php?notallowed=true');
+    }
+}
+
+function destroySession()
+{
+    session_start();
+
+    unset($_SESSION["email"]);
+
+    header('Location: ../index.php');
+}
+
+function checkUser()
+{
+    session_start();
+
+    if (isset($_SESSION['email'])) {
+        header("Location: panel.php");
+    }
+}
+
+function checkLoginError()
+{
+    if (isset($_GET['error'])) {
+        echo "<div class='error'>
+        <p>INCORR3CT LOGIN</p>
+        </div>";
+    }
+    if (isset($_GET['notallowed'])) {
+        echo "<div class='error'>
+        <p>YOU TRI3D TO ACC3SS A PRIV4TE P4G3</p>
+        </div>";
+    }
+}
+
diff --git a/panel.php b/panel.php
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Panel</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <?php
+    require_once("./modules/sessioncontrol.php");
+    checkSession();
+    ?>
+    <main class="panel-main">
+        <header class="logout-form">
+            <p class="greet"> Hi, <?php echo $_SESSION['email'] ?> </p>
+            <form action="./modules/logout.php">
+                <button id="logout-btn">Logout</button>
+            </form>
+        </header>
+        <h2 class="greet">Start a project</h2>
+        <section class="projects-container">
+            <div class="project">
+                <p>+</p>
+            </div>
+            <div class="project">
+                <p>+</p>
+            </div>
+            <div class="project">
+                <p>+</p>
+            </div>
+        </section>
+    </main>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,177 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background-image: url("./assets/vstShop.jpg");
+  background-position: top;
+}
+
+header {
+  height: 8%;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+#login-section {
+  height: 92%;
+  width: 100vw;
+}
+
+.title {
+  font-family: "MuseoModerno", cursive;
+  color: rgb(230, 230, 230, 0.75);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 6vw;
+}
+
+.subtitle {
+  font-family: "MuseoModerno", cursive;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 2vw;
+  background-image: url(https://ia800704.us.archive.org/6/items/jajam943_gmail_19/1%20%281%29.gif);
+  background-size: cover;
+  background-position: center;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.greet {
+  font-family: "MuseoModerno", cursive;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 2vw;
+  color: rgb(230, 230, 230, 0.75);
+}
+
+#login-form {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+}
+
+#login-form input,
+#login-form label {
+  font-size: 1em;
+  font-family: "MuseoModerno", cursive;
+  color: rgb(230, 230, 230, 0.75);
+  font-size: clamp(15px, 2vw, 50px);
+}
+
+#login-form input {
+  font-family: "MuseoModerno", cursive;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  border-bottom: 1px solid rgb(230, 230, 230, 0.75);
+}
+
+#login-form button {
+  font-family: "MuseoModerno", cursive;
+  width: 10vw;
+  font-size: 1.5em;
+  border: 1px solid rgb(230, 230, 230, 0.75);
+  color: rgb(230, 230, 230, 0.75);
+  outline: none;
+  background-color: transparent;
+  border-radius: 12px;
+  cursor: pointer;
+  transition-duration: 0.3s;
+}
+
+#login-form button:hover {
+  background-color: rgb(230, 230, 230, 0.75);
+  border: 1px solid transparent;
+}
+
+.error {
+  position: absolute;
+  bottom: 0;
+  background-color: rgb(230, 230, 230, 0.75);
+  width: 100%;
+  font-family: "MuseoModerno", cursive;
+  color: rgba(0, 0, 0, 0.75);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 2vw;
+}
+
+.panel-main {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logout-form {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+}
+
+#logout-btn {
+  font-family: "MuseoModerno", cursive;
+  width: 10vw;
+  font-size: 1.5em;
+  border: 1px solid rgb(230, 230, 230, 0.75);
+  color: rgb(230, 230, 230, 0.75);
+  outline: none;
+  background-color: transparent;
+  border-radius: 12px;
+  cursor: pointer;
+  transition-duration: 0.3s;
+}
+
+#logout-btn:hover {
+  background-color: rgb(230, 230, 230, 0.75);
+  border: 1px solid transparent;
+}
+
+.projects-container {
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.project {
+  cursor: pointer;
+  height: 40vh;
+  width: 40vh;
+  background-color: rgb(230, 230, 230, 0.5);
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-duration: 0.3s;
+}
+
+.project:hover {
+  transform: scale(0.995);
+}
+
+.project p {
+  cursor: pointer;
+  font-family: "MuseoModerno", cursive;
+  color: rgb(230, 230, 230, 0.75);
+  font-size: 150px;
+}