ai 1.1
This commit is contained in:
Flatlogic Bot
parent
d80c3c0764
commit
afdba84475
@ -2,66 +2,43 @@
|
||||
{% load static %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex h-screen bg-gray-900 text-white">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-1/4 bg-gray-800 border-r border-gray-700">
|
||||
<div class="p-4 border-b border-gray-700">
|
||||
<h2 class="text-xl font-bold">Conversations</h2>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="chat-container glass-card">
|
||||
<!-- Sidebar - Conversations List (Adjusted for new layout) -->
|
||||
<div class="flex flex-col w-64 border-r border-gray-700 bg-gray-800 p-4">
|
||||
<h2 class="text-xl font-bold mb-4">Conversations</h2>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<!-- 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>
|
||||
|
||||
<!-- Chat Area -->
|
||||
<div class="flex flex-col w-3/4">
|
||||
<!-- Chat Area (Adjusted for new layout) -->
|
||||
<div class="flex flex-col flex-1">
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- 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 %}
|
||||
<div class="chat-bubble {% if message.is_user %}user-bubble{% else %}ai-bubble{% endif %}">
|
||||
{{ message.message|linebreaksbr }}
|
||||
<div class="chat-message {% if message.is_user %}user-message{% else %}ai-message{% endif %}">
|
||||
<div class="message-content">
|
||||
{{ message.message|linebreaksbr }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="bg-gray-800 p-4">
|
||||
<div class="chat-input-area">
|
||||
<form id="chat-form" class="flex items-center">
|
||||
{% 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...">
|
||||
<button type="submit" class="ml-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3">
|
||||
<input type="text" id="message" name="message" class="chat-input" placeholder="Type your message...">
|
||||
<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>
|
||||
</button>
|
||||
</form>
|
||||
@ -118,10 +95,13 @@
|
||||
}
|
||||
|
||||
// Display user message
|
||||
const userBubble = document.createElement('div');
|
||||
userBubble.classList.add('chat-bubble', 'user-bubble');
|
||||
userBubble.textContent = messageText;
|
||||
chatMessages.appendChild(userBubble);
|
||||
const userMessageDiv = document.createElement('div');
|
||||
userMessageDiv.classList.add('chat-message', 'user-message');
|
||||
const userMessageContent = document.createElement('div');
|
||||
userMessageContent.classList.add('message-content');
|
||||
userMessageContent.textContent = messageText;
|
||||
userMessageDiv.appendChild(userMessageContent);
|
||||
chatMessages.appendChild(userMessageDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
|
||||
messageInput.value = '';
|
||||
@ -141,15 +121,21 @@
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.error('Error:', data.error);
|
||||
const aiBubble = document.createElement('div');
|
||||
aiBubble.classList.add('chat-bubble', 'ai-bubble');
|
||||
aiBubble.textContent = `Error: ${data.error}`;
|
||||
chatMessages.appendChild(aiBubble);
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.classList.add('chat-message', 'ai-message');
|
||||
const aiMessageContent = document.createElement('div');
|
||||
aiMessageContent.classList.add('message-content');
|
||||
aiMessageContent.textContent = `Error: ${data.error}`;
|
||||
aiMessageDiv.appendChild(aiMessageContent);
|
||||
chatMessages.appendChild(aiMessageDiv);
|
||||
} else if (data.reply) {
|
||||
const aiBubble = document.createElement('div');
|
||||
aiBubble.classList.add('chat-bubble', 'ai-bubble');
|
||||
aiBubble.textContent = data.reply;
|
||||
chatMessages.appendChild(aiBubble);
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.classList.add('chat-message', 'ai-message');
|
||||
const aiMessageContent = document.createElement('div');
|
||||
aiMessageContent.classList.add('message-content');
|
||||
aiMessageContent.textContent = data.reply;
|
||||
aiMessageDiv.appendChild(aiMessageContent);
|
||||
chatMessages.appendChild(aiMessageDiv);
|
||||
} else if (data.commands) {
|
||||
data.commands.forEach(command => {
|
||||
executeCommand(command);
|
||||
@ -158,10 +144,13 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fetch error:', error);
|
||||
const aiBubble = document.createElement('div');
|
||||
aiBubble.classList.add('chat-bubble', 'ai-bubble');
|
||||
aiBubble.textContent = 'Sorry, something went wrong.';
|
||||
chatMessages.appendChild(aiBubble);
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.classList.add('chat-message', 'ai-message');
|
||||
const aiMessageContent = document.createElement('div');
|
||||
aiMessageContent.classList.add('message-content');
|
||||
aiMessageContent.textContent = 'Sorry, something went wrong.';
|
||||
aiMessageDiv.appendChild(aiMessageContent);
|
||||
chatMessages.appendChild(aiMessageDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,6 +14,9 @@
|
||||
<meta property="twitter:image" content="{{ project_image_url }}">
|
||||
{% endif %}
|
||||
<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 %}
|
||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
|
||||
{% block head %}{% endblock %}
|
||||
@ -44,6 +47,10 @@
|
||||
</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 %}
|
||||
<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>
|
||||
@ -55,9 +62,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
{% block content %}{% endblock %}
|
||||
<main class="container mx-auto mt-4 px-4">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<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>
|
||||
</main>
|
||||
<script>
|
||||
@ -70,6 +98,37 @@
|
||||
menuButton.setAttribute('aria-expanded', !isExpanded);
|
||||
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>
|
||||
</body>
|
||||
|
||||
@ -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 {
|
||||
background: linear-gradient(to right, #0F2027, #203A43, #2C5364);
|
||||
background: var(--bg-primary);
|
||||
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 {
|
||||
@ -13,18 +46,50 @@ body {
|
||||
}
|
||||
|
||||
.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);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
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: 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 */
|
||||
.glass-card form .w-full.bg-gray-800 {
|
||||
background-color: rgba(31, 41, 55, 0.5) !important;
|
||||
border-color: rgba(55, 65, 81, 0.5) !important;
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--glass-border) !important;
|
||||
}
|
||||
|
||||
/* Intent Badge Styles */
|
||||
@ -37,46 +102,50 @@ body {
|
||||
}
|
||||
|
||||
.intent-neutral {
|
||||
background-color: #9CA3AF; /* gray-400 */
|
||||
background-color: var(--text-secondary); /* gray-400 equivalent */
|
||||
}
|
||||
|
||||
.intent-safe {
|
||||
background-color: #10B981; /* green-500 */
|
||||
background-color: var(--accent-green); /* green-500 equivalent */
|
||||
}
|
||||
|
||||
.intent-caution {
|
||||
background-color: #F59E0B; /* yellow-500 */
|
||||
background-color: #F59E0B; /* yellow-500, keeping for now */
|
||||
}
|
||||
|
||||
.intent-warning {
|
||||
background-color: #EF4444; /* red-500 */
|
||||
background-color: #EF4444; /* red-500, keeping for now */
|
||||
}
|
||||
|
||||
/* Image Generator Styles */
|
||||
.btn-primary {
|
||||
background-color: #4A90E2;
|
||||
border-color: #4A90E2;
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
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 {
|
||||
background-color: #357ABD;
|
||||
border-color: #357ABD;
|
||||
background-color: color-mix(in srgb, var(--accent-blue) 90%, black); /* Darker shade on hover */
|
||||
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 {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
border: none;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* AI Chat Styles */
|
||||
@ -92,8 +161,9 @@ body {
|
||||
|
||||
.chat-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
text-align: center;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
@ -113,7 +183,7 @@ body {
|
||||
|
||||
.message-content {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -128,9 +198,9 @@ body {
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: #4A90E2;
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 0;
|
||||
background-color: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* AI Message */
|
||||
@ -140,14 +210,15 @@ body {
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom-left-radius: 0;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.ai-message.error-message .message-content {
|
||||
background-color: #721c24;
|
||||
color: #f8d7da;
|
||||
background-color: #721c24; /* Keeping static for error visibility */
|
||||
color: #f8d7da; /* Keeping static for error visibility */
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
@ -161,7 +232,7 @@ body {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin: 0 2px;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
background-color: var(--text-secondary);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
@ -178,14 +249,15 @@ body {
|
||||
/* Chat Input */
|
||||
.chat-input-area {
|
||||
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 {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
@ -193,11 +265,11 @@ body {
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: #4A90E2;
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: #4A90E2;
|
||||
background: var(--accent-blue);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
@ -206,13 +278,13 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0.5rem;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: #357ABD;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Code Block Styles */
|
||||
@ -222,17 +294,18 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-block-header {
|
||||
background: #1a202c;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: #a0aec0;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.copy-code-btn {
|
||||
background: #4a5568;
|
||||
color: white;
|
||||
background: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
@ -240,18 +313,16 @@ body {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.copy-code-btn:hover {
|
||||
background: #2d3748;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
}
|
||||
code {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -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 {
|
||||
background: linear-gradient(to right, #0F2027, #203A43, #2C5364);
|
||||
background: var(--bg-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.font-poppins {
|
||||
@ -13,18 +39,50 @@ body {
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
border: 1px solid var(--glass-border);
|
||||
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 */
|
||||
.glass-card form .w-full.bg-gray-800 {
|
||||
background-color: rgba(31, 41, 55, 0.5) !important;
|
||||
border-color: rgba(55, 65, 81, 0.5) !important;
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--glass-border) !important;
|
||||
}
|
||||
|
||||
/* Intent Badge Styles */
|
||||
@ -37,46 +95,46 @@ body {
|
||||
}
|
||||
|
||||
.intent-neutral {
|
||||
background-color: #9CA3AF; /* gray-400 */
|
||||
background-color: var(--text-secondary); /* gray-400 equivalent */
|
||||
}
|
||||
|
||||
.intent-safe {
|
||||
background-color: #10B981; /* green-500 */
|
||||
background-color: var(--accent-green); /* green-500 equivalent */
|
||||
}
|
||||
|
||||
.intent-caution {
|
||||
background-color: #F59E0B; /* yellow-500 */
|
||||
background-color: #F59E0B; /* yellow-500, keeping for now */
|
||||
}
|
||||
|
||||
.intent-warning {
|
||||
background-color: #EF4444; /* red-500 */
|
||||
background-color: #EF4444; /* red-500, keeping for now */
|
||||
}
|
||||
|
||||
/* Image Generator Styles */
|
||||
.btn-primary {
|
||||
background-color: #4A90E2;
|
||||
border-color: #4A90E2;
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #357ABD;
|
||||
border-color: #357ABD;
|
||||
background-color: var(--text-secondary);
|
||||
border-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
border: none;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* AI Chat Styles */
|
||||
@ -92,8 +150,9 @@ body {
|
||||
|
||||
.chat-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
text-align: center;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
@ -128,8 +187,8 @@ body {
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: #4A90E2;
|
||||
color: #fff;
|
||||
background-color: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@ -140,14 +199,15 @@ body {
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.ai-message.error-message .message-content {
|
||||
background-color: #721c24;
|
||||
color: #f8d7da;
|
||||
background-color: #721c24; /* Keeping static for error visibility */
|
||||
color: #f8d7da; /* Keeping static for error visibility */
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
@ -161,7 +221,7 @@ body {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin: 0 2px;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
background-color: var(--text-secondary);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
@ -178,14 +238,15 @@ body {
|
||||
/* Chat Input */
|
||||
.chat-input-area {
|
||||
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 {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 9999px;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
@ -193,11 +254,11 @@ body {
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: #4A90E2;
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: #4A90E2;
|
||||
background: var(--accent-blue);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
@ -206,13 +267,13 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0.5rem;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: #357ABD;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Code Block Styles */
|
||||
@ -222,17 +283,18 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-block-header {
|
||||
background: #1a202c;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: #a0aec0;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.copy-code-btn {
|
||||
background: #4a5568;
|
||||
color: white;
|
||||
background: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
@ -240,18 +302,16 @@ body {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.copy-code-btn:hover {
|
||||
background: #2d3748;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
}
|
||||
code {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
BIN
staticfiles/pasted-20251219-023919-8b35c0f2.jpg
Normal file
BIN
staticfiles/pasted-20251219-023919-8b35c0f2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
BIN
staticfiles/pasted-20251219-024826-df897180.jpg
Normal file
BIN
staticfiles/pasted-20251219-024826-df897180.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
BIN
staticfiles/pasted-20251219-030116-b9572f80.jpg
Normal file
BIN
staticfiles/pasted-20251219-030116-b9572f80.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
Loading…
x
Reference in New Issue
Block a user