diff options
Diffstat (limited to 'ufund-ui/src/app')
11 files changed, 122 insertions, 36 deletions
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 8b6b28a..2ed8131 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -54,7 +54,6 @@ /*}*/ a { - color: light-dark(black, white); text-decoration: none; } diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html index 30a5347..8a0fd04 100644 --- a/ufund-ui/src/app/app.component.html +++ b/ufund-ui/src/app/app.component.html @@ -6,12 +6,13 @@ </a> </div> <div> - <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a> - <a routerLink="/cupboard">Cupboard</a> - <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a> + <button *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</button> + <button routerLink="/cupboard">Cupboard</button> + <button *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</button> <!-- <span>{{currentUser$ | async}}</span>--> <button *ngIf="currentUser | async" (click)="logout()">Log Out</button> <button *ngIf="!(currentUser | async)" (click)="login()">Log In</button> + <button class="button" (click)="toggleColorScheme()"><span class="icon">brightness_7</span></button> </div> </div> diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts index 615397f..78fd050 100644 --- a/ufund-ui/src/app/app.component.ts +++ b/ufund-ui/src/app/app.component.ts @@ -40,6 +40,15 @@ export class AppComponent implements OnInit { this.authService.restoreLogin(dataParsed.username, dataParsed.key) console.log("Key found", dataParsed.key) } + + let theme = localStorage.getItem("theme") + if(!theme) { + // if no color scheme is set, get the system settings + let preferredTheme = this.document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark"; + localStorage.setItem("theme",preferredTheme); + theme = preferredTheme; + } + this.document.body.parentElement!.setAttribute("theme",theme); } login() { @@ -51,5 +60,17 @@ export class AppComponent implements OnInit { location.reload() } + toggleColorScheme() { + let theme = localStorage.getItem("theme"); + // fallback + if (!theme) { + theme = "light"; + } + let newTheme = theme == "light" ? "dark" : "light"; + this.document.body.parentElement!.setAttribute("theme",newTheme); + localStorage.setItem("theme", newTheme); + console.log(newTheme, this.document.body.parentElement); + } + protected readonly userType = userType; } diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index a1485a0..4764b0f 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -11,7 +11,7 @@ } .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -66,13 +66,13 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; } .clickable:hover { - background-color: #444444; + background-color: var(--tertiary-color); } .actionArea { diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css index b64be18..47e6ebd 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.css +++ b/ufund-ui/src/app/components/home-page/home-page.component.css @@ -6,7 +6,6 @@ justify-content: center; overflow: clip; } - #hero { display: flex; /*flex-direction: column;*/ @@ -19,12 +18,21 @@ h1 { max-width: 1200px; } +#cr { + opacity: var(--opacity-cr); +} + #jf { - /*position: absolute;*/ + opacity: var(--opacity-jf); +} + +.text-highlight { + text-decoration: underline; + color: var(--highlight-color); } #right { - max-width: 500px; + max-width: 450px; max-height: 500px; display: flex; justify-content: center; @@ -33,6 +41,6 @@ h1 { } #left { - max-width: 500px; + max-width: 550px; z-index: 1; } diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html index 7a7ff96..051132e 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.html +++ b/ufund-ui/src/app/components/home-page/home-page.component.html @@ -1,10 +1,14 @@ <div id="hero"> <div id="left"> - <h1>Helping fund coral reef and marine life conservation</h1> + <h1>Helping fund <span class="text-highlight">coral reef</span> and + <span class="text-highlight">marine life</span> conservation.</h1> <p>View our online cupboard holding all needs related to sea life preservation</p> - <button class="button2" routerLink="/cupboard">View needs</button> + <button class="button2" routerLink="/cupboard">View Needs</button> </div> <div id="right"> - <img id="jf" src="jf.png" height="1024" width="1024"/> + <!-- <img id="jf" src="jf.png" height="1024" width="1024"/> --> + <div style="width: 500px; height: 500px;"></div> + <img style="position: absolute;" id="cr" src="cr.png" height="700" width="700"/> + <img style="position: absolute;" id="jf" src="jf.png" height="700" width="700"/> </div> </div> diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts index 95e8962..71c2549 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.ts +++ b/ufund-ui/src/app/components/home-page/home-page.component.ts @@ -1,4 +1,5 @@ -import {Component} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-home-page', @@ -6,6 +7,17 @@ import {Component} from '@angular/core'; templateUrl: './home-page.component.html', styleUrl: './home-page.component.css' }) -export class HomePageComponent { +export class HomePageComponent implements OnInit { + + constructor( + @Inject(DOCUMENT) private document: Document + ) {} + ngOnInit(): void { + console.log(this.document.documentElement); + } + + + + } diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css index b56b4eb..fc1d9da 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -2,29 +2,60 @@ display: flex; align-items: center; justify-content: center; - height: 100%; - /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/ - background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg"); + width: 100vw; + height: 150vh; + overflow: hidden; + background-color: transparent; background-blend-mode: darken; - margin-top: -66px + margin-top: -150px; + overflow: hidden; +} + +#bg-cr { + position: absolute; + margin-top: -150px; + top:0; + width: 100vw; + height: calc(100vh + 150px); + background: linear-gradient(to bottom, rgba(84, 45, 0, 0) 30%, rgba(84, 45, 0, 0.1) 40%), url("/login-cr.png"); + opacity: calc(var(--opacity-cr)); + z-index: 1; +} +#bg-jf { + position: absolute; + top:0; + width: 100vw; + height: 100vh; + background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 30%), url("/login-jf.png"); + opacity: var(--opacity-jf); + z-index: 1; } #box { display: flex; flex-direction: column; - max-width: 350px; + align-items: center; + aspect-ratio: 4/5; + min-height: 50vh; + margin-top: 15vh; gap: 10px; + /* background-color: var(--background-color); */ backdrop-filter: blur(10px); - background-color: rgba(0, 0, 0, 0.1); - padding: 30px; + padding: 50px 40px; color: white; border-radius: 5px; border-style: solid; border-width: 1px; - border-color: rgb(140, 140, 255); + border-color: var(--highlight-color); + z-index: 2; } +#greeting { + font-size: 32px; + /* text-decoration: underline; + text-decoration-color: var(--highlight-color); */ +} .border { border-style: solid; border-width: 1px; @@ -34,3 +65,10 @@ background-color: white; box-shadow: 0 0 10px 10px black; } + +#signup { + color: var(--highlight-color); + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-color: var(--highlight-color); +}
\ No newline at end of file diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 1017d0f..27eab96 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,9 +1,12 @@ <div id="box"> - <h1>Login</h1> - <input placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)"> - <input placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)"> - <button type="button" (click)="login(username.value, password.value)">Login</button> - <div> - New? <a routerLink="/signup">Create an account</a> + <h1 id="greeting">Login</h1> + <input class="form-input" placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)"> + <input class="form-input" placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)"> + <button class="form-submit" type="button" (click)="login(username.value, password.value)">Login</button> + <div style="display: flex; column-gap: 4px;"> + <p>New?</p> <a routerLink="/signup"><p id="signup">Create an account.</p></a> </div> </div> +<div id="bg-cr"></div> +<div id="bg-jf"></div> + diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css index 60af7bb..b3af85f 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.css +++ b/ufund-ui/src/app/components/need-list/need-list.component.css @@ -1,5 +1,5 @@ .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -88,7 +88,7 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; height: 130px; @@ -98,7 +98,7 @@ } .clickable:hover { - background-color: #444444; + background-color: var(--tertiary-color); } .actionArea { diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index 1410ce6..0e5b762 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -2,12 +2,12 @@ <div id="needList"> <div *ngFor="let need of visibleNeeds" class="needEntry"> <div [routerLink]="'/need/' + need.id" class="clickable"> - + <div class="split"> <div class="left"> <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/> </div> - + <div class="middle"> <span class="needName">{{need.name}}</span> <span class="needType">{{need.type}}</span> @@ -25,7 +25,7 @@ <progress [value]="need.current" [max]="need.maxGoal"></progress> </div> </div> - + <div *ngIf="actionArea" class="actionArea"> <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/> </div> |