Spaces:

abdullahtarar
/

MuhafizAi

Running

App Files Files Community

abdullahtarar commited on May 2

Commit

e9a6464

verified ·

1 Parent(s): c73d49e

Upload 19 files

Browse files

Files changed (20) hide show

.gitattributes +3 -0
about.html +153 -0
admin.css +711 -0
admin.html +258 -0
admin.js +516 -0
contact.html +130 -0
css/admin.css +489 -0
css/login.css +197 -0
css/pages.css +516 -0
css/style.css +755 -0
follow.html +169 -0
images/bot-message-logo.png +3 -0
images/menu-logo.png +3 -0
images/welcome-logo.png +3 -0
index.html +91 -18
js/admin.js +350 -0
js/login.js +114 -0
js/script.js +656 -0
login.html +54 -0
style.css +480 -18

.gitattributes CHANGED Viewed

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/bot-message-logo.png filter=lfs diff=lfs merge=lfs -text
+images/menu-logo.png filter=lfs diff=lfs merge=lfs -text
+images/welcome-logo.png filter=lfs diff=lfs merge=lfs -text

about.html ADDED Viewed

	@@ -0,0 +1,153 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="About DeepSeek - Learn about our mission and team">
+    <meta name="theme-color" content="#4285f4">
+    <title>About Us - DeepSeek</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/pages.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <header class="page-header">
+        <nav class="main-nav">
+            <div class="logo">
+                <img src="images/logo.png" alt="DeepSeek Logo" width="40" height="40">
+                <span>DeepSeek</span>
+            </div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html" class="active">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="follow.html">Follow Us</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main class="page-content">
+        <section class="hero-section">
+            <h1>About DeepSeek</h1>
+            <p class="section-desc">Pioneering the future of AI-powered conversations</p>
+        </section>
+        <section class="about-section">
+            <div class="about-content">
+                <div class="mission-vision">
+                    <div class="mission">
+                        <h2><i class="fas fa-bullseye"></i> Our Mission</h2>
+                        <p>To make AI technology accessible and beneficial for everyone, enhancing human capabilities through intuitive and intelligent conversations.</p>
+                    </div>
+                    <div class="vision">
+                        <h2><i class="fas fa-eye"></i> Our Vision</h2>
+                        <p>To be the world's leading conversational AI platform, fostering meaningful interactions between humans and machines.</p>
+                    </div>
+                </div>
+                <div class="values-section">
+                    <h2>Our Core Values</h2>
+                    <div class="values-grid">
+                        <div class="value-item">
+                            <i class="fas fa-shield-alt"></i>
+                            <h3>Trust & Security</h3>
+                            <p>We prioritize user privacy and data security in everything we do.</p>
+                        </div>
+                        <div class="value-item">
+                            <i class="fas fa-lightbulb"></i>
+                            <h3>Innovation</h3>
+                            <p>We continuously push the boundaries of what's possible with AI.</p>
+                        </div>
+                        <div class="value-item">
+                            <i class="fas fa-users"></i>
+                            <h3>User-Centric</h3>
+                            <p>Our users' needs and experiences drive our development.</p>
+                        </div>
+                        <div class="value-item">
+                            <i class="fas fa-handshake"></i>
+                            <h3>Collaboration</h3>
+                            <p>We believe in the power of working together to achieve greatness.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="team-section">
+                    <h2>Our Leadership Team</h2>
+                    <div class="team-grid">
+                        <div class="team-member">
+                            <img src="images/team/ceo.jpg" alt="CEO" class="member-photo">
+                            <h3>John Smith</h3>
+                            <p class="position">CEO & Founder</p>
+                            <p class="bio">20+ years of experience in AI and Machine Learning</p>
+                        </div>
+                        <div class="team-member">
+                            <img src="images/team/cto.jpg" alt="CTO" class="member-photo">
+                            <h3>Sarah Johnson</h3>
+                            <p class="position">CTO</p>
+                            <p class="bio">Former Tech Lead at major AI research labs</p>
+                        </div>
+                        <div class="team-member">
+                            <img src="images/team/cpo.jpg" alt="CPO" class="member-photo">
+                            <h3>Michael Chen</h3>
+                            <p class="position">Chief Product Officer</p>
+                            <p class="bio">Expert in AI product development and UX design</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="achievements-section">
+                    <h2>Our Achievements</h2>
+                    <div class="achievements-grid">
+                        <div class="achievement-item">
+                            <span class="number">1M+</span>
+                            <p>Active Users</p>
+                        </div>
+                        <div class="achievement-item">
+                            <span class="number">50+</span>
+                            <p>Countries</p>
+                        </div>
+                        <div class="achievement-item">
+                            <span class="number">10M+</span>
+                            <p>Conversations</p>
+                        </div>
+                        <div class="achievement-item">
+                            <span class="number">99.9%</span>
+                            <p>Uptime</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="page-footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>DeepSeek</h3>
+                <p>Advancing AI technology to help people communicate and solve problems more effectively.</p>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                    <li><a href="follow.html">Follow Us</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect With Us</h3>
+                <div class="social-links">
+                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 DeepSeek. All rights reserved.</p>
+        </div>
+    </footer>
+</body>
+</html>

admin.css ADDED Viewed

	@@ -0,0 +1,711 @@

+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
+body {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    display: flex;
+}
+.hidden {
+    display: none !important;
+}
+/* Login Screen Styles */
+.login-container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+}
+.login-box {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    padding: 40px;
+    width: 400px;
+    max-width: 90%;
+    text-align: center;
+}
+.login-box .logo-container {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+}
+.login-box .logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.login-box h2 {
+    font-size: 24px;
+    margin-bottom: 30px;
+    color: #333;
+}
+.input-group {
+    position: relative;
+    margin-bottom: 20px;
+}
+.input-group i {
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #888;
+}
+.input-group input {
+    width: 100%;
+    padding: 15px 15px 15px 45px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+.input-group input:focus {
+    border-color: #4285f4;
+}
+.login-btn {
+    width: 100%;
+    padding: 15px;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+.login-btn:hover {
+    background-color: #3367d6;
+}
+.error-message {
+    color: #d32f2f;
+    margin-top: 15px;
+    font-size: 14px;
+}
+/* Admin Panel Styles */
+.admin-container {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+}
+/* Sidebar Styles */
+.admin-sidebar {
+    width: 250px;
+    background-color: #2c3e50;
+    color: white;
+    height: 100vh;
+    overflow-y: auto;
+}
+.admin-logo {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.admin-logo .logo {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+}
+.admin-logo h2 {
+    font-size: 18px;
+    font-weight: 500;
+}
+.admin-menu {
+    list-style-type: none;
+    padding: 20px 0;
+}
+.admin-menu li {
+    padding: 12px 20px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.admin-menu li:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+.admin-menu li.active {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-left: 4px solid #4285f4;
+}
+.admin-menu li i {
+    width: 20px;
+    text-align: center;
+}
+/* Content Area Styles */
+.admin-content {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+    height: 100vh;
+}
+.admin-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+.admin-header h2 {
+    font-size: 24px;
+    color: #333;
+}
+.save-btn {
+    padding: 10px 20px;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background-color 0.3s;
+}
+.save-btn:hover {
+    background-color: #3367d6;
+}
+.secondary-btn {
+    padding: 8px 15px;
+    background-color: #f1f3f4;
+    color: #333;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: background-color 0.3s;
+}
+.secondary-btn:hover {
+    background-color: #e8eaed;
+}
+/* Tab Content Styles */
+.tab-content {
+    display: none;
+}
+.tab-content.active {
+    display: block;
+}
+.settings-card {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    padding: 25px;
+    margin-bottom: 25px;
+}
+.settings-card h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #333;
+}
+.settings-card p {
+    color: #666;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+.form-group {
+    margin-bottom: 20px;
+}
+.form-group:last-child {
+    margin-bottom: 0;
+}
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    border-color: #4285f4;
+}
+.input-with-action {
+    position: relative;
+    display: flex;
+}
+.input-with-action input {
+    flex-grow: 1;
+    padding-right: 40px;
+}
+.toggle-btn {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #888;
+    cursor: pointer;
+}
+.help-text {
+    font-size: 12px;
+    color: #888;
+    margin-top: 5px;
+}
+/* Range slider styles */
+input[type="range"] {
+    width: 100%;
+    height: 5px;
+    -webkit-appearance: none;
+    background: #ddd;
+    outline: none;
+    border-radius: 5px;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #4285f4;
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+.slider-description {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #888;
+}
+/* Checkbox styles */
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.checkbox-group input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+/* Radio button styles */
+.tone-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-top: 5px;
+}
+.tone-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.tone-option input[type="radio"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+/* Model description */
+.model-description {
+    background-color: #f9f9f9;
+    padding: 15px;
+    border-radius: 5px;
+    border-left: 4px solid #4285f4;
+}
+/* Preview container */
+.preview-container {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 20px;
+    margin-top: 15px;
+}
+.preview-message {
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+.preview-question {
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #333;
+}
+.preview-response {
+    color: #444;
+    line-height: 1.5;
+}
+/* Analytics styles */
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+.analytics-card {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+}
+.analytics-card h4 {
+    font-size: 14px;
+    margin-bottom: 10px;
+    color: #666;
+}
+.analytics-number {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+}
+.chart-container {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 20px;
+}
+.chart-container h4 {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: #333;
+}
+.placeholder-chart {
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+}
+.chart-bars {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    height: 180px;
+    padding: 0 10px;
+}
+.chart-bar {
+    width: 30px;
+    background-color: #4285f4;
+    border-radius: 5px 5px 0 0;
+}
+.chart-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    padding: 0 10px;
+}
+.chart-labels span {
+    font-size: 12px;
+    color: #888;
+}
+.common-questions {
+    list-style-type: none;
+}
+.common-questions li {
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.common-questions li:last-child {
+    border-bottom: none;
+}
+.question-count {
+    background-color: #4285f4;
+    color: white;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+}
+/* Responsive design */
+@media (max-width: 1200px) {
+    .analytics-grid {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    }
+}
+@media (max-width: 992px) {
+    .admin-sidebar {
+        width: 200px;
+    }
+    .settings-card {
+        padding: 20px;
+    }
+}
+@media (max-width: 768px) {
+    .admin-container {
+        flex-direction: column;
+    }
+    .admin-sidebar {
+        width: 100%;
+        height: auto;
+        position: sticky;
+        top: 0;
+        z-index: 100;
+    }
+    .admin-menu {
+        display: flex;
+        padding: 10px;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    .admin-menu li {
+        padding: 10px 15px;
+        white-space: nowrap;
+        border-left: none !important;
+    }
+    .admin-logo {
+        justify-content: center;
+        padding: 10px;
+    }
+    .admin-content {
+        padding: 15px;
+        height: calc(100vh - 120px);
+    }
+    .analytics-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 15px;
+    }
+    .login-box {
+        width: 90%;
+        max-width: 350px;
+        padding: 30px;
+    }
+}
+@media (max-width: 576px) {
+    .admin-header {
+        flex-direction: column;
+        gap: 10px;
+        align-items: flex-start;
+    }
+    .admin-actions {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+    }
+    .settings-card {
+        padding: 15px;
+    }
+    .analytics-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+    .tone-options {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .form-group input[type="text"],
+    .form-group input[type="password"],
+    .form-group select,
+    .form-group textarea {
+        font-size: 16px; /* Prevent zoom on mobile */
+    }
+}
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1a1a1a;
+        color: #ffffff;
+    }
+    .login-box,
+    .settings-card,
+    .admin-content {
+        background-color: #2d2d2d;
+        color: #ffffff;
+    }
+    .input-group input,
+    .form-group input[type="text"],
+    .form-group input[type="password"],
+    .form-group select,
+    .form-group textarea {
+        background-color: #3d3d3d;
+        color: #ffffff;
+        border-color: #4d4d4d;
+    }
+    .admin-sidebar {
+        background-color: #2d2d2d;
+    }
+    .preview-container {
+        background-color: #3d3d3d;
+    }
+    .preview-message {
+        background-color: #4d4d4d;
+        color: #ffffff;
+    }
+}
+/* Touch device optimizations */
+@media (hover: none) {
+    .admin-menu li:hover {
+        background-color: transparent;
+    }
+    .admin-menu li:active {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+/* Accessibility improvements */
+:focus {
+    outline: 2px solid #4285f4;
+    outline-offset: 2px;
+}
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+/* Notification styles */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 5px;
+    background-color: white;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: transform 0.3s, opacity 0.3s;
+    transform: translateY(0);
+    opacity: 1;
+}
+.notification-info {
+    border-left: 4px solid #4285f4;
+}
+.notification-success {
+    border-left: 4px solid #0f9d58;
+}
+.notification-warning {
+    border-left: 4px solid #f4b400;
+}
+.notification-error {
+    border-left: 4px solid #db4437;
+}
+.notification-hide {
+    transform: translateY(-20px);
+    opacity: 0;
+}

admin.html ADDED Viewed

	@@ -0,0 +1,258 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Muhafiz AI Admin Panel</title>
+    <link rel="stylesheet" href="css/admin.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        // Authentication check
+        if (localStorage.getItem('adminLoggedIn') !== 'true') {
+            // Store the current URL to redirect back after login
+            const currentPath = window.location.pathname;
+            const redirectUrl = 'login.html?redirect=' + encodeURIComponent(currentPath);
+            window.location.href = redirectUrl;
+        }
+    </script>
+</head>
+<body>
+    <div class="admin-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <img src="images/logo.png" alt="Muhafiz AI Logo" class="admin-logo">
+                <h2>Admin Panel</h2>
+            </div>
+            <nav class="sidebar-nav">
+                <a href="#dashboard" class="nav-item active" data-tab="dashboard">
+                    <i class="fas fa-chart-line"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="#conversations" class="nav-item" data-tab="conversations">
+                    <i class="fas fa-comments"></i>
+                    <span>Conversations</span>
+                </a>
+                <a href="#users" class="nav-item" data-tab="users">
+                    <i class="fas fa-users"></i>
+                    <span>Users</span>
+                </a>
+                <a href="#settings" class="nav-item" data-tab="settings">
+                    <i class="fas fa-cog"></i>
+                    <span>Settings</span>
+                </a>
+                <a href="#analytics" class="nav-item" data-tab="analytics">
+                    <i class="fas fa-chart-bar"></i>
+                    <span>Analytics</span>
+                </a>
+            </nav>
+            <div class="sidebar-footer">
+                <button id="logoutBtn" class="logout-btn">
+                    <i class="fas fa-sign-out-alt"></i>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </aside>
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Top Bar -->
+            <header class="top-bar">
+                <div class="search-bar">
+                    <i class="fas fa-search"></i>
+                    <input type="text" placeholder="Search...">
+                </div>
+                <div class="top-bar-actions">
+                    <button class="theme-toggle" id="adminThemeToggle">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                    <div class="admin-profile">
+                        <img src="images/admin-avatar.png" alt="Admin" class="admin-avatar">
+                        <span>Admin</span>
+                    </div>
+                </div>
+            </header>
+            <!-- Dashboard Tab -->
+            <div class="tab-content active" id="dashboard">
+                <h2>Dashboard</h2>
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-users"></i></div>
+                        <div class="stat-info">
+                            <h3>Total Users</h3>
+                            <p>1,234</p>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-comments"></i></div>
+                        <div class="stat-info">
+                            <h3>Conversations</h3>
+                            <p>5,678</p>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-clock"></i></div>
+                        <div class="stat-info">
+                            <h3>Avg. Response Time</h3>
+                            <p>1.5s</p>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-chart-line"></i></div>
+                        <div class="stat-info">
+                            <h3>Success Rate</h3>
+                            <p>98.5%</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="charts-grid">
+                    <div class="chart-card">
+                        <h3>User Activity</h3>
+                        <div class="chart-placeholder">
+                            <!-- Chart will be rendered here -->
+                        </div>
+                    </div>
+                    <div class="chart-card">
+                        <h3>Response Times</h3>
+                        <div class="chart-placeholder">
+                            <!-- Chart will be rendered here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Settings Tab -->
+            <div class="tab-content" id="settings">
+                <h2>Settings</h2>
+                <div class="settings-grid">
+                    <div class="settings-card">
+                        <h3>OpenRouter API Configuration</h3>
+                        <form id="apiSettingsForm">
+                            <div class="form-group">
+                                <label for="apiKey">OpenRouter API Key</label>
+                                <div class="input-with-copy">
+                                    <input type="password" id="apiKey" name="apiKey">
+                                    <button type="button" class="copy-btn" title="Toggle visibility">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="siteUrl">Your Site URL</label>
+                                <input type="url" id="siteUrl" name="siteUrl" placeholder="https://your-site.com">
+                            </div>
+                            <div class="form-group">
+                                <label for="siteName">Your Site Name</label>
+                                <input type="text" id="siteName" name="siteName" placeholder="Muhafiz AI">
+                            </div>
+                            <button type="submit" class="btn-primary">Save API Settings</button>
+                        </form>
+                    </div>
+                    <div class="settings-card">
+                        <h3>Model Settings</h3>
+                        <form id="modelSettingsForm">
+                            <div class="form-group">
+                                <label for="modelSelect">Select Model</label>
+                                <select id="modelSelect" name="model">
+                                    <option value="qwen/qwen3-14b:free">Qwen 14B (Free)</option>
+                                    <option value="mistralai/mistral-7b-instruct:free">Mistral 7B Instruct (Free)</option>
+                                    <option value="meta-llama/codellama-34b-instruct:free">CodeLlama 34B (Free)</option>
+                                    <option value="gryphe/mythomist-7b:free">MythoMist 7B (Free)</option>
+                                    <option value="anthropic/claude-3-opus:ultra">Claude 3 Opus (Ultra)</option>
+                                    <option value="anthropic/claude-3-sonnet:beta">Claude 3 Sonnet (Beta)</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="temperature">Temperature</label>
+                                <div class="range-with-value">
+                                    <input type="range" id="temperature" name="temperature" min="0" max="1" step="0.1" value="0.7">
+                                    <span class="range-value">0.7</span>
+                                </div>
+                                <small class="help-text">Controls randomness: 0 is focused, 1 is creative</small>
+                            </div>
+                            <div class="form-group">
+                                <label for="maxTokens">Max Tokens</label>
+                                <input type="number" id="maxTokens" name="maxTokens" min="1" max="4096" value="2048">
+                                <small class="help-text">Maximum length of the response</small>
+                            </div>
+                            <div class="form-group">
+                                <label class="checkbox-label">
+                                    <input type="checkbox" id="streamResponse" name="streamResponse" checked>
+                                    <span>Stream Response</span>
+                                </label>
+                                <small class="help-text">Show response as it's being generated</small>
+                            </div>
+                            <button type="submit" class="btn-primary">Apply Model Settings</button>
+                            <button type="button" class="btn-secondary" id="testModel">
+                                <i class="fas fa-vial"></i> Test Model
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                <div class="card">
+                    <h3>Test API Response</h3>
+                    <div class="form-group">
+                        <label for="testMessage">Test Message</label>
+                        <input type="text" id="testMessage" placeholder="Enter a test message" value="Hello! Can you hear me?">
+                    </div>
+                    <div class="test-response-container" style="display: none;">
+                        <h4>API Response:</h4>
+                        <div id="testResponse" class="test-response"></div>
+                        <div id="testError" class="test-error"></div>
+                    </div>
+                    <button id="testApiBtn" class="btn-secondary">
+                        <i class="fas fa-vial"></i> Test API Response
+                    </button>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script src="js/admin.js"></script>
+    <style>
+    .test-response-container {
+        margin-top: 16px;
+        padding: 16px;
+        border-radius: 8px;
+        background: var(--hover-bg);
+    }
+    .test-response {
+        white-space: pre-wrap;
+        font-family: monospace;
+        margin-top: 8px;
+        padding: 12px;
+        border-radius: 6px;
+        background: var(--admin-bg);
+        border: 1px solid var(--border-color);
+        max-height: 200px;
+        overflow-y: auto;
+    }
+    .test-error {
+        color: var(--error-color);
+        margin-top: 8px;
+        font-size: 14px;
+    }
+    #testApiBtn {
+        margin-top: 16px;
+        width: 100%;
+    }
+    #testApiBtn.loading {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+    #testApiBtn.loading i {
+        animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+    </style>
+</body>
+</html>

admin.js ADDED Viewed

	@@ -0,0 +1,516 @@

+// DOM Elements for Admin Panel
+const loginScreen = document.getElementById('login-screen');
+const adminPanel = document.getElementById('admin-panel');
+const usernameInput = document.getElementById('username');
+const passwordInput = document.getElementById('password');
+const loginBtn = document.getElementById('login-btn');
+const loginError = document.getElementById('login-error');
+const logoutBtn = document.getElementById('logout-btn');
+const sectionTitle = document.getElementById('section-title');
+const saveBtn = document.getElementById('save-btn');
+const menuItems = document.querySelectorAll('.admin-menu li');
+const tabContents = document.querySelectorAll('.tab-content');
+// API Settings Form Elements
+const apiKeyInput = document.getElementById('api-key');
+const toggleApiKeyBtn = document.getElementById('toggle-api-key');
+const apiEndpointInput = document.getElementById('api-endpoint');
+const testApiBtn = document.getElementById('test-api-btn');
+// Model Settings Form Elements
+const modelSelect = document.getElementById('model-select');
+const modelDescription = document.getElementById('model-description');
+const temperatureSlider = document.getElementById('temperature');
+const tempValue = document.getElementById('temp-value');
+const maxTokensSlider = document.getElementById('max-tokens');
+const tokensValue = document.getElementById('tokens-value');
+// Instructions Form Elements
+const chatbotInstructions = document.getElementById('chatbot-instructions');
+const includeKnowledgeBase = document.getElementById('include-knowledge-base');
+const templateSelect = document.getElementById('template-select');
+const applyTemplateBtn = document.getElementById('apply-template-btn');
+// Tone Settings Form Elements
+const toneOptions = document.querySelectorAll('input[name="tone"]');
+const responseStyle = document.getElementById('response-style');
+const customToneInstructions = document.getElementById('custom-tone-instructions');
+const generatePreviewBtn = document.getElementById('generate-preview-btn');
+const previewResponse = document.querySelector('.preview-response');
+// Advanced Settings Form Elements
+const enableMemory = document.getElementById('enable-memory');
+const memoryLimit = document.getElementById('memory-limit');
+const enableStreaming = document.getElementById('enable-streaming');
+const enableWebSearch = document.getElementById('enable-web-search');
+const widgetPosition = document.getElementById('widget-position');
+const primaryColor = document.getElementById('primary-color');
+const autoOpen = document.getElementById('auto-open');
+// Chat configuration object (will be loaded from localStorage)
+let chatConfig = {
+    apiKey: '',
+    apiEndpoint: 'https://api.deepseek.com/v1/chat/completions',
+    model: 'deepseek-chat',
+    instructions: 'You are a helpful, friendly AI assistant called DeepSeek.',
+    toneStyle: 'friendly',
+    responseStyle: 'balanced',
+    customTone: '',
+    maxTokens: 1000,
+    temperature: 0.7,
+    memory: true,
+    memoryContext: 10,
+    streaming: true,
+    webSearch: false,
+    widgetPosition: 'bottom-right',
+    primaryColor: '#4285f4',
+    autoOpen: true
+};
+// Admin Templates
+const templates = {
+    'customer-support': {
+        instructions: 'You are DeepSeek, a helpful customer support assistant. Your role is to provide clear, accurate information about our products and services, help troubleshoot issues, and ensure customers feel valued and supported. Be friendly but professional, offer solutions rather than just explanations, and ask clarifying questions when needed.',
+        tone: 'professional'
+    },
+    'technical-assistant': {
+        instructions: 'You are DeepSeek, a technical assistant specializing in programming, software development, and IT support. Provide detailed technical explanations, code samples when appropriate, and help users solve technical problems. Use precise terminology but remain accessible to users with varying levels of technical expertise.',
+        tone: 'professional'
+    },
+    'creative-writer': {
+        instructions: 'You are DeepSeek, a creative writing assistant. Help users with storytelling, poetry, creative content ideas, and writing improvements. Be imaginative, inspirational, and provide examples that showcase various writing styles. When asked to generate creative content, aim for originality and emotional resonance.',
+        tone: 'casual'
+    },
+    'research-assistant': {
+        instructions: 'You are DeepSeek, a research assistant with broad knowledge across academic fields. Help users find information, explore concepts, understand complex topics, and organize research findings. Provide comprehensive and nuanced responses while maintaining academic rigor. Cite limitations of your knowledge when appropriate.',
+        tone: 'formal'
+    }
+};
+// Model descriptions
+const modelDescriptions = {
+    'deepseek-chat': '<strong>DeepSeek Chat:</strong> General-purpose AI designed for conversation, providing helpful and accurate responses across a wide range of topics.',
+    'deepseek-chat-plus': '<strong>DeepSeek Chat Plus:</strong> Enhanced version of DeepSeek Chat with improved reasoning capabilities and more extensive knowledge base. Ideal for complex conversations.',
+    'deepseek-coder': '<strong>DeepSeek Coder:</strong> Specialized model for programming and software development tasks. Excels at code generation, debugging, and technical explanations.',
+    'deepseek-research': '<strong>DeepSeek Research:</strong> Advanced model optimized for research tasks, data analysis, and academic content. Features in-depth knowledge across scientific domains.'
+};
+// Add error handling wrapper
+function handleAsyncError(fn) {
+    return async function(...args) {
+        try {
+            await fn.apply(this, args);
+        } catch (error) {
+            console.error('Error:', error);
+            showNotification(error.message, 'error');
+        }
+    };
+}
+// Handle login with rate limiting
+let loginAttempts = 0;
+let lastLoginAttempt = 0;
+async function handleLogin() {
+    const now = Date.now();
+    const timeSinceLastAttempt = now - lastLoginAttempt;
+    // Rate limiting
+    if (loginAttempts >= 5 && timeSinceLastAttempt < 300000) { // 5 minutes lockout
+        const remainingTime = Math.ceil((300000 - timeSinceLastAttempt) / 60000);
+        loginError.textContent = `Too many attempts. Please try again in ${remainingTime} minutes.`;
+        return;
+    }
+    const username = usernameInput.value;
+    const password = passwordInput.value;
+    if (!username || !password) {
+        loginError.textContent = 'Please enter both username and password.';
+        return;
+    }
+    const storedUsername = localStorage.getItem('adminUsername');
+    const storedPassword = localStorage.getItem('adminPassword');
+    lastLoginAttempt = now;
+    if (username === storedUsername && password === storedPassword) {
+        loginAttempts = 0;
+        loginScreen.classList.add('hidden');
+        adminPanel.classList.remove('hidden');
+        loadConfig();
+        setFormValues();
+    } else {
+        loginAttempts++;
+        loginError.textContent = 'Invalid username or password';
+        setTimeout(() => {
+            loginError.textContent = '';
+        }, 3000);
+    }
+}
+// Handle logout with confirmation
+function handleLogout() {
+    if (hasUnsavedChanges()) {
+        if (!confirm('You have unsaved changes. Are you sure you want to logout?')) {
+            return;
+        }
+    }
+    adminPanel.classList.add('hidden');
+    loginScreen.classList.remove('hidden');
+    usernameInput.value = '';
+    passwordInput.value = '';
+    resetUnsavedChanges();
+}
+// Track unsaved changes
+let hasUnsavedChanges = () => false;
+let resetUnsavedChanges = () => {};
+// Set up change tracking
+function setupChangeTracking() {
+    const formElements = document.querySelectorAll('input, select, textarea');
+    let initialValues = new Map();
+    formElements.forEach(element => {
+        initialValues.set(element, element.value);
+        element.addEventListener('change', () => {
+            const hasChanges = Array.from(formElements).some(el =>
+                initialValues.get(el) !== el.value
+            );
+            hasUnsavedChanges = () => hasChanges;
+        });
+    });
+    resetUnsavedChanges = () => {
+        formElements.forEach(element => {
+            initialValues.set(element, element.value);
+        });
+        hasUnsavedChanges = () => false;
+    };
+}
+// Save configuration with validation
+async function saveConfig() {
+    // Validate API settings
+    if (!apiKeyInput.value) {
+        showNotification('API Key is required.', 'error');
+        return;
+    }
+    if (!apiEndpointInput.value) {
+        showNotification('API Endpoint is required.', 'error');
+        return;
+    }
+    // Validate model settings
+    if (parseFloat(temperatureSlider.value) < 0 || parseFloat(temperatureSlider.value) > 1) {
+        showNotification('Temperature must be between 0 and 1.', 'error');
+        return;
+    }
+    // Save configuration
+    try {
+        // API Settings
+        chatConfig.apiKey = apiKeyInput.value;
+        chatConfig.apiEndpoint = apiEndpointInput.value;
+        // Model Settings
+        chatConfig.model = modelSelect.value;
+        chatConfig.temperature = parseFloat(temperatureSlider.value);
+        chatConfig.maxTokens = parseInt(maxTokensSlider.value);
+        // Instructions
+        chatConfig.instructions = chatbotInstructions.value;
+        // Tone Settings
+        toneOptions.forEach(option => {
+            if (option.checked) {
+                chatConfig.toneStyle = option.value;
+            }
+        });
+        chatConfig.responseStyle = responseStyle.value;
+        chatConfig.customTone = customToneInstructions.value;
+        // Advanced Settings
+        chatConfig.memory = enableMemory.checked;
+        chatConfig.memoryContext = parseInt(memoryLimit.value);
+        chatConfig.streaming = enableStreaming.checked;
+        chatConfig.webSearch = enableWebSearch.checked;
+        chatConfig.widgetPosition = widgetPosition.value;
+        chatConfig.primaryColor = primaryColor.value;
+        chatConfig.autoOpen = autoOpen.checked;
+        // Save to localStorage
+        localStorage.setItem('chatConfig', JSON.stringify(chatConfig));
+        // Reset unsaved changes tracker
+        resetUnsavedChanges();
+        // Show success notification
+        showNotification('Changes saved successfully.', 'success');
+        // Broadcast configuration change event
+        window.dispatchEvent(new CustomEvent('chatConfigUpdated', { detail: chatConfig }));
+    } catch (error) {
+        console.error('Save Error:', error);
+        showNotification('Failed to save changes: ' + error.message, 'error');
+    }
+}
+// Test API connection with timeout
+async function testApiConnection() {
+    const apiKey = apiKeyInput.value;
+    const apiEndpoint = apiEndpointInput.value;
+    if (!apiKey) {
+        showNotification('Please enter an API key.', 'error');
+        return;
+    }
+    showNotification('Testing API connection...', 'info');
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+        const response = await fetch(apiEndpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`
+            },
+            body: JSON.stringify({
+                model: modelSelect.value,
+                messages: [
+                    {
+                        role: "system",
+                        content: "You are a helpful assistant."
+                    },
+                    {
+                        role: "user",
+                        content: "Hello, this is a test message."
+                    }
+                ],
+                max_tokens: 10
+            }),
+            signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        if (response.ok) {
+            const data = await response.json();
+            if (data.choices && data.choices[0]?.message?.content) {
+                showNotification('API connection successful!', 'success');
+            } else {
+                throw new Error('Invalid API response format');
+            }
+        } else {
+            const error = await response.json();
+            throw new Error(error.error?.message || 'Unknown error');
+        }
+    } catch (error) {
+        if (error.name === 'AbortError') {
+            showNotification('API request timed out. Please check your connection.', 'error');
+        } else {
+            showNotification(`Connection error: ${error.message}`, 'error');
+        }
+    }
+}
+// Apply template with validation
+function applyTemplate() {
+    const template = templateSelect.value;
+    if (!template) {
+        showNotification('Please select a template.', 'warning');
+        return;
+    }
+    if (hasUnsavedChanges()) {
+        if (!confirm('Applying a template will overwrite your current changes. Continue?')) {
+            return;
+        }
+    }
+    const selectedTemplate = templates[template];
+    if (!selectedTemplate) {
+        showNotification('Template not found.', 'error');
+        return;
+    }
+    try {
+        chatbotInstructions.value = selectedTemplate.instructions;
+        // Set tone
+        toneOptions.forEach(option => {
+            if (option.value === selectedTemplate.tone) {
+                option.checked = true;
+            }
+        });
+        showNotification(`Applied ${templateSelect.options[templateSelect.selectedIndex].text} template.`, 'success');
+    } catch (error) {
+        console.error('Template Error:', error);
+        showNotification('Failed to apply template: ' + error.message, 'error');
+    }
+}
+// Generate preview with error handling
+async function generatePreview() {
+    try {
+        // Collect current settings
+        let instructions = chatbotInstructions.value;
+        let tone = '';
+        toneOptions.forEach(option => {
+            if (option.checked) {
+                tone = option.value;
+            }
+        });
+        // Add tone customization to instructions
+        let toneInstruction = '';
+        switch (tone) {
+            case 'friendly':
+                toneInstruction = 'Be warm, approachable, and conversational in your responses.';
+                break;
+            case 'professional':
+                toneInstruction = 'Maintain a professional, business-like tone while being helpful.';
+                break;
+            case 'casual':
+                toneInstruction = 'Keep your tone relaxed and casual, like chatting with a friend.';
+                break;
+            case 'formal':
+                toneInstruction = 'Use a formal, academic tone with precise language.';
+                break;
+            default:
+                throw new Error('Invalid tone selected');
+        }
+        // Response style
+        let styleInstruction = '';
+        switch (responseStyle.value) {
+            case 'concise':
+                styleInstruction = 'Keep your responses brief and to the point.';
+                break;
+            case 'detailed':
+                styleInstruction = 'Provide detailed, comprehensive responses.';
+                break;
+            case 'balanced':
+                styleInstruction = 'Balance brevity with thoroughness in your responses.';
+                break;
+            default:
+                throw new Error('Invalid response style selected');
+        }
+        // Custom tone instructions
+        let customInstructions = customToneInstructions.value;
+        // Combine all instructions
+        let fullInstructions = `${instructions}\n\n${toneInstruction}\n${styleInstruction}`;
+        if (customInstructions) {
+            fullInstructions += '\n\n' + customInstructions;
+        }
+        // Generate preview
+        let previewText = generatePreviewText(tone, responseStyle.value);
+        previewResponse.textContent = previewText;
+        showNotification('Preview generated.', 'info');
+    } catch (error) {
+        console.error('Preview Error:', error);
+        showNotification('Failed to generate preview: ' + error.message, 'error');
+    }
+}
+// Generate preview text
+function generatePreviewText(tone, style) {
+    let baseText = '';
+    switch (tone) {
+        case 'friendly':
+            baseText = 'Hi there! I\'m DeepSeek, your friendly AI assistant. I\'m here to help you with any questions or tasks you have today. Just let me know what you need assistance with, and I\'ll do my best to help you out!';
+            break;
+        case 'professional':
+            baseText = 'Welcome. I\'m DeepSeek, your AI assistant. I\'m ready to provide you with accurate information and efficient assistance with your queries. Please let me know how I can be of service to you today.';
+            break;
+        case 'casual':
+            baseText = 'Hey! DeepSeek here. What\'s up? Got anything you want to chat about or need help with? I\'m all ears and ready to jump in whenever you are!';
+            break;
+        case 'formal':
+            baseText = 'Greetings. I am DeepSeek, an artificial intelligence assistant designed to provide you with information and assistance. I would be pleased to address any inquiries or requests you may have at this time.';
+            break;
+        default:
+            baseText = 'Hello, I\'m DeepSeek. How can I help you today?';
+    }
+    switch (style) {
+        case 'concise':
+            return baseText.split('.')[0] + '.';
+        case 'detailed':
+            return baseText + ' I can help with information retrieval, creative content, problem-solving, and many other tasks. My knowledge base includes a wide range of topics, though I have some limitations on real-time data and specialized expertise. Feel free to be specific with your requests so I can provide the most helpful response.';
+        case 'balanced':
+        default:
+            return baseText;
+    }
+}
+// Show notification with queue
+const notificationQueue = [];
+let isShowingNotification = false;
+function showNotification(message, type = 'info') {
+    notificationQueue.push({ message, type });
+    if (!isShowingNotification) {
+        showNextNotification();
+    }
+}
+async function showNextNotification() {
+    if (notificationQueue.length === 0) {
+        isShowingNotification = false;
+        return;
+    }
+    isShowingNotification = true;
+    const { message, type } = notificationQueue.shift();
+    const notification = document.createElement('div');
+    notification.classList.add('notification', `notification-${type}`);
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    await new Promise(resolve => setTimeout(resolve, 5000));
+    notification.classList.add('notification-hide');
+    await new Promise(resolve => setTimeout(resolve, 500));
+    notification.remove();
+    showNextNotification();
+}
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    setupChangeTracking();
+    // Add event listeners
+    loginBtn.addEventListener('click', handleAsyncError(handleLogin));
+    logoutBtn.addEventListener('click', handleLogout);
+    saveBtn.addEventListener('click', handleAsyncError(saveConfig));
+    testApiBtn.addEventListener('click', handleAsyncError(testApiConnection));
+    applyTemplateBtn.addEventListener('click', handleAsyncError(applyTemplate));
+    generatePreviewBtn.addEventListener('click', handleAsyncError(generatePreview));
+    // Window beforeunload handler
+    window.addEventListener('beforeunload', (e) => {
+        if (hasUnsavedChanges()) {
+            e.preventDefault();
+            e.returnValue = '';
+        }
+    });
+});

contact.html ADDED Viewed

	@@ -0,0 +1,130 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Contact DeepSeek - Get in touch with our team">
+    <meta name="theme-color" content="#4285f4">
+    <title>Contact Us - DeepSeek</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/pages.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <header class="page-header">
+        <nav class="main-nav">
+            <div class="logo">
+                <img src="images/logo.png" alt="DeepSeek Logo" width="40" height="40">
+                <span>DeepSeek</span>
+            </div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html" class="active">Contact</a></li>
+                <li><a href="follow.html">Follow Us</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main class="page-content">
+        <section class="contact-section">
+            <h1>Contact Us</h1>
+            <p class="section-desc">Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
+            <div class="contact-container">
+                <div class="contact-info">
+                    <h2>Get in Touch</h2>
+                    <div class="info-item">
+                        <i class="fas fa-map-marker-alt"></i>
+                        <div>
+                            <h3>Address</h3>
+                            <p>123 AI Street, Tech Valley<br>Silicon City, 12345</p>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-phone"></i>
+                        <div>
+                            <h3>Phone</h3>
+                            <p>+1 (555) 123-4567</p>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-envelope"></i>
+                        <div>
+                            <h3>Email</h3>
+                            <p>[email protected]</p>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-clock"></i>
+                        <div>
+                            <h3>Working Hours</h3>
+                            <p>Monday - Friday: 9:00 AM - 6:00 PM<br>Weekend: Closed</p>
+                        </div>
+                    </div>
+                </div>
+                <form class="contact-form" id="contactForm">
+                    <h2>Send Message</h2>
+                    <div class="form-group">
+                        <label for="name">Your Name</label>
+                        <input type="text" id="name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Your Email</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="subject">Subject</label>
+                        <input type="text" id="subject" name="subject" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" rows="5" required></textarea>
+                    </div>
+                    <button type="submit" class="submit-btn">Send Message</button>
+                </form>
+            </div>
+        </section>
+    </main>
+    <footer class="page-footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>DeepSeek</h3>
+                <p>Advancing AI technology to help people communicate and solve problems more effectively.</p>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                    <li><a href="follow.html">Follow Us</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect With Us</h3>
+                <div class="social-links">
+                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 DeepSeek. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        document.getElementById('contactForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Add your form submission logic here
+            alert('Thank you for your message. We will get back to you soon!');
+            this.reset();
+        });
+    </script>
+</body>
+</html>

css/admin.css ADDED Viewed

	@@ -0,0 +1,489 @@

+/* Admin Panel Theme Variables */
+:root {
+    --admin-bg: #f4f6f8;
+    --sidebar-bg: #fff;
+    --card-bg: #fff;
+    --text-primary: #2c3e50;
+    --text-secondary: #7f8c8d;
+    --accent-color: #4285f4;
+    --border-color: #e1e4e8;
+    --hover-bg: #f8f9fa;
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+    --success-color: #27ae60;
+    --warning-color: #f39c12;
+    --danger-color: #e74c3c;
+}
+/* Dark Theme */
+[data-theme="dark"] {
+    --admin-bg: #1a1a1a;
+    --sidebar-bg: #2d2d2d;
+    --card-bg: #2d2d2d;
+    --text-primary: #fff;
+    --text-secondary: #bdc3c7;
+    --border-color: #404040;
+    --hover-bg: #383838;
+}
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+body {
+    background-color: var(--admin-bg);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+/* Admin Container */
+.admin-container {
+    display: flex;
+    min-height: 100vh;
+}
+/* Sidebar */
+.sidebar {
+    width: 260px;
+    background-color: var(--sidebar-bg);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    height: 100vh;
+    box-shadow: var(--shadow-sm);
+}
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.admin-logo {
+    height: 32px;
+    width: auto;
+}
+.sidebar-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+}
+.sidebar-nav {
+    padding: 20px 0;
+    flex-grow: 1;
+}
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    gap: 12px;
+}
+.nav-item:hover {
+    background-color: var(--hover-bg);
+    color: var(--accent-color);
+}
+.nav-item.active {
+    background-color: rgba(66, 133, 244, 0.1);
+    color: var(--accent-color);
+    border-right: 3px solid var(--accent-color);
+}
+.nav-item i {
+    width: 20px;
+    text-align: center;
+}
+.sidebar-footer {
+    padding: 20px;
+    border-top: 1px solid var(--border-color);
+}
+.logout-btn {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px;
+    border: none;
+    background: none;
+    color: var(--danger-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 6px;
+}
+.logout-btn:hover {
+    background-color: var(--hover-bg);
+}
+/* Main Content */
+.main-content {
+    flex: 1;
+    margin-left: 260px;
+    padding: 20px;
+}
+/* Top Bar */
+.top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow-sm);
+    margin-bottom: 24px;
+}
+.search-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background-color: var(--admin-bg);
+    padding: 8px 16px;
+    border-radius: 8px;
+    width: 300px;
+}
+.search-bar input {
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--text-primary);
+    width: 100%;
+}
+.search-bar i {
+    color: var(--text-secondary);
+}
+.top-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+.theme-toggle {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 8px;
+    font-size: 20px;
+    transition: color 0.2s ease;
+}
+.theme-toggle:hover {
+    color: var(--text-primary);
+}
+.admin-profile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.admin-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+/* Dashboard Stats */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 24px;
+    margin-bottom: 24px;
+}
+.stat-card {
+    background-color: var(--card-bg);
+    padding: 24px;
+    border-radius: 10px;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background-color: rgba(66, 133, 244, 0.1);
+    color: var(--accent-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+.stat-info h3 {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+}
+.stat-info p {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+/* Charts Grid */
+.charts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 24px;
+}
+.chart-card {
+    background-color: var(--card-bg);
+    padding: 24px;
+    border-radius: 10px;
+    box-shadow: var(--shadow-sm);
+}
+.chart-card h3 {
+    margin-bottom: 20px;
+    color: var(--text-primary);
+}
+.chart-placeholder {
+    width: 100%;
+    height: 300px;
+    background-color: var(--hover-bg);
+    border-radius: 8px;
+}
+/* Settings */
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 24px;
+}
+.settings-card {
+    background-color: var(--card-bg);
+    padding: 24px;
+    border-radius: 10px;
+    box-shadow: var(--shadow-sm);
+}
+.settings-card h3 {
+    margin-bottom: 20px;
+    color: var(--text-primary);
+}
+.form-group {
+    margin-bottom: 20px;
+}
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-secondary);
+}
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group input[type="url"],
+.form-group input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--admin-bg);
+    color: var(--text-primary);
+}
+.form-group input[type="range"] {
+    width: 100%;
+    margin-bottom: 8px;
+}
+.range-value {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+.btn-primary {
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.btn-primary:hover {
+    opacity: 0.9;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 70px;
+    }
+    .sidebar-header h2,
+    .nav-item span,
+    .logout-btn span {
+        display: none;
+    }
+    .main-content {
+        margin-left: 70px;
+    }
+    .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    .charts-grid,
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+}
+/* Input with copy button */
+.input-with-copy {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.copy-btn {
+    position: absolute;
+    right: 12px;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    transition: color 0.2s ease;
+}
+.copy-btn:hover {
+    color: var(--text-primary);
+}
+/* Select Input */
+select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--admin-bg);
+    color: var(--text-primary);
+    font-size: 14px;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+}
+select:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
+}
+/* Range with value */
+.range-with-value {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.range-with-value input[type="range"] {
+    flex: 1;
+}
+.range-value {
+    min-width: 40px;
+    text-align: center;
+    padding: 2px 6px;
+    background-color: var(--hover-bg);
+    border-radius: 4px;
+    font-size: 14px;
+}
+/* Help text */
+.help-text {
+    display: block;
+    color: var(--text-secondary);
+    font-size: 12px;
+    margin-top: 4px;
+}
+/* Checkbox label */
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+.checkbox-label input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+}
+/* Buttons */
+.btn-secondary {
+    background-color: var(--hover-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    padding: 12px 24px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+}
+.btn-secondary:hover {
+    background-color: var(--border-color);
+}
+.btn-secondary i {
+    font-size: 14px;
+}
+/* Form layout */
+#modelSettingsForm {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+#modelSettingsForm .btn-primary {
+    margin-top: 12px;
+}
+/* Test Model Button */
+#testModel {
+    width: 100%;
+}

css/login.css ADDED Viewed

	@@ -0,0 +1,197 @@

+/* Login Page Theme Variables */
+:root {
+    --bg-color: #f4f6f8;
+    --card-bg: #fff;
+    --text-primary: #2c3e50;
+    --text-secondary: #7f8c8d;
+    --accent-color: #4285f4;
+    --border-color: #e1e4e8;
+    --error-color: #e74c3c;
+    --success-color: #27ae60;
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+}
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+body {
+    background-color: var(--bg-color);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+/* Login Container */
+.login-container {
+    width: 100%;
+    max-width: 400px;
+}
+.login-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    padding: 32px;
+}
+/* Login Header */
+.login-header {
+    text-align: center;
+    margin-bottom: 32px;
+}
+.login-logo {
+    width: 120px;
+    height: auto;
+    margin-bottom: 16px;
+}
+.login-header h1 {
+    color: var(--text-primary);
+    font-size: 24px;
+    font-weight: 600;
+}
+/* Login Form */
+.login-form {
+    margin-bottom: 24px;
+}
+.form-group {
+    margin-bottom: 20px;
+}
+.form-group label {
+    display: block;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+.form-group label i {
+    margin-right: 8px;
+    color: var(--accent-color);
+}
+.form-group input {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 16px;
+    transition: all 0.2s ease;
+}
+.form-group input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
+}
+/* Password Input Group */
+.password-input {
+    position: relative;
+}
+.toggle-password {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+}
+.toggle-password:hover {
+    color: var(--text-primary);
+}
+/* Error Message */
+.error-message {
+    color: var(--error-color);
+    font-size: 14px;
+    margin-bottom: 16px;
+    min-height: 20px;
+}
+/* Login Button */
+.login-btn {
+    width: 100%;
+    padding: 12px;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+.login-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+.login-btn:active {
+    transform: translateY(0);
+}
+/* Login Footer */
+.login-footer {
+    text-align: center;
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border-color);
+}
+.login-footer p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin-bottom: 12px;
+}
+.back-link {
+    color: var(--accent-color);
+    text-decoration: none;
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    transition: color 0.2s ease;
+}
+.back-link:hover {
+    color: var(--text-primary);
+}
+/* Responsive Design */
+@media (max-width: 480px) {
+    .login-card {
+        padding: 24px;
+    }
+    .login-logo {
+        width: 100px;
+    }
+    .login-header h1 {
+        font-size: 20px;
+    }
+}

css/pages.css ADDED Viewed

	@@ -0,0 +1,516 @@

+/* Common Styles */
+:root {
+    --primary-color: #4285f4;
+    --secondary-color: #34a853;
+    --accent-color: #ea4335;
+    --text-color: #333;
+    --light-gray: #f5f5f5;
+    --dark-gray: #666;
+    --white: #fff;
+    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --transition: all 0.3s ease;
+}
+.page-header {
+    background: var(--white);
+    box-shadow: var(--shadow);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+.main-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+}
+.nav-links a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+}
+.nav-links a:hover,
+.nav-links a.active {
+    color: var(--primary-color);
+}
+.page-content {
+    padding-top: 80px;
+    min-height: calc(100vh - 300px);
+}
+.hero-section {
+    text-align: center;
+    padding: 4rem 2rem;
+    background: linear-gradient(to right, #4285f4, #34a853);
+    color: var(--white);
+}
+.hero-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+.section-desc {
+    font-size: 1.2rem;
+    max-width: 600px;
+    margin: 0 auto;
+    opacity: 0.9;
+}
+/* About Page Styles */
+.about-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.mission-vision {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+.mission, .vision {
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.values-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+.value-item {
+    text-align: center;
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.value-item i {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+.team-member {
+    text-align: center;
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.member-photo {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    margin-bottom: 1rem;
+    object-fit: cover;
+}
+.achievements-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+}
+.achievement-item {
+    text-align: center;
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.achievement-item .number {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+/* Contact Page Styles */
+.contact-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+}
+.contact-info {
+    background: var(--white);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+.contact-item i {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+.contact-form {
+    background: var(--white);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.form-group {
+    margin-bottom: 1.5rem;
+}
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+}
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    transition: var(--transition);
+}
+.form-group input:focus,
+.form-group textarea:focus {
+    border-color: var(--primary-color);
+    outline: none;
+}
+.submit-button {
+    background: var(--primary-color);
+    color: var(--white);
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: var(--transition);
+}
+.submit-button:hover {
+    background: #3367d6;
+}
+/* Follow Us Page Styles */
+.social-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.social-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+.social-card {
+    text-align: center;
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+}
+.social-card:hover {
+    transform: translateY(-5px);
+}
+.social-card i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+.social-card.facebook i { color: #1877f2; }
+.social-card.twitter i { color: #1da1f2; }
+.social-card.linkedin i { color: #0077b5; }
+.social-card.instagram i { color: #e4405f; }
+.social-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--primary-color);
+    color: var(--white);
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    text-decoration: none;
+    margin: 1rem 0;
+    transition: var(--transition);
+}
+.social-button:hover {
+    background: #3367d6;
+}
+.followers {
+    display: block;
+    color: var(--dark-gray);
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+}
+.community-section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+.community-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin: 2rem 0;
+}
+.community-card {
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    transition: var(--transition);
+}
+.community-card:hover {
+    transform: translateY(-5px);
+}
+.community-card i {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+.community-button {
+    display: inline-block;
+    background: var(--light-gray);
+    color: var(--text-color);
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    text-decoration: none;
+    margin-top: 1rem;
+    transition: var(--transition);
+}
+.community-button:hover {
+    background: #e0e0e0;
+}
+.newsletter-section {
+    background: var(--light-gray);
+    padding: 4rem 2rem;
+    text-align: center;
+}
+.newsletter-form {
+    max-width: 500px;
+    margin: 2rem auto 0;
+}
+.newsletter-form .form-group {
+    display: flex;
+    gap: 1rem;
+}
+.subscribe-button {
+    background: var(--primary-color);
+    color: var(--white);
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.subscribe-button:hover {
+    background: #3367d6;
+}
+/* Footer Styles */
+.page-footer {
+    background: var(--text-color);
+    color: var(--white);
+    padding: 4rem 2rem 2rem;
+}
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 2rem;
+}
+.footer-section h3 {
+    margin-bottom: 1rem;
+}
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+}
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+.footer-section a {
+    color: var(--white);
+    text-decoration: none;
+    opacity: 0.8;
+    transition: var(--transition);
+}
+.footer-section a:hover {
+    opacity: 1;
+}
+.social-links {
+    display: flex;
+    gap: 1rem;
+}
+.social-links a {
+    font-size: 1.5rem;
+}
+.footer-bottom {
+    max-width: 1200px;
+    margin: 2rem auto 0;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+    opacity: 0.8;
+}
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .about-section,
+    .contact-section,
+    .social-section,
+    .community-section {
+        padding: 2rem 1rem;
+    }
+    .values-grid,
+    .achievements-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 992px) {
+    .mission-vision,
+    .team-grid,
+    .social-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .contact-section {
+        grid-template-columns: 1fr;
+    }
+    .footer-content {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+@media (max-width: 768px) {
+    .main-nav {
+        flex-direction: column;
+        padding: 1rem;
+    }
+    .nav-links {
+        margin-top: 1rem;
+        gap: 1rem;
+    }
+    .hero-section {
+        padding: 3rem 1rem;
+    }
+    .hero-section h1 {
+        font-size: 2rem;
+    }
+    .values-grid,
+    .team-grid,
+    .social-grid,
+    .community-grid {
+        grid-template-columns: 1fr;
+    }
+    .newsletter-form .form-group {
+        flex-direction: column;
+    }
+}
+@media (max-width: 576px) {
+    .mission-vision {
+        grid-template-columns: 1fr;
+    }
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    .social-links {
+        justify-content: center;
+    }
+}

css/style.css ADDED Viewed

	@@ -0,0 +1,755 @@

+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+body {
+    background-color: #fff;
+    color: #333;
+    line-height: 1.6;
+}
+/* Chat Container */
+.chat-container {
+    max-width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+}
+/* Status Bar */
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 16px;
+    background-color: #fff;
+    font-size: 14px;
+    height: 24px;
+}
+.status-icons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.network {
+    font-size: 12px;
+    color: #666;
+}
+/* Chat Header */
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+}
+.chat-header h1 {
+    font-size: 18px;
+    font-weight: 600;
+}
+.menu-btn, .new-chat-btn {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: #666;
+    cursor: pointer;
+    padding: 8px;
+}
+/* Chat Messages */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.welcome-message {
+    text-align: center;
+    max-width: 300px;
+}
+.welcome-logo {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 16px;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 2px 8px var(--shadow-color);
+}
+.welcome-message h2 {
+    font-size: 24px;
+    margin-bottom: 8px;
+    color: #333;
+}
+.welcome-message p {
+    color: #666;
+    font-size: 16px;
+}
+/* Chat Input */
+.chat-input {
+    padding: 16px;
+    background-color: #f8f8f8;
+    border-top: 1px solid #eee;
+}
+.input-container {
+    background-color: #fff;
+    border-radius: 24px;
+    padding: 8px 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+#message-input {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 8px 0;
+    background: transparent;
+}
+.input-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #eee;
+}
+.more-btn, .send-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    color: #666;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+.send-btn {
+    background-color: #4285f4;
+    color: white;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+}
+.send-btn i {
+    font-size: 16px;
+}
+.more-btn {
+    color: #666;
+    transition: color 0.2s ease;
+}
+.more-btn:hover {
+    color: #333;
+}
+/* Message Bubbles */
+.message {
+    margin: 16px;
+    max-width: 80%;
+    animation: fadeIn 0.3s ease;
+}
+/* User message (question) styling */
+.question-bubble {
+    background-color: #e3f2fd;
+    color: #1a1a1a;
+    padding: 12px 20px;
+    border-radius: 20px;
+    margin-left: auto;
+    font-size: 15px;
+    line-height: 1.5;
+}
+/* Bot message (answer) styling */
+.answer-container {
+    display: flex;
+    gap: 16px;
+    margin-right: auto;
+    width: 100%;
+}
+.bot-icon {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.bot-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+.answer-content {
+    flex-grow: 1;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #333;
+}
+.response-heading {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 20px 0 15px;
+    color: #1a1a1a;
+}
+.definition {
+    margin: 15px 0;
+}
+.term {
+    font-weight: 500;
+    color: #1a1a1a;
+}
+.definition-text {
+    color: #444;
+}
+.numbered-list {
+    margin: 15px 0;
+}
+.list-item {
+    display: flex;
+    margin: 12px 0;
+    align-items: flex-start;
+}
+.number {
+    font-weight: 600;
+    margin-right: 8px;
+    color: #1a1a1a;
+    min-width: 25px;
+}
+.list-content {
+    flex: 1;
+}
+.list-term {
+    font-weight: 500;
+    color: #1a1a1a;
+}
+.list-definition {
+    color: #444;
+}
+.response-paragraph {
+    margin: 12px 0;
+    color: #333;
+}
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+/* Dark theme adjustments */
+[data-theme="dark"] .question-bubble {
+    background-color: #2c2c2c;
+    color: #ffffff;
+}
+[data-theme="dark"] .answer-content {
+    color: #e1e1e1;
+}
+[data-theme="dark"] .response-heading,
+[data-theme="dark"] .term,
+[data-theme="dark"] .number,
+[data-theme="dark"] .list-term {
+    color: #e1e1e1;
+}
+[data-theme="dark"] .definition-text,
+[data-theme="dark"] .list-definition,
+[data-theme="dark"] .response-paragraph {
+    color: #b4b4b4;
+}
+/* Typing indicator adjustments */
+.typing-indicator {
+    background: transparent !important;
+    margin-bottom: 8px;
+}
+.typing-indicator span {
+    background-color: var(--text-secondary);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .chat-container {
+        height: 100vh;
+    }
+    .welcome-message {
+        padding: 0 16px;
+    }
+    .input-container {
+        margin-bottom: env(safe-area-inset-bottom, 0);
+    }
+}
+/* Error Message */
+.error-message {
+    background-color: #ffebee;
+    color: #c62828;
+    border: 1px solid #ffcdd2;
+    padding: 12px 16px;
+    margin: 8px 0;
+    border-radius: 8px;
+    font-size: 14px;
+    text-align: center;
+    animation: shake 0.5s ease-in-out;
+}
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+}
+/* Menu Overlay Styles */
+.menu-overlay {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.menu-overlay.active {
+    left: 0;
+    opacity: 1;
+    visibility: visible;
+}
+.menu-content {
+    position: absolute;
+    top: 0;
+    left: -300px;
+    width: 300px;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    transition: left 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+}
+.menu-overlay.active .menu-content {
+    left: 0;
+}
+.menu-header {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #eee;
+}
+.menu-logo {
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.close-menu-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #666;
+    cursor: pointer;
+    padding: 8px;
+    transition: color 0.2s ease;
+}
+.close-menu-btn:hover {
+    color: #333;
+}
+.menu-nav {
+    padding: 20px 0;
+    flex-grow: 1;
+}
+.menu-item {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    color: #333;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+}
+.menu-item:hover {
+    background-color: #f5f5f5;
+}
+.menu-item i {
+    width: 24px;
+    margin-right: 15px;
+    color: #4285f4;
+}
+.menu-item span {
+    font-size: 16px;
+}
+/* Recent Conversations Styles */
+.recent-conversations {
+    padding: 16px 0;
+}
+.recent-conversations h3 {
+    font-size: 14px;
+    color: #666;
+    padding: 0 20px;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.conversation-list {
+    margin-bottom: 8px;
+}
+.conversation-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    color: #333;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+.conversation-item:hover {
+    background-color: #f5f5f5;
+}
+.conversation-item i {
+    width: 24px;
+    margin-right: 15px;
+    color: #4285f4;
+}
+.conversation-item span {
+    font-size: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.see-more-btn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px 20px;
+    background: none;
+    border: none;
+    color: #4285f4;
+    cursor: pointer;
+    font-size: 15px;
+    transition: background-color 0.2s ease;
+}
+.see-more-btn:hover {
+    background-color: #f5f5f5;
+}
+.see-more-btn i {
+    width: 24px;
+    margin-right: 15px;
+}
+.menu-divider {
+    height: 1px;
+    background-color: #eee;
+    margin: 8px 0;
+}
+/* Theme Variables */
+:root {
+    --bg-color: #fff;
+    --text-color: #333;
+    --header-bg: #fff;
+    --input-bg: #f8f8f8;
+    --border-color: #eee;
+    --message-bg: #f1f3f4;
+    --message-text: #333;
+    --user-message-bg: #4285f4;
+    --user-message-text: #fff;
+    --hover-bg: #f5f5f5;
+    --icon-color: #666;
+    --secondary-text: #666;
+    --error-bg: #ffebee;
+    --error-border: #ffcdd2;
+    --error-text: #c62828;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --overlay-bg: rgba(0, 0, 0, 0.5);
+}
+/* Dark Theme */
+[data-theme="dark"] {
+    --bg-color: #1a1a1a;
+    --text-color: #fff;
+    --header-bg: #2d2d2d;
+    --input-bg: #2d2d2d;
+    --border-color: #404040;
+    --message-bg: #383838;
+    --message-text: #fff;
+    --user-message-bg: #4285f4;
+    --user-message-text: #fff;
+    --hover-bg: #404040;
+    --icon-color: #aaa;
+    --secondary-text: #aaa;
+    --error-bg: #421c1c;
+    --error-border: #692727;
+    --error-text: #ff8a8a;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --overlay-bg: rgba(0, 0, 0, 0.7);
+}
+/* Apply Theme Variables */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+.chat-header {
+    background-color: var(--header-bg);
+    border-bottom: 1px solid var(--border-color);
+}
+.chat-input {
+    background-color: var(--input-bg);
+    border-top: 1px solid var(--border-color);
+}
+.input-container {
+    background-color: var(--bg-color);
+    box-shadow: 0 2px 8px var(--shadow-color);
+}
+#message-input {
+    color: var(--text-color);
+}
+.bot-message {
+    background-color: var(--message-bg);
+    color: var(--message-text);
+}
+.menu-content {
+    background-color: var(--bg-color);
+}
+/* Header Actions */
+.header-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.theme-toggle-btn {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: var(--icon-color);
+    cursor: pointer;
+    padding: 8px;
+    transition: color 0.2s ease;
+}
+.theme-toggle-btn:hover {
+    color: var(--text-color);
+}
+/* Update existing styles to use variables */
+.menu-btn, .new-chat-btn {
+    color: var(--icon-color);
+}
+.menu-btn:hover, .new-chat-btn:hover {
+    color: var(--text-color);
+}
+.welcome-message h2 {
+    color: var(--text-color);
+}
+.welcome-message p {
+    color: var(--secondary-text);
+}
+.error-message {
+    background-color: var(--error-bg);
+    color: var(--error-text);
+    border-color: var(--error-border);
+}
+/* Conversation Overlay Styles */
+.conversation-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--overlay-bg);
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: fadeIn 0.3s ease;
+}
+.conversation-overlay-content {
+    background-color: var(--bg-color);
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    border-radius: 12px;
+    box-shadow: 0 4px 24px var(--shadow-color);
+    overflow: hidden;
+    animation: slideIn 0.3s ease;
+}
+.overlay-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.overlay-header h2 {
+    font-size: 20px;
+    color: var(--text-color);
+}
+.close-overlay-btn {
+    background: none;
+    border: none;
+    color: var(--icon-color);
+    font-size: 24px;
+    cursor: pointer;
+    padding: 8px;
+    transition: color 0.2s ease;
+}
+.close-overlay-btn:hover {
+    color: var(--text-color);
+}
+.conversation-list-full {
+    overflow-y: auto;
+    max-height: calc(80vh - 70px);
+    padding: 12px 0;
+}
+/* Enhanced Conversation Item Styles */
+.conversation-item {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+    border-bottom: 1px solid var(--border-color);
+}
+.conversation-item:last-child {
+    border-bottom: none;
+}
+.conversation-item:hover {
+    background-color: var(--hover-bg);
+}
+.conversation-details {
+    flex-grow: 1;
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.conversation-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--text-color);
+}
+.message-count {
+    font-size: 14px;
+    color: var(--secondary-text);
+}
+.conversation-date {
+    font-size: 12px;
+    color: var(--secondary-text);
+}
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

follow.html ADDED Viewed

	@@ -0,0 +1,169 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Follow DeepSeek on social media and join our community">
+    <meta name="theme-color" content="#4285f4">
+    <title>Follow Us - DeepSeek</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/pages.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <header class="page-header">
+        <nav class="main-nav">
+            <div class="logo">
+                <img src="images/logo.png" alt="DeepSeek Logo" width="40" height="40">
+                <span>DeepSeek</span>
+            </div>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="follow.html" class="active">Follow Us</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main class="page-content">
+        <section class="hero-section">
+            <h1>Connect With Us</h1>
+            <p class="section-desc">Join our growing community and stay updated with the latest news and developments</p>
+        </section>
+        <section class="social-section">
+            <div class="social-grid">
+                <div class="social-card facebook">
+                    <i class="fab fa-facebook"></i>
+                    <h2>Facebook</h2>
+                    <p>Join our Facebook community for daily updates and engaging discussions</p>
+                    <a href="#" class="social-button" target="_blank" rel="noopener noreferrer">
+                        Follow on Facebook
+                        <i class="fas fa-external-link-alt"></i>
+                    </a>
+                    <span class="followers">50K+ Followers</span>
+                </div>
+                <div class="social-card twitter">
+                    <i class="fab fa-twitter"></i>
+                    <h2>Twitter</h2>
+                    <p>Follow us on Twitter for real-time updates and tech insights</p>
+                    <a href="#" class="social-button" target="_blank" rel="noopener noreferrer">
+                        Follow on Twitter
+                        <i class="fas fa-external-link-alt"></i>
+                    </a>
+                    <span class="followers">75K+ Followers</span>
+                </div>
+                <div class="social-card linkedin">
+                    <i class="fab fa-linkedin"></i>
+                    <h2>LinkedIn</h2>
+                    <p>Connect with us professionally and stay updated with company news</p>
+                    <a href="#" class="social-button" target="_blank" rel="noopener noreferrer">
+                        Follow on LinkedIn
+                        <i class="fas fa-external-link-alt"></i>
+                    </a>
+                    <span class="followers">30K+ Followers</span>
+                </div>
+                <div class="social-card instagram">
+                    <i class="fab fa-instagram"></i>
+                    <h2>Instagram</h2>
+                    <p>Follow our Instagram for behind-the-scenes and company culture</p>
+                    <a href="#" class="social-button" target="_blank" rel="noopener noreferrer">
+                        Follow on Instagram
+                        <i class="fas fa-external-link-alt"></i>
+                    </a>
+                    <span class="followers">40K+ Followers</span>
+                </div>
+            </div>
+        </section>
+        <section class="community-section">
+            <h2>Join Our Community</h2>
+            <div class="community-grid">
+                <div class="community-card">
+                    <i class="fab fa-github"></i>
+                    <h3>GitHub</h3>
+                    <p>Contribute to our open-source projects and collaborate with developers</p>
+                    <a href="#" class="community-button" target="_blank" rel="noopener noreferrer">
+                        View Repository
+                    </a>
+                </div>
+                <div class="community-card">
+                    <i class="fab fa-discord"></i>
+                    <h3>Discord</h3>
+                    <p>Join our Discord server for real-time discussions and support</p>
+                    <a href="#" class="community-button" target="_blank" rel="noopener noreferrer">
+                        Join Server
+                    </a>
+                </div>
+                <div class="community-card">
+                    <i class="fab fa-medium"></i>
+                    <h3>Blog</h3>
+                    <p>Read our latest articles and technical insights on Medium</p>
+                    <a href="#" class="community-button" target="_blank" rel="noopener noreferrer">
+                        Read Blog
+                    </a>
+                </div>
+            </div>
+        </section>
+        <section class="newsletter-section">
+            <h2>Subscribe to Our Newsletter</h2>
+            <p>Get the latest updates delivered directly to your inbox</p>
+            <form class="newsletter-form" id="newsletterForm">
+                <div class="form-group">
+                    <input type="email" id="email" name="email" placeholder="Enter your email address" required>
+                    <button type="submit" class="subscribe-button">
+                        Subscribe
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </form>
+        </section>
+    </main>
+    <footer class="page-footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>DeepSeek</h3>
+                <p>Advancing AI technology to help people communicate and solve problems more effectively.</p>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                    <li><a href="follow.html">Follow Us</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Connect With Us</h3>
+                <div class="social-links">
+                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 DeepSeek. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        document.getElementById('newsletterForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            alert('Thank you for subscribing! We will send updates to ' + email);
+            this.reset();
+        });
+    </script>
+</body>
+</html>

images/bot-message-logo.png ADDED Viewed

Git LFS Details

SHA256: 1d49ee06407dca1ed5dd07cb6c24b37758b6980b6cc44571ebcf5f2f094ea983
Pointer size: 132 Bytes
Size of remote file: 1.29 MB

images/menu-logo.png ADDED Viewed

Git LFS Details

SHA256: 1a5b3066349b24fe6ef26d8bf52b4ad5166b3002a353ca8579b17391a763605b
Pointer size: 132 Bytes
Size of remote file: 1.24 MB

images/welcome-logo.png ADDED Viewed

Git LFS Details

SHA256: 4a2cfcaf78809140f1784ddc37d9d05ea547a94da7b2e4a3c457cdf601c553b3
Pointer size: 132 Bytes
Size of remote file: 1.18 MB

index.html CHANGED Viewed

@@ -1,19 +1,92 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Muhafiz AI Chat</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <!-- Side Menu Overlay -->
+    <div id="menuOverlay" class="menu-overlay">
+        <div class="menu-content">
+            <div class="menu-header">
+                <img src="images/menu-logo.png" alt="Muhafiz AI Logo" class="menu-logo">
+                <button id="closeMenuBtn" class="close-menu-btn">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <nav class="menu-nav">
+                <!-- Recent Conversations Section -->
+                <div class="recent-conversations">
+                    <h3>Recent Conversations</h3>
+                    <div class="conversation-list" id="conversationList">
+                        <!-- Conversations will be added here dynamically -->
+                    </div>
+                    <button class="see-more-btn" id="seeMoreBtn">
+                        <i class="fas fa-chevron-down"></i>
+                        <span>See More</span>
+                    </button>
+                </div>
+                <!-- Divider -->
+                <div class="menu-divider"></div>
+                <!-- Navigation Links -->
+                <a href="about.html" class="menu-item">
+                    <i class="fas fa-info-circle"></i>
+                    <span>About Us</span>
+                </a>
+                <a href="contact.html" class="menu-item">
+                    <i class="fas fa-envelope"></i>
+                    <span>Contact Us</span>
+                </a>
+                <a href="follow.html" class="menu-item">
+                    <i class="fas fa-share-alt"></i>
+                    <span>Follow Us</span>
+                </a>
+            </nav>
+        </div>
+    </div>
+    <div class="chat-container">
+        <!-- Chat Header -->
+        <header class="chat-header">
+            <button class="menu-btn"><i class="fas fa-bars"></i></button>
+            <h1>New chat</h1>
+            <div class="header-actions">
+                <button class="theme-toggle-btn" id="themeToggleBtn" title="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <button class="new-chat-btn" id="new-chat-btn"><i class="fas fa-plus"></i></button>
+            </div>
+        </header>
+        <!-- Chat Messages -->
+        <main class="chat-messages" id="chat-messages">
+            <div class="welcome-message">
+                <img src="images/welcome-logo.png" alt="Muhafiz AI Logo" class="welcome-logo">
+                <h2>Hi, I'm Muhafiz AI.</h2>
+                <p>How can I help you today?</p>
+            </div>
+        </main>
+        <!-- Chat Input -->
+        <footer class="chat-input">
+            <div class="input-container">
+                <input type="text" id="message-input" placeholder="Message Muhafiz AI">
+                <div class="input-actions">
+                    <button class="more-btn" title="More options">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                    <button class="send-btn" id="send-btn" title="Send message">
+                        <i class="fas fa-arrow-up"></i>
+                    </button>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script src="js/script.js"></script>
+</body>
 </html>

js/admin.js ADDED Viewed

	@@ -0,0 +1,350 @@

+// DOM Elements
+const adminMenu = document.querySelector('.admin-menu');
+const tabContents = document.querySelectorAll('.tab-content');
+const logoutBtn = document.getElementById('logout-btn');
+const sectionTitle = document.getElementById('section-title');
+// OpenRouter API Configuration
+let openRouterConfig = {
+    apiKey: localStorage.getItem('openRouterApiKey') || '',
+    siteUrl: localStorage.getItem('openRouterSiteUrl') || window.location.origin,
+    siteName: localStorage.getItem('openRouterSiteName') || 'Muhafiz AI Chat'
+};
+// Model Settings
+let modelSettings = {
+    selectedModel: localStorage.getItem('selectedModel') || 'openai/gpt-3.5-turbo',
+    temperature: parseFloat(localStorage.getItem('temperature')) || 0.7,
+    maxTokens: parseInt(localStorage.getItem('maxTokens')) || 2048,
+    streamResponse: localStorage.getItem('streamResponse') === 'true'
+};
+// Initialize admin panel
+function initAdminPanel() {
+    // Check authentication
+    if (localStorage.getItem('adminLoggedIn') !== 'true') {
+        window.location.href = 'login.html';
+        return;
+    }
+    // Add event listeners
+    adminMenu.addEventListener('click', handleMenuClick);
+    logoutBtn.addEventListener('click', handleLogout);
+    // Load saved settings
+    loadSettings();
+    // Set up form change tracking
+    setupChangeTracking();
+}
+// Handle menu item clicks
+function handleMenuClick(e) {
+    const menuItem = e.target.closest('li');
+    if (!menuItem || menuItem.id === 'logout-btn') return;
+    // Update active menu item
+    document.querySelectorAll('.admin-menu li').forEach(item => {
+        item.classList.remove('active');
+    });
+    menuItem.classList.add('active');
+    // Show corresponding tab content
+    const tabId = menuItem.getAttribute('data-tab');
+    tabContents.forEach(tab => {
+        tab.classList.remove('active');
+        if (tab.id === tabId) {
+            tab.classList.add('active');
+        }
+    });
+    // Update section title
+    sectionTitle.textContent = menuItem.textContent.trim();
+}
+// Handle logout
+function handleLogout() {
+    if (hasUnsavedChanges()) {
+        if (!confirm('You have unsaved changes. Are you sure you want to logout?')) {
+            return;
+        }
+    }
+    // Clear admin session
+    localStorage.removeItem('adminLoggedIn');
+    // Redirect to login page
+    window.location.href = 'login.html';
+}
+// Track unsaved changes
+let hasUnsavedChanges = () => false;
+// Set up change tracking
+function setupChangeTracking() {
+    const formElements = document.querySelectorAll('input, select, textarea');
+    let initialValues = new Map();
+    formElements.forEach(element => {
+        initialValues.set(element, element.value);
+        element.addEventListener('change', () => {
+            const hasChanges = Array.from(formElements).some(el =>
+                initialValues.get(el) !== el.value
+            );
+            hasUnsavedChanges = () => hasChanges;
+        });
+    });
+}
+// Load saved settings
+function loadSettings() {
+    const savedConfig = localStorage.getItem('chatConfig');
+    if (savedConfig) {
+        const config = JSON.parse(savedConfig);
+        // Apply saved settings to form elements
+        Object.entries(config).forEach(([key, value]) => {
+            const element = document.getElementById(key);
+            if (element) {
+                element.value = value;
+            }
+        });
+    }
+}
+// Save settings
+function saveSettings() {
+    // OpenRouter API Configuration
+    openRouterConfig = {
+        apiKey: document.getElementById('openRouterApiKey').value,
+        siteUrl: document.getElementById('openRouterSiteUrl').value,
+        siteName: document.getElementById('openRouterSiteName').value
+    };
+    // Model Settings
+    modelSettings = {
+        selectedModel: document.getElementById('modelSelect').value,
+        temperature: parseFloat(document.getElementById('temperature').value),
+        maxTokens: parseInt(document.getElementById('maxTokens').value),
+        streamResponse: document.getElementById('streamResponse').checked
+    };
+    // Save to localStorage
+    Object.entries(openRouterConfig).forEach(([key, value]) => {
+        localStorage.setItem(`openRouter${key.charAt(0).toUpperCase() + key.slice(1)}`, value);
+    });
+    Object.entries(modelSettings).forEach(([key, value]) => {
+        localStorage.setItem(key, value);
+    });
+    showNotification('Settings saved successfully!', 'success');
+}
+// Show notification
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.classList.add('notification', `notification-${type}`);
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.classList.add('notification-hide');
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initAdminPanel);
+// Handle beforeunload
+window.addEventListener('beforeunload', (e) => {
+    if (hasUnsavedChanges()) {
+        e.preventDefault();
+        e.returnValue = '';
+    }
+});
+// Initialize form values
+function initializeFormValues() {
+    // OpenRouter API Configuration
+    document.getElementById('openRouterApiKey').value = openRouterConfig.apiKey;
+    document.getElementById('openRouterSiteUrl').value = openRouterConfig.siteUrl;
+    document.getElementById('openRouterSiteName').value = openRouterConfig.siteName;
+    // Model Settings
+    document.getElementById('modelSelect').value = modelSettings.selectedModel;
+    document.getElementById('temperature').value = modelSettings.temperature;
+    document.getElementById('temperatureValue').textContent = modelSettings.temperature;
+    document.getElementById('maxTokens').value = modelSettings.maxTokens;
+    document.getElementById('streamResponse').checked = modelSettings.streamResponse;
+}
+// Copy to clipboard function
+function copyToClipboard(elementId) {
+    const element = document.getElementById(elementId);
+    navigator.clipboard.writeText(element.value).then(() => {
+        showNotification('Copied to clipboard!', 'success');
+    }).catch(err => {
+        showNotification('Failed to copy text', 'error');
+    });
+}
+// Test model function
+async function testModel() {
+    const testButton = document.getElementById('testModel');
+    const originalText = testButton.textContent;
+    testButton.disabled = true;
+    testButton.textContent = 'Testing...';
+    try {
+        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${openRouterConfig.apiKey}`,
+                'HTTP-Referer': openRouterConfig.siteUrl,
+                'X-Title': openRouterConfig.siteName,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                model: modelSettings.selectedModel,
+                messages: [
+                    {
+                        role: 'user',
+                        content: 'Say "Hello! I am working correctly!"'
+                    }
+                ],
+                temperature: modelSettings.temperature,
+                max_tokens: modelSettings.maxTokens,
+                stream: false
+            })
+        });
+        const data = await response.json();
+        if (!response.ok) {
+            console.error('OpenRouter API Error:', data);
+            throw new Error(data.error?.message || `HTTP error! status: ${response.status}`);
+        }
+        showNotification('Model test successful! Response: ' + data.choices[0].message.content, 'success');
+    } catch (error) {
+        console.error('Model test failed:', error);
+        showNotification('Model test failed: ' + error.message, 'error');
+    } finally {
+        testButton.disabled = false;
+        testButton.textContent = originalText;
+    }
+}
+// Update temperature value display
+document.getElementById('temperature')?.addEventListener('input', (e) => {
+    document.getElementById('temperatureValue').textContent = e.target.value;
+});
+// Test API Response
+async function testApiResponse() {
+    const testButton = document.getElementById('testApiBtn');
+    const testMessage = document.getElementById('testMessage');
+    const testResponse = document.getElementById('testResponse');
+    const testError = document.getElementById('testError');
+    const responseContainer = document.querySelector('.test-response-container');
+    // Validate inputs
+    if (!openRouterConfig.apiKey) {
+        showNotification('Please enter your API key first', 'error');
+        return;
+    }
+    // Update button state
+    testButton.classList.add('loading');
+    testButton.disabled = true;
+    const originalText = testButton.innerHTML;
+    testButton.innerHTML = '<i class="fas fa-spinner"></i> Testing...';
+    // Clear previous results
+    testResponse.textContent = '';
+    testError.textContent = '';
+    responseContainer.style.display = 'none';
+    try {
+        console.log('Testing API with configuration:', {
+            model: modelSettings.selectedModel,
+            siteUrl: openRouterConfig.siteUrl,
+            siteName: openRouterConfig.siteName
+        });
+        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${openRouterConfig.apiKey}`,
+                'HTTP-Referer': openRouterConfig.siteUrl,
+                'X-Title': openRouterConfig.siteName,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                model: modelSettings.selectedModel,
+                messages: [
+                    {
+                        role: 'user',
+                        content: testMessage.value || 'Hello! Can you hear me?'
+                    }
+                ],
+                temperature: modelSettings.temperature,
+                max_tokens: modelSettings.maxTokens,
+                stream: false
+            })
+        });
+        const data = await response.json();
+        if (!response.ok) {
+            console.error('OpenRouter API Error:', data);
+            throw new Error(data.error?.message || `HTTP error! status: ${response.status}`);
+        }
+        // Display the full response for debugging
+        responseContainer.style.display = 'block';
+        testResponse.textContent = JSON.stringify(data, null, 2);
+        // Show success notification
+        showNotification('API test successful!', 'success');
+    } catch (error) {
+        console.error('API Test Error:', error);
+        responseContainer.style.display = 'block';
+        testError.textContent = `Error: ${error.message}`;
+        showNotification('API test failed. Check the error details below.', 'error');
+    } finally {
+        // Reset button state
+        testButton.classList.remove('loading');
+        testButton.disabled = false;
+        testButton.innerHTML = originalText;
+    }
+}
+// Initialize form values when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    initializeFormValues();
+    // Add event listeners for copy buttons
+    document.querySelectorAll('.copy-btn').forEach(button => {
+        button.addEventListener('click', (e) => {
+            const inputId = e.target.closest('.input-with-copy').querySelector('input').id;
+            copyToClipboard(inputId);
+        });
+    });
+    // Add event listener for test model button
+    document.getElementById('testModel')?.addEventListener('click', testModel);
+    // Add test API button handler
+    document.getElementById('testApiBtn')?.addEventListener('click', testApiResponse);
+    // Add form submit handler
+    document.getElementById('modelSettingsForm')?.addEventListener('submit', (e) => {
+        e.preventDefault();
+        saveSettings();
+    });
+});

js/login.js ADDED Viewed

	@@ -0,0 +1,114 @@

+// Constants
+const MAX_LOGIN_ATTEMPTS = 5;
+const LOCKOUT_TIME = 5 * 60 * 1000; // 5 minutes in milliseconds
+// Get DOM elements
+const loginForm = document.getElementById('loginForm');
+const usernameInput = document.getElementById('username');
+const passwordInput = document.getElementById('password');
+const errorMessage = document.getElementById('errorMessage');
+const togglePasswordBtn = document.querySelector('.toggle-password');
+// Initialize login attempts
+let loginAttempts = parseInt(localStorage.getItem('loginAttempts') || '0');
+let lastAttemptTime = parseInt(localStorage.getItem('lastAttemptTime') || '0');
+// Get redirect URL from query parameters
+function getRedirectUrl() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('redirect') || 'admin.html';
+}
+// Check if user is already logged in
+function checkLoginStatus() {
+    if (localStorage.getItem('adminLoggedIn') === 'true') {
+        window.location.href = getRedirectUrl();
+    }
+}
+// Check if user is locked out
+function isLockedOut() {
+    if (loginAttempts >= MAX_LOGIN_ATTEMPTS) {
+        const timeSinceLastAttempt = Date.now() - lastAttemptTime;
+        if (timeSinceLastAttempt < LOCKOUT_TIME) {
+            const remainingTime = Math.ceil((LOCKOUT_TIME - timeSinceLastAttempt) / 1000 / 60);
+            errorMessage.textContent = `Too many failed attempts. Please try again in ${remainingTime} minutes.`;
+            return true;
+        } else {
+            // Reset attempts after lockout period
+            resetAttempts();
+        }
+    }
+    return false;
+}
+// Reset login attempts
+function resetAttempts() {
+    loginAttempts = 0;
+    localStorage.setItem('loginAttempts', '0');
+    localStorage.removeItem('lastAttemptTime');
+}
+// Handle login form submission
+loginForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    // Clear previous error
+    errorMessage.textContent = '';
+    // Check for lockout
+    if (isLockedOut()) {
+        return;
+    }
+    const username = usernameInput.value.trim();
+    const password = passwordInput.value;
+    // Basic validation
+    if (!username || !password) {
+        errorMessage.textContent = 'Please enter both username and password';
+        return;
+    }
+    try {
+        // In a real application, this would be an API call to verify credentials
+        if (username === 'admin' && password === 'AdminMuhafiz') {
+            // Successful login
+            localStorage.setItem('adminLoggedIn', 'true');
+            resetAttempts();
+            // Redirect to the intended page
+            window.location.href = getRedirectUrl();
+        } else {
+            // Failed login
+            loginAttempts++;
+            lastAttemptTime = Date.now();
+            localStorage.setItem('loginAttempts', loginAttempts.toString());
+            localStorage.setItem('lastAttemptTime', lastAttemptTime.toString());
+            if (loginAttempts >= MAX_LOGIN_ATTEMPTS) {
+                errorMessage.textContent = 'Too many failed attempts. Please try again in 5 minutes.';
+            } else {
+                const remainingAttempts = MAX_LOGIN_ATTEMPTS - loginAttempts;
+                errorMessage.textContent = `Invalid username or password. ${remainingAttempts} attempts remaining.`;
+            }
+        }
+    } catch (error) {
+        errorMessage.textContent = 'An error occurred. Please try again.';
+        console.error('Login error:', error);
+    }
+});
+// Toggle password visibility
+togglePasswordBtn.addEventListener('click', () => {
+    const type = passwordInput.type === 'password' ? 'text' : 'password';
+    passwordInput.type = type;
+    togglePasswordBtn.innerHTML = `<i class="fas fa-eye${type === 'password' ? '' : '-slash'}"></i>`;
+});
+// Check login status on page load
+document.addEventListener('DOMContentLoaded', checkLoginStatus);
+// Clear error message when user starts typing
+usernameInput.addEventListener('input', () => errorMessage.textContent = '');
+passwordInput.addEventListener('input', () => errorMessage.textContent = '');

js/script.js ADDED Viewed

	@@ -0,0 +1,656 @@

+// Chat Configuration
+const DEFAULT_API_KEY = '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';
+const DEFAULT_MODEL = 'qwen/qwen3-14b:free';
+let chatConfig = {
+    apiKey: DEFAULT_API_KEY,
+    model: DEFAULT_MODEL,
+    siteUrl: window.location.origin,
+    siteName: 'Muhafiz AI Chat'
+};
+// Conversation history
+let conversationHistory = [];
+// DOM Elements
+const messageInput = document.getElementById('message-input');
+const sendButton = document.getElementById('send-btn');
+const chatMessages = document.getElementById('chat-messages');
+const moreButton = document.querySelector('.more-btn');
+const newChatButton = document.getElementById('new-chat-btn');
+const menuButton = document.querySelector('.menu-btn');
+const menuOverlay = document.getElementById('menuOverlay');
+const closeMenuButton = document.getElementById('closeMenuBtn');
+const conversationList = document.getElementById('conversationList');
+const seeMoreBtn = document.getElementById('seeMoreBtn');
+const themeToggleBtn = document.getElementById('themeToggleBtn');
+// Initialize chat
+function initChat() {
+    // Load saved configuration and conversations
+    loadChatConfig();
+    loadConversations();
+    loadTheme();
+    // Add event listeners
+    messageInput.addEventListener('input', handleInput);
+    messageInput.addEventListener('keypress', handleKeyPress);
+    sendButton.addEventListener('click', handleSend);
+    moreButton.addEventListener('click', handleMore);
+    newChatButton.addEventListener('click', handleNewChat);
+    menuButton.addEventListener('click', handleMenuOpen);
+    closeMenuButton.addEventListener('click', handleMenuClose);
+    seeMoreBtn.addEventListener('click', handleSeeMore);
+    themeToggleBtn.addEventListener('click', handleThemeToggle);
+    menuOverlay.addEventListener('click', (e) => {
+        if (e.target === menuOverlay) {
+            handleMenuClose();
+        }
+    });
+    // Disable send button initially
+    sendButton.disabled = true;
+    sendButton.style.opacity = '0.5';
+    // Update status bar time
+    updateTime();
+    setInterval(updateTime, 60000);
+}
+// Load conversations from localStorage
+function loadConversations() {
+    const savedConversations = localStorage.getItem('conversations');
+    if (savedConversations) {
+        conversationHistory = JSON.parse(savedConversations);
+        // If there are saved conversations, update the chat interface
+        if (conversationHistory.length > 0) {
+            const currentConversation = conversationHistory[0];
+            if (currentConversation.messages.length > 0) {
+                // Clear welcome message
+                while (chatMessages.firstChild) {
+                    chatMessages.removeChild(chatMessages.firstChild);
+                }
+                // Load messages from the current conversation
+                currentConversation.messages.forEach(msg => {
+                    addMessage(msg.content, msg.type);
+                });
+            }
+        }
+    }
+    updateConversationList();
+}
+// Save conversations to localStorage
+function saveConversations() {
+    localStorage.setItem('conversations', JSON.stringify(conversationHistory));
+}
+// Update conversation list in menu
+function updateConversationList() {
+    conversationList.innerHTML = '';
+    const recentConversations = conversationHistory.slice(0, 4);
+    if (recentConversations.length === 0) {
+        const emptyState = document.createElement('div');
+        emptyState.className = 'empty-conversations';
+        emptyState.textContent = 'No conversations yet';
+        conversationList.appendChild(emptyState);
+        return;
+    }
+    recentConversations.forEach(conv => {
+        const item = document.createElement('div');
+        item.className = 'conversation-item';
+        item.innerHTML = `
+            <i class="fas fa-comment"></i>
+            <span>${conv.title}</span>
+            <span class="message-count">${conv.messages.length} messages</span>
+        `;
+        item.addEventListener('click', () => loadConversation(conv.id));
+        conversationList.appendChild(item);
+    });
+}
+// Handle new chat
+async function handleNewChat() {
+    // If there's an existing conversation, generate a title for it
+    if (conversationHistory.length > 0 && conversationHistory[0].messages.length > 0) {
+        const currentConversation = conversationHistory[0];
+        try {
+            const messages = currentConversation.messages.map(msg => `${msg.type}: ${msg.content}`).join('\n');
+            const titlePrompt = `Please summarize this conversation in 4-5 words:\n${messages}`;
+            // Show loading state for the conversation title
+            const tempTitle = 'Generating title...';
+            currentConversation.title = tempTitle;
+            updateConversationList();
+            // Get AI-generated title
+            const response = await fetchBotResponse(titlePrompt);
+            currentConversation.title = response.slice(0, 40).trim();
+            saveConversations();
+            updateConversationList();
+        } catch (error) {
+            console.error('Error generating title:', error);
+            // Fallback to first message if title generation fails
+            currentConversation.title = currentConversation.messages[0].content.slice(0, 30) + '...';
+            saveConversations();
+            updateConversationList();
+        }
+    }
+    // Create new conversation
+    const newConversation = {
+        id: Date.now(),
+        title: 'New Chat',
+        messages: []
+    };
+    // Add to conversations array
+    conversationHistory.unshift(newConversation);
+    saveConversations();
+    updateConversationList();
+    // Clear chat messages
+    while (chatMessages.firstChild) {
+        chatMessages.removeChild(chatMessages.firstChild);
+    }
+    // Add welcome message
+    const welcomeMessage = document.createElement('div');
+    welcomeMessage.className = 'welcome-message';
+    welcomeMessage.innerHTML = `
+        <img src="images/welcome-logo.png" alt="Muhafiz AI Logo" class="welcome-logo">
+        <h2>Hi, I'm Muhafiz AI.</h2>
+        <p>How can I help you today?</p>
+        <div class="context-info">Your chat history will be maintained for better context.</div>
+    `;
+    chatMessages.appendChild(welcomeMessage);
+    // Clear input
+    messageInput.value = '';
+    handleInput({ target: messageInput });
+    // Focus input
+    messageInput.focus();
+}
+// Handle see more button click
+function handleSeeMore() {
+    // Create full conversation list overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'conversation-overlay';
+    const content = document.createElement('div');
+    content.className = 'conversation-overlay-content';
+    // Add header
+    content.innerHTML = `
+        <div class="overlay-header">
+            <h2>All Conversations</h2>
+            <button class="close-overlay-btn"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="conversation-list-full"></div>
+    `;
+    // Add all conversations
+    const listContainer = content.querySelector('.conversation-list-full');
+    conversationHistory.forEach(conv => {
+        const item = document.createElement('div');
+        item.className = 'conversation-item';
+        item.innerHTML = `
+            <i class="fas fa-comment"></i>
+            <div class="conversation-details">
+                <span class="conversation-title">${conv.title}</span>
+                <span class="message-count">${conv.messages.length} messages</span>
+                <span class="conversation-date">${new Date(conv.id).toLocaleDateString()}</span>
+            </div>
+        `;
+        item.addEventListener('click', () => {
+            loadConversation(conv.id);
+            overlay.remove();
+        });
+        listContainer.appendChild(item);
+    });
+    // Add close button handler
+    overlay.appendChild(content);
+    content.querySelector('.close-overlay-btn').addEventListener('click', () => {
+        overlay.remove();
+    });
+    // Add overlay click handler
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+            overlay.remove();
+        }
+    });
+    document.body.appendChild(overlay);
+}
+// Load specific conversation
+function loadConversation(id) {
+    const conversation = conversationHistory.find(conv => conv.id === id);
+    if (conversation) {
+        // Clear current chat
+        while (chatMessages.firstChild) {
+            chatMessages.removeChild(chatMessages.firstChild);
+        }
+        // Load conversation messages
+        conversation.messages.forEach(msg => {
+            addMessage(msg.content, msg.type);
+        });
+        // Close menu
+        handleMenuClose();
+    }
+}
+// Handle input changes
+function handleInput(e) {
+    const isEmpty = !e.target.value.trim();
+    sendButton.style.opacity = isEmpty ? '0.5' : '1';
+    sendButton.disabled = isEmpty;
+}
+// Handle enter key
+function handleKeyPress(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+    }
+}
+// Handle send button click
+async function handleSend() {
+    const message = messageInput.value.trim();
+    if (!message) return;
+    // Add user message to chat and conversation history
+    addMessage(message, 'user');
+    if (conversationHistory.length === 0) {
+        handleNewChat();
+    }
+    // Update current conversation
+    const currentConversation = conversationHistory[0];
+    currentConversation.messages.push({ type: 'user', content: message });
+    if (currentConversation.messages.length === 1) {
+        // Update conversation title with first message
+        currentConversation.title = message.slice(0, 30) + (message.length > 30 ? '...' : '');
+        updateConversationList();
+    }
+    saveConversations();
+    messageInput.value = '';
+    handleInput({ target: messageInput });
+    try {
+        // Show typing indicator
+        showTypingIndicator();
+        // Get bot response
+        const response = await fetchBotResponse(message);
+        // Remove typing indicator and add bot message
+        removeTypingIndicator();
+        addMessage(response, 'bot');
+        // Update conversation history
+        currentConversation.messages.push({ type: 'bot', content: response });
+        saveConversations();
+    } catch (error) {
+        console.error('Error:', error);
+        removeTypingIndicator();
+        showError(error.message || 'Failed to get response. Please try again.');
+    }
+}
+// Add message to chat
+function addMessage(content, type) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'message';
+    if (type === 'user') {
+        messageDiv.innerHTML = `
+            <div class="question-bubble">${content}</div>
+        `;
+    } else {
+        console.log('Adding bot message with logo');
+        const botHTML = `
+            <div class="answer-container">
+                <div class="bot-icon">
+                    <img src="images/bot-message-logo.png" alt="Muhafiz AI" onload="console.log('Bot logo loaded')" onerror="console.error('Bot logo failed to load:', this.src)">
+                </div>
+                <div class="answer-content">${formatBotResponse(content)}</div>
+            </div>
+        `;
+        console.log('Bot message HTML:', botHTML);
+        messageDiv.innerHTML = botHTML;
+    }
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    // Add message to current conversation
+    if (conversationHistory.length === 0) {
+        handleNewChat();
+    }
+    conversationHistory[0].messages.push({ type, content });
+    saveConversations();
+}
+// Format bot response with proper styling
+function formatBotResponse(content) {
+    // Split content into sections
+    const sections = content.split('\n\n');
+    let formattedContent = '';
+    let inList = false;
+    sections.forEach(section => {
+        // Handle main headings (e.g., "Types of AI:")
+        if (section.match(/^[A-Z][^:]+:$/)) {
+            if (inList) {
+                formattedContent += '</div>';
+                inList = false;
+            }
+            formattedContent += `<h2 class="response-heading">${section}</h2>`;
+            return;
+        }
+        // Handle definitions (text with parentheses)
+        if (section.includes('(') && section.includes(')')) {
+            section = section.replace(/([A-Za-z\s]+)\s*\((.*?)\)/, '<div class="definition"><span class="term">$1</span> <span class="definition-text">($2)</span></div>');
+        }
+        // Handle numbered lists
+        if (section.match(/^\d+\./)) {
+            if (!inList) {
+                formattedContent += '<div class="numbered-list">';
+                inList = true;
+            }
+            const [number, ...rest] = section.split('.');
+            const content = rest.join('.').trim();
+            // Check if the list item has a dash/hyphen definition
+            if (content.includes('–')) {
+                const [term, definition] = content.split('–').map(s => s.trim());
+                formattedContent += `
+                    <div class="list-item">
+                        <span class="number">${number}.</span>
+                        <div class="list-content">
+                            <span class="list-term">${term}</span>
+                            <span class="list-definition">– ${definition}</span>
+                        </div>
+                    </div>`;
+            } else {
+                formattedContent += `
+                    <div class="list-item">
+                        <span class="number">${number}.</span>
+                        <div class="list-content">${content}</div>
+                    </div>`;
+            }
+            return;
+        }
+        // Close list if we're not processing a list item
+        if (inList) {
+            formattedContent += '</div>';
+            inList = false;
+        }
+        // Regular paragraphs
+        formattedContent += `<p class="response-paragraph">${section}</p>`;
+    });
+    // Close any open list
+    if (inList) {
+        formattedContent += '</div>';
+    }
+    return formattedContent;
+}
+// Show typing indicator
+function showTypingIndicator() {
+    const indicator = document.createElement('div');
+    indicator.classList.add('message', 'bot-message', 'typing-indicator');
+    indicator.innerHTML = '<span></span><span></span><span></span>';
+    chatMessages.appendChild(indicator);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+// Remove typing indicator
+function removeTypingIndicator() {
+    const indicator = document.querySelector('.typing-indicator');
+    if (indicator) {
+        indicator.remove();
+    }
+}
+// Show error message
+function showError(message) {
+    const errorDiv = document.createElement('div');
+    errorDiv.classList.add('message', 'error-message');
+    errorDiv.textContent = message;
+    chatMessages.appendChild(errorDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    // Remove error after 5 seconds
+    setTimeout(() => {
+        errorDiv.remove();
+    }, 5000);
+}
+// Fetch bot response from OpenRouter API
+async function fetchBotResponse(userMessage) {
+    try {
+        // Check for API key
+        const apiKey = chatConfig.apiKey || localStorage.getItem('openRouterApiKey');
+        if (!apiKey) {
+            throw new Error('Please set up your API key in the admin panel');
+        }
+        // Format messages for the API
+        const messages = [
+            {
+                role: 'system',
+                content: `You are Muhafiz AI, a digital safety assistant by the Mohsin Kamil Foundation. Your role is strictly limited to:
+1. Combating cyber threats
+2. Providing emotional support for cybercrime victims
+3. Guiding users through digital safety solutions
+4. Handling cybersecurity incidents
+5. Addressing online harassment and blackmail
+6. Assisting with content removal and legal reporting
+IMPORTANT: You must NEVER respond to questions outside these areas. For any off-topic questions (e.g., general AI, weather, news, etc.), respond with:
+"I am Muhafiz AI, focused exclusively on digital safety and cybersecurity. I cannot assist with questions about [topic]. However, I'm here to help if you need support with:
+- Cybersecurity incidents
+- Online harassment or blackmail
+- Account hacking
+- Content removal
+- Digital safety guidance
+- Reporting cybercrimes
+Would you like assistance with any of these issues?"
+Response Framework:
+1. Emotional Check-In:
+   - Start with empathy: "This sounds incredibly stressful. How are you feeling right now?"
+   - Reassure: "We'll tackle this together—you're not alone."
+2. URL Safety Analysis:
+   - If a user shares a suspicious link:
+     - "Let's check this link safely. First check the Link looking formating feel Safe or Not. Avoid clicking it. Use tools like Google Safe Browsing or VirusTotal to scan it."
+     - "If you've already clicked it, change your passwords immediately and enable 2FA."
+3. Tech Support for Hacking:
+   - Account Security:
+     - "Let's secure your account: 1) Change passwords, 2) Enable 2FA, 3) Check login activity."
+   - Phishing Guidance:
+     - "Never share OTPs or passwords. Legitimate organizations won't ask for these."
+   - Breach Response:
+     - "Check if your data was leaked at Have I Been Pwned?"
+4. Legal & Content Removal:
+   - "Under Pakistan's PECA 2016, blackmail is punishable. Report to FIA Cyber Crime or call 1991."
+   - "To remove content from platforms:
+     - Google: Content Removal Request
+     - Meta (FB/IG): Reporting Tool"
+5. Founder's Role:
+   - "Abdullah Tarar, our founder, is a Certified Ethical Hacker. He's helped many in your situation—no judgment, only solutions. Chat directly: WhatsApp or call 0342-4844392."
+Always end responses with:
+- "What else can I do to help you feel safer?"
+- "You're in control. Let's take the next step."`
+            }
+        ];
+        // Add conversation history if available
+        if (conversationHistory.length > 0) {
+            const currentConversation = conversationHistory[0];
+            if (currentConversation.messages) {
+                // Get all messages from the current conversation for context
+                currentConversation.messages.forEach(msg => {
+                    messages.push({
+                        role: msg.type === 'user' ? 'user' : 'assistant',
+                        content: msg.content
+                    });
+                });
+            }
+        }
+        // Add the new message
+        messages.push({
+            role: 'user',
+            content: userMessage
+        });
+        console.log('Sending request to OpenRouter with context:', {
+            model: chatConfig.model,
+            messageCount: messages.length,
+            apiKeySet: !!apiKey
+        });
+        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${apiKey}`,
+                'HTTP-Referer': chatConfig.siteUrl,
+                'X-Title': chatConfig.siteName,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                model: chatConfig.model || DEFAULT_MODEL,
+                messages: messages,
+                temperature: 0.7,
+                max_tokens: 2000
+            })
+        });
+        const data = await response.json();
+        if (!response.ok) {
+            console.error('OpenRouter API Error:', data);
+            throw new Error(data.error?.message || `HTTP error! status: ${response.status}`);
+        }
+        console.log('OpenRouter API Response:', data);
+        if (!data.choices?.[0]?.message?.content) {
+            throw new Error('Invalid response format from API');
+        }
+        return data.choices[0].message.content;
+    } catch (error) {
+        console.error('API Error:', error);
+        throw new Error(`Failed to get response: ${error.message}`);
+    }
+}
+// Handle more options
+function handleMore() {
+    // Implement more options menu
+    console.log('More options clicked');
+}
+// Handle menu open
+function handleMenuOpen() {
+    menuOverlay.classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+// Handle menu close
+function handleMenuClose() {
+    menuOverlay.classList.remove('active');
+    document.body.style.overflow = '';
+}
+// Update time in status bar
+function updateTime() {
+    const timeElement = document.querySelector('.time');
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    timeElement.textContent = `${hours}:${minutes}`;
+}
+// Load chat configuration
+function loadChatConfig() {
+    // Try to load API key from localStorage if no default is set
+    if (!DEFAULT_API_KEY) {
+        const storedApiKey = localStorage.getItem('openRouterApiKey');
+        if (storedApiKey) {
+            chatConfig.apiKey = storedApiKey;
+        }
+    }
+    // Load model from localStorage or use default
+    chatConfig.model = localStorage.getItem('selectedModel') || DEFAULT_MODEL;
+    // Log configuration (without API key)
+    console.log('Chat Configuration:', {
+        ...chatConfig,
+        apiKey: chatConfig.apiKey ? '[SET]' : '[NOT SET]',
+        model: chatConfig.model
+    });
+}
+// Load theme from localStorage
+function loadTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateThemeIcon(savedTheme);
+}
+// Handle theme toggle
+function handleThemeToggle() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+}
+// Update theme toggle icon
+function updateThemeIcon(theme) {
+    const icon = themeToggleBtn.querySelector('i');
+    if (theme === 'dark') {
+        icon.className = 'fas fa-sun';
+        themeToggleBtn.title = 'Switch to light mode';
+    } else {
+        icon.className = 'fas fa-moon';
+        themeToggleBtn.title = 'Switch to dark mode';
+    }
+}
+// Initialize chat when DOM is loaded
+document.addEventListener('DOMContentLoaded', initChat);

	@@ -0,0 +1,54 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Muhafiz AI - Admin Login</title>
+    <link rel="stylesheet" href="css/login.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-card">
+            <div class="login-header">
+                <img src="images/logo.png" alt="Muhafiz AI Logo" class="login-logo">
+                <h1>Admin Login</h1>
+            </div>
+            <form id="loginForm" class="login-form">
+                <div class="form-group">
+                    <label for="username">
+                        <i class="fas fa-user"></i>
+                        Username
+                    </label>
+                    <input type="text" id="username" name="username" required>
+                </div>
+                <div class="form-group">
+                    <label for="password">
+                        <i class="fas fa-lock"></i>
+                        Password
+                    </label>
+                    <div class="password-input">
+                        <input type="password" id="password" name="password" required>
+                        <button type="button" class="toggle-password" title="Show/Hide Password">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="error-message" id="errorMessage"></div>
+                <button type="submit" class="login-btn">
+                    <span>Login</span>
+                    <i class="fas fa-arrow-right"></i>
+                </button>
+            </form>
+            <div class="login-footer">
+                <p>Secure Admin Access Only</p>
+                <a href="index.html" class="back-link">
+                    <i class="fas fa-chevron-left"></i>
+                    Back to Chat
+                </a>
+            </div>
+        </div>
+    </div>
+    <script src="js/login.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,490 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
 body {
+    background-color: #f5f5f5;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+/* Chat container styles */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-width: 100%;
+    margin: 0 auto;
+    background-color: white;
+}
+/* Header styles */
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background-color: white;
+    border-bottom: 1px solid #e0e0e0;
+}
+.menu-btn, .new-chat-btn {
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+.new-chat-btn {
+    background-color: #f5f5f5;
+    color: #333;
+}
+/* Chat messages area */
+.chat-messages {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+.welcome-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: #333;
+}
+.logo-container {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+}
+.logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.welcome-message h2 {
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+}
+.welcome-message p {
+    font-size: 1.2rem;
+    color: #666;
+}
+/* Message styles */
+.message {
+    margin-bottom: 15px;
+    max-width: 80%;
+}
+.user-message {
+    align-self: flex-end;
+    background-color: #e6f2ff;
+    border-radius: 18px 18px 4px 18px;
+    padding: 10px 15px;
+}
+.bot-message {
+    align-self: flex-start;
+    background-color: #f0f0f0;
+    border-radius: 18px 18px 18px 4px;
+    padding: 10px 15px;
+}
+/* Input area styles */
+.chat-input-container {
+    padding: 10px;
+    border-top: 1px solid #e0e0e0;
+    background-color: white;
+}
+.chat-input-wrapper {
+    display: flex;
+    border-radius: 25px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    padding: 10px 15px;
+    margin-bottom: 10px;
+}
+.message-input {
+    flex-grow: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 1rem;
+    padding: 5px;
+}
+.send-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.2rem;
+    color: #4285f4;
+}
+/* Footer styles */
+.chat-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 0;
+}
+.footer-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px 15px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    color: #666;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.footer-btn:last-child {
+    background-color: #4285f4;
+    color: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+/* Message typing animation */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+}
+.typing-indicator span {
+    height: 8px;
+    width: 8px;
+    background-color: #666;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 2px;
+    animation: typing 1s infinite ease-in-out;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+@keyframes typing {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0); }
+}
+/* Responsive design */
+@media (min-width: 769px) {
+    .chat-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        height: 100vh;
+    }
+}
+@media (max-width: 768px) {
+    .chat-container {
+        width: 100%;
+        height: 100vh;
+    }
+    .message {
+        max-width: 85%;
+        font-size: 0.95rem;
+    }
+    .chat-header {
+        padding: 10px;
+    }
+    .chat-input-wrapper {
+        margin: 5px 0;
+    }
+    .footer-btn {
+        padding: 6px 12px;
+        font-size: 0.85rem;
+    }
+    .welcome-message h2 {
+        font-size: 1.5rem;
+    }
+    .welcome-message p {
+        font-size: 1rem;
+    }
+}
+@media (max-width: 576px) {
+    .message {
+        max-width: 90%;
+        font-size: 0.9rem;
+    }
+    .chat-footer {
+        flex-wrap: wrap;
+        gap: 5px;
+    }
+    .footer-btn {
+        flex: 1;
+        min-width: 80px;
+        justify-content: center;
+    }
+    .footer-btn:last-child {
+        flex: 0;
+    }
+    .chat-input-wrapper {
+        padding: 8px 12px;
+    }
+}
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1a1a1a;
+    }
+    .chat-container,
+    .chat-header {
+        background-color: #2d2d2d;
+        color: #ffffff;
+    }
+    .message-input {
+        color: #ffffff;
+    }
+    .chat-input-wrapper {
+        background-color: #3d3d3d;
+    }
+    .user-message {
+        background-color: #4285f4;
+        color: #ffffff;
+    }
+    .bot-message {
+        background-color: #3d3d3d;
+        color: #ffffff;
+    }
+    .footer-btn {
+        color: #ffffff;
+    }
+    .new-chat-btn {
+        background-color: #3d3d3d;
+        color: #ffffff;
+    }
+}
+/* Accessibility improvements */
+.message:focus,
+.message-input:focus,
+.footer-btn:focus {
+    outline: 2px solid #4285f4;
+    outline-offset: 2px;
+}
+/* Touch device optimizations */
+@media (hover: none) {
+    .footer-btn:hover {
+        background-color: transparent;
+    }
+    .footer-btn:active {
+        background-color: rgba(66, 133, 244, 0.1);
+    }
+}
+/* Admin panel integration */
+.chat-container[data-theme="dark"] {
+    background-color: #2d2d2d;
+    color: #ffffff;
+}
+.chat-container[data-position="top-left"] {
+    margin: 20px 0 0 20px;
+}
+.chat-container[data-position="top-right"] {
+    margin: 20px 20px 0 0;
+}
+.chat-container[data-position="bottom-left"] {
+    margin: 0 0 20px 20px;
+}
+.chat-container[data-position="bottom-right"] {
+    margin: 0 20px 20px 0;
+}
+/* Loading states */
+.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+/* Error states */
+.error-state {
+    border-color: #dc3545;
+    color: #dc3545;
+}
+/* Notification system */
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    max-width: 300px;
+    animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+/* Code block styling */
+pre {
+    background-color: #f5f5f5;
+    padding: 15px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 10px 0;
+}
+code {
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+}
+@media (prefers-color-scheme: dark) {
+    pre {
+        background-color: #3d3d3d;
+    }
+    code {
+        color: #ffffff;
+    }
+}
+/* Status bar styling (for mobile view) */
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 15px;
+    background-color: white;
+    font-size: 0.8rem;
+    color: #666;
+}
+.status-bar-left, .status-bar-right {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+/* Loading animation for API responses */
+.loading-animation {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 20px;
+}
+.loading-animation div {
+    position: absolute;
+    top: 8px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #4285f4;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.loading-animation div:nth-child(1) {
+    left: 8px;
+    animation: loading1 0.6s infinite;
+}
+.loading-animation div:nth-child(2) {
+    left: 8px;
+    animation: loading2 0.6s infinite;
+}
+.loading-animation div:nth-child(3) {
+    left: 32px;
+    animation: loading2 0.6s infinite;
 }
+.loading-animation div:nth-child(4) {
+    left: 56px;
+    animation: loading3 0.6s infinite;
 }
+@keyframes loading1 {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
 }
+@keyframes loading2 {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(24px, 0); }
 }
+@keyframes loading3 {
+    0% { transform: scale(1); }
+    100% { transform: scale(0); }
 }