Commit dad169cb authored by saliou673's avatar saliou673
Browse files

[FONT] add signup page template

parent d1dfe580
......@@ -4,11 +4,13 @@ import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { SignupComponent } from './signup/signup.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'test', component: MessagetestComponent },
{ path: 'login', component: LoginComponent},
{ path: 'signup', component: SignupComponent},
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotfoundComponent },
];
......
......@@ -12,6 +12,7 @@ import { NotfoundComponent } from './notfound/notfound.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
import { HeaderComponent } from './header/header.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
@NgModule({
declarations: [
......@@ -23,7 +24,8 @@ import { LoginComponent } from './login/login.component';
NotfoundComponent,
MessagetestComponent,
HeaderComponent,
LoginComponent
LoginComponent,
SignupComponent
],
imports: [
BrowserModule,
......
......@@ -13,6 +13,7 @@
<li><a routerLink="/home" routerLinkActive="active">Home</a></li>
<li><a routerLink="/test" routerLinkActive="active">Test socket</a></li>
<li><a routerLink="/login" routerLinkActive="active">Se connecter</a></li>
<li><a routerLink="/signup" routerLinkActive="active">Créer un compte</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
......
......@@ -9,7 +9,7 @@
<button class="btn button">Se connecter</button>
</div>
<div class="text-center mt-2">
<a routerLink="signup">Créer un compte </a>
<a routerLink="/signup">Créer un compte </a>
</div>
</form>
</div>
......
html {
background: #FF7361;
/*
background: radial-gradient(#fff176, #f57f17);
min-height: 100%;
*/
font-family: "Roboto", sans-serif;
}
.title {
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
color: #FF7361;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
}
.description {
text-align: center;
color: #666;
margin-bottom: 30px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="con-password"]
{
padding: 10px 20px;
border: 1px solid #999;
border-radius: 3px;
display: block;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #FF7361;
}
input[type="radio"] {
margin-right: 10px;
}
label {
margin-bottom: 20px;
display: block;
font-size: 18px;
color: #666;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 20px 0;
cursor: pointer;
}
label:first-child {
margin-bottom: 0;
border-bottom: none;
}
.button,
.rerun-button {
padding: 10px 20px;
border-radius: 3px;
background: #FF7361;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
}
.button:hover,
.rerun-button:hover {
background: #e66400;
}
.button.rerun-button,
.rerun-button.rerun-button {
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 50px;
box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2);
display: none;
}
.text-center {
text-align: center;
}
.modal-wrap {
max-width: 600px;
margin: 50px auto;
-webkit-transition: -webkit-transform 300ms ease-in-out;
transition: -webkit-transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}
.modal-header {
height: 45px;
background: white;
border-bottom: 1px solid #ccc;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.modal-header span {
display: block;
height: 12px;
width: 12px;
margin: 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
}
.modal-header span.is-active {
background: rgba(0, 0, 0, 0.4);
background: #FF8F00;
}
.modal-bodies {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.modal-body {
background: white;
padding: 40px 100px;
box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);
margin-bottom: 50px;
position: absolute;
top: 0;
display: none;
box-sizing: border-box;
width: 100%;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.modal-body.is-showing {
display: block;
}
.sign-in28912 a{
text-decoration: none;
}
.btn-primary3838{
padding: 10px 20px;
border-radius: 3px;
background: #3071A9;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
}
.btn-danger37883{
padding: 10px 20px;
border-radius: 3px;
background: #CF4539;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-bottom: 20px;
}
.mt-2 {
margin-top: 20px;
}
\ No newline at end of file
<div class="modal-wrap">
<div class="modal-bodies">
<div class="modal-body modal-body-step-1 is-showing">
<div class="title">Création de compte</div>
<form>
<input type="text" placeholder="Nom de famille *" />
<input type="text" placeholder="Prénom(s) *" />
<input type="text" placeholder="Pseudo*" />
<input type="email" placeholder="E-Mail*" />
<input type="password" placeholder="Mot de passe*" />
<input type="password" placeholder="Confirmer le mot de passe*" />
<div class="text-center">
<div class="button">Créer</div>
</div>
<div class="text-center mt-2">
<a routerLink="/home">Revenir à l'accueil </a>
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SignupComponent } from './signup.component';
describe('SignupComponent', () => {
let component: SignupComponent;
let fixture: ComponentFixture<SignupComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SignupComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SignupComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
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