MEMBUAT PORTOFOLIO DENGAN GITHUB

bySURYO_EDUCATION -
0

 https://github.com/dashboard


📘 PANDUAN TUGAS MEMBUAT WEBSITE DENGAN GITHUB

🎯 TUJUAN

Siswa mampu:

  • Membuat akun di GitHub

  • Membuat repository

  • Upload file HTML

  • Mengaktifkan GitHub Pages

  • Menghasilkan link website online

🔵 LANGKAH 1 — BUAT AKUN GITHUB

  1. Buka Google

  2. Ketik: github.com

  3. Klik Sign Up

  4. Isi:

    • Username (contoh: rizkyx-tkj10)

    • Email aktif

    • Password

⚠ Jangan pakai nama lengkap.
⚠ Jangan pakai tanggal lahir asli sebagai password.

  1. Verifikasi email sampai akun aktif.

Kalau sudah berhasil login, lanjut ke langkah 2.

🔵 LANGKAH 2 — BUAT REPOSITORY

  1. Klik tombol New (warna hijau)

  2. Isi:

Repository name:

web-portofolio-nama-kamu

Contoh:

web-portofolio-rizky

  1. Pilih Public

  2. Centang:
    ✅ Add a README file

  3. Klik Create repository

Kalau sudah masuk halaman repository, lanjut.

🔵 LANGKAH 3 — UPLOAD FILE HTML

  1. Klik Add file

  2. Klik Create new file

  3. Pada bagian nama file, ketik:

index.html

⚠ Harus index.html (huruf kecil semua)

  1. Scroll ke bawah

  2. Paste kode HTML yang diberikan guru

  3. Scroll lagi ke bawah

  4. Klik Commit changes

Kalau berhasil, akan muncul file index.html di repository.

🔵 LANGKAH 4 — AKTIFKAN WEBSITE (GITHUB PAGES)

  1. Klik tab Settings

  2. Scroll sampai menemukan menu Pages

  3. Pada bagian Source:

    • Pilih Deploy from a branch

  4. Branch pilih:

    • main

    • folder: / (root)

  5. Klik Save

Tunggu 1–2 menit.

Nanti akan muncul tulisan:

Your site is live at:
https://username.github.io/nama-repository/

Itu adalah WEBSITE KAMU 🎉

🔵 LANGKAH 5 — KUMPULKAN LINK

Copy link website kamu
Kirim ke Google Form yang sudah disediakan guru.

📊 FORMAT PENILAIAN

NoKriteriaNilai
1Berhasil buat akun20
2Repository benar20
3File index.html benar20
4Website aktif20
5Tampilan rapi & kreatif20
TOTAL100

⚠ ATURAN PENTING

❌ Dilarang copy website teman
❌ Dilarang upload data pribadi
❌ Username harus sopan

🎓 MANFAAT UNTUK MASA DEPAN

Website ini bisa jadi:

  • Portofolio PKL

  • Portofolio melamar kerja

  • Portfolio projek Arduino / Otomotif

  • Bukti skill digital

Kalau Bapak mau, saya bisa lanjutkan:

  • Buatkan template HTML khusus jurusan TBSM

  • Buatkan versi tugas lanjutan (Arduino + upload dokumentasi)

  • Buatkan Google Form otomatis rekap 30 siswa

  • Buatkan sistem level (Basic, Intermediate, Expert)

Mau kita naikkan jadi proyek kelas digital resmi SMK Kebon Jeruk Pak? 🚀


https://gemini.google.com/share/cc6f27bb8c89

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Digital - Suryo Budi Triawan</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
/* Latar belakang gradasi biru ke putih */
background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 50%, #f0f9ff 100%);
background-attachment: fixed;
}

.glass-effect {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.gradient-text {
background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
}

.card-hover:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05);
}

.image-glow {
box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
}

/* Animasi halus untuk elemen */
.fade-in {
animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="text-slate-800">

<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<span class="text-xl font-bold gradient-text tracking-tighter">SURYO.TECH</span>
<div class="hidden md:flex space-x-8 text-sm font-semibold tracking-wide">
<a href="#tentang" class="hover:text-blue-600 transition-colors">Tentang</a>
<a href="#projek" class="hover:text-blue-600 transition-colors">Projek</a>
<a href="#sertifikat" class="hover:text-blue-600 transition-colors">Sertifikat</a>
<a href="#kontak" class="hover:text-blue-600 transition-colors">Kontak</a>
</div>
</div>
</nav>

<!-- Header / Hero Section -->
<header class="pt-40 pb-24 px-6 fade-in">
<div class="max-w-6xl mx-auto text-center">
<div class="inline-block px-4 py-1.5 mb-8 text-sm font-semibold text-blue-700 bg-blue-100/50 rounded-full border border-blue-200 backdrop-blur-sm">
Guru SMK Kebonjeruk • Mapel Informatika
</div>
<h1 class="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight text-slate-900">
Suryo Budi Triawan
</h1>
<p class="text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed mb-12">
Pendidik teknologi yang berdedikasi membangun masa depan melalui <span class="text-blue-600 font-semibold">Informatika, Robotika, dan IoT</span>.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#projek" class="px-10 py-4 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-700 transition-all shadow-xl shadow-blue-200/50">
Eksplorasi Materi
</a>
<a href="#kontak" class="px-10 py-4 bg-white/80 text-slate-900 border border-slate-200 rounded-2xl font-bold hover:bg-white transition-all backdrop-blur-sm">
Hubungi Saya
</a>
</div>
</div>
</header>

<!-- Tentang Saya Section -->
<section id="tentang" class="py-24 px-6 relative overflow-hidden">
<!-- Dekorasi Latar Belakang -->
<div class="absolute top-0 right-0 -z-10 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl"></div>
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div class="flex justify-center">
<div class="relative group">
<div class="absolute -inset-6 bg-gradient-to-tr from-blue-400 to-white rounded-full blur-2xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
<!-- Foto Poster Robotik -->
<img src="https://files.oaiusercontent.com/file-S4088O1W9Ie18Y2782549b51?se=2026-03-02T13%3A58%3A00Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D604800%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3DChatGPT%2520Image%2520Feb%252027%252C%25202026%252C%252002_25_51%2520PM.jpg&sig=uU6869vM9S9rM6lS6u1s9v6rS6u1s9v6rS6u1s9v6rS%3D"
alt="Poster Les Robotik Masa Depan"
class="relative w-full max-w-sm aspect-square object-cover rounded-[2.5rem] image-glow border-8 border-white/50 shadow-2xl transition-transform duration-500 group-hover:scale-[1.02]"
onerror="this.src='https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=500&h=500&fit=crop'">
</div>
</div>
<div>
<h2 class="text-4xl font-extrabold mb-8 text-slate-900 tracking-tight">Tentang Saya</h2>
<p class="text-slate-600 mb-8 leading-relaxed text-lg">
Sebagai seorang pendidik di <span class="font-semibold text-blue-700">SMK Kebonjeruk</span>, misi saya adalah menjembatani teori dan praktik industri. Saya aktif mengembangkan kurikulum berbasis <span class="italic">project-based learning</span> yang menggabungkan Mekatronika dan Coding Robot untuk siswa.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center space-x-4 p-4 bg-white/40 rounded-2xl border border-white/60 shadow-sm">
<div class="bg-blue-100 p-2 rounded-lg"><i data-lucide="bot" class="w-6 h-6 text-blue-600"></i></div>
<span class="font-bold text-slate-700">Robotika & IoT</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white/40 rounded-2xl border border-white/60 shadow-sm">
<div class="bg-blue-100 p-2 rounded-lg"><i data-lucide="terminal" class="w-6 h-6 text-blue-600"></i></div>
<span class="font-bold text-slate-700">Coding Robot</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white/40 rounded-2xl border border-white/60 shadow-sm">
<div class="bg-blue-100 p-2 rounded-lg"><i data-lucide="cpu" class="w-6 h-6 text-blue-600"></i></div>
<span class="font-bold text-slate-700">Mekatronika</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white/40 rounded-2xl border border-white/60 shadow-sm">
<div class="bg-blue-100 p-2 rounded-lg"><i data-lucide="layers" class="w-6 h-6 text-blue-600"></i></div>
<span class="font-bold text-slate-700">Industri 4.0</span>
</div>
</div>
</div>
</div>
</section>

<!-- Projek Section -->
<section id="projek" class="py-24 px-6">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-extrabold text-slate-900 tracking-tight">Portofolio Pengajaran</h2>
<div class="w-24 h-2 bg-gradient-to-r from-blue-500 to-sky-300 mx-auto mt-6 rounded-full"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="p-8 rounded-[2rem] border border-white/40 card-hover">
<div class="w-14 h-14 bg-blue-100/50 rounded-2xl flex items-center justify-center mb-6">
<i data-lucide="book-open" class="text-blue-600 w-8 h-8"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Modul Web Dinamis</h3>
<p class="text-slate-600 leading-relaxed mb-6">
Kurikulum interaktif berbasis teknologi Cloud untuk mempermudah akses belajar mandiri siswa.
</p>
<div class="text-xs font-bold text-blue-500 bg-blue-50 px-3 py-1 rounded-full inline-block">WEB DEV</div>
</div>

<!-- Project 2 -->
<div class="p-8 rounded-[2rem] border border-white/40 card-hover">
<div class="w-14 h-14 bg-blue-100/50 rounded-2xl flex items-center justify-center mb-6">
<i data-lucide="users" class="text-blue-600 w-8 h-8"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Pembimbing LKS</h3>
<p class="text-slate-600 leading-relaxed mb-6">
Membina tim juara untuk kompetisi IT Software Business Solutions tingkat Provinsi.
</p>
<div class="text-xs font-bold text-blue-500 bg-blue-50 px-3 py-1 rounded-full inline-block">MENTORSHIP</div>
</div>

<!-- Project 3 -->
<div class="p-8 rounded-[2rem] border border-white/40 card-hover">
<div class="w-14 h-14 bg-blue-100/50 rounded-2xl flex items-center justify-center mb-6">
<i data-lucide="zap" class="text-blue-600 w-8 h-8"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Workshop Tech</h3>
<p class="text-slate-600 leading-relaxed mb-6">
Sesi khusus "Ramadan Tech" yang mengeksplorasi sensor cerdas dan automasi industri.
</p>
<div class="text-xs font-bold text-blue-500 bg-blue-50 px-3 py-1 rounded-full inline-block">WORKSHOP</div>
</div>
</div>
</div>
</section>

<!-- Sertifikat Section -->
<section id="sertifikat" class="py-24 px-6 bg-slate-900 rounded-[3rem] mx-4 md:mx-10 text-white shadow-3xl">
<div class="max-w-6xl mx-auto">
<div class="text-center md:text-left mb-16">
<h2 class="text-4xl font-extrabold mb-4 tracking-tight">Sertifikasi & Lisensi</h2>
<p class="text-slate-400 text-lg">Validasi kompetensi teknis dan pedagogis secara profesional.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="group flex items-center space-x-6 p-8 bg-white/5 rounded-3xl border border-white/10 hover:bg-white/10 transition-all cursor-default">
<div class="shrink-0 w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
<i data-lucide="award" class="text-blue-400 w-10 h-10"></i>
</div>
<div>
<h4 class="font-bold text-xl mb-1">Sertifikasi Pendidik</h4>
<p class="text-slate-400">Lisensi resmi Guru Informatika Indonesia.</p>
</div>
</div>
<div class="group flex items-center space-x-6 p-8 bg-white/5 rounded-3xl border border-white/10 hover:bg-white/10 transition-all cursor-default">
<div class="shrink-0 w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
<i data-lucide="shield-check" class="text-blue-400 w-10 h-10"></i>
</div>
<div>
<h4 class="font-bold text-xl mb-1">Cisco Academy</h4>
<p class="text-slate-400">Instruktur resmi Networking & Cybersecurity.</p>
</div>
</div>
</div>
</div>
</section>

<!-- Kontak Section -->
<section id="kontak" class="py-24 px-6">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-extrabold mb-6 text-slate-900 tracking-tight">Hubungi Saya</h2>
<p class="text-slate-600 mb-16 text-lg">Hubungi untuk kerjasama pendaftaran les robotik atau diskusi teknologi.</p>
<div class="grid md:grid-cols-3 gap-6">
<a href="mailto:lspkebonjeruk@gmail.com" class="p-8 bg-white/60 rounded-[2rem] border border-white shadow-sm hover:shadow-md transition-all">
<i data-lucide="mail" class="w-10 h-10 text-blue-600 mx-auto mb-4"></i>
<span class="block font-bold text-slate-900">Email Sekolah</span>
<span class="text-sm text-slate-500">lspkebonjeruk@gmail.com</span>
</a>
<a href="https://tiktok.com/@suryogaragebot" target="_blank" class="p-8 bg-white/60 rounded-[2rem] border border-white shadow-sm hover:shadow-md transition-all">
<i data-lucide="music-2" class="w-10 h-10 text-slate-900 mx-auto mb-4"></i>
<span class="block font-bold text-slate-900">TikTok</span>
<span class="text-sm text-slate-500">@suryogaragebot</span>
</a>
<div class="p-8 bg-blue-600 rounded-[2rem] shadow-xl shadow-blue-200 text-white flex flex-col items-center justify-center">
<i data-lucide="phone" class="w-10 h-10 text-white mx-auto mb-4"></i>
<span class="block font-bold">WhatsApp</span>
<span class="text-lg font-extrabold tracking-wider">0877 8968 6800</span>
</div>
</div>
</div>
</section>

<footer class="py-12 text-center">
<div class="w-20 h-px bg-slate-200 mx-auto mb-8"></div>
<p class="text-slate-400 text-sm font-medium">
&copy; 2026 Suryo Budi Triawan • SMK Kebonjeruk Jakarta
</p>
</footer>

<script>
// Inisialisasi Lucide Icons
lucide.createIcons();
</script>
</body>
</html>



====================================================================================



SEKOLAH AMAN

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jarak Aman | SMK Kebon Jeruk - Jakarta Barat</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
scroll-behavior: smooth;
}

.glass-morphism {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-gradient {
background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
}

.card-hover:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
}

.animate-float {
animation: float 4s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #2563eb;
border-radius: 10px;
}
</style>
</head>
<body class="bg-slate-50 text-slate-900">

<!-- Navigation -->
<nav class="sticky top-0 z-50 glass-morphism shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-700 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-blue-200">KJ</div>
<div>
<h1 class="font-bold text-lg leading-tight text-blue-900">SMK Kebon Jeruk</h1>
<p class="text-xs text-slate-500">Lingkungan Belajar Aman & Nyaman</p>
</div>
</div>
<div class="hidden md:flex space-x-8 font-medium text-slate-600">
<a href="#beranda" class="hover:text-blue-600 transition">Beranda</a>
<a href="#program" class="hover:text-blue-600 transition">Program Kami</a>
<a href="#lapor" class="hover:text-blue-600 transition">Lapor</a>
<a href="#curhat" class="hover:text-blue-600 transition">Ruang Curhat</a>
</div>
<a href="#lapor" class="bg-blue-600 text-white px-6 py-2.5 rounded-full font-semibold hover:bg-blue-700 transition shadow-lg shadow-blue-200">
Lapor Sekarang
</a>
</div>
</div>
</nav>

<!-- Hero Section -->
<section id="beranda" class="hero-gradient text-white py-20 overflow-hidden relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2 space-y-6 z-10">
<span class="bg-white/20 text-blue-100 px-4 py-1 rounded-full text-sm font-semibold tracking-wide border border-white/10">Inisiatif Siswa & Guru 2026</span>
<h2 class="text-4xl md:text-6xl font-extrabold leading-tight">
SMK Kebon Jeruk <span class="text-blue-300">Bebas Bullying,</span> Berprestasi Tinggi
</h2>
<p class="text-lg text-blue-100 opacity-90 max-w-xl">
Wujudkan sekolah yang inklusif dan produktif. Kami berkomitmen menangani setiap laporan dengan cepat, adil, dan rahasia.
</p>
<div class="flex flex-wrap gap-4 pt-4">
<button onclick="scrollToId('lapor')" class="bg-white text-blue-700 px-8 py-3 rounded-xl font-bold hover:bg-blue-50 transition flex items-center gap-2">
<i class="fas fa-shield-alt"></i> Lapor Kejadian
</button>
<button onclick="scrollToId('curhat')" class="bg-transparent border-2 border-white/40 text-white px-8 py-3 rounded-xl font-bold hover:bg-white/10 transition">
Bicara dengan Konselor
</button>
</div>
</div>
<div class="md:w-1/2 relative flex justify-center">
<div class="absolute inset-0 bg-blue-400/20 rounded-full blur-3xl scale-125"></div>
<svg viewBox="0 0 500 500" class="w-full max-w-md animate-float relative z-10" xmlns="http://www.w3.org/2000/svg">
<circle cx="250" cy="250" r="180" fill="rgba(255,255,255,0.1)" />
<rect x="180" y="150" width="140" height="200" rx="10" fill="white" fill-opacity="0.95" />
<rect x="200" y="170" width="100" height="10" rx="2" fill="#e2e8f0" />
<rect x="200" y="190" width="100" height="10" rx="2" fill="#e2e8f0" />
<rect x="200" y="210" width="60" height="10" rx="2" fill="#e2e8f0" />
<path d="M220 300 L280 300" stroke="#2563eb" stroke-width="12" stroke-linecap="round" />
<circle cx="250" cy="110" r="35" fill="#60a5fa" />
<path d="M215 110 Q250 135 285 110" stroke="#1e3a8a" stroke-width="4" fill="none" />
</svg>
</div>
</div>
</section>

<!-- Stats Section -->
<section class="max-w-7xl mx-auto px-4 -mt-10 mb-20 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-8 rounded-3xl shadow-xl border border-slate-100 flex items-center gap-6 card-hover">
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 text-2xl">
<i class="fas fa-bolt"></i>
</div>
<div>
<h3 class="text-3xl font-bold text-slate-800">Cepat</h3>
<p class="text-slate-500 font-medium">Respon dalam 24 Jam</p>
</div>
</div>
<div class="bg-white p-8 rounded-3xl shadow-xl border border-slate-100 flex items-center gap-6 card-hover">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center text-green-600 text-2xl">
<i class="fas fa-user-secret"></i>
</div>
<div>
<h3 class="text-3xl font-bold text-slate-800">Rahasia</h3>
<p class="text-slate-500 font-medium">Laporan Anonim Terjamin</p>
</div>
</div>
<div class="bg-white p-8 rounded-3xl shadow-xl border border-slate-100 flex items-center gap-6 card-hover">
<div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center text-orange-600 text-2xl">
<i class="fas fa-heart"></i>
</div>
<div>
<h3 class="text-3xl font-bold text-slate-800">Peduli</h3>
<p class="text-slate-500 font-medium">Dukungan Mental Terpadu</p>
</div>
</div>
</div>
</section>

<!-- Program Section -->
<section id="program" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 space-y-4">
<h3 class="text-blue-600 font-bold tracking-widest uppercase text-sm">Budaya Sekolah</h3>
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">Inisiatif Pencegahan SMK Kebon Jeruk</h2>
<div class="w-20 h-1.5 bg-blue-600 mx-auto rounded-full"></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-slate-50 p-8 rounded-3xl border border-slate-200 card-hover">
<div class="w-14 h-14 bg-white shadow-sm rounded-2xl flex items-center justify-center mb-6 text-blue-600 text-xl">
<i class="fas fa-user-friends"></i>
</div>
<h4 class="text-xl font-bold mb-3">Duta Sahabat</h4>
<p class="text-slate-600 text-sm leading-relaxed">Siswa pilihan di tiap kelas yang menjadi jembatan antara siswa dan guru BK.</p>
</div>
<div class="bg-slate-50 p-8 rounded-3xl border border-slate-200 card-hover">
<div class="w-14 h-14 bg-white shadow-sm rounded-2xl flex items-center justify-center mb-6 text-green-600 text-xl">
<i class="fas fa-graduation-cap"></i>
</div>
<h4 class="text-xl font-bold mb-3">Seminar Rutin</h4>
<p class="text-slate-600 text-sm leading-relaxed">Edukasi berkala tentang dampak perundungan bagi masa depan siswa.</p>
</div>
<div class="bg-slate-50 p-8 rounded-3xl border border-slate-200 card-hover">
<div class="w-14 h-14 bg-white shadow-sm rounded-2xl flex items-center justify-center mb-6 text-orange-600 text-xl">
<i class="fas fa-mobile-alt"></i>
</div>
<h4 class="text-xl font-bold mb-3">Digital Hotline</h4>
<p class="text-slate-600 text-sm leading-relaxed">Pelaporan cepat melalui scan QR code yang tersebar di area sekolah.</p>
</div>
<div class="bg-slate-50 p-8 rounded-3xl border border-slate-200 card-hover">
<div class="w-14 h-14 bg-white shadow-sm rounded-2xl flex items-center justify-center mb-6 text-purple-600 text-xl">
<i class="fas fa-balance-scale"></i>
</div>
<h4 class="text-xl font-bold mb-3">Restorative Justice</h4>
<p class="text-slate-600 text-sm leading-relaxed">Penyelesaian konflik secara kekeluargaan yang mendidik kedua belah pihak.</p>
</div>
</div>
</div>
</section>

<!-- Lapor & Cek Status Section -->
<section id="lapor" class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-16">
<!-- Form -->
<div class="lg:w-3/5">
<div class="bg-white p-10 rounded-[2.5rem] shadow-2xl shadow-blue-100 border border-slate-100">
<h2 class="text-3xl font-extrabold mb-2 text-slate-900">Suaramu Berarti!</h2>
<p class="text-slate-500 mb-8">Laporan ini akan langsung diterima oleh Tim Satgas SMK Kebon Jeruk.</p>
<form id="reportForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Nama/Inisial</label>
<input type="text" id="reporterName" placeholder="Boleh dikosongkan" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Kelas / Jurusan</label>
<input type="text" id="schoolLocation" required placeholder="Contoh: XII RPL 1" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition">
</div>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Deskripsi Kejadian</label>
<textarea id="incidentDetail" rows="4" required placeholder="Ceritakan apa yang kamu alami atau lihat secara jujur." class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition"></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-4 rounded-xl font-bold text-lg hover:bg-blue-700 transition shadow-lg">
Kirim Laporan ke Tim Satgas
</button>
</form>
</div>
</div>

<!-- Tracker -->
<div class="lg:w-2/5 space-y-8">
<div class="bg-slate-900 text-white p-10 rounded-[2.5rem] shadow-xl relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-40 h-40 bg-blue-600/20 rounded-full blur-2xl"></div>
<h3 class="text-2xl font-bold mb-4">Pantau Laporan</h3>
<p class="text-slate-400 mb-6 text-sm">Masukkan kode unik untuk melihat progres tindak lanjut dari sekolah.</p>
<div class="space-y-4">
<input id="reportCode" type="text" placeholder="Masukkan Kode Laporan" class="w-full px-5 py-4 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/30 outline-none focus:ring-2 focus:ring-blue-400">
<button onclick="checkStatus()" class="w-full bg-blue-600 text-white py-4 rounded-xl font-bold hover:bg-blue-700 transition">
Cek Sekarang
</button>
</div>

<div id="statusResult" class="mt-6 p-6 rounded-2xl bg-white/5 border border-white/10 hidden"></div>

<div class="mt-8 pt-8 border-t border-white/10 text-xs text-slate-400 flex items-center gap-3">
<i class="fas fa-shield-virus text-lg text-blue-500"></i>
<span>Data terenkripsi dan hanya dapat diakses oleh tim BK berwenang.</span>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Curhat Section -->
<section id="curhat" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-blue-600 rounded-[3rem] p-10 md:p-16 flex flex-col md:flex-row items-center gap-12 text-white">
<div class="md:w-1/2 flex justify-center">
<div class="bg-white/10 p-8 rounded-full border border-white/20">
<i class="fas fa-comments text-8xl"></i>
</div>
</div>
<div class="md:w-1/2 space-y-6">
<span class="bg-white/20 px-3 py-1 rounded-full font-bold uppercase text-xs">BK SMK Kebon Jeruk</span>
<h2 class="text-3xl md:text-5xl font-extrabold leading-tight">Kami Siap Mendengar, Tanpa Menghakimi.</h2>
<p class="text-blue-100 text-lg opacity-90">
Jangan biarkan beban pikiran mengganggu belajarmu. Ruang curhat kami selalu terbuka untuk segala masalah pribadi, akademik, maupun sosial.
</p>
<button onclick="showMessage('Membuka WhatsApp Konselor...', 'info')" class="bg-white text-blue-600 px-8 py-4 rounded-2xl font-bold hover:bg-blue-50 transition shadow-xl flex items-center gap-3">
<i class="fab fa-whatsapp text-xl"></i> Chat Konselor (Privat)
</button>
</div>
</div>
</div>
</section>

<!-- Footer -->
<footer class="bg-slate-900 text-slate-400 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
<div class="space-y-6">
<div class="flex items-center space-x-3 text-white">
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-xl">KJ</div>
<h1 class="font-bold text-xl">SMK Kebon Jeruk</h1>
</div>
<p class="text-sm leading-relaxed">
Bersama-sama kita ciptakan sekolah yang aman bagi semua siswa. SMK Kebon Jeruk berkomitmen penuh melawan segala bentuk intimidasi dan kekerasan.
</p>
</div>
<div>
<h4 class="text-white font-bold mb-6">Sekretariat Satgas</h4>
<ul class="space-y-4 text-sm">
<li class="flex gap-3">
<i class="fas fa-map-marker-alt text-blue-500 mt-1"></i>
<span>Jl. Kebon Jeruk Raya, Kebon Jeruk, Jakarta Barat</span>
</li>
<li class="flex gap-3">
<i class="fas fa-envelope text-blue-500"></i>
<span>info@smkkebonjeruk.sch.id</span>
</li>
<li class="flex gap-3">
<i class="fas fa-phone-alt text-blue-500"></i>
<span>(021) 1234 5678</span>
</li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-6">Layanan Siswa</h4>
<ul class="grid grid-cols-1 gap-4 text-sm">
<li><a href="#" class="hover:text-white transition">Konseling Online</a></li>
<li><a href="#" class="hover:text-white transition">Panduan Anti-Bullying</a></li>
<li><a href="#" class="hover:text-white transition">OSIS SMK Kebon Jeruk</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-slate-800 text-center text-xs">
<p>&copy; 2026 SMK Kebon Jeruk. Dipersembahkan oleh Tim IT Sekolah.</p>
</div>
</div>
</footer>

<!-- Toasts & Modals -->
<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 px-6 py-4 rounded-2xl bg-slate-800 text-white shadow-2xl z-[100] transform transition-all duration-300 scale-0 origin-center">
<div class="flex items-center gap-3">
<i id="toastIcon" class="fas fa-info-circle"></i>
<span id="toastText"></span>
</div>
</div>

<div id="successModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[101] flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-[2.5rem] p-8 max-w-md w-full shadow-2xl text-center space-y-6">
<div class="w-20 h-20 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto text-3xl">
<i class="fas fa-paper-plane"></i>
</div>
<div>
<h3 class="text-2xl font-bold text-slate-900">Laporan Diterima</h3>
<p class="text-slate-500">Catat kode ini untuk mengecek balasan dari tim BK SMK Kebon Jeruk:</p>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border-2 border-dashed border-blue-200">
<span id="generatedCode" class="text-3xl font-mono font-black text-blue-700 tracking-wider"></span>
</div>
<button onclick="closeModal()" class="w-full bg-blue-600 text-white py-4 rounded-xl font-bold hover:bg-blue-700">
Mengerti
</button>
</div>
</div>

<script>
const mockReports = {
'KJ2026001': { status: 'Diproses', date: '1 Maret 2026', desc: 'Tim Satgas sedang melakukan peninjauan di lokasi.' },
'KJ2026002': { status: 'Selesai', date: '28 Feb 2026', desc: 'Masalah telah diselesaikan melalui mediasi wali kelas.' }
};

function scrollToId(id) {
const el = document.getElementById(id);
if (el) {
const navHeight = 80;
const pos = el.getBoundingClientRect().top + window.pageYOffset - navHeight;
window.scrollTo({ top: pos, behavior: 'smooth' });
}
}

function showMessage(msg, type = 'info') {
const toast = document.getElementById('toast');
const toastText = document.getElementById('toastText');
const toastIcon = document.getElementById('toastIcon');
toastText.innerText = msg;
toast.className = 'fixed bottom-10 left-1/2 -translate-x-1/2 px-6 py-4 rounded-2xl text-white shadow-2xl z-[100] transform transition-all duration-300 scale-100 origin-center';
if(type === 'success') {
toast.classList.add('bg-green-600');
toastIcon.className = 'fas fa-check-circle';
} else if(type === 'error') {
toast.classList.add('bg-red-600');
toastIcon.className = 'fas fa-exclamation-circle';
} else {
toast.classList.add('bg-blue-800');
toastIcon.className = 'fas fa-info-circle';
}

setTimeout(() => {
toast.classList.remove('scale-100');
toast.classList.add('scale-0');
}, 4000);
}

document.getElementById('reportForm').addEventListener('submit', function(e) {
e.preventDefault();
const randomCode = 'KJ2026' + Math.floor(1000 + Math.random() * 9000);
document.getElementById('generatedCode').innerText = randomCode;
document.getElementById('successModal').classList.remove('hidden');
this.reset();
});

function closeModal() {
document.getElementById('successModal').classList.add('hidden');
}

function checkStatus() {
const codeInput = document.getElementById('reportCode');
const resultDiv = document.getElementById('statusResult');
const code = codeInput.value.trim().toUpperCase();

if (!code) {
showMessage('Harap masukkan kode laporan!', 'error');
return;
}

resultDiv.classList.remove('hidden');
if (mockReports[code]) {
const data = mockReports[code];
const color = data.status === 'Selesai' ? 'bg-green-400' : 'bg-yellow-400';
resultDiv.innerHTML = `
<div class="space-y-3">
<div class="flex justify-between items-center text-xs">
<span class="text-blue-300">Status Tindak Lanjut:</span>
<span class="px-3 py-1 bg-white/10 rounded-full font-bold">
<span class="status-dot ${color}"></span>${data.status}
</span>
</div>
<div class="text-sm font-bold text-white">${code}</div>
<div class="p-3 bg-white/5 rounded-xl text-xs leading-relaxed border border-white/10">
"${data.desc}"
</div>
</div>
`;
} else {
resultDiv.innerHTML = `
<div class="text-center py-4 text-sm text-slate-400">
<i class="fas fa-search mb-2 block text-xl"></i>
Kode tidak ditemukan. Pastikan kodenya benar.
</div>
`;
}
}
</script>
</body>
</html>

<

Posting Komentar

Lebih baru Lebih lama