| @@ -0,0 +1,7 @@ | ||
| <div class="container-fluid"> | ||
| <div class="row card col-lg-12"> | ||
| <p class="mx-auto alert alert-success">Erfolgreich eingeloggt</p> | ||
| <img class="mx-auto" src="https://i.imgur.com/bl5W6ll.jpg" alt="welcomeSign"> | ||
|
|
||
| </div> | ||
| </div> |
| @@ -0,0 +1,25 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { InterfaceComponent } from './interface.component'; | ||
|
|
||
| describe('InterfaceComponent', () => { | ||
| let component: InterfaceComponent; | ||
| let fixture: ComponentFixture<InterfaceComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ InterfaceComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(InterfaceComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
| @@ -0,0 +1,16 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'app-interface', | ||
| templateUrl: './interface.component.html', | ||
| styleUrls: ['./interface.component.css'] | ||
| }) | ||
| export class InterfaceComponent implements OnInit { | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit() { | ||
| } | ||
|
|
||
| } |
| @@ -1,11 +1,53 @@ | ||
| .selection { | ||
| padding: 100px 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .abstand { | ||
| margin: 70px 0; | ||
| } | ||
|
|
||
| .fix { | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| .inputBtn { | ||
| -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7; | ||
| -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7; | ||
| box-shadow:inset 0px 1px 0px 0px #54a3f7; | ||
| background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e74b5), color-stop(1, #2a4d9e)); | ||
| background:-moz-linear-gradient(top, #2e74b5 5%, #2a4d9e 100%); | ||
| background:-webkit-linear-gradient(top, #2e74b5 5%, #2a4d9e 100%); | ||
| background:-o-linear-gradient(top, #2e74b5 5%, #2a4d9e 100%); | ||
| background:-ms-linear-gradient(top, #2e74b5 5%, #2a4d9e 100%); | ||
| background:linear-gradient(to bottom, #2e74b5 5%, #2a4d9e 100%); | ||
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e74b5', endColorstr='#2a4d9e',GradientType=0); | ||
| background-color:#2e74b5; | ||
| -moz-border-radius:3px; | ||
| -webkit-border-radius:3px; | ||
| border-radius:3px; | ||
| border:1px solid #124d77; | ||
| display:inline-block; | ||
| cursor:pointer; | ||
| color:#ffffff; | ||
| font-family:Arial; | ||
| font-size:20px; | ||
| font-weight:bold; | ||
| padding:6px 24px; | ||
| text-decoration:none; | ||
| text-shadow:0px 1px 0px #154682; | ||
| } | ||
| .inputBtn:hover { | ||
| background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2a4d9e), color-stop(1, #2e74b5)); | ||
| background:-moz-linear-gradient(top, #2a4d9e 5%, #2e74b5 100%); | ||
| background:-webkit-linear-gradient(top, #2a4d9e 5%, #2e74b5 100%); | ||
| background:-o-linear-gradient(top, #2a4d9e 5%, #2e74b5 100%); | ||
| background:-ms-linear-gradient(top, #2a4d9e 5%, #2e74b5 100%); | ||
| background:linear-gradient(to bottom, #2a4d9e 5%, #2e74b5 100%); | ||
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a4d9e', endColorstr='#2e74b5',GradientType=0); | ||
| background-color:#2a4d9e; | ||
| } | ||
| .inputBtn:active { | ||
| position:relative; | ||
| top:1px; | ||
| } |
| @@ -1,22 +1,40 @@ | ||
| <div class="container"> | ||
| <div class="row abstand"> | ||
| <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> | ||
| <div> | ||
| <h4>Du bist neu?</h4> | ||
| <h5>Dann registriere dich!</h5> | ||
| <button class="inputBtn" (click)="registerForm()">Register</button> | ||
|
|
||
| <h4 class="fix">Dich habe ich schonmal gesehen?!</h4> | ||
| <h5>Dann log dich ein und bleibe uns treu!</h5> | ||
| <button class="inputBtn" (click)="loginForm()">Login</button> | ||
| </div> | ||
| </div> | ||
| <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> | ||
| <div *ngIf="form == 'register'" id="registering"> | ||
| <h2>Register</h2> | ||
|
|
||
| <p><input class="form-control" type="text" placeholder="username" #regUserName/></p> | ||
| <p><input class="form-control" type="password" placeholder="password" #regPassword/></p> | ||
| <input class="form-control" type="text" placeholder="retype password" #regRePassword/> | ||
| <br> | ||
| <button class="inputBtn" (click)="checkRegistering(regUserName.value,regPassword.value,regRePassword.value)">submit</button> | ||
| </div> | ||
|
|
||
| <div *ngIf="form == 'login'" id="logintemplate"> | ||
| <h2>Login </h2> | ||
| <p><input class="form-control" type="text" placeholder="username" #logUserName/></p> | ||
| <p><input class="form-control" type="password" placeholder="password" #logPassword/></p> | ||
| <p><a routerLink="/courses" class="inputBtn" (click)="checkLogin(logUserName.value,logPassword.value)">submit</a></p> | ||
| <a href="#" onclick="alert('your password has been send to you by e-mail');">forgot password </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
| @@ -30,4 +30,8 @@ | ||
|
|
||
| .align-middle1 { | ||
| padding-top: 50px; | ||
| } | ||
|
|
||
| #login-data { | ||
| display: none; | ||
| } | ||
| @@ -1,8 +1,10 @@ | ||
|
|
||
| .chartImg{ | ||
| width: 100%; | ||
| } | ||
| .why{ | ||
| line-height: 3em; | ||
| padding: 20px; | ||
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 100%, rgba(255, 255, 255, 0.9) 100%), url(https://images.unsplash.com/photo-1486927181919-3ac1fc3a8082?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e073e351e1acc46e05a1b6d748724bdd&auto=format&fit=crop&w=1400&q=60); | ||
| } | ||
|
|
| @@ -0,0 +1,146 @@ | ||
|
|
||
| .row{ | ||
| color: #333; | ||
| } | ||
| .team-heading{ | ||
| margin-top: 30px; | ||
| font-size: 3em; | ||
| text-shadow: 1px 1px 1px grey; | ||
| } | ||
| .jumbotron{ | ||
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 100%, rgba(255, 255, 255, 0.3) 100%), | ||
| url('https://images.unsplash.com/photo-1523265642686-c2b105eb146e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=12a50ff039f20e3f388af8ef554d3655&auto=format&fit=crop&w=800&q=60'); | ||
| background-repeat: no-repeat; | ||
| height: 350px; | ||
| background-size: cover; | ||
| background-position: center center; | ||
| } | ||
| .team-subHeading{ | ||
| margin-top: 25px; | ||
| text-shadow: 1px 1px 1px grey; | ||
| } | ||
| .team-text{ | ||
| line-height: 2.5em; | ||
| } | ||
| /* Transition---------------------------------------------------- */ | ||
| @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800); | ||
| @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); | ||
| figure.snip0028 { | ||
| font-family: 'Raleway', Arial, sans-serif; | ||
| color: #fff; | ||
| position: relative; | ||
| float: left; | ||
| overflow: hidden; | ||
| margin: 10px 1%; | ||
| min-width: 350px; | ||
| max-width: 310px; | ||
| max-height: 400px; | ||
| width: 100%; | ||
| background: #000000; | ||
| } | ||
| figure.snip0028 * { | ||
| -webkit-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
| figure.snip0028 img { | ||
| opacity: 1; | ||
| width: 100%; | ||
| -webkit-transition: opacity 0.35s; | ||
| transition: opacity 0.35s; | ||
| } | ||
| figure.snip0028 figcaption { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| text-align: left; | ||
| } | ||
| figure.snip0028 figcaption > div { | ||
| background-color: #fff; | ||
| position: absolute; | ||
| width: 100%; | ||
| bottom: 15px; | ||
| left: 100%; | ||
| padding: 7px 10px; | ||
| border-radius: 0 0 0 5px; | ||
| -webkit-transition: left 0.35s; | ||
| transition: left 0.35s; | ||
| -webkit-transition-delay: 0s; | ||
| transition-delay: 0s; | ||
| } | ||
|
|
||
| figure.snip0028 figcaption > div a { | ||
| padding-top: 15px; | ||
| color: #333; | ||
| text-decoration: none; | ||
| opacity: 0.7; | ||
| -webkit-transition: opacity 0.2s; | ||
| transition: opacity 0.2s; | ||
| } | ||
| figure.snip0028 figcaption > div a:hover { | ||
| opacity: 1; | ||
| cursor: default; | ||
| } | ||
| figure.snip0028 figcaption::before { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| content: ''; | ||
| opacity: 0; | ||
| -webkit-transition: opacity 0.4s; | ||
| transition: opacity 0.4s; | ||
| -webkit-transition-delay: 0.3s; | ||
| transition-delay: 0.3s; | ||
| background-image: linear-gradient(to top, #000000 0%, transparent 50%, #000000 100%); | ||
| } | ||
| figure.snip0028 h2 { | ||
| border-radius: 0 5px 0 0; | ||
| text-align: right; | ||
| margin: 0; | ||
| padding: 20px; | ||
| position: absolute; | ||
| font-size: 1em; | ||
| bottom: 70px; | ||
| right: 100%; | ||
| width: 90%; | ||
| word-spacing: -0.1em; | ||
| font-weight: 300; | ||
| text-transform: uppercase; | ||
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | ||
| background-color: #000000; | ||
| -webkit-transition: all 0.4s ease-in-out; | ||
| transition: all 0.4s ease-in-out; | ||
| -webkit-transition-delay: 0.2s; | ||
| transition-delay: 0.2s; | ||
| cursor: default; | ||
| } | ||
| figure.snip0028 h2 span { | ||
| font-weight: 800; | ||
| } | ||
| figure.snip0028:hover img, | ||
| figure.snip0028.hover img { | ||
| opacity: 0.7; | ||
| } | ||
| figure.snip0028:hover figcaption > div, | ||
| figure.snip0028.hover figcaption > div { | ||
| left: 35%; | ||
| -webkit-transition-delay: 0.2s; | ||
| transition-delay: 0.2s; | ||
| } | ||
| figure.snip0028:hover figcaption h2, | ||
| figure.snip0028.hover figcaption h2 { | ||
| right: 30px; | ||
| opacity: 1; | ||
| -webkit-transition-delay: 0s; | ||
| transition-delay: 0s; | ||
| } | ||
| figure.snip0028:hover figcaption::before, | ||
| figure.snip0028.hover figcaption::before { | ||
| opacity: 0.8; | ||
| -webkit-transition-delay: 0s; | ||
| transition-delay: 0s; | ||
| cursor: default; | ||
| } |
| @@ -0,0 +1,57 @@ | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-12"> | ||
| <h1 class="team-heading">Zusammen Stark</h1> | ||
| <div class="row"> | ||
| <div class="col-lg-12"> | ||
| <div class="jumbotron"> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2 class="team-subHeading">Wir machen das unmögliche möglich</h2> | ||
| <p class="team-text">Wer dieser Tage das Wort Teambuilding googelt, kommt auf rund 16 Millionen Treffer. Viele davon wollen Rat geben. So wird empfohlen, die Mitarbeiter in den Klettergarten zu schicken oder auf ein Segelschiff. Andere kreisen um Begriffe wie Seminar und Workshop. Coachin Silvia Maute legt dem Teambuilding zunächst einmal "drei große V" zugrunde, nämlich Vertrauen, Verantwortung und Veränderung. Was das konkret heißt? "Nehmen sie die einzelnen Worte ruhig einmal auseinander", sagt Maute, "denn Sprache benutzen heißt, sich mental zu programmieren."</p> | ||
| <div class="row"> | ||
| <div class="col-lg-4 col-md-4 col-sm-12"> | ||
| <figure class="snip0028"> | ||
| <img src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6de094989d0cf912f189ad8b7322d6d2&auto=format&fit=crop&w=1534&q=80" alt="sample7"/> | ||
| <figcaption> | ||
| <div> | ||
| <a href="#"><p>Gemeinsam Stark</p></a> | ||
| </div> | ||
| <h2>Ludwig Harrich</h2> | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
| <div class="col-lg-4 col-md-4 col-sm-12"> | ||
| <figure class="snip0028"> | ||
| <img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=351&q=80" alt="sample9"/> | ||
| <figcaption> | ||
| <div> | ||
| <a href="#"><p>Wir schaffen es!</p></a> | ||
| </div> | ||
| <h2>Frida Fohlenweide</h2> | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
| <div class="col-lg-4 col-md-4 col-sm-12"> | ||
| <figure class="snip0028"> | ||
| <img src="https://www.bme.cornell.edu/engineering/customcf/iws_ai_faculty_display/ai_images/caa238-profile.jpg" alt="sample9"/> | ||
| <figcaption> | ||
| <div> | ||
| <a href="#"><p>Vertrauen Sie uns</p></a> | ||
| </div> | ||
| <h2>Rüdiger Nelson</h2> | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| </div> |
| @@ -0,0 +1,25 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { TeamComponent } from './team.component'; | ||
|
|
||
| describe('TeamComponent', () => { | ||
| let component: TeamComponent; | ||
| let fixture: ComponentFixture<TeamComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ TeamComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(TeamComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
| @@ -0,0 +1,15 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-team', | ||
| templateUrl: './team.component.html', | ||
| styleUrls: ['./team.component.css'] | ||
| }) | ||
| export class TeamComponent implements OnInit { | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit() { | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,8 @@ | ||
| [ | ||
| { | ||
| "category": "weekly" | ||
| }, | ||
| { | ||
| "category": "monthly" | ||
| } | ||
| ] |