aboutsummaryrefslogtreecommitdiff
path: root/ufund-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ufund-ui/src')
-rw-r--r--ufund-ui/src/app/app.component.css1
-rw-r--r--ufund-ui/src/app/app.component.html7
-rw-r--r--ufund-ui/src/app/app.component.ts21
-rw-r--r--ufund-ui/src/app/components/funding-basket/funding-basket.component.css6
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.css16
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.html10
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.ts16
-rw-r--r--ufund-ui/src/app/components/login/login.component.css54
-rw-r--r--ufund-ui/src/app/components/login/login.component.html15
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.css6
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.html6
-rw-r--r--ufund-ui/src/index.html2
-rw-r--r--ufund-ui/src/styles.css63
13 files changed, 173 insertions, 50 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>
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index b6ae1a2..34b631c 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -1,5 +1,5 @@
<!doctype html>
-<html lang="en">
+<html lang="en" theme="light">
<head>
<meta charset="utf-8">
<title>UfundUi</title>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 527408a..44f6107 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,17 +1,44 @@
/* You can add global styles to this file, and also import other style files */
-:root {
- color-scheme: /*light*/ dark;
-}
+/* :root {
+ color-scheme: dark;
+} */
* {
box-sizing: border-box;
+ color: var(--foreground-color);
+ transition: all ease-in-out .3s;
+}
+
+[theme="light"] {
+ --background-color: #e6e4df;
+ --secondary-color: #e0dcd4;
+ --tertiary-color: #cac6be;
+ --foreground-color: #000000;
+ --highlight-color: #cf9451;
+ --dark-highlight-clor: #582f00;
+ --hover-color: #d8cdc0;
+ --opacity-cr: 1;
+ --opacity-jf: 0;
+}
+
+[theme="dark"] {
+ --background-color: #000715;
+ --secondary-color: #444444;
+ --tertiary-color: #3a3a3a;
+ --foreground-color: #ffffff;
+ --highlight-color: #6091e8;
+ --dark-highlight-clor: #002846;
+ --hover-color: #394559;
+ --opacity-cr: 0;
+ --opacity-jf: 1;
}
html, body {
margin: 0;
height: 100%;
- background-color: light-dark(white, #000715);
+ background-color: var(--background-color);
+ color: var(--foreground-color);
}
body {
@@ -27,19 +54,20 @@ input, textarea {
border-radius: 5px;
border-style: solid;
border-width: 1px;
- background-color: light-dark(#ebebeb, #3a3a3a);
+ background-color: var(--background-color);
&:hover {
- background-color: light-dark(#e1e1e1, #444444);
+ background-color: var(--hover-color);
}
}
button, input[type=button], input[type=reset], input[type=submit], .button {
- font-size: 14pt;
+ font-size: 12pt;
padding: 6px 16px;
border-radius: 9999px;
border-style: none;
- background-color: light-dark(#ebebeb, #3a3a3a);
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: var(--tertiary-color);
display: flex;
gap: 5px;
text-align: center;
@@ -47,24 +75,33 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
align-items: center;
&:hover {
- background-color: light-dark(#e1e1e1, #444444);
+ background-color: var(--hover-color);
}
}
.button2 {
- text-transform: uppercase;
- border: 1px solid #5cdbff;
+ /* text-transform: uppercase; */
+ border: 3px solid var(--highlight-color);
padding: 10px 25px;
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12pt;
- font-weight: 600;
+ font-weight: 700;
background-color: transparent;
- text-shadow: #5cdbff 0 0 50px;
+ text-shadow: var(--highlight-color) 0 0 50px;
}
.icon {
font-family: 'Material Symbols Outlined'
}
+.sort-scheme {
+ background-color: var(--background-color);
+ border-style: solid;
+ border-color: var(--tertiary-color);
+ border-radius: 5px;
+ border-width: 1px;
+}
+
h1 {
font-size: 40px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 12:08:08 +0000