Skip to content

2021-210
2021-210
Commit 5cfc6a6d authored by shalithadeshan's avatar shalithadeshan
Browse files
Options

add login and signup pages

parent 3f7d566c
Hide whitespace changes
Inline Side-by-side
Showing with 504 additions and 205 deletions
ClientApp/src/app/app-routing.module.ts
View file @ 5cfc6a6d
...@@ -3,20 +3,89 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; ...@@ -3,20 +3,89 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [ const routes: Routes = [
{ {
path: 'home', path: 'tabs',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},
{
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
}, },
{ {
path: '', path: '',
redirectTo: 'home', redirectTo: 'login',
pathMatch: 'full' pathMatch: 'full'
}, },
]; {
path: 'signup',
loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule)
},
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: 'add-pet',
loadChildren: () => import('./add-pet/add-pet.module').then( m => m.AddPetPageModule)
},
{
path: 'pet-page',
loadChildren: () => import('./pet-page/pet-page.module').then( m => m.PetPagePageModule)
},
{
path: 'skin-disease-take-image',
loadChildren: () => import('./skin-disease-take-image/skin-disease-take-image.module').then( m => m.SkinDiseaseTakeImagePageModule)
},
{
path: 'problem-submit',
loadChildren: () => import('./problem-submit/problem-submit.module').then( m => m.ProblemSubmitPageModule)
},
{
path: 'diet-plan',
loadChildren: () => import('./diet-plan/diet-plan.module').then( m => m.DietPlanPageModule)
},
{
path: 'generated-food-plan/:isPuppy/:weight/:height/:breed/:signalment/:activityLevel',
loadChildren: () => import('./generated-food-plan/generated-food-plan.module').then( m => m.GeneratedFoodPlanPageModule)
},
{
path: 'generate-exercise-plan/:isPuppy/:weight/:height/:breed/:signalment/:activityLevel',
loadChildren: () => import('./generate-exercise-plan/generate-exercise-plan.module').then( m => m.GenerateExercisePlanPageModule)
},
{
path: 'chatbot',
loadChildren: () => import('./chatbot/chatbot.module').then( m => m.ChatbotPageModule)
},
{
path: 'posts',
loadChildren: () => import('./posts/posts.module').then( m => m.PostsPageModule)
},
{
path: 'chatbot-start',
loadChildren: () => import('./chatbot-start/chatbot-start.module').then( m => m.ChatbotStartPageModule)
},
{
path: 'skin-disease-result/:disease',
loadChildren: () => import('./skin-disease-result/skin-disease-result.module').then( m => m.SkinDiseaseResultPageModule)
},
{
path: 'skin-disease-report/:disease',
loadChildren: () => import('./skin-disease-report/skin-disease-report.module').then( m => m.SkinDiseaseReportPageModule)
},
{
path: 'diet-plan-puppy',
loadChildren: () => import('./diet-plan-puppy/diet-plan-puppy.module').then( m => m.DietPlanPuppyPageModule)
}
];
@NgModule({ @NgModule({
imports: [ imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
], ],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule {}
ClientApp/src/app/app.module.ts
View file @ 5cfc6a6d
...@@ -4,13 +4,14 @@ import { RouteReuseStrategy } from '@angular/router'; ...@@ -4,13 +4,14 @@ import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from "@angular/common/http";
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
entryComponents: [], entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent], bootstrap: [AppComponent],
}) })
......
ClientApp/src/app/home/home-routing.module.ts
View file @ 5cfc6a6d
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { HomePage } from './home.page'; import { HomePage } from './home.page';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', path: '',
component: HomePage, component: HomePage
} }
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forChild(routes)], imports: [RouterModule.forChild(routes)],
exports: [RouterModule] exports: [RouterModule],
}) })
export class HomePageRoutingModule {} export class HomePageRoutingModule {}
ClientApp/src/app/home/home.module.ts
View file @ 5cfc6a6d
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { IonicModule } from '@ionic/angular';
import { HomePageRoutingModule } from './home-routing.module'; import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
@NgModule({ @NgModule({
imports: [ imports: [
......
ClientApp/src/app/home/home.page.html
View file @ 5cfc6a6d
<ion-content>
<div class="container-fluid" style="background-color: #E9F0FB">
<div class="row ion-justify-content-center ion-align-items-center" style="height: 100vh">
<div class="col-11">
<div class="row ion-justify-content-center">
<div class="col">
<h1 class="fw-bolder">My Pets</h1>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="row" *ngFor="let dog of dogs">
<div class="col p-3 rounded-3 bg-white shadow-lg" (click)="selectPet(dog)">
<div class="row">
<div class="col-3">
<img class="rounded-circle" src="assets/dog3.jpg" style="width: 100%;">
</div>
<div class="col">
<div class="row ion-align-items-center" style="height: 100%">
<div class="col">
<h1 class="my-0">{{dog.name}} | {{dog.breed}}</h1>
<p class="my-0 text-secondary">Age: {{dog.ageYears}}Y {{dog.ageMonths}}M | Weight: {{dog.weight}}kg | {{dog.gender == 0 ? 'Male':'Female'}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col text-center" [routerLink]="['/add-pet']">
<img src="assets/plus.png" style="width: 20vw;">
<p class="mt-2" style="color: #5b628f">Add another pet</p>
</div>
</div>
</div>
</div>
</div>
</ion-content>
ClientApp/src/app/home/home.page.scss
View file @ 5cfc6a6d
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
\ No newline at end of file
ClientApp/src/app/home/home.page.ts
View file @ 5cfc6a6d
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {PythonBackendService} from '../core/python-backend.service';
import {Router} from '@angular/router';
import {SpringBackendServiceService} from "../spring-backend-service.service";
import {Dog} from "../interfaces/dog";
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: 'home.page.html', templateUrl: './home.page.html',
styleUrls: ['home.page.scss'], styleUrls: ['./home.page.scss'],
}) })
export class HomePage { export class HomePage implements OnInit {
public pets: any[];
public dogs: Dog[] = [];
constructor() {} constructor(
private pythonBackendService: PythonBackendService,
private router: Router,
private springBackendServiceService: SpringBackendServiceService
) { }
ngOnInit() {
this.springBackendServiceService.allDogs()
.subscribe(res => {
console.log(res);
this.dogs = res;
}, error => {
console.log(error);
});
this.pythonBackendService.getPets()
.subscribe(res => {
console.log(res);
this.pets = res;
});
}
selectPet(pet: Dog) {
localStorage.setItem('name', pet.name);
localStorage.setItem('breed', pet.breed);
localStorage.setItem('age', String(pet.ageYears));
localStorage.setItem('ageMonths', String(pet.ageMonths));
localStorage.setItem('weight', String(pet.weight));
localStorage.setItem('gender', String(pet.gender));
this.router.navigate(['/pet-page']);
}
} }
ClientApp/src/app/login/login-routing.module.ts 0 → 100644
View file @ 5cfc6a6d
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './login.page';
const routes: Routes = [
{
path: '',
component: LoginPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LoginPageRoutingModule {}
ClientApp/src/app/login/login.module.ts 0 → 100644
View file @ 5cfc6a6d
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LoginPageRoutingModule
],
declarations: [LoginPage]
})
export class LoginPageModule {}
ClientApp/src/app/login/login.page.html 0 → 100644
View file @ 5cfc6a6d
<ion-content>
<div class="container-fluid" style="background-color: #E9F0FB">
<div class="row ion-justify-content-center ion-align-items-center" style="height: 100vh">
<div class="col-11">
<div class="row ion-justify-content-center">
<div class="col-5">
<img src="assets/img.png">
</div>
</div>
<div class="row mt-4">
<div class="col">
<h6 class="ion-text-center text-danger">{{errorMessage}}</h6>
<div class="form-floating mb-2 shadow-lg">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" [(ngModel)]="email">
<label for="floatingInput"><i class="far fa-envelope"></i> Email address</label>
</div>
<div class="form-floating shadow-lg">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" [(ngModel)]="password">
<label for="floatingPassword"><i class="fas fa-lock"></i> Password</label>
</div>
<div class="d-grid gap-2 mt-2">
<button class="btn btn-lg btn-secondary" type="button" style="background-color: #5b628f" (click)="submit()">Login</button>
</div>
<div class="row mt-2" style="color: #5b628f">
<div class="col"><strong [routerLink]="['/signup']">Signup</strong></div>
<div class="col text-right"><strong>Forgot Password?</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
ClientApp/src/app/login/login.page.spec.ts 0 → 100644
View file @ 5cfc6a6d
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { LoginPage } from './login.page';
describe('LoginPage', () => {
let component: LoginPage;
let fixture: ComponentFixture<LoginPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ LoginPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(LoginPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
ClientApp/src/app/login/login.page.ts 0 → 100644
View file @ 5cfc6a6d
import { Component, OnInit } from '@angular/core';
import {PythonBackendService} from '../core/python-backend.service';
import {Router} from '@angular/router';
import {SpringBackendServiceService} from "../spring-backend-service.service";
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
email: string;
password: string;
private errorMessage: string;
constructor(
private pythonBackendService: PythonBackendService,
private router: Router,
private springBackendServiceService: SpringBackendServiceService
) { }
ngOnInit() {
}
submit() {
if (this.email && this.password) {
this.springBackendServiceService.login({password: this.password, username: this.email})
.subscribe(res => {
console.log(res);
if (res.token) {
localStorage.setItem('token', res.token);
localStorage.setItem('email', this.email);
this.router.navigate(['/home']);
}else {
this.errorMessage = 'Login error';
}
}, error => {
console.log(error);
});
// this.pythonBackendService.login({email: this.email, password: this.password})
// .subscribe(res => {
// console.log(res);
// if (res.id && res.id > 0) {
// localStorage.setItem('userId', res.id);
localStorage.setItem('email', this.email);
// this.router.navigate(['/home']);
// }else {
// this.errorMessage = 'Login error';
// }
// });
}
}
}
ClientApp/src/app/signup/signup-routing.module.ts 0 → 100644
View file @ 5cfc6a6d
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupPage } from './signup.page';
const routes: Routes = [
{
path: '',
component: SignupPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SignupPageRoutingModule {}
ClientApp/src/app/signup/signup.module.ts 0 → 100644
View file @ 5cfc6a6d
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SignupPageRoutingModule } from './signup-routing.module';
import { SignupPage } from './signup.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SignupPageRoutingModule
],
declarations: [SignupPage]
})
export class SignupPageModule {}
ClientApp/src/app/signup/signup.page.html 0 → 100644
View file @ 5cfc6a6d
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="container-fluid" style="background-color: #E9F0FB">
<div class="row ion-justify-content-center ion-align-items-center" style="height: 100vh">
<div class="col-11">
<div class="row ion-justify-content-center">
<div class="col">
<h1 class="fw-bolder">Create your Account</h1>
<h5 class="text-danger">{{error}}</h5>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="form-floating mb-2 shadow-lg">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" [(ngModel)]="userDto.username">
<label for="floatingInput"><i class="far fa-envelope"></i> Email address</label>
</div>
<div class="form-floating mb-2 shadow-lg">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" [(ngModel)]="userDto.password">
<label for="floatingPassword"><i class="fas fa-lock"></i> Password</label>
</div>
<div class="form-floating mb-2 shadow-lg">
<input type="password" class="form-control" id="floatingPassword2" placeholder="Password" [(ngModel)]="passwordRepeat">
<label for="floatingPassword2"><i class="fas fa-lock"></i> Password again</label>
</div>
<!-- <div class="form-floating shadow-lg">-->
<!-- <input type="password" class="form-control" id="floatingPasswordConfirm" placeholder="Password">-->
<!-- <label for="floatingPasswordConfirm"><i class="fas fa-lock"></i> Confirm Password</label>-->
<!-- </div>-->
<div class="d-grid gap-2 mt-2">
<button class="btn btn-lg btn-secondary" type="button" style="background-color: #5b628f" [disabled]="!userDto.username && (userDto.password != passwordRepeat)" (click)="submit()">Signup</button>
</div>
<p class="ion-text-center mt-5" style="color: #5b628f">- Or sign up with -</p>
<div class="row mt-2 ion-justify-content-center" style="color: #5b628f">
<div class="col-2 mx-2 p-2 rounded shadow-lg" style="background-color: #ffffff">
<img src="assets/google-logo.png">
</div>
<div class="col-2 mx-2 p-2 rounded shadow-lg" style="background-color: #ffffff">
<img src="assets/facebook-icon.png">
</div>
<div class="col-2 mx-2 p-2 rounded shadow-lg" style="background-color: #ffffff">
<img src="assets/twitter-icon.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
ClientApp/src/app/signup/signup.page.spec.ts 0 → 100644
View file @ 5cfc6a6d
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { SignupPage } from './signup.page';
describe('SignupPage', () => {
let component: SignupPage;
let fixture: ComponentFixture<SignupPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ SignupPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(SignupPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
ClientApp/src/app/signup/signup.page.ts 0 → 100644
View file @ 5cfc6a6d
import { Component, OnInit } from '@angular/core';
import {PythonBackendService} from '../core/python-backend.service';
import {Router} from '@angular/router';
import {SpringBackendServiceService} from '../spring-backend-service.service';
import {UserDto} from '../interfaces/user-dto';
@Component({
selector: 'app-signup',
templateUrl: './signup.page.html',
styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {
userDto: UserDto = {id: null, name: '', password: '', username: ''};
private error: string;
private passwordRepeat: string;
constructor(
private pythonBackendService: PythonBackendService,
private router: Router,
private springBackendServiceService: SpringBackendServiceService
) { }
ngOnInit() {
}
submit() {
if (this.userDto.username && this.userDto.password) {
this.springBackendServiceService.signup(this.userDto)
.subscribe(res => {
console.log(res);
if (res.id) {
this.router.navigate(['/login']);
}else {
this.error = 'Signup failed. Please try another username';
}
}, error => {
console.log(error);
this.error = 'Signup failed';
});
}
}
}
ClientApp/src/environments/environment.ts
View file @ 5cfc6a6d
...@@ -3,7 +3,20 @@ ...@@ -3,7 +3,20 @@
// The list of file replacements can be found in `angular.json`. // The list of file replacements can be found in `angular.json`.
export const environment = { export const environment = {
production: false production: false,
baseUrlSkinImageClassification: 'http://3.22.114.178:5000/',
baseUrlSymptoms: 'http://3.22.114.178:5001/',
baseUrlOntology: 'http://3.22.114.178:5002/',
baseUrlWeight: 'http://3.22.114.178:5003/',
baseUrlWeightPuppy: 'http://3.22.114.178:5004/',
// baseUrlDb: 'http://3.22.114.178:5005/',
// baseUrlSkinImageClassification: 'http://localhost:5000/',
// baseUrlSymptoms: 'http://localhost:5001/',
// baseUrlOntology: 'http://localhost:5002/',
// baseUrlWeight: 'http://localhost:5003/',
// baseUrlWeightPuppy: 'http://localhost:5004/',
baseUrlDb: 'http://localhost:5005/',
baseUrlSpring: 'http://3.22.114.178:8080/'
}; };
/* /*
......
ClientApp/src/index.html
View file @ 5cfc6a6d
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" /> <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- add to homescreen for ios --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
...@@ -21,6 +23,7 @@ ...@@ -21,6 +23,7 @@
<body> <body>
<app-root></app-root> <app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
ClientApp/src/theme/variables.scss
View file @ 5cfc6a6d
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
/** Ionic CSS Variables **/ /** Ionic CSS Variables **/
:root { :root {
/** primary **/ /** primary **/
--ion-color-primary: #3880ff; --ion-color-primary: #3880FF;
--ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-contrast-rgb: 255, 255, 255;
...@@ -75,162 +75,3 @@ ...@@ -75,162 +75,3 @@
--ion-color-light-shade: #d7d8da; --ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9; --ion-color-light-tint: #f5f6f9;
} }
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;
--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;
--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
/*
* iOS Dark Theme
* -------------------------------------------
*/
.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-item-background: #000000;
--ion-card-background: #1c1c1d;
}
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}
/*
* Material Design Dark Theme
* -------------------------------------------
*/
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #1f1f1f;
--ion-tab-bar-background: #1f1f1f;
--ion-card-background: #1e1e1e;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment