ai version 2.0
This commit is contained in:
Flatlogic Bot
parent
afdba84475
commit
462de22285
@ -6,14 +6,6 @@
|
||||
|
||||
{% block content %}
|
||||
<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 text-sm">No conversations yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Area (Adjusted for new layout) -->
|
||||
<div class="flex flex-col flex-1">
|
||||
|
||||
@ -22,83 +22,38 @@
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
||||
<nav class="bg-white dark:bg-gray-800 shadow-md">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="{% url 'landing_page' %}" class="font-bold text-xl">Cipher Shield</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<a href="{% url 'post_list' %}" 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">Blog</a>
|
||||
<div class="relative inline-block text-left">
|
||||
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="false">
|
||||
Tools
|
||||
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<div class="py-1" role="none">
|
||||
<a href="{% url 'image_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Image Generator</a>
|
||||
<a href="{% url 'ad_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Ad Generator</a>
|
||||
<a href="{% url 'ai_chat' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">AI Chat</a>
|
||||
<a href="{% url 'graphics_editor' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Graphics Editor</a>
|
||||
</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>
|
||||
{% else %}
|
||||
<a href="{% url 'login' %}" 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">Login</a>
|
||||
<a href="{% url 'signup' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">Sign Up</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<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>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<aside>
|
||||
<h2 class="text-2xl font-poppins font-semibold mb-6">Cipher Shield</h2>
|
||||
<button id="theme-toggle" type="button" class="flex items-center justify-center p-2.5 mb-6 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">
|
||||
<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>
|
||||
<h3 class="text-lg font-semibold mb-4 text-text-primary">Navigation</h3>
|
||||
<ul>
|
||||
<li><a href="{% url 'landing_page' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.135-.439 1.576 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>Home</a></li>
|
||||
<li><a href="{% url 'ai_chat' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5m-4.5 0h7.5M12 10.5h.008v.008H12V10.5zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25h.008v.008H12V14.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>AI Chat</a></li>
|
||||
<li><a href="{% url 'image_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l1.5-1.5m1.5 1.5l1.5-1.5M2.25 15.75l3-3m-3 3l3 3m12 0l-3-3m3 3l-3 3m3-3l1.5-1.5m-1.5 1.5l1.5 1.5M19.5 15.75l1.5-1.5m-1.5 1.5l-1.5 1.5M4.5 12a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" /></svg>Image Generator</a></li>
|
||||
<li><a href="{% url 'ad_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>Ad Generator</a></li>
|
||||
<li><a href="{% url 'graphics_editor' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14.25v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>Graphics Editor</a></li>
|
||||
<li><a href="{% url 'post_list' %} "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12a2.25 2.25 0 01-2.25-2.25V6.75C9.75 6.129 10.254 5.625 10.875 5.625h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12M7.5 11.25h.008v.008H7.5V11.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Blog</a></li>
|
||||
{% if user.is_authenticated %}
|
||||
<li><a href="{% url 'post_create' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>Create Post</a></li>
|
||||
<li><a href="{% url 'logout' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Logout</a></li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'login' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Login</a></li>
|
||||
<li><a href="{% url 'signup' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.5h.008v.008H16.75V6.75zm-3 0h.008v.008H13.75V6.75zm-3 0h.008v.008H10.75V6.75zm-3 0h.008v.008H7.75V6.75zm-3 0h.008v.008H4.75V6.75zM19 12a.75.75 0 01-.75.75H5.75a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h12.5c.414 0 .75.336.75.75v1.5zM6.75 20.25h.008v.008H6.75V20.25zm-3 0h.008v.008H3.75V20.25zm3-3h.008v.008H6.75V17.25zm-3 0h.008v.008H3.75V17.25zm3-3h.008v.008H6.75V14.25zm-3 0h.008v.008H3.75V14.25z" /></svg>Sign Up</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</aside>
|
||||
<main class="flex-1 relative z-10">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const menuButton = document.getElementById('options-menu');
|
||||
const menu = document.querySelector('[aria-labelledby="options-menu"]');
|
||||
|
||||
menuButton.addEventListener('click', function() {
|
||||
const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
|
||||
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');
|
||||
|
||||
@ -1,40 +1,77 @@
|
||||
|
||||
: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);
|
||||
/* Light Theme - Futuristic */
|
||||
--bg-primary: #f0f4f8; /* Very light blue-gray */
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #e2e8f0; /* Subtle contrast */
|
||||
--text-primary: #1a202c;
|
||||
--text-secondary: #4a5568;
|
||||
--accent-main: #007bff; /* Bright blue */
|
||||
--accent-hover: #0056b3;
|
||||
--accent-glow: rgba(0, 123, 255, 0.4); /* Blue glow */
|
||||
--border-color: rgba(100, 149, 237, 0.3); /* Muted cornflower blue */
|
||||
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||
--glass-border: rgba(200, 220, 240, 0.6);
|
||||
--shadow-color: rgba(0, 0, 0, 0.15);
|
||||
--input-focus-border: var(--accent-main);
|
||||
--heading-font: 'Poppins', sans-serif;
|
||||
--body-font: 'Inter', 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;
|
||||
/* Dark Theme - Futuristic */
|
||||
--bg-primary: #0a0e14; /* Deep dark blue-gray */
|
||||
--bg-secondary: #1a1f26;
|
||||
--bg-tertiary: #2d3748; /* Darker contrast */
|
||||
--text-primary: #e2e8f0;
|
||||
--text-secondary: #a0aec0;
|
||||
--accent-main: #00c4ff; /* Luminous cyan */
|
||||
--accent-hover: #0099e6;
|
||||
--accent-glow: rgba(0, 196, 255, 0.4); /* Cyan glow */
|
||||
--border-color: rgba(0, 196, 255, 0.3);
|
||||
--glass-bg: rgba(26, 31, 38, 0.6);
|
||||
--glass-border: rgba(50, 60, 70, 0.6);
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--input-focus-border: var(--accent-main);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--body-font);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
transition: background-color 0.5s ease, color 0.5s ease;
|
||||
overflow-x: hidden; /* Prevent horizontal scroll from subtle animations */
|
||||
}
|
||||
|
||||
/* Subtle background animation */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 20%),
|
||||
radial-gradient(circle at bottom right, var(--accent-glow) 0%, transparent 20%);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
animation: backgroundGlow 20s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes backgroundGlow {
|
||||
0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
|
||||
50% { transform: scale(1.1) translate(10px, 10px); opacity: 0.15; }
|
||||
100% { transform: scale(1) translate(0, 0); opacity: 0.1; }
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.font-poppins {
|
||||
@ -47,49 +84,103 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1.25rem; /* Slightly more rounded */
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1.5rem; /* Even more rounded, sleek */
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 4px 20px 0 var(--shadow-color); /* Softer, more diffused shadow */
|
||||
box-shadow: 0 8px 30px rgba(var(--shadow-color), 0.3); /* Deeper, more diffused shadow */
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
box-shadow: 0 12px 40px var(--shadow-color), 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.01); /* Subtle lift and scale */
|
||||
}
|
||||
|
||||
/* Sidebar and Main Content Layout */
|
||||
.container.mx-auto.mt-4.px-4 {
|
||||
margin-top: 1.5rem; /* Adjust top margin for spacing */
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
padding: 1.5rem; /* Overall padding for the app */
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
flex-shrink: 0;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px 0 var(--shadow-color);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
padding: 1.5rem;
|
||||
position: sticky;
|
||||
top: 1.5rem; /* Stick to top with padding */
|
||||
height: calc(100vh - 3rem); /* Full height minus padding */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
aside ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-grow: 1; /* Allow navigation to take available space */
|
||||
}
|
||||
|
||||
aside ul li {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
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);
|
||||
aside ul li a svg {
|
||||
margin-right: 0.75rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor; /* Use current text color for icons */
|
||||
}
|
||||
|
||||
section.lg\:w-3\/4 {
|
||||
/* Ensure main content area has some padding if needed */
|
||||
padding: 1rem;
|
||||
aside ul li a:hover, aside ul li a.active {
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Text color changes for contrast */
|
||||
box-shadow: 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.glass-card form .w-full.bg-white {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--glass-border) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card form .w-full.bg-gray-800:focus,
|
||||
.glass-card form .w-full.bg-white:focus {
|
||||
border-color: var(--input-focus-border) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Intent Badge Styles */
|
||||
@ -101,94 +192,120 @@ section.lg\:w-3\/4 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.intent-neutral {
|
||||
background-color: var(--text-secondary); /* gray-400 equivalent */
|
||||
}
|
||||
.intent-neutral { background-color: var(--text-secondary); }
|
||||
.intent-safe { background-color: #34D399; /* Green */ }
|
||||
.intent-caution { background-color: #FBBF24; /* Yellow */ }
|
||||
.intent-warning { background-color: #EF4444; /* Red */ }
|
||||
|
||||
.intent-safe {
|
||||
background-color: var(--accent-green); /* green-500 equivalent */
|
||||
}
|
||||
|
||||
.intent-caution {
|
||||
background-color: #F59E0B; /* yellow-500, keeping for now */
|
||||
}
|
||||
|
||||
.intent-warning {
|
||||
background-color: #EF4444; /* red-500, keeping for now */
|
||||
}
|
||||
|
||||
/* Image Generator Styles */
|
||||
/* General Button Styles */
|
||||
.btn-primary {
|
||||
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;
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Contrast with button color */
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
padding: 0.85rem 1.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out, transform 0.2s ease;
|
||||
box-shadow: 0 5px 15px rgba(var(--accent-main), 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
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);
|
||||
background-color: var(--accent-hover);
|
||||
box-shadow: 0 8px 20px rgba(var(--accent-main), 0.4), 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
outline: none;
|
||||
transform: translateY(-1px) scale(1.005);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 15px var(--shadow-color);
|
||||
}
|
||||
|
||||
/* AI Chat Styles */
|
||||
.chat-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
width: 100%; /* Take full width of its parent (main) */
|
||||
margin: 0; /* Remove auto margin, controlled by main layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 100px);
|
||||
border-radius: 1rem;
|
||||
height: 100%; /* Take full height of its parent (main) */
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
background: var(--glass-bg); /* Use glass-bg for chat container too */
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 1rem;
|
||||
padding: 1.2rem 1.5rem;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
text-align: center;
|
||||
background-color: var(--bg-secondary);
|
||||
background-color: var(--glass-bg); /* Match container background */
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: var(--bg-secondary); /* Chat background distinct from glass-bg */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
max-width: 75%; /* Slightly less wide */
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.chat-message:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.message-content {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.5;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 1.25rem; /* More rounded */
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap; /* Preserve whitespace and line breaks */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.message-content p {
|
||||
margin: 0;
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* User Message */
|
||||
@ -198,9 +315,9 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Text contrasts with accent */
|
||||
border-bottom-right-radius: 0.5rem; /* Softer edge */
|
||||
}
|
||||
|
||||
/* AI Message */
|
||||
@ -210,15 +327,15 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background: var(--bg-secondary);
|
||||
background: var(--bg-tertiary); /* Lighter/Darker shade for AI */
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.5rem; /* Softer edge */
|
||||
}
|
||||
|
||||
.ai-message.error-message .message-content {
|
||||
background-color: #721c24; /* Keeping static for error visibility */
|
||||
color: #f8d7da; /* Keeping static for error visibility */
|
||||
background-color: #ef4444; /* Red for errors */
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
@ -229,9 +346,9 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin: 0 2px;
|
||||
height: 10px; /* Slightly larger */
|
||||
width: 10px;
|
||||
margin: 0 3px; /* More spacing */
|
||||
background-color: var(--text-secondary);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
@ -248,81 +365,121 @@ section.lg\:w-3\/4 {
|
||||
|
||||
/* Chat Input */
|
||||
.chat-input-area {
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
background-color: var(--bg-secondary);
|
||||
background-color: var(--glass-bg);
|
||||
display: flex; /* Use flex for layout */
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-secondary); /* Input background */
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2rem; /* Fully rounded pill shape */
|
||||
color: var(--text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
padding: 0.9rem 1.5rem;
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
transition: all 0.3s ease, transform 0.2s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: var(--accent-blue);
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
outline: none;
|
||||
transform: translateY(-1px) scale(1.005);
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: var(--accent-blue);
|
||||
background: var(--accent-main);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 52px; /* Slightly larger button */
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
color: var(--bg-primary); /* Icon color */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 12px rgba(var(--accent-main), 0.3);
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: var(--text-secondary);
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 6px 16px rgba(var(--accent-main), 0.4), 0 0 10px var(--accent-glow);
|
||||
transform: translateY(-1px) scale(1.03);
|
||||
}
|
||||
|
||||
/* Code Block Styles */
|
||||
.code-block-wrapper {
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 4px 15px var(--shadow-color);
|
||||
}
|
||||
.code-block-header {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.copy-code-btn {
|
||||
background: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
background: var(--accent-main);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.copy-code-btn:hover {
|
||||
background: var(--text-secondary);
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
padding: 1.2rem;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
code {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Utility for Flexbox Layout */
|
||||
.flex-1 { flex: 1; }
|
||||
.relative { position: relative; }
|
||||
.z-10 { z-index: 10; }
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.app-container {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
max-width: 100%;
|
||||
height: 70vh; /* Adjust height for smaller screens */
|
||||
}
|
||||
}
|
||||
@ -1,33 +1,77 @@
|
||||
|
||||
:root {
|
||||
/* Light Theme */
|
||||
--bg-primary: #f8f9fa;
|
||||
/* Light Theme - Futuristic */
|
||||
--bg-primary: #f0f4f8; /* Very light blue-gray */
|
||||
--bg-secondary: #ffffff;
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #6c757d;
|
||||
--accent-blue: #007bff;
|
||||
--accent-green: #28a745;
|
||||
--bg-tertiary: #e2e8f0; /* Subtle contrast */
|
||||
--text-primary: #1a202c;
|
||||
--text-secondary: #4a5568;
|
||||
--accent-main: #007bff; /* Bright blue */
|
||||
--accent-hover: #0056b3;
|
||||
--accent-glow: rgba(0, 123, 255, 0.4); /* Blue glow */
|
||||
--border-color: rgba(100, 149, 237, 0.3); /* Muted cornflower blue */
|
||||
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||
--glass-border: rgba(220, 220, 220, 0.7);
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--glass-border: rgba(200, 220, 240, 0.6);
|
||||
--shadow-color: rgba(0, 0, 0, 0.15);
|
||||
--input-focus-border: var(--accent-main);
|
||||
--heading-font: 'Poppins', sans-serif;
|
||||
--body-font: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* Dark Theme */
|
||||
--bg-primary: #0F172A;
|
||||
--bg-secondary: #1A202C;
|
||||
--text-primary: #f8f9fa;
|
||||
/* Dark Theme - Futuristic */
|
||||
--bg-primary: #0a0e14; /* Deep dark blue-gray */
|
||||
--bg-secondary: #1a1f26;
|
||||
--bg-tertiary: #2d3748; /* Darker contrast */
|
||||
--text-primary: #e2e8f0;
|
||||
--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);
|
||||
--accent-main: #00c4ff; /* Luminous cyan */
|
||||
--accent-hover: #0099e6;
|
||||
--accent-glow: rgba(0, 196, 255, 0.4); /* Cyan glow */
|
||||
--border-color: rgba(0, 196, 255, 0.3);
|
||||
--glass-bg: rgba(26, 31, 38, 0.6);
|
||||
--glass-border: rgba(50, 60, 70, 0.6);
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--input-focus-border: var(--accent-main);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--body-font);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
transition: background-color 0.5s ease, color 0.5s ease;
|
||||
overflow-x: hidden; /* Prevent horizontal scroll from subtle animations */
|
||||
}
|
||||
|
||||
/* Subtle background animation */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 20%),
|
||||
radial-gradient(circle at bottom right, var(--accent-glow) 0%, transparent 20%);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
animation: backgroundGlow 20s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes backgroundGlow {
|
||||
0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
|
||||
50% { transform: scale(1.1) translate(10px, 10px); opacity: 0.15; }
|
||||
100% { transform: scale(1) translate(0, 0); opacity: 0.1; }
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.font-poppins {
|
||||
@ -40,49 +84,103 @@ body {
|
||||
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1.5rem; /* Even more rounded, sleek */
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px 0 var(--shadow-color);
|
||||
box-shadow: 0 8px 30px rgba(var(--shadow-color), 0.3); /* Deeper, more diffused shadow */
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
box-shadow: 0 12px 40px var(--shadow-color), 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.01); /* Subtle lift and scale */
|
||||
}
|
||||
|
||||
/* Sidebar and Main Content Layout */
|
||||
.container.mx-auto.mt-4.px-4 {
|
||||
margin-top: 1.5rem; /* Adjust top margin for spacing */
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
padding: 1.5rem; /* Overall padding for the app */
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
flex-shrink: 0;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px 0 var(--shadow-color);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
padding: 1.5rem;
|
||||
position: sticky;
|
||||
top: 1.5rem; /* Stick to top with padding */
|
||||
height: calc(100vh - 3rem); /* Full height minus padding */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
aside ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-grow: 1; /* Allow navigation to take available space */
|
||||
}
|
||||
|
||||
aside ul li {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
aside ul li a:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--accent-blue);
|
||||
aside ul li a svg {
|
||||
margin-right: 0.75rem;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor; /* Use current text color for icons */
|
||||
}
|
||||
|
||||
section.lg\:w-3\/4 {
|
||||
/* Ensure main content area has some padding if needed */
|
||||
padding: 1rem;
|
||||
aside ul li a:hover, aside ul li a.active {
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Text color changes for contrast */
|
||||
box-shadow: 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.glass-card form .w-full.bg-white {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--glass-border) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card form .w-full.bg-gray-800:focus,
|
||||
.glass-card form .w-full.bg-white:focus {
|
||||
border-color: var(--input-focus-border) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Intent Badge Styles */
|
||||
@ -94,90 +192,120 @@ section.lg\:w-3\/4 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.intent-neutral {
|
||||
background-color: var(--text-secondary); /* gray-400 equivalent */
|
||||
}
|
||||
.intent-neutral { background-color: var(--text-secondary); }
|
||||
.intent-safe { background-color: #34D399; /* Green */ }
|
||||
.intent-caution { background-color: #FBBF24; /* Yellow */ }
|
||||
.intent-warning { background-color: #EF4444; /* Red */ }
|
||||
|
||||
.intent-safe {
|
||||
background-color: var(--accent-green); /* green-500 equivalent */
|
||||
}
|
||||
|
||||
.intent-caution {
|
||||
background-color: #F59E0B; /* yellow-500, keeping for now */
|
||||
}
|
||||
|
||||
.intent-warning {
|
||||
background-color: #EF4444; /* red-500, keeping for now */
|
||||
}
|
||||
|
||||
/* Image Generator Styles */
|
||||
/* General Button Styles */
|
||||
.btn-primary {
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Contrast with button color */
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
padding: 0.85rem 1.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out, transform 0.2s ease;
|
||||
box-shadow: 0 5px 15px rgba(var(--accent-main), 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--text-secondary);
|
||||
border-color: var(--text-secondary);
|
||||
background-color: var(--accent-hover);
|
||||
box-shadow: 0 8px 20px rgba(var(--accent-main), 0.4), 0 0 15px var(--accent-glow);
|
||||
transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
outline: none;
|
||||
transform: translateY(-1px) scale(1.005);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 15px var(--shadow-color);
|
||||
}
|
||||
|
||||
/* AI Chat Styles */
|
||||
.chat-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
width: 100%; /* Take full width of its parent (main) */
|
||||
margin: 0; /* Remove auto margin, controlled by main layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 100px);
|
||||
border-radius: 1rem;
|
||||
height: 100%; /* Take full height of its parent (main) */
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
background: var(--glass-bg); /* Use glass-bg for chat container too */
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 1rem;
|
||||
padding: 1.2rem 1.5rem;
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
text-align: center;
|
||||
background-color: var(--bg-secondary);
|
||||
background-color: var(--glass-bg); /* Match container background */
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: var(--bg-secondary); /* Chat background distinct from glass-bg */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
max-width: 75%; /* Slightly less wide */
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.chat-message:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.message-content {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1rem;
|
||||
line-height: 1.5;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 1.25rem; /* More rounded */
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap; /* Preserve whitespace and line breaks */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.message-content p {
|
||||
margin: 0;
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* User Message */
|
||||
@ -187,9 +315,9 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
border-bottom-right-radius: 0;
|
||||
background-color: var(--accent-main);
|
||||
color: var(--bg-primary); /* Text contrasts with accent */
|
||||
border-bottom-right-radius: 0.5rem; /* Softer edge */
|
||||
}
|
||||
|
||||
/* AI Message */
|
||||
@ -199,15 +327,15 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.ai-message .message-content {
|
||||
background: var(--bg-secondary);
|
||||
background: var(--bg-tertiary); /* Lighter/Darker shade for AI */
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-primary);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-left-radius: 0.5rem; /* Softer edge */
|
||||
}
|
||||
|
||||
.ai-message.error-message .message-content {
|
||||
background-color: #721c24; /* Keeping static for error visibility */
|
||||
color: #f8d7da; /* Keeping static for error visibility */
|
||||
background-color: #ef4444; /* Red for errors */
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
@ -218,9 +346,9 @@ section.lg\:w-3\/4 {
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin: 0 2px;
|
||||
height: 10px; /* Slightly larger */
|
||||
width: 10px;
|
||||
margin: 0 3px; /* More spacing */
|
||||
background-color: var(--text-secondary);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
@ -237,81 +365,121 @@ section.lg\:w-3\/4 {
|
||||
|
||||
/* Chat Input */
|
||||
.chat-input-area {
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
background-color: var(--bg-secondary);
|
||||
background-color: var(--glass-bg);
|
||||
display: flex; /* Use flex for layout */
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-secondary); /* Input background */
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2rem; /* Fully rounded pill shape */
|
||||
color: var(--text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
padding: 0.9rem 1.5rem;
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
transition: all 0.3s ease, transform 0.2s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: var(--accent-blue);
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
outline: none;
|
||||
transform: translateY(-1px) scale(1.005);
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: var(--accent-blue);
|
||||
background: var(--accent-main);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 52px; /* Slightly larger button */
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
color: var(--bg-primary); /* Icon color */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 12px rgba(var(--accent-main), 0.3);
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: var(--text-secondary);
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 6px 16px rgba(var(--accent-main), 0.4), 0 0 10px var(--accent-glow);
|
||||
transform: translateY(-1px) scale(1.03);
|
||||
}
|
||||
|
||||
/* Code Block Styles */
|
||||
.code-block-wrapper {
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 4px 15px var(--shadow-color);
|
||||
}
|
||||
.code-block-header {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.copy-code-btn {
|
||||
background: var(--accent-blue);
|
||||
color: var(--text-primary);
|
||||
background: var(--accent-main);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.copy-code-btn:hover {
|
||||
background: var(--text-secondary);
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
padding: 1.2rem;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
overflow-x: auto;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
code {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Utility for Flexbox Layout */
|
||||
.flex-1 { flex: 1; }
|
||||
.relative { position: relative; }
|
||||
.z-10 { z-index: 10; }
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.app-container {
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
max-width: 100%;
|
||||
height: 70vh; /* Adjust height for smaller screens */
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user