- cleanup of old files and css
- further implementation of user login
This commit is contained in:
dorian
parent
d9c9382b41
commit
903f730502
18 changed files with 457 additions and 572 deletions
0
api/submitSensorDataExample.json
Normal file → Executable file
0
api/submitSensorDataExample.json
Normal file → Executable file
106
css/blueweather.css
Normal file
106
css/blueweather.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -81,8 +81,6 @@ body {
|
||||||
|
|
||||||
.navbar .form-control {
|
.navbar .form-control {
|
||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-dark {
|
.form-control-dark {
|
||||||
|
|
@ -110,21 +108,3 @@ body {
|
||||||
font-size: 3.5rem;
|
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
0
css/font-awesome.min.css
vendored
Normal file → Executable file
108
css/index.css
108
css/index.css
|
|
@ -2,15 +2,105 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.opacity-animated {
|
.bd-placeholder-img {
|
||||||
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
|
font-size: 1.125rem;
|
||||||
transition: opacity 1s;
|
text-anchor: middle;
|
||||||
-webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
|
-webkit-user-select: none;
|
||||||
transform: scale(1);
|
-moz-user-select: none;
|
||||||
transition: 1s all ease;
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexFont {
|
@media (min-width: 768px) {
|
||||||
height:100%;
|
.bd-placeholder-img-lg {
|
||||||
width:100%;
|
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;
|
||||||
}
|
}
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -13,14 +13,16 @@
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
<!-- gobal custom styles -->
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/blueweather.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this site -->
|
||||||
<link href="css/dashboard.css" rel="stylesheet">
|
<link href="css/dashboard.css" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="height: 100%;">
|
<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 -->
|
<!-- left part of toolbar -->
|
||||||
<a class="navbar-brand" href="index.html">BlueWeather</a>
|
<a class="navbar-brand" href="index.html">BlueWeather</a>
|
||||||
|
|
||||||
|
|
@ -29,36 +31,9 @@
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav ml-auto">
|
<ul id="profileContainer" 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>
|
</ul>
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container-fluid" style="height: 100%">
|
<div class="container-fluid" style="height: 100%">
|
||||||
|
|
@ -81,7 +56,6 @@
|
||||||
<span data-feather="plus-circle"></span>
|
<span data-feather="plus-circle"></span>
|
||||||
</a>
|
</a>
|
||||||
</h6>
|
</h6>
|
||||||
|
|
||||||
<ul class="nav flex-column mb-2" id="sensorsList">
|
<ul class="nav flex-column mb-2" id="sensorsList">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">
|
<a class="nav-link" href="#">
|
||||||
|
|
|
||||||
BIN
img/user.png
Executable file
BIN
img/user.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
47
index.html
47
index.html
|
|
@ -8,47 +8,29 @@
|
||||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
||||||
<link rel="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">
|
<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">
|
<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>
|
<title>BlueWeather</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-ff" style="height: 100%;padding-top: 0;">
|
<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>
|
<a class="navbar-brand" href="#">BlueWeather</a>
|
||||||
|
|
||||||
<ul class="navbar-nav px-3">
|
<ul id="profileContainer" class="navbar-nav ml-auto">
|
||||||
<li class="nav-item text-nowrap">
|
|
||||||
<a class="nav-link" href="login.html">Sign in</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- Locations list -->
|
||||||
<main role="main" class="container" style="padding-top: 30px;">
|
<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">
|
<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">
|
<img class="mr-3" src="img/icon.png" alt="" width="48" height="48">
|
||||||
<div class="lh-100">
|
<div class="lh-100">
|
||||||
|
|
@ -72,9 +54,18 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
<!-- js -->
|
||||||
|
<!-- External libs -->
|
||||||
<script src="js/jquery.min.js"></script>
|
<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/blueweather.js"></script>
|
||||||
<script src="js/index.js"></script>
|
<script src="js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,17 @@ class BlueWeather {
|
||||||
constructor() {
|
constructor() {
|
||||||
// cunstruct xmlhttp
|
// cunstruct xmlhttp
|
||||||
this.xhttp = new XMLHttpRequest();
|
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.log("init done", 2)
|
||||||
|
|
||||||
this.session = {
|
this.session = {
|
||||||
loggedIn: false,
|
loggedIn: false,
|
||||||
token: ""
|
token: "",
|
||||||
|
user: {
|
||||||
|
realName: "Real Name",
|
||||||
|
username: "username"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.restoreSession()
|
this.restoreSession()
|
||||||
|
|
@ -20,14 +24,15 @@ class BlueWeather {
|
||||||
// ----------------------
|
// ----------------------
|
||||||
|
|
||||||
restoreSession() {
|
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
|
// old session found
|
||||||
this.session.loggedIn = true
|
this.session.loggedIn = true
|
||||||
this.session.token = this.getCookie("session")
|
this.session.token = this.getCookie("session")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
login(async, processingFunction, username, password) {
|
login(async, username, password, processingFunction) {
|
||||||
this.xhttp.abort()
|
this.xhttp.abort()
|
||||||
var thisObject = this
|
var thisObject = this
|
||||||
|
|
||||||
|
|
@ -39,14 +44,14 @@ class BlueWeather {
|
||||||
thisObject.log("login response was: " + this.responseText, 3)
|
thisObject.log("login response was: " + this.responseText, 3)
|
||||||
var ret = JSON.parse(this.responseText)
|
var ret = JSON.parse(this.responseText)
|
||||||
if(ret && ret['status'] === 200) {
|
if(ret && ret['status'] === 200) {
|
||||||
this.session.token = ret["token"]
|
//this.session.token = ret["token"]
|
||||||
this.session.loggedIn = true
|
//this.session.loggedIn = true
|
||||||
processingFunction(true)
|
processingFunction(true)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.session.token = ""
|
//this.session.token = ""
|
||||||
this.session.loggedIn = false
|
//this.session.loggedIn = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
processingFunction(false)
|
processingFunction(false)
|
||||||
|
|
@ -129,6 +134,212 @@ class BlueWeather {
|
||||||
this.xhttp.send()
|
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">×</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 -
|
// - helper functions -
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
|
||||||
0
js/bootstrap.bundle.min.js → js/bootstrap.min.js
vendored
Normal file → Executable file
0
js/bootstrap.bundle.min.js → js/bootstrap.min.js
vendored
Normal file → Executable file
|
|
@ -616,3 +616,4 @@ window.onresize = function (event) {
|
||||||
};
|
};
|
||||||
feather.replace()
|
feather.replace()
|
||||||
dashboard = new BlueWeatherDashboard()
|
dashboard = new BlueWeatherDashboard()
|
||||||
|
dashboard.blueweather.loadProfileObject(document.getElementById("profileContainer"))
|
||||||
|
|
@ -54,5 +54,6 @@ class BlueWeatherIndex {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
feather.replace()
|
||||||
index = new BlueWeatherIndex()
|
index = new BlueWeatherIndex()
|
||||||
|
index.blueweather.loadProfileObject(document.getElementById("profileContainer"))
|
||||||
0
js/popper.min.js
vendored
Normal file → Executable file
0
js/popper.min.js
vendored
Normal file → Executable file
58
login.html
58
login.html
|
|
@ -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">© 2017-2019</p> -->
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
132
loginmodal.html
132
loginmodal.html
|
|
@ -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
151
loginmodal2.html
|
|
@ -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">×</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>
|
|
||||||
Loading…
Reference in a new issue