admin/37051-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai 1.1

Browse Source
This commit is contained in:
Flatlogic Bot 2025-12-19 09:26:44 +00:00
parent d80c3c0764
commit afdba84475
7 changed files with 336 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
core/templates/ai_chat_new.html
View File

@ -2,66 +2,43 @@
{% load static %} {% load static %}
{% block extra_head %} {% block extra_head %}
<style>
.chat-bubble {
max-width: 70%;
padding: 12px 16px;
border-radius: 20px;
margin-bottom: 8px;
word-wrap: break-word;
}
.user-bubble {
background-color: #007bff;
color: white;
align-self: flex-end;
margin-left: auto;
}
.ai-bubble {
background-color: #374151; /* gray-700 */
color: white;
align-self: flex-start;
margin-right: auto;
}
</style>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="flex h-screen bg-gray-900 text-white"> <div class="chat-container glass-card">
<!-- Sidebar --> <!-- Sidebar - Conversations List (Adjusted for new layout) -->
<div class="w-1/4 bg-gray-800 border-r border-gray-700"> <div class="flex flex-col w-64 border-r border-gray-700 bg-gray-800 p-4">
<div class="p-4 border-b border-gray-700"> <h2 class="text-xl font-bold mb-4">Conversations</h2>
<h2 class="text-xl font-bold">Conversations</h2> <div class="flex-1 overflow-y-auto">
</div>
<div class="p-4">
<!-- Conversation list will go here --> <!-- Conversation list will go here -->
<p class="text-gray-400">No conversations yet.</p> <p class="text-gray-400 text-sm">No conversations yet.</p>
</div> </div>
</div> </div>
<!-- Chat Area --> <!-- Chat Area (Adjusted for new layout) -->
<div class="flex flex-col w-3/4"> <div class="flex flex-col flex-1">
<!-- Header --> <!-- Header -->
<div class="bg-gray-800 p-4 border-b border-gray-700"> <div class="chat-header">
<h2 class="text-2xl font-bold">BotAI</h2> <h2 class="text-2xl font-bold">BotAI</h2>
</div> </div>
<!-- Messages --> <!-- Messages -->
<div id="chat-messages" class="flex-1 p-4 overflow-y-auto" style="max-height: 50vh;"> <div id="chat-messages" class="chat-box">
{% for message in messages %} {% for message in messages %}
<div class="chat-bubble {% if message.is_user %}user-bubble{% else %}ai-bubble{% endif %}"> <div class="chat-message {% if message.is_user %}user-message{% else %}ai-message{% endif %}">
{{ message.message|linebreaksbr }} <div class="message-content">
{{ message.message|linebreaksbr }}
</div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<!-- Input --> <!-- Input -->
<div class="bg-gray-800 p-4"> <div class="chat-input-area">
<form id="chat-form" class="flex items-center"> <form id="chat-form" class="flex items-center">
{% csrf_token %} {% csrf_token %}
<input type="text" id="message" name="message" class="w-full bg-gray-700 text-white rounded-full py-3 px-6 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type your message..."> <input type="text" id="message" name="message" class="chat-input" placeholder="Type your message...">
<button type="submit" class="ml-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3"> <button type="submit" class="send-button">
<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="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> <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="feather feather-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</button> </button>
</form> </form>
@ -118,10 +95,13 @@
} }
// Display user message // Display user message
const userBubble = document.createElement('div'); const userMessageDiv = document.createElement('div');
userBubble.classList.add('chat-bubble', 'user-bubble'); userMessageDiv.classList.add('chat-message', 'user-message');
userBubble.textContent = messageText; const userMessageContent = document.createElement('div');
chatMessages.appendChild(userBubble); userMessageContent.classList.add('message-content');
userMessageContent.textContent = messageText;
userMessageDiv.appendChild(userMessageContent);
chatMessages.appendChild(userMessageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight; chatMessages.scrollTop = chatMessages.scrollHeight;
messageInput.value = ''; messageInput.value = '';
@ -141,15 +121,21 @@
.then(data => { .then(data => {
if (data.error) { if (data.error) {
console.error('Error:', data.error); console.error('Error:', data.error);
const aiBubble = document.createElement('div'); const aiMessageDiv = document.createElement('div');
aiBubble.classList.add('chat-bubble', 'ai-bubble'); aiMessageDiv.classList.add('chat-message', 'ai-message');
aiBubble.textContent = `Error: ${data.error}`; const aiMessageContent = document.createElement('div');
chatMessages.appendChild(aiBubble); aiMessageContent.classList.add('message-content');
aiMessageContent.textContent = `Error: ${data.error}`;
aiMessageDiv.appendChild(aiMessageContent);
chatMessages.appendChild(aiMessageDiv);
} else if (data.reply) { } else if (data.reply) {
const aiBubble = document.createElement('div'); const aiMessageDiv = document.createElement('div');
aiBubble.classList.add('chat-bubble', 'ai-bubble'); aiMessageDiv.classList.add('chat-message', 'ai-message');
aiBubble.textContent = data.reply; const aiMessageContent = document.createElement('div');
chatMessages.appendChild(aiBubble); aiMessageContent.classList.add('message-content');
aiMessageContent.textContent = data.reply;
aiMessageDiv.appendChild(aiMessageContent);
chatMessages.appendChild(aiMessageDiv);
} else if (data.commands) { } else if (data.commands) {
data.commands.forEach(command => { data.commands.forEach(command => {
executeCommand(command); executeCommand(command);
@ -158,10 +144,13 @@
}) })
.catch(error => { .catch(error => {
console.error('Fetch error:', error); console.error('Fetch error:', error);
const aiBubble = document.createElement('div'); const aiMessageDiv = document.createElement('div');
aiBubble.classList.add('chat-bubble', 'ai-bubble'); aiMessageDiv.classList.add('chat-message', 'ai-message');
aiBubble.textContent = 'Sorry, something went wrong.'; const aiMessageContent = document.createElement('div');
chatMessages.appendChild(aiBubble); aiMessageContent.classList.add('message-content');
aiMessageContent.textContent = 'Sorry, something went wrong.';
aiMessageDiv.appendChild(aiMessageContent);
chatMessages.appendChild(aiMessageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight; chatMessages.scrollTop = chatMessages.scrollHeight;
}); });
}); });

65
core/templates/base.html
View File

@ -14,6 +14,9 @@
<meta property="twitter:image" content="{{ project_image_url }}"> <meta property="twitter:image" content="{{ project_image_url }}">
{% endif %} {% endif %}
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<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@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{% load static %} {% load static %}
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}"> <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
{% block head %}{% endblock %} {% block head %}{% endblock %}
@ -44,6 +47,10 @@
</div> </div>
</div> </div>
</div> </div>
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 ml-2">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
</button>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a> <a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a>
<a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a> <a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a>
@ -55,9 +62,30 @@
</div> </div>
</div> </div>
</nav> </nav>
<main> <main class="container mx-auto mt-4 px-4">
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="flex flex-col lg:flex-row gap-4">
{% block content %}{% endblock %} <aside class="lg:w-1/4">
<div class="glass-card p-4 h-full">
<h2 class="text-xl font-semibold mb-4">Navigation</h2>
<ul>
<li class="mb-2"><a href="{% url 'ai_chat' %}" class="hover:text-blue-500">AI Chat</a></li>
<li class="mb-2"><a href="{% url 'image_generator' %}" class="hover:text-blue-500">Image Generator</a></li>
<li class="mb-2"><a href="{% url 'ad_generator' %}" class="hover:text-blue-500">Ad Generator</a></li>
<li class="mb-2"><a href="{% url 'graphics_editor' %}" class="hover:text-blue-500">Graphics Editor</a></li>
<li class="mb-2"><a href="{% url 'post_list' %}" class="hover:text-blue-500">Blog</a></li>
{% if user.is_authenticated %}
<li class="mb-2"><a href="{% url 'post_create' %}" class="hover:text-blue-500">Create Post</a></li>
<li class="mb-2"><a href="{% url 'logout' %}" class="hover:text-blue-500">Logout</a></li>
{% else %}
<li class="mb-2"><a href="{% url 'login' %}" class="hover:text-blue-500">Login</a></li>
<li class="mb-2"><a href="{% url 'signup' %}" class="hover:text-blue-500">Sign Up</a></li>
{% endif %}
</ul>
</div>
</aside>
<section class="lg:w-3/4">
{% block content %}{% endblock %}
</section>
</div> </div>
</main> </main>
<script> <script>
@ -70,6 +98,37 @@
menuButton.setAttribute('aria-expanded', !isExpanded); menuButton.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('hidden'); menu.classList.toggle('hidden');
}); });
// Theme toggle logic
const themeToggleBtn = document.getElementById('theme-toggle');
const lightIcon = document.getElementById('theme-toggle-light-icon');
const darkIcon = document.getElementById('theme-toggle-dark-icon');
const htmlElement = document.documentElement;
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlElement.classList.add('dark');
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
} else {
htmlElement.classList.remove('dark');
lightIcon.classList.remove('hidden');
darkIcon.classList.add('hidden');
}
themeToggleBtn.addEventListener('click', function() {
if (htmlElement.classList.contains('dark')) {
htmlElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
lightIcon.classList.remove('hidden');
darkIcon.classList.add('hidden');
} else {
htmlElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
}
});
}); });
</script> </script>
</body> </body>

173
static/css/custom.css
View File

@ -1,7 +1,40 @@
:root {
/* Light Theme */
--bg-primary: #F0F2F5;
--bg-secondary: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #667085;
--accent-blue: #00A3B5;
--accent-green: #34C759;
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(220, 220, 220, 0.8);
--shadow-color: rgba(0, 0, 0, 0.08);
--heading-font: 'Poppins', sans-serif;
}
html.dark {
/* Dark Theme */
--bg-primary: #1C1C24;
--bg-secondary: #282830;
--text-primary: #E0E0E0;
--text-secondary: #A0A0A5;
--accent-blue: #00A3B5;
--accent-green: #4CD964;
--glass-bg: rgba(40, 40, 48, 0.6);
--glass-border: rgba(70, 70, 75, 0.7);
--shadow-color: rgba(0, 0, 0, 0.3);
--heading-font: 'Poppins', sans-serif;
}
body { body {
background: linear-gradient(to right, #0F2027, #203A43, #2C5364); background: var(--bg-primary);
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: #fff; color: var(--text-primary);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
color: var(--text-primary);
} }
.font-poppins { .font-poppins {
@ -13,18 +46,50 @@ body {
} }
.glass-card { .glass-card {
background: rgba(255, 255, 255, 0.1); background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 1.25rem; /* Slightly more rounded */
border: 1px solid var(--glass-border);
box-shadow: 0 4px 20px 0 var(--shadow-color); /* Softer, more diffused shadow */
}
/* Sidebar and Main Content Layout */
.container.mx-auto.mt-4.px-4 {
margin-top: 1.5rem; /* Adjust top margin for spacing */
}
aside {
background: var(--glass-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 1rem; border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); box-shadow: 0 8px 32px 0 var(--shadow-color);
padding: 1rem;
}
aside ul li a {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
aside ul li a:hover {
background-color: color-mix(in srgb, var(--bg-primary) 90%, var(--glass-border)); /* Subtle background on hover */
color: var(--accent-blue);
}
section.lg\:w-3\/4 {
/* Ensure main content area has some padding if needed */
padding: 1rem;
} }
/* Redefine form styles from forms.py to avoid specificity issues */ /* Redefine form styles from forms.py to avoid specificity issues */
.glass-card form .w-full.bg-gray-800 { .glass-card form .w-full.bg-gray-800 {
background-color: rgba(31, 41, 55, 0.5) !important; background-color: var(--bg-secondary) !important;
border-color: rgba(55, 65, 81, 0.5) !important; border-color: var(--glass-border) !important;
} }
/* Intent Badge Styles */ /* Intent Badge Styles */
@ -37,46 +102,50 @@ body {
} }
.intent-neutral { .intent-neutral {
background-color: #9CA3AF; /* gray-400 */ background-color: var(--text-secondary); /* gray-400 equivalent */
} }
.intent-safe { .intent-safe {
background-color: #10B981; /* green-500 */ background-color: var(--accent-green); /* green-500 equivalent */
} }
.intent-caution { .intent-caution {
background-color: #F59E0B; /* yellow-500 */ background-color: #F59E0B; /* yellow-500, keeping for now */
} }
.intent-warning { .intent-warning {
background-color: #EF4444; /* red-500 */ background-color: #EF4444; /* red-500, keeping for now */
} }
/* Image Generator Styles */ /* Image Generator Styles */
.btn-primary { .btn-primary {
background-color: #4A90E2; background-color: var(--accent-blue);
border-color: #4A90E2; border-color: var(--accent-blue);
transition: background-color 0.3s ease; border-radius: 0.75rem; /* More rounded */
padding: 0.75rem 1.5rem; /* More comfortable padding */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); /* Subtle lifted effect */
transition: background-color 0.3s ease, box-shadow 0.3s ease;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #357ABD; background-color: color-mix(in srgb, var(--accent-blue) 90%, black); /* Darker shade on hover */
border-color: #357ABD; border-color: color-mix(in srgb, var(--accent-blue) 90%, black);
box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
} }
.form-control { .form-control {
background-color: rgba(255, 255, 255, 0.2); background-color: var(--glass-bg);
border: none; border: 1px solid var(--glass-border);
color: #fff; color: var(--text-primary);
} }
.form-control::placeholder { .form-control::placeholder {
color: rgba(255, 255, 255, 0.7); color: var(--text-secondary);
} }
.card { .card {
background-color: rgba(0,0,0,0.2); background-color: var(--bg-secondary);
border: none; border: 1px solid var(--glass-border);
} }
/* AI Chat Styles */ /* AI Chat Styles */
@ -92,8 +161,9 @@ body {
.chat-header { .chat-header {
padding: 1rem; padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--glass-border);
text-align: center; text-align: center;
background-color: var(--bg-secondary);
} }
.chat-box { .chat-box {
@ -113,7 +183,7 @@ body {
.message-content { .message-content {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 1rem; border-radius: 0.75rem;
line-height: 1.5; line-height: 1.5;
} }
@ -128,9 +198,9 @@ body {
} }
.user-message .message-content { .user-message .message-content {
background-color: #4A90E2; background-color: var(--accent-blue);
color: #fff; color: var(--text-primary);
border-bottom-right-radius: 0; border-bottom-right-radius: 0.25rem;
} }
/* AI Message */ /* AI Message */
@ -140,14 +210,15 @@ body {
} }
.ai-message .message-content { .ai-message .message-content {
background: rgba(255, 255, 255, 0.15); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid var(--glass-border);
border-bottom-left-radius: 0; color: var(--text-primary);
border-bottom-left-radius: 0.25rem;
} }
.ai-message.error-message .message-content { .ai-message.error-message .message-content {
background-color: #721c24; background-color: #721c24; /* Keeping static for error visibility */
color: #f8d7da; color: #f8d7da; /* Keeping static for error visibility */
} }
/* Typing Indicator */ /* Typing Indicator */
@ -161,7 +232,7 @@ body {
height: 8px; height: 8px;
width: 8px; width: 8px;
margin: 0 2px; margin: 0 2px;
background-color: rgba(255, 255, 255, 0.4); background-color: var(--text-secondary);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
animation: bounce 1.4s infinite ease-in-out both; animation: bounce 1.4s infinite ease-in-out both;
@ -178,14 +249,15 @@ body {
/* Chat Input */ /* Chat Input */
.chat-input-area { .chat-input-area {
padding: 1rem; padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--glass-border);
background-color: var(--bg-secondary);
} }
.chat-input { .chat-input {
background: rgba(0, 0, 0, 0.2); background: var(--glass-bg);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border);
border-radius: 9999px; border-radius: 9999px;
color: #fff; color: var(--text-primary);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
flex-grow: 1; flex-grow: 1;
outline: none; outline: none;
@ -193,11 +265,11 @@ body {
} }
.chat-input:focus { .chat-input:focus {
border-color: #4A90E2; border-color: var(--accent-blue);
} }
.send-button { .send-button {
background: #4A90E2; background: var(--accent-blue);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 48px; width: 48px;
@ -206,13 +278,13 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 0.5rem; margin-left: 0.5rem;
color: #fff; color: var(--text-primary);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.send-button:hover { .send-button:hover {
background: #357ABD; background: var(--text-secondary);
} }
/* Code Block Styles */ /* Code Block Styles */
@ -222,17 +294,18 @@ body {
overflow: hidden; overflow: hidden;
} }
.code-block-header { .code-block-header {
background: #1a202c; background: var(--bg-secondary);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.875rem;
color: #a0aec0; color: var(--text-secondary);
border-bottom: 1px solid var(--glass-border);
} }
.copy-code-btn { .copy-code-btn {
background: #4a5568; background: var(--accent-blue);
color: white; color: var(--text-primary);
border: none; border: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
@ -240,18 +313,16 @@ body {
font-size: 0.75rem; font-size: 0.75rem;
} }
.copy-code-btn:hover { .copy-code-btn:hover {
background: #2d3748; background: var(--text-secondary);
} }
pre { pre {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background: #2d3748; background: var(--bg-secondary);
color: #e2e8f0; color: var(--text-primary);
overflow-x: auto; overflow-x: auto;
} }
code { code {
font-family: 'Fira Code', 'Courier New', monospace; font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.875rem;
} }

154
staticfiles/css/custom.css
View File

@ -1,7 +1,33 @@
:root {
/* Light Theme */
--bg-primary: #f8f9fa;
--bg-secondary: #ffffff;
--text-primary: #212529;
--text-secondary: #6c757d;
--accent-blue: #007bff;
--accent-green: #28a745;
--glass-bg: rgba(255, 255, 255, 0.6);
--glass-border: rgba(220, 220, 220, 0.7);
--shadow-color: rgba(0, 0, 0, 0.1);
}
html.dark {
/* Dark Theme */
--bg-primary: #0F172A;
--bg-secondary: #1A202C;
--text-primary: #f8f9fa;
--text-secondary: #a0aec0;
--accent-blue: #667EEA;
--accent-green: #38A169;
--glass-bg: rgba(0, 0, 0, 0.4);
--glass-border: rgba(60, 60, 60, 0.7);
--shadow-color: rgba(0, 0, 0, 0.5);
}
body { body {
background: linear-gradient(to right, #0F2027, #203A43, #2C5364); background: var(--bg-primary);
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: #fff; color: var(--text-primary);
} }
.font-poppins { .font-poppins {
@ -13,18 +39,50 @@ body {
} }
.glass-card { .glass-card {
background: rgba(255, 255, 255, 0.1); background: var(--glass-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 1rem; border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); box-shadow: 0 8px 32px 0 var(--shadow-color);
}
/* Sidebar and Main Content Layout */
.container.mx-auto.mt-4.px-4 {
margin-top: 1.5rem; /* Adjust top margin for spacing */
}
aside {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 1rem;
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 var(--shadow-color);
padding: 1rem;
}
aside ul li a {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
aside ul li a:hover {
background-color: var(--bg-secondary);
color: var(--accent-blue);
}
section.lg\:w-3\/4 {
/* Ensure main content area has some padding if needed */
padding: 1rem;
} }
/* Redefine form styles from forms.py to avoid specificity issues */ /* Redefine form styles from forms.py to avoid specificity issues */
.glass-card form .w-full.bg-gray-800 { .glass-card form .w-full.bg-gray-800 {
background-color: rgba(31, 41, 55, 0.5) !important; background-color: var(--bg-secondary) !important;
border-color: rgba(55, 65, 81, 0.5) !important; border-color: var(--glass-border) !important;
} }
/* Intent Badge Styles */ /* Intent Badge Styles */
@ -37,46 +95,46 @@ body {
} }
.intent-neutral { .intent-neutral {
background-color: #9CA3AF; /* gray-400 */ background-color: var(--text-secondary); /* gray-400 equivalent */
} }
.intent-safe { .intent-safe {
background-color: #10B981; /* green-500 */ background-color: var(--accent-green); /* green-500 equivalent */
} }
.intent-caution { .intent-caution {
background-color: #F59E0B; /* yellow-500 */ background-color: #F59E0B; /* yellow-500, keeping for now */
} }
.intent-warning { .intent-warning {
background-color: #EF4444; /* red-500 */ background-color: #EF4444; /* red-500, keeping for now */
} }
/* Image Generator Styles */ /* Image Generator Styles */
.btn-primary { .btn-primary {
background-color: #4A90E2; background-color: var(--accent-blue);
border-color: #4A90E2; border-color: var(--accent-blue);
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #357ABD; background-color: var(--text-secondary);
border-color: #357ABD; border-color: var(--text-secondary);
} }
.form-control { .form-control {
background-color: rgba(255, 255, 255, 0.2); background-color: var(--glass-bg);
border: none; border: 1px solid var(--glass-border);
color: #fff; color: var(--text-primary);
} }
.form-control::placeholder { .form-control::placeholder {
color: rgba(255, 255, 255, 0.7); color: var(--text-secondary);
} }
.card { .card {
background-color: rgba(0,0,0,0.2); background-color: var(--bg-secondary);
border: none; border: 1px solid var(--glass-border);
} }
/* AI Chat Styles */ /* AI Chat Styles */
@ -92,8 +150,9 @@ body {
.chat-header { .chat-header {
padding: 1rem; padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--glass-border);
text-align: center; text-align: center;
background-color: var(--bg-secondary);
} }
.chat-box { .chat-box {
@ -128,8 +187,8 @@ body {
} }
.user-message .message-content { .user-message .message-content {
background-color: #4A90E2; background-color: var(--accent-blue);
color: #fff; color: var(--text-primary);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -140,14 +199,15 @@ body {
} }
.ai-message .message-content { .ai-message .message-content {
background: rgba(255, 255, 255, 0.15); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid var(--glass-border);
color: var(--text-primary);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.ai-message.error-message .message-content { .ai-message.error-message .message-content {
background-color: #721c24; background-color: #721c24; /* Keeping static for error visibility */
color: #f8d7da; color: #f8d7da; /* Keeping static for error visibility */
} }
/* Typing Indicator */ /* Typing Indicator */
@ -161,7 +221,7 @@ body {
height: 8px; height: 8px;
width: 8px; width: 8px;
margin: 0 2px; margin: 0 2px;
background-color: rgba(255, 255, 255, 0.4); background-color: var(--text-secondary);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
animation: bounce 1.4s infinite ease-in-out both; animation: bounce 1.4s infinite ease-in-out both;
@ -178,14 +238,15 @@ body {
/* Chat Input */ /* Chat Input */
.chat-input-area { .chat-input-area {
padding: 1rem; padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--glass-border);
background-color: var(--bg-secondary);
} }
.chat-input { .chat-input {
background: rgba(0, 0, 0, 0.2); background: var(--glass-bg);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border);
border-radius: 9999px; border-radius: 9999px;
color: #fff; color: var(--text-primary);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
flex-grow: 1; flex-grow: 1;
outline: none; outline: none;
@ -193,11 +254,11 @@ body {
} }
.chat-input:focus { .chat-input:focus {
border-color: #4A90E2; border-color: var(--accent-blue);
} }
.send-button { .send-button {
background: #4A90E2; background: var(--accent-blue);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 48px; width: 48px;
@ -206,13 +267,13 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 0.5rem; margin-left: 0.5rem;
color: #fff; color: var(--text-primary);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.send-button:hover { .send-button:hover {
background: #357ABD; background: var(--text-secondary);
} }
/* Code Block Styles */ /* Code Block Styles */
@ -222,17 +283,18 @@ body {
overflow: hidden; overflow: hidden;
} }
.code-block-header { .code-block-header {
background: #1a202c; background: var(--bg-secondary);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.875rem;
color: #a0aec0; color: var(--text-secondary);
border-bottom: 1px solid var(--glass-border);
} }
.copy-code-btn { .copy-code-btn {
background: #4a5568; background: var(--accent-blue);
color: white; color: var(--text-primary);
border: none; border: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
@ -240,18 +302,16 @@ body {
font-size: 0.75rem; font-size: 0.75rem;
} }
.copy-code-btn:hover { .copy-code-btn:hover {
background: #2d3748; background: var(--text-secondary);
} }
pre { pre {
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
background: #2d3748; background: var(--bg-secondary);
color: #e2e8f0; color: var(--text-primary);
overflow-x: auto; overflow-x: auto;
} }
code { code {
font-family: 'Fira Code', 'Courier New', monospace; font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.875rem;
} }

BIN
staticfiles/pasted-20251219-023919-8b35c0f2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
staticfiles/pasted-20251219-024826-df897180.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 384 KiB

BIN
staticfiles/pasted-20251219-030116-b9572f80.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 596 KiB