Advertisement
Gxbriel_99

directory

Apr 18th, 2025 (edited)
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.32 KB | None | 0 0
  1. //SCSS
  2. .esciASinistra{
  3. animation: containerToLeft 2s ease 0s 1 normal forwards;
  4. }
  5.  
  6. @keyframes containerToLeft {
  7. 0% {
  8. opacity: 1;
  9. transform: translateX(0px);
  10. }
  11. 100% {
  12. opacity: 0;
  13. transform: translateX(-50px);
  14. }
  15. }
  16.  
  17. //DIRECTORY
  18. import { Directive, ElementRef, Renderer2 } from '@angular/core';
  19.  
  20. @Directive({
  21. selector: '[SwitchFormMobile]',
  22. exportAs: 'SwitchFormMobile'
  23. })
  24. export class SwitchFormMobileDirective {
  25.  
  26. //classe CSS da mobile
  27. private classNameMobile = 'esciASinistra';
  28.  
  29.  
  30. constructor(private el:ElementRef,private render:Renderer2) { }
  31.  
  32. //ANIMAZIONE DA MOBILE
  33. switchToLeft() {
  34. console.log('switchToLeft');
  35. this.render.addClass(this.el.nativeElement, this.classNameMobile);
  36. }
  37.  
  38.  
  39. }
  40.  
  41.  
  42. //HTML
  43. <main>
  44. <div id="container">
  45. <div id="textContainer" SwitchLeftRight #panel="SwitchLeftRight" >
  46. <div id="loginText">
  47. <h1>NON HAI UN ACCOUNT?</h1>
  48. <p>Unisciti a noi! Clicca qui sotto e inizia a guardare contenuti senza limiti. L'intrattenimento ti
  49. aspetta!</p>
  50. <button id="switchToRegister" (click)="panel.switchToLeft()">
  51. <span>Registrati</span>
  52. </button>
  53. </div>
  54. <div id="registerText">
  55. <h1>Hai già un account?</h1>
  56. <p>Accedi per continuare! Fai clic qui sotto per entrare nel tuo account e scoprire contenuti
  57. esclusivi.</p>
  58. <button id="switchToLogin" (click)="panel.switchToRight()">
  59. <span>Accedi</span>
  60. </button>
  61. </div>
  62. </div>
  63. <div id="LoginFormContainer" SwitchFormMobile #panel2="SwitchFormMobile" >
  64. <form method="post" id="loginForm" novalidate [formGroup]="loginForm" (ngSubmit)="login()">
  65. <h1>Accedi a <span>Streamify</span></h1>
  66.  
  67. <input type="email" placeholder="Inserisci la tua email" formControlName="emailLogin">
  68. <div id="feedbackEmail"></div>
  69.  
  70. <input type="password" placeholder="Inserisci la tua password" formControlName="pswLogin">
  71. <div id="feedbackPsw"></div>
  72.  
  73. <div class="links">
  74. <a href="#" id="switchRegisterMobile" class="hidden-link" (click)="panel2.switchToLeft()">Non ho un account</a>
  75. <a href="#">Password smarrita</a>
  76. </div>
  77.  
  78. <button type="submit" id="LoginFormsubmit" [disabled]="loginForm.invalid">Login</button>
  79. </form>
  80. </div>
  81. <div id="RegisterFormContainer">
  82. <form action="#" method="post" id="registerForm" novalidate>
  83. <h1>Unisciti a <span>Streamify</span></h1>
  84. <div class="section">
  85. <input type="text" id="name" placeholder="Inserisci il nome">
  86. <input type="text" id="surname" placeholder="Inserisci il cognome">
  87. </div>
  88. <div class="section">
  89. <select name="sex" id="sex">
  90. <option value="">Sesso</option>
  91. <option value="0">M</option>
  92. <option value="1">F</option>
  93. </select>
  94. <input type="date" id="birthDate">
  95. </div>
  96. <select id="nation" name="nation">
  97. <option value="0" selected="selected" value="">Nazione</option>
  98. </select>
  99. <div class="section">
  100. <input type="email" id="registerEmail" placeholder="Inserisci la tua email">
  101. <input type="password" id="registerPassword" placeholder="Inserisci una pasword">
  102. </div>
  103. <div id="feedbackAnagraphicData"></div>
  104. <div class="links">
  105. <a href="#" id="switchLoginMobile" class="hidden-link">Ho già un account</a>
  106. <a href="#" id="text-policy" data-cmp-ab="2">termini e condizioni d'uso</a>
  107. </div>
  108. <input type="submit" value="Unisciti" id="RegisterFormsubmit">
  109. </form>
  110. </div>
  111. </div>
  112. </main>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement