Skip to content

O
OKU-GIS
Commit 4cb87c94 authored by Fachri's avatar Fachri
Browse files
Options

login

parent fdba7023
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 65 deletions
static/css/layout-style.css
View file @ 4cb87c94
...@@ -808,6 +808,51 @@ li.active>a:after { ...@@ -808,6 +808,51 @@ li.active>a:after {
color: black!important; color: black!important;
} }
.modal-login{
top: 80%;
background-color: white;
z-index:999;
border-radius:8px
}
#btn-signin{
border-radius: 5px;
background: linear-gradient(147.95deg, #4C97DC -38.4%, #4969DA 140.26%);
margin-right: 8px;
color: white;
}
.row-full-height {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.img-centered{
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.vertical-centered{
top: 50%;
transform: translateY(-50%);
}
.img-features{
position: absolute;
background: url(/static/img/icon-1/bg4.svg);
width: 742px;
height: 130px;
top: 65%;
right: 0;
margin-right: 24px;
}
@media (max-width: 1025px) { @media (max-width: 1025px) {
.dock { .dock {
position: absolute; position: absolute;
...@@ -835,4 +880,29 @@ li.active>a:after { ...@@ -835,4 +880,29 @@ li.active>a:after {
#map>div.col-md-6.col-md-offset-3.input-group.content-group.foot>div>div.col-md-2>button { #map>div.col-md-6.col-md-offset-3.input-group.content-group.foot>div>div.col-md-2>button {
right: 0px!important; right: 0px!important;
} }
.modal-login{
background-color: white;
z-index:999;
border-radius:8px;
}
#btn-signin{
border-radius: 5px;
background: linear-gradient(147.95deg, #4C97DC -38.4%, #4969DA 140.26%);
color: white;
padding-right: 16px;
}
#searchbar{
margin-left: 16px;
margin-right: 16px;
}
.centered{
top: 50% !important;
transform: translateY(-50%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
} }
\ No newline at end of file
templates/layout/layout.html
View file @ 4cb87c94
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div id="map"> <div id="map">
<div class="col-md-4 col-md-offset-4 input-group content-group head"> <div id="searchbar" class="col-md-4 col-md-offset-4 input-group content-group head">
<!-- <div class="input-group"> <!-- <div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control"></input> <input type="TextBox" ID="datebox" Class="form-control"></input>
...@@ -159,20 +159,20 @@ ...@@ -159,20 +159,20 @@
{% if user.is_authenticated %} {% else %} {% if user.is_authenticated %} {% else %}
<div class="col-md-6 col-md-offset-3 input-group content-group foot" style="top: 80%;background-color: white;z-index:999;border-radius:8px"> <div class="col-md-6 col-md-offset-3 modal-login input-group content-group foot centered">
<div class="row"> <div class="row row-full-height">
<div class="col-md-1"> <div class="col-md-1">
<img src="/static/img/logo-ok.png" alt="" style="margin-top: 20%;margin-left: 46%;max-height: 28px;max-width: 21.999998092651367px;/* left: 27px; *//* top: 14px; */border-radius: 0px;"> <img src="/static/img/logo-ok.png" alt="" class="img-centered" style="max-height: 28px;max-width: 21.999998092651367px;/* left: 27px; *//* top: 14px; */border-radius: 0px;">
</div> </div>
<div class="col-md-9"> <div class="col-md-9">
<div style="margin-top: 2%;font-size: 15px;margin-left: 3%;"> <div style="font-size: 15px;margin: 8px;">
<span><b>Welcome to TEMANKU!</b> <span><b>Welcome to TEMANKU!</b>
Login untuk menikmati fitur lengkap TEMANKU Login untuk menikmati fitur lengkap TEMANKU
</span> </span>
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="{% url 'login' %}" class="btn btn-primary" style="margin-top: 3%;border-radius: 5px;background: linear-gradient(147.95deg, #4C97DC -38.4%, #4969DA 140.26%);margin-bottom: 3%;right: -15%;color: white;">SIGN IN</a> <a href="{% url 'login' %}" class="btn btn-primary vertical-centered" id="btn-signin">SIGN IN</a>
</div> </div>
</div> </div>
</div> </div>
......
templates/user/login.html
View file @ 4cb87c94
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/core.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/components.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/layout-style.css' %}">
</head> </head>
...@@ -28,77 +29,73 @@ ...@@ -28,77 +29,73 @@
height: 100%; height: 100%;
background-size: 100% 100%;"> background-size: 100% 100%;">
<!-- <div> --> <!-- <div> -->
<div style=" position: absolute; <div class="img-features"></div>
background: url(/static/img/icon-1/bg4.svg); <div class="d-none d-md-block" style="position: absolute;background: url(/static/img/icon-1/bg3.svg);width: 65%;height: 75%;top: 0;left: 35%;background-size: 100% 100%;z-index: 9;"></div>
width: 742px;
height: 130px;
top: 65%;
right: 10%;"></div>
<div style="position: absolute;background: url(/static/img/icon-1/bg3.svg);width: 65%;height: 75%;top: 0;left: 35%;background-size: 100% 100%;z-index: 9;"></div>
<!-- </div> --> <!-- </div> -->
<div class="row" style="height: 100vh;width: 100%;background-color: rgba(9, 9, 9, 0.3);margin:0px;"> <div>
<div class="col-md-4" style="background:#1E2233;color:white"> <div class="row" style="height: 100vh;width: 100%;background-color: rgba(9, 9, 9, 0.3);margin:0px;">
<div style="margin-left: 10%;"> <div class="col-md-4 col-sm-12" style="background:#1E2233;color:white">
<div class="text-center " style="margin-top: 40%;"> <div style="margin-left: 10%; margin-right: 10%;">
<div> <div class="text-center " style="margin-top: 40%;">
<div class="row" style=" width: 200px; <div>
margin-left: 23%;"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<img src="{% static 'img/icon-1/MapTrifold.svg' %}" alt=""> <img src="{% static 'img/icon-1/MapTrifold.svg' %}" alt="">
</div>
<div class="col-md-9">
<div>
<span>Sistem Informasi</span>
</div> </div>
<div> <div class="col-md-9">
<span>Pembangunan OKU</span> <div>
<span>Sistem Informasi</span>
</div>
<div>
<span>Pembangunan OKU</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div style="margin:10%">
<span>Login</span><span>&nbsp;Temanku!</span>
</div>
</div> </div>
<div style="margin:10%"> <form method="POST">
<span>Login</span><span>&nbsp;Temanku!</span> {% csrf_token %}
</div>
</div> <div class="form-group has-feedback has-feedback-left">
<form method="POST" style="width: 355px;"> <div class="form-group">
{% csrf_token %} <label>Username</label>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required>
<div class="form-group has-feedback has-feedback-left"> <div class="form-control-feedback">
<div class="form-group"> </div>
<label>Username</label>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required>
<div class="form-control-feedback">
</div> </div>
</div> </div>
</div>
<div class="form-group has-feedback has-feedback-left">
<div class="form-group has-feedback has-feedback-left"> <div class="form-group">
<div class="form-group"> <label>Password</label>
<label>Password</label> <input type="password" class="form-control" placeholder="Password" name="password" id="password" required>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required> <div class="form-control-feedback">
<div class="form-control-feedback"> </div>
</div> </div>
</div> </div>
</div>
<div class="form-group" style="margin-top: 50px;">
<div class="form-group" style="margin-top: 50px;"> <button type="submit" class="btn btn-block" style="background-color: #4C97DC;">Log in</button>
<button type="submit" class="btn btn-block" style="background-color: #4C97DC;">Log in</button> </div> {% if messages %}
</div> {% if messages %} <div>
<div> {% for message in messages %} {% if message.tags == 'error' %}
{% for message in messages %} {% if message.tags == 'error' %} <div class="alert alert-danger" style="margin-top:10px">{{ message }}</div>
<div class="alert alert-danger" style="margin-top:10px">{{ message }}</div> {% endif %} {% endfor %}
{% endif %} {% endfor %} </div>
</div> {% endif %}
{% endif %} </form>
</form> </div>
</div> </div>
<div class="col-md-8 d-none d-md-block">
</div> </div>
<div class="col-md-8">
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment