193 lines
6.1 KiB
HTML
193 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tambah Admin Baru</title>
|
|
<link rel="stylesheet" href="../assets/css/login.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<style>
|
|
/* Custom styles for add admin page */
|
|
.login-left .logo {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.login-left .welcome-text {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.success-message {
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
color: #166534;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
border-left: 4px solid #22c55e;
|
|
font-size: 0.9rem;
|
|
display: none;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
.error-message {
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
|
|
color: #991b1b;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
border-left: 4px solid #ef4444;
|
|
font-size: 0.9rem;
|
|
display: none;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #6B46C1;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
margin-top: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #553c9a;
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #ffffff;
|
|
border-top: 2px solid transparent;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.login-btn:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
.form-input.error {
|
|
border-color: #dc2626;
|
|
background-color: #fef2f2;
|
|
}
|
|
|
|
.form-input.success {
|
|
border-color: #22c55e;
|
|
background-color: #f0fdf4;
|
|
}
|
|
|
|
.input-with-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.toggle-password {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
color: #6b7280;
|
|
font-size: 1.1rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.toggle-password:hover {
|
|
color: #374151;
|
|
}
|
|
|
|
.form-input {
|
|
padding-right: 45px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-left">
|
|
<div class="logo">👨💼 Admin</div>
|
|
<div class="welcome-text">
|
|
Tambahkan admin baru untuk<br>
|
|
mengelola sistem wahana playground
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-right">
|
|
<form class="login-form" id="addAdminForm">
|
|
<h2>Tambah Admin Baru</h2>
|
|
<p>Buat akun admin baru untuk sistem</p>
|
|
|
|
<div id="errorMessage" class="error-message">
|
|
Terjadi kesalahan saat menambahkan admin
|
|
</div>
|
|
|
|
<div id="successMessage" class="success-message">
|
|
Admin berhasil ditambahkan!
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" class="form-input" required
|
|
placeholder="Masukkan username admin">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<div class="input-with-icon">
|
|
<input type="password" id="password" name="password" class="form-input" required
|
|
placeholder="Masukkan password">
|
|
<span class="toggle-password" id="togglePassword">
|
|
<i class="fas fa-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Konfirmasi Password</label>
|
|
<div class="input-with-icon">
|
|
<input type="password" id="confirmPassword" name="confirmPassword" class="form-input" required
|
|
placeholder="Ulangi password">
|
|
<span class="toggle-password" id="toggleConfirmPassword">
|
|
<i class="fas fa-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn" id="submitBtn">
|
|
<span class="loading-spinner" id="loadingSpinner"></span>
|
|
<span id="btnText">Tambah Admin</span>
|
|
</button>
|
|
|
|
<a href="dashboard.html" class="back-link">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Kembali ke Dashboard
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../assets/js/tambah_admin.js"></script>
|
|
</body>
|
|
</html> |