Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //SCSS
- .esciASinistra{
- animation: containerToLeft 2s ease 0s 1 normal forwards;
- }
- @keyframes containerToLeft {
- 0% {
- opacity: 1;
- transform: translateX(0px);
- }
- 100% {
- opacity: 0;
- transform: translateX(-50px);
- }
- }
- //DIRECTORY
- import { Directive, ElementRef, Renderer2 } from '@angular/core';
- @Directive({
- selector: '[SwitchFormMobile]',
- exportAs: 'SwitchFormMobile'
- })
- export class SwitchFormMobileDirective {
- //classe CSS da mobile
- private classNameMobile = 'esciASinistra';
- constructor(private el:ElementRef,private render:Renderer2) { }
- //ANIMAZIONE DA MOBILE
- switchToLeft() {
- console.log('switchToLeft');
- this.render.addClass(this.el.nativeElement, this.classNameMobile);
- }
- }
- //HTML
- <main>
- <div id="container">
- <div id="textContainer" SwitchLeftRight #panel="SwitchLeftRight" >
- <div id="loginText">
- <h1>NON HAI UN ACCOUNT?</h1>
- <p>Unisciti a noi! Clicca qui sotto e inizia a guardare contenuti senza limiti. L'intrattenimento ti
- aspetta!</p>
- <button id="switchToRegister" (click)="panel.switchToLeft()">
- <span>Registrati</span>
- </button>
- </div>
- <div id="registerText">
- <h1>Hai già un account?</h1>
- <p>Accedi per continuare! Fai clic qui sotto per entrare nel tuo account e scoprire contenuti
- esclusivi.</p>
- <button id="switchToLogin" (click)="panel.switchToRight()">
- <span>Accedi</span>
- </button>
- </div>
- </div>
- <div id="LoginFormContainer" SwitchFormMobile #panel2="SwitchFormMobile" >
- <form method="post" id="loginForm" novalidate [formGroup]="loginForm" (ngSubmit)="login()">
- <h1>Accedi a <span>Streamify</span></h1>
- <input type="email" placeholder="Inserisci la tua email" formControlName="emailLogin">
- <div id="feedbackEmail"></div>
- <input type="password" placeholder="Inserisci la tua password" formControlName="pswLogin">
- <div id="feedbackPsw"></div>
- <div class="links">
- <a href="#" id="switchRegisterMobile" class="hidden-link" (click)="panel2.switchToLeft()">Non ho un account</a>
- <a href="#">Password smarrita</a>
- </div>
- <button type="submit" id="LoginFormsubmit" [disabled]="loginForm.invalid">Login</button>
- </form>
- </div>
- <div id="RegisterFormContainer">
- <form action="#" method="post" id="registerForm" novalidate>
- <h1>Unisciti a <span>Streamify</span></h1>
- <div class="section">
- <input type="text" id="name" placeholder="Inserisci il nome">
- <input type="text" id="surname" placeholder="Inserisci il cognome">
- </div>
- <div class="section">
- <select name="sex" id="sex">
- <option value="">Sesso</option>
- <option value="0">M</option>
- <option value="1">F</option>
- </select>
- <input type="date" id="birthDate">
- </div>
- <select id="nation" name="nation">
- <option value="0" selected="selected" value="">Nazione</option>
- </select>
- <div class="section">
- <input type="email" id="registerEmail" placeholder="Inserisci la tua email">
- <input type="password" id="registerPassword" placeholder="Inserisci una pasword">
- </div>
- <div id="feedbackAnagraphicData"></div>
- <div class="links">
- <a href="#" id="switchLoginMobile" class="hidden-link">Ho già un account</a>
- <a href="#" id="text-policy" data-cmp-ab="2">termini e condizioni d'uso</a>
- </div>
- <input type="submit" value="Unisciti" id="RegisterFormsubmit">
- </form>
- </div>
- </div>
- </main>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement