Sup_File/src/app/home/home.component.html

<!--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="text-center">
                    <button class="btn btn-primary waves-light" (click)="signup()" mdbWavesEffect>Sign up</button>
                    <button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">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>


<!--Main Navigation-->

<!--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="https://www.MDBootstrap.com"> Arcadia </a>

    </div>
  </div>
  <!--/.Copyright-->

</footer>
<!--/.Footer-->

<!--<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>-->
<!--<a onclick="location.href='/api/facebook'">Login with face</a>-->