Si-Apon Versi Demo
This commit is contained in:
Flatlogic Bot
parent
97b2319540
commit
8dd1b311f8
56
assets/css/custom.css
Normal file
56
assets/css/custom.css
Normal file
@ -0,0 +1,56 @@
|
||||
/* Custom CSS for Si-Apon */
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
color: #264653;
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Merriweather', serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: url('https://picsum.photos/seed/hero/1600/900') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #2A9D8F;
|
||||
border-color: #2A9D8F;
|
||||
padding: 10px 20px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #E9C46A;
|
||||
border-color: #E9C46A;
|
||||
padding: 10px 20px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
34
assets/js/main.js
Normal file
34
assets/js/main.js
Normal file
@ -0,0 +1,34 @@
|
||||
// Custom JS for Si-Apon
|
||||
|
||||
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'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Contact form validation
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
// Basic validation
|
||||
const name = document.getElementById('name').value;
|
||||
const email = document.getElementById('email').value;
|
||||
const message = document.getElementById('message').value;
|
||||
|
||||
if (name === '' || email === '' || message === '') {
|
||||
alert('Please fill in all fields.');
|
||||
} else {
|
||||
// Here you would typically send the form data to the server
|
||||
alert('Thank you for your message!');
|
||||
contactForm.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
275
index.php
275
index.php
@ -1,150 +1,135 @@
|
||||
<?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>Si-Apon - Sistem Informasi Pajak Online</title>
|
||||
<meta name="description" content="Si-Apon streamlines and enhances transparency in tax management for Sarmi Regency's e-government system.">
|
||||
<meta name="keywords" content="pajak online, sarmi, e-government, pajak daerah, retribusi daerah, lapor pajak, spptd, pbb-p2, pad sarmi">
|
||||
<meta property="og:title" content="Si-Apon">
|
||||
<meta property="og:description" content="Si-Apon streamlines and enhances transparency in tax management for Sarmi Regency's e-government system.">
|
||||
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34683/app-hero-20251005-060858.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34683/app-hero-20251005-060858.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
<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=Lato:wght@400;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
|
||||
</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>
|
||||
</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)
|
||||
</footer>
|
||||
|
||||
<!-- Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Si-Apon</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<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="#hero">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#about">Tentang</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#taxes">Pajak & Retribusi</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Kontak</a></li>
|
||||
<li class="nav-item"><a class="btn btn-primary ms-lg-3" href="#">Login</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="hero">
|
||||
<div class="container">
|
||||
<h1>Selamat Datang di Si-Apon</h1>
|
||||
<p>Sistem Informasi Pajak Online Kabupaten Sarmi. Modernisasi Pelaporan Pajak untuk Pembangunan Daerah.</p>
|
||||
<a href="#" class="btn btn-primary btn-lg">Lapor Pajak Sekarang</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<img src="https://picsum.photos/seed/about/800/600" alt="Masyarakat Sarmi tersenyum" class="img-fluid rounded">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Tentang Si-Apon</h2>
|
||||
<p>Si-Apon adalah sebuah inovasi digital yang dirancang untuk merevolusi cara pengelolaan pajak dan retribusi daerah di Kabupaten Sarmi. Dengan platform yang terintegrasi dan mudah diakses, kami berkomitmen untuk menyederhanakan proses pelaporan, meningkatkan transparansi, dan mengoptimalkan Pendapatan Asli Daerah (PAD) demi kemajuan bersama.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Taxes Section -->
|
||||
<section id="taxes" class="bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2>Jenis Pajak & Retribusi</h2>
|
||||
<p>Berbagai jenis pajak dan retribusi daerah yang dapat dilaporkan melalui Si-Apon.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card text-center p-4">
|
||||
<img src="https://picsum.photos/seed/hotel/200/200" alt="Ikon Pajak Hotel" class="rounded-circle mx-auto mb-3" style="width: 100px; height: 100px;">
|
||||
<h4>Pajak Hotel</h4>
|
||||
<p>Pelaporan pajak untuk penginapan dan hotel.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card text-center p-4">
|
||||
<img src="https://picsum.photos/seed/resto/200/200" alt="Ikon Pajak Restoran" class="rounded-circle mx-auto mb-3" style="width: 100px; height: 100px;">
|
||||
<h4>Pajak Restoran</h4>
|
||||
<p>Pelaporan pajak untuk usaha restoran dan rumah makan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card text-center p-4">
|
||||
<img src="https://picsum.photos/seed/pbb/200/200" alt="Ikon PBB" class="rounded-circle mx-auto mb-3" style="width: 100px; height: 100px;">
|
||||
<h4>PBB-P2</h4>
|
||||
<p>Pajak Bumi dan Bangunan Perdesaan dan Perkotaan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2>Hubungi Kami</h2>
|
||||
<p>Punya pertanyaan atau butuh bantuan? Jangan ragu untuk menghubungi kami.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<form id="contactForm">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Nama</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">Pesan</label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Kirim Pesan</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white text-center p-4">
|
||||
<div class="container">
|
||||
<p>© 2025 Si-Apon Kabupaten Sarmi. All Rights Reserved.</p>
|
||||
<a href="/privacy.php">Privacy Policy</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
17
privacy.php
Normal file
17
privacy.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Privacy Policy - Si-Apon</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1>Privacy Policy</h1>
|
||||
<p>This is a placeholder for the privacy policy.</p>
|
||||
<a href="/">Go back to Home</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user