702 lines
21 KiB
PHP
702 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>E-Bendungan</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #2a8f47;
|
|
--primary-light: #4caf50;
|
|
--primary-dark: #1e6b32;
|
|
--accent-color: #f8f9fa;
|
|
--text-dark: #2c3e50;
|
|
--text-light: #6c757d;
|
|
--white: #ffffff;
|
|
--gradient: linear-gradient(135deg, #2a8f47 0%, #4caf50 100%);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.login-btn {
|
|
background: var(--gradient);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(42, 143, 71, 0.3);
|
|
}
|
|
|
|
.login-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(42, 143, 71, 0.4);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
background: var(--gradient);
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="rgba(255,255,255,0.05)"><circle cx="200" cy="200" r="100"/><circle cx="800" cy="300" r="150"/><circle cx="300" cy="700" r="80"/><circle cx="900" cy="800" r="120"/></svg>');
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(10deg); }
|
|
}
|
|
|
|
.hero-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.2;
|
|
animation: slideInLeft 1s ease-out;
|
|
}
|
|
|
|
.hero-text p {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 2rem;
|
|
opacity: 0.9;
|
|
animation: slideInLeft 1s ease-out 0.2s both;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
animation: slideInLeft 1s ease-out 0.4s both;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
padding: 1rem 2rem;
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: white;
|
|
color: var(--primary-color);
|
|
box-shadow: 0 4px 15px rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(255,255,255,0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: white;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: white;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.hero-visual {
|
|
position: relative;
|
|
animation: slideInRight 1s ease-out;
|
|
}
|
|
|
|
.dashboard-mockup {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
|
transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.dashboard-mockup:hover {
|
|
transform: perspective(1000px) rotateY(-10deg) rotateX(2deg);
|
|
}
|
|
|
|
.mockup-header {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mockup-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dot-red { background: #ff6b6b; }
|
|
.dot-yellow { background: #ffd93d; }
|
|
.dot-green { background: var(--primary-color); }
|
|
|
|
.mockup-content {
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.mockup-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.mockup-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--accent-color);
|
|
padding: 1rem;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 6rem 0;
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-light);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
padding: 2.5rem;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(42, 143, 71, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(42, 143, 71, 0.1), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 40px rgba(42, 143, 71, 0.2);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--gradient);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.5rem;
|
|
font-size: 2rem;
|
|
color: white;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--text-light);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
padding: 6rem 0;
|
|
background: var(--gradient);
|
|
color: white;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-card h3 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stats-card p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: var(--text-dark);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.footer-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-section h3 {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.footer-section p, .footer-section a {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.footer-section a:hover {
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid #444;
|
|
padding-top: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.dashboard-mockup {
|
|
transform: none;
|
|
}
|
|
|
|
.cta-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav>
|
|
<div class="container">
|
|
<div class="nav-container">
|
|
<div class="logo">E-Bendungan</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#home">Beranda</a></li>
|
|
<li><a href="#features">Fitur</a></li>
|
|
<li><a href="#about">Tentang</a></li>
|
|
<li><a href="#contact">Kontak</a></li>
|
|
</ul>
|
|
<a href="{{route('login')}}" class="login-btn">Masuk</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="home">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<h1>Sistem Informasi Digital Terpadu</h1>
|
|
<p>Kelola semua kebutuhan administrasi Anda dengan mudah, cepat, dan efisien melalui platform digital yang terintegrasi.</p>
|
|
<div class="cta-buttons">
|
|
<a href="#features" class="btn-primary">Jelajahi Fitur</a>
|
|
<a href="#demo" class="btn-secondary">Lihat Demo</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="dashboard-mockup">
|
|
<div class="mockup-header">
|
|
<div class="mockup-dot dot-red"></div>
|
|
<div class="mockup-dot dot-yellow"></div>
|
|
<div class="mockup-dot dot-green"></div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="mockup-title">Dashboard Overview</div>
|
|
<div class="mockup-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number">127</div>
|
|
<div class="stat-label">Pengajuan Surat</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">89</div>
|
|
<div class="stat-label">Aspirasi</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">45</div>
|
|
<div class="stat-label">Berita Aktif</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">98%</div>
|
|
<div class="stat-label">Kepuasan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2>Fitur Unggulan</h2>
|
|
<p>Sistem lengkap dengan berbagai fitur yang memudahkan pengelolaan administrasi dan komunikasi</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔐</div>
|
|
<h3>Login Aman</h3>
|
|
<p>Sistem autentikasi yang aman dengan verifikasi email dan reset password yang mudah digunakan.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📊</div>
|
|
<h3>Dashboard Interaktif</h3>
|
|
<p>Dashboard yang informatif dengan visualisasi data real-time untuk memantau semua aktivitas sistem.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📝</div>
|
|
<h3>Pengajuan Surat</h3>
|
|
<p>Proses pengajuan surat digital dengan tracking status dan upload dokumen pendukung.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📰</div>
|
|
<h3>Manajemen Berita</h3>
|
|
<p>Kelola dan publikasikan berita dengan mudah, lengkap dengan editor dan manajemen media.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💬</div>
|
|
<h3>Aspirasi & Keluhan</h3>
|
|
<p>Platform untuk menampung aspirasi dan keluhan masyarakat dengan sistem tracking yang jelas.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>Performa Cepat</h3>
|
|
<p>Sistem yang responsif dengan loading time kurang dari 1 detik untuk pengalaman pengguna optimal.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stats-card">
|
|
<h3>100%</h3>
|
|
<p>Success Rate</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h3><1s</h3>
|
|
<p>Loading Time</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h3>24/7</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
<div class="stats-card">
|
|
<h3>99.9%</h3>
|
|
<p>Uptime</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>E-Bendungan</h3>
|
|
<p>Platform digital terpadu untuk mengelola semua kebutuhan administrasi dengan efisien dan modern.</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Fitur Utama</h3>
|
|
<p><a href="#">Dashboard</a></p>
|
|
<p><a href="#">Pengajuan Surat</a></p>
|
|
<p><a href="#">Manajemen Berita</a></p>
|
|
<p><a href="#">Aspirasi & Keluhan</a></p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Dukungan</h3>
|
|
<p><a href="#">Dokumentasi</a></p>
|
|
<p><a href="#">Tutorial</a></p>
|
|
<p><a href="#">FAQ</a></p>
|
|
<p><a href="#">Kontak Support</a></p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Kontak</h3>
|
|
<p>Email: diphaandimorgan@gmail.com</p>
|
|
<p>Phone: 0889-9582-3234</p>
|
|
<p>Alamat: Jombang, Indonesia</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 SistemInfo. Semua hak cipta dilindungi.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Smooth scrolling for navigation links
|
|
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',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add scroll effect to navigation
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.querySelector('nav');
|
|
if (window.scrollY > 100) {
|
|
nav.style.background = 'rgba(255, 255, 255, 0.98)';
|
|
nav.style.boxShadow = '0 2px 30px rgba(0,0,0,0.15)';
|
|
} else {
|
|
nav.style.background = 'rgba(255, 255, 255, 0.95)';
|
|
nav.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
|
|
}
|
|
});
|
|
|
|
// Animate stats on scroll
|
|
const animateStats = () => {
|
|
const stats = document.querySelectorAll('.stats-card h3');
|
|
stats.forEach(stat => {
|
|
const finalValue = stat.textContent;
|
|
if (finalValue.includes('%')) {
|
|
const numValue = parseInt(finalValue);
|
|
animateNumber(stat, 0, numValue, '%');
|
|
} else if (finalValue.includes('s')) {
|
|
stat.textContent = '<1s';
|
|
} else if (finalValue.includes('/')) {
|
|
stat.textContent = '24/7';
|
|
}
|
|
});
|
|
};
|
|
|
|
const animateNumber = (element, start, end, suffix = '') => {
|
|
const duration = 2000;
|
|
const increment = (end - start) / (duration / 16);
|
|
let current = start;
|
|
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= end) {
|
|
current = end;
|
|
clearInterval(timer);
|
|
}
|
|
element.textContent = Math.floor(current) + suffix;
|
|
}, 16);
|
|
};
|
|
|
|
// Trigger animation when stats section comes into view
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
animateStats();
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
});
|
|
|
|
const statsSection = document.querySelector('.stats');
|
|
if (statsSection) {
|
|
observer.observe(statsSection);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |