From bc69735b8d5a7f7095969924ac8f0dea86f87f9e Mon Sep 17 00:00:00 2001 From: RetasyaSalsabila Date: Thu, 12 Mar 2026 10:55:09 +0700 Subject: [PATCH] landing page & login 3 user --- .../Controllers/Admin/LoginController.php | 2 +- app/Http/Controllers/Guru/LoginController.php | 3 +- public/css/login-admin.css | 239 ----- public/css/login.css | 508 +++++++++++ resources/views/auth/landing-page.blade.php | 814 +++++++++++++++++- resources/views/auth/login-admin.blade.php | 167 ++-- resources/views/auth/login-guru.blade.php | 155 ++-- resources/views/auth/login-siswa.blade.php | 162 ++-- 8 files changed, 1632 insertions(+), 418 deletions(-) delete mode 100644 public/css/login-admin.css create mode 100644 public/css/login.css diff --git a/app/Http/Controllers/Admin/LoginController.php b/app/Http/Controllers/Admin/LoginController.php index a8b2e89..5348f78 100644 --- a/app/Http/Controllers/Admin/LoginController.php +++ b/app/Http/Controllers/Admin/LoginController.php @@ -22,7 +22,7 @@ public function loginAdmin(Request $request) $credentials = $request->only('username', 'password'); - if (Auth::guard('admin')->attempt($credentials)) { + if (Auth::guard('admin')->attempt($credentials, $request->boolean('remember'))) { $request->session()->regenerate(); return redirect()->intended(route('admin.dashboard')); diff --git a/app/Http/Controllers/Guru/LoginController.php b/app/Http/Controllers/Guru/LoginController.php index 746b9bf..b5e703d 100644 --- a/app/Http/Controllers/Guru/LoginController.php +++ b/app/Http/Controllers/Guru/LoginController.php @@ -25,8 +25,7 @@ public function login(Request $request) $credentials = $request->only('nip', 'password'); - // Attempt login dengan guard 'guru' - if (Auth::guard('guru')->attempt($credentials)) { + if (Auth::guard('guru')->attempt($credentials, $request->boolean('remember'))) { $request->session()->regenerate(); return redirect()->intended(route('guru.dashboard')); diff --git a/public/css/login-admin.css b/public/css/login-admin.css deleted file mode 100644 index 47c5cda..0000000 --- a/public/css/login-admin.css +++ /dev/null @@ -1,239 +0,0 @@ -/* RESET */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* Fullscreen background biru */ -body { - font-family: "Istok Web", sans-serif; - background-color: #2196f3; - min-height: 100vh; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; -} - -/* Section penuh layar */ -.signin-section { - width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -/* Container form */ -.signin-container { - width: 100%; - max-width: 600px; - text-align: center; - color: white; -} - -/* Judul */ -.signin-title { - font-weight: 700; - font-size: 40px; - margin-bottom: 40px; - color: #fff; - text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -} - -/* Kartu putih */ -.form-card { - background-color: #ffffff; - border-radius: 20px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); - padding: 60px 70px; - display: flex; - flex-direction: column; - gap: 30px; - align-items: center; -} - -/* Input */ -.input-group { - background-color: #f1f5f9; - border-radius: 10px; - padding: 10px 20px; - display: flex; - align-items: center; - gap: 10px; - width: 100%; - max-width: 400px; -} - -/* Tombol show/hide tanpa kotak */ -.password-wrapper { - position: relative; -} - -.toggle-password { - position: absolute; - right: 15px; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - outline: none; - padding: 0; - margin: 0; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -} - -.eye-icon { - width: 26px; - height: 26px; - background: transparent; - display: block; - pointer-events: none; - transition: opacity 0.2s ease, transform 0.2s ease; -} - -.toggle-password:hover .eye-icon { - opacity: 0.8; - transform: scale(1.05); -} - -.input-icon { - width: 24px; - height: 24px; -} - -.form-input { - flex: 1; - border: none; - background: transparent; - outline: none; - font-size: 18px; - color: #333; -} - -/* Tombol */ -.submit-btn { - margin-top: 30px; - background-color: #ffffff; - border: none; - color: #2290f6; - font-weight: 700; - font-size: 20px; - border-radius: 20px; - padding: 12px 0; - width: 100%; - max-width: 250px; - cursor: pointer; - transition: all 0.2s ease; -} - -.submit-btn:hover { - transform: translateY(-2px); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); -} - -/* LINK KEMBALI */ -.back-link { - color: #fff; - text-decoration: none; - margin-top: 25px; - display: inline-block; -} - -.back-link:hover { - text-decoration: underline; -} - -/* RESPONSIVE */ -@media (max-width: 992px) { - .form-card { - padding: 40px 50px; - max-width: 90%; - } -} - -@media (max-width: 600px) { - .signin-title { - font-size: 32px; - } - - .form-card { - padding: 30px 25px; - width: 90%; - } - - .submit-btn { - width: 200px; - font-size: 18px; - } -} - -/* ==================== */ -/* TOAST & REMEMBER CSS */ -/* ==================== */ - -/* Toast Notifikasi Error */ -.toast-error { - position: relative; - margin-bottom: 1rem; - background-color: #e62727; /* soft red pastel */ - color: #fff; - padding: 10px 14px; - border-radius: 10px; - text-align: center; - animation: fadeInOut 3.5s ease forwards; - font-size: 15px; - font-family: "Istok Web", sans-serif; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} - -@keyframes fadeInOut { - 0% { - opacity: 0; - transform: translateY(-10px); - } - 10% { - opacity: 1; - transform: translateY(0); - } - 90% { - opacity: 1; - transform: translateY(0); - } - 100% { - opacity: 0; - transform: translateY(-10px); - } -} - -/* Remember Me Styling */ -.remember-wrapper { - margin-top: 0.3rem; - display: flex; - align-items: center; - justify-content: center; /* <— ubah dari flex-start jadi center */ - width: 100%; -} - -.remember-label { - font-size: 15px; - color: #333; - font-family: "Istok Web", sans-serif; - cursor: pointer; - display: flex; - align-items: center; - gap: 6px; - user-select: none; -} - -.remember-label input { - transform: scale(1.1); - accent-color: #2196f3; /* biru lembut biar nyatu */ -} diff --git a/public/css/login.css b/public/css/login.css new file mode 100644 index 0000000..0ea7543 --- /dev/null +++ b/public/css/login.css @@ -0,0 +1,508 @@ +@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap"); + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Outfit", sans-serif; + min-height: 100vh; + width: 100vw; + overflow: hidden; + background: #eee8f4; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + background-image: radial-gradient( + circle, + rgba(120, 80, 180, 0.08) 1px, + transparent 1px + ); + background-size: 24px 24px; + pointer-events: none; + z-index: 0; +} + +/* ── WRAPPER ── */ +.page-wrap { + min-height: 100vh; + display: flex; + align-items: stretch; + position: relative; + z-index: 1; +} + +/* ── LEFT PANEL ── */ +.left-panel { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 60px 56px; + color: white; + position: relative; + overflow: hidden; + background: linear-gradient(155deg, #1a5fd4 0%, #1e3fa8 55%, #162d82 100%); +} + +.left-panel::before { + content: ""; + position: absolute; + width: 420px; + height: 420px; + border-radius: 50%; + background: radial-gradient( + circle, + rgba(100, 180, 255, 0.18) 0%, + transparent 65% + ); + top: -120px; + right: -100px; + pointer-events: none; +} + +.left-panel::after { + content: ""; + position: absolute; + width: 320px; + height: 320px; + border-radius: 50%; + border: 1.5px solid rgba(255, 255, 255, 0.07); + bottom: -80px; + left: -60px; + pointer-events: none; +} + +.left-accent { + position: absolute; + inset: 0; + background-image: repeating-linear-gradient( + -55deg, + transparent, + transparent 40px, + rgba(255, 255, 255, 0.015) 40px, + rgba(255, 255, 255, 0.015) 80px + ); + pointer-events: none; +} + +.school-logo { + width: 68px; + height: 68px; + border-radius: 18px; + background: rgba(255, 255, 255, 0.12); + border: 1.5px solid rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 36px; + position: relative; +} + +.school-logo img { + width: 48px; + height: 48px; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.left-tag { + font-family: "JetBrains Mono", monospace; + font-size: 10px; + font-weight: 700; + letter-spacing: 2.5px; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.45); + margin-bottom: 12px; + position: relative; +} + +.left-title { + font-size: clamp(26px, 3vw, 40px); + font-weight: 800; + line-height: 1.15; + margin-bottom: 14px; + letter-spacing: -0.5px; + position: relative; +} + +.left-title em { + font-style: normal; + position: relative; +} + +.left-title em::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 1px; + height: 3px; + border-radius: 99px; + background: #a5d8ff; + opacity: 0.55; +} + +.left-school { + font-size: 13px; + color: rgba(255, 255, 255, 0.42); + font-weight: 500; + margin-bottom: 20px; + position: relative; +} + +.left-desc { + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + line-height: 1.75; + max-width: 320px; + margin-bottom: 40px; + position: relative; +} + +.stats-row { + display: flex; + gap: 12px; + position: relative; +} + +.stat-item { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 14px; + padding: 14px 18px; +} + +.stat-num { + font-family: "JetBrains Mono", monospace; + font-size: 20px; + font-weight: 700; + color: white; + line-height: 1; +} + +.stat-label { + font-size: 10px; + color: rgba(255, 255, 255, 0.45); + margin-top: 5px; + font-weight: 500; + letter-spacing: 0.3px; +} + +/* ── RIGHT PANEL ── */ +.right-panel { + width: 420px; + flex-shrink: 0; + background: #eee8f4; + display: flex; + align-items: center; + justify-content: center; + padding: 48px 44px; +} + +/* ── FORM CARD ── */ +.form-card { + width: 100%; + background: white; + border-radius: 24px; + padding: 36px 36px 32px; + box-shadow: + 0 4px 6px rgba(100, 60, 180, 0.04), + 0 20px 40px rgba(100, 60, 180, 0.1), + 0 0 0 1px rgba(100, 60, 180, 0.06); +} + +.role-badge { + display: inline-flex; + align-items: center; + gap: 7px; + background: #ede9fb; + border-radius: 99px; + padding: 5px 13px; + font-size: 10px; + font-weight: 700; + color: #5b3fc0; + letter-spacing: 1.5px; + text-transform: uppercase; + font-family: "JetBrains Mono", monospace; + margin-bottom: 18px; +} + +.badge-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: #7c5cbf; +} + +.form-title { + font-size: 22px; + font-weight: 800; + color: #1a1a2e; + margin-bottom: 3px; + letter-spacing: -0.3px; +} + +.form-sub { + font-size: 13px; + color: #9ba3b8; + margin-bottom: 24px; + font-weight: 500; +} + +.field-group { + margin-bottom: 12px; +} + +.field-label { + display: block; + font-size: 11px; + font-weight: 700; + color: #4a5568; + letter-spacing: 0.5px; + text-transform: uppercase; + margin-bottom: 6px; +} + +.field-wrap { + position: relative; + display: flex; + align-items: center; +} + +.field-icon { + position: absolute; + left: 13px; + width: 15px; + height: 15px; + opacity: 0.3; + pointer-events: none; +} + +.field-input { + width: 100%; + background: #f7f5fc; + border: 1.5px solid #e8e2f5; + border-radius: 11px; + padding: 11px 13px 11px 38px; + font-size: 14px; + font-family: "Outfit", sans-serif; + font-weight: 500; + color: #1a1a2e; + outline: none; + transition: all 0.2s; +} + +.field-input::placeholder { + color: #bbb5cc; + font-weight: 400; +} + +.field-input:focus { + border-color: #7c5cbf; + background: white; + box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.1); +} + +.toggle-password { + position: absolute; + right: 11px; + background: none; + border: none; + cursor: pointer; + padding: 4px; + border-radius: 6px; + display: flex; + align-items: center; +} + +.eye-icon { + width: 16px; + height: 16px; + opacity: 0.3; + pointer-events: none; + transition: opacity 0.2s; +} + +.toggle-password:hover .eye-icon { + opacity: 0.6; +} + +.remember-row { + display: flex; + align-items: center; + margin: 8px 0 18px; + gap: 8px; +} + +.remember-check { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 1.5px solid #d4cce8; + border-radius: 5px; + cursor: pointer; + transition: all 0.2s; + position: relative; + flex-shrink: 0; +} + +.remember-check:checked { + background: #7c5cbf; + border-color: #7c5cbf; +} + +.remember-check:checked::after { + content: ""; + position: absolute; + left: 3px; + top: 0; + width: 5px; + height: 9px; + border: 1.5px solid white; + border-top: none; + border-left: none; + transform: rotate(45deg); +} + +.remember-text { + font-size: 13px; + color: #6b7280; + font-weight: 500; + cursor: pointer; + user-select: none; +} + +.submit-btn { + width: 100%; + background: linear-gradient(135deg, #1e6fd4, #1a3fa8); + color: white; + border: none; + border-radius: 11px; + padding: 13px; + font-size: 14px; + font-weight: 700; + font-family: "Outfit", sans-serif; + cursor: pointer; + transition: all 0.25s; + box-shadow: 0 6px 18px rgba(30, 63, 168, 0.3); + letter-spacing: 0.3px; +} + +.submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 26px rgba(30, 63, 168, 0.4); +} + +.submit-btn:active { + transform: translateY(0); +} + +.card-divider { + border: none; + border-top: 1px solid #f0ebfa; + margin: 18px 0 14px; +} + +.other-portals { + text-align: center; + font-size: 12px; + color: #9ba3b8; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +.other-portals a { + color: #5b3fc0; + font-weight: 700; + text-decoration: none; + padding: 3px 8px; + border-radius: 6px; + transition: background 0.2s; +} + +.other-portals a:hover { + background: #ede9fb; +} + +.back-link { + display: block; + text-align: center; + color: rgba(80, 60, 140, 0.45); + font-size: 12px; + text-decoration: none; + margin-top: 16px; + transition: color 0.2s; + font-weight: 500; +} + +.back-link:hover { + color: rgba(80, 60, 140, 0.75); +} + +.toast-error { + background: linear-gradient(135deg, #ff6b6b, #d32f2f); + color: white; + padding: 10px 14px; + border-radius: 10px; + font-size: 13px; + font-weight: 500; + text-align: center; + margin-bottom: 14px; + box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2); + animation: + toastIn 0.3s ease both, + toastOut 0.4s ease 3.5s forwards; +} + +@keyframes toastIn { + from { + opacity: 0; + transform: translateY(-8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes toastOut { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-8px); + } +} + +@media (max-width: 860px) { + .page-wrap { + flex-direction: column; + } + body { + overflow: auto; + } + .left-panel { + padding: 40px 32px 32px; + min-height: auto; + } + .right-panel { + width: 100%; + padding: 32px 24px 48px; + } + .stats-row { + display: none; + } +} diff --git a/resources/views/auth/landing-page.blade.php b/resources/views/auth/landing-page.blade.php index 932b1d8..20cffeb 100644 --- a/resources/views/auth/landing-page.blade.php +++ b/resources/views/auth/landing-page.blade.php @@ -1,13 +1,807 @@ -@extends('layouts.auth') + + + + + + E-Learning RPL — SMKN 1 Tapen + + -@section('title', 'Landing Page') + + + + + + + + +
+
+
+
+ +
+
💻 Platform E-Learning Jurusan RPL
+

+ Kuasai Coding,
+ Raih Prestasi +

+

+ Platform e-learning khusus jurusan Rekayasa Perangkat Lunak — akses materi coding, kerjakan tugas, ikuti challenge, dan buktikan siapa developer terbaik di kelasmu! +

+
+ 🚀 Mulai Sekarang + Lihat Fitur +
+
+ +
+
+ +
+ ⭐ +150 EXP didapat! +
+
+ 🏆 Naik ke #2! +
+ +
+ +
+
Dashboard Siswa RPL
+
SMKN 1 Tapen
+
+
+ +
+
+
24
+
Materi
+
+
+
8
+
Tugas
+
+
+
850
+
EXP
+
+
+ +
+
🏅 Leaderboard Kelas
+
+
🥇
+
Andi Prasetyo
+
1.200 ⭐
+
+
+
2
+
Kamu 👋
+
850 ⭐
+
+
+
3
+
Siti Rahayu
+
720 ⭐
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
500+
+
Materi Tersedia
+
+
+
+
+
1.200+
+
Siswa Aktif
+
+
+
+
+
300+
+
Challenge Selesai
+
+
+
+
+
50+
+
Guru Pengajar
+
+
+
+
-@endsection + + +
+
+
+
+
✦ Fitur Platform
+

Lengkap untuk
Siswa RPL yang
Ambisius

+
+
+

Dari materi pemrograman hingga gamifikasi — semua dirancang khusus untuk mendukung proses belajar di jurusan Rekayasa Perangkat Lunak.

+
+
+ +
+
+
+
📖
+
Materi Digital
+

Guru RPL upload modul, siswa akses kapan saja. Materi terorganisir per mapel dan kelas — dari dasar coding sampai advanced.

+ Untuk Siswa & Guru +
+
+
+
+
📝
+
Pengumpulan Tugas
+

Submit tugas coding online langsung dari browser. Tracking status real-time: belum, dikumpulkan, atau terlambat.

+ Manajemen Tugas +
+
+
+
+
🏆
+
Challenge Interaktif
+

Kuis pilihan ganda seputar materi RPL dengan navigasi soal dinamis. Kerjakan sebelum tenggat dan buktikan kemampuanmu!

+ Gamifikasi +
+
+
+
+
⭐
+
Sistem EXP
+

Setiap jawaban benar menghasilkan EXP. Semakin banyak belajar, semakin tinggi skormu!

+ Reward System +
+
+
+
+
📊
+
Leaderboard Real-time
+

Peringkat diperbarui otomatis setiap kali siswa menyelesaikan challenge. Siapa #1?

+ Kompetisi Sehat +
+
+
+
+
🛡️
+
Multi-Role Panel
+

Dashboard terpisah untuk Siswa, Guru, dan Admin dengan hak akses yang sesuai peran.

+ Keamanan +
+
+
+
+
+ + +
+
+
+
+
✦ Cara Kerja
+

Mulai dalam
3 Langkah
Mudah

+

Tidak perlu instalasi apapun — cukup buka browser dan login!

+
+ +
+
+
+
1
+
+
Login ke Platform
+

Siswa masuk menggunakan NISN sebagai username. Guru dan admin menggunakan kredensial dari sekolah.

+
+
+
+
2
+
+
Akses Materi & Selesaikan Tugas
+

Pelajari materi yang diupload guru dan kumpulkan tugas tepat waktu untuk performa terbaik.

+
+
+
+
3
+
+
Ikuti Challenge & Raih EXP
+

Kerjakan challenge pilihan ganda, kumpulkan EXP, dan bersaing di leaderboard kelas!

+
+
+
+
+
+
+
+ + +
+
+
+
✦ Portal Masuk
+

Masuk Sesuai Peranmu

+

Pilih portal yang sesuai dengan peranmu di jurusan RPL SMKN 1 Tapen.

+
+ +
+
+
+
👨‍💻
+
Siswa RPL
+

Akses materi coding, kumpulkan tugas, kerjakan challenge, dan pantau posisimu di leaderboard kelas.

+ Masuk sebagai Siswa → +
+
+
+
+
👩‍🏫
+
Guru
+

Upload modul RPL, buat tugas coding, nilai pengumpulan siswa, dan pantau perkembangan kelas.

+ Masuk sebagai Guru → +
+
+
+
+
🛡️
+
Admin
+

Kelola data jurusan RPL, buat challenge, dan pantau seluruh aktivitas di platform.

+ Masuk sebagai Admin → +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/resources/views/auth/login-admin.blade.php b/resources/views/auth/login-admin.blade.php index cc6fa56..44cea3f 100644 --- a/resources/views/auth/login-admin.blade.php +++ b/resources/views/auth/login-admin.blade.php @@ -1,81 +1,134 @@ @extends('layouts.auth') -@section('title', 'Login Admin') +@section('title', 'Login Admin — E-Learning RPL') @section('content') - + -
-
-{{-- SCRIPT INTERAKTIF --}} + + -@endsection +@endsection \ No newline at end of file diff --git a/resources/views/auth/login-guru.blade.php b/resources/views/auth/login-guru.blade.php index a803fb8..e6ed3fd 100644 --- a/resources/views/auth/login-guru.blade.php +++ b/resources/views/auth/login-guru.blade.php @@ -1,79 +1,125 @@ @extends('layouts.auth') -@section('title', 'Login Guru') +@section('title', 'Login Guru — E-Learning RPL') @section('content') - + -
-
+ + - -@endsection +@endsection \ No newline at end of file diff --git a/resources/views/auth/login-siswa.blade.php b/resources/views/auth/login-siswa.blade.php index 4904efe..94b745b 100644 --- a/resources/views/auth/login-siswa.blade.php +++ b/resources/views/auth/login-siswa.blade.php @@ -1,78 +1,134 @@ @extends('layouts.auth') -@section('title', 'Login Siswa') +@section('title', 'Login Siswa — E-Learning RPL') @section('content') - + -
-
+ + @endsection \ No newline at end of file