portal 1
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Login - Informatika SMK Kebon Jeruk</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Orbitron:wght@700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #4f46e5 0%, #1e1b4b 100%);
}
.font-logo {
font-family: 'Orbitron', sans-serif;
letter-spacing: 0.1em;
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.logo-glow {
text-shadow: 0 0 10px rgba(79, 70, 229, 0.4);
}
.input-group:focus-within label {
color: #4f46e5;
}
/* Message animations */
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.bot-antenna {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="glass-card w-full max-w-md p-8 rounded-2xl shadow-2xl">
<div class="text-center mb-8">
<!-- Logo Suryobot -->
<div class="flex flex-col items-center mb-4">
<div class="relative inline-block">
<!-- Ikon Robot SVG Kustom -->
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-indigo-600 mb-2">
<path d="M12 2V4M12 4H9M12 4H15M16 16V19C16 20.1046 15.1046 21 14 21H10C8.89543 21 8 20.1046 8 19V16M21 11V14M3 11V14M19 11C19 7.13401 15.866 4 12 4C8.13401 4 5 7.13401 5 11V15C5 15.5523 5.44772 16 6 16H18C18.5523 16 19 15.5523 19 15V11ZM9 10H9.01M15 10H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="2" r="1" fill="currentColor" class="bot-antenna"/>
</svg>
</div>
<h1 class="font-logo text-3xl font-extrabold text-indigo-700 logo-glow">
SURYO<span class="text-indigo-400">BOT</span>
</h1>
<div class="w-16 h-1 bg-indigo-500 rounded-full mt-1 opacity-50"></div>
</div>
<h2 class="text-lg font-bold text-gray-800 uppercase tracking-tight">Selamat Datang</h2>
<p class="text-indigo-600 font-semibold">Mapel Informatika</p>
<p class="text-gray-500 text-sm">SMK Kebon Jeruk</p>
</div>
<div class="space-y-5">
<div class="input-group">
<label for="user" class="block text-sm font-semibold text-gray-600 mb-1 transition-colors">Username</label>
<input type="text" id="user"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
placeholder="Masukkan username">
</div>
<div class="input-group">
<label for="pass" class="block text-sm font-semibold text-gray-600 mb-1 transition-colors">Password</label>
<div class="relative">
<input type="password" id="pass"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
placeholder="••••••••">
<button onclick="togglePassword()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-indigo-600">
<svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div>
</div>
<button onclick="cekLogin()"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-lg transition-colors duration-300 shadow-lg active:transform active:scale-95">
Masuk ke Portal
</button>
</div>
<div id="status-container" class="mt-6 text-center h-6">
<p id="hasil" class="text-sm font-medium fade-in"></p>
</div>
<div class="mt-8 pt-6 border-t border-gray-100 text-center">
<p class="text-xs text-gray-400 uppercase tracking-widest">Powered by Suryobot AI</p>
</div>
</div>
<script>
// DATA TERSEMBUNYI (Simulasi)
const database = [
{username: "admin", password: "admin123", role: "Administrator"},
{username: "guru", password: "guru2025", role: "Pengajar"},
{username: "siswa", password: "smkhebat", role: "Siswa"}
];
function togglePassword() {
const passInput = document.getElementById('pass');
passInput.type = passInput.type === 'password' ? 'text' : 'password';
}
function cekLogin() {
const u = document.getElementById("user").value;
const p = document.getElementById("pass").value;
const hasil = document.getElementById("hasil");
// Reset pesan
hasil.innerHTML = "";
hasil.className = "text-sm font-medium fade-in";
if (!u || !p) {
hasil.innerHTML = "Harap isi semua kolom!";
hasil.classList.add("text-yellow-600");
return;
}
const userFound = database.find(data => data.username === u && data.password === p);
if (userFound) {
hasil.innerHTML = `Berhasil! Halo ${userFound.role}, selamat datang kembali.`;
hasil.classList.add("text-green-600");
setTimeout(() => {
hasil.innerHTML = "Suryobot sedang memproses akses...";
}, 1500);
} else {
hasil.innerHTML = "Akses ditolak oleh Suryobot!";
hasil.classList.add("text-red-600");
}
}
document.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
cekLogin();
}
});
</script>
</body>
</html>
dua tambah suara
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Login - Informatika SMK Kebon Jeruk</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Orbitron:wght@700&display=swap');
:root {
--bg-gradient: linear-gradient(135deg, #4f46e5 0%, #1e1b4b 100%);
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-gradient);
overflow-y: auto;
min-height: 100vh;
}
/* Mengkustomisasi tampilan scrollbar agar tetap terlihat modern */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(30, 27, 75, 0.5);
}
::-webkit-scrollbar-thumb {
background: #4f46e5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #6366f1;
}
.font-logo {
font-family: 'Orbitron', sans-serif;
letter-spacing: 0.1em;
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 10;
}
.logo-glow {
text-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
}
/* Particles Canvas */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* Animation */
.fade-in {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.bot-antenna {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px #4f46e5); }
50% { opacity: 0.3; }
}
/* Loading Bar */
.loader-bar {
width: 0%;
height: 3px;
background: #4f46e5;
transition: width 1.5s ease-in-out;
border-radius: 10px;
}
</style>
</head>
<body class="flex items-center justify-center p-4">
<!-- Latar Belakang Partikel -->
<div id="particles-js"></div>
<div class="glass-card w-full max-w-md p-8 rounded-2xl shadow-2xl fade-in my-8">
<div class="text-center mb-6">
<!-- Logo Suryobot -->
<div class="flex flex-col items-center mb-4">
<div class="relative inline-block">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-indigo-600 mb-2">
<path d="M12 2V4M12 4H9M12 4H15M16 16V19C16 20.1046 15.1046 21 14 21H10C8.89543 21 8 20.1046 8 19V16M21 11V14M3 11V14M19 11C19 7.13401 15.866 4 12 4C8.13401 4 5 7.13401 5 11V15C5 15.5523 5.44772 16 6 16H18C18.5523 16 19 15.5523 19 15V11ZM9 10H9.01M15 10H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="2" r="1.5" fill="#4f46e5" class="bot-antenna"/>
</svg>
</div>
<h1 class="font-logo text-3xl font-extrabold text-indigo-700 logo-glow">
SURYO<span class="text-indigo-400">BOT</span>
</h1>
</div>
<h2 id="greeting" class="text-lg font-bold text-gray-800 tracking-tight">Memuat...</h2>
<p class="text-indigo-600 font-semibold text-sm">Informatika SMK Kebon Jeruk</p>
</div>
<div class="space-y-4" id="login-form">
<div class="input-group">
<label class="block text-xs font-bold text-gray-500 uppercase mb-1 ml-1">Username</label>
<input type="text" id="user"
class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all bg-gray-50/50"
placeholder="Contoh: admin">
</div>
<div class="input-group">
<label class="block text-xs font-bold text-gray-500 uppercase mb-1 ml-1">Password</label>
<div class="relative">
<input type="password" id="pass"
class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all bg-gray-50/50"
placeholder="••••••••">
<button onclick="togglePassword()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-indigo-600 transition-colors">
<svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div>
</div>
<div class="pt-2">
<button onclick="handleLogin()" id="btn-login"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3.5 rounded-xl transition-all duration-300 shadow-lg active:scale-95 flex items-center justify-center space-x-2">
<span>Masuk ke Sistem</span>
</button>
</div>
</div>
<!-- Loading state -->
<div id="loading-state" class="hidden mt-4">
<div class="w-full bg-gray-200 rounded-full h-1 overflow-hidden">
<div id="p-bar" class="loader-bar"></div>
</div>
<p class="text-center text-xs text-indigo-600 mt-2 animate-pulse">Suryobot sedang memvalidasi data...</p>
</div>
<div id="status-container" class="mt-4 text-center min-h-[20px]">
<p id="hasil" class="text-sm font-medium fade-in"></p>
</div>
<div class="mt-6 pt-6 border-t border-gray-100 flex justify-between items-center text-[10px] text-gray-400 font-bold uppercase tracking-widest">
<span>v2.0 Beta</span>
<span>Powered by Suryobot AI</span>
</div>
</div>
<!-- Script Partikel -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Inisialisasi Partikel
particlesJS("particles-js", {
"particles": {
"number": { "value": 80 },
"color": { "value": "#ffffff" },
"shape": { "type": "circle" },
"opacity": { "value": 0.2 },
"size": { "value": 3 },
"line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.2, "width": 1 },
"move": { "enable": true, "speed": 2 }
},
"interactivity": {
"events": { "onhover": { "enable": true, "mode": "grab" } }
}
});
// Fungsi Suara Suryobot
function suryoSpeak(text) {
if ('speechSynthesis' in window) {
// Hentikan suara yang sedang berjalan jika ada
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'id-ID'; // Mengatur bahasa ke Indonesia
utterance.rate = 1.0; // Kecepatan normal
utterance.pitch = 0.8; // Pitch sedikit rendah agar terdengar seperti robot
window.speechSynthesis.speak(utterance);
}
}
// Greeting Berdasarkan Waktu
window.onload = () => {
const hour = new Date().getHours();
const greetingElement = document.getElementById('greeting');
let text = "";
if (hour < 11) text = "Selamat Pagi";
else if (hour < 15) text = "Selamat Siang";
else if (hour < 19) text = "Selamat Sore";
else text = "Selamat Malam";
greetingElement.innerText = text + "!";
};
const database = [
{username: "admin", password: "admin123", role: "Administrator"},
{username: "guru", password: "guru2025", role: "Pengajar"},
{username: "siswa", password: "smkhebat", role: "Siswa"}
];
function togglePassword() {
const passInput = document.getElementById('pass');
passInput.type = passInput.type === 'password' ? 'text' : 'password';
}
function handleLogin() {
const u = document.getElementById("user").value;
const p = document.getElementById("pass").value;
const hasil = document.getElementById("hasil");
const btn = document.getElementById("btn-login");
const loading = document.getElementById("loading-state");
const pBar = document.getElementById("p-bar");
hasil.innerHTML = "";
if (!u || !p) {
const msg = "Lengkapi username dan password!";
hasil.innerHTML = "⚠️ " + msg;
hasil.className = "text-sm font-medium text-amber-600 fade-in";
suryoSpeak(msg);
return;
}
// Tampilkan Loading
btn.disabled = true;
btn.classList.add("opacity-50", "cursor-not-allowed");
loading.classList.remove("hidden");
setTimeout(() => pBar.style.width = "100%", 10);
// Simulasi delay jaringan/AI
setTimeout(() => {
const userFound = database.find(data => data.username === u && data.password === p);
loading.classList.add("hidden");
pBar.style.width = "0%";
btn.disabled = false;
btn.classList.remove("opacity-50", "cursor-not-allowed");
if (userFound) {
const successMsg = `Akses Diterima. Halo ${userFound.role}, selamat datang kembali.`;
hasil.innerHTML = "✅ " + successMsg;
hasil.className = "text-sm font-medium text-green-600 fade-in";
suryoSpeak(successMsg);
} else {
const failMsg = "Username atau Password ditolak Suryobot!";
hasil.innerHTML = "❌ " + failMsg;
hasil.className = "text-sm font-medium text-red-600 fade-in";
suryoSpeak(failMsg);
}
}, 2000);
}
document.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleLogin();
});
</script>
</body>
</html>
selesai
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Login - Informatika SMK Kebon Jeruk</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Orbitron:wght@700&display=swap');
:root {
--bg-gradient: linear-gradient(135deg, #4f46e5 0%, #1e1b4b 100%);
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-gradient);
overflow-y: auto;
min-height: 100vh;
}
/* Mengkustomisasi tampilan scrollbar agar tetap terlihat modern */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(30, 27, 75, 0.5);
}
::-webkit-scrollbar-thumb {
background: #4f46e5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #6366f1;
}
.font-logo {
font-family: 'Orbitron', sans-serif;
letter-spacing: 0.1em;
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 10;
}
.logo-glow {
text-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
}
/* Particles Canvas */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* Animation */
.fade-in {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.bot-antenna {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px #4f46e5); }
50% { opacity: 0.3; }
}
/* Loading Bar */
.loader-bar {
width: 0%;
height: 3px;
background: #4f46e5;
transition: width 1.5s ease-in-out;
border-radius: 10px;
}
.hidden-page {
display: none;
}
/* Card Hover Effects */
.module-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.module-card:hover {
transform: translateY(-5px);
}
</style>
</head>
<body class="flex items-center justify-center p-4">
<!-- Latar Belakang Partikel -->
<div id="particles-js"></div>
<!-- HALAMAN LOGIN -->
<div id="page-login" class="glass-card w-full max-w-md p-8 rounded-2xl shadow-2xl fade-in my-8">
<div class="text-center mb-6">
<!-- Logo Suryobot -->
<div class="flex flex-col items-center mb-4">
<div class="relative inline-block">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-indigo-600 mb-2">
<path d="M12 2V4M12 4H9M12 4H15M16 16V19C16 20.1046 15.1046 21 14 21H10C8.89543 21 8 20.1046 8 19V16M21 11V14M3 11V14M19 11C19 7.13401 15.866 4 12 4C8.13401 4 5 7.13401 5 11V15C5 15.5523 5.44772 16 6 16H18C18.5523 16 19 15.5523 19 15V11ZM9 10H9.01M15 10H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="2" r="1.5" fill="#4f46e5" class="bot-antenna"/>
</svg>
</div>
<h1 class="font-logo text-3xl font-extrabold text-indigo-700 logo-glow">
SURYO<span class="text-indigo-400">BOT</span>
</h1>
</div>
<h2 id="greeting" class="text-lg font-bold text-gray-800 tracking-tight">Memuat...</h2>
<p class="text-indigo-600 font-semibold text-sm">Informatika SMK Kebon Jeruk</p>
</div>
<div class="space-y-4" id="login-form">
<div class="input-group">
<label class="block text-xs font-bold text-gray-500 uppercase mb-1 ml-1">Username</label>
<input type="text" id="user"
class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all bg-gray-50/50"
placeholder="Contoh: admin">
</div>
<div class="input-group">
<label class="block text-xs font-bold text-gray-500 uppercase mb-1 ml-1">Password</label>
<div class="relative">
<input type="password" id="pass"
class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all bg-gray-50/50"
placeholder="••••••••">
<button onclick="togglePassword()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-indigo-600 transition-colors">
<svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div>
</div>
<div class="pt-2">
<button onclick="handleLogin()" id="btn-login"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3.5 rounded-xl transition-all duration-300 shadow-lg active:scale-95 flex items-center justify-center space-x-2">
<span>Masuk ke Sistem</span>
</button>
</div>
</div>
<!-- Loading state -->
<div id="loading-state" class="hidden mt-4">
<div class="w-full bg-gray-200 rounded-full h-1 overflow-hidden">
<div id="p-bar" class="loader-bar"></div>
</div>
<p class="text-center text-xs text-indigo-600 mt-2 animate-pulse">Suryobot sedang memvalidasi data...</p>
</div>
<div id="status-container" class="mt-4 text-center min-h-[20px]">
<p id="hasil" class="text-sm font-medium fade-in"></p>
</div>
<div class="mt-6 pt-6 border-t border-gray-100 flex justify-between items-center text-[10px] text-gray-400 font-bold uppercase tracking-widest">
<span>v2.0 Beta</span>
<span>Powered by Suryobot AI</span>
</div>
</div>
<!-- HALAMAN PEMBELAJARAN (Muncul Setelah Login) -->
<div id="page-learning" class="glass-card w-full max-w-4xl p-10 rounded-3xl shadow-2xl hidden-page fade-in my-8">
<div class="flex flex-col items-center">
<!-- Ikon Buku Terbuka SVG -->
<div class="bg-indigo-100 p-6 rounded-full mb-6">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-indigo-600">
<path d="M12 6.25274V19.2527M12 6.25274C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25274V19.2527C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2527M12 6.25274C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25274V19.2527C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2527" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h1 class="text-3xl font-extrabold text-gray-800 mb-2">Modul Informatika</h1>
<p class="text-indigo-600 font-semibold mb-8">SMK Kebon Jeruk x Suryobot</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
<!-- Card Materi 1 (Algoritma & Pemrograman) -->
<div onclick="openModul('Algoritma & Pemrograman', 'https://administrasi-kebonjeruk.blogspot.com/2026/02/arduniouno-servo.html')"
class="module-card bg-white p-6 rounded-2xl border border-indigo-50 hover:shadow-2xl transition-all cursor-pointer group relative overflow-hidden">
<div class="absolute top-0 right-0 p-2 bg-indigo-600 text-white rounded-bl-xl opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
<h3 class="font-bold text-gray-700 group-hover:text-indigo-600 transition-colors text-lg">Algoritma & Pemrograman</h3>
<p class="text-sm text-gray-500 mt-2">Mempelajari logika dasar, Arduino Uno, dan kontrol Servo secara interaktif.</p>
<div class="mt-4 flex items-center text-xs font-bold text-indigo-500 uppercase tracking-wider group-hover:translate-x-2 transition-transform">
Buka Materi <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</div>
</div>
<!-- Card Materi 2 (Keamanan Jaringan dengan Link) -->
<div onclick="openModul('Keamanan Jaringan', 'https://administrasi-kebonjeruk.blogspot.com/2025/12/portofolio-tugas-siswa-informatika.html')"
class="module-card bg-white p-6 rounded-2xl border border-indigo-50 hover:shadow-2xl transition-all cursor-pointer group relative overflow-hidden">
<div class="absolute top-0 right-0 p-2 bg-indigo-600 text-white rounded-bl-xl opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</div>
<h3 class="font-bold text-gray-700 group-hover:text-indigo-600 transition-colors text-lg">Keamanan Jaringan</h3>
<p class="text-sm text-gray-500 mt-2">Portofolio tugas siswa: Dasar proteksi data dan keamanan sistem digital.</p>
<div class="mt-4 flex items-center text-xs font-bold text-indigo-500 uppercase tracking-wider group-hover:translate-x-2 transition-transform">
Buka Portofolio <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</div>
</div>
</div>
<button onclick="window.location.reload()" class="mt-10 text-gray-400 hover:text-indigo-600 text-sm font-medium transition-colors flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
Keluar dari Sistem
</button>
</div>
</div>
<!-- Script Partikel -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Inisialisasi Partikel
particlesJS("particles-js", {
"particles": {
"number": { "value": 80 },
"color": { "value": "#ffffff" },
"shape": { "type": "circle" },
"opacity": { "value": 0.2 },
"size": { "value": 3 },
"line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.2, "width": 1 },
"move": { "enable": true, "speed": 2 }
},
"interactivity": {
"events": { "onhover": { "enable": true, "mode": "grab" } }
}
});
// Fungsi Suara Suryobot
function suryoSpeak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'id-ID';
utterance.rate = 1.0;
utterance.pitch = 0.8;
window.speechSynthesis.speak(utterance);
}
}
// Fungsi Buka Modul
function openModul(namaMateri, url) {
suryoSpeak(`Membuka materi ${namaMateri}. Selamat belajar!`);
setTimeout(() => {
window.open(url, '_blank');
}, 500);
}
// Greeting Berdasarkan Waktu
window.onload = () => {
const hour = new Date().getHours();
const greetingElement = document.getElementById('greeting');
let text = "";
if (hour < 11) text = "Selamat Pagi";
else if (hour < 15) text = "Selamat Siang";
else if (hour < 19) text = "Selamat Sore";
else text = "Selamat Malam";
greetingElement.innerText = text + "!";
};
const database = [
{username: "admin", password: "admin123", role: "Administrator"},
{username: "guru", password: "guru2025", role: "Pengajar"},
{username: "siswa", password: "smkhebat", role: "Siswa"}
];
function togglePassword() {
const passInput = document.getElementById('pass');
passInput.type = passInput.type === 'password' ? 'text' : 'password';
}
function handleLogin() {
const u = document.getElementById("user").value;
const p = document.getElementById("pass").value;
const hasil = document.getElementById("hasil");
const btn = document.getElementById("btn-login");
const loading = document.getElementById("loading-state");
const pBar = document.getElementById("p-bar");
const loginPage = document.getElementById("page-login");
const learningPage = document.getElementById("page-learning");
hasil.innerHTML = "";
if (!u || !p) {
const msg = "Lengkapi username dan password!";
hasil.innerHTML = "⚠️ " + msg;
hasil.className = "text-sm font-medium text-amber-600 fade-in";
suryoSpeak(msg);
return;
}
btn.disabled = true;
btn.classList.add("opacity-50", "cursor-not-allowed");
loading.classList.remove("hidden");
setTimeout(() => pBar.style.width = "100%", 10);
setTimeout(() => {
const userFound = database.find(data => data.username === u && data.password === p);
loading.classList.add("hidden");
pBar.style.width = "0%";
btn.disabled = false;
btn.classList.remove("opacity-50", "cursor-not-allowed");
if (userFound) {
const successMsg = `Akses Diterima. Silahkan pilih modul pembelajaran yang tersedia.`;
suryoSpeak(successMsg);
// Transisi ke Halaman Pembelajaran
loginPage.classList.add("hidden-page");
learningPage.classList.remove("hidden-page");
} else {
const failMsg = "Username atau Password ditolak Suryobot!";
hasil.innerHTML = "❌ " + failMsg;
hasil.className = "text-sm font-medium text-red-600 fade-in";
suryoSpeak(failMsg);
}
}, 2000);
}
document.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleLogin();
});
</script>
</body>
</html>
Comments
Post a Comment