dorian/blueweather
dorian/blueweather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

- cleanup of old files and css

Browse source 
- further implementation of user login
This commit is contained in:
dorian 2019-08-07 16:14:48 +02:00
parent d9c9382b41
commit 903f730502
18 changed files with 457 additions and 572 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
api/submitSensorDataExample.json Normal file → Executable file
View file

106
css/blueweather.css Normal file
View file

@ -0,0 +1,106 @@
/*
*
*/
.opacity-animated {
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
-webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
transform: scale(1);
transition: 1s all ease;
}
.flexFont {
height:100%;
width:100%;
}
/*
* Login modal
*/
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.modal-login {
color: #636363;
width: 350px;
}
.modal-login .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
}
.modal-login h4 {
text-align: center;
font-size: 26px;
}
.modal-login .form-group {
position: relative;
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px;
}
.modal-login .form-control,
.modal-login .btn {
min-height: 40px;
border-radius: 3px;
transition: all 0.5s;
border: 1px solid #ced4da;
border-width: 1px;
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px;
}
.modal-login .forgot-link {
color: #12b5e5;
float: right;
}
.modal-login .modal-footer {
color: #999;
border: none;
text-align: center;
border-radius: 5px;
font-size: 13px;
margin-top: -20px;
justify-content: center;
}
.modal-login .modal-footer a {
color: #12b5e5;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}

20
css/dashboard.css
View file

@ -81,8 +81,6 @@ body {
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
@ -110,21 +108,3 @@ body {
font-size: 3.5rem;
}
}
.dropdown-toggle::after {
display:none;
}
/*
*
*/
.opacity-animated {
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.flexFont {
height:100%;
width:100%;
}

0
css/font-awesome.min.css vendored Normal file → Executable file
View file

108
css/index.css
View file

@ -2,15 +2,105 @@
*
*/
.opacity-animated {
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
-webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
transform: scale(1);
transition: 1s all ease;
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flexFont {
height:100%;
width:100%;
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
/*
* Offcanvas
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 56px;
}
@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.nav-underline .active {
font-weight: 500;
color: #343a40;
}
.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; }
.bg-blue { background-color: #007bff; }
.bg-ff { background-color: #e6e4e4; }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
.rounded {
border-radius: .7rem !important;
}

84
css/offcanvas.css
View file

@ -1,84 +0,0 @@
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 56px;
}
@media (max-width: 991.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: #6c757d;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.nav-underline .active {
font-weight: 500;
color: #343a40;
}
.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; }
.bg-blue { background-color: #007bff; }
.bg-ff { background-color: #e6e4e4; }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
.rounded {
border-radius: .7rem !important;
}
}

44
css/signin.css
View file

@ -1,44 +0,0 @@
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

40
dashboard.html
View file

@ -13,14 +13,16 @@
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- gobal custom styles -->
<link href="css/blueweather.css" rel="stylesheet">
<!-- Custom styles for this site -->
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body style="height: 100%;">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
<nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
<!-- left part of toolbar -->
<a class="navbar-brand" href="index.html">BlueWeather</a>
@ -29,36 +31,9 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="padding: 0;">
<img class="img-profile rounded-circle" height="30" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<span data-feather="user"></span>
Profile
</a>
<a class="dropdown-item" href="#">
<span data-feather="settings"></span>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<span data-feather="log-out"></span>
Logout
</a>
</div>
</li>
<ul id="profileContainer" class="navbar-nav ml-auto">
</ul>
</div>
</nav>
<div class="container-fluid" style="height: 100%">
@ -81,7 +56,6 @@
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2" id="sensorsList">
<li class="nav-item">
<a class="nav-link" href="#">

BIN
img/user.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

47
index.html
View file

@ -8,47 +8,29 @@
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<!-- External styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
<!-- Custom styles for this template -->
<!-- gobal custom styles -->
<link href="css/blueweather.css" rel="stylesheet">
<!-- Custom styles for this site -->
<link href="css/index.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
<title>BlueWeather</title>
</head>
<body class="bg-ff" style="height: 100%;padding-top: 0;">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
<nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
<a class="navbar-brand" href="#">BlueWeather</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="login.html">Sign in</a>
</li>
<ul id="profileContainer" class="navbar-nav ml-auto">
</ul>
</nav>
<!-- Locations list -->
<main role="main" class="container" style="padding-top: 30px;">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
<img class="mr-3" src="img/icon.png" alt="" width="48" height="48">
<div class="lh-100">
@ -72,9 +54,18 @@
</div>
</div>
</div>
</div>
</main>
<!-- js -->
<!-- External libs -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/feather.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Internal code -->
<script src="js/blueweather.js"></script>
<script src="js/index.js"></script>
</body>

227
js/blueweather.js
View file

@ -3,13 +3,17 @@ class BlueWeather {
constructor() {
// cunstruct xmlhttp
this.xhttp = new XMLHttpRequest();
this.host = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
this.host = "https://weather.itsblue.de"//window.location.href.substring(0, window.location.href.lastIndexOf("/"));
this.log("init done", 2)
this.session = {
loggedIn: false,
token: ""
token: "",
user: {
realName: "Real Name",
username: "username"
}
}
this.restoreSession()
@ -20,14 +24,15 @@ class BlueWeather {
// ----------------------
restoreSession() {
if(this.getCookie("session") !== "") {
if(this.getCookie("session") !== "" && this.getCookie("session") !== undefined) {
console.log("old session found: " + this.getCookie("session"), 3)
// old session found
this.session.loggedIn = true
this.session.token = this.getCookie("session")
}
}
login(async, processingFunction, username, password) {
login(async, username, password, processingFunction) {
this.xhttp.abort()
var thisObject = this
@ -39,14 +44,14 @@ class BlueWeather {
thisObject.log("login response was: " + this.responseText, 3)
var ret = JSON.parse(this.responseText)
if(ret && ret['status'] === 200) {
this.session.token = ret["token"]
this.session.loggedIn = true
//this.session.token = ret["token"]
//this.session.loggedIn = true
processingFunction(true)
return
}
else {
this.session.token = ""
this.session.loggedIn = false
//this.session.token = ""
//this.session.loggedIn = false
}
}
processingFunction(false)
@ -129,6 +134,212 @@ class BlueWeather {
this.xhttp.send()
}
// ----------------------
// - template functions -
// ----------------------
loadProfileObject(parent) {
if(!parent) {
return false
}
var thisObject = this
var profileObject = document.createElement("li")
parent.appendChild(profileObject)
profileObject.classList.add("nav-item")
if(!this.session.loggedIn) {
this.log("not logged in", 3)
profileObject.classList.add("text-nowrap")
// create login button
var loginButton = document.createElement('button')
profileObject.appendChild(loginButton)
loginButton.type = "button"
loginButton.setAttribute("data-toggle", "modal")
loginButton.setAttribute("data-target", "#loginModal")
loginButton.classList.add("btn", "btn-outline-light")
loginButton.innerHTML = "Login"
// ------------
// create modal
var loginModal = document.createElement('div')
loginModal.id = "loginModal"
loginModal.setAttribute("tabindex", "-1")
loginModal.setAttribute("role", "dialog")
loginModal.setAttribute("aria-labelledby", "exampleModalLabel")
loginModal.setAttribute("aria-hidden", "true")
loginModal.classList.add("modal", "fade")
// create login form
var loginDiv = document.createElement("div")
loginModal.appendChild(loginDiv)
loginDiv.classList.add("modal-dialog", "modal-login")
loginDiv.setAttribute("role", "document")
// - modal content
var modalContent = document.createElement("div")
loginDiv.appendChild(modalContent)
modalContent.classList.add("modal-content")
// -- modal header
var modalHeader = document.createElement("div")
modalContent.appendChild(modalHeader)
modalHeader.classList.add("modal-header")
// --- close button
var modalCloseButton = document.createElement("button")
modalHeader.appendChild(modalCloseButton)
modalCloseButton.setAttribute("type", "button")
modalCloseButton.setAttribute("data-dismiss", "modal")
modalCloseButton.setAttribute("aria-label", "Close")
modalCloseButton.classList.add("close")
modalCloseButton.innerHTML = '<span aria-hidden="true">×</span>'
// -- modal body
var modalBody = document.createElement("div")
modalContent.appendChild(modalBody)
modalBody.classList.add("modal-body", "text-center")
// --- login form
var loginForm = document.createElement("form")
modalBody.appendChild(loginForm)
loginForm.classList.add("form-signin")
// ---- login form fieldset
var fieldset = document.createElement("fieldset")
loginForm.appendChild(fieldset)
// ----- blueweather icon
var loginFormIcon = document.createElement("img")
fieldset.appendChild(loginFormIcon)
loginFormIcon.width = "72"
loginFormIcon.height = "72"
loginFormIcon.src = "img/icon.png"
loginFormIcon.alt = ""
loginFormIcon.classList.add("mb-4")
// ----- 'Please sign in' text
var loginFormHeadline = document.createElement("h1")
fieldset.append(loginFormHeadline)
loginFormHeadline.classList.add("h3", "mb-3", "font-weight-normal")
loginFormHeadline.innerHTML = "Please sign in"
// ----- login failed alert
var alert = document.createElement("div")
fieldset.append(alert)
alert.id = "loginFormLoginFailedAlert"
alert.appear = function() {
alert.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">Invalid username or password<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>'
}
// ----- username input
var usernameInputGroup = document.createElement("div")
fieldset.appendChild(usernameInputGroup)
usernameInputGroup.classList.add("form-group", "input-group")
usernameInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="user"></span></div></div><input type="text" class="form-control" id="loginFormUsernameInput" placeholder="Username"> </div>'
// ----- password input
var passwordInputGroup = document.createElement("div")
fieldset.appendChild(passwordInputGroup)
passwordInputGroup.classList.add("form-group", "input-group")
passwordInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="lock"></span></div></div><input type="password" class="form-control" id="loginFormPasswordInput" placeholder="Password"> </div>'
// ----- 'remember me' checkbox
var rememberCheckboxContainer = document.createElement("div")
rememberCheckboxContainer.classList.add("checkbox", "mb-3")
rememberCheckboxContainer.innerHTML = '<label> <input id="loginFormRememberMeChekbox" type="checkbox"> Remember me </label>'
// ----- 'sign in' button
var signInButton = document.createElement("button")
modalBody.appendChild(signInButton)
signInButton.id = "loginFormSignInButton"
signInButton.type = "submit"
signInButton.classList.add("btn", "btn-lg", "btn-primary", "btn-block")
signInButton.innerHTML = "Sign in"
signInButton.setLoading = function() {
signInButton.disabled = true
signInButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Signing in...'
}
signInButton.setNormal = function() {
signInButton.disabled = false
signInButton.innerHTML = 'Sign in'
}
signInButton.onclick = function() {
signInButton.setLoading()
var username = document.getElementById("loginFormUsernameInput").value
var password = document.getElementById("loginFormPasswordInput").value
thisObject.login(true, username, password, function(loginSuccess){
if(!loginSuccess){
alert.appear()
}
signInButton.setNormal()
})
}
// ----------
parent.appendChild(loginModal)
}
else {
this.log("logged in", 3)
profileObject.classList.add("dropdown")
// create profile picture button
var profileButton = document.createElement("a")
profileObject.appendChild(profileButton)
profileButton.id = "userDropdown"
profileButton.style = "padding: 0;"
profileButton.href = "#"
profileButton.setAttribute("role", "button")
profileButton.classList.add("nav-link", "dropdown-toggle")
profileButton.setAttribute("data-toggle", "dropdown")
profileButton.setAttribute("aria-haspopup", "true")
profileButton.setAttribute("aria-expanded", "false")
// create profile image inside button
var profileImage = document.createElement("img")
profileButton.appendChild(profileImage)
profileImage.height="30"
profileImage.src = "img/user.png"
profileImage.classList.add("img-profile", "rounded-circle")
// create dropdown menu
var profileDropdown = document.createElement("div")
profileObject.appendChild(profileDropdown)
profileDropdown.classList.add("dropdown-menu", "dropdown-menu-right")
profileDropdown.setAttribute("aria-labelledby", "userDropdown")
// fill the dropdown menu
function createDropdownMenuElement(icon, text) {
// create element
var elem = document.createElement("a")
elem.classList.add("dropdown-item")
elem.href = "#"
// create icon
var iconSpan = document.createElement("span")
elem.appendChild(iconSpan)
iconSpan.setAttribute("data-feather", icon)
// create text
var text = document.createTextNode(text)
elem.appendChild(text)
return elem
}
function createDropdownSeparator() {
var sep = document.createElement("div")
sep.classList.add("dropdown-divider")
return sep
}
var header = document.createElement("div")
header.classList.add("dropdown-item")
header.innerHTML = "<h6><b>" + this.session.user.realName + "</b></h6>@" + this.session.user.username
profileDropdown.appendChild(header)
profileDropdown.appendChild(createDropdownSeparator())
profileDropdown.appendChild(createDropdownMenuElement("settings", " Settings"))
profileDropdown.appendChild(createDropdownSeparator())
profileDropdown.appendChild(createDropdownMenuElement("log-out", " Log out"))
}
feather.replace()
}
// --------------------
// - helper functions -
// --------------------

0
js/bootstrap.bundle.min.js → js/bootstrap.min.js vendored Normal file → Executable file
View file

1
js/dashboard.js
View file

@ -616,3 +616,4 @@ window.onresize = function (event) {
};
feather.replace()
dashboard = new BlueWeatherDashboard()
dashboard.blueweather.loadProfileObject(document.getElementById("profileContainer"))

3
js/index.js
View file

@ -54,5 +54,6 @@ class BlueWeatherIndex {
})
}
}
feather.replace()
index = new BlueWeatherIndex()
index.blueweather.loadProfileObject(document.getElementById("profileContainer"))

0
js/popper.min.js vendored Normal file → Executable file
View file

58
login.html
View file

@ -1,58 +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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>BlueWeather login</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/sign-in/">
<!-- Bootstrap core CSS -->
<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">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin">
<img class="mb-4" src="img/icon-cloud.jpg" alt="" width="120" height="120">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<!-- <p class="mt-5 mb-3 text-muted">&copy; 2017-2019</p> -->
</form>
</body>
</html>

132
loginmodal.html
View file

@ -1,132 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Elegant Modal Login Modal Form with Icons</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font-family: 'Varela Round', sans-serif;
}
.modal-login {
color: #636363;
width: 350px;
}
.modal-login .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
}
.modal-login h4 {
text-align: center;
font-size: 26px;
}
.modal-login .form-group {
position: relative;
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px;
}
.modal-login .form-control {
padding-left: 40px;
}
.modal-login .form-control:focus {
border-color: #12b5e5;
}
.modal-login .form-control, .modal-login .btn {
min-height: 40px;
border-radius: 3px;
transition: all 0.5s;
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px;
}
.modal-login input[type="checkbox"] {
margin-top: 1px;
}
.modal-login .forgot-link {
color: #12b5e5;
float: right;
}
.modal-login .btn {
background: #12b5e5;
border: none;
line-height: normal;
}
.modal-login .btn:hover, .modal-login .btn:focus {
background: #10a3cd;
}
.modal-login .modal-footer {
color: #999;
border: none;
text-align: center;
border-radius: 5px;
font-size: 13px;
margin-top: -20px;
justify-content: center;
}
.modal-login .modal-footer a {
color: #12b5e5;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="text-center">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="trigger-btn" data-toggle="modal">Click to Open Login Modal</a>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form action="/examples/actions/confirmation.php" method="post">
<div class="form-group">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="form-group small clearfix">
<label class="checkbox-inline"><input type="checkbox"> Remember me</label>
<a href="#" class="forgot-link">Forgot Password?</a>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block btn-lg" value="Sign in">
</div>
</form>
</div>
<div class="modal-footer">Don't have an account? <a href="">Sign up</a></div>
</div>
</div>
</div>
</body>
</html>

151
loginmodal2.html
View file

@ -1,151 +0,0 @@
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.modal-login {
color: #636363;
width: 350px;
}
.modal-login .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
}
.modal-login h4 {
text-align: center;
font-size: 26px;
}
.modal-login .form-group {
position: relative;
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px;
}
.modal-login .form-control,
.modal-login .btn {
min-height: 40px;
border-radius: 3px;
transition: all 0.5s;
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px;
}
.modal-login .forgot-link {
color: #12b5e5;
float: right;
}
.modal-login .modal-footer {
color: #999;
border: none;
text-align: center;
border-radius: 5px;
font-size: 13px;
margin-top: -20px;
justify-content: center;
}
.modal-login .modal-footer a {
color: #12b5e5;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-login" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<form class="form-signin">
<fieldset>
<img class="mb-4" src="img/icon.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<div class="form-group input-group">
<div class="input-group-prepend">
<div class="input-group-text"><span data-feather="user"></span></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername"
placeholder="Username">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<div class="input-group-text"><span data-feather="lock"></span></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroupUsername"
placeholder="Password">
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script src="js/feather.js"></script>
<script>
feather.replace()
</script>
</body>
</html>