504 lines
15 KiB
HTML
504 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Login Native Android</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: #f5f5f5;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Status bar ala Android */
|
|
.status-bar {
|
|
background: #f5f5f5;
|
|
padding: 12px 24px 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #1e1e1e;
|
|
}
|
|
|
|
.status-bar .time {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-bar .icons {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Container utama - full screen tanpa card */
|
|
.container {
|
|
flex: 1;
|
|
padding: 24px 24px 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Header dengan tombol back khas Android */
|
|
.app-header {
|
|
margin-bottom: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.back-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
color: #1e1e1e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-button:active {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.back-button svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #1e1e1e;
|
|
}
|
|
|
|
.app-title {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: #1e1e1e;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Ilustrasi/logo khas Android */
|
|
.android-illustration {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.android-logo {
|
|
width: 96px;
|
|
height: 96px;
|
|
background: #3ddc84;
|
|
border-radius: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 12px rgba(61, 220, 132, 0.3);
|
|
}
|
|
|
|
.android-logo svg {
|
|
width: 56px;
|
|
height: 56px;
|
|
fill: white;
|
|
}
|
|
|
|
.welcome-text {
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: #1e1e1e;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sub-text {
|
|
font-size: 16px;
|
|
color: #5e5e5e;
|
|
}
|
|
|
|
/* Form input ala Android native */
|
|
.form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #3c3c3c;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 8px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.input-android {
|
|
background: #eeeeee;
|
|
border-radius: 28px;
|
|
padding: 4px 20px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.input-android:focus-within {
|
|
background: #ffffff;
|
|
border-color: #3ddc84;
|
|
box-shadow: 0 2px 8px rgba(61, 220, 132, 0.2);
|
|
}
|
|
|
|
.input-android svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #5e5e5e;
|
|
}
|
|
|
|
.input-android:focus-within svg {
|
|
fill: #3ddc84;
|
|
}
|
|
|
|
.input-android input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 16px 0;
|
|
font-size: 16px;
|
|
color: #1e1e1e;
|
|
outline: none;
|
|
}
|
|
|
|
.input-android input::placeholder {
|
|
color: #9e9e9e;
|
|
}
|
|
|
|
/* Lupa password */
|
|
.forgot-section {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 8px 16px 32px;
|
|
}
|
|
|
|
.forgot-link {
|
|
color: #3ddc84;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.forgot-link:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Tombol login ala Android */
|
|
.login-button {
|
|
background: #3ddc84;
|
|
border: none;
|
|
border-radius: 30px;
|
|
padding: 18px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1e1e1e;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 4px 12px rgba(61, 220, 132, 0.3);
|
|
cursor: pointer;
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.login-button:active {
|
|
transform: scale(0.98);
|
|
background: #2cb56b;
|
|
box-shadow: 0 2px 6px rgba(61, 220, 132, 0.4);
|
|
}
|
|
|
|
.login-button svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #1e1e1e;
|
|
}
|
|
|
|
/* Divider */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 24px 0;
|
|
color: #9e9e9e;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.divider-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.divider-text {
|
|
margin: 0 16px;
|
|
}
|
|
|
|
/* Opsi login lain */
|
|
.other-login {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.other-btn {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 28px;
|
|
background: #ffffff;
|
|
border: 1px solid #e0e0e0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.other-btn:active {
|
|
background: #f5f5f5;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.other-btn svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
/* Biometric section */
|
|
.biometric-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.biometric-hint {
|
|
font-size: 14px;
|
|
color: #5e5e5e;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.fingerprint-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.fingerprint-icon:active {
|
|
background: #e4e4e4;
|
|
border-color: #3ddc84;
|
|
}
|
|
|
|
.fingerprint-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
fill: #5e5e5e;
|
|
}
|
|
|
|
/* Link daftar */
|
|
.signup-link {
|
|
text-align: center;
|
|
margin-top: 24px;
|
|
padding: 16px;
|
|
font-size: 15px;
|
|
color: #5e5e5e;
|
|
}
|
|
|
|
.signup-link a {
|
|
color: #3ddc84;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.signup-link a:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Navigation bar ala Android */
|
|
.nav-bar {
|
|
background: #ffffff;
|
|
padding: 8px 24px 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #eaeaea;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #9e9e9e;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #3ddc84;
|
|
}
|
|
|
|
.nav-item.active svg {
|
|
fill: #3ddc84;
|
|
}
|
|
|
|
.nav-item svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #9e9e9e;
|
|
}
|
|
|
|
/* Animasi */
|
|
@keyframes ripple {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(0.98); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.ripple:active {
|
|
animation: ripple 0.2s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Main content - full screen -->
|
|
<div class="container">
|
|
<!-- Header dengan back button -->
|
|
<div class="app-header">
|
|
</div>
|
|
|
|
<!-- Logo Android -->
|
|
<div class="android-illustration">
|
|
<div class="android-logo">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M17.5 15.5c0 1.11-.89 2-2 2s-2-.89-2-2 .89-2 2-2 2 .89 2 2zm-7 0c0 1.11-.89 2-2 2s-2-.89-2-2 .89-2 2-2 2 .89 2 2zm9-5l1.95-3.38c.28-.48.11-1.09-.37-1.37-.48-.28-1.09-.11-1.37.37L18.34 9H5.66L3.29 5.62c-.28-.48-.89-.65-1.37-.37-.48.28-.65.89-.37 1.37L3.5 10.5c-.31.43-.5.96-.5 1.5v5c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2v-5c0-.54-.19-1.07-.5-1.5z"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="welcome-text">Selamat datang</h1>
|
|
<p class="sub-text">Masuk ke akun Android kamu</p>
|
|
</div>
|
|
|
|
<!-- Form login -->
|
|
<div class="form-group">
|
|
<div class="input-label">NISN</div>
|
|
<div class="input-android">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
|
</svg>
|
|
<input type="nisn" placeholder="nama@email.com" value="012345678">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-label">Kata sandi</div>
|
|
<div class="input-android">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
|
|
</svg>
|
|
<input type="password" placeholder="Masukkan sandi" value="12345678">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lupa password -->
|
|
<div class="forgot-section">
|
|
<a href="#" class="forgot-link">Lupa kata sandi?</a>
|
|
</div>
|
|
|
|
<!-- Tombol login -->
|
|
<button class="login-button ripple" onclick="alert('Demo: Login berhasil!')">
|
|
MASUK
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Divider -->
|
|
<div class="divider">
|
|
<div class="divider-line"></div>
|
|
<span class="divider-text">atau</span>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
<!-- Login lain -->
|
|
<div class="other-login">
|
|
<button class="other-btn">
|
|
<svg viewBox="0 0 24 24">
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
<path fill="#4285F4" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="other-btn">
|
|
<svg viewBox="0 0 24 24" fill="#1877F2">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Fingerprint -->
|
|
<div class="biometric-section">
|
|
<div class="biometric-hint">Atau gunakan sidik jari</div>
|
|
<div class="fingerprint-icon ripple" onclick="alert('Demo: Autentikasi biometrik')">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.54.2-.68C7.9 2.52 9.94 2 12.01 2c2.07 0 3.98.5 5.74 1.44.24.13.35.43.22.67-.09.18-.26.28-.45.28zM4.32 7.09c-.19 0-.38-.1-.48-.27-.13-.24-.04-.54.2-.68.77-.43 1.57-.76 2.39-.99.23-.06.47.07.54.3.07.23-.07.47-.3.54-.75.21-1.48.51-2.2.91-.17.12-.36.19-.55.19zM3 13.5c-.28 0-.5-.22-.5-.5 0-1.36.21-2.69.64-3.96.08-.23.33-.35.56-.27.23.08.35.33.27.56-.38 1.14-.58 2.35-.58 3.67 0 .28-.22.5-.5.5zM21 13.5c-.28 0-.5-.22-.5-.5 0-3.75-2.92-6.86-6.64-7.15-.24-.02-.43-.22-.42-.46.02-.24.22-.43.46-.42C18.47 5.27 22 8.97 22 13c0 .28-.22.5-.5.5zM11.5 22c-.28 0-.5-.22-.5-.5v-4c0-.28.22-.5.5-.5s.5.22.5.5v4c0 .28-.22.5-.5.5zM15.5 22c-.28 0-.5-.22-.5-.5v-6c0-.28.22-.5.5-.5s.5.22.5.5v6c0 .28-.22.5-.5.5zM19.5 22c-.28 0-.5-.22-.5-.5v-2c0-.28.22-.5.5-.5s.5.22.5.5v2c0 .28-.22.5-.5.5zM7.5 22c-.28 0-.5-.22-.5-.5v-4c0-.28.22-.5.5-.5s.5.22.5.5v4c0 .28-.22.5-.5.5z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Link daftar -->
|
|
<div class="signup-link">
|
|
Belum punya akun?<a href="#">Daftar</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
|
|
|
|
<script>
|
|
// Simulasi interaksi native
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Efek ripple sederhana
|
|
document.querySelectorAll('.ripple').forEach(el => {
|
|
el.addEventListener('mousedown', function(e) {
|
|
this.style.transform = 'scale(0.98)';
|
|
});
|
|
el.addEventListener('mouseup', function(e) {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
el.addEventListener('mouseleave', function(e) {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |