<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<body class="home">
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation">
<div class="logo">
<a hef="home.html"><img src="http://jskrishna.com/work/merkury/images/logo.png" alt="merkery_logo" class="hidden-xs hidden-sm">
<img src="http://jskrishna.com/work/merkury/images/circle-logo.png" alt="merkery_logo" class="visible-xs visible-sm circle-logo">
</a>
</div>
<div class="navi">
<ul>
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Home</span></a></li>
<li><a href="#"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Complaints</span></a></li>
<li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Statistics</span></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Profile</span></a></li>
<li><a href="#"><i class="fa" aria-hidden="true"></i><span class="hidden-xs hidden-sm">News</span></a></li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-11 display-table-cell v-align">
<!--<button type="button" class="slide-toggle">Slide Toggle</button> -->
<div class="row">
<header>
<div class="col-md-7">
<nav class="navbar-default pull-left">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target="#side-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
<div class="search hidden-xs hidden-sm">
<input type="text" placeholder="Search" id="search">
</div>
</div>
<div class="col-md-5">
</div>
</header>
</div>
<div class="user-dashboard">
<h1>Welcome to Online Public Grievance Lodging and Monitoring System </h1>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 gutter">
<div class="sales">
<h2>Public Grieveance Registration</h2>
<div class"table" align ="center">
<table bgcolor ="#1affc6" width="400" height="300">
<tr> <td> Issues</td> <td> <select>
<option value="Electricity">Electricity</option>
<option value="Transport">Transport</option>
<option value="Drainage">Drainage</option>
<option value="Water">Water facilities</option>
</select></td> </tr>
<tr> <td height="30">Full name </td> <td><input type="text" name="flname"> </input></td> </tr>
<tr> <td height="30">Address </td> <td> <input type="text" name="address"> </input></td> </tr>
<tr> <td height="30">Pin code </td> <td> <input type="text" name="pin"> </input></td> </tr>
<tr> <td height="30">Contact no </td> <td> <input type="text" name="contact"> </input></td> </tr>
<tr> <td height="30">Description </td> <td> <input type="text" name="description"> </input></td> </tr>
<tr> <td height="30">Department </td> <td> <input type="text" name="department"> </input></td> </tr>
<tr> <td height="30">District </td> <td> <select>
<option value="Kanchipuram">Kanchipuram</option>
<option value="Chennai">Chennai</option>
<option value="Thiruvallur">Thiruvallur</option>
<option value="Chengalpet"> Chengalpet</option>
</select> </input> </td> </tr>
<tr> <td height="30">Address proof </td> <td> <select>
<option value="AAdhar">AAdhar card</option>
<option value="PAN">PAN card</option>
<option value="Voter">Voter ID</option>
<option value="Driving"> Driving License</option>
</select> </td> </tr>
<tr> <td height="30"> Proof numbers </td> <td><input type="text" name="proof"></td></tr>
<tr> <td height="30">Prob. started </td> <td> <input type="text" name="prob"> </input></td> </tr>
<tr> <td height="30">Affected consumer</td> <td> <input type="text" name="affected"> </input></td> </tr>
<tr> <td height="30">Email </td> <td> <input type="text" name="email"> </input></td> </tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="add_project" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header login-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Project</h4>
</div>
<div class="modal-body">
<input type="text" placeholder="Project Title" name="name">
<input type="text" placeholder="Post of Post" name="mail">
<input type="text" placeholder="Author" name="passsword">
<textarea placeholder="Desicrption"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="cancel" data-dismiss="modal">Close</button>
<button type="button" class="add-project" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
/*Main CSS*/
/*Login Signup Page*/
a:focus,a:hover,a{
outline:none;
text-decoration: none;
}
li,ul{
list-style: none;
padding: 0;
margin: 0;
}
.header-top i {
font-size: 18px;
}
.bg-image {
background: url(../images/background-login.jpg) no-repeat 0 0 / cover;
position: relative;
width: 100%;
height: 100vh;
display: table;
}
.login-header {
display: inline-block;
width: 100%;
background: #0e1a35;
}
.login-signup {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.login-logo img {
cursor: pointer;
max-width: 171px;
padding: 23px 15px 22px;
width: 100%;
}
.login-header .navbar-right {
margin-right: 0px;
}
.login-header .nav-tabs > li.active > a,
.login-header .nav-tabs > li.active > a:focus,
.login-header .nav-tabs > li.active > a:hover {
background-color: transparent;
border: none;
color: #fff;
}
.login-header .nav-tabs > li > a {
border: medium none;
border-radius: 0;
font-size: 14px;
font-weight: 500;
line-height: 48px;
padding: 15px 30px;
color: #fff;
}
.login-header .nav-tabs {
border-bottom: none;
}
.login-header .nav-tabs > li {
margin-bottom: 0px;
}
.login-header .nav > li > a:focus,
.login-header .nav > li > a:hover {
background: none;
text-decoration: none;
}
.login-header .nav-tabs > li.active {
border-bottom: 6px solid #5584ff;
}
.login-inner h1 {
color: #8492af;
font-size: 48px;
font-weight: 300;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
.login-inner h1 span {
color: #5584ff;
}
.login-form {
text-align: center;
}
.login-form input {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-color: -moz-use-text-color -moz-use-text-color #d4d9e3;
border-image: none;
border-style: none none solid;
border-width: medium medium 1px;
font-size: 13px;
font-weight: 300;
width: 100%;
color: #8492af;
padding: 15px 50px;
font-size: 17px;
max-width: 550px;
}
.login-form label {
margin-bottom: 30px;
width: 100%;
}
.user input {
background: rgba(0, 0, 0, 0) url("../images/user.png") no-repeat scroll 7px 12px;
}
.pass input {
background: rgba(0, 0, 0, 0) url("../images/password.png") no-repeat scroll 7px 12px;
}
.mail input {
background: rgba(0, 0, 0, 0) url("../images/mail.png") no-repeat scroll 4px 12px;
}
.login-signup .tab-content {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: inline-block;
margin-top: -8px;
width: 100%;
}
.form-btn {
background: #5584ff none repeat scroll 0 0;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-weight: 400;
max-width: 250px;
padding: 10px 0;
position: relative;
width: 100%;
margin: 40px 0;
box-shadow: 0 2px 8px #d2d2d2;
-moz-box-shadow: 0 2px 8px #d2d2d2;
-webkit-box-shadow: 0 2px 8px #d2d2d2;
}
.form-btn::before {
content: "";
font-family: FontAwesome;
position: absolute;
right: 17px;
top: 9px;
}
.form-details {
padding: 35px 0;
}
.tab-content .tab-pane {
padding: 70px 0;
}
/*Login Signup Page*/
/*Home Page*/
.home {
background: #f6f7fa;
}
#navigation {
background: #0e1a35;
}
#navigation {
padding: 0;
}
.display-table {
display: table;
padding: 0;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
.v-align {
vertical-align: top;
}
.logo img {
max-width: 180px;
padding: 16px 0 17px;
width: 100%;
}
.header-top {
margin: 0;
padding-top: 2px;
}
.header-top img {
border-radius: 50%;
max-width: 48px !important;
width: 100%;
}
.add-project {
background: #5584ff none repeat scroll 0 0;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 27px 10px 45px;
position: relative;
}
.header-rightside .nav > li > a:focus,
.header-rightside .nav > li > a:hover {
background: none;
text-decoration: none;
}
.add-project::before {
background: rgba(0, 0, 0, 0) url("../images/plus.png") no-repeat scroll 0 0;
content: "";
;
height: 12px;
left: 17px;
position: absolute;
top: 12px;
width: 12px;
}
.add-project:hover {
color: #ffffff;
}
.header-top i {
color: #0e1a35;
}
.icon-info {
position: relative;
}
.navi i {
font-size: 20px;
}
.label.label-primary {
border-radius: 50%;
font-size: 9px;
left: 8px;
position: absolute;
top: -9px;
}
.icon-info .label {
border: 2px solid #ffffff;
font-weight: 500;
padding: 3px 5px;
text-align: center;
}
.header-top li {
display: inline-block;
text-align: center;
}
.header-top .dropdown-toggle {
color: #0e1a35;
}
.header-top .dropdown-menu {
border: medium none;
left: -85px;
padding: 17px;
}
.view {
background: #5584ff none repeat scroll 0 0;
border-radius: 100px;
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: 600;
margin-top: 10px;
padding: 10px 15px;
}
.navbar-content > span {
font-size: 13px;
font-weight: 700;
}
.img-responsive {
width: 100%;
}
#navigation{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.search input {
border: none;
font-size: 15px;
padding: 15px 9px;
width: 100%;
background: rgba(0, 0, 0, 0) url("../images/search.png") no-repeat scroll 99% 12px;
color: #8492af;
}
header {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
display: inline-block !important;
line-height: 23px;
padding: 15px;
transition: all 0.5s ease 0s;
width: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.logo {
text-align: center;
}
.navi a {
border-bottom: 1px solid #0d172e;
border-top: 1px solid #0d172e;
color: #ffffff;
display: block;
font-size: 17px;
font-weight: 500;
padding: 28px 20px;
text-decoration: none;
}
.navi i {
margin-right: 15px;
color: #5584ff;
}
.navi .active a {
background: #122143;
border-left: 5px solid #5584ff;
padding-left: 15px;
}
.navi a:hover {
background: #122143 none repeat scroll 0 0;
border-left: 5px solid #5584ff;
display: block;
padding-left: 15px;
}
.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: rgba(0, 0, 0, 0);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #0e1a35;
}
.circle-logo {
margin: 0 auto;
max-width: 30px !important;
text-align: center;
}
.hidden-xs{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.user-dashboard {
padding: 0 20px;
}
.user-dashboard h1 {
color: #0e1a35;
font-size: 30px;
font-weight: 500;
margin: 0;
padding: 21px 0;
}
.sales {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #d4d9e3;
display: inline-block;
padding: 15px;
width: 100%;
}
.sales button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #dadee7;
border-radius: 100px;
font-size: 15px;
letter-spacing: 0.5px;
padding-right: 32px;
color: #0e1a35;
}
.sales button::before {
content: "";
font-family: FontAwesome;
position: absolute;
right: 12px;
top: 11px;
}
.sales .btn-group {
float: right;
}
.sales h2 {
color: #8492af;
float: left;
font-size: 21px;
font-weight: 600;
margin: 0;
padding: 9px 0 0;
margin-bottom: 15pt;
}
.btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
}
.sales .dropdown-menu{
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
width: 100%;
color: #0e1a35;
}
.sales .btn-group.open .dropdown-toggle, .btn.active, .btn:active{
box-shadow: none;
}
.sales .dropdown-menu > a {
color: #0e1a35;
display: inline-block;
font-weight: 800;
padding: 9px 0;
text-align: center;
width: 100%;
}
#my-cool-chart svg {
width: 100%;
}
.sales .dropdown-menu > a:hover{
color: #5584FF;
}
.shield-buttons {
display: none;
}
.close, .close:focus, .close:hover {
color: #fff;;
opacity: 1;
text-shadow: none;
}
.modal-body input {
border: 1px solid #d4d9e3;
font-size: 14px;
font-weight: 300;
margin: 5px 0;
padding: 14px 10px;
width: 100%;
color: #8492af;
}
.modal-body textarea {
border: 1px solid #d4d9e3;
font-size: 14px;
font-weight: 300;
height: 200px;
margin-top: 5px;
padding: 9px 10px;
width: 100%;
color: #8492af;
}
.modal-header.login-header h4 {
color: #ffffff;
}
.modal-footer .add-project {
background: #5584ff none repeat scroll 0 0;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 30px;
position: relative;
}
.modal-footer .add-project::before{display: none;}
.modal-footer {
border: 0 none;
padding: 10px 15px 26px;
text-align: right;
}
.cancel {
background: #0E1A35 ;
border: medium none;
border-radius: 100px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 10px 30px;
position: relative;
}
.modal{
top: 20%;
}
.modal-header .close {
margin-top: 2px;
}
.search input:focus{
border-bottom: 1px solid #BDC4D4;
line-height:22px;
transition: 0.1s all;
}
.modal-header.login-header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/*Main CSS*/
@media only screen and (max-device-width: 767px) {
.login-logo img {
margin: 0 auto;
}
.login-details .nav-tabs > li {
text-align: center;
width: 50%;
}
.login-signup .login-inner h1 {
font-size: 26px;
margin-bottom: 0;
margin-top: 10px;
}
.login-inner .login-form input {
font-size: 15px;
max-width: 100%;
padding: 15px 45px;
}
.login-inner .form-details {
padding: 25px;
}
.login-inner .login-form label {
margin-bottom: 20px;
width: 100%;
}
.login-inner .form-btn {
margin: 0;
max-width: 180px;
}
.tab-content .tab-pane {
padding: 20px 0;
}
#navigation .navi a {
font-size: 14px;
padding: 20px;
text-align: center;
}
#navigation .navi i {
margin-right: 0px;
}
#navigation .navi a:hover,
#navigation .navi .active a {
background: #122143 none repeat scroll 0 0;
border-left: none;
display: block;
padding-left: 20px;
}
header .header-top img {
max-width: 38px !important;
}
.v-align header {
padding: 12px 15px;
}
header .header-top li {
padding-left: 13px;
padding-right: 6px;
}
.navbar-default .navbar-toggle {
border-color: rgba(0, 0, 0, 0);
}
.navbar-header .navbar-toggle {
float: left;
margin: 0;
padding: 0;
top: 12px;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
outline: medium none;
}
.user-dashboard .sales h2 {
color: #8492af;
float: left;
font-size: 14px;
font-weight: 600;
margin: 0;
padding: 13px 0 0;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 11px;
}
.user-dashboard .sales button {
font-size: 11px;
padding-right: 23px;
}
.user-dashboard .sales h2 {
font-size: 12px;
}
.gutter{
padding: 0;
padding-left:75px;
}
}
@media only screen and (max-device-width: 992px) {
header .header-top li {
padding-left: 20px !important;
padding-right: 0;
}
header .logo img {
max-width: 125px !important;
}
}
@media only screen and (min-device-width: 767px) and (max-device-width: 998px){
.user-dashboard .header-top {
padding-top: 5px;
}
.user-dashboard .header-rightside {
display: inline-block;
float: left;
width: 100%;
}
.user-dashboard .header-rightside .header-top img {
max-width: 41px !important;
}
.user-dashboard .sales button {
font-size: 10px;
}
.user-dashboard .btn.btn-secondary.btn-lg.dropdown-toggle > span {
font-size: 12px;
}
.user-dashboard .sales h2 {
font-size: 15px;
}
}
@media only screen and (min-device-width:998px) and (max-device-width: 1350px){
#navigation .logo img {
max-width: 130px;
padding: 16px 0 17px;
width: 100%;
}
}
/* Created by Filipe Pina
* Specific styles of signin, register, component
*/
/*
* General styles
*/
#playground-container {
height: 500px;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
}
body, html{
height: 100%;
background-repeat: no-repeat;
background:url(https://i.ytimg.com/vi/4kfXjatgeEU/maxresdefault.jpg);
font-family: 'Oxygen', sans-serif;
background-size: cover;
}
.main{
margin:50px 15px;
}
h1.title {
font-size: 50px;
font-family: 'Passion One', cursive;
font-weight: 400;
}
hr{
width: 10%;
color: #fff;
}
.form-group{
margin-bottom: 15px;
}
label{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #fff;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.form-control {
height: auto!important;
padding: 8px 12px !important;
}
.input-group {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
}
#button {
border: 1px solid #ccc;
margin-top: 28px;
padding: 6px 12px;
color: #666;
text-shadow: 0 1px #fff;
cursor: pointer;
-moz-border-radius: 3px 3px;
-webkit-border-radius: 3px 3px;
border-radius: 3px 3px;
-moz-box-shadow: 0 1px #fff inset, 0 1px #ddd;
-webkit-box-shadow: 0 1px #fff inset, 0 1px #ddd;
box-shadow: 0 1px #fff inset, 0 1px #ddd;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 400px;
padding: 10px 40px;
background:#009edf;
color: #FFF;
text-shadow: none;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
span.input-group-addon i {
color: #009edf;
font-size: 17px;
}
.login-button{
margin-top: 5px;
}
.login-register{
font-size: 11px;
text-align: center;
}
$(document).ready(function(){
$('[data-toggle="offcanvas"]').click(function(){
$("#navigation").toggleClass("hidden-xs");
});
});