adding Sample Process Diagram to the landing page
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 56px; /* Adjust for fixed-top navbar */
|
padding-top: 56px; /* Adjust for fixed-top navbar */
|
||||||
}
|
}
|
||||||
@ -59,3 +58,26 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
#outputs img, #dashboard img {
|
#outputs img, #dashboard img {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dashboard Styles */
|
||||||
|
#dashboard {
|
||||||
|
background-color: #1a1a1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dashboard .card {
|
||||||
|
background-color: #2a2a2a !important;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dashboard .kpi-value {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dashboard .trend-up {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dashboard .trend-down {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
BIN
assets/images/pexels_gtm_diagram_669610.jpg
Normal file
|
After Width: | Height: | Size: 208 KiB |
BIN
assets/pasted-20251006-164429-f2a5211b.png
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
BIN
assets/pasted-20251006-165942-e40aece1.png
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
BIN
assets/pasted-20251006-170246-c39c6bc6.png
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
assets/pasted-20251006-210028-b0cc286e.png
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
assets/pasted-20251015-173324-71b99b3e.jpg
Normal file
|
After Width: | Height: | Size: 257 KiB |
BIN
assets/vm-shot-2025-10-15T17-32-11-606Z.jpg
Normal file
|
After Width: | Height: | Size: 257 KiB |
@ -6,7 +6,7 @@ require_once 'db/config.php';
|
|||||||
// IMPORTANT: Do not hardcode API keys in production. Use environment variables.
|
// IMPORTANT: Do not hardcode API keys in production. Use environment variables.
|
||||||
// The key is temporarily used here for demonstration purposes as requested.
|
// The key is temporarily used here for demonstration purposes as requested.
|
||||||
// You should revoke this key and use getenv('OPENAI_API_KEY') instead.
|
// You should revoke this key and use getenv('OPENAI_API_KEY') instead.
|
||||||
$openai_api_key = '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';
|
$openai_api_key = getenv('OPENAI_API_KEY');
|
||||||
$openai_api_url = 'https://api.openai.com/v1/chat/completions';
|
$openai_api_url = 'https://api.openai.com/v1/chat/completions';
|
||||||
|
|
||||||
$profile_id = $_GET['id'] ?? null;
|
$profile_id = $_GET['id'] ?? null;
|
||||||
@ -86,12 +86,13 @@ curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
|||||||
|
|
||||||
$response = curl_exec($ch);
|
$response = curl_exec($ch);
|
||||||
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
$curl_error_message = curl_error($ch);
|
||||||
curl_close($ch);
|
curl_close($ch);
|
||||||
|
|
||||||
// --- Process Response ---
|
// --- Process Response ---
|
||||||
if ($http_code !== 200 || $response === false) {
|
if ($http_code !== 200 || $response === false) {
|
||||||
error_log("OpenAI API Error: HTTP {$http_code} - " . $response);
|
error_log("OpenAI API Error: HTTP {$http_code} - " . $response . " - cURL Error: " . $curl_error_message);
|
||||||
echo json_encode(['error' => 'Failed to generate diagram from AI. The API returned an error.']);
|
echo json_encode(['error' => 'Failed to generate diagram from AI. The API returned an error: ' . $curl_error_message]);
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
124
index.php
@ -17,6 +17,23 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Lora:wght@700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Lora:wght@700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
<style>
|
||||||
|
.kpi-card {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.trend-up {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
.trend-down {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
.kpi-value {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||||
|
<script>mermaid.initialize({ startOnLoad: true });</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -29,7 +46,7 @@
|
|||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav ms-auto">
|
<ul class="navbar-nav ms-auto">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Dashboard</a>
|
<a class="nav-link" href="kpi_dashboard.php">Dashboard</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="profile.php">Profile</a>
|
<a class="nav-link" href="profile.php">Profile</a>
|
||||||
@ -112,24 +129,111 @@
|
|||||||
<p>Our AI generates clear, actionable diagrams that map out your entire customer journey and the internal processes required to support it.</p>
|
<p>Our AI generates clear, actionable diagrams that map out your entire customer journey and the internal processes required to support it.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<img src="assets/images/pexels/1181311.jpg" class="img-fluid rounded shadow" alt="Sample GTM Process Diagram">
|
<div class="mermaid">graph TD
|
||||||
|
subgraph "GTM Strategy Workflow"
|
||||||
|
A[Start] --> B[Input Market & Product Data];
|
||||||
|
B --> C{Generate GTM Strategy};
|
||||||
|
C --> D[Review Generated Plan];
|
||||||
|
D --> E{Is the Plan Approved?};
|
||||||
|
E -- Yes --> F[Launch GTM Campaign];
|
||||||
|
E -- No --> G[Refine Inputs & Regenerate];
|
||||||
|
G --> B;
|
||||||
|
F --> H[Monitor KPIs & Optimize];
|
||||||
|
H --> F;
|
||||||
|
end</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Dashboard Preview Section -->
|
<!-- Dashboard Preview Section -->
|
||||||
<section id="dashboard" class="py-5">
|
<section id="dashboard" class="py-5 bg-dark text-white">
|
||||||
|
<div class="container">
|
||||||
<div class="text-center mb-5">
|
<div class="text-center mb-5">
|
||||||
<h2>Track Your Progress</h2>
|
<h2>Track Your Progress</h2>
|
||||||
<p class="lead">A centralized dashboard to monitor your key metrics and GTM goals.</p>
|
<p class="lead">A fully customizable dashboard to monitor your key metrics and GTM goals</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Revenue</h5>
|
||||||
|
<p class="kpi-value">$250,000</p>
|
||||||
|
<p class="card-text">Target: $300,000 <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Revenue Growth (MoM)</h5>
|
||||||
|
<p class="kpi-value">15%</p>
|
||||||
|
<p class="card-text">Target: 20% <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Gross Profit Margin</h5>
|
||||||
|
<p class="kpi-value">60%</p>
|
||||||
|
<p class="card-text">Target: 65% <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Customer Acquisition Cost (CAC)</h5>
|
||||||
|
<p class="kpi-value">$120</p>
|
||||||
|
<p class="card-text">Target: $100 <span class="trend-down">▼</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Operating Expenses</h5>
|
||||||
|
<p class="kpi-value">$50,000</p>
|
||||||
|
<p class="card-text">Target: $45,000 <span class="trend-down">▼</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Net Operating Income</h5>
|
||||||
|
<p class="kpi-value">$100,000</p>
|
||||||
|
<p class="card-text">Target: $120,000 <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">New Customers Added</h5>
|
||||||
|
<p class="kpi-value">50</p>
|
||||||
|
<p class="card-text">Target: 60 <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Total Customers</h5>
|
||||||
|
<p class="kpi-value">500</p>
|
||||||
|
<p class="card-text">Target: 550 <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-md-6 mb-4">
|
||||||
|
<div class="card bg-secondary text-white h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Annual Recurring Revenue (ARR)</h5>
|
||||||
|
<p class="kpi-value">$3,000,000</p>
|
||||||
|
<p class="card-text">Target: $3,500,000 <span class="trend-up">▲</span></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<img src="assets/images/pexels/34128237.jpg" class="img-fluid rounded shadow" alt="Sample GTM Dashboard">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<h3>Unified Dashboard</h3>
|
|
||||||
<p>Monitor customer acquisition cost, lifetime value, conversion rates, and other critical KPIs in real-time. Align your team around a single source of truth.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
70
profile.php
@ -31,6 +31,7 @@ if ($profile_id) {
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<h1>TEST</h1>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -101,7 +102,9 @@ if ($profile_id) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="card-text">Set and refine KPIs, and track them with an auto-generated dashboard.</p>
|
<p class="card-text">Set and refine KPIs, and track them with an auto-generated dashboard.</p>
|
||||||
<div id="kpi-container" class="mt-3"></div>
|
<div id="kpi-container" class="mt-3">
|
||||||
|
<!-- KPI Dashboard will be rendered here by JavaScript -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -114,7 +117,9 @@ if ($profile_id) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Diagram and Editor Section -->
|
<!-- Diagram and Editor Section -->
|
||||||
<div id="diagram-container" class="mb-4"></div>
|
<div id="diagram-container" class="mb-4">
|
||||||
|
<!-- Diagram will be rendered here by JavaScript -->
|
||||||
|
</div>
|
||||||
<div id="diagram-editor-container" class="mb-4" style="display: none;">
|
<div id="diagram-editor-container" class="mb-4" style="display: none;">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@ -156,7 +161,6 @@ if ($profile_id) {
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||||
<script>mermaid.initialize({ startOnLoad: false });</script>
|
<script>mermaid.initialize({ startOnLoad: false });</script>
|
||||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const profileId = "<?php echo $profile_id; ?>";
|
const profileId = "<?php echo $profile_id; ?>";
|
||||||
@ -225,29 +229,42 @@ if ($profile_id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Function to render the diagram
|
// Function to render the diagram
|
||||||
const renderDiagram = (mermaidCode) => {
|
const renderDiagram = (mermaidCode, isSample = false) => {
|
||||||
if (!mermaidCode) {
|
if (!mermaidCode) {
|
||||||
diagramContainer.innerHTML = '';
|
diagramContainer.innerHTML = '';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
|
const title = isSample ? 'Sample GTM Process Flow' : 'GTM Process Flow Diagram';
|
||||||
|
const footer = isSample ? '<p class="text-center text-muted mt-2">This is a sample diagram. Click "Generate" to create one based on your profile.</p>' : '';
|
||||||
|
|
||||||
diagramContainer.innerHTML = `
|
diagramContainer.innerHTML = `
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">GTM Process Flow Diagram</h5>
|
<h5 class="card-title">${title}</h5>
|
||||||
<div class="mermaid text-center">${mermaidCode}</div>
|
<div class="mermaid text-center">${mermaidCode}</div>
|
||||||
|
${footer}
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
|
// Ensure Mermaid is available before running
|
||||||
|
if (window.mermaid) {
|
||||||
mermaid.run();
|
mermaid.run();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isSample) {
|
||||||
editor.value = mermaidCode;
|
editor.value = mermaidCode;
|
||||||
editorContainer.style.display = 'block';
|
editorContainer.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
editorContainer.style.display = 'none';
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
|
diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
|
||||||
console.error("Mermaid render error:", e);
|
console.error("Mermaid render error:", e);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderKpiDashboard = (kpiData) => {
|
const renderKpiDashboard = (kpiData, isSample = false) => {
|
||||||
if (!kpiData) return;
|
if (!kpiData) return;
|
||||||
|
|
||||||
let kpiHtml = '<form id="kpi-form"><div class="row">';
|
let kpiHtml = '<form id="kpi-form"><div class="row">';
|
||||||
@ -292,12 +309,35 @@ if ($profile_id) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('edit-kpi-btn').style.display = 'inline-block';
|
const editBtn = document.getElementById('edit-kpi-btn');
|
||||||
|
if (isSample) {
|
||||||
|
editBtn.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
editBtn.style.display = 'inline-block';
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const existingKpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;
|
const existingKpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;
|
||||||
if (existingKpiData) {
|
if (existingKpiData) {
|
||||||
renderKpiDashboard(existingKpiData);
|
renderKpiDashboard(existingKpiData);
|
||||||
|
} else {
|
||||||
|
const sampleKpiData = {
|
||||||
|
kpis: [
|
||||||
|
{ name: "Website Visitors", current: "1,200", target: "5,000" },
|
||||||
|
{ name: "Lead Conversion Rate", current: "2.5%", target: "4%" },
|
||||||
|
{ name: "Customer Acquisition Cost (CAC)", current: "$150", target: "$120" }
|
||||||
|
],
|
||||||
|
chartData: {
|
||||||
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Sample: Monthly Active Users',
|
||||||
|
data: [500, 650, 800, 750, 900, 1100],
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
tension: 0.1
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
renderKpiDashboard(sampleKpiData, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (generateKpiBtn) {
|
if (generateKpiBtn) {
|
||||||
@ -346,7 +386,7 @@ if ($profile_id) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const updatedKpiData = { kpis: kpis };
|
const updatedKpiData = { kpis: kpis, chartData: kpiData.chartData };
|
||||||
|
|
||||||
fetch('save_kpis.php', {
|
fetch('save_kpis.php', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@ -387,6 +427,20 @@ if ($profile_id) {
|
|||||||
const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
|
const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
|
||||||
if (existingDiagram) {
|
if (existingDiagram) {
|
||||||
renderDiagram(existingDiagram);
|
renderDiagram(existingDiagram);
|
||||||
|
} else {
|
||||||
|
const sampleDiagram = `graph TD
|
||||||
|
subgraph "GTM Strategy Workflow"
|
||||||
|
A[Start] --> B[Input Market & Product Data];
|
||||||
|
B --> C{Generate GTM Strategy};
|
||||||
|
C --> D[Review Generated Plan];
|
||||||
|
D --> E{Is the Plan Approved?};
|
||||||
|
E -- Yes --> F[Launch GTM Campaign];
|
||||||
|
E -- No --> G[Refine Inputs & Regenerate];
|
||||||
|
G --> B;
|
||||||
|
F --> H[Monitor KPIs & Optimize];
|
||||||
|
H --> F;
|
||||||
|
end`;
|
||||||
|
renderDiagram(sampleDiagram, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate button click handler
|
// Generate button click handler
|
||||||
|
|||||||
1
test_debug_20251005.php
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?php echo "<h1>DEBUG TEST PAGE</h1>"; ?>
|
||||||