134 lines
4.1 KiB
PHP
134 lines
4.1 KiB
PHP
@extends('layouts.auth')
|
|
|
|
@section('title', 'Login Siswa — E-Learning RPL')
|
|
|
|
@section('content')
|
|
<link rel="stylesheet" href="{{ asset('css/login.css') }}">
|
|
|
|
<div class="page-wrap">
|
|
|
|
{{-- LEFT: Info Panel --}}
|
|
<div class="left-panel">
|
|
<div class="left-accent"></div>
|
|
|
|
<div class="school-logo">
|
|
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
|
|
</div>
|
|
|
|
<div class="left-tag">SMK Negeri 1 Tapen</div>
|
|
|
|
<h1 class="left-title">
|
|
Platform<br>
|
|
<em>E-Learning</em><br>
|
|
RPL
|
|
</h1>
|
|
|
|
<div class="left-school">Rekayasa Perangkat Lunak</div>
|
|
|
|
<p class="left-desc">
|
|
Akses materi, kumpulkan tugas, ikuti challenge, dan bersaing di leaderboard kelas.
|
|
</p>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-item">
|
|
<div class="stat-num">3</div>
|
|
<div class="stat-label">Kelas RPL</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num">EXP</div>
|
|
<div class="stat-label">Sistem Poin</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num">#1</div>
|
|
<div class="stat-label">Leaderboard</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- RIGHT: Form --}}
|
|
<div class="right-panel">
|
|
<div>
|
|
<div class="form-card">
|
|
|
|
<div class="role-badge">
|
|
<span class="badge-dot"></span>
|
|
Portal Siswa
|
|
</div>
|
|
|
|
<div class="form-title">Masuk ke Akun</div>
|
|
<div class="form-sub">Gunakan NISN kamu untuk login</div>
|
|
|
|
@if ($errors->any())
|
|
<div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('siswa.login.submit') }}">
|
|
@csrf
|
|
|
|
<div class="field-group">
|
|
<label class="field-label">NISN</label>
|
|
<div class="field-wrap">
|
|
<img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
|
|
<input type="text" name="nisn" class="field-input"
|
|
placeholder="Masukkan NISN" required
|
|
value="{{ old('nisn') }}" autocomplete="username">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label class="field-label">Password</label>
|
|
<div class="field-wrap">
|
|
<img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
|
|
<input type="password" name="password" class="field-input password-input"
|
|
placeholder="Masukkan password" required autocomplete="current-password">
|
|
<button type="button" class="toggle-password" aria-label="Lihat password">
|
|
<img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="remember-row">
|
|
<input type="checkbox" class="remember-check" name="remember" id="remember"
|
|
{{ old('remember') ? 'checked' : '' }}>
|
|
<label class="remember-text" for="remember">Ingat saya</label>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn">Masuk ke Dashboard</button>
|
|
</form>
|
|
|
|
<hr class="card-divider">
|
|
|
|
<div class="other-portals">
|
|
<span>Login sebagai</span>
|
|
<a href="{{ route('guru.login') }}">Guru</a>
|
|
<span>·</span>
|
|
<a href="{{ route('admin.login') }}">Admin</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggleBtn = document.querySelector('.toggle-password');
|
|
const passwordInput = document.querySelector('.password-input');
|
|
const eyeIcon = toggleBtn?.querySelector('img');
|
|
|
|
toggleBtn?.addEventListener('click', () => {
|
|
const isVisible = passwordInput.type === 'text';
|
|
passwordInput.type = isVisible ? 'password' : 'text';
|
|
eyeIcon.src = isVisible
|
|
? "{{ asset('icons/show.svg') }}"
|
|
: "{{ asset('icons/hide.svg') }}";
|
|
});
|
|
|
|
const toast = document.getElementById('toast-error');
|
|
if (toast) setTimeout(() => toast.remove(), 4000);
|
|
});
|
|
</script>
|
|
@endsection |