Added site animations for multiple routes

iwokonl · May 20, 2024 · 36fbbe5 · 36fbbe5
1 parent 02d92af
commit 36fbbe5
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 21 deletions.
diff --git a/Front/kantor-angular/src/app/currency-account/currency-account.component.scss b/Front/kantor-angular/src/app/currency-account/currency-account.component.scss
@@ -162,7 +162,16 @@
   background: linear-gradient(94deg, rgba(255, 255, 255, 0.02) 12.6%, rgba(255, 255, 255, 0.01) 100.13%);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(17.5px);
+  animation: scale-up 0.5s ease 0s 1 normal forwards;
+  @keyframes scale-up {
+    0% {
+      transform: scale(0.2);
+    }
 
+    100% {
+      transform: scale(1);
+    }
+  }
 
   // custom scrollbar styles
   &::-webkit-scrollbar {

diff --git a/Front/kantor-angular/src/app/currency-detail/currency-detail.component.html b/Front/kantor-angular/src/app/currency-detail/currency-detail.component.html
@@ -1,19 +1,23 @@
 
+<div class="currency-detail-container">
+  <div class="currency-details">
+    <div class="header-container">
+      <h2>Informacje o walucie </h2>
+      <h3>{{ currencyDetails.currency +' ' + currencyFlags[currencyDetails.code] }}</h3>
+      <p>Kod waluty: {{ currencyDetails.code }}</p>
+        <p>Cena (Mid): {{ currencyDetails.rates[0].mid + ' PLN'}}</p>
 
-<div class="currency-details">
-  <h3>Informacje o walucie <br> <b>&nbsp;{{ currencyDetails.currency +' ' + currencyFlags[currencyDetails.code] }}</b> </h3>
-  <p>Kod waluty: {{ currencyDetails.code }}</p>
-    <p>Cena (Mid): {{ currencyDetails.rates[0].mid + ' PLN'}}</p>
+      <p> Wykres waluty z dni {{ formatDate(startDate) }} - {{ formatDate(endDate) }}</p>
+    </div>
+    <div class="chart-container"><canvas id="chart" width="80vw" height="60vh"></canvas></div>
 
-  <p> Wykres waluty z dni {{ formatDate(startDate) }} - {{ formatDate(endDate) }}</p>
-  <div class="chart-container"><canvas id="chart" width="80vw" height="60vh"></canvas></div>
+    <div class="chart-buttons-container">
+      <button class="chart-buttons" (click)="changeDateRange(7)">1 T</button>
+      <button class="chart-buttons" (click)="changeDateRange(14)">2 T</button>
+      <button class="chart-buttons" (click)="changeDateRange(30)">1 M</button>
+      <button class="chart-buttons" (click)="changeDateRange(90)">3 M</button>
+      <button class="chart-buttons" (click)="changeDateRange(365)">1 R</button>
+    </div>
 
-  <div class="chart-buttons-container">
-    <button (click)="changeDateRange(7)">1 Tydzień</button>
-    <button (click)="changeDateRange(14)">2 Tygodnie</button>
-    <button (click)="changeDateRange(30)">1 Miesiąc</button>
-    <button (click)="changeDateRange(90)">3 Miesiące</button>
-    <button (click)="changeDateRange(365)">12 Miesięcy</button>
   </div>
-
 </div>
diff --git a/Front/kantor-angular/src/app/currency-detail/currency-detail.component.scss b/Front/kantor-angular/src/app/currency-detail/currency-detail.component.scss
@@ -1,9 +1,23 @@
+.currency-detail-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+.header-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 30%;
+  width: 100%;
+}
 .currency-details {
   color: #DBDBDB;
   display: flex;
   flex-direction: column;
   width: 80vh;
-  margin-left: 24vw;
   //margin: 50px auto 50px 120px;
   padding: 1vh;
   //border: 1px solid #ccc;
@@ -25,8 +39,6 @@
   justify-content: center;
   padding: 1vh;
   color: #DBDBDB;
-  border-radius: 40px;
-  border: 2px solid rgba(255, 255, 255, 0.22);
 }
 #chart {
   //height: 80% !important;
@@ -36,3 +48,21 @@
   align-items: center;
   margin-top: 20px;
 }
+.chart-buttons-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2vw;
+  width: 100%;
+  height: 10%;
+}
+.chart-buttons{
+  background: none;
+  border: none;
+  color: rgba(228, 228, 228, 0.80);
+  &:hover{
+    border-radius: 10px;
+    border: 1px solid #D2DDE1;
+    box-shadow: 0px 0px 4px 2px #81BCCE;
+  }
+}
diff --git a/Front/kantor-angular/src/app/settings/settings.component.html b/Front/kantor-angular/src/app/settings/settings.component.html
@@ -3,7 +3,7 @@
     <div class="upper-settings-container">
       <div class="settings-header">
         <h1>Ustawienia</h1>
-        <p>Zarządaj ustawieniami konta i powiadomień</p>
+        <p id="settings-header-text">Zarządaj ustawieniami konta i powiadomień</p>
       </div>
       <div class="settings-picker-outer">
         <div class="settings-picker-inner">

diff --git a/Front/kantor-angular/src/app/settings/settings.component.scss b/Front/kantor-angular/src/app/settings/settings.component.scss
@@ -14,9 +14,24 @@
   background: linear-gradient(94deg, rgba(255, 255, 255, 0.04) 12.6%, rgba(255, 255, 255, 0.02) 100.13%);
   backdrop-filter: blur(25px);
   border-radius: 47px;
+  animation: scale-up 0.5s ease 0s 1 normal forwards;
+  @keyframes scale-up {
+    0% {
+      transform: scale(0.2);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+}
+h1{
+  font-size: 2.5vw;
+  color: #dbdbdb;
 }
-p{
+#settings-header-text{
   color: rgba(255, 255, 255, 0.69);
+  font-size: 1.5vw;
 }
 .upper-settings-container{
   display: flex;
@@ -56,25 +71,50 @@ p{
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 40px 0px 0px 40px;
+  background: linear-gradient(94deg, rgba(255, 255, 255, 0.12) 12.6%, rgba(255, 255, 255, 0.06) 100.13%);
+}
+.security-active{
+  border-radius: 0;
+}
+.help-active{
+  border-radius: 0px 40px 40px 0px;
+}
+.profile-inactive{
   border-radius:  0px 40px 0px 0px;
-
+}
+.help-inactive:hover{
+  border-radius: 0px 40px 40px 0px;
+  background: linear-gradient(94deg, rgba(255, 255, 255, 0.12) 12.6%, rgba(255, 255, 255, 0.06) 100.13%);
+}
+.profile-inactive:hover{
+  border-radius: 40px 0px 0px 40px;
+  background: linear-gradient(94deg, rgba(255, 255, 255, 0.12) 12.6%, rgba(255, 255, 255, 0.06) 100.13%);
+}
+.security-inactive:hover{
+  border-radius: 0;
+  background: linear-gradient(94deg, rgba(255, 255, 255, 0.12) 12.6%, rgba(255, 255, 255, 0.06) 100.13%);
 }
 .profile-inactive, .security-inactive, .help-inactive{
   height: 100%;
   width: 33.33%;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius:  0px 40px 0px 0px;
-
 }
 .buttons-active{
   color: #5FE5EE;
   border: none;
   background: none;
+  font-size: 1.5vw;
+  height: 100%;
+  width: 100%;
 }
 .buttons-inactive{
   color: #DBDBDB;
   border: none;
   background: none;
+  font-size: 1.5vw;
+  height: 100%;
+  width: 100%;
 }
diff --git a/Front/kantor-angular/src/app/welcome-content/welcome-content.component.scss b/Front/kantor-angular/src/app/welcome-content/welcome-content.component.scss
@@ -4,6 +4,16 @@
   width: 100%;
   flex-direction: column;
   padding: 1%;
+  animation: scale-up 0.5s ease 0s 1 normal forwards;
+  @keyframes scale-up {
+    0% {
+      transform: scale(0.2);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
 }
 .main-container{
   margin-top: 1%;