Skip to content

Test #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MIbnEKhalid merged 3 commits into from
Apr 8, 2025
Merged

Test #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e58608
Enhance chatbot and index page styles; introduce new theme variables …
MIbnEKhalid Apr 8, 2025
3d2d185
Merge pull request #12 from MIbnEKhalid/ibnekhalid
MIbnEKhalid Apr 8, 2025
7b3aace
Merge branch 'maaz' into Test
MIbnEKhalid Apr 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 63 additions & 146 deletions views/mainPages/chatbot.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@
<script src="/Assets/Scripts/main.js"></script>
<script src="/Assets/Scripts/logout.js"></script>
<style>
:root {
--base-font-size: 16px;
--border-color: #555;
--primary-color: #4caf50;
--danger-color: #f44336;
}

.btn {
outline: 0;
padding: 8px 16px;
Expand Down Expand Up @@ -87,16 +94,6 @@
}

:root {
--bg-dark: #0d1117;
--bg-medium: #151b23;
--bg-light: #444;
--border-color: #555;
--text-light: #d4d4d4;
--primary-color: #007bff;
--primary-hover: #0056b3;
--user-message: #212d3e;
--ai-message: transparent;
--transition-speed: 0.3s;
--main-border-color: #3d444d;
}

Expand Down Expand Up @@ -177,8 +174,7 @@

.chat-list-item {
background-color: transparent;
border: .1rem solid var(--main-border-color);
color: white;
border-width: .1rem;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
Expand Down Expand Up @@ -220,7 +216,7 @@
}

.chat-header {
background-color: var(--bg-medium);
background-color: var(--header-bg);
padding: 15px;
border-bottom: 1px solid var(--border-color);
display: flex;
Expand Down Expand Up @@ -251,26 +247,26 @@
flex-grow: 1;
overflow-y: auto;
padding: 10px;
background-color: var(--bg-dark);
background-color: var(--bg-color);
}

.chat-input-container {
padding: 10px;
background-color: var(--bg-medium);
background-color: var(--header-bg);
border-top: 1px solid var(--border-color);
}

.chat-input-form {
display: flex;
gap: 5px;
align-items: center; /* Added for vertical alignment */
}

.chat-input {
flex-grow: 1;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-medium);
background-color: var(--header-bg);
color: var(--text-light);
transition: border-color 0.2s ease;
}
Expand Down Expand Up @@ -492,7 +488,7 @@
.profile-menu .fas {
font-size: 35px;
cursor: pointer;
color: #fff;
color: var(--user-profile-color);
}

.dropdown-content {
Expand Down Expand Up @@ -566,137 +562,53 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
transition: all .3s ease;
}

:root {
--base-font-size: 16px;
--primary-color: #3a86ff;
/* Vibrant blue */
--danger-color: #ff3860;
/* Strong red */
--border-radius: 8px;
</style>
<style>
.dark-theme {
--bg-color: #0d1117;
--text-color: #d4d4d4;
--header-bg: #151b23;
--border-color: #555;
--user-message-bg: #212d3e;
--ai-message-bg: transparent;
--ai-message-text: #d4d4d4;
--user-profile-color: white;
}

/* Default/Dark Theme (now more refined) */
.root,
.dark-theme {
--bg-color: #121212;
/* True dark background */
--text-color: #e0e0e0;
/* Soft white for readability */
--header-bg: #1e1e1e;
/* Slightly lighter than bg */
--border-color: #424242;
/* Subtle borders */

--user-message-bg: #0d47a1;
/* Deep blue */
--user-message-text: #ffffff;
--ai-message-bg: #2d2d2d;
/* Dark gray bubble */
--ai-message-text: #f5f5f5;

--link-color: #64b5f6;
/* Light blue for links */
--hover-color: #bb86fc;
/* Light purple for hover states */
}

/* Light Theme (softer and more balanced) */
.light-theme {
--bg-color: #fafafa;
/* Very light gray */
--text-color: #333333;
/* Dark gray for text */
--bg-color: #f5f5f5;
--text-color: #333;
--header-bg: #ffffff;
/* Pure white header */
--border-color: #e0e0e0;
/* Very light gray border */

--user-message-bg: #1565c0;
/* Rich blue */
--user-message-text: #ffffff;
--ai-message-bg: #f5f5f5;
/* Light gray bubble */
--ai-message-text: #212121;

--link-color: #1976d2;
/* Standard blue */
--hover-color: #0d47a1;
/* Darker blue for hover */
--user-message-bg: #4caf50;
--ai-message-bg: #e0f7fa;
--ai-message-text: #000;
--user-profile-color: grey;
}

/* Sepia Theme (warmer and more authentic) */
.sepia-theme {
--bg-color: #f4ecd8;
/* Authentic sepia */
--text-color: #5b4636;
/* Dark sepia text */
--header-bg: #e6d9c5;
/* Slightly darker sepia */
--border-color: #d4c4a8;
/* Warm border */

--user-message-bg: #8d6e63;
/* Earthy brown */
--user-message-text: #ffffff;
--ai-message-bg: #e9e0d2;
/* Light sepia bubble */
--ai-message-text: #5b4636;

--link-color: #6d4c41;
/* Dark brown */
--hover-color: #4e342e;
/* Darker brown */
}

/* High Contrast Theme (for accessibility) */
--bg-color: #f8f4e8;
--text-color: #5e5245;
--header-bg: #e8e0d4;
--border-color: #d2c9bc;
--user-message-bg: #a3c2a1;
--ai-message-bg: #f2e8cf;
--ai-message-text: #5e5245;
--user-profile-color: grey;
}

.contrast-theme {
--bg-color: #000000;
/* Pure black */
--text-color: #ffffff;
/* Pure white */
--header-bg: #222222;
/* Near-black */
--border-color: #ffffff;
/* White borders */

--user-message-bg: #ff3d00;
/* Vivid orange */
--user-message-text: #ffffff;
--ai-message-bg: #ffffff;
/* Pure white */
--ai-message-text: #000000;

--link-color: #00b0ff;
/* Bright cyan */
--hover-color: #ff9100;
/* Bright yellow-orange */
}

/* Additional Modern Theme */
.modern-theme {
--bg-color: #0f172a;
/* Deep navy */
--text-color: #e2e8f0;
/* Light blue-gray */
--header-bg: #1e293b;
/* Dark navy */
--border-color: #334155;
/* Medium navy */

--user-message-bg: #7c3aed;
/* Vibrant purple */
--user-message-text: #ffffff;
--ai-message-bg: #1e293b;
/* Dark navy bubble */
--ai-message-text: #e2e8f0;

--link-color: #818cf8;
/* Light purple */
--hover-color: #a78bfa;
/* Lighter purple */
--header-bg: #090909;
--border-color: #555555;
--user-message-bg: transparent;
--ai-message-bg: transparent;
--ai-message-text: white;
--user-profile-color: white;
}


html,
body {
height: 100%;
Expand Down Expand Up @@ -775,7 +687,7 @@
}

.chat-list-item {
background-color: #444;
background-color: transparent;
color: #fff;
padding: 10px;
margin-bottom: 5px;
Expand All @@ -797,6 +709,10 @@
border: 1px solid var(--border-color);
}

.dark-theme .chat-list-item {
border: .1rem solid var(--main-border-color);
}

.light-theme .chat-list-item:hover,
.sepia-theme .chat-list-item:hover {
background-color: #f0f0f0;
Expand Down Expand Up @@ -1502,7 +1418,6 @@
<option value="light">Light</option>
<option value="sepia">Sepia</option>
<option value="contrast">Contrast</option>
<option value="modern">Modern Theme</option>
<option value="system">System Default</option>
</select>
</div>
Expand Down Expand Up @@ -2095,24 +2010,25 @@
settingsOverlay.classList.remove('show'); // Hide overlay
}


function applySettings() {
themeSelect.value = currentSettings.theme; // Ensure select element is updated too on apply
themeSelect.dispatchEvent(new Event('change')); // Trigger change event if needed for listeners

// Apply theme
document.body.classList.remove('light-theme', 'dark-theme', 'sepia-theme', 'contrast-theme', 'modern-theme');
document.body.classList.remove('light-theme', 'dark-theme', 'sepia-theme', 'contrast-theme');
if (currentSettings.theme === 'light') {
document.body.classList.add('light-theme');
document.body.classList.add('light-theme');
} else if (currentSettings.theme === 'sepia') {
document.body.classList.add('sepia-theme');
document.body.classList.add('sepia-theme');
} else if (currentSettings.theme === 'contrast') {
document.body.classList.add('contrast-theme');
} else if (currentSettings.theme === 'modern') {
document.body.classList.add('modern-theme');
} else {
document.body.classList.add('dark-theme'); // Default to dark if theme is not recognized or 'dark'
document.body.classList.add('contrast-theme');
}
else {
document.body.classList.add('dark-theme'); // Default to dark if theme is not recognized or 'dark'
}


// Apply font size
document.documentElement.style.setProperty('--base-font-size', `${currentSettings.fontSize}px`);

Expand All @@ -2121,6 +2037,7 @@
// Apply model if needed in future logic - currentSettings.model is available
}


// Make deleteChat available globally for button clicks
window.deleteChat = deleteChat;
// Initialize the app when DOM is loaded
Expand Down
Loading