mapping application

This commit is contained in:
Flatlogic Bot 2025-10-09 09:30:46 +00:00
parent 7fa539567e
commit 7639482efa
6 changed files with 336 additions and 145 deletions

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

@ -0,0 +1,65 @@
body {
font-family: 'Roboto', sans-serif;
background-color: #f7fafc;
color: #4a5568;
}
.navbar {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.hero {
background: linear-gradient(45deg, #2c5282, #38a169);
color: white;
padding: 100px 0;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
}
.section {
padding: 60px 0;
}
.section-title {
text-align: center;
margin-bottom: 40px;
font-size: 2.5rem;
font-weight: 700;
color: #2c5282;
}
.card {
border: none;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,.1);
margin-bottom: 20px;
}
.form-control {
border-radius: 0.5rem;
}
.btn-primary {
background-color: #2c5282;
border-color: #2c5282;
border-radius: 0.5rem;
padding: 12px 30px;
font-weight: 700;
}
.btn-primary:hover {
background-color: #2a4b73;
border-color: #2a4b73;
}
.footer {
background-color: #2d3748;
color: white;
padding: 40px 0;
}

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

@ -0,0 +1,51 @@
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
const alertDiv = document.getElementById('form-messages');
if (name === '' || email === '' || message === '') {
showAlert('Please fill out all fields.', 'danger');
return;
}
if (!validateEmail(email)) {
showAlert('Please enter a valid email address.', 'danger');
return;
}
const formData = new FormData(contactForm);
fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message, 'success');
contactForm.reset();
} else {
showAlert(data.message, 'danger');
}
})
.catch(error => {
showAlert('An error occurred. Please try again later.', 'danger');
});
});
}
function showAlert(message, type) {
const alertDiv = document.getElementById('form-messages');
alertDiv.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
}
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
});

43
contact.php Normal file
View File

@ -0,0 +1,43 @@
<?php
header('Content-Type: application/json');
require_once __DIR__ . '/mail/MailService.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = filter_var($_POST['name'] ?? '', FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL);
$message = filter_var($_POST['message'] ?? '', FILTER_SANITIZE_STRING);
if (empty($name) || empty($email) || empty($message)) {
echo json_encode(['success' => false, 'message' => 'Please fill out all fields.']);
exit;
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo json_encode(['success' => false, 'message' => 'Invalid email format.']);
exit;
}
$to = getenv('MAIL_TO') ?: 'your-email@example.com'; // Fallback email
$subject = 'New Contact Form Submission from ' . $name;
$html_content = "<p>You have received a new message from your website contact form.</p>";
$html_content .= "<p><strong>Name:</strong> {$name}</p>";
$html_content .= "<p><strong>Email:</strong> {$email}</p>";
$html_content .= "<p><strong>Message:</strong><br>{$message}</p>";
$text_content = "You have received a new message from your website contact form.\n";
$text_content .= "Name: {$name}\n";
$text_content .= "Email: {$email}\n";
$text_content .= "Message:\n{$message}";
$result = MailService::sendMail($to, $subject, $html_content, $text_content, ['reply_to' => $email]);
if ($result['success']) {
echo json_encode(['success' => true, 'message' => 'Thank you for your message. It has been sent.']);
} else {
echo json_encode(['success' => false, 'message' => 'Sorry, there was an error sending your message. Please try again later.']);
}
} else {
echo json_encode(['success' => false, 'message' => 'Invalid request method.']);
}

228
index.php
View File

@ -1,150 +1,98 @@
<?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>Mapping Agricultural Land Use and Crop Suitability</title>
<meta name="description" content="An intelligent GIS-based system to help analyze and visualize agricultural patterns in Balangkayan, Eastern Samar.">
<meta name="keywords" content="GIS, agricultural land use, crop suitability, QGIS, Balangkayan, Eastern Samar, mapping, geospatial analysis, sustainable farming, land management, agricultural planning, data-driven agriculture">
<meta property="og:title" content="Mapping Agricultural Land Use and Crop Suitability">
<meta property="og:description" content="An intelligent GIS-based system to help analyze and visualize agricultural patterns in Balangkayan, Eastern Samar.">
<meta property="og:image" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand" href="#">GIS Balangkayan</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="#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="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="/privacy.php">Privacy Policy</a></li>
</ul>
</div>
</div>
</nav>
<header id="home" class="hero">
<div class="container">
<h1>Mapping Agricultural Land Use & Crop Suitability</h1>
<p class="lead">A data-driven approach to agricultural planning in Balangkayan, Eastern Samar.</p>
</div>
</header>
<section id="about" class="section">
<div class="container">
<h2 class="section-title">About the Project</h2>
<div class="row">
<div class="col-md-8 mx-auto text-center">
<p class="lead">This project leverages the power of QGIS and geospatial data to map agricultural land use and identify the most suitable crops for different areas within Balangkayan, Eastern Samar. Our goal is to empower local farmers, researchers, and government units with an interactive tool for sustainable agricultural planning and decision-making.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="section bg-light">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<div class="row">
<div class="col-md-8 mx-auto">
<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 class="card-body">
<div id="form-messages"></div>
<form id="contactForm">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</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 class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container text-center">
<p>&copy; 2025 GIS Balangkayan. All Rights Reserved.</p>
<p><a href="/privacy.php" class="text-white">Privacy Policy</a></p>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</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>

68
privacy.php Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Policy - Mapping Agricultural Land Use and Crop Suitability</title>
<meta name="description" content="Privacy Policy for the GIS Balangkayan project.">
<meta name="keywords" content="privacy policy, GIS, agricultural land use, crop suitability, QGIS, Balangkayan, Eastern Samar">
<meta property="og:title" content="Privacy Policy - Mapping Agricultural Land Use and Crop Suitability">
<meta property="og:description" content="Privacy Policy for the GIS Balangkayan project.">
<meta property="og:image" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand" href="/">GIS Balangkayan</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="/">Home</a></li>
</ul>
</div>
</div>
</nav>
<main class="section">
<div class="container">
<h1 class="section-title">Privacy Policy</h1>
<div class="row">
<div class="col-md-8 mx-auto">
<p>This is a placeholder for the Privacy Policy. You should update this to reflect your data handling practices.</p>
<h2>Information We Collect</h2>
<p>We collect information you provide to us directly, such as when you fill out the contact form. This may include your name, email address, and any message you send.</p>
<h2>How We Use Information</h2>
<p>We use the information we collect to respond to your inquiries and to improve our services.</p>
<h2>Sharing of Information</h2>
<p>We do not share your personal information with third parties except as required by law.</p>
<h2>Contact Us</h2>
<p>If you have any questions about this Privacy Policy, please contact us through the form on our homepage.</p>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container text-center">
<p>&copy; 2025 GIS Balangkayan. All Rights Reserved.</p>
<p><a href="/privacy.php" class="text-white">Privacy Policy</a></p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

16
sitemap.xml Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://your-domain.com/index.php</loc>
<lastmod>2025-10-09</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://your-domain.com/privacy.php</loc>
<lastmod>2025-10-09</lastmod>
<changefreq>yearly</changefreq>
<priority>0.5</priority>
</url>
</urlset>