Change login to Bootstrap 5
This commit is contained in:
Chris Jean-Marie
parent
17fae75576
commit
c24286136c
|
|
@ -12,6 +12,7 @@
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-expand-sm bg-light">
|
<nav class="navbar navbar-expand-sm bg-light">
|
||||||
|
|
|
||||||
|
|
@ -10,18 +10,30 @@
|
||||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
|
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- The slideshow/carousel -->
|
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
<img src="assets/images/slide-01.jpg" alt="View from the dock" class="d-block w-100">
|
<img src="assets/images/slide-01.jpg" alt="View from the dock" class="d-block w-100">
|
||||||
|
<div class="carousel-caption">
|
||||||
|
<h3>Jean-Marie Family</h3>
|
||||||
|
<p>View from the dock</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<img src="assets/images/slide-02.jpg" alt="Sunset at 3 sisters" class="d-block w-100">
|
<img src="assets/images/slide-02.jpg" alt="Sunset at 3 sisters" class="d-block w-100">
|
||||||
|
<div class="carousel-caption">
|
||||||
|
<h3>Jean-Marie Family</h3>
|
||||||
|
<p>Sunset over the 3 sisters</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<img src="assets/images/slide-03.jpg" alt="Purple sunset" class="d-block w-100">
|
<img src="assets/images/slide-03.jpg" alt="Purple sunset" class="d-block w-100">
|
||||||
|
<div class="carousel-caption">
|
||||||
|
<h3>Jean-Marie Family</h3>
|
||||||
|
<p>Purple sunset</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- The slideshow/carousel -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Left and right controls/icons -->
|
<!-- Left and right controls/icons -->
|
||||||
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
|
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
|
||||||
|
|
|
||||||
|
|
@ -1,147 +1,54 @@
|
||||||
<!doctype html>
|
{% extends "base.html" %}
|
||||||
<html>
|
{% block content %}
|
||||||
|
<div class="container-fluid vh-100" style="margin-top:200px">
|
||||||
|
<div class="" style="margin-top:200px">
|
||||||
|
<div class="rounded d-flex justify-content-center">
|
||||||
|
<div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
|
||||||
|
<div class="text-center">
|
||||||
|
<h3 class="text-primary">Sign In</h3>
|
||||||
|
</div>
|
||||||
|
<form action="">
|
||||||
|
<div class="p-4">
|
||||||
|
<!-- <div class="input-group mb-3">
|
||||||
|
<span class="input-group-text bg-primary"><i
|
||||||
|
class="bi bi-person-plus-fill text-white"></i></span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username">
|
||||||
|
</div>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-text bg-primary"><i class="bi bi-key-fill text-white"></i></span>
|
||||||
|
<input type="password" class="form-control" placeholder="password">
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||||
|
<label class="form-check-label" for="flexCheckDefault">
|
||||||
|
Remember Me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary text-center mt-2" type="submit">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
<p class="text-center mt-5">Don't have an account?
|
||||||
|
<span class="text-primary">Sign Up</span>
|
||||||
|
</p>
|
||||||
|
<p class="text-center text-primary">Forgot your password?</p> -->
|
||||||
|
<a href="/discord_auth" title="Image from freepnglogos.com"><img
|
||||||
|
src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
|
||||||
|
width="100" alt="Login with Discord" /></a>
|
||||||
|
|
||||||
<head>
|
</div>
|
||||||
<meta charset='utf-8'>
|
</form>
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
</div>
|
||||||
<title>Jean-Marie Family</title>
|
</div>
|
||||||
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
|
</div>
|
||||||
<link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
|
</div>
|
||||||
<style>
|
<!--<div class="container">
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
|
|
||||||
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Poppins', sans-serif
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100vh;
|
|
||||||
background: linear-gradient(to top, #c9c9ff 50%, #9090fa 90%) no-repeat
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 50px auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-heading {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
#forgot {
|
|
||||||
min-width: 100px;
|
|
||||||
margin-left: auto;
|
|
||||||
text-decoration: none
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-inline label {
|
|
||||||
padding-left: 10px;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn.btn-primary {
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
min-height: 380px;
|
|
||||||
box-shadow: 20px 20px 80px rgb(218, 218, 218);
|
|
||||||
border-radius: 12px
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
color: #4343ff
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='text'],
|
|
||||||
input[type='password'] {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-eye-slash.btn {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
a[target='_blank'] {
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.1s ease-in-out
|
|
||||||
}
|
|
||||||
|
|
||||||
.bordert {
|
|
||||||
border-top: 1px solid #aaa;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
.bordert:after {
|
|
||||||
content: "or connect with";
|
|
||||||
position: absolute;
|
|
||||||
top: -13px;
|
|
||||||
left: 33%;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 0px 8px
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: 360px) {
|
|
||||||
#forgot {
|
|
||||||
margin-left: 0;
|
|
||||||
padding-top: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 30px 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.bordert:after {
|
|
||||||
left: 25%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
|
|
||||||
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
|
|
||||||
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body oncontextmenu='return false' class='snippet-body'>
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
|
<div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
|
||||||
<div class="panel border bg-white">
|
<div class="panel border bg-white">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="pt-3 font-weight-bold">Login</h3>
|
<h3 class="pt-3 font-weight-bold">Login</h3>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="panel-body p-3">
|
<div class="panel-body p-3">
|
||||||
<form action="login_script.php" method="POST">
|
<form action="login_script.php" method="POST">
|
||||||
<div class="form-group py-2">
|
<div class="form-group py-2">
|
||||||
<div class="input-field"> <span class="far fa-user p-2"></span> <input type="text"
|
<div class="input-field"> <span class="far fa-user p-2"></span> <input type="text"
|
||||||
|
|
@ -160,10 +67,10 @@
|
||||||
<div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a>
|
<div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="mx-3 my-2 py-2 bordert">
|
<div class="mx-3 my-2 py-2 bordert">
|
||||||
<div class="text-center py-3">
|
<div class="text-center py-3">
|
||||||
<!-- <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
|
<a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
|
||||||
src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt="">
|
src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt="">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.google.com" target="_blank" class="px-2"> <img
|
<a href="https://www.google.com" target="_blank" class="px-2"> <img
|
||||||
|
|
@ -171,7 +78,7 @@
|
||||||
alt=""> </a>
|
alt=""> </a>
|
||||||
<a href="https://www.github.com" target="_blank" class="px-2"> <img
|
<a href="https://www.github.com" target="_blank" class="px-2"> <img
|
||||||
src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"
|
src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"
|
||||||
alt=""> </a> -->
|
alt=""> </a>
|
||||||
<a href="/discord_auth" title="Image from freepnglogos.com"><img
|
<a href="/discord_auth" title="Image from freepnglogos.com"><img
|
||||||
src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
|
src="https://www.freepnglogos.com/uploads/discord-logo-png/discord-logo-logodownload-download-logotipos-1.png"
|
||||||
width="200" alt="discord logo logodownload download logotipos" /></a>
|
width="200" alt="discord logo logodownload download logotipos" /></a>
|
||||||
|
|
@ -181,7 +88,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type='text/javascript'></script>
|
<script type='text/javascript'></script> -->
|
||||||
</body>
|
{% endblock content %}
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue