<?php
// Include database connection
require_once '../config/database.php';
// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Check if user is logged in and is admin
if (!isset($_SESSION['user_id']) || ($_SESSION['role'] !== 'admin' && $_SESSION['role'] !== 'director')) {
header('Location: login.php');
exit;
}
// Create theme_settings table if it doesn't exist
$create_table_query = "CREATE TABLE IF NOT EXISTS theme_settings (
id INT(11) NOT NULL AUTO_INCREMENT,
setting_key VARCHAR(50) NOT NULL,
setting_value TEXT,
PRIMARY KEY (id),
UNIQUE KEY (setting_key)
)";
mysqli_query($conn, $create_table_query);
$success_message = '';
$error_message = '';
// Get current theme settings
$settings_query = "SELECT * FROM theme_settings";
$settings_result = mysqli_query($conn, $settings_query);
$theme_settings = [];
if ($settings_result && mysqli_num_rows($settings_result) > 0) {
while ($row = mysqli_fetch_assoc($settings_result)) {
$theme_settings[$row['setting_key']] = $row['setting_value'];
}
}
// Set default values if settings not found
$theme_name = isset($theme_settings['theme_name']) ? $theme_settings['theme_name'] : 'default';
$header_bg_color = isset($theme_settings['header_bg_color']) ? $theme_settings['header_bg_color'] : '#ffffff';
$footer_bg_color = isset($theme_settings['footer_bg_color']) ? $theme_settings['footer_bg_color'] : '#f8f9fc';
$text_color = isset($theme_settings['text_color']) ? $theme_settings['text_color'] : '#333333';
$link_color = isset($theme_settings['link_color']) ? $theme_settings['link_color'] : '#4e73df';
$button_style = isset($theme_settings['button_style']) ? $theme_settings['button_style'] : 'rounded';
$font_family = isset($theme_settings['font_family']) ? $theme_settings['font_family'] : 'Roboto, sans-serif';
$custom_css = isset($theme_settings['custom_css']) ? $theme_settings['custom_css'] : '';
// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Get form data
$new_theme_name = mysqli_real_escape_string($conn, $_POST['theme_name']);
$new_header_bg_color = mysqli_real_escape_string($conn, $_POST['header_bg_color']);
$new_footer_bg_color = mysqli_real_escape_string($conn, $_POST['footer_bg_color']);
$new_text_color = mysqli_real_escape_string($conn, $_POST['text_color']);
$new_link_color = mysqli_real_escape_string($conn, $_POST['link_color']);
$new_button_style = mysqli_real_escape_string($conn, $_POST['button_style']);
$new_font_family = mysqli_real_escape_string($conn, $_POST['font_family']);
$new_custom_css = isset($_POST['custom_css']) ? mysqli_real_escape_string($conn, $_POST['custom_css']) : '';
// Update settings in database
$theme_settings_to_update = [
'theme_name' => $new_theme_name,
'header_bg_color' => $new_header_bg_color,
'footer_bg_color' => $new_footer_bg_color,
'text_color' => $new_text_color,
'link_color' => $new_link_color,
'button_style' => $new_button_style,
'font_family' => $new_font_family,
'custom_css' => $new_custom_css
];
foreach ($theme_settings_to_update as $key => $value) {
// Check if setting exists
$check_query = "SELECT * FROM theme_settings WHERE setting_key = '$key'";
$check_result = mysqli_query($conn, $check_query);
if (mysqli_num_rows($check_result) > 0) {
// Update existing setting
$update_query = "UPDATE theme_settings SET setting_value = '$value' WHERE setting_key = '$key'";
mysqli_query($conn, $update_query);
} else {
// Insert new setting
$insert_query = "INSERT INTO theme_settings (setting_key, setting_value) VALUES ('$key', '$value')";
mysqli_query($conn, $insert_query);
}
}
// Show success message
$success_message = 'Theme settings updated successfully.';
// Update local variables to reflect new settings
$theme_name = $new_theme_name;
$header_bg_color = $new_header_bg_color;
$footer_bg_color = $new_footer_bg_color;
$text_color = $new_text_color;
$link_color = $new_link_color;
$button_style = $new_button_style;
$font_family = $new_font_family;
$custom_css = $new_custom_css;
}
// Include header
include('includes/header.php');
?>
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0 text-gray-800">Theme Management</h1>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#previewSection">
<i class="fas fa-eye"></i> Preview Theme
</button>
</div>
<?php if ($success_message): ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?php echo $success_message; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>
<?php if ($error_message): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?php echo $error_message; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['theme_import_success'])): ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?php echo $_SESSION['theme_import_success']; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php unset($_SESSION['theme_import_success']); ?>
<?php endif; ?>
<?php if (isset($_SESSION['theme_import_error'])): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?php echo $_SESSION['theme_import_error']; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php unset($_SESSION['theme_import_error']); ?>
<?php endif; ?>
<!-- Theme Settings Form -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Theme Settings</h6>
</div>
<div class="card-body">
<form method="post" action="">
<div class="row">
<!-- Settings Navigation -->
<div class="col-md-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="general-tab" data-bs-toggle="pill" href="#general" role="tab" aria-controls="general" aria-selected="true">
<i class="fas fa-palette"></i> General
</a>
<a class="nav-link" id="colors-tab" data-bs-toggle="pill" href="#colors" role="tab" aria-controls="colors" aria-selected="false">
<i class="fas fa-fill-drip"></i> Colors
</a>
<a class="nav-link" id="typography-tab" data-bs-toggle="pill" href="#typography" role="tab" aria-controls="typography" aria-selected="false">
<i class="fas fa-font"></i> Typography
</a>
<a class="nav-link" id="elements-tab" data-bs-toggle="pill" href="#elements" role="tab" aria-controls="elements" aria-selected="false">
<i class="fas fa-cube"></i> UI Elements
</a>
<a class="nav-link" id="custom-tab" data-bs-toggle="pill" href="#custom" role="tab" aria-controls="custom" aria-selected="false">
<i class="fas fa-code"></i> Custom CSS
</a>
</div>
</div>
<!-- Settings Content -->
<div class="col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- General Settings -->
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<h5 class="border-bottom pb-2">General Theme Settings</h5>
<div class="form-group">
<label for="theme_name">Theme Name</label>
<input type="text" class="form-control" id="theme_name" name="theme_name" value="<?php echo htmlspecialchars($theme_name); ?>" required>
<small class="form-text text-muted">Give your theme a descriptive name</small>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-info-circle"></i> Changes to themes will affect the entire website appearance.
</div>
</div>
<!-- Colors Settings -->
<div class="tab-pane fade" id="colors" role="tabpanel" aria-labelledby="colors-tab">
<h5 class="border-bottom pb-2">Color Settings</h5>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="header_bg_color">Header Background Color</label>
<div class="input-group">
<input type="color" class="form-control form-control-color" id="header_bg_color" name="header_bg_color" value="<?php echo $header_bg_color; ?>">
<input type="text" class="form-control" value="<?php echo $header_bg_color; ?>" id="header_bg_color_text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="footer_bg_color">Footer Background Color</label>
<div class="input-group">
<input type="color" class="form-control form-control-color" id="footer_bg_color" name="footer_bg_color" value="<?php echo $footer_bg_color; ?>">
<input type="text" class="form-control" value="<?php echo $footer_bg_color; ?>" id="footer_bg_color_text">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="text_color">Text Color</label>
<div class="input-group">
<input type="color" class="form-control form-control-color" id="text_color" name="text_color" value="<?php echo $text_color; ?>">
<input type="text" class="form-control" value="<?php echo $text_color; ?>" id="text_color_text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="link_color">Link Color</label>
<div class="input-group">
<input type="color" class="form-control form-control-color" id="link_color" name="link_color" value="<?php echo $link_color; ?>">
<input type="text" class="form-control" value="<?php echo $link_color; ?>" id="link_color_text">
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Color Preview</h6>
</div>
<div class="card-body">
<div id="color-preview-header" style="background-color:<?php echo $header_bg_color; ?>; padding:15px; border-radius:5px;">
<h3 style="color:<?php echo $text_color; ?>">Header Preview</h3>
</div>
<div style="padding:15px;">
<p style="color:<?php echo $text_color; ?>">This is how your text will look with the selected color.</p>
<p>Click <a href="#" style="color:<?php echo $link_color; ?>">this link</a> to see how links will appear.</p>
</div>
<div id="color-preview-footer" style="background-color:<?php echo $footer_bg_color; ?>; padding:15px; border-radius:5px;">
<p style="color:<?php echo $text_color; ?>">Footer Preview</p>
</div>
</div>
</div>
</div>
<!-- Typography Settings -->
<div class="tab-pane fade" id="typography" role="tabpanel" aria-labelledby="typography-tab">
<h5 class="border-bottom pb-2">Typography Settings</h5>
<div class="form-group">
<label for="font_family">Font Family</label>
<select class="form-control" id="font_family" name="font_family">
<option value="Roboto, sans-serif" <?php if ($font_family == 'Roboto, sans-serif') echo 'selected'; ?>>Roboto</option>
<option value="'Open Sans', sans-serif" <?php if ($font_family == "'Open Sans', sans-serif") echo 'selected'; ?>>Open Sans</option>
<option value="'Lato', sans-serif" <?php if ($font_family == "'Lato', sans-serif") echo 'selected'; ?>>Lato</option>
<option value="'Montserrat', sans-serif" <?php if ($font_family == "'Montserrat', sans-serif") echo 'selected'; ?>>Montserrat</option>
<option value="'Poppins', sans-serif" <?php if ($font_family == "'Poppins', sans-serif") echo 'selected'; ?>>Poppins</option>
<option value="'Source Sans Pro', sans-serif" <?php if ($font_family == "'Source Sans Pro', sans-serif") echo 'selected'; ?>>Source Sans Pro</option>
</select>
</div>
<div class="card mt-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Typography Preview</h6>
</div>
<div class="card-body">
<div id="typography-preview" style="font-family: <?php echo $font_family; ?>">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph with the selected font family. The quick brown fox jumps over the lazy dog.</p>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
<!-- UI Elements Settings -->
<div class="tab-pane fade" id="elements" role="tabpanel" aria-labelledby="elements-tab">
<h5 class="border-bottom pb-2">UI Elements Settings</h5>
<div class="form-group">
<label>Button Style</label>
<div class="row mb-3">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<button class="btn btn-primary mb-2" style="border-radius: 0;">Button</button>
<div class="custom-control custom-radio">
<input type="radio" id="button_style_square" name="button_style" class="custom-control-input" value="square" <?php if ($button_style == 'square') echo 'checked'; ?>>
<label class="custom-control-label" for="button_style_square">Square</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<button class="btn btn-primary mb-2" style="border-radius: 4px;">Button</button>
<div class="custom-control custom-radio">
<input type="radio" id="button_style_rounded" name="button_style" class="custom-control-input" value="rounded" <?php if ($button_style == 'rounded') echo 'checked'; ?>>
<label class="custom-control-label" for="button_style_rounded">Rounded</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<button class="btn btn-primary mb-2" style="border-radius: 50px;">Button</button>
<div class="custom-control custom-radio">
<input type="radio" id="button_style_pill" name="button_style" class="custom-control-input" value="pill" <?php if ($button_style == 'pill') echo 'checked'; ?>>
<label class="custom-control-label" for="button_style_pill">Pill</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom CSS -->
<div class="tab-pane fade" id="custom" role="tabpanel" aria-labelledby="custom-tab">
<h5 class="border-bottom pb-2">Custom CSS</h5>
<div class="form-group">
<label for="custom_css">Custom CSS</label>
<textarea class="form-control" id="custom_css" name="custom_css" rows="10" style="font-family: monospace;"><?php echo htmlspecialchars($custom_css); ?></textarea>
<small class="form-text text-muted">Add your custom CSS overrides here. They will be applied to the entire website.</small>
</div>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i> Use custom CSS with caution as it may override existing styles.
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 text-end">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> Save Theme Settings
</button>
</div>
</form>
</div>
</div>
<!-- Export/Import Theme Section -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Export/Import Theme</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Export Theme</h5>
<p class="card-text">Export your current theme settings to a file that you can use as a backup or share with others.</p>
<form method="post" action="export_theme.php">
<button type="submit" name="export_theme" class="btn btn-primary">
<i class="fas fa-download"></i> Export Theme
</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Import Theme</h5>
<p class="card-text">Import a theme file to apply those settings to your website.</p>
<form method="post" action="import_theme.php" enctype="multipart/form-data">
<div class="mb-3">
<input type="file" class="form-control" id="theme_file" name="theme_file" accept=".json">
</div>
<button type="submit" name="import_theme" class="btn btn-primary">
<i class="fas fa-upload"></i> Import Theme
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Theme Templates Section -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Theme Templates</h6>
</div>
<div class="card-body">
<p>Choose a pre-designed theme template to quickly style your website:</p>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-header" style="background-color: #2c3e50; color: white;">
<h6 class="m-0 font-weight-bold">Modern Theme</h6>
</div>
<div class="card-body">
<div class="mb-3 text-center">
<span class="badge p-2" style="background-color: #2c3e50;">Header</span>
<span class="badge p-2" style="background-color: #34495e;">Footer</span>
<span class="badge p-2" style="background-color: #3498db;">Links</span>
</div>
<p class="card-text">A dark, modern theme with rounded elements and Montserrat font.</p>
<form method="post" action="import_theme.php" enctype="multipart/form-data">
<input type="hidden" name="template_file" value="modern.json">
<button type="submit" name="apply_template" class="btn btn-primary btn-sm w-100">
<i class="fas fa-brush"></i> Apply Template
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-header" style="background-color: #ffffff; color: #495057; border-bottom: 1px solid #e3e6f0;">
<h6 class="m-0 font-weight-bold">Light Theme</h6>
</div>
<div class="card-body">
<div class="mb-3 text-center">
<span class="badge p-2" style="background-color: #ffffff; color: #495057; border: 1px solid #dee2e6;">Header</span>
<span class="badge p-2" style="background-color: #f8f9fa; color: #495057; border: 1px solid #dee2e6;">Footer</span>
<span class="badge p-2" style="background-color: #6c63ff; color: white;">Links</span>
</div>
<p class="card-text">A clean, light theme with subtle shadows and Open Sans font.</p>
<form method="post" action="import_theme.php" enctype="multipart/form-data">
<input type="hidden" name="template_file" value="light.json">
<button type="submit" name="apply_template" class="btn btn-primary btn-sm w-100">
<i class="fas fa-brush"></i> Apply Template
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white">
<h6 class="m-0 font-weight-bold">Default Theme</h6>
</div>
<div class="card-body">
<div class="mb-3 text-center">
<span class="badge p-2" style="background-color: #ffffff; color: #495057; border: 1px solid #dee2e6;">Header</span>
<span class="badge p-2" style="background-color: #f8f9fc; color: #495057; border: 1px solid #dee2e6;">Footer</span>
<span class="badge p-2" style="background-color: #4e73df; color: white;">Links</span>
</div>
<p class="card-text">The default website theme with blue color scheme and Poppins font.</p>
<form method="post" action="import_theme.php">
<input type="hidden" name="reset_to_default" value="1">
<button type="submit" name="apply_template" class="btn btn-primary btn-sm w-100">
<i class="fas fa-undo"></i> Reset to Default
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Preview Section (Hidden by default) -->
<div class="collapse mb-4" id="previewSection">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Theme Preview</h6>
</div>
<div class="card-body">
<div id="preview-container" style="border: 1px solid #ddd; overflow: auto; position: relative;">
<!-- Header -->
<div id="preview-header" style="background-color: <?php echo $header_bg_color; ?>; padding: 15px; color: <?php echo $text_color; ?>;">
<h2 style="font-family: <?php echo $font_family; ?>;">Site Header</h2>
<div>
<a href="#" style="color: <?php echo $link_color; ?>; margin-right: 15px;">Home</a>
<a href="#" style="color: <?php echo $link_color; ?>; margin-right: 15px;">About</a>
<a href="#" style="color: <?php echo $link_color; ?>; margin-right: 15px;">Services</a>
<a href="#" style="color: <?php echo $link_color; ?>; margin-right: 15px;">Contact</a>
</div>
</div>
<!-- Content -->
<div style="padding: 20px; font-family: <?php echo $font_family; ?>; color: <?php echo $text_color; ?>;">
<h1>Page Title</h1>
<p>This is sample content to preview your theme settings. The quick brown fox jumps over the lazy dog.</p>
<div class="row mt-4">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Sample Card</h5>
<p class="card-text">This is a sample card to preview your theme.</p>
<button class="btn btn-primary" id="preview-button" style="border-radius: <?php echo $button_style == 'square' ? '0' : ($button_style == 'rounded' ? '4px' : '50px'); ?>;">
Button
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This is another sample card for theme preview.</p>
<a href="#" style="color: <?php echo $link_color; ?>;">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="preview-footer" style="background-color: <?php echo $footer_bg_color; ?>; padding: 15px; color: <?php echo $text_color; ?>; font-family: <?php echo $font_family; ?>;">
<p class="mb-0">© 2023 Your Website. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Color picker sync with text inputs
const colorInputs = [
{ color: 'header_bg_color', text: 'header_bg_color_text' },
{ color: 'footer_bg_color', text: 'footer_bg_color_text' },
{ color: 'text_color', text: 'text_color_text' },
{ color: 'link_color', text: 'link_color_text' }
];
colorInputs.forEach(pair => {
const colorInput = document.getElementById(pair.color);
const textInput = document.getElementById(pair.text);
// Sync color input to text input
colorInput.addEventListener('input', function() {
textInput.value = this.value;
updatePreview();
});
// Sync text input to color input
textInput.addEventListener('input', function() {
colorInput.value = this.value;
updatePreview();
});
});
// Font family preview
const fontSelect = document.getElementById('font_family');
fontSelect.addEventListener('change', function() {
document.getElementById('typography-preview').style.fontFamily = this.value;
updatePreview();
});
// Button style preview
const buttonStyleInputs = document.querySelectorAll('input[name="button_style"]');
buttonStyleInputs.forEach(input => {
input.addEventListener('change', function() {
updatePreview();
});
});
// Update preview function
function updatePreview() {
// Update header
const headerBgColor = document.getElementById('header_bg_color').value;
const footerBgColor = document.getElementById('footer_bg_color').value;
const textColor = document.getElementById('text_color').value;
const linkColor = document.getElementById('link_color').value;
const fontFamily = document.getElementById('font_family').value;
// Button style
let buttonRadius = '4px';
document.querySelectorAll('input[name="button_style"]').forEach(input => {
if (input.checked) {
if (input.value === 'square') buttonRadius = '0';
else if (input.value === 'pill') buttonRadius = '50px';
else buttonRadius = '4px';
}
});
// Apply styles to preview elements
document.getElementById('preview-header').style.backgroundColor = headerBgColor;
document.getElementById('preview-header').style.color = textColor;
document.getElementById('preview-footer').style.backgroundColor = footerBgColor;
document.getElementById('preview-footer').style.color = textColor;
document.getElementById('preview-button').style.borderRadius = buttonRadius;
// Apply to color preview elements
document.getElementById('color-preview-header').style.backgroundColor = headerBgColor;
document.getElementById('color-preview-footer').style.backgroundColor = footerBgColor;
// Update all text and link colors in preview
const previewLinks = document.querySelectorAll('#preview-container a');
previewLinks.forEach(link => {
link.style.color = linkColor;
});
// Apply font family
document.querySelectorAll('#preview-container *').forEach(el => {
el.style.fontFamily = fontFamily;
});
}
});
</script>
<?php
// Include footer
include('includes/footer.php');
?>
