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