v3.0.0.2

FlatlyPage

← Changes All versions

425 lines · 18.9 KB

<?php
error_reporting(E_ALL);
ini_set('display_errors', 0);
header_remove('X-Powered-By');
header("X-Content-Type-Options: nosniff");
header("X-Frame-Options: SAMEORIGIN");
header("X-XSS-Protection: 1; mode=block");
header("Referrer-Policy: strict-origin-when-cross-origin");
require_once __DIR__ . '/config.php';
$slug = isset($_GET['slug']) ? sanitize($_GET['slug']) : 'contact';
define('CURRENT_PAGE', 'contact');
if (!flatly_init_front_lang()) {
header('Location: ' . BASE_URL . '/');
exit;
}
$site_settings = get_site_settings();
if (empty($site_settings['contact_page_enabled']) || $site_settings['contact_page_enabled'] === false) {
header('Location: ' . BASE_URL . '/');
exit;
}
require_once __DIR__ . '/contact-handler.php';
if (empty($slug)) {
header('Location: ' . BASE_URL . flatly_lang_url(flatly_current_lang(), '/'));
exit;
}
$page = null;
$pages = get_all_products();
foreach ($pages as $p) {
if ($p['slug'] === $slug) {
$page = $p;
break;
}
}
flatly_set_page_ref($page ? flatly_split_lang_file_id((string) ($page['id'] ?? ('product-' . $slug)))[1] : 'product-' . $slug);
$site_settings = get_site_settings();
$page_title = $page['title'] ?? 'Contact Us';
$page_description = $page['description'] ?? '';
$lang = isset($site_settings['site_language']) ? $site_settings['site_language'] : 'en';
$blocks = $page['blocks'] ?? [];
$has_newsletter = false;
foreach ($blocks as $block) {
if (($block['type'] ?? '') === 'newsletter') {
$has_newsletter = true;
break;
}
}
$nav_links = $site_settings['nav_links'] ?? [];
$nav_buttons = $site_settings['nav_buttons'] ?? [];
$footer = $site_settings['footer'] ?? [];
$logo_text = $site_settings['logo_text'] ?? $site_settings['site_name'] ?? 'FlatlyPage';
$logo_image = $site_settings['logo_image'] ?? '';
$website_font = get_text_font($site_settings);
$search_status_file = dirname(__FILE__) . '/data/search/search.txt';
$show_search = false;
if (file_exists($search_status_file)) {
$status_content = trim(file_get_contents($search_status_file));
if ($status_content === 'true') {
$show_search = true;
}
}
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($lang); ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($page_title) ?> - <?= e($site_settings['site_name']) ?></title>
<meta name="description" content="<?= e($page_description) ?>">
<?= flatly_canonical_link() ?>
<?= flatly_hreflang_links() ?>
<?= flatly_language_detect_script() ?>
<?php if (!empty($site_settings['favicon'])): ?>
<link rel="icon" href="<?= e($site_settings['favicon']) ?>">
<?php endif; ?>
<?= font_head_html(site_all_fonts($site_settings), [get_site_interface_font($site_settings), $website_font]) ?>
<link rel="stylesheet" href="/css/contact.css?v=<?= filemtime(__DIR__ . '/css/contact.css') ?>">
<?= theme_link_html() ?>
<link rel="stylesheet" href="/css/styles.css?v=<?= filemtime(__DIR__ . '/css/styles.css') ?>">
<style>
<?= site_fonts_css($site_settings) ?>
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "<?= e($site_settings['site_name'] ?? SITE_NAME) ?>",
"url": "<?= e(SITE_URL) ?>",
"description": "<?= e($page_description) ?>",
"publisher": {
"@type": "Organization",
"name": "<?= e($logo_text) ?>"
}
}
</script>
<?= flatly_custom_html('head') ?>
</head>
<body>
<?= flatly_custom_html('body_start') ?>
<nav class="navbar">
<div class="container navbar-inner">
<a href="<?= e(flatly_home_url()) ?>" class="logo">
<?php if (!empty($logo_image)): ?>
<img src="<?= e($logo_image) ?>" alt="<?= e($logo_text) ?>">
<?php endif; ?>
<?= e($logo_text) ?>
</a>
<?php if (!empty($nav_links)): ?>
<div class="nav-links">
<?php foreach ($nav_links as $link): ?>
<a href="<?= e($link['url'] ?? '#') ?>"><?= nav_icon_html($link['icon'] ?? '') ?><?= e($link['label'] ?? '') ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if (!empty($nav_buttons) || $show_search): ?>
<div class="nav-buttons">
<?php if ($show_search): ?>
<a href="/search.php" class="btn btn-search" title="Search" style="padding: 8px; display: inline-flex; align-items: center; margin-right: 5px;">
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<?php endif; ?>
<?php foreach ($nav_buttons as $btn): ?>
<a href="<?= e($btn['url'] ?? '#') ?>" class="btn btn-<?= e($btn['style'] ?? 'ghost') ?>"><?= nav_icon_html($btn['icon'] ?? '') ?><?= e($btn['label'] ?? '') ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?= flatly_custom_html('nav') ?>
<button class="mobile-menu-btn" aria-label="Menu" onclick="document.querySelector('.mobile-nav').classList.toggle('active')">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
<div class="mobile-nav">
<?php if (!empty($nav_links)): ?>
<?php foreach ($nav_links as $link): ?>
<a href="<?= e($link['url'] ?? '#') ?>"><?= nav_icon_html($link['icon'] ?? '') ?><?= e($link['label'] ?? '') ?></a>
<?php endforeach; ?>
<?php endif; ?>
<?php if (!empty($nav_buttons)): ?>
<?php foreach ($nav_buttons as $btn): ?>
<a href="<?= e($btn['url'] ?? '#') ?>" class="btn btn-<?= e($btn['style'] ?? 'ghost') ?>"><?= nav_icon_html($btn['icon'] ?? '') ?><?= e($btn['label'] ?? '') ?></a>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($show_search): ?>
<a href="/search.php" class="btn btn-search" title="Search" style="padding: 8px; display: inline-flex; align-items: center; margin-right: 5px;">
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<?php endif; ?>
</div>
<main>
<?php if (!empty($blocks)): ?>
<?php foreach ($blocks as $block):
echo apply_bbcode(render_block($block));
endforeach; ?>
<?php endif; ?>
<section class="contact-form-section" id="contact-form">
<div class="container">
<div class="section-header">
<h2>Contact Us</h2>
<p>Have questions? Reach out to us!</p>
</div>
<?php $message = get_contact_message(); ?>
<?php if ($message): ?>
<div style="padding: 1rem; margin-bottom: 1.5rem; border-radius: 8px; <?= $message['type'] === 'success' ? 'background: #dcfce7; color: #166534;' : 'background: #fee2e2; color: #991b1b;' ?>">
<?= e($message['text']) ?>
</div>
<?php endif; ?>
<div class="contact-form-wrapper">
<form class="contact-form" method="POST" action="">
<input type="text" name="website" value="" style="display:none !important; visibility:hidden; position:absolute; left:-9999px;" tabindex="-1" autocomplete="off">
<input type="hidden" name="_lt" value="<?= time() ?>">
<input type="hidden" name="_token" value="<?= e($_SESSION['form_token_raw'] ?? '') ?>">
<div class="form-group">
<label for="name">Name <span style="color: #ef4444;">*</span></label>
<input type="text" id="name" name="name" required maxlength="100"
placeholder="John Doe" value="<?= e(get_contact_data('name')) ?>">
<?php if ($error = get_contact_error('name')): ?>
<small style="color: #ef4444;"><?= e($error) ?></small>
<?php endif; ?>
</div>
<div class="form-group">
<label for="email">Email <span style="color: #ef4444;">*</span></label>
<input type="email" id="email" name="email" required
placeholder="john@example.com" value="<?= e(get_contact_data('email')) ?>">
<?php if ($error = get_contact_error('email')): ?>
<small style="color: #ef4444;"><?= e($error) ?></small>
<?php endif; ?>
</div>
<div class="form-group">
<label for="message">Message <span style="color: #ef4444;">*</span></label>
<textarea id="message" name="message" rows="5" required maxlength="5000"
placeholder="Your message..."><?= e(get_contact_data('message')) ?></textarea>
<?php if ($error = get_contact_error('message')): ?>
<small style="color: #ef4444;"><?= e($error) ?></small>
<?php endif; ?>
<small style="color: var(--muted); font-size: 0.875rem; margin-top: 4px; display: block;">
Maximum 5000 characters
</small>
</div>
<div class="form-group">
<label>Security check <span style="color: #ef4444;">*</span></label>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;">
<img id="antibot-img"
src="/antibot.php?<?= time() ?>"
alt="ANTIBOT"
width="200" height="70"
style="border: 1px solid var(--border, #e2e8f0); border-radius: 6px; display: block; cursor: pointer;"
title="Click to refresh">
<button type="button"
onclick="document.getElementById('antibot-img').src='<?= BASE_URL ?>/antibot.php?' + Date.now()"
style="background: none; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.8rem; color: var(--muted);"
title="Refresh ANTIBOT">
↻ Refresh
</button>
</div>
<input type="text" id="antibot" name="antibot" required
maxlength="6" autocomplete="off" spellcheck="false"
placeholder="Enter the 6 characters shown above"
style="text-transform: uppercase; letter-spacing: 0.15em;">
<small style="color: var(--muted); font-size: 0.8rem; margin-top: 4px; display: block;">
Type the characters from the image (not case sensitive). Click the image to refresh.
</small>
<?php if ($error = get_contact_error('antibot')): ?>
<small style="color: #ef4444;"><?= e($error) ?></small>
<?php endif; ?>
</div>
<button type="submit" class="btn btn-primary">
Send Message
</button>
<p style="margin-top: 12px; font-size: 0.875rem; color: var(--muted);">
<span style="color: #ef4444;">*</span> Required fields
</p>
</form>
</div>
<script>
(function() {
var img = document.getElementById('antibot-img');
if (img) {
img.addEventListener('click', function() {
img.src = '<?= BASE_URL ?>/antibot.php?' + Date.now();
});
}
var input = document.getElementById('antibot');
if (input) {
input.addEventListener('input', function() {
this.value = this.value.toUpperCase();
});
}
})();
</script>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<h3>
<?php if (!empty($logo_image)): ?>
<img src="<?= e($logo_image) ?>" alt="<?= e($logo_text) ?>">
<?php endif; ?>
<?= e($logo_text) ?>
</h3>
<p><?= e($footer['brand_description'] ?? '') ?></p>
<?php if (!empty($footer['social_links'])): ?>
<div class="social-links">
<?php foreach ($footer['social_links'] as $social): ?>
<a href="<?= e($social['url'] ?? '#') ?>" aria-label="<?= e(ucfirst($social['platform'] ?? '')) ?>"><?= render_social_icon($social['platform'] ?? 'twitter') ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php if (!empty($footer['columns'])): ?>
<?php foreach ($footer['columns'] as $column): ?>
<div class="footer-column">
<h4><?= e($column['title'] ?? '') ?></h4>
<?php if (!empty($column['links'])): ?>
<ul>
<?php foreach ($column['links'] as $link): ?>
<li><a href="<?= e($link['url'] ?? '#') ?>"><?= e($link['label'] ?? '') ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="footer-bottom">
<div style="flex: 1;">
<?php if (!empty($footer['bottom_links'])): ?>
<div class="footer-legal">
<?php foreach ($footer['bottom_links'] as $link): ?>
<a href="<?= e($link['url'] ?? '#') ?>"><?= e($link['label'] ?? '') ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?= render_language_switcher() ?>
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle light/dark theme">
<svg class="theme-icon-sun" viewBox="0 0 24 24" style="display: none;">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
<svg class="theme-icon-moon" viewBox="0 0 24 24" style="display: block;">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
</button>
</div>
</div>
</footer>
<script>
const themeToggle = document.querySelector('.theme-toggle');
const sunIcon = document.querySelector('.theme-icon-sun');
const moonIcon = document.querySelector('.theme-icon-moon');
const html = document.documentElement;
function initTheme() {
let theme = localStorage.getItem('theme');
if (!theme) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
theme = prefersDark ? 'dark' : 'light';
}
setTheme(theme);
}
function setTheme(theme) {
if (theme === 'light') {
html.setAttribute('data-theme', 'light');
sunIcon.style.display = 'block';
moonIcon.style.display = 'none';
localStorage.setItem('theme', 'light');
} else {
html.removeAttribute('data-theme');
sunIcon.style.display = 'none';
moonIcon.style.display = 'block';
localStorage.setItem('theme', 'dark');
}
}
function toggleTheme() {
const currentTheme = html.getAttribute('data-theme') || 'dark';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
}
if (themeToggle) {
themeToggle.addEventListener('click', toggleTheme);
}
initTheme();
document.querySelectorAll('.mobile-nav a').forEach(link => {
link.addEventListener('click', () => {
document.querySelector('.mobile-nav').classList.remove('active');
});
});
</script>
<?php if ($has_newsletter): ?>
<script src="/newsletter/newsletter-form.js"></script>
<?php endif; ?>
<?= flatly_custom_html('body_end') ?>
<?= flatly_custom_js() ?>
</body>
</html>