assembler-institute · jesusfvj · Dec 23, 2022
diff --git a/app.js b/app.js
@@ -0,0 +1,73 @@
+const gradients = document.getElementsByClassName("gradients");
+let x;
+let y;
+let intervalDecrement;
+let intervalCrement;
+let firstTime = true;
+let arrayRgbaSaveBefore = [];
+let randomNumbersThatSum100 = []
+
+
+window.setInterval(changeGradient, 4000);
+
+function changeGradient() {
+    x = 1;
+    y = 0;
+    arrayRgba = getRandomNumbers();
+    randomNumbersThatSum100 = getRandomNumbersThatSum100();
+    intervalDecrement = setInterval(gradientSwitchOpacityOne, 30);
+    gradientSwitchOpacityOne();
+}
+
+function gradientSwitchOpacityOne() {
+     if (firstTime == false) {
+        gradients[0].style.background = "linear-gradient(135deg, rgba(" + arrayRgbaSaveBefore[33] + "," + arrayRgbaSaveBefore[34] + "," + arrayRgbaSaveBefore[35] + "," + x + ")" + Sum100SaveBefore[0] + "%, rgba(" + arrayRgbaSaveBefore[36] + "," + arrayRgbaSaveBefore[37] + "," + arrayRgbaSaveBefore[38] + "," + x + ")" + Sum100SaveBefore[1] + "%, rgba(" + arrayRgbaSaveBefore[39] + "," + arrayRgbaSaveBefore[40] + "," + arrayRgbaSaveBefore[41] + "," + x + ")" + Sum100SaveBefore[2] + "%, rgba(" + arrayRgbaSaveBefore[42] + "," + arrayRgbaSaveBefore[43] + "," + arrayRgbaSaveBefore[44] + "," + x + ")" + Sum100SaveBefore[3] + "%, rgba(" + arrayRgbaSaveBefore[45] + "," + arrayRgbaSaveBefore[46] + "," + arrayRgbaSaveBefore[47] + "," + x + ")" + Sum100SaveBefore[4] + "%, rgba(" + arrayRgbaSaveBefore[48] + "," + arrayRgbaSaveBefore[49] + "," + arrayRgbaSaveBefore[50] + "," + x + ")" + Sum100SaveBefore[5] + "%, rgba(" + arrayRgbaSaveBefore[51] + "," + arrayRgbaSaveBefore[52] + "," + arrayRgbaSaveBefore[53] + "," + x + ")" + Sum100SaveBefore[6] + "%, rgba(" + arrayRgbaSaveBefore[54] + "," + arrayRgbaSaveBefore[55] + "," + arrayRgbaSaveBefore[56] + "," + x + ")" + Sum100SaveBefore[7] + "%, rgba(" + arrayRgbaSaveBefore[57] + "," + arrayRgbaSaveBefore[58] + "," + arrayRgbaSaveBefore[59] + "," + x + ")" + Sum100SaveBefore[8] + "%, rgba(" + arrayRgbaSaveBefore[60] + "," + arrayRgbaSaveBefore[61] + "," + arrayRgbaSaveBefore[62] + "," + x + ")" + Sum100SaveBefore[9] + "%, rgba(" + arrayRgbaSaveBefore[63] + "," + arrayRgbaSaveBefore[64] + "," + arrayRgbaSaveBefore[65] + "," + x + ")" + Sum100SaveBefore[10] + "%)";
+        gradients[1].style.background = "linear-gradient(135deg, rgba(" + arrayRgba[33] + "," + arrayRgba[34] + "," + arrayRgba[35] + "," + y + ")" + randomNumbersThatSum100[0] + "%, rgba(" + arrayRgba[36] + "," + arrayRgba[37] + "," + arrayRgba[38] + "," + y + ")" + randomNumbersThatSum100[1] + "%, rgba(" + arrayRgba[39] + "," + arrayRgba[40] + "," + arrayRgba[41] + "," + y + ")" + randomNumbersThatSum100[2] + "%, rgba(" + arrayRgba[42] + "," + arrayRgba[43] + "," + arrayRgba[44] + "," + y + ")" + randomNumbersThatSum100[3] + "%, rgba(" + arrayRgba[45] + "," + arrayRgba[46] + "," + arrayRgba[47] + "," + y + ")" + randomNumbersThatSum100[4] + "%, rgba(" + arrayRgba[48] + "," + arrayRgba[49] + "," + arrayRgba[50] + "," + y + ")" + randomNumbersThatSum100[5] + "%, rgba(" + arrayRgba[51] + "," + arrayRgba[52] + "," + arrayRgba[53] + "," + y + ")" + randomNumbersThatSum100[6] + "%, rgba(" + arrayRgba[54] + "," + arrayRgba[55] + "," + arrayRgba[56] + "," + y + ")" + randomNumbersThatSum100[7] + "%, rgba(" + arrayRgba[57] + "," + arrayRgba[58] + "," + arrayRgba[59] + "," + y + ")" + randomNumbersThatSum100[8] + "%, rgba(" + arrayRgba[60] + "," + arrayRgba[61] + "," + arrayRgba[62] + "," + y + ")" + randomNumbersThatSum100[9] + "%, rgba(" + arrayRgba[63] + "," + arrayRgba[64] + "," + arrayRgba[65] + "," + y + ")" + randomNumbersThatSum100[10] + "%)";
+    }
+    if (firstTime == true) {
+        gradients[0].style.background = "linear-gradient(135deg, rgba(2,0,36," + x + ") 0%, rgba(8,255,0," + x + ") 10%, rgba(255,130,0," + x + ") 20%, rgba(3,0,255," + x + ") 30%, rgba(93,74,6," + x + ") 40%, rgba(255,0,0," + x + ") 50%, rgba(40,0,157," + x + ") 60%, rgba(2,153,215," + x + ") 70%, rgba(116,105,80," + x + ") 80%, rgba(1,196,244," + x + ") 90%, rgba(0,212,255," + x + ") 100%)";
+        gradients[1].style.background = "linear-gradient(135deg, rgba(" + arrayRgba[33] + "," + arrayRgba[34] + "," + arrayRgba[35] + "," + y + ")" + randomNumbersThatSum100[0] + "%, rgba(" + arrayRgba[36] + "," + arrayRgba[37] + "," + arrayRgba[38] + "," + y + ")" + randomNumbersThatSum100[1] + "%, rgba(" + arrayRgba[39] + "," + arrayRgba[40] + "," + arrayRgba[41] + "," + y + ")" + randomNumbersThatSum100[2] + "%, rgba(" + arrayRgba[42] + "," + arrayRgba[43] + "," + arrayRgba[44] + "," + y + ")" + randomNumbersThatSum100[3] + "%, rgba(" + arrayRgba[45] + "," + arrayRgba[46] + "," + arrayRgba[47] + "," + y + ")" + randomNumbersThatSum100[4] + "%, rgba(" + arrayRgba[48] + "," + arrayRgba[49] + "," + arrayRgba[50] + "," + y + ")" + randomNumbersThatSum100[5] + "%, rgba(" + arrayRgba[51] + "," + arrayRgba[52] + "," + arrayRgba[53] + "," + y + ")" + randomNumbersThatSum100[6] + "%, rgba(" + arrayRgba[54] + "," + arrayRgba[55] + "," + arrayRgba[56] + "," + y + ")" + randomNumbersThatSum100[7] + "%, rgba(" + arrayRgba[57] + "," + arrayRgba[58] + "," + arrayRgba[59] + "," + y + ")" + randomNumbersThatSum100[8] + "%, rgba(" + arrayRgba[60] + "," + arrayRgba[61] + "," + arrayRgba[62] + "," + y + ")" + randomNumbersThatSum100[9] + "%, rgba(" + arrayRgba[63] + "," + arrayRgba[64] + "," + arrayRgba[65] + "," + y + ")" + randomNumbersThatSum100[10] + "%)";
+    }
+    x -= 0.01;
+    y += 0.01;
+    console.log({x});
+    if (x <= 0) {
+        firstTime = false;
+        arrayRgbaSaveBefore = arrayRgba.map((x) => x);
+        Sum100SaveBefore = randomNumbersThatSum100.map((x) => x);
+        deleteInterval();
+    }
+}
+
+function deleteInterval() {
+    clearInterval(intervalDecrement);
+}
+
+function getRandomNumbers() {
+    let arrayRgba = [];
+    for (let i = 0; i < 66; i++) {
+        arrayRgba.push(Math.floor(Math.random() * 255));
+    }
+   /*  for (let i = 0; i < arrayRgba.length; i++) {
+        arrayRgba[i] = Math.floor(Math.random() * 255);
+    } */
+    return arrayRgba;
+}
+
+function getRandomNumbersThatSum100() {
+    let sum = 100;
+    let i;
+    randomNumbersThatSum100 = []
+    for (i = 0; i < 11; i++) {
+        const randomNumber = Math.floor(Math.random() * (15 - 5 + 1) + 8)
+        sum -= randomNumber < 0 ? 0 : randomNumber
+        if (i != 0) {
+            randomNumbersThatSum100.push(randomNumber < 0 ? 0 : randomNumber + randomNumbersThatSum100[i - 1])
+        } else {
+            randomNumbersThatSum100.push(randomNumber < 0 ? 0 : randomNumber)
+        }
+    }
+    /* randomNumbersThatSum100.push(sum) */
+    /* console.log(randomNumbersThatSum100, randomNumbersThatSum100.reduce((a, b) => a + b, 0)) */
+    return randomNumbersThatSum100;
+}
diff --git a/close_session.php b/close_session.php
@@ -0,0 +1,6 @@
+<?php
+    session_start();
+    session_unset();
+    session_destroy();
+    header("Location: index.php");
+?>
diff --git a/index.php b/index.php
@@ -0,0 +1,45 @@
+<?php
+    session_start();
+    if(isset($_SESSION["username"]))header("Location: panel.php");
+    else{
+        session_unset();
+        session_destroy();
+    }
+    ?>
+<!DOCTYPE html>
+<html lang="en" class="gradients">
+    <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">
+        <script src="app.js" defer></script>
+        <link rel="stylesheet" href="styles.css?v=<?php echo time(); ?>">
+        <title>Log in</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=Bebas+Neue&display=swap" rel="stylesheet">
+    </head>
+    <div id="gradientParent" class="gradients">
+        <body>
+            <main>
+                <svg id="semiCircleContainer" viewBox="0 0 900 370">
+                    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
+                        <text width="500">
+                            <textPath alignment-baseline="top" xlink:href="#curve">
+                            <?php
+                                if(isset($_REQUEST["errorInvalid"]))echo $_REQUEST["errorInvalid"];
+                                if(isset($_REQUEST["errorTwo"]))echo $_REQUEST["errorTwo"];
+                                if(isset($_REQUEST["errorVoid"]))echo $_REQUEST["errorVoid"];
+                            ?>
+                        </textPath>
+                    </text>
+                </svg>
+                <form id="form" action="validate.php" method="POST">
+                    <input id="usernameInput" type="text" name="username">
+                    <label class="label" for="usernameInput">Introduce your username</label>
+                    <input id="passwordInput" type="password" name="password">
+                    <label class="label" for="passwordInput">Introduce your password</label>
+                    <button id="buttonLogIn" type="submit">Log in</button>
+                </form>
+            </main>
+        </body>
+    </div>
+</html>
diff --git a/panel.php b/panel.php
@@ -0,0 +1,23 @@
+<?php
+    session_start();
+    if(!isset($_SESSION["username"]))header("Location: index.php?errorTwo=This is a private area.You need validated access.")
+?>
+<!DOCTYPE html>
+<html lang="en" class="gradients">
+    <head>
+        <script src="app.js" defer></script>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="stylesheet" href="styles.css?v=<?php echo time(); ?>">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Logged</title>
+    </head>
+    <div id="gradientParentTwo" class="gradients">
+        <body id="bodyPanel">
+            <h1>GENERATE YOUR GRADIENT</h1>
+            <a href="close_session.php">
+                <button>Unlog</button>
+            </a>
+        </body>
+    </div>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,148 @@
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Bebas Neue', cursive;
+}
+
+.gradients {
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(135deg, rgba(2, 0, 36, 1) 0%, rgba(8, 255, 0, 1) 10%, rgba(255, 130, 0, 1) 20%, rgba(3, 0, 255, 1) 30%, rgba(93, 74, 6, 1) 40%, rgba(255, 0, 0, 1) 50%, rgba(40, 0, 157, 1) 60%, rgba(2, 153, 215, 1) 70%, rgba(116, 105, 80, 1) 80%, rgba(1, 196, 244, 1) 90%, rgba(0, 212, 255, 1) 100%);
+}
+
+#gradientParent {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    display: flex;
+    justify-content: center;
+}
+
+body {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+main {
+    max-width: 1025px;
+    width: 60%;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+#form {
+    width: 14rem;
+    height: 14rem;
+    padding: 5rem;
+    border-radius: 50% 50%;
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 2.5px );
+    -webkit-backdrop-filter: blur( 2.5px );
+    display: grid;
+    justify-content: center;
+    grid-template-rows: auto auto auto auto;
+}
+
+.label {
+    text-align: center;
+    margin: 0.7rem 0;
+    letter-spacing: 0.1rem;
+    color: white;
+}
+
+#usernameInput{
+    background-color: rgba( 255, 255, 255, 0.25 );
+    text-align: center;
+    border: none;
+    height: 3rem;
+    width: 12rem;
+    margin: 0 auto;
+    border-top-left-radius: 100% 100px;
+    border-top-right-radius: 100% 100px;
+    color: white;
+    font-family: 'Bebas Neue', cursive;
+    letter-spacing: 0.1rem;
+}
+
+#passwordInput{
+    background-color: rgba( 255, 255, 255, 0.25 );
+    text-align: center;
+    border: none;
+    height: 2.5rem;
+    width: 13rem;
+    color: white;
+    border-top-left-radius: 3% 45px;
+    border-bottom-left-radius: 3% 45px;
+    border-top-right-radius: 3% 45px;
+    border-bottom-right-radius: 3% 45px;
+    font-family: 'Bebas Neue', cursive;
+    letter-spacing: 0.1rem;
+}
+
+#buttonLogIn{
+    letter-spacing: 0.1rem;
+    background-color: rgba( 255, 255, 255, 0.25 );
+    border: none;
+    text-align: center;
+    height: 3rem;
+    width: 12rem;
+    margin: 0 auto;
+    border-bottom-left-radius: 100% 100px;
+    border-bottom-right-radius: 100% 100px;
+    font-family: 'Bebas Neue', cursive;
+    color: white;
+}
+
+#buttonLogIn:hover{
+    color: black;
+    background-color: rgba( 255, 255, 255, 0.5 );
+    transition: 0.3s;
+}
+
+textarea:focus, input:focus{
+    outline: none;
+}
+
+textPath{
+font-size: 1rem;
+}
+
+path {
+  fill: transparent;
+
+}
+
+text {
+    fill: #ff0000;
+}
+
+#semiCircleContainer{
+    position: fixed;
+    left: 31vw;
+    bottom: 35vh;
+}
+
+#gradientParentTwo{
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    display: flex;
+    justify-content: center;
+}
+
+#bodyPanel{
+    background-color: rgb(102, 37, 37);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/validate.php b/validate.php
@@ -0,0 +1,15 @@
+<?php
+    $username = "hola";
+    $password = 1;
+
+    if($_REQUEST['username']==$username && $_REQUEST['password']==$password){
+        session_start();
+        $_SESSION['username'] = $_REQUEST['username'];
+        header("Location:panel.php");
+    }
+    else if($_REQUEST['username']=="" && $_REQUEST['password']==""){
+        header("Location:index.php?errorVoid=Fill in the username and password fields");
+    } else {
+        header("Location:index.php?errorInvalid=Invalid username and password fields");
+    }
+?>