diff --git a/core/__pycache__/urls.cpython-311.pyc b/core/__pycache__/urls.cpython-311.pyc index 1f807fa..7e24764 100644 Binary files a/core/__pycache__/urls.cpython-311.pyc and b/core/__pycache__/urls.cpython-311.pyc differ diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc index 6867ddf..96db8e1 100644 Binary files a/core/__pycache__/views.cpython-311.pyc and b/core/__pycache__/views.cpython-311.pyc differ diff --git a/core/templates/base.html b/core/templates/base.html index 1e7e5fb..76bc253 100644 --- a/core/templates/base.html +++ b/core/templates/base.html @@ -14,12 +14,16 @@ {% endif %} {% load static %} + + + {% block head %}{% endblock %} {% block content %}{% endblock %} + {% block extra_js %}{% endblock %} diff --git a/core/templates/core/create_agent.html b/core/templates/core/create_agent.html new file mode 100644 index 0000000..7fee59a --- /dev/null +++ b/core/templates/core/create_agent.html @@ -0,0 +1,79 @@ +{% extends 'base.html' %} +{% load static %} + +{% block title %}Create New AI Agent{% endblock %} + +{% block content %} +
+
+
+
+
+
+

Hello! I'm here to help you create a new AI agent. What is the agent's purpose?

+
+
+
+ {% csrf_token %} +
+ + +
+
+
+
+
+
+{% endblock %} + +{% block extra_js %} + +{% endblock %} \ No newline at end of file diff --git a/core/templates/core/index.html b/core/templates/core/index.html index faec813..c54a2ee 100644 --- a/core/templates/core/index.html +++ b/core/templates/core/index.html @@ -1,145 +1,54 @@ -{% extends "base.html" %} +{% extends 'base.html' %} +{% load static %} -{% block title %}{{ project_name }}{% endblock %} +{% block title %}AI Agent Studio - Build & Deploy AI Agents{% endblock %} {% block head %} - - - - + + + {% endblock %} {% block content %} -
-
-

Analyzing your requirements and generating your app…

-
- Loading… +
+
+

Welcome to AI Agent Studio

+

The open-source platform to design, test, and deploy powerful AI agents. No limits, no pricing tiers.

+ Start Building Your First Agent
-

AppWizzy AI is collecting your requirements and applying the first changes.

-

This page will refresh automatically as the plan is implemented.

-

- Runtime: Django {{ django_version }} · Python {{ python_version }} - — UTC {{ current_time|date:"Y-m-d H:i:s" }} -

-
-
- -{% endblock %} \ No newline at end of file + + +
+
+

Explore What You Can Build

+

These examples are just the beginning. Your imagination is the only limit.

+
+ +
+ +
+
+

Customer Support Bot

+

An intelligent bot that handles common customer queries, freeing up your team for complex issues.

+
+ + +
+
+

Data Analyst Agent

+

Connect your data sources and let this agent find trends, generate reports, and provide insights.

+
+ + +
+
+

Code Generation Assistant

+

Describe a function or component, and this agent will generate the boilerplate code for you in any language.

+
+
+ +
+ Create a New Agent +
+
+{% endblock %} diff --git a/core/urls.py b/core/urls.py index 6299e3d..c2c34b7 100644 --- a/core/urls.py +++ b/core/urls.py @@ -1,7 +1,8 @@ from django.urls import path -from .views import home +from .views import home, create_agent urlpatterns = [ path("", home, name="home"), + path("create-agent/", create_agent, name="create_agent"), ] diff --git a/core/views.py b/core/views.py index c9aed12..a2af674 100644 --- a/core/views.py +++ b/core/views.py @@ -3,9 +3,9 @@ import platform from django import get_version as django_version from django.shortcuts import render +from django.http import JsonResponse from django.utils import timezone - def home(request): """Render the landing screen with loader and environment details.""" host_name = request.get_host().lower() @@ -23,3 +23,12 @@ def home(request): "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""), } return render(request, "core/index.html", context) + +def create_agent(request): + # This is the agent creation view + if request.method == 'POST': + message = request.POST.get('message', '') + # Simple echo response for now + response_message = f"This is a simulated response to: '{message}'" + return JsonResponse({'message': response_message}) + return render(request, "core/create_agent.html") diff --git a/static/css/custom.css b/static/css/custom.css index 925f6ed..47db51d 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1,4 +1,239 @@ -/* Custom styles for the application */ -body { - font-family: system-ui, -apple-system, sans-serif; +/* static/css/custom.css */ + +/* Core Palette & Typography */ +:root { + --primary-color: #1A237E; /* Dark Blue */ + --secondary-color: #F5F5F5; /* Light Gray */ + --accent-color: #2962FF; /* Bright Blue */ + --text-dark: #212121; + --text-light: #FFFFFF; + --font-headings: 'Poppins', sans-serif; + --font-body: 'Roboto', sans-serif; +} + +body { + font-family: var(--font-body); + color: var(--text-dark); + background-color: var(--secondary-color); + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); + font-weight: 600; + color: var(--primary-color); +} + +a { + color: var(--accent-color); + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: var(--primary-color); + text-decoration: underline; +} + +.btn-primary { + background-color: var(--accent-color); + border-color: var(--accent-color); + font-family: var(--font-headings); + font-weight: 500; + padding: 0.75rem 1.5rem; + border-radius: 50px; /* Pill-shaped buttons */ + transition: all 0.3s ease; +} + +.btn-primary:hover { + background-color: var(--primary-color); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.1); +} + + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: var(--text-light); + padding: 6rem 1rem; + text-align: center; + margin-bottom: 4rem; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; + color: var(--text-light); + margin-bottom: 1rem; +} + +.hero p { + font-size: 1.25rem; + max-width: 600px; + margin: 0 auto 2rem; + opacity: 0.9; +} + + +/* Agent Showcase */ +.agent-showcase { + padding-bottom: 4rem; +} + +.agent-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.agent-card { + background: #fff; + border-radius: 12px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); + padding: 2rem; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.agent-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); +} + +.agent-card .icon { + font-size: 3rem; + margin-bottom: 1rem; + /* Using a simple emoji as a placeholder */ + /* In a real app, this would be an image or SVG icon */ +} + +.agent-card h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.agent-card p { + + color: #6c757d; + + font-size: 1rem; + +} + + + +/* Chat Interface */ + +.chat-container { + + max-width: 800px; + + margin: 0 auto; + + background-color: #fff; + + border-radius: 12px; + + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); + + overflow: hidden; + +} + + + +.chat-messages { + + padding: 2rem; + + overflow-y: auto; + +} + + + +.message-bubble { + + padding: 0.75rem 1.25rem; + + border-radius: 20px; + + margin-bottom: 1rem; + + max-width: 80%; + + line-height: 1.5; + +} + + + +.message-bubble.sent { + + background-color: var(--accent-color); + + color: var(--text-light); + + margin-left: auto; + + border-bottom-right-radius: 5px; + +} + + + +.message-bubble.received { + + background-color: var(--secondary-color); + + color: var(--text-dark); + + margin-right: auto; + + border-bottom-left-radius: 5px; + +} + + + +.chat-input-container { + + padding: 1rem 2rem; + + background-color: #fff; + + border-top: 1px solid #eee; + +} + + + +.chat-input-container .form-control { + + border-radius: 50px; + + border-color: #ced4da; + + padding: 0.75rem 1.25rem; + +} + + + +.chat-input-container .form-control:focus { + + box-shadow: none; + + border-color: var(--accent-color); + +} + + + +.chat-input-container .btn { + + border-radius: 50px; + } diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css index 108056f..47db51d 100644 --- a/staticfiles/css/custom.css +++ b/staticfiles/css/custom.css @@ -1,21 +1,239 @@ +/* static/css/custom.css */ +/* Core Palette & Typography */ :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); + --primary-color: #1A237E; /* Dark Blue */ + --secondary-color: #F5F5F5; /* Light Gray */ + --accent-color: #2962FF; /* Bright Blue */ + --text-dark: #212121; + --text-light: #FFFFFF; + --font-headings: 'Poppins', sans-serif; + --font-body: 'Roboto', sans-serif; } + 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; + font-family: var(--font-body); + color: var(--text-dark); + background-color: var(--secondary-color); + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); + font-weight: 600; + color: var(--primary-color); +} + +a { + color: var(--accent-color); + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: var(--primary-color); + text-decoration: underline; +} + +.btn-primary { + background-color: var(--accent-color); + border-color: var(--accent-color); + font-family: var(--font-headings); + font-weight: 500; + padding: 0.75rem 1.5rem; + border-radius: 50px; /* Pill-shaped buttons */ + transition: all 0.3s ease; +} + +.btn-primary:hover { + background-color: var(--primary-color); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.1); +} + + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: var(--text-light); + padding: 6rem 1rem; + text-align: center; + margin-bottom: 4rem; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; + color: var(--text-light); + margin-bottom: 1rem; +} + +.hero p { + font-size: 1.25rem; + max-width: 600px; + margin: 0 auto 2rem; + opacity: 0.9; +} + + +/* Agent Showcase */ +.agent-showcase { + padding-bottom: 4rem; +} + +.agent-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.agent-card { + background: #fff; + border-radius: 12px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); + padding: 2rem; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.agent-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); +} + +.agent-card .icon { + font-size: 3rem; + margin-bottom: 1rem; + /* Using a simple emoji as a placeholder */ + /* In a real app, this would be an image or SVG icon */ +} + +.agent-card h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.agent-card p { + + color: #6c757d; + + font-size: 1rem; + +} + + + +/* Chat Interface */ + +.chat-container { + + max-width: 800px; + + margin: 0 auto; + + background-color: #fff; + + border-radius: 12px; + + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); + + overflow: hidden; + +} + + + +.chat-messages { + + padding: 2rem; + + overflow-y: auto; + +} + + + +.message-bubble { + + padding: 0.75rem 1.25rem; + + border-radius: 20px; + + margin-bottom: 1rem; + + max-width: 80%; + + line-height: 1.5; + +} + + + +.message-bubble.sent { + + background-color: var(--accent-color); + + color: var(--text-light); + + margin-left: auto; + + border-bottom-right-radius: 5px; + +} + + + +.message-bubble.received { + + background-color: var(--secondary-color); + + color: var(--text-dark); + + margin-right: auto; + + border-bottom-left-radius: 5px; + +} + + + +.chat-input-container { + + padding: 1rem 2rem; + + background-color: #fff; + + border-top: 1px solid #eee; + +} + + + +.chat-input-container .form-control { + + border-radius: 50px; + + border-color: #ced4da; + + padding: 0.75rem 1.25rem; + +} + + + +.chat-input-container .form-control:focus { + + box-shadow: none; + + border-color: var(--accent-color); + +} + + + +.chat-input-container .btn { + + border-radius: 50px; + }