Merge branch 'dev' of https://github.com/silverfox68/jean-marie into dev
This commit is contained in:
Chris Jean-Marie
commit
42fb24d9a0
|
|
@ -12,6 +12,8 @@ services:
|
|||
- GOOGLE_CLIENT_SECRET=L6uI7FQGoMJd-ay1HO_iGJ6M
|
||||
- DISCORD_CLIENT_ID=956189108559036427
|
||||
- DISCORD_CLIENT_SECRET=dx2DZxjDhVMCCnGX4xpz5MxSTgZ4lHBI
|
||||
- FACEBOOK_CLIENT_ID=1529124327484248
|
||||
- FACEBOOK_CLIENT_SECRET=189509b5eb907b3ce34b7e8459030f21
|
||||
volumes:
|
||||
- ../jean-marie/templates:/templates
|
||||
ports:
|
||||
|
|
|
|||
8
run.sh
8
run.sh
|
|
@ -1 +1,7 @@
|
|||
GOOGLE_CLIENT_ID=735264084619-clsmvgdqdmum4rvrcj0kuk28k9agir1c.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=L6uI7FQGoMJd-ay1HO_iGJ6M DISCORD_CLIENT_ID=956189108559036427 DISCORD_CLIENT_SECRET=dx2DZxjDhVMCCnGX4xpz5MxSTgZ4lHBI cargo run
|
||||
GOOGLE_CLIENT_ID=735264084619-clsmvgdqdmum4rvrcj0kuk28k9agir1c.apps.googleusercontent.com \
|
||||
GOOGLE_CLIENT_SECRET=L6uI7FQGoMJd-ay1HO_iGJ6M \
|
||||
DISCORD_CLIENT_ID=956189108559036427 \
|
||||
DISCORD_CLIENT_SECRET=dx2DZxjDhVMCCnGX4xpz5MxSTgZ4lHBI \
|
||||
FACEBOOK_CLIENT_ID=1529124327484248 \
|
||||
FACEBOOK_CLIENT_SECRET=189509b5eb907b3ce34b7e8459030f21 \
|
||||
cargo run
|
||||
109
src/main.rs
109
src/main.rs
|
|
@ -56,10 +56,12 @@ async fn main() {
|
|||
let mut oauth_clients = HashMap::<&str, BasicClient>::new();
|
||||
|
||||
// Get the client structures
|
||||
let facebook_oauth_client = facebook_oauth_client();
|
||||
let discord_oauth_client = discord_oauth_client();
|
||||
|
||||
// Get oauth clients for the hashmap
|
||||
//oauth_clients.insert("Google".to_string(), google_oauth_client);
|
||||
oauth_clients.insert("Facebook", facebook_oauth_client);
|
||||
oauth_clients.insert("Discord", discord_oauth_client);
|
||||
|
||||
// build our application with a route
|
||||
|
|
@ -77,12 +79,14 @@ async fn main() {
|
|||
),
|
||||
)
|
||||
.route("/", get(index))
|
||||
.route("/google_auth", get(google_auth))
|
||||
.route("/discord_auth", get(discord_auth))
|
||||
.route("/login", get(login))
|
||||
.route("/logout", get(logout))
|
||||
.route("/dashboard", get(dashboard))
|
||||
.route("/google_auth", get(google_auth))
|
||||
.route("/facebook_auth", get(facebook_auth))
|
||||
.route("/discord_auth", get(discord_auth))
|
||||
.route("/auth/callback", get(google_authorized))
|
||||
.route("/auth/facebook", get(facebook_authorized))
|
||||
.route("/auth/discord", get(discord_authorized))
|
||||
.layer(Extension(store))
|
||||
.layer(Extension(oauth_clients));
|
||||
|
|
@ -143,6 +147,27 @@ fn google_oauth_client() -> BasicClient {
|
|||
.set_redirect_uri(RedirectUrl::new(redirect_url).unwrap())
|
||||
}
|
||||
|
||||
fn facebook_oauth_client() -> BasicClient {
|
||||
let redirect_url = env::var("REDIRECT_URL")
|
||||
.unwrap_or_else(|_| "http://localhost:40192/auth/callback".to_string());
|
||||
|
||||
let facebook_client_id = env::var("FACEBOOK_CLIENT_ID").expect("Missing FACEBOOK_CLIENT_ID!");
|
||||
let facebook_client_secret = env::var("FACEBOOK_CLIENT_SECRET").expect("Missing FACEBOOK_CLIENT_SECRET!");
|
||||
let facebook_auth_url = env::var("FACEBOOK_AUTH_URL").unwrap_or_else(|_| {
|
||||
"https://www.facebook.com/v11.0/dialog/oauth".to_string()
|
||||
});
|
||||
let facebook_token_url = env::var("FACEBOOK_TOKEN_URL")
|
||||
.unwrap_or_else(|_| "https://graph.facebook.com/v11.0/oauth/access_token".to_string());
|
||||
|
||||
BasicClient::new(
|
||||
ClientId::new(facebook_client_id),
|
||||
Some(ClientSecret::new(facebook_client_secret)),
|
||||
AuthUrl::new(facebook_auth_url).unwrap(),
|
||||
Some(TokenUrl::new(facebook_token_url).unwrap()),
|
||||
)
|
||||
.set_redirect_uri(RedirectUrl::new(redirect_url).unwrap())
|
||||
}
|
||||
|
||||
fn discord_oauth_client() -> BasicClient {
|
||||
let redirect_url = env::var("REDIRECT_URL")
|
||||
.unwrap_or_else(|_| "http://localhost:40192/auth/discord".to_string());
|
||||
|
|
@ -324,6 +349,25 @@ async fn google_auth() -> impl IntoResponse {
|
|||
Redirect::to(&auth_url.to_string())
|
||||
}
|
||||
|
||||
async fn facebook_auth() -> impl IntoResponse {
|
||||
let (pkce_code_challenge, pkce_code_verifier) = PkceCodeChallenge::new_random_sha256();
|
||||
|
||||
// Generate the authorization URL to which we'll redirect the user.
|
||||
let (auth_url, csrf_state) = facebook_oauth_client()
|
||||
.authorize_url(CsrfToken::new_random)
|
||||
.add_scope(Scope::new(
|
||||
"https://www.googleapis.com/auth/userinfo.profile".to_string(),
|
||||
))
|
||||
.add_scope(Scope::new(
|
||||
"https://www.googleapis.com/auth/userinfo.email".to_string(),
|
||||
))
|
||||
.set_pkce_challenge(pkce_code_challenge)
|
||||
.url();
|
||||
|
||||
// Redirect to Google's oauth service
|
||||
Redirect::to(auth_url.to_string().parse().unwrap())
|
||||
}
|
||||
|
||||
async fn discord_auth() -> impl IntoResponse {
|
||||
let discord_oauth_client = discord_oauth_client();
|
||||
let (auth_url, _csrf_token) = discord_oauth_client
|
||||
|
|
@ -345,10 +389,12 @@ struct AuthRequest {
|
|||
async fn google_authorized(
|
||||
Query(query): Query<AuthRequest>,
|
||||
Extension(store): Extension<MemoryStore>,
|
||||
Extension(google_oauth_client): Extension<BasicClient>,
|
||||
Extension(oauth_clients): Extension<HashMap::<&str, BasicClient>>,
|
||||
) -> impl IntoResponse {
|
||||
|
||||
print!("{}", query.code);
|
||||
// Check for Facebook client
|
||||
if oauth_clients.contains_key("Google") {
|
||||
// Get Facebook client
|
||||
let oauth_client = oauth_clients.get(&"Google").unwrap();
|
||||
/*
|
||||
// Get an auth token
|
||||
let token = google_oauth_client
|
||||
|
|
@ -386,6 +432,7 @@ async fn google_authorized(
|
|||
headers.insert(SET_COOKIE, cookie.parse().unwrap());
|
||||
|
||||
//(headers, Redirect::to("/dashboard".parse().unwrap()))
|
||||
}
|
||||
|
||||
let mut page = String::new();
|
||||
page.push_str(&"Display the data returned by Google\n".to_string());
|
||||
|
|
@ -398,6 +445,58 @@ async fn google_authorized(
|
|||
page
|
||||
}
|
||||
|
||||
async fn facebook_authorized(
|
||||
Query(query): Query<AuthRequest>,
|
||||
Extension(store): Extension<MemoryStore>,
|
||||
Extension(oauth_clients): Extension<HashMap::<&str, BasicClient>>,
|
||||
) -> impl IntoResponse {
|
||||
// Check for Facebook client
|
||||
if oauth_clients.contains_key("Facebook") {
|
||||
// Get Facebook client
|
||||
let oauth_client = oauth_clients.get(&"Facebook").unwrap();
|
||||
|
||||
// Get an auth token
|
||||
let token = oauth_client
|
||||
.exchange_code(AuthorizationCode::new(query.code.clone()))
|
||||
.request_async(async_http_client)
|
||||
.await
|
||||
.unwrap();
|
||||
|
||||
// Fetch user data from discord
|
||||
let client = reqwest::Client::new();
|
||||
let user_data: User = client
|
||||
// https://discord.com/developers/docs/resources/user#get-current-user
|
||||
.get("https://discordapp.com/api/users/@me") //TODO - replace with Facebook info url
|
||||
.bearer_auth(token.access_token().secret())
|
||||
.send()
|
||||
.await
|
||||
.unwrap()
|
||||
.json::<User>()
|
||||
.await
|
||||
.unwrap();
|
||||
|
||||
// Create a new session filled with user data
|
||||
let mut session = Session::new();
|
||||
session.insert("user", &user_data).unwrap();
|
||||
|
||||
// Store session and get corresponding cookie
|
||||
let cookie = store.store_session(session).await.unwrap().unwrap();
|
||||
|
||||
// Build the cookie
|
||||
let cookie = format!("{}={}; SameSite=Lax; Path=/", COOKIE_NAME, cookie);
|
||||
|
||||
// Set cookie
|
||||
let mut headers = HeaderMap::new();
|
||||
headers.insert(SET_COOKIE, cookie.parse().unwrap());
|
||||
|
||||
(headers, Redirect::to("/dashboard".parse().unwrap()))
|
||||
} else {
|
||||
let mut headers = HeaderMap::new();
|
||||
|
||||
(headers, Redirect::to("/".parse().unwrap()))
|
||||
}
|
||||
}
|
||||
|
||||
async fn discord_authorized(
|
||||
Query(query): Query<AuthRequest>,
|
||||
Extension(store): Extension<MemoryStore>,
|
||||
|
|
|
|||
|
|
@ -1,340 +0,0 @@
|
|||
<!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="">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Jean-Marie Family Website</title>
|
||||
|
||||
<!-- Additional CSS Files -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
|
||||
<!-- <link rel="stylesheet" href="assets/css/templatemo-breezed.css">
|
||||
<link rel="stylesheet" href="assets/css/owl-carousel.css"> -->
|
||||
<link rel="stylesheet" href="assets/css/lightbox.css">
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
|
||||
|
||||
<style>
|
||||
/* CUSTOMIZE THE NAVBAR
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Special class on .container surrounding .navbar, used for positioning it into place. */
|
||||
.navbar-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
margin-top: 20px;
|
||||
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
|
||||
}
|
||||
.navbar-wrapper .navbar {
|
||||
|
||||
}
|
||||
|
||||
/* Remove border and change up box shadow for more contrast */
|
||||
.navbar .navbar-inner {
|
||||
border: 0;
|
||||
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
|
||||
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
/* Downsize the brand/project name a bit */
|
||||
.navbar .brand {
|
||||
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
/* Navbar links: increase padding for taller navbar */
|
||||
.navbar .nav > li > a {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
/* Offset the responsive button for proper vertical alignment */
|
||||
.navbar .btn-navbar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.carousel .container {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
height: 80px;
|
||||
margin-top: 0;
|
||||
font-size: 120px;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.4);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel .item {
|
||||
height: 500px;
|
||||
}
|
||||
.carousel img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
background-color: transparent;
|
||||
position: static;
|
||||
max-width: 550px;
|
||||
padding: 0 20px;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.carousel-caption h1,
|
||||
.carousel-caption .lead {
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.4);
|
||||
}
|
||||
.carousel-caption .btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .span4 {
|
||||
text-align: center;
|
||||
}
|
||||
.marketing h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.marketing .span4 p {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 80px 0; /* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
.featurette {
|
||||
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
|
||||
overflow: hidden; /* Vertically center images part 2: clear their floats. */
|
||||
}
|
||||
.featurette-image {
|
||||
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
|
||||
}
|
||||
|
||||
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
|
||||
.featurette-image.pull-left {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.featurette-image.pull-right {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
.featurette-heading {
|
||||
font-size: 50px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (max-width: 979px) {
|
||||
|
||||
.container.navbar-wrapper {
|
||||
margin-bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
.navbar-inner {
|
||||
border-radius: 0;
|
||||
margin: -20px 0;
|
||||
}
|
||||
|
||||
.carousel .item {
|
||||
height: 500px;
|
||||
}
|
||||
.carousel img {
|
||||
width: auto;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.featurette {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.featurette-image.pull-left,
|
||||
.featurette-image.pull-right {
|
||||
display: block;
|
||||
float: none;
|
||||
max-width: 40%;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.navbar-inner {
|
||||
margin: -20px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.carousel .container {
|
||||
|
||||
}
|
||||
.carousel .item {
|
||||
height: 300px;
|
||||
}
|
||||
.carousel img {
|
||||
height: 300px;
|
||||
}
|
||||
.carousel-caption {
|
||||
width: 65%;
|
||||
padding: 0 70px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.carousel-caption h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.carousel-caption .lead,
|
||||
.carousel-caption .btn {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.marketing .span4 + .span4 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.featurette-heading {
|
||||
font-size: 30px;
|
||||
}
|
||||
.featurette .lead {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ***** Preloader Start ***** -->
|
||||
<div id="preloader">
|
||||
<div class="jumper">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ***** Preloader End ***** -->
|
||||
|
||||
|
||||
<!-- NAVBAR
|
||||
================================================== -->
|
||||
<div class="navbar-wrapper">
|
||||
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
|
||||
<div class="container">
|
||||
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="#">Jean-Marie</a>
|
||||
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
{% if userid %}
|
||||
<li><a href="/logout">Logout</a></li>
|
||||
<li>{{ name }}</li>
|
||||
{% else %}
|
||||
<li><a href="/login">Login</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!-- /.navbar-inner -->
|
||||
</div><!-- /.navbar -->
|
||||
|
||||
</div> <!-- /.container -->
|
||||
</div><!-- /.navbar-wrapper -->
|
||||
|
||||
<div id="content">{% block content %}{% endblock content %}</div>
|
||||
|
||||
<!-- ***** Footer Start ***** -->
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="assets/js/jquery-2.1.0.min.js"></script>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="assets/js/popper.js"></script>
|
||||
<script src="assets/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Plugins -->
|
||||
<script src="assets/js/owl-carousel.js"></script>
|
||||
<script src="assets/js/scrollreveal.min.js"></script>
|
||||
<script src="assets/js/waypoints.min.js"></script>
|
||||
<script src="assets/js/jquery.counterup.min.js"></script>
|
||||
<script src="assets/js/imgfix.min.js"></script>
|
||||
<script src="assets/js/slick.js"></script>
|
||||
<script src="assets/js/lightbox.js"></script>
|
||||
<script src="assets/js/isotope.js"></script>
|
||||
|
||||
<!-- Global Init -->
|
||||
<script src="assets/js/custom.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
var selectedClass = "";
|
||||
$("p").click(function(){
|
||||
selectedClass = $(this).attr("data-rel");
|
||||
$("#portfolio").fadeTo(50, 0.1);
|
||||
$("#portfolio div").not("."+selectedClass).fadeOut();
|
||||
setTimeout(function() {
|
||||
$("."+selectedClass).fadeIn();
|
||||
$("#portfolio").fadeTo(50, 1);
|
||||
}, 500);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -10,6 +10,11 @@
|
|||
<li><a href="https://fonts.google.com">Google fonts</a></li>
|
||||
<li><a href="https://www.fontspace.com">Font Space</a></li>
|
||||
</ul>
|
||||
<h3>Family tree</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.ancestry.com">Ancestry</a></li>
|
||||
<li><a href="https://www.geni.com">Geni</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<!-- ***** Main Banner Area Start ***** -->
|
||||
<div class="main-banner header-text" id="top">
|
||||
<div class="Modern-Slider">
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/20200819_173425.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Learn More</a>
|
||||
<a href="#" class="main-filled-button">Get It Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/20210709_204449.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Learn More</a>
|
||||
<a href="#" class="main-filled-button">Get It Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/20210709_211904.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Learn More</a>
|
||||
<a href="#" class="main-filled-button">Get It Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-down scroll-to-section"><a href="#about"><i class="fa fa-arrow-down"></i></a></div>
|
||||
<!-- ***** Main Banner Area End ***** -->
|
||||
|
||||
<!-- ***** About Area Starts ***** -->
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="left-text-content">
|
||||
<div class="section-heading">
|
||||
<h6>About Us</h6>
|
||||
<h2>The home of the Jean-Marie extended family</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="right-text-content">
|
||||
<p>This wesite is for the extended Jean-Marie family.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** About Area Ends ***** -->
|
||||
|
||||
{% endblock content %}
|
||||
|
|
@ -31,6 +31,12 @@
|
|||
<span class="text-primary">Sign Up</span>
|
||||
</p>
|
||||
<p class="text-center text-primary">Forgot your password?</p> -->
|
||||
<div class="position-relative border-bottom my-3 line"><span class="connect">or connect
|
||||
with</span></div>
|
||||
<a href="/facebook_auth" class="px-2"> <img
|
||||
src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" width="100"
|
||||
alt="Login with Facebook">
|
||||
</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="100" alt="Login with Discord" /></a>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<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" placeholder="Username or Email" required> </div>
|
||||
</div>
|
||||
<div class="form-group py-1 pb-2">
|
||||
<div class="input-field"> <span class="fas fa-lock px-2"></span> <input type="password" placeholder="Enter your Password" required> <button class="btn bg-white text-muted"> <span class="far fa-eye-slash"></span> </button> </div>
|
||||
</div>
|
||||
<div class="form-inline"> <input type="checkbox" name="remember" id="remember"> <label for="remember" class="text-muted">Remember me</label> <a href="#" id="forgot" class="font-weight-bold">Forgot password?</a> </div>
|
||||
<div class="btn btn-primary btn-block mt-3">Login</div>
|
||||
<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 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 src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" 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> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<section class="vh-100" style="background-color: #508bfc;">
|
||||
<div class="container py-5 h-100">
|
||||
<div class="row d-flex justify-content-center align-items-center h-100">
|
||||
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
|
||||
<div class="card shadow-2-strong" style="border-radius: 1rem;">
|
||||
<div class="card-body p-5 text-center">
|
||||
|
||||
<h3 class="mb-5">Sign in</h3>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
|
||||
<label class="form-label" for="typeEmailX-2">Email</label>
|
||||
</div>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
|
||||
<label class="form-label" for="typePasswordX-2">Password</label>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div class="form-check d-flex justify-content-start mb-4">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="form1Example3"
|
||||
/>
|
||||
<label class="form-check-label" for="form1Example3"> Remember password </label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- <a class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;" type="submit" href="/google_auth"><i class="fab fa-google me-2"></i> Sign in with google</a> -->
|
||||
<a class="btn btn-lg btn-block btn-primary" style="background-color: #5663f7;" type="submit" href="/discord_auth"><i class="fab fa-discord me-2"></i> Sign in with discord</a>
|
||||
<!-- <button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;" type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button> -->
|
||||
|
||||
</div>
|
||||
</div><
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue