369 lines
20 KiB
PHP
369 lines
20 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Input Data Pengguna - Silakan masukkan informasi pengguna">
|
|
<title>Input Data - Dashboard</title>
|
|
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
@if(session('success'))
|
|
<div class="toast success show">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Mobile Top Bar -->
|
|
<div class="mobile-topbar">
|
|
<div class="mobile-topbar-logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<span class="mobile-topbar-title">DASHBOARD</span>
|
|
<span class="mobile-topbar-page">Input Data</span>
|
|
<button class="mobile-theme-btn" id="mobileThemeBtn" title="Ganti Tema">
|
|
<svg id="mobileThemeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Bottom Navigation -->
|
|
<nav class="mobile-bottom-nav">
|
|
<a href="/dashboard" class="mobile-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
Dashboard
|
|
</a>
|
|
<a href="/input-data" class="mobile-nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="9" y1="3" x2="9" y2="21" />
|
|
</svg>
|
|
Input Data
|
|
</a>
|
|
<a href="/histori" class="mobile-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="8" y1="9" x2="16" y2="9" />
|
|
<line x1="8" y1="13" x2="14" y2="13" />
|
|
<line x1="8" y1="17" x2="12" y2="17" />
|
|
</svg>
|
|
Histori
|
|
</a>
|
|
<form method="POST" action="{{ route('logout') }}" style="flex:1;display:contents">
|
|
@csrf
|
|
<button type="submit" class="mobile-nav-item logout-nav">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" />
|
|
<polyline points="16 17 21 12 16 7" />
|
|
<line x1="21" y1="12" x2="9" y2="12" />
|
|
</svg>
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
|
|
<div class="dashboard-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
</svg>
|
|
</div>
|
|
<span class="sidebar-title">DASHBOARD</span>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a href="/dashboard" class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
<polyline points="9 22 9 12 15 12 15 22" />
|
|
</svg>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="/input-data" class="nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="9" y1="3" x2="9" y2="21" />
|
|
</svg>
|
|
<span>Input Data</span>
|
|
</a>
|
|
<a href="/histori" class="nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<line x1="8" y1="9" x2="16" y2="9" />
|
|
<line x1="8" y1="13" x2="14" y2="13" />
|
|
<line x1="8" y1="17" x2="12" y2="17" />
|
|
</svg>
|
|
<span>Histori</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<button class="theme-toggle-btn" id="themeToggleBtn" title="Ganti Tema">
|
|
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
<span id="themeLabel">Mode Terang</span>
|
|
<div class="theme-pill"></div>
|
|
</button>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="nav-item logout" style="background:none;border:none;width:100%;text-align:left;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="content-wrapper">
|
|
<div class="page-header">
|
|
<h1 class="page-title">INPUT DATA PENGGUNA</h1>
|
|
<p class="page-subtitle">Silakan masukkan informasi pengguna</p>
|
|
</div>
|
|
|
|
<div class="content-card form-layout">
|
|
|
|
<!-- FORM -->
|
|
<div class="form-section">
|
|
<form method="POST" action="{{ route('input.store') }}">
|
|
@csrf
|
|
|
|
<!-- Nama -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
Nama
|
|
</label>
|
|
<input type="text" class="form-input @error('name') is-invalid @enderror" id="inputNama" name="name" placeholder="Nama lengkap" value="{{ old('name') }}" required>
|
|
@error('name')
|
|
<small style="color:#f87171;font-size:0.78rem;margin-top:4px;display:block;">⚠ {{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" />
|
|
<path d="M22 4L12 13L2 4" />
|
|
</svg>
|
|
Email
|
|
</label>
|
|
<input type="email" class="form-input @error('email') is-invalid @enderror" id="inputEmail" name="email" placeholder="Email" value="{{ old('email') }}" required>
|
|
@error('email')
|
|
<small style="color:#f87171;font-size:0.78rem;margin-top:4px;display:block;">⚠ {{ $message }}</small>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Jenis Kelamin -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="8" r="4"/>
|
|
<path d="M12 12v8M8 16h8"/>
|
|
</svg>
|
|
Jenis Kelamin
|
|
</label>
|
|
<select class="form-select" id="inputGender" name="gender" required>
|
|
<option value="" disabled selected>-- Pilih Jenis Kelamin --</option>
|
|
<option value="laki-laki">Laki-laki</option>
|
|
<option value="perempuan">Perempuan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Tanggal Lahir -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
Tanggal Lahir
|
|
</label>
|
|
<div class="date-row">
|
|
<select class="form-select" id="inputDay" name="day" required>
|
|
<option value="" disabled selected>Tanggal</option>
|
|
@for($d = 1; $d <= 31; $d++)
|
|
<option value="{{ $d }}">{{ $d }}</option>
|
|
@endfor
|
|
</select>
|
|
<select class="form-select" id="inputMonth" name="month" required>
|
|
<option value="" disabled selected>Bulan</option>
|
|
<option value="1">Januari</option>
|
|
<option value="2">Februari</option>
|
|
<option value="3">Maret</option>
|
|
<option value="4">April</option>
|
|
<option value="5">Mei</option>
|
|
<option value="6">Juni</option>
|
|
<option value="7">Juli</option>
|
|
<option value="8">Agustus</option>
|
|
<option value="9">September</option>
|
|
<option value="10">Oktober</option>
|
|
<option value="11">November</option>
|
|
<option value="12">Desember</option>
|
|
</select>
|
|
<select class="form-select" id="inputYear" name="year" required>
|
|
<option value="" disabled selected>Tahun</option>
|
|
@for($y = date('Y'); $y >= 1940; $y--)
|
|
<option value="{{ $y }}">{{ $y }}</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice Keyword -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
<line x1="12" y1="19" x2="12" y2="23"/>
|
|
<line x1="8" y1="23" x2="16" y2="23"/>
|
|
</svg>
|
|
Register Voice Keyword
|
|
</label>
|
|
<input type="text" class="form-input @error('voice_keyword') is-invalid @enderror" id="inputVoiceKeyword" name="voice_keyword"
|
|
placeholder="Masukkan kata kunci suara (contoh: buka pintu)" value="{{ old('voice_keyword') }}" required>
|
|
@error('voice_keyword')
|
|
<small style="color:#f87171;font-size:0.78rem;margin-top:4px;display:block;">⚠ {{ $message }}</small>
|
|
@enderror
|
|
<small style="color: var(--text-muted, #8892a4); font-size: 0.75rem; margin-top: 4px; display:block;">
|
|
🎙️ Kata kunci ini akan digunakan untuk membuka pintu dengan suara
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Register Wajah -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
|
|
</svg>
|
|
Register Wajah
|
|
</label>
|
|
<div style="
|
|
background: rgba(99,102,241,0.08);
|
|
border: 1px solid rgba(99,102,241,0.3);
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: #a5b4fc;
|
|
font-size: 0.875rem;
|
|
">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#a5b4fc" stroke-width="2" width="24" height="24">
|
|
<circle cx="12" cy="8" r="4"/>
|
|
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
|
|
<path d="M16 3.5c1.5.5 2.5 2 2.5 3.5s-1 3-2.5 3.5"/>
|
|
</svg>
|
|
<span>Wajah didaftarkan langsung di <strong>alat depan pintu</strong> setelah data disimpan</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<button type="submit" class="btn-submit" id="submitBtn">
|
|
SIMPAN DATA
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="image-section">
|
|
<img src="{{ asset('images/biometric.png') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="{{ asset('js/dashboard.js') }}" defer></script>
|
|
<script>
|
|
// ===== THEME TOGGLE =====
|
|
(function() {
|
|
const saved = localStorage.getItem('theme');
|
|
if (saved === 'light') document.documentElement.classList.add('light');
|
|
})();
|
|
|
|
function updateThemeUI() {
|
|
const isLight = document.documentElement.classList.contains('light');
|
|
const moonSvg = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
|
|
const sunSvg = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
|
|
const icon = document.getElementById('themeIcon');
|
|
const label = document.getElementById('themeLabel');
|
|
const mobileIcon = document.getElementById('mobileThemeIcon');
|
|
if (icon) icon.innerHTML = isLight ? moonSvg : sunSvg;
|
|
if (mobileIcon) mobileIcon.innerHTML = isLight ? moonSvg : sunSvg;
|
|
if (label) label.textContent = isLight ? 'Mode Gelap' : 'Mode Terang';
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
html.classList.toggle('light');
|
|
localStorage.setItem('theme', html.classList.contains('light') ? 'light' : 'dark');
|
|
updateThemeUI();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateThemeUI();
|
|
const btn = document.getElementById('themeToggleBtn');
|
|
const mobileBtn = document.getElementById('mobileThemeBtn');
|
|
if (btn) btn.addEventListener('click', toggleTheme);
|
|
if (mobileBtn) mobileBtn.addEventListener('click', toggleTheme);
|
|
|
|
// Toggle warna select: abu-abu saat placeholder, putih saat sudah dipilih
|
|
document.querySelectorAll('.form-select').forEach(function(sel) {
|
|
function checkSelected() {
|
|
if (sel.value !== '') {
|
|
sel.classList.add('is-selected');
|
|
} else {
|
|
sel.classList.remove('is-selected');
|
|
}
|
|
}
|
|
sel.addEventListener('change', checkSelected);
|
|
checkSelected(); // cek kondisi awal (misal saat back/reload)
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |