Sup_File/src/app/home/home.component.html
2018-06-24 22:16:44 +02:00

521 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--Main Navigation-->
<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
<logo>
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link" mdbPageScroll href="#introSection" [pageScrollDuration]="600">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600">Features</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link" mdbPageScroll href="#priceSection" [pageScrollDuration]="600">Offers</a>
</li>
</ul>
</links>
</mdb-navbar>
<!--Intro Section-->
<section class="view intro-2 mask rgba-gradient" id="introSection">
<div class="full-bg-img mask rgba-gradient">
<div class="container flex-center">
<div class="d-flex align-items-center content-height w-100">
<div class="row flex-center pt-5 mt-3 w-100">
<div class="col-md-6 text-center text-md-left mb-5">
<div class="white-text">
<h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Easy, secured and accessible everywhere keep and save your data on SupFile !
All kind of files supported (medias, compressed files, …)
<br>
Keep the control on the cloud.
<br>
Accessible from any device.
<br>
Stay organized with a single simple interface.
</h6>
<br>
<a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600" mdbWavesEffect>Learn more</a>
</div>
</div>
<div class="col-md-6 col-xl-5 offset-xl-1">
<!--Form-->
<div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
<div class="card-body">
<!--Header-->
<div class="text-center">
<h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>
<hr class="hr-light">
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix white-text"></i>
<input type="email" id="form2" class="form-control" [(ngModel)]="loginData.username" data-error=" " data-success=" " mdbInputDirective>
<label for="form2">Email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix white-text"></i>
<input type="password" id="form4" class="form-control" [(ngModel)]="loginData.password" data-error=" " data-success=" " mdbInputDirective>
<label for="form4">Password</label>
</div>
<div class="text-center">
<button class="btn btn-primary waves-light" mdbWavesEffect (click)="login()">Log In</button>
<button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
<hr class="hr-light mb-3 mt-4">
<div class="inline-ul text-center d-flex justify-content-center">
<a class="icons-sm fb-ic px-4" (click)="facebook()"><i class="fa fa-facebook white-text"> </i></a>
<a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
<a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!--/.Form-->
<!--Form-->
<div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
<div class="card-body">
<!--Header-->
<div class="text-center">
<h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
<hr class="hr-light">
</div>
<!--Body-->
<!--<div class="md-form">-->
<!--<i class="fa fa-user prefix white-text"></i>-->
<!--<input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>-->
<!--<label for="form3">Your name</label>-->
<!--</div>-->
<div class="md-form">
<i class="fa fa-envelope prefix white-text"></i>
<input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " [(ngModel)]="signupData.username" class="form-control" mdbInputDirective>
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix white-text"></i>
<input type="password" id="form4" data-success=" " data-error=" " [(ngModel)]="signupData.password" class="form-control" mdbInputDirective>
<label for="form4">Your password</label>
</div>
<div class="form-check white-text">
<input class="form-check-input" type="checkbox" id="checkbox11" (click)='toggleCheckbox()' mdbInputDirective>
<label class="form-check-label" for="checkbox11">I agree to the terms of this website</label>
<button class="btn btn-sm btn-outline-white waves-light" id="rules" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Rules</button>
</div>
<!--Modal-->
<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
</div>
</div>
</div>
</div>
<!--Modal-->
<div class="text-center">
<button class="btn btn-primary waves-light" [disabled]='!toggleButton' (click)="signup()" mdbWavesEffect>Register</button>
<button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Back to log in</button>
<hr class="hr-light mb-3 mt-4">
<div class="inline-ul text-center d-flex justify-content-center">
<a class="icons-sm fb-ic px-4" (click)="facebook()" onclick="location.href='/api/facebook'"><i class="fa fa-facebook white-text"> </i></a>
<a class="icons-sm gplus-ic px-4" onclick="location.href='/api/github'" ><i class="fa fa-google white-text"> </i></a>
<a class="icons-sm px-4" onclick="location.href='/api/google'"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!--/.Form-->
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section: Features v.1-->
<section class="features text-center" id="featuresSection">
<div class="container-fluid wow fadeInDown">
<!--Section heading-->
<h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text">SupFile is the easiest way to access anywhere to your files !</p>
</div>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4 wow fadeInLeft">
<i class="fa fa-share-alt fa-3x pink-text"></i>
<h5 class="font-weight-bold mt-3">Simple</h5>
<p class="grey-text">With a simple and intuitive interface you are able to have a total control access to your data on SupFile.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 wow fadeInUp">
<i class="fa fa-lock fa-3x cyan-text"></i>
<h5 class="font-weight-bold mt-3">Secured</h5>
<p class="grey-text">You are the only holder on your files. SupFile is secured to keep your privacy and your datas in total security.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 wow fadeInRight">
<i class="fa fa-comments-o fa-3x purple-text"></i>
<h5 class="font-weight-bold mt-3">Accessible</h5>
<p class="grey-text">Accès to your cloud on any device. SupFile application is available soon on the PlayStore.
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.1-->
<hr class="wow fadeInRight" id="priceSection">
<!--Section: Pricing v.2-->
<section class="text-center pb-3 my-5">
<div class="container-fluid wow fadeInDown">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5"><strong>Expand</strong> your horizons</p>
</div>
<!--Grid row-->
<div class="row priceList">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInRight">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-cyan-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Basic</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">0</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>30</strong> Go</p>
</li>
<li>
<p>
<strong>Limited</strong> Speed</p>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInDown">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Pro</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">5</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>90</strong> Go</p>
</li>
<li>
<p>
<strong>Fast Download</strong></p>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInLeft">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-purple-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Premium</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">15</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>Unlimited</strong> Space</p>
</li>
<li>
<p>
<strong>Unlimited</strong> Speed</p>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.2-->
<!--Footer-->
<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">
<!--Social buttons-->
<div class="text-center mb-3">
<a class="btn-floating btn-small btn-fb waves-light" href="https://www.facebook.com/ArcadiaDev" mdbWavesEffect>
<i class="fa fa-facebook"> </i>
</a>
<a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"> </i>
</a>
<a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"> </i>
</a>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<div class="footer-copyright text-center py-3">
<div class="container-fluid">
© 2018 Copyright:
<a href=""> Arcadia </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- Button trigger modal-->
<button id="openModalButton" type="button" class="btn btn-primary waves-light" [hidden]="true" data-toggle="modal" data-target="#basicExample" (click)="cookies?.show()" mdbWavesEffect>
Bottom
</button>
<!--Modal: modalCookie-->
<div mdbModal #cookies="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: false}">
<div class="modal-dialog modal-frame modal-bottom text-center" role="document">
<div class="modal-content" id="cookiesModal" style="background-color: #7283a7!important;">
<div class="modal-body">
<div class="row px-4">
<p class="pt-3 pr-2 text-white">Our website use cookies do you agree ?</p>
<button type="button" class="btn btn-outline-white btn-md waves-light" data-dismiss="modal" (click)="cookies.hide()" mdbWavesEffect>Close</button>
<button type="button" class="btn btn-outline-white btn-md waves-light" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Read rules</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal: modalCookie-->
<!--Modal-->
<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
</div>
</div>
</div>
</div>
<!--Modal-->