WasteInformationServer/wwwroot/settings.html

190 lines
7.3 KiB
HTML
Raw Normal View History

2019-09-20 14:46:13 +00:00
<!DOCTYPE html>
<html lang="en" dir="ltr">
2019-10-04 14:53:20 +00:00
<head>
2019-09-20 14:46:13 +00:00
<meta charset="utf-8">
<title></title>
2019-10-04 14:53:20 +00:00
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="lib/bootstrap.min.css">
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
2019-10-04 14:53:20 +00:00
<!-- jQuery library -->
<script src="lib/jquery.min.js"></script>
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
<!-- Popper JS -->
<script src="lib/popper.min.js"></script>
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
<!-- Latest compiled JavaScript -->
<script src="lib/bootstrap.min.js"></script>
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
<link rel="stylesheet" type="text/css" href="css/settings.css">
<link rel="stylesheet" type="text/css" href="css/general.css">
<script type="text/javascript" src="js/settings.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="settings.html">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html">Profile</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Profile</a>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="input-group-prepend">
<span class="input-group-text"><i id="userlabel" class="fas fa-user"> lheilige</i></span>
</div>
<button type="button" id="logoutbtn" class="btn btn-primary">Logout</button>
</ul>
</div>
</nav>
<button type="button" id="addnewtable-btn" class="btn btn-primary" name="button">click me to add new table</button>
2019-10-03 07:40:13 +00:00
2019-10-04 14:53:20 +00:00
<div class="create-table hideit">
<div class="create-table-window-toolpane">
<div class="fas fa-times-circle fa-2x exit-icon"></div>
<div class="create-table-title">Add new Table</div>
2019-10-03 07:40:13 +00:00
</div>
2019-10-04 14:53:20 +00:00
<div class="create-table-window-content">
<div class="create-table-window-settings">
<form>
<h4>General options:</h4>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Notify Led-Board</label>
</div>
<div class="form-group" style="margin-top: 15px; width: 30%;">
<label for="exampleInputEmail1">Table Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Table Name">
<small id="emailHelp" class="form-text text-muted">Please try to use no special characters</small>
</div>
<div class="form-group" style="width: 30%;">
<label for="exampleInputEmail1">City/Village name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter City name here">
<small id="emailHelp" class="form-text text-muted">Please try to use no special characters</small>
</div>
<h4>Add Data:</h4>
<div class="input-group mt-3 mb-3" style="width: 50%;">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown">
Select waste type
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Plastic</a>
<a class="dropdown-item" href="#">Metal</a>
<a class="dropdown-item" href="#">residual waste</a>
<a class="dropdown-item" href="#">biowaste</a>
</div>
</div>
<input style="width: 50px;" class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
</script>
<input type="text" class="form-control" placeholder="Region">
<button type="button" class="btn btn-success" style="float:right;">Add to list</button>
</div>
<h4>Your Data:</h4>
<table class="table table-dark table-hover" style="width: 50%;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</form>
</div>
2019-10-03 07:40:13 +00:00
2019-09-20 14:46:13 +00:00
</div>
2019-10-04 14:53:20 +00:00
<div class="create-table-window-bottom">
<button type="button" class="btn btn-success" style="float:right;">Save</button>
2019-09-20 14:46:13 +00:00
</div>
2019-10-04 14:53:20 +00:00
</div>
2019-09-20 14:46:13 +00:00
2019-10-04 14:53:20 +00:00
</body>
2019-09-20 14:46:13 +00:00
</html>