From 1b9e3a2470d1123b362ad47725bd76b2eb7b39eb Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 28 Apr 2022 22:09:08 +0200
Subject: Dodatne stranice i komponente tako da su vise u skladu sa novom temom
 (navbar, home, archive).

---
 .../src/app/_pages/archive/archive.component.html  | 20 +++++++-----
 frontend/src/app/_pages/home/home.component.css    | 20 ++++++++++++
 frontend/src/app/_pages/home/home.component.html   | 36 ++++++++++++++--------
 3 files changed, 57 insertions(+), 19 deletions(-)

(limited to 'frontend/src/app/_pages')

diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html
index 1d5d144f..8cc7f0fd 100644
--- a/frontend/src/app/_pages/archive/archive.component.html
+++ b/frontend/src/app/_pages/archive/archive.component.html
@@ -1,17 +1,23 @@
 <div class="d-flex flex-column align-items-center">
-    <div *ngIf="publicDatasets.length > 0" class="my-5">
+    <div class="my-5" style="height: fit-content;">
         <app-playlist [datasets]="publicDatasets"></app-playlist>
-
-        <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>
 
     <div id="cards" class="row align-items-view align-items-stretch justify-content-center">
+        <div class="card shadowed bg-light text-light 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>
+                <h3 class="card-title my-2">Moji eksperimenti</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.
+                </p>
+            </div>
+        </div>
         <div class="card shadowed bg-light text-light 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>
-                <h3 class="card-title my-2">Moji izvori podataka</h3>
+                <h3 class="card-title my-2">Izvori podataka</h3>
                 <p class="card-text">
                     <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi.
                 </p>
@@ -21,7 +27,7 @@
             <div class="card-body">
                 <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>
+                <h3 class="card-title my-2">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.
                 </p>
diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css
index e69de29b..22137c24 100644
--- a/frontend/src/app/_pages/home/home.component.css
+++ b/frontend/src/app/_pages/home/home.component.css
@@ -0,0 +1,20 @@
+.logo {
+    margin: 0 !important;
+}
+
+#title {
+    color: var(--offwhite);
+}
+
+h1 {
+    font-size: 64px !important;
+    font-weight: 900 !important;
+    margin-top: 1rem;
+    margin-bottom: 2.5rem;
+}
+
+.card {
+    margin: 2.5rem !important;
+    padding: 3rem;
+    width: 26rem !important;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index e682d8dd..508382da 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,20 +1,32 @@
 <div class="d-flex flex-column align-items-center">
-    <div class="ann-logo">
-        <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="256" height="256" role="img">
+    <div class="logo">
+        <img src="../../../assets/images/logo.png" class="bi me-2" width="256" height="256" role="img">
     </div>
 
-    <div class="d-flex flex-column align-items-center">
+    <div id="title">
+        <h1>Igr<span class="highlight">ann</span>onica</h1>
+    </div>
 
-        <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 id="cards" class="row align-items-view align-items-stretch justify-content-center">
+        <div class="card shadowed bg-light text-light 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>
+                <h3 class="card-title my-2">Experimentiši</h3>
+                <p class="card-text">
+                    U tri koraka <a class="stretched-link" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd.
+                </p>
+            </div>
+        </div>
+        <div class="card shadowed bg-light text-light 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>
+                <h3 class="card-title my-2">Arhiva</h3>
+                <p class="card-text">
+                    <a class="stretched-link" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima, i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici.
+                </p>
+            </div>
         </div>
-
-
-
     </div>
 
 </div>
\ No newline at end of file
-- 
cgit v1.2.3