aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ufund-ui/src/app/app-routing.module.ts12
-rw-r--r--ufund-ui/src/app/app.component.css30
-rw-r--r--ufund-ui/src/app/app.component.html19
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.css8
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.css7
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.html5
-rw-r--r--ufund-ui/src/app/components/login/login.component.css26
-rw-r--r--ufund-ui/src/app/components/login/login.component.html19
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.css8
-rw-r--r--ufund-ui/src/app/components/need-page/need-page.component.html4
-rw-r--r--ufund-ui/src/styles.css43
11 files changed, 146 insertions, 35 deletions
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index 4b76654..c83db8a 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -8,12 +8,12 @@ import {FundingBasketComponent} from './components/funding-basket/funding-basket
import {NeedPageComponent} from './components/need-page/need-page.component';
const routes: Routes = [
- {path: '', component: HomePageComponent},
- {path: 'login', component: LoginComponent},
- {path: 'cupboard', component: CupboardComponent},
- {path: 'dashboard', component: DashboardComponent},
- {path: 'basket', component: FundingBasketComponent},
- {path: 'need/:id', component: NeedPageComponent}
+ { path: '', component: HomePageComponent, title: "Home | JS" },
+ { path: 'login', component: LoginComponent, title: "Login | JS" },
+ { path: 'cupboard', component: CupboardComponent, title: "Cupboard | JS" },
+ { path: 'dashboard', component: DashboardComponent, title: "Dashboard | JS" },
+ { path: 'basket', component: FundingBasketComponent, title: "Basket | JS" },
+ { path: 'need/:id', component: NeedPageComponent, title: "Need | JS" }
];
@NgModule({
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..17bbed7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,30 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+#header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ border-bottom: light-dark(#d3d3d3, black) solid 1px;
+ padding: 0 10px;
+ background-color: light-dark(#f5f5f5, #2e2e2e);
+
+ h1 {
+ padding: 0;
+ margin: 0;
+
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ a {
+ color: light-dark(black, white);
+ }
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..3058117 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+ <span>
+ <a routerLink="/">
+ <h1>Jelly Solutions</h1>
+ </a>
+ </span>
+ <div>
+ <a routerLink="/dashboard">Dashboard</a>
+ <a routerLink="/cupboard">Cupboard</a>
+ <a routerLink="/basket">Basket</a>
+ <span>{{currentUser$ | async}}</span>
+ <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
+ <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+ </div>
+</div>
<router-outlet />
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..c8add60 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,6 +1,6 @@
:host {
display: block;
- border: 2px solid #000;
+ /*border: 2px solid #000;*/
border-radius: 5px;
padding: 10px 20px;
}
@@ -9,7 +9,7 @@
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
- border-radius: 5px;
+ border-radius: 5px;
width: 20%;
visibility: visible;
@@ -17,5 +17,5 @@
#create-button {
padding: 10px 20px;
-
-} \ No newline at end of file
+
+}
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 e69de29..5f65225 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
@@ -0,0 +1,7 @@
+:host {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
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 d41e670..b2eed0b 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,3 +1,2 @@
-<a routerLink="/login">
- Login/Sign Up
-</a> \ No newline at end of file
+<h1>Helping fund coral reef and marine life conservation</h1>
+<button routerLink="/cupboard">View needs</button>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..4bfcbb8 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,24 @@
-:host, .border {
- display: flex;
- flex-direction: column;
- max-width: 300px;
- gap: 5px
+:host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+}
+
+#box {
+ display: flex;
+ flex-direction: column;
+ max-width: 350px;
+ gap: 10px;
+ backdrop-filter: blur(10px);
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 30px;
+ color: white;
+ border-radius: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: white;
}
.border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 2cdb6d0..e04ec23 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,7 +1,12 @@
-<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-<p>Login:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" #password>
-<button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
-<span *ngIf="statusText">{{statusText | async}}</span>
+<div id="box">
+ <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
+ <h1>Login</h1>
+ <input placeholder="Username" type="text" #username>
+ <input placeholder="Password" type="password" #password>
+ <button type="button" (click)="login(username.value, password.value)">Login</button>
+ <div>
+ New? <a href="/">Create an account</a>
+ </div>
+<!-- <button type="button" (click)="signup(username.value, password.value)">Create Account</button>-->
+ <span *ngIf="statusText">{{statusText | async}}</span>
+</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 bbc3f2c..fa3ed4f 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
@@ -4,7 +4,7 @@
display: block;
width: 30%;
border-radius: 5px;
-
+
}
li, div {
@@ -16,9 +16,9 @@ li, div {
}
#search-form {
- background-color: #d9d9d9;
+ background-color: light-dark(#d9d9d9, #1b1b1b);
padding: 10px 20px 20px 20px;
border: 2px solid #000;
- border-radius: 5px;
+ border-radius: 5px;
visibility: visible;
- } \ No newline at end of file
+ }
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 90fd459..b2579c9 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,4 +1,4 @@
-<button routerLink="/dashboard">Back to dashboard</button>
+<button routerLink="/cupboard">Back to cupboard</button>
<h1>Viewing Need: {{need?.name}}</h1>
<a>internal id: {{need?.id}}</a>
<div style="display: flex; column-gap: 6px;">
@@ -19,4 +19,4 @@
<p>Goal: {{need?.maxGoal}}</p>
<p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p> \ No newline at end of file
+<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..bad2232 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,44 @@
/* You can add global styles to this file, and also import other style files */
+
+:root {
+ color-scheme: light dark;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ height: 100%;
+ background-color: light-dark(white, #242424);
+}
+
+body {
+ font-family: sans-serif;
+}
+
+input {
+ font-size: 14pt;
+ padding: 5px;
+ border-radius: 5px;
+ border-style: solid;
+ border-width: 1px;
+ background-color: light-dark(#ebebeb, #3a3a3a);
+
+ &:hover {
+ background-color: light-dark(#e1e1e1, #444444);
+ }
+}
+
+button, .button {
+ font-size: 14pt;
+ padding: 6px 10px;
+ border-radius: 5px;
+ border-style: none;
+ background-color: light-dark(#ebebeb, #3a3a3a);
+
+ &:hover {
+ background-color: light-dark(#e1e1e1, #444444);
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 22:51:19 +0000