Initial commit: MSPE website - full site with admin panel, API, and public pages
This commit is contained in:
Krikorios
Executable
+910
@@ -0,0 +1,910 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
<title>Site Settings - MSPE Admin</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/admin/css/admin.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="admin-wrapper">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="/admin/dashboard.html" class="sidebar-logo">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>MSPE</span>
|
||||
</a>
|
||||
<button class="sidebar-toggle" id="sidebar-toggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section">
|
||||
<span class="nav-section-title">Main</span>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/admin/dashboard.html" class="nav-link">
|
||||
<i class="fas fa-th-large"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<span class="nav-section-title">Content</span>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/admin/pages.html" class="nav-link">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<span>Pages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/services.html" class="nav-link">
|
||||
<i class="fas fa-concierge-bell"></i>
|
||||
<span>Services</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/portfolio.html" class="nav-link">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<span>Portfolio</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/news.html" class="nav-link">
|
||||
<i class="fas fa-newspaper"></i>
|
||||
<span>News & Events</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/testimonials.html" class="nav-link">
|
||||
<i class="fas fa-quote-right"></i>
|
||||
<span>Testimonials</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/team.html" class="nav-link">
|
||||
<i class="fas fa-users"></i>
|
||||
<span>Team</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<span class="nav-section-title">Media</span>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/admin/media.html" class="nav-link">
|
||||
<i class="fas fa-images"></i>
|
||||
<span>Media Library</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<span class="nav-section-title">Inquiries</span>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/admin/messages.html" class="nav-link">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<span>Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/subscribers.html" class="nav-link">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span>Subscribers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/bookings.html" class="nav-link">
|
||||
<i class="fas fa-calendar-check"></i>
|
||||
<span>Bookings</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<span class="nav-section-title">Settings</span>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item active">
|
||||
<a href="/admin/settings.html" class="nav-link">
|
||||
<i class="fas fa-cog"></i>
|
||||
<span>Site Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/users.html" class="nav-link">
|
||||
<i class="fas fa-user-shield"></i>
|
||||
<span>Admin Users</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<a href="/index.html" class="view-site-btn" target="_blank">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
<span>View Website</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<button class="mobile-toggle" id="mobile-toggle">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<h1 class="page-title">Site Settings</h1>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="header-user">
|
||||
<div class="user-avatar">
|
||||
<img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="Admin">
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">Admin</span>
|
||||
<span class="user-role">Administrator</span>
|
||||
</div>
|
||||
<div class="user-dropdown">
|
||||
<button class="dropdown-toggle">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="/admin/settings.html"><i class="fas fa-cog"></i> Settings</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Settings Tabs -->
|
||||
<div class="settings-tabs">
|
||||
<button class="tab-btn active" data-tab="general">
|
||||
<i class="fas fa-globe"></i> General
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="contact">
|
||||
<i class="fas fa-address-card"></i> Contact Info
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="social">
|
||||
<i class="fas fa-share-alt"></i> Social Media
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="seo">
|
||||
<i class="fas fa-search"></i> SEO
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="appearance">
|
||||
<i class="fas fa-palette"></i> Appearance
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="email-auth">
|
||||
<i class="fas fa-envelope-open-text"></i> Email & Auth
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="integrations">
|
||||
<i class="fas fa-plug"></i> Integrations
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- General Settings -->
|
||||
<div class="tab-content active" id="general">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>General Settings</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Site Name</label>
|
||||
<input type="text" class="form-control" value="MSPE" id="site-name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Site Tagline</label>
|
||||
<input type="text" class="form-control" value="Architects of Digital Resilience" id="site-tagline">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Site Description</label>
|
||||
<textarea class="form-control" rows="3" id="site-description">MSPE transforms complexity into competitive advantage through innovative technology solutions and uncompromising security.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Site Logo</label>
|
||||
<div class="logo-upload">
|
||||
<img src="/images/logo/logo.png" alt="Logo" class="current-logo">
|
||||
<input type="file" id="logo-input" accept="image/*" style="display:none">
|
||||
<button class="btn btn-outline btn-sm" onclick="document.getElementById('logo-input').click()">Change Logo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Favicon</label>
|
||||
<div class="logo-upload">
|
||||
<img src="/images/logo/logo.png" alt="Favicon" class="current-favicon" onerror="this.style.display='none'">
|
||||
<input type="file" id="favicon-input" accept="image/*,.ico" style="display:none">
|
||||
<button class="btn btn-outline btn-sm" onclick="document.getElementById('favicon-input').click()">Upload Favicon</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Timezone</label>
|
||||
<select class="form-control" id="timezone">
|
||||
<option value="UTC">UTC</option>
|
||||
<option value="America/New_York">Eastern Time (US)</option>
|
||||
<option value="America/Chicago">Central Time (US)</option>
|
||||
<option value="America/Denver">Mountain Time (US)</option>
|
||||
<option value="America/Los_Angeles">Pacific Time (US)</option>
|
||||
<option value="Europe/London">London</option>
|
||||
<option value="Europe/Paris">Paris</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="tab-content" id="contact">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Contact Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Email Address</label>
|
||||
<input type="email" class="form-control" value="info@mspe.pro" id="contact-email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phone Number</label>
|
||||
<input type="tel" class="form-control" value="" id="contact-phone" placeholder="+1 (555) 000-0000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Address</label>
|
||||
<textarea class="form-control" rows="2" id="contact-address" placeholder="Enter your business address"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Business Hours</label>
|
||||
<input type="text" class="form-control" value="Mon - Fri: 9AM - 6PM" id="business-hours">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Support Hours</label>
|
||||
<input type="text" class="form-control" value="Mon - Fri: 9AM - 6PM (On-call by arrangement)" id="support-hours">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Google Maps Embed URL</label>
|
||||
<input type="url" class="form-control" id="maps-url" placeholder="https://www.google.com/maps/embed?...">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Media -->
|
||||
<div class="tab-content" id="social">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Social Media Links</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-facebook"></i> Facebook</label>
|
||||
<input type="url" class="form-control" id="social-facebook" placeholder="https://facebook.com/yourpage">
|
||||
</div>
|
||||
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-linkedin"></i> LinkedIn</label>
|
||||
<input type="url" class="form-control" id="social-linkedin" placeholder="https://linkedin.com/company/yourcompany">
|
||||
</div>
|
||||
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-twitter"></i> Twitter / X</label>
|
||||
<input type="url" class="form-control" id="social-twitter" placeholder="https://twitter.com/yourhandle">
|
||||
</div>
|
||||
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-instagram"></i> Instagram</label>
|
||||
<input type="url" class="form-control" id="social-instagram" placeholder="https://instagram.com/yourprofile">
|
||||
</div>
|
||||
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-youtube"></i> YouTube</label>
|
||||
<input type="url" class="form-control" id="social-youtube" placeholder="https://youtube.com/@yourchannel">
|
||||
</div>
|
||||
|
||||
<div class="form-group social-input">
|
||||
<label><i class="fab fa-github"></i> GitHub</label>
|
||||
<input type="url" class="form-control" id="social-github" placeholder="https://github.com/yourorg">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEO Settings -->
|
||||
<div class="tab-content" id="seo">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>SEO Settings</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Default Meta Title</label>
|
||||
<input type="text" class="form-control" value="MSPE - Architects of Digital Resilience" id="meta-title">
|
||||
<span class="form-hint">Recommended: 50-60 characters</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Default Meta Description</label>
|
||||
<textarea class="form-control" rows="3" id="meta-description">MSPE delivers enterprise-grade IT support, cybersecurity, and cloud solutions. Transform complexity into competitive advantage.</textarea>
|
||||
<span class="form-hint">Recommended: 150-160 characters</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Meta Keywords</label>
|
||||
<input type="text" class="form-control" id="meta-keywords" placeholder="IT support, cybersecurity, cloud services, managed IT">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Google Analytics ID</label>
|
||||
<input type="text" class="form-control" id="ga-id" placeholder="G-XXXXXXXXXX">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Google Tag Manager ID</label>
|
||||
<input type="text" class="form-control" id="gtm-id" placeholder="GTM-XXXXXXX">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Robots.txt Content</label>
|
||||
<textarea class="form-control code-textarea" rows="5" id="robots-txt">User-agent: *
|
||||
Allow: /
|
||||
Sitemap: https://mspe.pro/sitemap.xml</textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Appearance -->
|
||||
<div class="tab-content" id="appearance">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Theme & Colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Primary Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" value="#0ea5e9" id="primary-color">
|
||||
<input type="text" class="form-control" value="#0ea5e9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Secondary Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" value="#0d9488" id="secondary-color">
|
||||
<input type="text" class="form-control" value="#0d9488">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Accent Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" value="#f59e0b" id="accent-color">
|
||||
<input type="text" class="form-control" value="#f59e0b">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Dark Background</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" value="#0a1628" id="dark-bg-color">
|
||||
<input type="text" class="form-control" value="#0a1628">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Font Family</label>
|
||||
<select class="form-control" id="font-family">
|
||||
<option value="DM Sans">DM Sans</option>
|
||||
<option value="Inter">Inter</option>
|
||||
<option value="Poppins">Poppins</option>
|
||||
<option value="Roboto">Roboto</option>
|
||||
<option value="Open Sans">Open Sans</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email & Auth -->
|
||||
<div class="tab-content" id="email-auth">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Email Delivery & Password Reset</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Email Transport</label>
|
||||
<select class="form-control" id="email-transport">
|
||||
<option value="mail">PHP mail()</option>
|
||||
<option value="smtp">SMTP (recommended)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Admin Notification Email</label>
|
||||
<input type="email" class="form-control" id="admin-email" placeholder="alerts@yourdomain.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Sender Name</label>
|
||||
<input type="text" class="form-control" id="smtp-from-name" placeholder="MSPE">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Sender Email</label>
|
||||
<input type="email" class="form-control" id="smtp-from-email" placeholder="no-reply@yourdomain.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>SMTP Host</label>
|
||||
<input type="text" class="form-control" id="smtp-host" placeholder="smtp.hostinger.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>SMTP Port</label>
|
||||
<input type="number" class="form-control" id="smtp-port" placeholder="465 or 587">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Encryption</label>
|
||||
<select class="form-control" id="smtp-encryption">
|
||||
<option value="tls">TLS</option>
|
||||
<option value="ssl">SSL</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>SMTP Username</label>
|
||||
<input type="text" class="form-control" id="smtp-username" placeholder="mailbox@yourdomain.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>SMTP Password</label>
|
||||
<input type="password" class="form-control" id="smtp-password" placeholder="Mailbox password">
|
||||
<span class="form-hint">Stored in site settings. Use a dedicated mailbox/app password.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password Reset Page URL</label>
|
||||
<input type="url" class="form-control" id="password-reset-url" placeholder="https://yourdomain.com/admin/reset-password.html">
|
||||
<span class="form-hint">Reset tokens will be appended as ?token=...</span>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Test Recipient</label>
|
||||
<input type="email" class="form-control" id="test-email-to" placeholder="you@yourdomain.com">
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;align-items:flex-end;">
|
||||
<button class="btn btn-outline" id="send-test-email-btn" type="button" style="width:100%;">
|
||||
<i class="fas fa-paper-plane"></i> Send Test Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integrations -->
|
||||
<div class="tab-content" id="integrations">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Third-Party Integrations</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="integration-item">
|
||||
<div class="integration-info">
|
||||
<i class="fab fa-google" style="color: #4285f4;"></i>
|
||||
<div>
|
||||
<h4>Google reCAPTCHA</h4>
|
||||
<p>Protect forms from spam</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="integration-recaptcha">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="integration-info">
|
||||
<i class="fab fa-mailchimp" style="color: #ffe01b;"></i>
|
||||
<div>
|
||||
<h4>Mailchimp</h4>
|
||||
<p>Email marketing integration</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="integration-mailchimp">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="integration-info">
|
||||
<i class="fab fa-slack" style="color: #4a154b;"></i>
|
||||
<div>
|
||||
<h4>Slack Notifications</h4>
|
||||
<p>Get notified of new messages</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="integration-slack">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="integration-item">
|
||||
<div class="integration-info">
|
||||
<i class="fas fa-calendar-alt" style="color: #0ea5e9;"></i>
|
||||
<div>
|
||||
<h4>Calendly</h4>
|
||||
<p>Booking integration</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="integration-calendly">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="integration-settings" style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray-200);">
|
||||
<h4>Calendly Settings</h4>
|
||||
<div class="form-group">
|
||||
<label>Calendly URL</label>
|
||||
<input type="url" class="form-control" id="calendly-url" placeholder="https://calendly.com/your-link">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="button" style="margin-top: 1rem;">
|
||||
<i class="fas fa-save"></i> Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/admin/js/admin.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadSettings();
|
||||
setupTabs();
|
||||
setupColorPickers();
|
||||
setupSaveButtons();
|
||||
setupEmailTest();
|
||||
});
|
||||
|
||||
function setupTabs() {
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const tabId = this.dataset.tab;
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupColorPickers() {
|
||||
document.querySelectorAll('.color-picker input[type="color"]').forEach(picker => {
|
||||
picker.addEventListener('input', function() {
|
||||
this.nextElementSibling.value = this.value;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.color-picker input[type="text"]').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
this.previousElementSibling.value = this.value;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupSaveButtons() {
|
||||
document.querySelectorAll('.tab-content .btn-primary[type="button"]').forEach(btn => {
|
||||
if (btn.id !== 'send-test-email-btn') {
|
||||
btn.addEventListener('click', saveSettings);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupEmailTest() {
|
||||
const btn = document.getElementById('send-test-email-btn');
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener('click', async function() {
|
||||
const to = document.getElementById('test-email-to').value || document.getElementById('admin-email').value || document.getElementById('contact-email').value;
|
||||
if (!to) {
|
||||
MSPE.showNotification('Please enter a test recipient email', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const original = btn.innerHTML;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
|
||||
|
||||
try {
|
||||
const response = await MSPE.API.post('email-test.php', { to });
|
||||
if (response.success) {
|
||||
MSPE.showNotification(response.message || 'Test email sent', 'success');
|
||||
} else {
|
||||
MSPE.showNotification(response.message || 'Test email failed', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
MSPE.showNotification('Failed to send test email', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = original;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const response = await MSPE.API.get('settings.php');
|
||||
if (response && response.success) {
|
||||
const settings = response.data;
|
||||
|
||||
// General
|
||||
setVal('site-name', settings.site_name);
|
||||
setVal('site-tagline', settings.site_tagline);
|
||||
setVal('site-description', settings.site_description);
|
||||
setVal('timezone', settings.timezone);
|
||||
|
||||
// Contact
|
||||
setVal('contact-email', settings.contact_email);
|
||||
setVal('contact-phone', settings.contact_phone);
|
||||
setVal('contact-address', settings.contact_address);
|
||||
setVal('business-hours', settings.business_hours);
|
||||
setVal('support-hours', settings.support_hours);
|
||||
setVal('maps-url', settings.maps_url);
|
||||
|
||||
// Email & Auth
|
||||
setVal('email-transport', settings.email_transport || 'mail');
|
||||
setVal('admin-email', settings.admin_email || settings.contact_email);
|
||||
setVal('smtp-from-name', settings.smtp_from_name || settings.site_name || 'MSPE');
|
||||
setVal('smtp-from-email', settings.smtp_from_email || settings.contact_email);
|
||||
setVal('smtp-host', settings.smtp_host);
|
||||
setVal('smtp-port', settings.smtp_port);
|
||||
setVal('smtp-encryption', settings.smtp_encryption || 'tls');
|
||||
setVal('smtp-username', settings.smtp_username);
|
||||
setVal('smtp-password', settings.smtp_password);
|
||||
setVal('password-reset-url', settings.password_reset_url);
|
||||
setVal('test-email-to', settings.admin_email || settings.contact_email);
|
||||
|
||||
// SEO
|
||||
setVal('meta-title', settings.meta_title);
|
||||
setVal('meta-description', settings.meta_description);
|
||||
setVal('meta-keywords', settings.meta_keywords);
|
||||
setVal('ga-id', settings.ga_id);
|
||||
setVal('gtm-id', settings.gtm_id);
|
||||
setVal('robots-txt', settings.robots_txt);
|
||||
|
||||
// Appearance
|
||||
setVal('primary-color', settings.primary_color);
|
||||
setVal('secondary-color', settings.secondary_color);
|
||||
setVal('accent-color', settings.accent_color);
|
||||
setVal('dark-bg-color', settings.dark_bg_color);
|
||||
setVal('font-family', settings.font_family);
|
||||
|
||||
// Social
|
||||
setVal('social-facebook', settings.social_facebook);
|
||||
setVal('social-linkedin', settings.social_linkedin);
|
||||
setVal('social-twitter', settings.social_twitter);
|
||||
setVal('social-instagram', settings.social_instagram);
|
||||
setVal('social-youtube', settings.social_youtube);
|
||||
setVal('social-github', settings.social_github);
|
||||
|
||||
// Integrations
|
||||
setCheck('integration-recaptcha', settings.integration_recaptcha);
|
||||
setCheck('integration-mailchimp', settings.integration_mailchimp);
|
||||
setCheck('integration-slack', settings.integration_slack);
|
||||
setCheck('integration-calendly', settings.integration_calendly);
|
||||
setVal('calendly-url', settings.calendly_url);
|
||||
|
||||
// Update color pickers text inputs
|
||||
updateColorInputs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading settings:', error);
|
||||
MSPE.showNotification('Failed to load settings', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function setVal(id, val) {
|
||||
if (val !== undefined && val !== null && document.getElementById(id)) {
|
||||
document.getElementById(id).value = val;
|
||||
}
|
||||
}
|
||||
|
||||
function setCheck(id, val) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.checked = (val === true || val === '1' || val === 1);
|
||||
}
|
||||
|
||||
function updateColorInputs() {
|
||||
document.querySelectorAll('.color-picker input[type="color"]').forEach(picker => {
|
||||
if (picker.nextElementSibling) {
|
||||
picker.nextElementSibling.value = picker.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function saveSettings() {
|
||||
const settings = {
|
||||
// General
|
||||
site_name: document.getElementById('site-name').value,
|
||||
site_tagline: document.getElementById('site-tagline').value,
|
||||
site_description: document.getElementById('site-description').value,
|
||||
timezone: document.getElementById('timezone').value,
|
||||
|
||||
// Contact
|
||||
contact_email: document.getElementById('contact-email').value,
|
||||
contact_phone: document.getElementById('contact-phone').value,
|
||||
contact_address: document.getElementById('contact-address').value,
|
||||
business_hours: document.getElementById('business-hours').value,
|
||||
support_hours: document.getElementById('support-hours').value,
|
||||
maps_url: document.getElementById('maps-url').value,
|
||||
|
||||
// Email & Auth
|
||||
email_transport: document.getElementById('email-transport').value,
|
||||
admin_email: document.getElementById('admin-email').value,
|
||||
smtp_from_name: document.getElementById('smtp-from-name').value,
|
||||
smtp_from_email: document.getElementById('smtp-from-email').value,
|
||||
smtp_host: document.getElementById('smtp-host').value,
|
||||
smtp_port: document.getElementById('smtp-port').value,
|
||||
smtp_encryption: document.getElementById('smtp-encryption').value,
|
||||
smtp_username: document.getElementById('smtp-username').value,
|
||||
smtp_password: document.getElementById('smtp-password').value,
|
||||
password_reset_url: document.getElementById('password-reset-url').value,
|
||||
|
||||
// SEO
|
||||
meta_title: document.getElementById('meta-title').value,
|
||||
meta_description: document.getElementById('meta-description').value,
|
||||
meta_keywords: document.getElementById('meta-keywords').value,
|
||||
ga_id: document.getElementById('ga-id').value,
|
||||
gtm_id: document.getElementById('gtm-id').value,
|
||||
robots_txt: document.getElementById('robots-txt').value,
|
||||
|
||||
// Appearance
|
||||
primary_color: document.getElementById('primary-color').value,
|
||||
secondary_color: document.getElementById('secondary-color').value,
|
||||
accent_color: document.getElementById('accent-color').value,
|
||||
dark_bg_color: document.getElementById('dark-bg-color').value,
|
||||
font_family: document.getElementById('font-family').value,
|
||||
|
||||
// Social
|
||||
social_facebook: document.getElementById('social-facebook').value,
|
||||
social_linkedin: document.getElementById('social-linkedin').value,
|
||||
social_twitter: document.getElementById('social-twitter').value,
|
||||
social_instagram: document.getElementById('social-instagram').value,
|
||||
social_youtube: document.getElementById('social-youtube').value,
|
||||
social_github: document.getElementById('social-github').value,
|
||||
|
||||
// Integrations
|
||||
integration_recaptcha: document.getElementById('integration-recaptcha').checked ? 1 : 0,
|
||||
integration_mailchimp: document.getElementById('integration-mailchimp').checked ? 1 : 0,
|
||||
integration_slack: document.getElementById('integration-slack').checked ? 1 : 0,
|
||||
integration_calendly: document.getElementById('integration-calendly').checked ? 1 : 0,
|
||||
calendly_url: document.getElementById('calendly-url').value
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await MSPE.API.post('settings.php', settings);
|
||||
if (response.success) {
|
||||
MSPE.showNotification('Settings saved successfully', 'success');
|
||||
} else {
|
||||
MSPE.showNotification('Error saving settings', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
MSPE.showNotification('Error saving settings', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Logo & Favicon upload handlers
|
||||
document.getElementById('logo-input')?.addEventListener('change', async function() {
|
||||
if (!this.files[0]) return;
|
||||
const formData = new FormData();
|
||||
formData.append('files[]', this.files[0]);
|
||||
formData.append('folder', 'logo');
|
||||
try {
|
||||
const result = await MSPE.API.upload('media.php', formData);
|
||||
if (result && result.success) {
|
||||
document.querySelector('.current-logo').src = '/' + (result.data?.[0]?.path || 'images/logo/logo.png');
|
||||
MSPE.showNotification('Logo uploaded successfully', 'success');
|
||||
} else {
|
||||
MSPE.showNotification(result?.message || 'Logo upload failed', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
MSPE.showNotification('Error uploading logo', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('favicon-input')?.addEventListener('change', async function() {
|
||||
if (!this.files[0]) return;
|
||||
const formData = new FormData();
|
||||
formData.append('files[]', this.files[0]);
|
||||
formData.append('folder', 'logo');
|
||||
try {
|
||||
const result = await MSPE.API.upload('media.php', formData);
|
||||
if (result && result.success) {
|
||||
document.querySelector('.current-favicon').src = '/' + (result.data?.[0]?.path || 'images/logo/logo.png');
|
||||
document.querySelector('.current-favicon').style.display = '';
|
||||
MSPE.showNotification('Favicon uploaded successfully', 'success');
|
||||
} else {
|
||||
MSPE.showNotification(result?.message || 'Favicon upload failed', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
MSPE.showNotification('Error uploading favicon', 'error');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user