adding Sample Process Diagram to the landing page

This commit is contained in:
Flatlogic Bot 2025-10-15 17:35:46 +00:00
parent 0c9c7ad511
commit 1b93899dae
12 changed files with 211 additions and 29 deletions

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 KiB

View File

@ -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
View File

@ -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">&#9650;</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">&#9650;</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">&#9650;</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">&#9660;</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">&#9660;</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">&#9650;</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">&#9650;</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">&#9650;</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">&#9650;</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>

View File

@ -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
View File

@ -0,0 +1 @@
<?php echo "<h1>DEBUG TEST PAGE</h1>"; ?>