Added show/hide controls with animations and hover zone.

src/app/app.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './components/app/app.component';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatSnackBarModule} from '@angular/material/snack-bar';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { TranslatePipe } from './translate-pipe';
 import { PeselComponent } from './components/pesel/pesel.component';
 import { NipComponent } from './components/nip/nip.component';
@@ -28,11 +30,13 @@ import { environment } from '../environments/environment';
   ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
         ClipboardModule,
         MatSnackBarModule,
+        MatButtonToggleModule,
         ReactiveFormsModule,
         NgOptimizedImage,
         ServiceWorkerModule.register('ngsw-worker.js', {

src/app/components/app/app.component.html

@@ -1,8 +1,30 @@
 <div class="gradient"></div>
+<div class="hover-zone"></div>
+@if (showControls) {
+    <div class="controls" (mouseenter)="showControls = true">
+        <mat-button-toggle-group multiple>
+            <mat-button-toggle [checked]="showRegon" (change)="showRegon = $event.source.checked">REGON</mat-button-toggle>
+            <mat-button-toggle [checked]="showNip" (change)="showNip = $event.source.checked">NIP</mat-button-toggle>
+            <mat-button-toggle [checked]="showPesel" (change)="showPesel = $event.source.checked">PESEL</mat-button-toggle>
+            <mat-button-toggle [checked]="showIdentityCard" (change)="showIdentityCard = $event.source.checked">DOWÓD</mat-button-toggle>
+            <mat-button-toggle [checked]="showIban" (change)="showIban = $event.source.checked">IBAN</mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+}
 <div class="generators">
-    <app-regon></app-regon>
-    <app-nip></app-nip>
-    <app-pesel></app-pesel>
-    <app-identity-card></app-identity-card>
-    <app-iban></app-iban>
+    @if (showRegon) {
+        <app-regon></app-regon>
+    }
+    @if (showNip) {
+        <app-nip></app-nip>
+    }
+    @if (showPesel) {
+        <app-pesel></app-pesel>
+    }
+    @if (showIdentityCard) {
+        <app-identity-card></app-identity-card>
+    }
+    @if (showIban) {
+        <app-iban></app-iban>
+    }
 </div>

src/app/components/app/app.component.scss

@@ -0,0 +1,82 @@
+.hover-zone {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  z-index: 9;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  padding: 1em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  animation: slideIn 300ms ease-out forwards;
+
+  mat-button-toggle-group {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px 0 rgba(0, 38, 135, 0.2);
+    overflow: hidden;
+  }
+
+  mat-button-toggle {
+    color: white;
+    font-family: 'Comfortaa', sans-serif;
+    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
+    background-color: rgba(26, 35, 126, 0.4);
+
+    &:first-child {
+      border-left: none !important;
+    }
+
+    &.mat-button-toggle-checked {
+      background-color: rgba(255, 255, 255, 0.3);
+      color: white;
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.generators {
+  padding-top: 2em;
+
+  & > * {
+    display: block;
+    animation: fadeScaleIn 300ms ease-out forwards;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+    height: 0;
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+    height: auto;
+  }
+}

src/app/components/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -8,9 +8,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AppComponent implements OnInit {
 
+  showRegon = true;
+  showNip = true;
+  showPesel = true;
+  showIdentityCard = true;
+  showIban = true;
+
+  showControls = false;
+
   constructor() {
   }
 
   ngOnInit(): void {
   }
+
+  @HostListener('window:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    // Show if mouse is in the top 20px (hover zone)
+    if (event.clientY < 20) {
+      this.showControls = true;
+    }
+    // Hide if mouse moves below 120px
+    else if (event.clientY > 120) {
+      this.showControls = false;
+    }
+  }
 }

src/styles.scss

@@ -3,6 +3,11 @@
   src: url('assets/Comfortaa-VariableFont_wght.ttf');
 }
 
+html, body {
+  height: 100%;
+  overflow-y: hidden;
+}
+
 body {
   padding: 0;
   margin: 0;
@@ -32,7 +37,7 @@ body {
 }
 
 .generator {
-  margin: 1em;
+  margin: 0 1em 2em 1em;
   background: rgba( 255, 255, 255, 0.15 );
   box-shadow: 0 8px 32px 0 rgba( 0, 38, 135, 0.37 );
   border-radius: 3px;