diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..0a8d757 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,194 @@ +body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + background-color: #F8F9FA; + color: #343A40; +} + +.hero { + background: linear-gradient(45deg, #007BFF, #0056b3); + color: white; + padding: 100px 0; + text-align: center; +} + +.hero h1 { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 3.5rem; + font-weight: bold; +} + +.features { + padding: 80px 0; +} + +.feature-icon { + font-size: 3rem; + color: #007BFF; +} + +#invite-form-section { + padding: 80px 0; + background-color: #FFFFFF; +} + +.toast-container { + position: fixed; + top: 20px; + right: 20px; + z-index: 1050; +} + +/* Dashboard Styles */ +.dashboard-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 32px; + background-color: #FFFFFF; + border-bottom: 1px solid #DEE2E6; +} + +.dashboard-header .logo a { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 1.5rem; + font-weight: bold; + color: #007BFF; + text-decoration: none; +} + +.dashboard-nav a { + margin-left: 24px; + text-decoration: none; + color: #6C757D; + font-weight: 500; +} + +.dashboard-nav a.active { + color: #007BFF; +} + +.logout-btn { + border: 1px solid #007BFF; + padding: 8px 16px; + border-radius: 4px; + color: #007BFF; +} + +.logout-btn:hover { + background-color: #007BFF; + color: #FFFFFF; +} + +.dashboard-main { + padding: 32px; +} + +.dashboard-title { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; +} + +.dashboard-title h1 { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 2.5rem; +} + +.date-range-picker { + display: flex; + align-items: center; + border: 1px solid #DEE2E6; + padding: 8px 12px; + border-radius: 4px; + background-color: #FFFFFF; +} + +.date-range-picker input { + border: none; + outline: none; + font-size: 1rem; + color: #6C757D; +} + +.date-range-picker svg { + margin-left: 8px; +} + +.metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 24px; + margin-bottom: 32px; +} + +.metric-card { + background-color: #FFFFFF; + padding: 24px; + border-radius: 8px; + border: 1px solid #DEE2E6; +} + +.metric-title { + font-size: 1rem; + color: #6C757D; + margin-bottom: 8px; +} + +.metric-value { + font-size: 2rem; + font-weight: bold; + margin-bottom: 8px; +} + +.metric-change { + font-size: 1rem; +} + +.metric-change.positive { + color: #28A745; +} + +.metric-change.negative { + color: #DC3545; +} + +.chart-section { + background-color: #FFFFFF; + padding: 24px; + border-radius: 8px; + border: 1px solid #DEE2E6; +} + +.chart-title { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 24px; +} + +.chart { + display: flex; + justify-content: space-around; + align-items: flex-end; + height: 300px; +} + +.chart-bar-wrapper { + display: flex; + flex-direction: column; + align-items: center; + flex-grow: 1; +} + +.chart-bar { + width: 70%; + background: linear-gradient(to top, #007BFF, #0056b3); + border-radius: 4px 4px 0 0; + transition: height 0.5s ease-in-out; +} + +.chart-label { + margin-top: 8px; + font-size: 0.875rem; + color: #6C757D; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..d9eeb9e --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,62 @@ +document.addEventListener('DOMContentLoaded', function () { + const inviteForm = document.getElementById('invite-form'); + if (inviteForm) { + inviteForm.addEventListener('submit', function (e) { + e.preventDefault(); + const email = document.getElementById('email').value; + const formData = new FormData(); + formData.append('email', email); + + fetch('request_invite.php', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + showToast(data.message, data.success ? 'success' : 'error'); + if (data.success) { + inviteForm.reset(); + } + }) + .catch(error => { + showToast('An unexpected error occurred.', 'error'); + console.error('Error:', error); + }); + }); + } + + function showToast(message, type) { + const toastContainer = document.getElementById('toast-container'); + if (!toastContainer) return; + + const toast = document.createElement('div'); + toast.className = `toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0 show`; + toast.setAttribute('role', 'alert'); + toast.setAttribute('aria-live', 'assertive'); + toast.setAttribute('aria-atomic', 'true'); + + const toastBody = document.createElement('div'); + toastBody.className = 'd-flex'; + toastBody.innerHTML = `
${message}
`; + + toast.appendChild(toastBody); + toastContainer.appendChild(toast); + + const bsToast = new bootstrap.Toast(toast); + bsToast.show(); + + setTimeout(() => { + bsToast.hide(); + setTimeout(() => toast.remove(), 500); + }, 5000); + } + + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); +}); diff --git a/dashboard.php b/dashboard.php new file mode 100644 index 0000000..9d04fc8 --- /dev/null +++ b/dashboard.php @@ -0,0 +1,88 @@ + ["value" => "12,345", "change" => "+5.2%"], + "conversions" => ["value" => "678", "change" => "+12.8%"], + "ad_spend" => ["value" => "$2,456", "change" => "-3.1%"], + "clicks" => ["value" => "34,567", "change" => "+8.4%"], + "keyword_ranks" => ["value" => "5", "change" => "+2"], + "backlinks" => ["value" => "1,234", "change" => "+50"], + "site_audit_score" => ["value" => "88/100", "change" => "+3"], + "calls" => ["value" => "98", "change" => "+15%"], +]; + +// Dummy data for the main chart (e.g., sessions over time) +$chart_data = [ + "labels" => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + "values" => [5000, 5500, 6200, 7100, 8000, 8500, 9200, 9800, 10500, 11200, 12000, 12345], +]; + +?> + + + + + + <?php echo htmlspecialchars($client_name); ?> - Marketing Dashboard + + + + + +
+ + +
+ +
+
+

's Dashboard

+
+ + +
+
+ +
+ $metric): ?> +
+

+

+

+ +

+
+ +
+ +
+
+

Sessions Over Time

+ +
+ $value): + $height_percentage = ($value / $max_value) * 100; + ?> +
+
+ +
+ +
+
+
+ +
+ + + diff --git a/index.php b/index.php index 7205f3d..b14b041 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,94 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Agency Marketing Dashboard + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + +
+
+ AgencyAnalytics +
+ View Dashboard + Request Invite +
+
+
+ +
+
+
+

Automated Client Reporting for Marketing Agencies

+

Save time, track performance, and create custom, branded reports with ease.

+ Get Started +
+
+ +
+
+
+
+ +

All-in-One Dashboards

+

Connect all your marketing channels and see your data in one place.

+
+
+ +

Automated Reports

+

Create beautiful, custom reports and schedule them to send automatically.

+
+
+ +

Branded for Your Agency

+

White-label the platform with your own logo and branding.

+
+
+
+
+ +
+
+
+
+

Request an Invitation

+

Get exclusive access to the platform.

+
+
+ + +
+
+
+
+
+
+
+ + + +
+ + + + - + \ No newline at end of file diff --git a/request_invite.php b/request_invite.php new file mode 100644 index 0000000..3da1356 --- /dev/null +++ b/request_invite.php @@ -0,0 +1,30 @@ + false, 'message' => 'Invalid request method.']); + exit; +} + +$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); + +if (!$email) { + echo json_encode(['success' => false, 'message' => 'Please provide a valid email address.']); + exit; +} + +$to = getenv('MAIL_TO') ?: 'admin@example.com'; // Fallback email +$subject = 'New Invite Request'; +$body = "A new invite request has been received from: {$email}"; +$name = 'Invite Request Form'; + +$result = MailService::sendContactMessage($name, $email, $body, $to, $subject); + +if ($result['success']) { + echo json_encode(['success' => true, 'message' => 'Thank you! Your invite request has been received.']); +} else { + error_log('MailService Error: ' . $result['error']); + echo json_encode(['success' => false, 'message' => 'Sorry, there was an error sending your request. Please try again later.']); +}