Mei 23, 2026
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Gardenia 1</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
body{
background:#f5f6fa;
font-family:'Segoe UI', sans-serif;
min-height:100vh;
overflow-x:hidden;
}
/* TOP BACKGROUND */
.top-bg{
background:linear-gradient(180deg,#0d6efd,#1677ff);
height:320px;
border-bottom-left-radius:45px;
border-bottom-right-radius:45px;
position:relative;
}
/* LOGO */
.logo-box{
width:95px;
height:95px;
background:white;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
margin:auto;
}
.logo-box i{
font-size:52px;
color:#0d6efd;
}
/* LOGIN CARD */
.login-card{
background:white;
border-radius:30px;
padding:32px 24px;
margin-top:-90px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}
.app-title{
font-size:34px;
font-weight:800;
color:#111;
margin-top:18px;
margin-bottom:5px;
}
.app-subtitle{
color:#777;
font-size:17px;
margin-bottom:28px;
}
/* FORM */
.form-label{
font-weight:700;
color:#333;
margin-bottom:10px;
}
.input-group{
background:#f7f8fc;
border-radius:18px;
border:1px solid #e6e6e6;
overflow:hidden;
min-height:58px;
}
.input-group-text{
background:transparent;
border:none;
color:#0d6efd;
font-size:20px;
padding-left:18px;
}
.form-control{
border:none;
background:transparent;
box-shadow:none !important;
font-size:17px;
}
.form-control::placeholder{
color:#999;
}
/* LOGIN BUTTON */
.btn-login{
background:#0d6efd;
border:none;
width:100%;
min-height:58px;
border-radius:18px;
color:white;
font-size:20px;
font-weight:700;
box-shadow:0 8px 18px rgba(13,110,253,0.3);
transition:0.2s;
}
.btn-login:hover{
background:#0b5ed7;
transform:translateY(-1px);
}
/* EXTRA */
.forgot{
text-decoration:none;
color:#0d6efd;
font-weight:600;
font-size:15px;
}
.bottom-text{
color:#888;
font-size:15px;
text-align:center;
margin-top:28px;
}
.bottom-text a{
color:#0d6efd;
text-decoration:none;
font-weight:700;
}
/* MOBILE */
@media(max-width:576px){
.top-bg{
height:280px;
}
.app-title{
font-size:28px;
}
.login-card{
padding:28px 20px;
}
}
</style>
</head>
<body>
<!-- TOP BACKGROUND -->
<div class="top-bg d-flex align-items-center justify-content-center">
<div class="text-center text-white">
<div class="logo-box">
<i class="bi bi-mortarboard-fill"></i>
</div>
<h1 class="fw-bold mt-4 mb-2">
Gardenia 1
</h1>
<div class="opacity-75">
Aplikasi Kasir & Pembayaran
</div>
</div>
</div>
<!-- LOGIN CARD -->
<div class="container"
style="max-width:500px;">
<div class="login-card">
<div class="text-center">
<div class="app-title">
Selamat Datang
</div>
<div class="app-subtitle">
Silakan login untuk melanjutkan
</div>
</div>
<form>
<!-- EMAIL -->
<div class="mb-4">
<label class="form-label">
Email / Username
</label>
<div class="input-group">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text"
class="form-control"
placeholder="Masukkan username">
</div>
</div>
<!-- PASSWORD -->
<div class="mb-3">
<label class="form-label">
Password
</label>
<div class="input-group">
<span class="input-group-text">
<i class="bi bi-lock-fill"></i>
</span>
<input type="password"
class="form-control"
placeholder="Masukkan password">
</div>
</div>
<!-- REMEMBER -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
id="remember">
<label class="form-check-label"
for="remember">
Ingat saya
</label>
</div>
<a href="#"
class="forgot">
Lupa Password?
</a>
</div>
<!-- BUTTON -->
<button type="submit"
class="btn-login">
<i class="bi bi-box-arrow-in-right me-2"></i>
Masuk
</button>
</form>
<!-- FOOTER -->
<div class="bottom-text">
Belum punya akun?
<a href="#">
Hubungi Admin
</a>
</div>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar