187 lines
6.5 KiB
PHP
187 lines
6.5 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('content')
|
|
<style>
|
|
:root {
|
|
--primary-color: #4c51bf;
|
|
--primary-hover: #5a67d8;
|
|
--border-color: #e2e8f0;
|
|
--bg-light: #ffffff;
|
|
--text-dark: #2d3748;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary-color: #7f9cf5;
|
|
--primary-hover: #a3bffa;
|
|
--bg-light: #1e293b;
|
|
--text-dark: #e2e8f0;
|
|
--border-color: #4a5568;
|
|
}
|
|
}
|
|
|
|
.center-wrapper {
|
|
min-height: 88vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f8fafc, #edf2f7);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.center-wrapper {
|
|
background: linear-gradient(135deg, #1a202c, #2d3748);
|
|
}
|
|
}
|
|
|
|
.card-form {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
border-radius: 1rem;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-light);
|
|
}
|
|
.card-form:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.card-header {
|
|
background-color: var(--bg-light);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.card-header h3 {
|
|
color: var(--primary-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-label {
|
|
color: var(--text-dark);
|
|
font-weight: 600;
|
|
}
|
|
.input-group-text {
|
|
background-color: #f8f9fa;
|
|
color: #718096;
|
|
}
|
|
.form-control-lg:focus,
|
|
.form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.2rem rgba(76, 81, 191, 0.25);
|
|
}
|
|
|
|
.btn-lg {
|
|
transition: all 0.25s ease-in-out;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border: none;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: #edf2f7;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { transform: translateY(25px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.animated-card {
|
|
animation: fadeInUp 0.6s ease-out both;
|
|
}
|
|
</style>
|
|
|
|
<div class="center-wrapper">
|
|
<div class="card card-form shadow-lg border-0 animated-card">
|
|
<div class="card-header bg-white border-0 pt-4 pb-2 px-4">
|
|
<h3 class="mb-1 text-primary"><i class="fas fa-user-plus me-2"></i>Formulir Pendaftaran Anggota</h3>
|
|
<p class="text-muted mb-0">Lengkapi data berikut untuk menambahkan anggota baru.</p>
|
|
</div>
|
|
|
|
<div class="card-body p-4">
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('user.member.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<div class="mb-4">
|
|
<label for="nama" class="form-label">Nama Lengkap</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text" name="nama" id="nama" class="form-control form-control-lg" placeholder="Masukkan nama lengkap" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="nip_nim" class="form-label">NIP/NIM</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-id-card"></i></span>
|
|
<input type="text" name="nip_nim" id="nip_nim" class="form-control form-control-lg" placeholder="Masukkan NIP/NIM" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="email" class="form-label">Email Aktif</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="contoh@email.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="no_hp" class="form-label">Nomor HP</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-phone"></i></span>
|
|
<input type="text" name="no_hp" id="no_hp" class="form-control form-control-lg" placeholder="0812xxxxxxx" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="foto" class="form-label">Foto Anggota</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-image"></i></span>
|
|
<input type="file" name="foto" id="foto" class="form-control form-control-lg" accept="image/*">
|
|
</div>
|
|
<small class="text-muted">Format: JPG, JPEG, PNG — Maksimal 2MB</small>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="alamat" class="form-label">Alamat Lengkap</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text align-items-start pt-2"><i class="fas fa-map-marker-alt"></i></span>
|
|
<textarea name="alamat" id="alamat" class="form-control form-control-lg" rows="4" placeholder="Detail jalan, kota, dan kode pos" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info small mt-4" style="border-radius: 0.5rem;">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<strong>Perhatian!</strong> Semua data yang diisi harus <strong>valid</strong> dan <strong>sesuai dengan identitas Anda</strong>.
|
|
Pastikan tidak ada kesalahan agar proses pendaftaran anggota dapat disetujui oleh admin.
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center pt-3">
|
|
<a href="{{ route('user.koleksi') }}" class="btn btn-outline-secondary btn-lg">
|
|
<i class="fas fa-arrow-left me-1"></i> Batal / Kembali
|
|
</a>
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-save me-1"></i> Simpan Anggota
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|