v1

core/admin.py

@@ -1,3 +1,26 @@
 from django.contrib import admin
+from .models import Fanpage, Flow, Node, Edge, ChatSession, MessageLog
 
-# Register your models here.
+@admin.register(Fanpage)
+class FanpageAdmin(admin.ModelAdmin):
+    list_display = ('name', 'page_id', 'is_active', 'created_at')
+
+@admin.register(Flow)
+class FlowAdmin(admin.ModelAdmin):
+    list_display = ('name', 'fanpage', 'is_default', 'created_at')
+
+@admin.register(Node)
+class NodeAdmin(admin.ModelAdmin):
+    list_display = ('name', 'flow', 'node_type', 'is_start_node')
+
+@admin.register(Edge)
+class EdgeAdmin(admin.ModelAdmin):
+    list_display = ('source_node', 'target_node', 'condition')
+
+@admin.register(ChatSession)
+class ChatSessionAdmin(admin.ModelAdmin):
+    list_display = ('psid', 'fanpage', 'current_node', 'updated_at')
+
+@admin.register(MessageLog)
+class MessageLogAdmin(admin.ModelAdmin):
+    list_display = ('session', 'sender_type', 'timestamp')

core/migrations/0001_initial.py

@@ -0,0 +1,87 @@
+# Generated by Django 5.2.7 on 2026-02-07 17:11
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Fanpage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('page_id', models.CharField(max_length=255, unique=True)),
+                ('access_token', models.TextField()),
+                ('verify_token', models.CharField(help_text='Token for Facebook Webhook verification', max_length=255)),
+                ('is_active', models.BooleanField(default=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='ChatSession',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('psid', models.CharField(help_text='Facebook Page Scoped ID of the user', max_length=255)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('fanpage', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.fanpage')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Flow',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('description', models.TextField(blank=True)),
+                ('is_default', models.BooleanField(default=False)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('fanpage', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='flows', to='core.fanpage')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='MessageLog',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('sender_type', models.CharField(choices=[('user', 'User'), ('bot', 'Bot')], max_length=10)),
+                ('message_text', models.TextField()),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('session', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='logs', to='core.chatsession')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Node',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(help_text='Internal name for this step', max_length=255)),
+                ('node_type', models.CharField(choices=[('text', 'Text Message'), ('buttons', 'Buttons/Quick Replies'), ('image', 'Image')], default='text', max_length=20)),
+                ('content', models.JSONField(help_text='Stores the message text, button labels, etc.')),
+                ('is_start_node', models.BooleanField(default=False)),
+                ('flow', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='nodes', to='core.flow')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Edge',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('condition', models.CharField(help_text='Keyword or button payload that triggers this edge', max_length=255)),
+                ('flow', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='edges', to='core.flow')),
+                ('source_node', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='outgoing_edges', to='core.node')),
+                ('target_node', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='incoming_edges', to='core.node')),
+            ],
+        ),
+        migrations.AddField(
+            model_name='chatsession',
+            name='current_node',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='core.node'),
+        ),
+        migrations.AlterUniqueTogether(
+            name='chatsession',
+            unique_together={('psid', 'fanpage')},
+        ),
+    ]

core/models.py

@@ -1,3 +1,61 @@
 from django.db import models
 
-# Create your models here.
+class Fanpage(models.Model):
+    name = models.CharField(max_length=255)
+    page_id = models.CharField(max_length=255, unique=True)
+    access_token = models.TextField()
+    verify_token = models.CharField(max_length=255, help_text="Token for Facebook Webhook verification")
+    is_active = models.BooleanField(default=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.name
+
+class Flow(models.Model):
+    name = models.CharField(max_length=255)
+    description = models.TextField(blank=True)
+    fanpage = models.ForeignKey(Fanpage, on_delete=models.CASCADE, related_name='flows')
+    is_default = models.BooleanField(default=False)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return f"{self.name} ({self.fanpage.name})"
+
+class Node(models.Model):
+    NODE_TYPES = (
+        ('text', 'Text Message'),
+        ('buttons', 'Buttons/Quick Replies'),
+        ('image', 'Image'),
+    )
+    flow = models.ForeignKey(Flow, on_delete=models.CASCADE, related_name='nodes')
+    name = models.CharField(max_length=255, help_text="Internal name for this step")
+    node_type = models.CharField(max_length=20, choices=NODE_TYPES, default='text')
+    content = models.JSONField(help_text="Stores the message text, button labels, etc.")
+    is_start_node = models.BooleanField(default=False)
+
+    def __str__(self):
+        return f"{self.name} [{self.node_type}]"
+
+class Edge(models.Model):
+    flow = models.ForeignKey(Flow, on_delete=models.CASCADE, related_name='edges')
+    source_node = models.ForeignKey(Node, on_delete=models.CASCADE, related_name='outgoing_edges')
+    target_node = models.ForeignKey(Node, on_delete=models.CASCADE, related_name='incoming_edges')
+    condition = models.CharField(max_length=255, help_text="Keyword or button payload that triggers this edge")
+
+    def __str__(self):
+        return f"{self.source_node.name} -> {self.target_node.name} on '{self.condition}'"
+
+class ChatSession(models.Model):
+    psid = models.CharField(max_length=255, help_text="Facebook Page Scoped ID of the user")
+    fanpage = models.ForeignKey(Fanpage, on_delete=models.CASCADE)
+    current_node = models.ForeignKey(Node, on_delete=models.SET_NULL, null=True, blank=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        unique_together = ('psid', 'fanpage')
+
+class MessageLog(models.Model):
+    session = models.ForeignKey(ChatSession, on_delete=models.CASCADE, related_name='logs')
+    sender_type = models.CharField(max_length=10, choices=(('user', 'User'), ('bot', 'Bot')))
+    message_text = models.TextField()
+    timestamp = models.DateTimeField(auto_now_add=True)

core/templates/base.html

@@ -1,25 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}FlowBot | Facebook Automation{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+    {% block head %}{% endblock %}
 </head>
-
 <body>
-  {% block content %}{% endblock %}
-</body>
+    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="{% url 'home' %}">
+                <span class="text-coral">Flow</span>Bot
+            </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">
+                    {% if user.is_authenticated %}
+                        <li class="nav-item"><a class="nav-link" href="{% url 'dashboard' %}">Dashboard</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'fanpage_list' %}">Fanpages</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{% url 'flow_list' %}">Flows</a></li>
+                        <li class="nav-item"><a class="nav-link text-coral" href="/admin/">Admin</a></li>
+                        <li class="nav-item">
+                            <form action="{% url 'admin:logout' %}" method="post" class="d-inline">
+                                {% csrf_token %}
+                                <button type="submit" class="nav-link btn btn-link py-0">Logout</button>
+                            </form>
+                        </li>
+                    {% else %}
+                        <li class="nav-item"><a class="nav-link" href="/admin/login/">Login</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
 
+    {% block content %}{% endblock %}
+
+    <footer class="py-4 mt-5 bg-indigo text-white-50">
+        <div class="container text-center">
+            <p class="mb-0">&copy; 2026 FlowBot Automation. Built with Django & Love.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block scripts %}{% endblock %}
+</body>
 </html>

core/templates/core/dashboard.html

@@ -0,0 +1,110 @@
+{% extends 'base.html' %}
+
+{% block title %}Dashboard | FlowBot{% endblock %}
+
+{% block content %}
+<div class="container py-5">
+    <div class="row mb-4">
+        <div class="col">
+            <h2 class="fw-bold">Welcome back, {{ user.username }}!</h2>
+            <p class="text-muted">Here's what's happening with your bots today.</p>
+        </div>
+        <div class="col-auto">
+            <a href="/admin/core/fanpage/add/" class="btn btn-coral px-4">Connect Page</a>
+        </div>
+    </div>
+
+    <div class="row g-4 mb-5">
+        <div class="col-md-4">
+            <div class="card p-4 text-center">
+                <h6 class="text-uppercase text-muted small fw-bold">Active Pages</h6>
+                <div class="display-4 fw-bold text-indigo">{{ fanpage_count }}</div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card p-4 text-center">
+                <h6 class="text-uppercase text-muted small fw-bold">Total Flows</h6>
+                <div class="display-4 fw-bold text-indigo">{{ flow_count }}</div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card p-4 text-center">
+                <h6 class="text-uppercase text-muted small fw-bold">Today's Messages</h6>
+                <div class="display-4 fw-bold text-coral">0</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg-8">
+            <div class="card p-4 mb-4">
+                <div class="d-flex justify-content-between align-items-center mb-4">
+                    <h5 class="mb-0 fw-bold">Connected Fanpages</h5>
+                    <a href="{% url 'fanpage_list' %}" class="btn btn-sm btn-link text-indigo">View All</a>
+                </div>
+                <div class="table-responsive">
+                    <table class="table align-middle">
+                        <thead class="table-light">
+                            <tr>
+                                <th>Page Name</th>
+                                <th>Status</th>
+                                <th>Active Flow</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for page in fanpages %}
+                            <tr>
+                                <td>
+                                    <div class="fw-bold">{{ page.name }}</div>
+                                    <small class="text-muted">ID: {{ page.page_id }}</small>
+                                </td>
+                                <td>
+                                    {% if page.is_active %}
+                                        <span class="badge bg-success-subtle text-success">Active</span>
+                                    {% else %}
+                                        <span class="badge bg-danger-subtle text-danger">Paused</span>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {% with page.flows.first as flow %}
+                                        {% if flow %}{{ flow.name }}{% else %}<span class="text-muted italic">None</span>{% endif %}
+                                    {% endwith %}
+                                </td>
+                                <td>
+                                    <a href="/admin/core/fanpage/{{ page.id }}/change/" class="btn btn-sm btn-outline-indigo">Manage</a>
+                                </td>
+                            </tr>
+                            {% empty %}
+                            <tr>
+                                <td colspan="4" class="text-center py-4 text-muted">No pages connected yet.</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card p-4">
+                <h5 class="mb-4 fw-bold">Recent Activity</h5>
+                <div class="activity-feed">
+                    {% for log in recent_logs %}
+                    <div class="mb-3 border-bottom pb-3">
+                        <div class="d-flex justify-content-between mb-1">
+                            <span class="badge {% if log.sender_type == 'user' %}bg-info-subtle text-info{% else %}bg-indigo-subtle text-indigo{% endif %} px-2">
+                                {{ log.sender_type|upper }}
+                            </span>
+                            <small class="text-muted">{{ log.timestamp|timesince }} ago</small>
+                        </div>
+                        <p class="small mb-0 text-truncate">{{ log.message_text }}</p>
+                    </div>
+                    {% empty %}
+                    <p class="text-center text-muted py-5">No recent activity found.</p>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

core/templates/core/fanpage_list.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+
+{% block title %}Fanpages | FlowBot{% endblock %}
+
+{% block content %}
+<div class="container py-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 class="fw-bold">Your Fanpages</h2>
+        <a href="/admin/core/fanpage/add/" class="btn btn-coral px-4">Add Fanpage</a>
+    </div>
+
+    <div class="row g-4">
+        {% for page in fanpages %}
+        <div class="col-md-4">
+            <div class="card h-100 p-4">
+                <div class="d-flex justify-content-between mb-3">
+                    <span class="badge {% if page.is_active %}bg-success{% else %}bg-secondary{% endif %}">
+                        {% if page.is_active %}Active{% else %}Inactive{% endif %}
+                    </span>
+                    <small class="text-muted">Created {{ page.created_at|date:"M d, Y" }}</small>
+                </div>
+                <h4 class="fw-bold">{{ page.name }}</h4>
+                <p class="text-muted small">Page ID: {{ page.page_id }}</p>
+                <hr>
+                <div class="d-flex justify-content-between align-items-center mt-auto">
+                    <span class="small">{{ page.flows.count }} Flow(s)</span>
+                    <a href="/admin/core/fanpage/{{ page.id }}/change/" class="btn btn-sm btn-outline-indigo">Edit Settings</a>
+                </div>
+            </div>
+        </div>
+        {% empty %}
+        <div class="col-12">
+            <div class="card p-5 text-center">
+                <h3 class="text-muted">No Fanpages found</h3>
+                <p>Connect your first Facebook Page to start automating!</p>
+                <a href="/admin/core/fanpage/add/" class="btn btn-coral mt-3 mx-auto" style="width: fit-content;">Connect Now</a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}

core/templates/core/flow_list.html

@@ -0,0 +1,46 @@
+{% extends 'base.html' %}
+
+{% block title %}Flows | FlowBot{% endblock %}
+
+{% block content %}
+<div class="container py-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 class="fw-bold">Conversation Flows</h2>
+        <a href="/admin/core/flow/add/" class="btn btn-coral px-4">Create New Flow</a>
+    </div>
+
+    <div class="row g-4">
+        {% for flow in flows %}
+        <div class="col-md-6">
+            <div class="card p-4">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h4 class="fw-bold mb-0">{{ flow.name }}</h4>
+                    {% if flow.is_default %}
+                        <span class="badge bg-indigo">Default</span>
+                    {% endif %}
+                </div>
+                <p class="text-muted mb-4">{{ flow.description|default:"No description provided." }}</p>
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <span class="badge bg-light text-dark">{{ flow.fanpage.name }}</span>
+                        <span class="small text-muted ms-2">{{ flow.nodes.count }} nodes</span>
+                    </div>
+                    <div class="btn-group">
+                        <a href="/admin/core/flow/{{ flow.id }}/change/" class="btn btn-sm btn-outline-indigo">Edit</a>
+                        <button class="btn btn-sm btn-indigo">Builder</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% empty %}
+        <div class="col-12 text-center py-5">
+            <div class="card p-5">
+                <h3 class="text-muted">No flows defined</h3>
+                <p>Start by creating a conversation flow for one of your pages.</p>
+                <a href="/admin/core/flow/add/" class="btn btn-coral mt-3 mx-auto" style="width: fit-content;">Create Flow</a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}

core/templates/core/index.html

@@ -1,145 +1,75 @@
-{% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<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;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% extends 'base.html' %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<section class="hero-section">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-6">
+                <h1 class="display-3 fw-bold mb-4">Automate Your <span class="text-coral">Facebook</span> Conversations</h1>
+                <p class="lead mb-5 opacity-75">Build powerful, multi-page chatbots with a simple flow builder. Scale your customer service 24/7 without breaking a sweat.</p>
+                <div class="d-flex gap-3">
+                    <a href="/admin/login/" class="btn btn-coral btn-lg px-4 py-3">Get Started Free</a>
+                    <a href="#features" class="btn btn-outline-light btn-lg px-4 py-3">How it Works</a>
+                </div>
+            </div>
+            <div class="col-lg-5 offset-lg-1 d-none d-lg-block">
+                <div class="glass-card">
+                    <div class="d-flex mb-4 align-items-center">
+                        <div class="bg-coral rounded-circle p-2 me-3">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                        </div>
+                        <h5 class="mb-0">Smart Auto-Reply</h5>
+                    </div>
+                    <div class="bg-white rounded p-3 mb-3 text-dark shadow-sm">
+                        <small class="text-muted d-block mb-1">Customer</small>
+                        "What are your opening hours?"
+                    </div>
+                    <div class="bg-indigo rounded p-3 text-white shadow-sm ms-5">
+                        <small class="text-coral d-block mb-1">FlowBot</small>
+                        "Hi there! We are open from 9 AM to 6 PM daily. Would you like to see our menu?"
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</section>
+
+<section id="features" class="py-5">
+    <div class="container py-5">
+        <div class="text-center mb-5">
+            <h2 class="display-5 fw-bold">Why Choose FlowBot?</h2>
+            <p class="text-muted">The ultimate tool for multi-fanpage management.</p>
+        </div>
+        <div class="row g-4">
+            <div class="col-md-4">
+                <div class="card h-100 p-4">
+                    <div class="text-coral mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
+                    </div>
+                    <h4>Multi-Page Support</h4>
+                    <p class="text-muted">Connect and manage unlimited Fanpages from a single dashboard. Each page can have its own unique flow.</p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 p-4">
+                    <div class="text-coral mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </div>
+                    <h4>Flow Builder</h4>
+                    <p class="text-muted">Design complex conversation trees with buttons, quick replies, and images. No coding required.</p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 p-4">
+                    <div class="text-coral mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </div>
+                    <h4>Real-time Analytics</h4>
+                    <p class="text-muted">Track bot performance and view chat history in real-time to optimize your customer experience.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 {% endblock %}

core/urls.py

@@ -1,7 +1,9 @@
 from django.urls import path
-
-from .views import home
+from . import views
 
 urlpatterns = [
-    path("", home, name="home"),
+    path('', views.home, name='home'),
+    path('dashboard/', views.dashboard, name='dashboard'),
+    path('fanpages/', views.fanpage_list, name='fanpage_list'),
+    path('flows/', views.flow_list, name='flow_list'),
 ]

core/views.py

@@ -1,25 +1,32 @@
-import os
-import platform
-
-from django import get_version as django_version
-from django.shortcuts import render
-from django.utils import timezone
-
+from django.shortcuts import render, redirect, get_object_or_404
+from django.contrib.auth.decorators import login_required
+from .models import Fanpage, Flow, MessageLog, ChatSession
 
 def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+    if request.user.is_authenticated:
+        return redirect('dashboard')
+    return render(request, 'core/index.html')
+
+@login_required
+def dashboard(request):
+    fanpages = Fanpage.objects.all()
+    flows = Flow.objects.all()
+    recent_logs = MessageLog.objects.order_by('-timestamp')[:10]
     
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        'fanpage_count': fanpages.count(),
+        'flow_count': flows.count(),
+        'fanpages': fanpages,
+        'recent_logs': recent_logs,
     }
-    return render(request, "core/index.html", context)
+    return render(request, 'core/dashboard.html', context)
+
+@login_required
+def fanpage_list(request):
+    fanpages = Fanpage.objects.all()
+    return render(request, 'core/fanpage_list.html', {'fanpages': fanpages})
+
+@login_required
+def flow_list(request):
+    flows = Flow.objects.all()
+    return render(request, 'core/flow_list.html', {'flows': flows})

static/css/custom.css

@@ -1,4 +1,74 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap');
+
+:root {
+    --fb-indigo: #2D3250;
+    --fb-slate: #424769;
+    --fb-grey: #7077A1;
+    --fb-coral: #F6B17A;
+    --fb-offwhite: #F0F0F0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--fb-offwhite);
+    color: var(--fb-indigo);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Outfit', sans-serif;
+}
+
+.bg-indigo { background-color: var(--fb-indigo) !important; }
+.bg-slate { background-color: var(--fb-slate) !important; }
+.text-coral { color: var(--fb-coral) !important; }
+.btn-coral {
+    background-color: var(--fb-coral);
+    color: var(--fb-indigo);
+    font-weight: 600;
+    border: none;
+    transition: all 0.3s ease;
+}
+.btn-coral:hover {
+    background-color: #e5a069;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(246, 177, 122, 0.3);
+}
+
+.navbar {
+    background-color: rgba(45, 50, 80, 0.95);
+    backdrop-filter: blur(10px);
+}
+
+.card {
+    border: none;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
+}
+
+.hero-section {
+    background: linear-gradient(135deg, var(--fb-indigo) 0%, var(--fb-slate) 100%);
+    color: white;
+    padding: 100px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section::after {
+    content: '';
+    position: absolute;
+    top: -10%;
+    right: -5%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, var(--fb-coral) 0%, transparent 70%);
+    opacity: 0.1;
+    border-radius: 50%;
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 30px;
 }

staticfiles/css/custom.css

@@ -1,21 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap');
 
 :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
+    --fb-indigo: #2D3250;
+    --fb-slate: #424769;
+    --fb-grey: #7077A1;
+    --fb-coral: #F6B17A;
+    --fb-offwhite: #F0F0F0;
 }
+
 body {
-    margin: 0;
     font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
+    background-color: var(--fb-offwhite);
+    color: var(--fb-indigo);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Outfit', sans-serif;
+}
+
+.bg-indigo { background-color: var(--fb-indigo) !important; }
+.bg-slate { background-color: var(--fb-slate) !important; }
+.text-coral { color: var(--fb-coral) !important; }
+.btn-coral {
+    background-color: var(--fb-coral);
+    color: var(--fb-indigo);
+    font-weight: 600;
+    border: none;
+    transition: all 0.3s ease;
+}
+.btn-coral:hover {
+    background-color: #e5a069;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(246, 177, 122, 0.3);
+}
+
+.navbar {
+    background-color: rgba(45, 50, 80, 0.95);
+    backdrop-filter: blur(10px);
+}
+
+.card {
+    border: none;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
+}
+
+.hero-section {
+    background: linear-gradient(135deg, var(--fb-indigo) 0%, var(--fb-slate) 100%);
+    color: white;
+    padding: 100px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section::after {
+    content: '';
+    position: absolute;
+    top: -10%;
+    right: -5%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, var(--fb-coral) 0%, transparent 70%);
+    opacity: 0.1;
+    border-radius: 50%;
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 30px;
 }