186 lines
2.7 KiB
PHP
186 lines
2.7 KiB
PHP
<?php session_start(); ?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Login WebGIS Kemiskinan</title>
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
font-family:Segoe UI, sans-serif;
|
|
}
|
|
|
|
body{
|
|
height:100vh;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
background:linear-gradient(135deg,#0ea5e9,#10b981);
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* efek background halus */
|
|
body::before{
|
|
content:"";
|
|
position:absolute;
|
|
width:400px;
|
|
height:400px;
|
|
background:rgba(255,255,255,0.1);
|
|
border-radius:50%;
|
|
top:-100px;
|
|
left:-100px;
|
|
}
|
|
|
|
body::after{
|
|
content:"";
|
|
position:absolute;
|
|
width:300px;
|
|
height:300px;
|
|
background:rgba(255,255,255,0.08);
|
|
border-radius:50%;
|
|
bottom:-100px;
|
|
right:-100px;
|
|
}
|
|
|
|
.card{
|
|
width:360px;
|
|
background:white;
|
|
border-radius:18px;
|
|
padding:30px;
|
|
box-shadow:0 15px 40px rgba(0,0,0,0.2);
|
|
z-index:1;
|
|
animation:fadeIn .5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn{
|
|
from{opacity:0;transform:translateY(20px);}
|
|
to{opacity:1;transform:translateY(0);}
|
|
}
|
|
|
|
.logo{
|
|
text-align:center;
|
|
margin-bottom:15px;
|
|
}
|
|
|
|
.logo i{
|
|
font-size:40px;
|
|
color:#0ea5e9;
|
|
}
|
|
|
|
h2{
|
|
text-align:center;
|
|
margin-bottom:20px;
|
|
color:#0f172a;
|
|
font-size:20px;
|
|
}
|
|
|
|
.input-group{
|
|
margin-bottom:12px;
|
|
position:relative;
|
|
}
|
|
|
|
.input-group i{
|
|
position:absolute;
|
|
left:10px;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
color:#94a3b8;
|
|
}
|
|
|
|
input{
|
|
width:100%;
|
|
padding:12px 12px 12px 35px;
|
|
border:1px solid #e2e8f0;
|
|
border-radius:10px;
|
|
outline:none;
|
|
transition:0.2s;
|
|
}
|
|
|
|
input:focus{
|
|
border-color:#0ea5e9;
|
|
box-shadow:0 0 0 3px rgba(14,165,233,0.2);
|
|
}
|
|
|
|
button{
|
|
width:100%;
|
|
padding:12px;
|
|
border:none;
|
|
border-radius:10px;
|
|
background:linear-gradient(135deg,#0ea5e9,#10b981);
|
|
color:white;
|
|
font-weight:bold;
|
|
cursor:pointer;
|
|
transition:0.2s;
|
|
margin-top:5px;
|
|
}
|
|
|
|
button:hover{
|
|
transform:scale(1.02);
|
|
}
|
|
|
|
.footer{
|
|
text-align:center;
|
|
margin-top:15px;
|
|
font-size:11px;
|
|
color:#64748b;
|
|
}
|
|
|
|
.role-info{
|
|
text-align:center;
|
|
font-size:12px;
|
|
color:#0f766e;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="card">
|
|
|
|
<div class="logo">
|
|
<i class="fa-solid fa-map-location-dot"></i>
|
|
</div>
|
|
|
|
<h2>WebGIS Kemiskinan</h2>
|
|
|
|
<div class="role-info">
|
|
Admin • Pengurus • Pengguna
|
|
</div>
|
|
|
|
<form method="POST" action="api/login.php">
|
|
|
|
<div class="input-group">
|
|
<i class="fa fa-user"></i>
|
|
<input name="username" placeholder="Username" required>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<i class="fa fa-lock"></i>
|
|
<input name="password" type="password" placeholder="Password" required>
|
|
</div>
|
|
|
|
<button type="submit">
|
|
LOGIN
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div class="footer">
|
|
Sistem Pemetaan Kemiskinan Berbasis GIS
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|