Make a support ticket create temlate and tell customer that yoiur ticket is been created and our support agent will reply you within 24 hrs you can even reply to thjise email for futher commnuination

README.md

@@ -1,10 +1,13 @@
 ---
-title: Eduloom Supportsync
-emoji: 🐢
-colorFrom: gray
-colorTo: red
+title: EduLoom SupportSync 🎟️
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/header.js

@@ -0,0 +1,49 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .search-input:focus {
+                    outline: none;
+                    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+                }
+            </style>
+            <div class="border-b border-gray-200 bg-white">
+                <div class="px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16 items-center">
+                        <!-- Search bar -->
+                        <div class="flex-1 flex">
+                            <div class="flex-1 max-w-xs">
+                                <div class="relative focus-within:z-10">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <i data-feather="search" class="h-5 w-5 text-gray-400"></i>
+                                    </div>
+                                    <input class="search-input block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:placeholder-gray-400 sm:text-sm" placeholder="Search" type="search">
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Right side icons -->
+                        <div class="ml-4 flex items-center md:ml-6">
+                            <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                                <span class="sr-only">View notifications</span>
+                                <i data-feather="bell" class="h-6 w-6"></i>
+                            </button>
+                            
+                            <!-- Profile dropdown -->
+                            <div class="ml-3 relative">
+                                <div>
+                                    <button class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" id="user-menu">
+                                        <span class="sr-only">Open user menu</span>
+                                        <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-header', CustomHeader);

components/sidebar.js

@@ -0,0 +1,48 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar-item {
+                    padding: 0.75rem 1rem;
+                    margin: 0.25rem 0;
+                    border-radius: 0.375rem;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
+                }
+                .sidebar-item:hover {
+                    background-color: rgba(59, 130, 246, 0.1);
+                    color: rgb(59, 130, 246);
+                }
+                .sidebar-item.active {
+                    background-color: rgba(59, 130, 246, 0.1);
+                    color: rgb(59, 130, 246);
+                    font-weight: 500;
+                }
+                .sidebar-icon {
+                    margin-right: 0.75rem;
+                }
+            </style>
+            <div class="w-64 bg-white border-r border-gray-200 h-full p-4">
+                <h2 class="text-xl font-bold text-primary-600 mb-6">EduLoom</h2>
+                <div class="space-y-1">
+                    <div class="sidebar-item active">
+                        <i data-feather="book-open" class="sidebar-icon w-5 h-5"></i>
+                        <span>Curriculum Builder</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="eye" class="sidebar-icon w-5 h-5"></i>
+                        <span>Preview</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="save" class="sidebar-icon w-5 h-5"></i>
+                        <span>Save Curriculum</span>
+                    </div>
+                </div>
+            </div>
+`;
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

components/support-ticket.js

@@ -0,0 +1,156 @@
+class SupportTicket extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .ticket-container {
+          background: white;
+          border-radius: 8px;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+          padding: 2rem;
+          max-width: 600px;
+          margin: 2rem auto;
+        }
+        .ticket-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1.5rem;
+        }
+        .ticket-icon {
+          font-size: 2rem;
+          margin-right: 1rem;
+          color: #4f46e5;
+        }
+        .ticket-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: #111827;
+        }
+        .form-group {
+          margin-bottom: 1.5rem;
+        }
+        label {
+          display: block;
+          margin-bottom: 0.5rem;
+          font-weight: 500;
+          color: #374151;
+        }
+        input, select, textarea {
+          width: 100%;
+          padding: 0.75rem;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font-size: 1rem;
+        }
+        textarea {
+          min-height: 120px;
+          resize: vertical;
+        }
+        .submit-btn {
+          background: #4f46e5;
+          color: white;
+          border: none;
+          padding: 0.75rem 1.5rem;
+          border-radius: 6px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .submit-btn:hover {
+          background: #4338ca;
+        }
+        .confirmation {
+          text-align: center;
+          padding: 2rem;
+        }
+        .confirmation-icon {
+          font-size: 3rem;
+          color: #10b981;
+          margin-bottom: 1rem;
+        }
+        .confirmation-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: #111827;
+        }
+        .confirmation-message {
+          color: #4b5563;
+          margin-bottom: 1.5rem;
+        }
+        .hidden {
+          display: none;
+        }
+      </style>
+      <div class="ticket-container">
+        <div id="ticketForm">
+          <div class="ticket-header">
+            <div class="ticket-icon">🎟️</div>
+            <h2 class="ticket-title">Create Support Ticket</h2>
+          </div>
+          <form id="supportForm">
+            <div class="form-group">
+              <label for="subject">Subject</label>
+              <input type="text" id="subject" required>
+            </div>
+            <div class="form-group">
+              <label for="department">Department</label>
+              <select id="department" required>
+                <option value="">Select department</option>
+                <option value="technical">Technical Support</option>
+                <option value="billing">Billing</option>
+                <option value="account">Account</option>
+                <option value="general">General Inquiry</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="priority">Priority</label>
+              <select id="priority" required>
+                <option value="low">Low</option>
+                <option value="medium" selected>Medium</option>
+                <option value="high">High</option>
+                <option value="critical">Critical</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea id="description" required></textarea>
+            </div>
+            <button type="submit" class="submit-btn">Submit Ticket</button>
+          </form>
+        </div>
+        <div id="confirmation" class="hidden">
+          <div class="confirmation">
+            <div class="confirmation-icon">✓</div>
+            <h3 class="confirmation-title">Ticket Created Successfully!</h3>
+            <p class="confirmation-message">
+              Your support ticket has been created. Our team will respond within 24 hours.
+              You can reply to the confirmation email for further communication.
+            </p>
+            <button id="newTicketBtn" class="submit-btn">Create New Ticket</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const form = this.shadowRoot.getElementById('supportForm');
+    const ticketForm = this.shadowRoot.getElementById('ticketForm');
+    const confirmation = this.shadowRoot.getElementById('confirmation');
+    const newTicketBtn = this.shadowRoot.getElementById('newTicketBtn');
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      // In a real app, you would send the form data to your backend
+      ticketForm.classList.add('hidden');
+      confirmation.classList.remove('hidden');
+    });
+
+    newTicketBtn.addEventListener('click', () => {
+      form.reset();
+      confirmation.classList.add('hidden');
+      ticketForm.classList.remove('hidden');
+    });
+  }
+}
+
+customElements.define('support-ticket', SupportTicket);

index.html

@@ -1,19 +1,167 @@
-<!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" class="h-full bg-gray-50">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduLoom Navigator | Course Curriculum</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/header.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="h-full">
+    <div class="flex h-full">
+        <!-- Sidebar -->
+        <custom-sidebar></custom-sidebar>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <custom-header></custom-header>
+            <!-- Main Content Area -->
+            <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
+                <div class="max-w-7xl mx-auto">
+                    <div class="flex justify-between items-center mb-8">
+                        <h1 class="text-3xl font-bold text-gray-900">Course Curriculum</h1>
+                        <button id="addModuleBtn" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                            <i data-feather="plus"></i>
+                            Add Module
+                        </button>
+                    </div>
+                    
+                    <!-- Module Editor View -->
+                    <div id="editorView" class="hidden">
+                        <div class="flex justify-between items-center mb-6">
+                            <h2 id="moduleTitle" class="text-2xl font-bold text-gray-800">Module: <span class="editable-title">Untitled Module</span></h2>
+                            <button id="closeEditorBtn" class="text-gray-500 hover:text-gray-700">
+                                <i data-feather="x"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+                            <h3 class="text-lg font-semibold mb-4">Module Details</h3>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md module-title-input" value="Untitled Module">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Brief description">
+                                </div>
+                            </div>
+                            
+                            <h3 class="text-lg font-semibold mb-4">Lessons</h3>
+                            <div id="lessonsContainer" class="space-y-4">
+                                <!-- Lessons will be added here -->
+                            </div>
+                            
+                            <div class="mt-6">
+                                <button id="addLessonBtn" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                                    <i data-feather="plus"></i>
+                                    Add Lesson
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Curriculum Builder View -->
+                    <div id="builderView" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<!-- Curriculum Builder -->
+                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                            <h2 class="text-xl font-semibold mb-4">Build Your Curriculum</h2>
+                            
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Module Title</label>
+                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter module title">
+                                </div>
+                                
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Add Lesson</label>
+                                    <div class="flex gap-2">
+                                        <select class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
+                                            <option>Video Lesson</option>
+                                            <option>Reading</option>
+                                            <option>Quiz</option>
+                                            <option>Assignment</option>
+                                        </select>
+                                        <button class="bg-primary-600 text-white px-3 py-2 rounded-md">
+                                            <i data-feather="plus"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                
+                                <div class="border-t pt-4">
+                                    <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 rounded-md flex items-center justify-center gap-2">
+                                        <i data-feather="plus-circle"></i>
+                                        Add Module
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Preview Panel -->
+                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                            <h2 class="text-xl font-semibold mb-4">Curriculum Preview</h2>
+                            
+                            <div id="previewContainer" class="space-y-3">
+                                <!-- Modules will be added here dynamically -->
+                            </div>
+                            
+                            <div class="mt-6">
+                                <button id="saveCurriculumBtn" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md flex items-center justify-center gap-2">
+                                    <i data-feather="save"></i>
+                                    Save Curriculum
+                                </button>
+                            </div>
+                        </div>
+</div>
+</div>
+            </main>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+    <script src="components/support-ticket.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,232 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const previewContainer = document.getElementById('previewContainer');
+    const lessonsContainer = document.getElementById('lessonsContainer');
+    const addModuleBtn = document.getElementById('addModuleBtn');
+    const addLessonBtn = document.getElementById('addLessonBtn');
+    const saveCurriculumBtn = document.getElementById('saveCurriculumBtn');
+    const closeEditorBtn = document.getElementById('closeEditorBtn');
+    const builderView = document.getElementById('builderView');
+    const editorView = document.getElementById('editorView');
+    const moduleTitleInput = document.querySelector('.module-title-input');
+    const editableTitle = document.querySelector('.editable-title');
+    
+    // State
+    let currentModule = null;
+    let modules = [];
+    
+    // Add Module
+    addModuleBtn.addEventListener('click', function() {
+        const newModule = {
+            id: Date.now(),
+            title: 'New Module',
+            description: '',
+            lessons: []
+        };
+        
+        modules.push(newModule);
+        renderModulePreview(newModule);
+        openModuleEditor(newModule);
+    });
+    
+    // Add Lesson
+    addLessonBtn.addEventListener('click', function() {
+        if (!currentModule) return;
+        
+        const newLesson = {
+            id: Date.now(),
+            type: 'video',
+            title: 'New Lesson',
+            duration: '',
+            content: ''
+        };
+        
+        currentModule.lessons.push(newLesson);
+        renderLesson(newLesson);
+    });
+    
+    // Save Curriculum
+    saveCurriculumBtn.addEventListener('click', function() {
+        alert('Curriculum saved successfully!');
+        console.log('Saved modules:', modules);
+    });
+    
+    // Close Editor
+    closeEditorBtn.addEventListener('click', function() {
+        editorView.classList.add('hidden');
+        builderView.classList.remove('hidden');
+        currentModule = null;
+    });
+    
+    // Module Title Update
+    moduleTitleInput.addEventListener('input', function() {
+        if (currentModule) {
+            currentModule.title = this.value;
+            editableTitle.textContent = this.value;
+            updateModulePreview(currentModule);
+        }
+    });
+    
+    // Functions
+    function openModuleEditor(module) {
+        currentModule = module;
+        moduleTitleInput.value = module.title;
+        editableTitle.textContent = module.title;
+        lessonsContainer.innerHTML = '';
+        
+        module.lessons.forEach(lesson => {
+            renderLesson(lesson);
+        });
+        
+        builderView.classList.add('hidden');
+        editorView.classList.remove('hidden');
+    }
+    
+    function renderModulePreview(module) {
+        const moduleEl = document.createElement('div');
+        moduleEl.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-100';
+        moduleEl.dataset.moduleId = module.id;
+        moduleEl.innerHTML = `
+            <div class="flex justify-between items-center">
+                <h3 class="font-medium">${module.title}</h3>
+                <button class="text-gray-500 hover:text-primary-600 edit-module-btn">
+                    <i data-feather="edit-2" class="w-4 h-4"></i>
+                </button>
+            </div>
+            <div class="mt-2 space-y-2" id="module-lessons-${module.id}">
+                ${module.lessons.length > 0 ? 
+                    module.lessons.map(lesson => `
+                        <div class="flex items-center gap-2 text-sm">
+                            <i data-feather="${getLessonIcon(lesson.type)}" class="w-4 h-4 text-gray-500"></i>
+                            <span>${lesson.title}${lesson.duration ? ` (${lesson.duration} min)` : ''}</span>
+                        </div>
+                    `).join('') :
+                    '<p class="text-sm text-gray-400">No lessons yet</p>'
+                }
+            </div>
+        `;
+        
+        previewContainer.appendChild(moduleEl);
+        feather.replace();
+        
+        // Add click handler for edit button
+        moduleEl.querySelector('.edit-module-btn').addEventListener('click', (e) => {
+            e.stopPropagation();
+            openModuleEditor(module);
+        });
+        
+        // Add click handler for entire module
+        moduleEl.addEventListener('click', () => {
+            openModuleEditor(module);
+        });
+    }
+    
+    function updateModulePreview(module) {
+        const moduleEl = previewContainer.querySelector(`[data-module-id="${module.id}"]`);
+        if (moduleEl) {
+            moduleEl.querySelector('h3').textContent = module.title;
+            
+            const lessonsContainer = moduleEl.querySelector(`#module-lessons-${module.id}`);
+            lessonsContainer.innerHTML = module.lessons.length > 0 ? 
+                module.lessons.map(lesson => `
+                    <div class="flex items-center gap-2 text-sm">
+                        <i data-feather="${getLessonIcon(lesson.type)}" class="w-4 h-4 text-gray-500"></i>
+                        <span>${lesson.title}${lesson.duration ? ` (${lesson.duration} min)` : ''}</span>
+                    </div>
+                `).join('') :
+                '<p class="text-sm text-gray-400">No lessons yet</p>';
+            
+            feather.replace();
+        }
+    }
+    
+    function renderLesson(lesson) {
+        const lessonEl = document.createElement('div');
+        lessonEl.className = 'bg-gray-50 p-4 rounded-lg border border-gray-200';
+        lessonEl.innerHTML = `
+            <div class="flex justify-between items-start mb-2">
+                <div>
+                    <h4 class="font-medium">${lesson.title}</h4>
+                    <div class="flex items-center gap-4 mt-1">
+                        <span class="text-sm text-gray-500">${lesson.type}</span>
+                        ${lesson.duration ? `<span class="text-sm text-gray-500">${lesson.duration} min</span>` : ''}
+                    </div>
+                </div>
+                <div class="flex gap-2">
+                    <button class="text-gray-500 hover:text-primary-600 edit-lesson-btn">
+                        <i data-feather="edit-2" class="w-4 h-4"></i>
+                    </button>
+                    <button class="text-gray-500 hover:text-red-600 delete-lesson-btn">
+                        <i data-feather="trash-2" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <p class="text-sm text-gray-500">${lesson.content || 'No content yet'}</p>
+        `;
+        
+        lessonsContainer.appendChild(lessonEl);
+        feather.replace();
+        
+        // Add event handlers
+        lessonEl.querySelector('.edit-lesson-btn').addEventListener('click', () => {
+            editLesson(lesson);
+        });
+        
+        lessonEl.querySelector('.delete-lesson-btn').addEventListener('click', () => {
+            deleteLesson(lesson);
+        });
+    }
+    
+    function editLesson(lesson) {
+        // In a real app, you'd open a modal or form to edit the lesson
+        const newTitle = prompt('Edit lesson title:', lesson.title);
+        if (newTitle !== null) {
+            lesson.title = newTitle;
+            const moduleIndex = modules.findIndex(m => m.id === currentModule.id);
+            if (moduleIndex !== -1) {
+                const lessonIndex = modules[moduleIndex].lessons.findIndex(l => l.id === lesson.id);
+                if (lessonIndex !== -1) {
+                    modules[moduleIndex].lessons[lessonIndex] = lesson;
+                    updateModulePreview(currentModule);
+                    lessonsContainer.innerHTML = '';
+                    currentModule.lessons.forEach(l => renderLesson(l));
+                }
+            }
+        }
+    }
+    
+    function deleteLesson(lesson) {
+        if (confirm('Are you sure you want to delete this lesson?')) {
+            const moduleIndex = modules.findIndex(m => m.id === currentModule.id);
+            if (moduleIndex !== -1) {
+                modules[moduleIndex].lessons = modules[moduleIndex].lessons.filter(l => l.id !== lesson.id);
+                updateModulePreview(currentModule);
+                lessonsContainer.innerHTML = '';
+                currentModule.lessons.forEach(l => renderLesson(l));
+            }
+        }
+    }
+function getLessonIcon(type) {
+    switch(type.toLowerCase()) {
+        case 'video': return 'play';
+        case 'reading': return 'file-text';
+        case 'quiz': return 'check-circle';
+        case 'assignment': return 'edit-3';
+        default: return 'file';
+    }
+}
+
+// Add support link functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebarItems = document.querySelectorAll('.sidebar-item');
+    sidebarItems.forEach(item => {
+        item.addEventListener('click', function() {
+            const text = this.textContent.trim();
+            if (text === 'Support') {
+                window.location.href = '/support.html';
+            }
+        });
+    });
+});
+});

style.css

@@ -1,28 +1,79 @@
+
+/* Custom styles that can't be achieved with Tailwind */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Form styles */
+input, select {
+    transition: all 0.2s;
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+/* Module and lesson styles */
+.preview-module {
+    transition: all 0.2s;
+}
+
+.preview-module:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.lesson-card {
+    transition: all 0.2s;
+}
+
+.lesson-card:hover {
+    background-color: #f8fafc;
+    transform: translateX(2px);
+}
+
+.editable-title {
+    border-bottom: 2px dotted #cbd5e1;
+    padding-bottom: 2px;
+    cursor: text;
+}
+
+.edit-lesson-btn, .delete-lesson-btn {
+    transition: transform 0.1s;
+}
+
+.edit-lesson-btn:hover {
+    transform: scale(1.1);
+    color: #3b82f6 !important;
+}
+
+.delete-lesson-btn:hover {
+    transform: scale(1.1);
+    color: #ef4444 !important;
+}
+/* Button transitions */
+button {
+    transition: all 0.2s;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }

support.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support | EduLoom</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/header.js"></script>
+    <script src="components/support-ticket.js"></script>
+</head>
+<body class="h-full bg-gray-50">
+    <div class="flex h-full">
+        <custom-sidebar></custom-sidebar>
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <custom-header></custom-header>
+            <main class="flex-1 overflow-y-auto p-6">
+                <support-ticket></support-ticket>
+            </main>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>