diff options
Diffstat (limited to 'ufund-ui/src/app/components')
15 files changed, 177 insertions, 47 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 4eebc2d..8f6901a 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -10,13 +10,13 @@ <div id="header2"> <div id="searchArea"> <form id="search-form" #searchForm="ngForm"> - <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel> + <input type="text" name="search" class="wide-input sort-scheme" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel> <input type="reset" value="Clear" (click)="search(null)"> <br> </form> </div> <div id="sortArea"> <label for="sort">Sort by: </label> - <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input" (change)="search(searchForm.value)" [value]="currentSortAlgo"> + <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input sort-scheme" (change)="search(searchForm.value)" [value]="currentSortAlgo"> <option *ngFor="let algorithm of Object.keys(SortingAlgorithms)" [value]="algorithm"> {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}} </option> @@ -25,7 +25,7 @@ <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span> </button> <label>Needs per page: </label> - <input type ="number" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}"> + <input type ="number" class="sort-scheme" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}"> </div> </div> <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index 54f362b..cb4ad74 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -17,7 +17,7 @@ } .card { - background-color: #2e2e2e; + background-color: var(--tertiary-color); width: 400px; height: 130px; border-radius: 5px; @@ -34,7 +34,7 @@ .listCard { display: flex; flex-direction: column; - background-color: #2e2e2e; + background-color: var(--tertiary-color); border-radius: 5px; padding: 10px; gap: 10px; 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 297a63a..cff2bbe 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..c345a0b 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,20 @@ h1 { max-width: 1200px; } +#cr { + opacity: var(--opacity-cr); +} + #jf { - /*position: absolute;*/ + opacity: var(--opacity-jf); +} + +.text-highlight { + color: var(--highlight-color); } #right { - max-width: 500px; + max-width: 450px; max-height: 500px; display: flex; justify-content: center; @@ -33,6 +40,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..810d924 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -2,29 +2,66 @@ 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: -66px; +} + +#bg-cr { + position: absolute; + margin-top: -150px; + top:0; + width: 100vw; + height: calc(100vh + 150px); + background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg"); + background-size: cover; + opacity: calc(var(--opacity-cr)); + z-index: 1; +} +#bg-jf { + position: absolute; + top:0; + width: 100vw; + height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg"); + /*backdrop-filter: brightness(1%);*/ + background-size: cover; + opacity: var(--opacity-jf); + z-index: 1; } #box { + animation: ease-in-out fadeIn .1s; 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: color-mix(in srgb, var(--background-color), transparent 50%); 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: rgb(140, 140, 255); + border-color: var(--highlight-color); + z-index: 2; + justify-content: center; } +#greeting { + color: var(--highlight-color); + padding: 0; + margin: 0; + /*font-size: 32px;*/ + /* text-decoration: underline; + text-decoration-color: var(--highlight-color); */ +} .border { border-style: solid; border-width: 1px; @@ -34,3 +71,28 @@ 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); +} + +input { + width: 100%; +} + +h1 { + margin-top: 0; +} + +@keyframes fadeIn { + from { + transform: translateY(-20px); + opacity: 0 + } + to { + opacity: 1 + } +} diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 1017d0f..8b8f5b3 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,9 +1,11 @@ <div id="box"> + <h2 id="greeting">Welcome back,</h2> <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)"> + <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 type="button" (click)="login(username.value, password.value)">Login</button> - <div> - New? <a routerLink="/signup">Create an account</a> - </div> + <span>New? <a routerLink="/signup">Create an account.</a></span> </div> +<div id="bg-cr"></div> +<div id="bg-jf"></div> + diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css index fc6b5b3..3bc8127 100644 --- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css @@ -9,7 +9,7 @@ height: 175px; display: flex; align-items: center; - color: #878787; + color: gray; } #needList { @@ -26,7 +26,7 @@ padding: 10px; display: flex; flex-direction: column; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; height: 175px; width: 200px; @@ -42,7 +42,7 @@ } .needEntry:hover { - background-color: #444444; + background-color: var(--hover-color); } .needName { diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css index 9ef9292..211ee17 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.css +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css @@ -11,8 +11,8 @@ padding: 10px; border-style: solid; border-width: 1px; - border-color: #6c6c6c; - background-color: #2e2e2e; + border-color: var(--secondary-color); + background-color: var(--tertiary-color); border-radius: 5px; position: relative; width: 500px; 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..38ed4df 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; @@ -8,7 +8,7 @@ #needList { display: flex; flex-direction: column; - gap: 15px + gap: 10px } .needName { @@ -72,7 +72,7 @@ .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); - color: rgba(255, 165, 0, 1); + color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1)); padding: 2px; 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(--hover-color); } .actionArea { diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 6ca1350..7f357db 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -42,7 +42,7 @@ .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); - color: rgba(255, 165, 0, 1); + color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1)); padding: 2px; border-radius: 5px; } diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index aa90e04..4073931 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -11,18 +11,19 @@ } #box { + animation: ease-in-out fadeIn .1s; display: flex; flex-direction: column; max-width: 500px; gap: 10px; - backdrop-filter: blur(25px); - background-color: rgba(0, 0, 0, 0.1); - padding: 30px; - color: white; + backdrop-filter: blur(10px); + background-color: color-mix(in srgb, var(--background-color), transparent 50%); + padding: 90px 30px; border-radius: 5px; border-style: solid; border-width: 1px; - border-color: rgb(140, 140, 255); + border-color: var(--highlight-color); + z-index: 2; & > div { display: flex; @@ -86,3 +87,41 @@ } } +h1 { + margin-top: 0; +} + +#bg-cr { + position: absolute; + margin-top: -150px; + top:0; + width: 100vw; + height: calc(100vh + 150px); + background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg"); + background-size: cover; + opacity: calc(var(--opacity-cr)); + z-index: 1; +} + +#bg-jf { + position: absolute; + top:0; + width: 100vw; + height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg"); + /*backdrop-filter: brightness(1%);*/ + background-size: cover; + opacity: var(--opacity-jf); + z-index: 1; +} + +@keyframes fadeIn { + from { + transform: translateY(-20px); + opacity: 0 + } + to { + opacity: 1 + } +} + diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html index ef2fc27..78f5099 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -26,3 +26,5 @@ </div> <span>Already have an account? <a routerLink="/login">Log in</a></span> </div> +<div id="bg-cr"></div> +<div id="bg-jf"></div> diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css index 82e2ff3..5d2a7df 100644 --- a/ufund-ui/src/app/components/toast/toast.component.css +++ b/ufund-ui/src/app/components/toast/toast.component.css @@ -20,7 +20,8 @@ display: flex; flex-direction: row; padding: 3px 15px; - background-color: #3a3a3a; + color: var(--foreground-color); + background-color: var(--secondary-color); border-radius: 100000px; gap: 10px; align-items: center; @@ -54,4 +55,5 @@ .toast.error { background-color: #d81a1a; + color: white; } |