diff options
Diffstat (limited to 'frontend/src/app/_pages')
| -rw-r--r-- | frontend/src/app/_pages/home/home.component.html | 62 |
1 files changed, 36 insertions, 26 deletions
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 |