DIV: A
BATCH: C
GROUP: A1
Pokharkar Akshay Hanumant Chandrabhaga VU1F1920053
Dhumal Pratik Pramod Smita VU1F1920058
Singh Aman Shashidhar Sangeeta VU1F1920064
Hadawale Hrithik Kashinath Archana VU1F1920059
SOURCE CODE:
/**home**/
//admin.py
from django.contrib import admin
from home.models import Contact, Library, category, signup
# Register your models here.
admin.site.register(Contact)
admin.site.register(category)
admin.site.register(Library)
admin.site.register(signup)
//apps.py
from django.apps import AppConfig
class HomeConfig(AppConfig):
name = 'home'
//models.py
from django.db import models
# Create your models here.
class category(models.Model):
category = models.CharField(max_length=25)
def __str__(self):
return self.category
class Contact(models.Model):
name = models.CharField(max_length=20)
email = models.CharField(max_length=50)
phone = models.CharField( max_length=12)
date = models.DateField()
def __str__(self) :
return self.name
class Library(models.Model):
category = models.ForeignKey(category, on_delete=models.CASCADE, null=True)
name = models.CharField(max_length=50)
author = models.CharField(max_length=50, null=True)
link = models.FileField( upload_to="pdf", max_length=100)
def __str__(self):
return self.name
class signup(models.Model):
name = models.CharField(max_length=20)
email = models.CharField(max_length=50)
def __str__(self):
return self.name
//urls.py
from os import name
from home.views import index
from django.contrib import admin
from django.urls import path
from home import views
urlpatterns = [
path('', views.index, name= 'home'),
path('home',views.index, name= 'home'),
path('about',views.about, name='about'),
path('Category',views.Category, name='services'),
path('Books',views.Books, name='services'),
path('Contact',views.contact, name='contact'),
path('signup',views.signup, name='signup'),
path('pay',views.pay, name='pay')
//views.py
from django.shortcuts import render, HttpResponse
from home.models import Contact, Library, category
from datetime import datetime
from django.contrib import messages
# Create your views here.
def index(request):
return render(request, "index.html")
#return HttpResponse("Home page")
def about(request):
return render(request, "about.html")
#return HttpResponse("about page")
def Books(request):
return render(request, "books.html")
def Category(request):
lis = Library.objects.all()
return render(request, "category.html", {"lis":lis})
#return HttpResponse("Books page")
def contact(request):
if request.method == "POST":
name = request.POST.get("name")
email = request.POST.get("email")
phone = request.POST.get("phone")
contact = Contact(name=name, email= email, phone= phone, date= datetime.today())
contact.save()
messages.success(request, 'Your message has been sent.')
return render(request, "contact.html")
#return HttpResponse("contact page")
def signup(request):
return render(request, "signup.html")
def pay(request):
return render(request, "pay.html")
/**home**/
/**static**/
//App.js
const form=document.getElementById('form');
const username=document.getElementById('username');
const email=document.getElementById('email');
const password=document.getElementById('password');
const password2=document.getElementById('password2');
//Show input error message
function showError(input,message){
const formControl=input.parentElement;
formControl.className='form-control error';
const small=formControl.querySelector('small');
small.innerText=message;
function showSuccess(input){
const formControl=input.parentElement;
formControl.className='form-control success';
//Email
function isValidEmail(email)
const re= /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',function(e){
e.preventDefault();
if(username.value===''){
showError(username,'Username is required');
else{
showSuccess(username);
if(email.value===''){
showError(email,'Email is required');
}else if(!isValidEmail(email.value)){
showError(email,'Email is not valid');
else{
showSuccess(email);
if(password.value===''){
showError(password,'Password is required');
else{
showSuccess(password);
if(password2.value===''){
showError(password2,'confirm password is required');
else{
showSuccess(password2);
}
});
/**static**/
/**Templates**/
//base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!--Website icon-->
<link rel="icon" href="static/images/images.png" type="image/png" sizes="15x10">
<title> {% block title %}{% endblock title %} | welcome To Online Library</title>
<style>
*{
box-sizing: border-box;
body{
background-image: url('./static/images/pexels-photo-19077851.jpeg');
background-size: cover;
}
nav{
text-transform: uppercase;
font-family: 'Archivo Black', sans-serif;
footer{
background-color: black;
color: bisque;
</style>
</head>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Online Library</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="home">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Books">My Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Category">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pay">Membership</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
{% block body %} {% endblock body %}
<!-- Optional JavaScript; choose one of the two! -->
{% block js %} {% endblock js%}
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src=" https://code.jquery.com/jquery-3.5.1.slim.min.js%" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js "
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-
w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
-->
</body>
<!-- Footer -->
<footer class="page-footer font-small black pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase">Contact us</h5>
<p>Here you can use rows and columns to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Help</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Feedback</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© {% now 'Y' %} Copyright:
<a href=""> OnlineLibrary.com</a>
<!-- <script>
d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script> -->
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</html>
//books.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Books{% endblock title %}
{% block body %}
<div class="container my-5">
{% for i in lis %}
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5>{{i.name}}</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">
<a href="{{i.link}}"" >
View
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock body %}
//category.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Books{% endblock title %}
{% block body %}
<div class="container">
<div class="name">Category Name:</div>
<div class="container my-5" style=" border: 2px solid;">
{% for i in lis %}
<div class="row" >
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5>{{i.name}}</h5>
<h7>Author:{{i.author}}</h7>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">
<a href="pdf/{{i.link}}" >
View
</a>
</button>
<button class="btn btn-sm btn-outline-secondary cart" id ="{{i.id}}">Add To My
Books</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
//contact.html
{% extends 'base.html' %}
{% csrf_token %}
{% block title %}Contact{% endblock title %}
{% block body %}
<div class="container mb-3 py-4">
<h1 class="text-center">Contact Us</h1>
<form method="post" action="/Contact">
{% csrf_token %}
<div class="form-group">
<div class="col-md-6 mb-3">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="form-group">
<div class="col-md-6 mb-3">
<label for="email">Email Id</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="
[email protected]" required >
<div class="invalid-tooltip">
Please provide a valid Email Id.
</div>
</div>
<div class="form-group col-md-6 mb-3">
<label for="phone">Phone Number</label>
<input type="phone" class="form-control" id="phone" name="phone" required>
<div class="invalid-tooltip">
Please provide a valid Phone Number.
</div>
</div>
</div>
<button class="btn btn-primary col-md-1.5 " type="submit">Submit form</button>
</form>
</div>
<style>
.container{
color: beige;
</style>
{% endblock body %}
//index.html
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block body %}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<style>
*{
box-sizing: border-box;
}
body{
background-image: url('./static/images/pexels-photo-19077851.jpeg');
background-size: cover;
h2{
text-transform: uppercase;
color: white;
font-size: 40px;
font-weight: 700;
text-shadow:8px 8px 8px rgba(0, 0, 0, 0.644);
.heading{
position: absolute;
display: flex;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
.container1 .intro{
position: absolute;
display: flex;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
.container1 .intro p{
color: wheat;
font-family: 'Bebas Neue';
text-shadow:8px 8px 8px rgba(0, 0, 0, 0.644);
font-size: 25px;
</style>
</head>
<body>
<div class="heading">
<h2>Online Library</h2>
</div>
<div class="container1">
<div class="intro">
<p>
Online Library Project is about Providing more free boks to students, Teachers,<br>
People in search of ebooks,etc.
We decided to provide as much as free books we can. <br>
Members can add books if they want.
</p>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
</div>
</div>
<div class="container my-5 pt-5 mt-5">
<br><br><br><br><br><br><br><br><br><br>
<h2>Various Genre Books</h2>
<hr class="my-4">
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-
chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-
chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="static/images/scifi.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Sci fi</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/programming.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Programming</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/Religion.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Religion</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="static/images/educational.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Educational</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/thriller.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Thriller</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/medicine.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Medicine</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="static/images/biography.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Biography</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/horror.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Horror</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="static/images/Drama.jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Drama</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
{% endblock body %}
//pay.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Pay{% endblock title %}
{% block body %}
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<link href='https://use.fontawesome.com/releases/v5.8.1/css/all.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script
src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<div class="container py-5">
<!-- For demo purpose -->
<div class="row mb-4">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-6">Become a Member, Pay here</h1>
</div>
</div> <!-- End -->
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="card shadow-lg">
<div class="card-header">
<div class="bg-white shadow-lg pt-4 pl-2 pr-2 pb-2">
<!-- Credit card form tabs -->
<ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3">
<li class="nav-item"> <a data-toggle="pill" href="#credit-card" class="nav-link active
"> <i class="fas fa-credit-card mr-2"></i> Credit Card </a> </li>
<li class="nav-item"> <a data-toggle="pill" href="#paypal" class="nav-link "> <i
class="fab fa-paypal mr-2"></i> Paypal </a> </li>
<li class="nav-item"> <a data-toggle="pill" href="#net-banking" class="nav-link "> <i
class="fas fa-mobile-alt mr-2"></i> Net Banking </a> </li>
</ul>
</div> <!-- End -->
<!-- Credit card form content -->
<div class="tab-content">
<!-- credit card info-->
<div id="credit-card" class="tab-pane fade show active pt-3">
<form role="form" onsubmit="event.preventDefault()">
<div class="form-group"> <label for="username">
<h6>Card Owner</h6>
</label> <input type="text" name="username" placeholder="Card Owner Name"
required class="form-control "> </div>
<div class="form-group"> <label for="cardNumber">
<h6>Card number</h6>
</label>
<div class="input-group"> <input type="text" name="cardNumber"
placeholder="Valid card number" class="form-control " required>
<div class="input-group-append"> <span class="input-group-text text-
muted"> <i class="fab fa-cc-visa mx-1"></i> <i class="fab fa-cc-mastercard mx-1"></i> <i class="fab
fa-cc-amex mx-1"></i> </span> </div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group"> <label><span class="hidden-xs">
<h6>Expiration Date</h6>
</span></label>
<div class="input-group"> <input type="number" placeholder="MM"
name="" class="form-control" required> <input type="number" placeholder="YY" name=""
class="form-control" required> </div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group mb-4"> <label data-toggle="tooltip" title="Three digit
CV code on the back of your card">
<h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>
</label> <input type="text" required class="form-control"> </div>
</div>
</div>
<div class="card-footer"> <button type="button" class="subscribe btn btn-primary
btn-block shadow-sm"> Confirm Payment </button>
</form>
</div>
</div> <!-- End -->
<!-- Paypal info -->
<div id="paypal" class="tab-pane fade pt-3">
<h6 class="pb-2">Select your paypal account type</h6>
<div class="form-group "> <label class="radio-inline"> <input type="radio"
name="optradio" checked> Domestic </label> <label class="radio-inline"> <input type="radio"
name="optradio" class="ml-5">International </label></div>
<p> <button type="button" class="btn btn-primary "><i class="fab fa-paypal mr-2"></i>
Log into my Paypal</button> </p>
<p class="text-muted"> Note: After clicking on the button, you will be directed to a
secure gateway for payment. After completing the payment process, you will be redirected back to
the website to view details of your order. </p>
</div> <!-- End -->
<!-- bank transfer info -->
<div id="net-banking" class="tab-pane fade pt-3">
<div class="form-group "> <label for="Select Your Bank">
<h6>Select your Bank</h6>
</label> <select class="form-control" id="ccmonth">
<option value="" selected disabled>--Please select your Bank--</option>
<option>Bank 1</option>
<option>Bank 2</option>
<option>Bank 3</option>
<option>Bank 4</option>
<option>Bank 5</option>
<option>Bank 6</option>
<option>Bank 7</option>
<option>Bank 8</option>
<option>Bank 9</option>
<option>Bank 10</option>
</select> </div>
<div class="form-group">
<p> <button type="button" class="btn btn-primary "><i class="fas fa-mobile-alt mr-
2"></i> Proceed Payment</button> </p>
</div>
<p class="text-muted">Note: After clicking on the button, you will be directed to a
secure gateway for payment. After completing the payment process, you will be redirected back to
the website to view details of your order. </p>
</div> <!-- End -->
<!-- End -->
</div>
</div>
</div>
</div>
<style>
body {
background: #f5f5f5
.rounded {
border-radius: 1rem
.nav-pills .nav-link {
color: #555
.nav-pills .nav-link.active {
color: white
input[type="radio"] {
margin-right: 5px
.bold {
font-weight: bold
</style>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}
//pdfpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf</title>
</head>
<body>
<embed src="/pdf/<embed src=”/pdf/sample-3pp.pdf#page=2" type=”application/pdf”
width=”100%” height=”100%”>
</body>
</html>
//signup.html
{% extends 'base.html' %}
{% block title %}Sign up Or Login{% endblock title %}
{% block body %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
:root{
--success-color:#2ecc71;
--error-color: #e74c3c;
.container{
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0, 0.3);
margin-top: 10%;
width: 400px;
h2{
text-align: center;
margin: 0 0 20px;
.form{
padding: 30px 40px;
.form-control{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
.form-control label{
color: #777;
display: block;
margin-bottom: 5px;
.form-control input{
border: 2px solid #f0f0f0;
border-radius: 4px;
width: 100%;
padding: 10px;
font-size: 14px;
.form-control input:focus{
outline: 0;
border-color: #777;
.form-control.success input{
border-color:var(--success-color);
.form-control.error input{
border-color:var(--error-color);
.form-control small{
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
.form-control.error small{
visibility: visible;
}
.form button{
cursor: pointer;
background-color: #3498db;
border: 2px sold #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
width: 100%;
</style>
<div class="container">
<form id="form" class="form" autocomplete="off">
<h2>Register with us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Passsword</label>
<input type="password" id="password2" placeholder="Enter password again"><br><br>
<small>Error message</small>
</div><br><br>
<button type="submit">Submit</button>
</form>
</div>
<script src="static/App.js"></script>
{% endblock body %}
/**Templates**/
