Skip to content

GitLab

F
freeclaims.org
Commit 0d55c364 authored by wyc's avatar wyc
Browse files
Options

Merge branch 'rocco/frontend' into 'master' 

add bootstrap frontend

See merge request !2
parents 8f6950d3 3842fc0a
Hide whitespace changes
Inline Side-by-side
Showing with 517 additions and 37 deletions
server/src/main.rs
View file @ 0d55c364
......@@ -47,6 +47,10 @@ struct ServerConfig {
#[template(path = "index.html")]
struct Index;
#[derive(Template)]
#[template(path = "about.html")]
struct About;
// technically these two don't need to be a template but having it as a template means the
// existance of the file is checked at compile time
#[derive(Template)]
......@@ -86,6 +90,14 @@ fn index() -> impl Responder {
HttpResponse::Ok().content_type("text/html").body(body)
}
fn about() -> impl Responder {
// TODO: use HttpRequest and generate full url
// maybe there are actix helpers to generate urls
let body = About.render().unwrap();
HttpResponse::Ok().content_type("text/html").body(body)
}
fn logout(session: Session) -> impl Responder {
session.clear();
"Session cleared"
......@@ -420,6 +432,8 @@ fn main() {
)
.route("/", web::get().to(index))
.route("/about", web::get().to(about))
.route("/login", web::get().to(login_start_view))
.route("/verify", web::get().to(verify_start_view))
.route("/issue_credential", web::get().to(issue_credential))
......
server/templates/about.html 0 → 100644
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- General -->
<div class="container">
<header class="jumbotron vertical-center my-4" style="background-color:transparent !important;">
<h1 class="display-3">About freeclaims.org</h1>
<p class="lead">How the identity community brings verifiable credentials to <i>everyone.</i></p>
</header>
<div class="row">
<div class="col-lg">
<h1 class="font-weight-light">What is freeclaims.org?</h1>
<p>freeclaims.org allows anyone to generate a basic verifiable credential about existing accounts they may own.
The process works by logging a user in to an identity provider, and then selecting a claim to verify such as the ownership of a
phone number. Once the process is completed, the user will be the brand new owner of a W3C verifiable credential which may be stored and
shared in any way they wish.
</p>
</div>
</div>
<div class="row">
<div class="col-lg">
<h1 class="font-weight-light">Why does freeclaims.org have value?</h1>
<p>freeclaims.org has value because it demonstrates that a verifiable credentials implementation
is easily accessible, and it creates a meaningful architecture for issuance. Although the current
credentials being issued are dependent on OAuth 2.0 and centralized providers, we feel that experimentation
with abstraction is the key to the adoption of the standard - and with the current provided method, we now
have the potential to generate millions of them.
</p>
</div>
</div>
<div class="row">
<div class="col-lg">
<h1 class="font-weight-light">How it currently works: did:oauth2</h1>
<p>Most Internet users already have several
OAuth 2.0-enabled accounts. The DID specification states that "methods may also
be developed for identifiers registered in federated or centralized identity
management systems." This is one such method that we've developed based on OAuth 2.0. It aims to facilitate DID
adoption and therefore user control by leveraging network effects of the most
prominent networks today.
</p>
</div>
</div>
</div>
<!-- /.container -->
</body>
</html>
\ No newline at end of file
server/templates/index.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h1>Welcome to freeclaims.org!</h1>
<p>Freeclaims.org is a service that allows you to associate claims about things you own, like email addresses, phone numbers, and domain name, to identities you own, like Google and Facebook accounts, in a distributed manner.</p>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<p>The process works by logging you in to an identity provider, and then selecting a claim to verify, like ownership of a phone number.</p>
<!-- Page Content -->
<div class="container">
<p>Once the process is completed, you will be the brand new owner of a W3C verifiable credential which may be stored and shared in any way your heart desires.</p>
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="https://i.imgur.com/fdEK596.png" alt="">
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">Welcome to freeclaims.org</h1>
<p>freeclaims.org is a service that allows you to associate claims about things you own, like email addresses, phone
numbers, and domain name, to identities you own, like Google and Facebook accounts, in a distributed manner.</p>
<a class="btn btn-primary" href="/about">Find Out More</a>
</div>
</div>
<!-- row -->
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Google Account</h2>
<p class="card-text">Issue credential to a Google identity.</p>
</div>
<div class="card-footer">
<a href="login/google" class="btn btn-primary btn-sm">Issue</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Amazon Account</h2>
<p class="card-text">Issue credential to an Amazon identity</p>
</div>
<div class="card-footer">
<a href="login/amazon" class="btn btn-primary btn-sm">Issue</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Microsoft Account</h2>
<p class="card-text">Issue credential to a Microsoft identity</p>
</div>
<div class="card-footer">
<a href="login/msgraph" class="btn btn-primary btn-sm">Issue</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Facebook Account</h2>
<p class="card-text">Issue credential to a Facebook identity</p>
</div>
<div class="card-footer">
<a href="login/facebook" class="btn btn-primary btn-sm">Issue</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<a href="/login">Begin credentialization process</a><br/>
</div>
<!-- /.container -->
<!-- Footer -->
<footer>
<div class="container">
<p class="m-0 text-center text-white">Made with love from Alpine</p>
</div>
<!-- /.container -->
</footer>
</body>
</html>
server/templates/verification_providers.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h3>Verifications</h3>
<p>
<a href="verify/sms">Verify SMS</a><br/>
<a href="verify/email">Verify Email</a><br/>
<a href="verify/domain">Verify Domain</a><br/>
</p>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- General -->
<div class="container">
<header class="jumbotron my-4" style="background-color:transparent !important;">
<h1 class="display-3">Verifications</h1>
<p class="lead">Use one of the following verification methods to continue the issuance process</p>
</header>
<!-- Verification Buttons -->
<div class="row text-center">
<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">Verify via SMS</h4>
<p class="card-text">Use an existing phone number to verify.</p>
</div>
<div class="card-footer">
<a href="verify/sms" class="btn btn-primary">Verify</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">Verify via Email</h4>
<p class="card-text">Use an existing email address to verify.</p>
</div>
<div class="card-footer">
<a href="verify/email" class="btn btn-primary">Verify</a>
</div>
</div>
</div>
<!---
<div class="col-lg-3 col-md-6">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">Verify via Domain</h4>
<p class="card-text">Use an existing domain to verify.</p>
</div>
<div class="card-footer">
<a href="verify/domain" class="btn btn-primary">Verify</a>
</div>
</div>
</div> -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
server/templates/verify_email_input.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h1>Email Verification</h1>
<h3>Please enter the verification code sent to {{ email }}.</h3>
<form action="/verify/email/verify_code" method="post">
<input type="text" name="verification_code" /><br/>
<p><input type="submit"></p>
</form>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- General -->
<div class="container">
<header class="jumbotron my-4" style="background-color:transparent !important;">
<h1 class="display-3">Email Verification</h1>
<form action="/verify/email/verify_code" method="post">
<div class="form-group">
<label for="verifyEmail">Please enter the verification code sent to {{ email }}.</label>
<input type="text" name="verification_code" class="form-control" id="verifyEmail">
</br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
server/templates/verify_email_start.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h1>Email Verification</h1>
<h3>What is your email address?</h3>
<form action="/verify/email/input_code" method="post">
<input type="text" name="email" /><br/>
<p><input type="submit"></p>
</form>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- General -->
<div class="container">
<header class="jumbotron my-4" style="background-color:transparent !important;">
<h1 class="display-3">Email Verification</h1>
<form action="/verify/email/input_code" method="post">
<div class="form-group">
<label for="emailInput">What is your email address?</label>
<input type="text" name="email" class="form-control" id="emailInput">
</br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</header>
</body>
</html>
server/templates/verify_sms_input.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h1>SMS Verification</h1>
<h3>Please enter the verification code sent to {{ phone_number }}.</h3>
<form action="/verify/sms/verify_code" method="post">
<input type="text" name="verification_code" /><br/>
<p><input type="submit"></p>
</form>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/">freeclaims.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- General -->
<div class="container">
<header class="jumbotron my-4" style="background-color:transparent !important;">
<h1 class="display-3">SMS Verification</h1>
<form action="/verify/sms/verify_code" method="post">
<div class="form-group">
<label for="smsVerify">Please enter the verification code sent to {{ phone_number }}.</label>
<input type="text" name="verification_code" class="form-control" id="smsVerify">
</br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</header>
</body>
</html>
</html>
\ No newline at end of file
server/templates/verify_sms_start.html
View file @ 0d55c364
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<meta charset="utf-8" />
<title>freeclaims.org</title>
</head>
<body>
<h1>SMS Verification</h1>
<h3>What is your phone number?</h3>
<form action="/verify/sms/input_code" method="post">
<input type="text" name="phone_number" /><br/>
<p><input type="submit"></p>
</form>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">