Promenio stil home strane.

4 files changed, 60 insertions, 32 deletions

diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
index 9d7f5522..73cdb326 100644
--- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
+++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
@@ -22,6 +22,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
   @Input() pointColor: string = '#ffffff';
   @Input() cursorLineColor: string = '#ff0000';
 
+  private fleeSpeed = 0.005;
+
   private points: Point[] = [];
 
   private width = 200;
@@ -160,8 +162,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
     const distToCursor = this.distance(p.x, p.y, mx, my);
     if (distToCursor < this.cursorDistance) {
 
-      p.x -= ((mx - p.x) / distToCursor) / 500;
-      p.y -= ((my - p.y) / distToCursor) / 500;
+      p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed;
+      p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed;
 
       const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height);
       const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))];
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 08f95a69..8294a73b 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,56 +1,66 @@
-<div class="d-flex flex-column align-items-center bg-light">
+<div class="d-flex flex-column align-items-center">
     <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
     <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
-        <h2 class="my-4">Započnite sa treniranjem!</h2>
-        <div id="cards" class="row align-items-stretch justify-content-center">
-            <div class="card shadow col-3 m-1" style="width: 18rem;">
+
+        <div class="rounded-pill bg-light px-4 m-4 shadow-accent position-relative">
+            <a routerLink="experiment" class="stretched-link">
+                <h2 class="my-4">Započnite sa eksperimentisanjem!
+                    <mat-icon>lightbulb</mat-icon>
+                </h2>
+            </a>
+        </div>
+
+        <div id="cards" class="row align-items-view align-items-stretch justify-content-center">
+            <div class="card shadowed col-3 m-3" style="width: 18rem;">
                 <div class="card-body">
-                    <mat-icon width="48px" height="48px"
-                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon>
+                    <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon>
                     <h3 class="card-title my-2">Moji izvori podataka</h3>
                     <p class="card-text">
-                        <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore
-                        podataka, ili
-                        dodajte novi.
+                        <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi.
                     </p>
                 </div>
             </div>
-            <div class="card shadow col-3 m-1" style="width: 18rem;">
+            <div class="card shadowed col-3 m-3" style="width: 18rem;">
                 <div class="card-body">
-                    <mat-icon width="48px" height="48px"
-                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training
+                    <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training
                     </mat-icon>
                     <h3 class="card-title my-2">Moji modeli</h3>
                     <p class="card-text">
-                        <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih,
-                        napravite nove modele, ili
-                        ih obrišite.
+                        <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.
                     </p>
                 </div>
             </div>
-            <div class="card shadow col-3 m-1" style="width: 18rem;">
+            <div class="card shadowed col-3 m-3" style="width: 18rem;">
                 <div class="card-body">
-                    <mat-icon width="48px" height="48px"
-                        style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction
+                    <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction
                     </mat-icon>
                     <h3 class="card-title my-2">Rezultati treniranja</h3>
                     <p class="card-text">
-                        <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane
-                        modele,
-                        koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.
+                        <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.
                     </p>
                 </div>
             </div>
         </div>
 
     </div>
-    <h2 class="my-4">Pogledajte javne izvore podataka!</h2>
-    <app-carousel [items]="publicDatasets" [type]="'Dataset'">
 
+    <div class="rounded-pill bg-light px-4 m-2 mt-5">
+        <h2 class="my-2">Pogledajte javne izvore podataka!</h2>
+    </div>
+    <app-carousel [items]="publicDatasets" [type]="'Dataset'">
     </app-carousel>
-    <h3><a routerLink="browse-datasets">Pogledaj sve javne izvore podataka...</a></h3>
-    <h2 class="my-4">Iskoristite već trenirane modele!</h2>
+
+    <div class="rounded-pill bg-light p-4 m-2 text-center position-relative">
+        <a routerLink="browse-datasets" class="stretched-link">Pogledaj sve javne izvore podataka...</a>
+    </div>
+
+    <div class="rounded-pill bg-light px-4 m-2 mt-5">
+        <h2 class="my-2">Iskoristite već trenirane modele!</h2>
+    </div>
     <app-carousel [items]="publicPredictors" [type]="'Predictor'">
     </app-carousel>
-    <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3>
+
+    <div class="rounded-pill bg-light p-4 m-2 text-center position-relative">
+        <a routerLink="browse-predictors" class="stretched-link">Pogledaj sve javne trenirane modele...</a>
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 1bd207e1..ba7743b5 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,9 +1,9 @@
-<app-gradient-background></app-gradient-background>
-<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="4" [cursorDistance]="0.07" [lineColor]="'#00a8e8'" [pointColor]="'rgba(0, 188, 252, 0.33)'" [cursorLineColor]="'#00a8e8'" [numPoints]="200">
+<app-gradient-background colorHorizontal1="rgba(0, 8, 45, 0.5)" colorHorizontal2="rgba(0, 52, 89, 0.5)" colorVertical1="rgba(0, 52, 89, 0.5)" colorVertical2="rgba(0, 152, 189, 0.5)"></app-gradient-background>
+<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="4" [cursorDistance]="0.07" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.33)" cursorLineColor="#00a8e8" [numPoints]="200">
 </app-reactive-background>
-<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="6" [cursorDistance]="0.09" [lineColor]="'#00a8e8'" [pointColor]="'rgba(0, 188, 252, 0.66)'" [cursorLineColor]="'#00a8e8'" [numPoints]="100">
+<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="6" [cursorDistance]="0.09" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.66)" cursorLineColor="#00a8e8" [numPoints]="100">
 </app-reactive-background>
-<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="8" [cursorDistance]="0.12" [lineColor]="'#00a8e8'" [pointColor]="'rgba(0, 188, 252, 1)'" [cursorLineColor]="'#00a8e8'" [numPoints]="50">
+<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="8" [cursorDistance]="0.12" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="50">
 </app-reactive-background>
 <app-navbar></app-navbar>
 <div class="container h-100">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 802b8bd0..b6555f43 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2,4 +2,20 @@
 body {
     /*background-image: url('/assets/images/add_model_background.jpg');*/
     background-color: #003459;
+}
+
+.shadowed {
+    box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
+}
+
+.shadowed:last-child {
+    box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
+}
+
+.shadowed:first-child {
+    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
+}
+
+.shadow-accent {
+    box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
 }
\ No newline at end of file