initial
This commit is contained in:
Flatlogic Bot
parent
602648171f
commit
019834cdd5
@ -1,352 +1,136 @@
|
||||
:root {
|
||||
--primary-color: #d4af37;
|
||||
--secondary-color: #1a1a1a;
|
||||
--text-color: #333;
|
||||
--bg-color: #f8f9fa;
|
||||
--sidebar-width: 280px;
|
||||
--primary-color: #0f172a;
|
||||
--secondary-color: #3b82f6;
|
||||
--accent-color: #f59e0b;
|
||||
--bg-color: #f8fafc;
|
||||
--surface-color: #ffffff;
|
||||
--text-main: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
overflow-x: hidden;
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Watermark */
|
||||
.watermark-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.04;
|
||||
overflow: hidden;
|
||||
.navbar {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.watermark-text {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
transform: rotate(-30deg);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.watermark-item {
|
||||
padding: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sidebar Layout */
|
||||
.wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--secondary-color);
|
||||
color: #fff;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 1050;
|
||||
box-shadow: 4px 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
margin-left: var(--sidebar-width);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Sidebar toggled state (desktop) */
|
||||
#sidebar.collapsed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
#content.expanded {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 30px 25px;
|
||||
background: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-color);
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#sidebar ul.components {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#sidebar ul li a {
|
||||
padding: 15px 25px;
|
||||
display: block;
|
||||
color: #adb5bd;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover, #sidebar ul li.active > a {
|
||||
color: #fff;
|
||||
background: rgba(212, 175, 55, 0.15);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
#sidebar ul li a i {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* Mobile Nav Bar */
|
||||
.mobile-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: var(--secondary-color);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
z-index: 1040;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.mobile-logo-text {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
#sidebarCollapseMobile {
|
||||
.navbar-brand {
|
||||
font-weight: 800;
|
||||
color: var(--primary-color) !important;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1045;
|
||||
display: none;
|
||||
backdrop-filter: blur(2px);
|
||||
.hero-section {
|
||||
padding: 120px 0 80px;
|
||||
background: radial-gradient(circle at top right, #e0f2fe 0%, transparent 40%);
|
||||
}
|
||||
|
||||
/* Floating TG Button */
|
||||
.tg-float {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 90px;
|
||||
z-index: 1001;
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--secondary-color);
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 800;
|
||||
font-size: 2.25rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tg-btn {
|
||||
.service-card {
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #0088cc;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
background: #eff6ff;
|
||||
color: var(--secondary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
text-decoration: none;
|
||||
animation: pulse-tg 2s infinite;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tg-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tg-text {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
margin-top: 5px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes pulse-tg {
|
||||
0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7); }
|
||||
70% { box-shadow: 0 0 0 12px rgba(0, 136, 204, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
|
||||
}
|
||||
|
||||
/* Back to Top */
|
||||
#back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: none;
|
||||
z-index: 1001;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Content Cards */
|
||||
.content-card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-weight: 700;
|
||||
padding: 15px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.step-badge {
|
||||
.contact-section {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
color: white;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
/* Example Sections */
|
||||
.example-box {
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.95rem;
|
||||
.contact-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 3rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.correct-box {
|
||||
background-color: #f1f8f1;
|
||||
border-left: 5px solid #28a745;
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.wrong-box {
|
||||
background-color: #fff5f5;
|
||||
border-left: 5px solid #dc3545;
|
||||
.form-control:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: var(--secondary-color);
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.explanation-box strong {
|
||||
color: #666;
|
||||
font-size: 0.85rem;
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 991px) {
|
||||
#sidebar {
|
||||
transform: translateX(-100%);
|
||||
z-index: 2000;
|
||||
}
|
||||
#sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
#content {
|
||||
margin-left: 0;
|
||||
padding: 85px 12px 20px 12px;
|
||||
}
|
||||
.mobile-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.section-title-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.2rem !important;
|
||||
font-weight: 800;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.watermark-item {
|
||||
padding: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Stack columns on mobile */
|
||||
.row.g-3 > .col-md-6 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Hover Effects */
|
||||
@media (min-width: 992px) {
|
||||
.content-card {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.content-card:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
@ -1,84 +1,56 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const content = document.getElementById('content');
|
||||
const sidebarCollapse = document.getElementById('sidebarCollapse');
|
||||
const sidebarCollapseMobile = document.getElementById('sidebarCollapseMobile');
|
||||
const overlay = document.getElementById('overlay');
|
||||
const backToTop = document.getElementById('back-to-top');
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const leadForm = document.getElementById('leadForm');
|
||||
const successToast = document.getElementById('successToast');
|
||||
const toast = new bootstrap.Toast(successToast);
|
||||
|
||||
// Sidebar Toggle for Mobile (Header button)
|
||||
if (sidebarCollapseMobile) {
|
||||
sidebarCollapseMobile.addEventListener('click', function () {
|
||||
toggleMobileSidebar();
|
||||
});
|
||||
}
|
||||
if (leadForm) {
|
||||
leadForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Sidebar Toggle for Desktop (Content button)
|
||||
if (sidebarCollapse) {
|
||||
sidebarCollapse.addEventListener('click', function () {
|
||||
if (window.innerWidth >= 992) {
|
||||
sidebar.classList.toggle('collapsed');
|
||||
content.classList.toggle('expanded');
|
||||
// Change icon
|
||||
const icon = sidebarCollapse.querySelector('i');
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
icon.className = 'bi bi-text-indent-right';
|
||||
const submitBtn = leadForm.querySelector('button[type="submit"]');
|
||||
const originalBtnText = submitBtn.innerHTML;
|
||||
|
||||
// UI State: Loading
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
|
||||
|
||||
const formData = new FormData(leadForm);
|
||||
|
||||
fetch('save_lead.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
toast.show();
|
||||
leadForm.reset();
|
||||
} else {
|
||||
icon.className = 'bi bi-text-indent-left';
|
||||
alert('Error: ' + (data.error || 'Something went wrong'));
|
||||
}
|
||||
} else {
|
||||
toggleMobileSidebar();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleMobileSidebar() {
|
||||
sidebar.classList.toggle('active');
|
||||
if (sidebar.classList.contains('active')) {
|
||||
overlay.style.display = 'block';
|
||||
document.body.style.overflow = 'hidden'; // Prevent scroll
|
||||
} else {
|
||||
overlay.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
// Close sidebar when clicking overlay
|
||||
if (overlay) {
|
||||
overlay.addEventListener('click', function () {
|
||||
sidebar.classList.remove('active');
|
||||
overlay.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
});
|
||||
}
|
||||
|
||||
// Back to Top functionality
|
||||
window.addEventListener('scroll', function () {
|
||||
if (window.scrollY > 300) {
|
||||
backToTop.style.display = 'block';
|
||||
} else {
|
||||
backToTop.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
if (backToTop) {
|
||||
backToTop.addEventListener('click', function () {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred while sending your message.');
|
||||
})
|
||||
.finally(() => {
|
||||
// UI State: Reset
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = originalBtnText;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Resize handler to clean up states
|
||||
window.addEventListener('resize', function() {
|
||||
if (window.innerWidth >= 992) {
|
||||
sidebar.classList.remove('active');
|
||||
if (overlay) overlay.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
} else {
|
||||
sidebar.classList.remove('collapsed');
|
||||
content.classList.remove('expanded');
|
||||
}
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
360
index.php
360
index.php
@ -1,213 +1,213 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/db/config.php';
|
||||
require_once __DIR__ . '/db/init.php'; // Run init on first load
|
||||
|
||||
$pdo = db();
|
||||
|
||||
// Get settings
|
||||
$settings = [];
|
||||
$stmt = $pdo->query("SELECT setting_key, setting_value FROM settings");
|
||||
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
|
||||
$settings[$row['setting_key']] = $row['setting_value'];
|
||||
}
|
||||
|
||||
$site_title = $settings['site_title'] ?? '财神组聊天框架';
|
||||
$tg_link = $settings['tg_link'] ?? 'https://t.me/zhangshihao818';
|
||||
$footer_copy = $settings['footer_copy'] ?? '© 2026 财神组聊天框架构造. 内部资料，翻版必究。';
|
||||
$watermark_text = $settings['watermark_text'] ?? '财神组专用字体';
|
||||
$site_logo = $settings['site_logo'] ?? 'assets/pasted-20260207-134833-7329dc42.jpg';
|
||||
|
||||
// Get current day from URL
|
||||
$current_day = isset($_GET['day']) ? (int)$_GET['day'] : 1;
|
||||
if ($current_day < 1 || $current_day > 7) $current_day = 1;
|
||||
|
||||
// Fetch step data
|
||||
$stmt = $pdo->prepare("SELECT * FROM steps WHERE day_number = ?");
|
||||
$stmt->execute([$current_day]);
|
||||
$step = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
if (!$step) {
|
||||
$step = [
|
||||
'day_number' => $current_day,
|
||||
'title' => "第{$current_day}天：步骤加载中",
|
||||
'what_to_chat' => '暂无内容',
|
||||
'how_to_chat' => '暂无内容',
|
||||
'why_to_chat' => '暂无内容',
|
||||
'correct_example' => '暂无内容',
|
||||
'wrong_example' => '暂无内容',
|
||||
'correct_explanation' => '暂无内容',
|
||||
'wrong_explanation' => '暂无内容',
|
||||
'image_url' => ''
|
||||
];
|
||||
}
|
||||
$project_name = $_SERVER['PROJECT_NAME'] ?? 'SMM Pro Agency';
|
||||
$project_description = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Elevate your social media presence with data-driven strategies and creative content.';
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php echo htmlspecialchars($site_title); ?></title>
|
||||
<link rel="icon" type="image/jpeg" href="<?php echo htmlspecialchars($site_logo); ?>">
|
||||
<title><?php echo htmlspecialchars($project_name); ?></title>
|
||||
<meta name="description" content="<?php echo htmlspecialchars($project_description); ?>">
|
||||
|
||||
<!-- Bootstrap 5 CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Google Fonts: Inter -->
|
||||
<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;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Watermark -->
|
||||
<div class="watermark-container">
|
||||
<div class="watermark-text">
|
||||
<?php for($i=0; $i<100; $i++): ?>
|
||||
<span class="watermark-item"><?php echo htmlspecialchars($watermark_text); ?></span>
|
||||
<?php endfor; ?>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="bi bi-rocket-takeoff-fill me-2 text-primary"></i><?php echo htmlspecialchars($project_name); ?>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<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="#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#results">Results</a></li>
|
||||
<li class="nav-item"><a class="nav-link ms-lg-3 btn btn-primary text-white" href="#contact">Get a Quote</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Top Nav -->
|
||||
<nav class="mobile-nav d-lg-none">
|
||||
<button type="button" id="sidebarCollapseMobile" class="btn text-white">
|
||||
<i class="bi bi-list"></i>
|
||||
</button>
|
||||
<div class="mobile-logo-text">
|
||||
<?php echo htmlspecialchars($site_title); ?>
|
||||
</div>
|
||||
<div style="width: 40px;"></div> <!-- Spacer -->
|
||||
</nav>
|
||||
|
||||
<!-- Floating TG -->
|
||||
<div class="tg-float">
|
||||
<a href="<?php echo htmlspecialchars($tg_link); ?>" target="_blank" class="tg-btn">
|
||||
<i class="bi bi-telegram"></i>
|
||||
</a>
|
||||
<span class="tg-text">联系客服</span>
|
||||
</div>
|
||||
|
||||
<!-- Back to Top -->
|
||||
<button id="back-to-top" class="btn btn-warning rounded-circle shadow">
|
||||
<i class="bi bi-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- Sidebar -->
|
||||
<nav id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<?php if($site_logo): ?>
|
||||
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" class="img-fluid mb-2" style="max-height: 80px; border-radius: 10px;">
|
||||
<?php endif; ?>
|
||||
<h3><?php echo htmlspecialchars($site_title); ?></h3>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="hero-title">Dominate Social Media. Grow Your Business.</h1>
|
||||
<p class="lead text-muted mb-4">We help ambitious brands scale through professional social media management, targeted advertising, and high-impact content creation.</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#contact" class="btn btn-primary btn-lg">Start Your Project</a>
|
||||
<a href="#services" class="btn btn-outline-dark btn-lg">Our Services</a>
|
||||
</div>
|
||||
<div class="mt-5 d-flex align-items-center gap-4">
|
||||
<div>
|
||||
<h4 class="mb-0 fw-bold">500+</h4>
|
||||
<p class="text-muted small">Campaigns Run</p>
|
||||
</div>
|
||||
<div class="vr opacity-25"></div>
|
||||
<div>
|
||||
<h4 class="mb-0 fw-bold">10M+</h4>
|
||||
<p class="text-muted small">Reach Generated</p>
|
||||
</div>
|
||||
<div class="vr opacity-25"></div>
|
||||
<div>
|
||||
<h4 class="mb-0 fw-bold">98%</h4>
|
||||
<p class="text-muted small">Client Retention</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 d-none d-lg-block">
|
||||
<img src="https://images.pexels.com/photos/607812/pexels-photo-607812.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="SMM Strategy" class="img-fluid rounded shadow-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ul class="list-unstyled components">
|
||||
<?php for($i=1; $i<=7; $i++): ?>
|
||||
<li class="<?php echo $current_day == $i ? 'active' : ''; ?>">
|
||||
<a href="index.php?day=<?php echo $i; ?>">
|
||||
<i class="bi bi-calendar-check"></i> 第 <?php echo $i; ?> 天：步骤
|
||||
</a>
|
||||
</li>
|
||||
<?php endfor; ?>
|
||||
<hr class="mx-3 opacity-25">
|
||||
<li>
|
||||
<a href="login.php"><i class="bi bi-shield-lock"></i> 管理后台</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Page Content -->
|
||||
<div id="content">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 section-title-container">
|
||||
<h2 class="page-title"><?php echo htmlspecialchars($step['title']); ?> <span class="step-badge">Day <?php echo $current_day; ?></span></h2>
|
||||
<!-- Desktop sidebar collapse -->
|
||||
<button type="button" id="sidebarCollapse" class="btn btn-outline-dark d-none d-lg-block">
|
||||
<i class="bi bi-text-indent-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="card content-card">
|
||||
<div class="card-header"><i class="bi bi-chat-quote-fill me-2 text-warning"></i> 聊什么 (Content)</div>
|
||||
<div class="card-body">
|
||||
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['what_to_chat'] ?? '')); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card content-card">
|
||||
<div class="card-header"><i class="bi bi-info-circle-fill me-2 text-info"></i> 为什么要这样聊 (Reasoning)</div>
|
||||
<div class="card-body">
|
||||
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['why_to_chat'] ?? '')); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-success content-card h-100">
|
||||
<div class="card-header bg-success text-white"><i class="bi bi-check-circle-fill me-2"></i> 正确做法</div>
|
||||
<div class="card-body">
|
||||
<div class="example-box correct-box">
|
||||
<strong>示例：</strong><br>
|
||||
<div class="mt-2"><?php echo nl2br(htmlspecialchars($step['correct_example'] ?? '')); ?></div>
|
||||
</div>
|
||||
<div class="explanation-box mt-3">
|
||||
<strong>解释：</strong><br>
|
||||
<p class="mt-1 text-muted small"><?php echo nl2br(htmlspecialchars($step['correct_explanation'] ?? '')); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-danger content-card h-100">
|
||||
<div class="card-header bg-danger text-white"><i class="bi bi-x-circle-fill me-2"></i> 错误做法</div>
|
||||
<div class="card-body">
|
||||
<div class="example-box wrong-box">
|
||||
<strong>示例：</strong><br>
|
||||
<div class="mt-2"><?php echo nl2br(htmlspecialchars($step['wrong_example'] ?? '')); ?></div>
|
||||
</div>
|
||||
<div class="explanation-box mt-3">
|
||||
<strong>解释：</strong><br>
|
||||
<p class="mt-1 text-muted small"><?php echo nl2br(htmlspecialchars($step['wrong_explanation'] ?? '')); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-5">
|
||||
<div class="container py-5">
|
||||
<h2 class="section-title">Our Expertise</h2>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="service-card">
|
||||
<div class="service-icon"><i class="bi bi-megaphone"></i></div>
|
||||
<h3>Social Strategy</h3>
|
||||
<p class="text-muted">Comprehensive planning to align your social presence with your business goals and target audience.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="service-card">
|
||||
<div class="service-icon"><i class="bi bi-camera-reels"></i></div>
|
||||
<h3>Content Creation</h3>
|
||||
<p class="text-muted">High-quality visuals and compelling copy that stop the scroll and drive engagement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="service-card">
|
||||
<div class="service-icon"><i class="bi bi-graph-up-arrow"></i></div>
|
||||
<h3>Paid Ads (ROI Focus)</h3>
|
||||
<p class="text-muted">Targeted ad campaigns on Meta, TikTok, and LinkedIn designed to convert followers into customers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card content-card">
|
||||
<div class="card-header"><i class="bi bi-lightning-fill me-2 text-warning"></i> 怎么去聊 (Technique)</div>
|
||||
<div class="card-body">
|
||||
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['how_to_chat'] ?? '')); ?></div>
|
||||
</div>
|
||||
<!-- Results Section (Placeholder/Static) -->
|
||||
<section id="results" class="py-5 bg-white">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-5">
|
||||
<h2 class="fw-bold mb-4">Real Results for Real Brands</h2>
|
||||
<p class="text-muted mb-4">We don't just chase likes; we chase business outcomes. Our case studies show consistent growth in ROI and brand authority.</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3 d-flex align-items-center"><i class="bi bi-check-circle-fill text-success me-2"></i> 250% average increase in organic reach</li>
|
||||
<li class="mb-3 d-flex align-items-center"><i class="bi bi-check-circle-fill text-success me-2"></i> 4x ROAS on paid social campaigns</li>
|
||||
<li class="mb-3 d-flex align-items-center"><i class="bi bi-check-circle-fill text-success me-2"></i> Premium content tailored to each platform</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<img src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=600" class="img-fluid rounded" alt="Teamwork">
|
||||
</div>
|
||||
|
||||
<div class="card content-card">
|
||||
<div class="card-header"><i class="bi bi-image me-2 text-primary"></i> 聊天示例图</div>
|
||||
<div class="card-body text-center p-2">
|
||||
<?php if(!empty($step['image_url'])): ?>
|
||||
<img src="<?php echo htmlspecialchars($step['image_url']); ?>" class="img-fluid rounded shadow-sm" alt="Example" style="max-height: 500px;">
|
||||
<?php else: ?>
|
||||
<div class="py-5 bg-light text-muted rounded">
|
||||
<i class="bi bi-image" style="font-size: 3rem;"></i><br>
|
||||
示例图片后续上传
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<img src="https://images.pexels.com/photos/7007191/pexels-photo-7007191.jpeg?auto=compress&cs=tinysrgb&w=600" class="img-fluid rounded mt-4" alt="Analysis">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p class="text-muted"><?php echo $footer_copy; ?></p>
|
||||
</footer>
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="contact-section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold text-white">Ready to Scale?</h2>
|
||||
<p class="text-white-50">Fill out the form below and we'll get back to you with a custom strategy within 24 hours.</p>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<form id="leadForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="John Doe" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Email Address</label>
|
||||
<input type="email" name="email" class="form-control" placeholder="john@example.com" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Website (Optional)</label>
|
||||
<input type="url" name="website" class="form-control" placeholder="https://yourbrand.com">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Service Interested In</label>
|
||||
<select name="service" class="form-select form-control">
|
||||
<option value="Full Management">Full Management</option>
|
||||
<option value="Paid Social Ads">Paid Social Ads</option>
|
||||
<option value="Content Creation">Content Creation</option>
|
||||
<option value="Strategy Only">Strategy Only</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Message / Goals</label>
|
||||
<textarea name="message" class="form-control" rows="4" placeholder="Tell us about your brand and what you want to achieve..."></textarea>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-4">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5 shadow">Get My Free Quote</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center">
|
||||
<div class="container">
|
||||
<div class="mb-3">
|
||||
<a href="#" class="text-dark mx-2 fs-4"><i class="bi bi-instagram"></i></a>
|
||||
<a href="#" class="text-dark mx-2 fs-4"><i class="bi bi-linkedin"></i></a>
|
||||
<a href="#" class="text-dark mx-2 fs-4"><i class="bi bi-twitter-x"></i></a>
|
||||
</div>
|
||||
<p class="text-muted">© <?php echo date('Y'); ?> <?php echo htmlspecialchars($project_name); ?>. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Success Toast -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
Message sent successfully! We'll contact you soon.
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Overlay for Mobile -->
|
||||
<div id="overlay"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
43
save_lead.php
Normal file
43
save_lead.php
Normal file
@ -0,0 +1,43 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
require_once __DIR__ . '/db/config.php';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
echo json_encode(['success' => false, 'error' => 'Invalid request method']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$name = trim($_POST['name'] ?? '');
|
||||
$email = trim($_POST['email'] ?? '');
|
||||
$website = trim($_POST['website'] ?? '');
|
||||
$service = trim($_POST['service'] ?? '');
|
||||
$message = trim($_POST['message'] ?? '');
|
||||
|
||||
if (empty($name) || empty($email)) {
|
||||
echo json_encode(['success' => false, 'error' => 'Name and Email are required']);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
echo json_encode(['success' => false, 'error' => 'Invalid email format']);
|
||||
exit;
|
||||
}
|
||||
|
||||
try {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->prepare("INSERT INTO leads (name, email, website, service, message) VALUES (?, ?, ?, ?, ?)");
|
||||
$stmt->execute([$name, $email, $website, $service, $message]);
|
||||
|
||||
// Optional: Send email notification
|
||||
if (file_exists(__DIR__ . '/mail/MailService.php')) {
|
||||
require_once __DIR__ . '/mail/MailService.php';
|
||||
$subject = "New Lead from SMM Agency: $name";
|
||||
$body = "Name: $name\nEmail: $email\nWebsite: $website\nService: $service\nMessage: $message";
|
||||
MailService::sendMail(null, $subject, nl2br(htmlspecialchars($body)), $body);
|
||||
}
|
||||
|
||||
echo json_encode(['success' => true]);
|
||||
} catch (Exception $e) {
|
||||
echo json_encode(['success' => false, 'error' => 'Database error: ' . $e->getMessage()]);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user