Merge pull request #6 from ricardogj08/singUp

Registro

assets/images/background-form.svg

@@ -0,0 +1,71 @@
+<svg width="375" height="812" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.5718 132.833L26.7861 268.667H80.3575L53.5718 132.833Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M53.5718 132.833L80.3575 -3H26.7861L53.5718 132.833Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M107.143 132.833L133.929 -3H80.3571L107.143 132.833Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M160.714 132.833L133.929 268.667H187.5L160.714 132.833Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M160.714 132.833L187.5 -3H133.929L160.714 132.833Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M214.286 132.833L187.5 268.667H241.071L214.286 132.833Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M214.286 132.833L241.071 -3H187.5L214.286 132.833Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M267.857 132.833L241.071 268.667H294.643L267.857 132.833Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M267.857 132.833L294.643 -3H241.071L267.857 132.833Z" fill="white" fill-opacity="0.1"/>
+<path d="M321.429 132.833L294.643 268.667H348.214L321.429 132.833Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M321.429 132.833L348.214 -3H294.643L321.429 132.833Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M53.5718 404.5L26.7861 540.333H80.3575L53.5718 404.5Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M53.5718 404.5L80.3575 268.667H26.7861L53.5718 404.5Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M107.143 404.5L80.3571 540.333H133.929L107.143 404.5Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M107.143 404.5L133.929 268.667H80.3571L107.143 404.5Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M160.714 404.5L133.929 540.333H187.5L160.714 404.5Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M160.714 404.5L187.5 268.667H133.929L160.714 404.5Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M214.286 404.5L187.5 540.333H241.071L214.286 404.5Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M214.286 404.5L241.071 268.667H187.5L214.286 404.5Z" fill="white" fill-opacity="0.1"/>
+<path d="M267.857 404.5L241.071 540.333H294.643L267.857 404.5Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M267.857 404.5L294.643 268.667H241.071L267.857 404.5Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M321.429 404.5L294.643 540.333H348.214L321.429 404.5Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M321.429 404.5L348.214 268.667H294.643L321.429 404.5Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M53.5718 676.167L26.7861 812H80.3575L53.5718 676.167Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M107.143 676.167L80.3571 812H133.929L107.143 676.167Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M107.143 676.167L133.929 540.333H80.3571L107.143 676.167Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M160.714 676.167L187.5 540.333H133.929L160.714 676.167Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M214.286 676.167L187.5 812H241.071L214.286 676.167Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M214.286 676.167L241.071 540.333H187.5L214.286 676.167Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M267.857 676.167L241.071 812H294.643L267.857 676.167Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M267.857 676.167L294.643 540.333H241.071L267.857 676.167Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M321.429 676.167L294.643 812H348.214L321.429 676.167Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M80.3572 -3L53.5714 132.833H107.143L80.3572 -3Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M133.929 -3L107.143 132.833H160.714L133.929 -3Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M187.5 -3L160.715 132.833H214.286L187.5 -3Z" fill="white" fill-opacity="0.1"/>
+<path d="M294.643 -3L267.857 132.833H321.428L294.643 -3Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M26.7857 268.667L0 404.5H53.5714L26.7857 268.667Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M26.7857 268.667L53.5714 132.833H0L26.7857 268.667Z" fill="white" fill-opacity="0.1"/>
+<path d="M80.3572 268.667L53.5714 404.5H107.143L80.3572 268.667Z" fill="white" fill-opacity="0.1"/>
+<path d="M80.3572 268.667L107.143 132.833H53.5714L80.3572 268.667Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M133.929 268.667L107.143 404.5H160.714L133.929 268.667Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M133.929 268.667L160.714 132.833H107.143L133.929 268.667Z" fill="white" fill-opacity="0.1"/>
+<path d="M187.5 268.667L160.715 404.5H214.286L187.5 268.667Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M187.5 268.667L214.286 132.833H160.715L187.5 268.667Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M241.071 268.667L214.285 404.5H267.857L241.071 268.667Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M241.071 268.667L267.857 132.833H214.285L241.071 268.667Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M294.643 268.667L267.857 404.5H321.428L294.643 268.667Z" fill="white" fill-opacity="0.1"/>
+<path d="M294.643 268.667L321.428 132.833H267.857L294.643 268.667Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M26.7857 540.333L0 676.167H53.5714L26.7857 540.333Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M26.7857 540.333L53.5714 404.5H0L26.7857 540.333Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M80.3572 540.333L53.5714 676.167H107.143L80.3572 540.333Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M80.3572 540.333L107.143 404.5H53.5714L80.3572 540.333Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M133.929 540.333L107.143 676.167H160.714L133.929 540.333Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M133.929 540.333L160.714 404.5H107.143L133.929 540.333Z" fill="#999999" fill-opacity="0.1"/>
+<path d="M187.5 540.333L214.286 404.5H160.715L187.5 540.333Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M241.071 540.333L214.285 676.167H267.857L241.071 540.333Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M294.643 540.333L267.857 676.167H321.428L294.643 540.333Z" fill="white" fill-opacity="0.1"/>
+<path d="M294.643 540.333L321.428 404.5H267.857L294.643 540.333Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M26.7857 812L53.5714 676.167H0L26.7857 812Z" fill="#DDDDDD" fill-opacity="0.1"/>
+<path d="M80.3572 812L107.143 676.167H53.5714L80.3572 812Z" fill="#444444" fill-opacity="0.1"/>
+<path d="M133.929 812L160.714 676.167H107.143L133.929 812Z" fill="white" fill-opacity="0.1"/>
+<path d="M187.5 812L214.286 676.167H160.715L187.5 812Z" fill="#AAAAAA" fill-opacity="0.1"/>
+<path d="M241.071 812L267.857 676.167H214.285L241.071 812Z" fill="white" fill-opacity="0.1"/>
+<path d="M294.643 812L321.428 676.167H267.857L294.643 812Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M348.214 268.667L321.428 404.5H375L348.214 268.667Z" fill="#222222" fill-opacity="0.1"/>
+<path d="M348.214 268.667L375 132.833H321.428L348.214 268.667Z" fill="white" fill-opacity="0.1"/>
+<path d="M348.214 540.333L321.428 676.167H375L348.214 540.333Z" fill="#282B39" fill-opacity="0.1"/>
+<path d="M348.214 540.333L375 404.5H321.428L348.214 540.333Z" fill="#666666" fill-opacity="0.1"/>
+<path d="M348.214 812L375 676.167H321.428L348.214 812Z" fill="#DDDDDD" fill-opacity="0.1"/>
+</svg>

assets/images/flying-plane.svg

@@ -0,0 +1,5 @@
+<svg width="65" height="111" viewBox="0 0 65 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.3612 109C61.5641 108.502 44.7192 97.6265 44.3599 78.291C44.203 69.0587 47.8033 56.6835 52.9522 56.1203C58.101 55.5572 64.3215 66.5967 62.7533 72.6076C60.5448 81.2179 40.7074 86.3579 34.121 73.1772C29.8804 64.6652 33.2259 52.6828 33.7159 51" stroke="black" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12 12"/>
+<path d="M56 29.4748C54.9497 29.3825 5.22153 6.06412 5.00217 4.07313C4.78281 2.08213 21.2747 41.3483 20.0117 48.5673C20.0117 48.5673 33.4657 41.1769 34.3498 42.5679L31.7508 51L42.3864 36.0148L56 29.4748Z" fill="white" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M43 35.5113L8.29155 5.95306L6 5L8.09725 7.85921L34.8992 42" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
+</svg>

assets/styles/normalize.css

@@ -8,6 +8,17 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
+/* Base Styles to nabu project */
+/* Estilos base */
+:root {
+  --color-background: hsl(197, 24%, 94%);
+  --color-primary-red: hsl(355, 83%, 71%);
+  --color-secondary-green: hsl(169, 36%, 57%);
+  --color-secondary-purple: hsl(237, 58%, 69%);
+  --color-black: hsl(229, 18%, 19%);
+  --color-secundary-background: hsl(0, 0%, 91%);
+}
+
  * {
     box-sizing: border-box;
     margin: 0;
@@ -16,6 +27,7 @@
 
 
  html {
+    font-size: 62.5%;
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
   }
@@ -28,6 +40,7 @@
    */
   
   body {
+    font-family: 'Poppins', sans-serif;
     margin: 0;
   }
   

assets/styles/pages/home/home.css

@@ -7,22 +7,6 @@
 Metodologia => BEM
 */
 
-/* Estilos base */
-:root {
-    --color-background: hsl(197, 24%, 94%);
-    --color-primary-red: hsl(355, 83%, 71%);
-    --color-secondary-green: hsl(169, 36%, 57%);
-    --color-secondary-purple: hsl(237, 58%, 69%);
-    --color-black: hsl(229, 18%, 19%);
-    --color-secundary-background: hsl(0, 0%, 91%);
-}
-
-
-html {
-    font-size: 62.5%;
-    font-family: 'Poppins', sans-serif;
-}
-
 /* Estilos al header */
 .header {
     min-width: 320px;

assets/styles/pages/signup/signup-desktop.css

@@ -0,0 +1,36 @@
+.wrapper {
+    display: flex;
+    max-width: 900px;
+    box-shadow: 7px 10px 10px 2px rgba(0, 0, 0, .25);
+}
+
+.content {
+    flex-basis: 45%;
+    padding: 25px;
+    background-color: var(--color-background);
+}
+
+.form__image-container {
+    display: initial;
+    flex-basis: 55%;
+}
+
+.form__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sign-up__button {
+    font-weight: bold;
+    background-color: transparent;
+    border: 2px solid var(--color-secondary-purple);
+    color: var(--color-secondary-purple);
+    box-shadow: initial;
+    transition: all ease-in 0.35s;
+}
+
+.sign-up__button:hover {
+    background-color: var(--color-secondary-purple);
+    color: var(--color-background);
+}

assets/styles/pages/signup/signup.css

@@ -0,0 +1,168 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+
+body {
+    margin-bottom: 90px;
+    background-color: rgba(0, 183, 255, 0.4);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(180deg, rgba(255, 186, 255, 0.4) 0, rgba(247, 172, 255, 0.4) 25%, rgba(213, 157, 242,0.4) 50%, rgba(181, 142, 218, 0.4) 75%, rgba(153, 127, 196,0.4) 100%);
+    background-blend-mode: difference;
+    opacity: 0.8;
+}
+
+/* Contenedor */
+
+.wrapper {
+    width: 90%;
+    max-width: 550px;
+    min-width: 300px;
+    margin: 30px auto;
+}   
+
+/* Section del header */
+
+.header__logo-container {
+    display: inline-block;
+    width: 35%;
+    min-width: 70px;
+    max-width: 126px;
+
+}
+
+.header__logo {
+    width: 100%;
+    height: 100%;
+}
+
+.sign-up {
+    /* max-width: 360px; */
+    padding-top: 15px;
+}
+
+.sign-up__title {
+    position: relative;
+}
+
+.sign-up__text {
+    max-width: 300px;
+    font-size: 3.2rem;
+    font-weight: 400;
+    line-height: 4.3rem;
+    margin: 0;
+}
+
+.sign-up__plane {
+    width: 58px;
+    height: 105px;
+    left: 230px;
+    top: -10px;
+    position: absolute;
+    background-image: url('../../../images/flying-plane.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+/* Section del form */
+
+.form__container {
+    margin: 15px 0;
+}
+
+.form__sign-up label {
+    display: inline-block;
+    width: 100%;
+    margin: 15px 0;
+    height: 40px;
+    position: relative;
+}
+
+.sign-up__input {
+    width: 100%;
+    height: inherit;
+    padding: 0 8px;
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.1rem;
+    color: var(--color-black);
+    outline: 0;
+    border-radius: 10px;
+    border: 2px solid var(--color-secondary-purple);
+    background-color: var(--color-background);
+}
+
+.sign-up__input:-webkit-autofill {
+    box-shadow: 0 0 0 100px var(--color-background) inset;
+    -webkit-box-shadow: 0 0 0 100px var(--color-background) inset;
+    -moz-box-shadow: 0 0 0 100px var(--color-background) inset;
+}
+
+.name__field {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translate(0, -50%);
+    font-size: 1rem;
+    color: rgba(40, 43, 57,0.7);
+    padding: 0 5px;
+    transition: all ease-in 0.35s;
+}
+
+.sign-up__input:focus ~ span,
+.sign-up__input:valid ~ span {
+    top: 0;
+    color: #FFF;
+    background-color: var(--color-secondary-purple);
+}
+
+.sign-up__button {
+    display: block;
+    margin: 20px auto;
+    width: 236px;
+    height: 60px;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 2.7rem;
+    border: 0;
+    border-radius: 40px;
+    color: #FFF;
+    background-color: var(--color-secondary-purple);
+    box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 50%);
+    cursor: pointer;
+}
+
+.sign-up__button:active {
+    transform: scale(1.1);
+}
+
+.form__already {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 1rem;
+}
+
+/* Oculatar imagen */
+.form__image-container {
+    display: none;
+}
+
+/* Cambios a los estilos del footer */
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--color-black);
+}
+
+.footer .rights {
+    color: var(--color-background);
+}
+
+.footer .media svg path {
+    fill: var(--color-background);
+}

views/pages/home.php

@@ -1,9 +1,9 @@
 <?php defined('NABU') || exit ?>
 <?php $head_title = NABU_DEFAULT['website-name'] ?>
 <?php $styles     = array(
-    'pages/home/home.css',
     'components/articles/articles.css',
     'components/footer/footer.css',
+    'pages/home/home.css',
 ) ?>
 <?php $desktop_styles = array(
     array('pages/home/home-desktop.css', 'attributes' => 'media="(max-width: 720px)"'),

views/pages/signup.php

@@ -1,18 +1,75 @@
 <?php defined('NABU') || exit ?>
 <?php $head_title = 'Crea una cuenta' ?>
 <?php $styles     = array(
+    'components/footer/footer.css',
     'pages/signup/signup.css',
 ) ?>
 <?php $desktop_styles = array(
-    array('pages/signup/signup-desktop.css', 'attributes' => ''),
+    array('pages/signup/signup-desktop.css', 'attributes' => 'media="screen and (min-width: 900px)"'),
 ) ?>
 <?php $scripts = array() ?>
 <?php require_once 'views/components/head.php' ?>
 
-<h1>Crea una cuenta</h1>
 
 <?php require_once 'views/components/messages.php' ?>
+<div class="wrapper">
+    <div class="content">
+        <header class="header">
+            <picture class="header__logo-container">
+                <img src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu" class="header__logo">
+            </picture>
+        </header>
+        
+        <main class="sign-up">
+            <section class="sign-up__title">
+                <h1 class="sign-up__text">Registrate en <strong>Nabu</strong></h1>
+                <span class="sign-up__plane"></span>
+            </section>
+            <section class="form__container">
+                <form class="form__sign-up" action="POST" action="<?= NABU_ROUTES['signup'] ?>">
+                    <label for="name">
+                        <input class="sign-up__input" type="text" minlength="5" maxlength="255" id="name" name="name" required autofocus aria-label="Ingresa tu nombre completo" autocomplete="name">
+                        <span class="name__field">Nombre completo</span>
+                    </label>
+        
+                    <label for="username">
+                        <input class="sign-up__input" type="text" id="username" name="username" minlength="1" maxlength="255" required aria-label="Ingresa tu nombre de usuario" autocomplete="username">
+                        <span class="name__field">Nombre de usuario</span>
+                    </label>
+        
+                    <label for="email">
+                        <input class="sign-up__input" type="email" id="email" name="email" minlength="5" maxlength="255" required aria-label="Ingresa su correo o email" autocomplete="email">
+                        <span class="name__field">Correo(institucional)</span>
+                    </label>
+        
+                    
+                    <label for="password">
+                        <input class="sign-up__input" type="password"  id="password" name="password" minlength="6" maxlength="255" required aria-label="Ingresa tu contraseña">
+                        <span class="name__field">Contraseña</span>
+                    </label>
+        
+                    <label for="confirm-password">
+                        <input class="sign-up__input" type="password"  id="confirm-password" name="confirm-password" minlength="6" maxlength="255" required aria-label="Confirma tu contraseña">
+                        <span class="name__field">Confirmar contraseña</span>
+                    </label>
 
+                    <input class="sign-up__button"type="submit" name="signup-submit" value="Registrarme" aria-label="Registrar">
+                    <p class="form__already">¿Ya tienes cuenta?
+                         <a href="<?= NABU_ROUTES['login'] ?>">Inicia sesión</a>.
+                    </p>
+        
+                </form>
+            </section>
+        </main>
+    </div>
+    
+    <picture class="form__image-container">
+        <img class="form__image" src="https://cdna.artstation.com/p/assets/images/images/017/677/304/large/kerasumi-1.jpg?1556911326" alt="">
+    </picture>
+</div>
+<?php require_once 'views/components/footer.php' ?>
+
+<!--  
 <form method="POST" action="<?= NABU_ROUTES['signup'] ?>">
     <input type="hidden" name="csrf" value="<?= $token ?>">
     <div>
@@ -40,5 +97,6 @@
         <p>¿Ya tienes cuenta? <a href="<?= NABU_ROUTES['login'] ?>">Inicia sesión</a>.</p>
     </div>
 </form>
+-->
+
 
-<?php require_once 'views/components/footer.php' ?>