Change login to Bootstrap 5
This commit is contained in:
Chris Jean-Marie
parent
17fae75576
commit
c24286136c
|
|
@ -12,6 +12,7 @@
|
|||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
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>
|
||||
<nav class="navbar navbar-expand-sm bg-light">
|
||||
|
|
|
|||
|
|
@ -10,25 +10,37 @@
|
|||
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
|
||||
</div>
|
||||
|
||||
<!-- The slideshow/carousel -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<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 class="carousel-item">
|
||||
<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 class="carousel-item">
|
||||
<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>
|
||||
<!-- The slideshow/carousel -->
|
||||
|
||||
<!-- Left and right controls/icons -->
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Left and right controls/icons -->
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -1,147 +1,54 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
{% extends "base.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>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<title>Jean-Marie Family</title>
|
||||
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
|
||||
<link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
|
||||
<style>
|
||||
@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="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
|
||||
<div class="panel border bg-white">
|
||||
<div class="panel-heading">
|
||||
<h3 class="pt-3 font-weight-bold">Login</h3>
|
||||
</div>
|
||||
<!-- <div class="panel-body p-3">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="container">
|
||||
<div class="row">
|
||||
<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-heading">
|
||||
<h3 class="pt-3 font-weight-bold">Login</h3>
|
||||
</div>
|
||||
<div class="panel-body p-3">
|
||||
<form action="login_script.php" method="POST">
|
||||
<div class="form-group py-2">
|
||||
<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>
|
||||
</form>
|
||||
</div> -->
|
||||
<div class="mx-3 my-2 py-2 bordert">
|
||||
<div class="text-center py-3">
|
||||
<!-- <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
|
||||
</div>
|
||||
<div class="mx-3 my-2 py-2 bordert">
|
||||
<div class="text-center py-3">
|
||||
<a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img
|
||||
src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt="">
|
||||
</a>
|
||||
<a href="https://www.google.com" target="_blank" class="px-2"> <img
|
||||
|
|
@ -171,17 +78,15 @@
|
|||
alt=""> </a>
|
||||
<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"
|
||||
alt=""> </a> -->
|
||||
<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="200" alt="discord logo logodownload download logotipos" /></a>
|
||||
</div>
|
||||
alt=""> </a>
|
||||
<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="200" alt="discord logo logodownload download logotipos" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</div>
|
||||
<script type='text/javascript'></script> -->
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue