Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,59 +0,0 @@
|
|||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:wght@700&display=swap');
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
background-color: #F8F9FA;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: 'Merriweather', serif;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
background: linear-gradient(45deg, #0A58CA, #5A8FD8);
|
|
||||||
color: white;
|
|
||||||
padding: 100px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 80px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: #0A58CA;
|
|
||||||
border-color: #0A58CA;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: #084aa3;
|
|
||||||
border-color: #084aa3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
// Smooth scrolling for anchor links
|
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
||||||
anchor.addEventListener('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
296
index.php
296
index.php
@ -1,158 +1,150 @@
|
|||||||
<!DOCTYPE html>
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
@ini_set('display_errors', '1');
|
||||||
|
@error_reporting(E_ALL);
|
||||||
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
|
$phpVersion = PHP_VERSION;
|
||||||
|
$now = date('Y-m-d H:i:s');
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>SIAPON BAPENDA</title>
|
<title>New Style</title>
|
||||||
<meta name="description" content="SIAPON streamlines online tax management with dynamic dashboards, integrated filing, and verification for Sarmi's taxpayers.">
|
<?php
|
||||||
<meta name="keywords" content="pajak online, sarmi, bapenda, e-sptpd, npwpd, nopd, verifikasi pajak, pembayaran pajak, sistem informasi pajak">
|
// Read project preview data from environment
|
||||||
<meta property="og:title" content="SIAPON BAPENDA">
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||||
<meta property="og:description" content="SIAPON streamlines online tax management with dynamic dashboards, integrated filing, and verification for Sarmi's taxpayers.">
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34706/app-hero-20251006-013730.png">
|
?>
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<?php if ($projectDescription): ?>
|
||||||
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34706/app-hero-20251006-013730.png">
|
<!-- Meta description -->
|
||||||
|
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<!-- Open Graph meta tags -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<link rel="stylesheet" href="assets/css/custom.css">
|
<!-- Twitter meta tags -->
|
||||||
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($projectImageUrl): ?>
|
||||||
|
<!-- Open Graph image -->
|
||||||
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
|
<!-- Twitter image -->
|
||||||
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
|
<?php endif; ?>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color-start: #6a11cb;
|
||||||
|
--bg-color-end: #2575fc;
|
||||||
|
--text-color: #ffffff;
|
||||||
|
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||||
|
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||||
|
color: var(--text-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||||
|
animation: bg-pan 20s linear infinite;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
@keyframes bg-pan {
|
||||||
|
0% { background-position: 0% 0%; }
|
||||||
|
100% { background-position: 100% 100%; }
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: var(--card-bg-color);
|
||||||
|
border: 1px solid var(--card-border-color);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.loader {
|
||||||
|
margin: 1.25rem auto 1.25rem;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px; height: 1px;
|
||||||
|
padding: 0; margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap; border: 0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<main>
|
||||||
<!-- Navbar -->
|
<div class="card">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
|
<h1>Analyzing your requirements and generating your website…</h1>
|
||||||
<div class="container">
|
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||||
<a class="navbar-brand fw-bold" href="#">SIAPON</a>
|
<span class="sr-only">Loading…</span>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
</div>
|
||||||
<span class="navbar-toggler-icon"></span>
|
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||||
</button>
|
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||||
<ul class="navbar-nav ms-auto">
|
|
||||||
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
<button class="btn btn-primary ms-lg-3" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<header id="home" class="hero">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="display-4 fw-bold">Sistem Informasi Pembukuan Pajak Online</h1>
|
|
||||||
<p class="lead my-4">Modernisasi layanan perpajakan Badan Pendapatan Daerah Kabupaten Sarmi.</p>
|
|
||||||
<a href="#features" class="btn btn-light btn-lg">Learn More</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- About Section -->
|
|
||||||
<section id="about" class="section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<img src="https://picsum.photos/seed/siapon-about/800/600" alt="Badan Pendapatan Daerah Kabupaten Sarmi" class="img-fluid rounded-3">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 mt-4 mt-lg-0">
|
|
||||||
<h2>About SIAPON</h2>
|
|
||||||
<p>SIAPON adalah platform digital yang dirancang untuk merevolusi cara wajib pajak di Kabupaten Sarmi berinteraksi dengan Badan Pendapatan Daerah. Kami menyediakan sistem yang terintegrasi, efisien, dan transparan untuk semua kebutuhan perpajakan Anda.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features Section -->
|
|
||||||
<section id="features" class="section bg-light">
|
|
||||||
<div class="container">
|
|
||||||
<div class="text-center mb-5">
|
|
||||||
<h2>Key Features</h2>
|
|
||||||
<p class="lead">Everything you need in one integrated platform.</p>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-4 mb-4">
|
|
||||||
<div class="card p-4 text-center h-100">
|
|
||||||
<i class="bi bi-file-earmark-text-fill fs-1 text-primary"></i>
|
|
||||||
<h4 class="mt-3">E-SPTPD</h4>
|
|
||||||
<p>Pelaporan SPTPD secara online yang cepat, mudah, dan dapat diakses kapan saja.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 mb-4">
|
|
||||||
<div class="card p-4 text-center h-100">
|
|
||||||
<i class="bi bi-person-plus-fill fs-1 text-primary"></i>
|
|
||||||
<h4 class="mt-3">Registrasi Online</h4>
|
|
||||||
<p>Pendaftaran NPWPD & NOPD baru tanpa harus datang ke kantor pelayanan.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 mb-4">
|
|
||||||
<div class="card p-4 text-center h-100">
|
|
||||||
<i class="bi bi-cash-coin fs-1 text-primary"></i>
|
|
||||||
<h4 class="mt-3">Pembayaran Terintegrasi</h4>
|
|
||||||
<p>Sistem pembayaran yang aman dan terhubung dengan berbagai kanal pembayaran.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<section id="contact" class="section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 mx-auto text-center">
|
|
||||||
<h2>Contact Us</h2>
|
|
||||||
<p class="lead mb-5">Have questions? We'd love to hear from you.</p>
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<input type="text" class="form-control" placeholder="Your Name" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<input type="email" class="form-control" placeholder="Your Email" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="bg-dark text-white text-center p-4">
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2025 BAPENDA Kabupaten Sarmi. All Rights Reserved.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- Login Modal -->
|
|
||||||
<div class="modal fade" id="loginModal" tabindex="-1">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Admin Login</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="username" class="form-label">Username</label>
|
|
||||||
<input type="text" class="form-control" id="username" value="admin" readonly>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="password" class="form-label">Password</label>
|
|
||||||
<input type="password" class="form-control" id="password" value="pwd123" readonly>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary w-100" disabled>Login</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
<footer>
|
||||||
<script src="assets/js/main.js"></script>
|
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user