<!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SMKN 1 Punggelan - Learning Management System</title> <meta name="description" content="Modern learning management system for SMKN 1 Punggelan with project showcase and blog features"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#059669', secondary: '#3B82F6' } } } } </script></head><body class="bg-gray-50 dark:bg-gray-900"> <!-- Header --> <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800"> <div class="container mx-auto px-4"> <div class="flex items-center justify-between h-16"> <!-- Logo & Brand --> <div class="flex items-center space-x-3"> <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center"> <span class="text-white font-bold text-lg">S</span> </div> <div> <h1 class="text-gray-900 dark:text-white font-bold text-xl">SMKN 1 Punggelan</h1> <p class="text-gray-600 dark:text-gray-400 text-sm">Learning Management System</p> </div> </div> <!-- Navigation --> <nav class="hidden md:flex items-center space-x-8"> <a href="#home" class="text-primary font-medium">Home</a> <a href="#projects" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Projects</a> <a href="#blog" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Blog</a> <a href="#about" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">About</a> <a href="login.html" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">Admin Login</a> </nav> </div> </div> </header> <!-- Hero Section --> <section id="home" class="bg-white dark:bg-gray-900 py-20"> <div class="container mx-auto px-4 text-center"> <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6"> Welcome to <span class="text-primary">SMKN 1 Punggelan</span> </h1> <p class="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto"> Modern learning management system with project showcase, blog features, and comprehensive student portfolio management. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <a href="#projects" class="bg-primary text-white px-8 py-3 rounded-lg font-semibold hover:bg-green-600 transition-all transform hover:scale-105"> Explore Projects </a> <a href="login.html" class="border-2 border-primary text-primary px-8 py-3 rounded-lg font-semibold hover:bg-primary hover:text-white transition-all"> 🔐 Admin Login </a> </div> </div> </section> <!-- Stats Section --> <section class="bg-gray-100 dark:bg-gray-800 py-16"> <div class="container mx-auto px-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div> <div class="text-3xl font-bold text-primary mb-2">10+</div> <div class="text-gray-600 dark:text-gray-400">Active Projects</div> </div> <div> <div class="text-3xl font-bold text-secondary mb-2">500+</div> <div class="text-gray-600 dark:text-gray-400">Students</div> </div> <div> <div class="text-3xl font-bold text-purple-500 mb-2">50+</div> <div class="text-gray-600 dark:text-gray-400">Teachers</div> </div> <div> <div class="text-3xl font-bold text-orange-500 mb-2">99%</div> <div class="text-gray-600 dark:text-gray-400">Success Rate</div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="py-20"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Student Projects</h2> <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"> Discover amazing web applications and systems built by our students </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid"> <!-- Projects will be loaded here --> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-3 mb-4"> <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center"> <span class="text-white font-bold text-lg">S</span> </div> <div> <h3 class="font-bold text-lg">SMKN 1 Punggelan</h3> </div> </div> <p class="text-gray-400">Modern learning management system for vocational education.</p> </div> <div> <h4 class="font-semibold mb-4">Quick Links</h4> <ul class="space-y-2 text-gray-400"> <li><a href="#home" class="hover:text-white transition-colors">Home</a></li> <li><a href="#projects" class="hover:text-white transition-colors">Projects</a></li> <li><a href="#blog" class="hover:text-white transition-colors">Blog</a></li> <li><a href="#about" class="hover:text-white transition-colors">About</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Projects</h4> <ul class="space-y-2 text-gray-400"> <li><a href="http://2.56.246.78:8088" target="_blank" class="hover:text-white transition-colors">Main Website</a></li> <li><a href="http://2.56.246.78:8081" target="_blank" class="hover:text-white transition-colors">E-Commerce</a></li> <li><a href="http://2.56.246.78:8083" target="_blank" class="hover:text-white transition-colors">Education Platform</a></li> <li><a href="http://2.56.246.78:8085" target="_blank" class="hover:text-white transition-colors">IoT Dashboard</a></li> </ul> </div> <div> <h4 class="font-semibold mb-4">Contact</h4> <ul class="space-y-2 text-gray-400"> <li>📧 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5acaba3aa85b6a8aeabf4b5b0aba2a2a0a9a4abebb6a6adebaca1">[email protected]</a></li> <li>📞 (0274) 123-4567</li> <li>📍 Punggelan, Bantul, DIY</li> <li>🌐 2.56.246.78</li> </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>© 2025 SMKN 1 Punggelan. All rights reserved.</p> </div> </div> </footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script> // Load projects data const projects = [ { title: 'Main Website', description: 'Website utama SMKN 1 Punggelan dengan informasi sekolah', url: 'http://2.56.246.78:8088', category: 'Website', tech: ['HTML', 'CSS', 'JavaScript'], status: 'active' }, { title: 'E-Commerce Platform', description: 'Platform e-commerce untuk pembelajaran bisnis online', url: 'http://2.56.246.78:8081', category: 'E-Commerce', tech: ['HTML', 'CSS', 'JavaScript', 'PHP'], status: 'active' }, { title: 'Education Platform', description: 'Platform pembelajaran online untuk siswa', url: 'http://2.56.246.78:8083', category: 'Education', tech: ['HTML', 'CSS', 'JavaScript', 'Vue.js'], status: 'active' }, { title: 'IoT Dashboard', description: 'Dashboard monitoring IoT untuk smart city', url: 'http://2.56.246.78:8085', category: 'IoT', tech: ['HTML', 'CSS', 'JavaScript', 'Arduino'], status: 'active' }, { title: 'Healthcare System', description: 'Sistem manajemen kesehatan untuk pembelajaran', url: 'http://2.56.246.78:8082', category: 'Healthcare', tech: ['HTML', 'CSS', 'JavaScript', 'Bootstrap'], status: 'active' }, { title: 'Fintech Solution', description: 'Aplikasi keuangan digital untuk pembelajaran', url: 'http://2.56.246.78:8084', category: 'Fintech', tech: ['HTML', 'CSS', 'JavaScript', 'Node.js'], status: 'active' } ]; // Render projects function renderProjects() { const grid = document.getElementById('projects-grid'); grid.innerHTML = projects.map(project => ` <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-primary transition-all duration-300 hover:shadow-lg overflow-hidden group"> <div class="h-48 bg-gradient-to-br from-primary to-secondary flex items-center justify-center"> <div class="text-white text-6xl opacity-80">🌐</div> </div> <div class="p-6"> <div class="flex items-center justify-between mb-3"> <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">${project.category}</span> <span class="w-3 h-3 bg-green-500 rounded-full"></span> </div> <h3 class="font-semibold text-lg text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">${project.title}</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">${project.description}</p> <div class="flex flex-wrap gap-1 mb-4"> ${project.tech.map(tech => `<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">${tech}</span>`).join('')} </div> <a href="${project.url}" target="_blank" class="inline-flex items-center text-primary hover:text-green-600 font-medium"> Visit Project <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> </a> </div> </div> `).join(''); } // Initialize document.addEventListener('DOMContentLoaded', function() { renderProjects(); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); }); </script></body></html> 
