adding Sample Process Diagram to the landing page
This commit is contained in:
Flatlogic Bot
parent
0c9c7ad511
commit
1b93899dae
@ -1,4 +1,3 @@
|
||||
|
||||
body {
|
||||
padding-top: 56px; /* Adjust for fixed-top navbar */
|
||||
}
|
||||
@ -59,3 +58,26 @@ h1, h2, h3, h4, h5, h6 {
|
||||
#outputs img, #dashboard img {
|
||||
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
BIN
assets/images/pexels_gtm_diagram_669610.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
assets/pasted-20251006-164429-f2a5211b.png
Normal file
BIN
assets/pasted-20251006-164429-f2a5211b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
assets/pasted-20251006-165942-e40aece1.png
Normal file
BIN
assets/pasted-20251006-165942-e40aece1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
assets/pasted-20251006-170246-c39c6bc6.png
Normal file
BIN
assets/pasted-20251006-170246-c39c6bc6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
assets/pasted-20251006-210028-b0cc286e.png
Normal file
BIN
assets/pasted-20251006-210028-b0cc286e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
assets/pasted-20251015-173324-71b99b3e.jpg
Normal file
BIN
assets/pasted-20251015-173324-71b99b3e.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
assets/vm-shot-2025-10-15T17-32-11-606Z.jpg
Normal file
BIN
assets/vm-shot-2025-10-15T17-32-11-606Z.jpg
Normal file
Binary file not shown.
|
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.
|
||||
// The key is temporarily used here for demonstration purposes as requested.
|
||||
// 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';
|
||||
|
||||
$profile_id = $_GET['id'] ?? null;
|
||||
@ -86,12 +86,13 @@ curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
$curl_error_message = curl_error($ch);
|
||||
curl_close($ch);
|
||||
|
||||
// --- Process Response ---
|
||||
if ($http_code !== 200 || $response === false) {
|
||||
error_log("OpenAI API Error: HTTP {$http_code} - " . $response);
|
||||
echo json_encode(['error' => 'Failed to generate diagram from AI. The API returned an error.']);
|
||||
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: ' . $curl_error_message]);
|
||||
exit;
|
||||
}
|
||||
|
||||
|
||||
124
index.php
124
index.php
@ -17,6 +17,23 @@
|
||||
<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 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>
|
||||
<body>
|
||||
|
||||
@ -29,7 +46,7 @@
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dashboard</a>
|
||||
<a class="nav-link" href="kpi_dashboard.php">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</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">
|
||||
<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 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 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>
|
||||
</section>
|
||||
|
||||
70
profile.php
70
profile.php
@ -31,6 +31,7 @@ if ($profile_id) {
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TEST</h1>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
||||
<div class="container">
|
||||
@ -101,7 +102,9 @@ if ($profile_id) {
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@ -114,7 +117,9 @@ if ($profile_id) {
|
||||
</div>
|
||||
|
||||
<!-- 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 class="card">
|
||||
<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/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({ startOnLoad: false });</script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const profileId = "<?php echo $profile_id; ?>";
|
||||
@ -225,29 +229,42 @@ if ($profile_id) {
|
||||
}
|
||||
|
||||
// Function to render the diagram
|
||||
const renderDiagram = (mermaidCode) => {
|
||||
const renderDiagram = (mermaidCode, isSample = false) => {
|
||||
if (!mermaidCode) {
|
||||
diagramContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
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 = `
|
||||
<div class="card">
|
||||
<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>
|
||||
${footer}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// Ensure Mermaid is available before running
|
||||
if (window.mermaid) {
|
||||
mermaid.run();
|
||||
}
|
||||
|
||||
if (!isSample) {
|
||||
editor.value = mermaidCode;
|
||||
editorContainer.style.display = 'block';
|
||||
} else {
|
||||
editorContainer.style.display = 'none';
|
||||
}
|
||||
} catch (e) {
|
||||
diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
|
||||
console.error("Mermaid render error:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const renderKpiDashboard = (kpiData) => {
|
||||
const renderKpiDashboard = (kpiData, isSample = false) => {
|
||||
if (!kpiData) return;
|
||||
|
||||
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'; ?>;
|
||||
if (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) {
|
||||
@ -346,7 +386,7 @@ if ($profile_id) {
|
||||
});
|
||||
});
|
||||
|
||||
const updatedKpiData = { kpis: kpis };
|
||||
const updatedKpiData = { kpis: kpis, chartData: kpiData.chartData };
|
||||
|
||||
fetch('save_kpis.php', {
|
||||
method: 'POST',
|
||||
@ -387,6 +427,20 @@ if ($profile_id) {
|
||||
const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
|
||||
if (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
|
||||
|
||||
1
test_debug_20251005.php
Normal file
1
test_debug_20251005.php
Normal file
@ -0,0 +1 @@
|
||||
<?php echo "<h1>DEBUG TEST PAGE</h1>"; ?>
|
||||
Loading…
x
Reference in New Issue
Block a user