Auto commit: 2025-10-06T01:40:16.208Z

This commit is contained in:
Flatlogic Bot 2025-10-06 01:40:16 +00:00
parent a3ac8323c9
commit 38245720ab
3 changed files with 224 additions and 144 deletions

59
assets/css/custom.css Normal file
View File

@ -0,0 +1,59 @@
@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;
}

13
assets/js/main.js Normal file
View File

@ -0,0 +1,13 @@
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'
});
});
});
});

290
index.php
View File

@ -1,150 +1,158 @@
<?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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- 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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIAPON BAPENDA</title>
<meta name="description" content="SIAPON streamlines online tax management with dynamic dashboards, integrated filing, and verification for Sarmi's taxpayers.">
<meta name="keywords" content="pajak online, sarmi, bapenda, e-sptpd, npwpd, nopd, verifikasi pajak, pembayaran pajak, sistem informasi pajak">
<meta property="og:title" content="SIAPON BAPENDA">
<meta property="og:description" content="SIAPON streamlines online tax management with dynamic dashboards, integrated filing, and verification for Sarmi's taxpayers.">
<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">
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34706/app-hero-20251006-013730.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">SIAPON</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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>
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</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>&copy; 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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>