parent
3f86ce7f86
commit
e21aba99e3
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 882 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 65 KiB |
@ -0,0 +1,285 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #c4c3ca;
|
||||||
|
background: url("../assets/img/nyc_blur.jpg");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-size: cover;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
color: #d6a7ff;
|
||||||
|
}
|
||||||
|
.link:hover {
|
||||||
|
color: #8833d2;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h6 span{
|
||||||
|
padding: 0 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.section{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.full-height{
|
||||||
|
min-height: 90vh;
|
||||||
|
}
|
||||||
|
[type="checkbox"]:checked,
|
||||||
|
[type="checkbox"]:not(:checked){
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
.checkbox:checked + label,
|
||||||
|
.checkbox:not(:checked) + label{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: 60px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px auto;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #d6a7ff;
|
||||||
|
}
|
||||||
|
.checkbox:checked + label:before,
|
||||||
|
.checkbox:not(:checked) + label:before{
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #d6a7ff;
|
||||||
|
background-color: #102770;
|
||||||
|
font-family: 'unicons';
|
||||||
|
content: '\eb4f';
|
||||||
|
z-index: 20;
|
||||||
|
top: -10px;
|
||||||
|
left: -10px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
.checkbox:checked + label:before {
|
||||||
|
transform: translateX(44px) rotate(-270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card-3d-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 440px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
perspective: 800px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.card-3d-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position:absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: all 600ms ease-out;
|
||||||
|
}
|
||||||
|
.card-front, .card-back {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #2a2b38;
|
||||||
|
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
|
||||||
|
background-position: bottom center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 300%;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 6px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-o-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
.card-back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.center-wrap{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 35px;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translate3d(0, -50%, 35px) perspective(100px);
|
||||||
|
z-index: 20;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-group{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.form-style {
|
||||||
|
padding: 13px 20px;
|
||||||
|
padding-left: 55px;
|
||||||
|
height: 48px;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
outline: none;
|
||||||
|
color: #c4c3ca;
|
||||||
|
background-color: #1f2029;
|
||||||
|
border: none;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
|
||||||
|
}
|
||||||
|
.form-style:focus,
|
||||||
|
.form-style:active {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
|
||||||
|
}
|
||||||
|
.input-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 18px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 48px;
|
||||||
|
text-align: left;
|
||||||
|
color: #d6a7ff;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:-ms-input-placeholder {
|
||||||
|
color: #c4c3ca;
|
||||||
|
opacity: 0.7;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input::-moz-placeholder {
|
||||||
|
color: #c4c3ca;
|
||||||
|
opacity: 0.7;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input:-moz-placeholder {
|
||||||
|
color: #c4c3ca;
|
||||||
|
opacity: 0.7;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input::-webkit-input-placeholder {
|
||||||
|
color: #c4c3ca;
|
||||||
|
opacity: 0.7;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input:focus:-ms-input-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input:focus::-moz-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input:focus:-moz-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
.form-group input:focus::-webkit-input-placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
-webkit-transition : all 200ms linear;
|
||||||
|
transition: all 200ms linear;
|
||||||
|
padding: 0 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: -webkit-inline-flex;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-align-items: center;
|
||||||
|
-ms-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-justify-content: center;
|
||||||
|
-ms-justify-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
background-color: #d6a7ff;
|
||||||
|
color: #8833d2;
|
||||||
|
box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
|
||||||
|
}
|
||||||
|
.btn:active,
|
||||||
|
.btn:focus{
|
||||||
|
background-color: #8833d2;
|
||||||
|
color: #d6a7ff;
|
||||||
|
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
|
||||||
|
}
|
||||||
|
.btn:hover{
|
||||||
|
background-color: #8833d2;
|
||||||
|
color: #d6a7ff;
|
||||||
|
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 10vh;
|
||||||
|
height: 55px;
|
||||||
|
background-color: #d6a7ff;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin:10px;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="" />
|
||||||
|
<title>In English Please !</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||||
|
<!-- Font Awesome icons (free version)-->
|
||||||
|
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
|
||||||
|
<!-- Google fonts-->
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
||||||
|
rel="stylesheet" />
|
||||||
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
|
<link href="css/styles.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="page-top">
|
||||||
|
<!-- Navigation-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<a class="navbar-brand" href="#page-top">Logo</a>
|
||||||
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation">
|
||||||
|
Menu
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#game">Game</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#download">Download</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="login.html">My account</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Masthead-->
|
||||||
|
<header class="masthead">
|
||||||
|
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="mx-auto my-0 text-uppercase">IN ENGLISH PLEASE</h1>
|
||||||
|
<h2 class="text-white-50 mx-auto mt-2 mb-5">An easy-to-learn English app for students</h2>
|
||||||
|
<a class="btn btn-primary" href="#game">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- About-->
|
||||||
|
<section class="about-section text-center">
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<h2 class="text-white mb-4">Anywhere at any time</h2>
|
||||||
|
<p class="text-white-50">
|
||||||
|
Our application is avaivable on all devices. You can use it on your computer, tablet or phone.<br/>
|
||||||
|
At home, at school or even in the bus, the app adapts to your lifestyle.<br/>
|
||||||
|
Learning english has never been so easy !
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="img-fluid" src="assets/img/ipad.png" alt="..." />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<section class="projects-section">
|
||||||
|
<div class="container px-4 px-lg-5" id="game">
|
||||||
|
<!-- Game One Row-->
|
||||||
|
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
|
||||||
|
<div class="col-lg-6"><img class="img-fluid" src="assets/img/quizz.jpeg" alt="..." /></div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="bg-black text-center h-100 project">
|
||||||
|
<div class="d-flex h-100">
|
||||||
|
<div class="project-text w-100 my-auto text-center text-lg-left">
|
||||||
|
<h4 class="text-white">Quizz</h4>
|
||||||
|
<p class="mb-0 text-white-50">Test your knowledge and study smarter !</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Game Two Row-->
|
||||||
|
<div class="row gx-0 justify-content-center">
|
||||||
|
<div class="col-lg-6"><img class="img-fluid" src="assets/img/memory.jpeg" alt="..." /></div>
|
||||||
|
<div class="col-lg-6 order-lg-first">
|
||||||
|
<div class="bg-black text-center h-100 project">
|
||||||
|
<div class="d-flex h-100">
|
||||||
|
<div class="project-text w-100 my-auto text-center text-lg-right">
|
||||||
|
<h4 class="text-white">Memory</h4>
|
||||||
|
<p class="mb-0 text-white-50">Have fun associating words to help your brain learn faster</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row gx-5 align-items-center" id="download">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="mb-5 mb-lg-0 text-center text-lg-start">
|
||||||
|
<h1 class="display-1 lh-1 mb-3">Download now</h1>
|
||||||
|
<p class="lead fw-normal mb-5">Start to learn english now with the mobile app !<br>Available on Android & iOS.</p>
|
||||||
|
<div class="d-flex flex-column flex-lg-row align-items-center">
|
||||||
|
<a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com"><img class="app-badge" src="assets/img/google-play-badge.svg" alt="..." /></a>
|
||||||
|
<a href="https://www.apple.com/fr/app-store/"><img class="app-badge" src="assets/img/app-store-badge.svg" alt="..." /></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<!-- Download phone-->
|
||||||
|
<div class="download">
|
||||||
|
<div class="device-wrapper">
|
||||||
|
<div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
|
||||||
|
<div class="screen bg-black">
|
||||||
|
<video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%"><source src="assets/img/demo-screen.mp4" type="video/mp4" /></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="contact-section bg-black">
|
||||||
|
<!-- <div class="separateur">
|
||||||
|
<img src="assets/img/separator.png" alt="Separator" style="width: 100%;" />
|
||||||
|
</div> -->
|
||||||
|
<div class="container px-4 px-lg-5">
|
||||||
|
<div class="row gx-4 gx-lg-5">
|
||||||
|
<div class="col-md-4 mb-3 mb-md-0">
|
||||||
|
<div class="card py-4 h-100">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
|
||||||
|
<h4 class="text-uppercase m-0">Address</h4>
|
||||||
|
<hr class="my-4 mx-auto" />
|
||||||
|
<div class="small text-black-50">5 Avenue Blaise Pascal, Aubière 63170, France</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mb-3 mb-md-0">
|
||||||
|
<div class="card py-4 h-100">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<i class="fas fa-envelope text-primary mb-2"></i>
|
||||||
|
<h4 class="text-uppercase m-0">Email</h4>
|
||||||
|
<hr class="my-4 mx-auto" />
|
||||||
|
<div class="small text-black-50"><a href="#!">assistance@segwave.fr</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mb-3 mb-md-0">
|
||||||
|
<div class="card py-4 h-100">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<i class="fas fa-mobile-alt text-primary mb-2"></i>
|
||||||
|
<h4 class="text-uppercase m-0">Phone</h4>
|
||||||
|
<hr class="my-4 mx-auto" />
|
||||||
|
<div class="small text-black-50">+33 6 06 06 06 06</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social d-flex justify-content-center">
|
||||||
|
<a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Footer-->
|
||||||
|
<footer class="footer bg-black small text-center text-white-50">
|
||||||
|
<div class="container px-4 px-lg-5">Copyright © SegWave</div>
|
||||||
|
</footer>
|
||||||
|
<!-- Bootstrap core JS-->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<!-- Core theme JS-->
|
||||||
|
<script src="js/scripts.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
/*!
|
||||||
|
* Start Bootstrap - Grayscale v7.0.6 (https://startbootstrap.com/theme/grayscale)
|
||||||
|
* Copyright 2013-2023 Start Bootstrap
|
||||||
|
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
// Scripts
|
||||||
|
//
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', event => {
|
||||||
|
|
||||||
|
// Navbar shrink function
|
||||||
|
var navbarShrink = function () {
|
||||||
|
const navbarCollapsible = document.body.querySelector('#mainNav');
|
||||||
|
if (!navbarCollapsible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (window.scrollY === 0) {
|
||||||
|
navbarCollapsible.classList.remove('navbar-shrink')
|
||||||
|
} else {
|
||||||
|
navbarCollapsible.classList.add('navbar-shrink')
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Shrink the navbar
|
||||||
|
navbarShrink();
|
||||||
|
|
||||||
|
// Shrink the navbar when page is scrolled
|
||||||
|
document.addEventListener('scroll', navbarShrink);
|
||||||
|
|
||||||
|
// Activate Bootstrap scrollspy on the main nav element
|
||||||
|
const mainNav = document.body.querySelector('#mainNav');
|
||||||
|
if (mainNav) {
|
||||||
|
new bootstrap.ScrollSpy(document.body, {
|
||||||
|
target: '#mainNav',
|
||||||
|
rootMargin: '0px 0px -40%',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Collapse responsive navbar when toggler is visible
|
||||||
|
const navbarToggler = document.body.querySelector('.navbar-toggler');
|
||||||
|
const responsiveNavItems = [].slice.call(
|
||||||
|
document.querySelectorAll('#navbarResponsive .nav-link')
|
||||||
|
);
|
||||||
|
responsiveNavItems.map(function (responsiveNavItem) {
|
||||||
|
responsiveNavItem.addEventListener('click', () => {
|
||||||
|
if (window.getComputedStyle(navbarToggler).display !== 'none') {
|
||||||
|
navbarToggler.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="https://unicons.iconscout.com/release/v2.1.9/css/unicons.css" rel="stylesheet"/>
|
||||||
|
<link href="css/login.css" rel="stylesheet" />
|
||||||
|
<title>Login</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="section">
|
||||||
|
<a href="home.html"><img src="assets/img/home.png"></a>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row full-height justify-content-center">
|
||||||
|
<div class="col-12 text-center align-self-center py-5">
|
||||||
|
<div class="section pb-5 pt-5 pt-sm-2 text-center">
|
||||||
|
<h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6>
|
||||||
|
<input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
|
||||||
|
<label for="reg-log"></label>
|
||||||
|
<div class="card-3d-wrap mx-auto">
|
||||||
|
<div class="card-3d-wrapper">
|
||||||
|
<div class="card-front">
|
||||||
|
<div class="center-wrap">
|
||||||
|
<div class="section text-center">
|
||||||
|
<h4 class="mb-4 pb-3">Log In</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">
|
||||||
|
<i class="input-icon uil uil-at"></i>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mt-2">
|
||||||
|
<input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">
|
||||||
|
<i class="input-icon uil uil-lock-alt"></i>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn mt-4">submit</a>
|
||||||
|
<p class="mb-0 mt-4 text-center"><a href="#0" class="link">Forgot your password?</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-back">
|
||||||
|
<div class="center-wrap">
|
||||||
|
<div class="section text-center">
|
||||||
|
<h4 class="mb-4 pb-3">Sign Up</h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" name="logname" class="form-style" placeholder="Your Full Name" id="logname" autocomplete="off">
|
||||||
|
<i class="input-icon uil uil-user"></i>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mt-2">
|
||||||
|
<input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">
|
||||||
|
<i class="input-icon uil uil-at"></i>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mt-2">
|
||||||
|
<input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">
|
||||||
|
<i class="input-icon uil uil-lock-alt"></i>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="btn mt-4">submit</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Users</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Nickname</td>
|
||||||
|
<td>Name</td>
|
||||||
|
<td>Surname</td>
|
||||||
|
<td>Mail</td>
|
||||||
|
<td>Group</td>
|
||||||
|
<td>Role</td>
|
||||||
|
<td>Extra Time</td>
|
||||||
|
</tr>
|
||||||
|
{% if users is defined %}
|
||||||
|
{% for row in users %}
|
||||||
|
<tr>
|
||||||
|
<td>{{row.nickname}}</td>
|
||||||
|
<td>{{row.name}}</td>
|
||||||
|
<td>{{row.surname}}</td>
|
||||||
|
<td>{{row.email}}</td>
|
||||||
|
<td>{{row.group}}</td>
|
||||||
|
<td>{{row.role}}</td>
|
||||||
|
<td>{{row.extraTime}}</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue