I'll create a modern ticket management page with HTML, CSS, and JavaScript. Here's the implementation: Ticket Management

Sarah Johnson

Ticket Management

Website not loading properly

#TKT-1001 Open 2 hours ago

Customers are reporting that the homepage is not loading correctly on mobile devices...

Payment processing issue

#TKT-1002 Pending 1 day ago

Some customers are unable to complete payments through the checkout process...

Feature request: Dark mode

#TKT-1003 Closed 3 days ago

Multiple users have requested a dark mode option for the application...

:root { --primary: #4361ee; --primary-light: #e0e7ff; --secondary: #3f37c9; --dark: #1e1e1e; --light: #f8f9fa; --success: #4cc9f0; --warning: #f8961e; --danger: #f72585; --gray: #6c757d; --gray-light: #e9ecef; --white: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; } .dashboard { display: flex; min-height: 100vh; } .sidebar { width: 250px; background-color: var(--white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px 0; } .logo { display: flex; align-items: center; padding: 0 20px 20px; font-size: 1.5rem; font-weight: 700; color: var(--primary); } .logo i { margin-right: 10px; font-size: 1.8rem; } nav ul { list-style: none; } nav ul li { padding: 12px 20px; display: flex; align-items: center; cursor: pointer; transition: all 0.3s ease; } nav ul li i { margin-right: 10px; color: var(--gray); } nav ul li:hover { background-color: var(--primary-light); color: var(--primary); } nav ul li.active { background-color: var(--primary-light); color: var(--primary); border-left: 3px solid var(--primary); } .content { flex: 1; padding: 20px; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .search-bar { position: relative; width: 300px; } .search-bar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray); } .search-bar input { width: 100%; padding: 10px 15px 10px 40px; border: 1px solid var(--gray-light); border-radius: 5px; font-size: 0.9rem; transition: all 0.3s ease; } .search-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); } .user-profile { display: flex; align-items: center; } .user-profile img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .ticket-container { background-color: var(--white); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); padding: 20px; } .ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .ticket-header h1 { font-size: 1.8rem; font-weight: 600; } .btn-primary { background-color: var(--primary); color: var(--white); border: none; padding: 10px 15px; border-radius: 5px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; } .btn-primary i { margin-right: 8px; } .btn-primary:hover { background-color: var(--secondary); } .ticket-filters { display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-light); } .filter-group { display: flex; align-items: center; } .filter-group span { margin-right: 10px; font-size: 0.9rem; color: var(--gray); } .filter-group select { padding: 8px 12px; border: 1px solid var(--gray-light); border-radius: 5px; font-size: 0.9rem; background-color: var(--white); cursor: pointer; } .ticket-list { display: flex; flex-direction: column; gap: 15px; } .ticket-card { display: flex; background-color: var(--white); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border-left: 4px solid transparent; } .ticket-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .ticket-priority { width: 5px; border-radius: 5px 0 0 5px; } .ticket-priority.high { background-color: var(--danger); } .ticket-priority.medium { background-color: var(--warning); } .ticket-priority.low { background-color: var(--success); } .ticket-content { flex: 1; padding: 15px; } .ticket-title { font-weight: 600; margin-bottom: 5px; } .ticket-meta { display: flex; gap: 15px; margin-bottom: 10px; font-size: 0.8rem; color: var(--gray); } .ticket-status { padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; } .ticket-status.open { background-color: rgba(67, 97, 238, 0.1); color: var(--primary); } .ticket-status.pending { background-color: rgba(248, 150, 30, 0.1); color: var(--warning); } .ticket-status.closed { background-color: rgba(76, 201, 240, 0.1); color: var(--success); } .ticket-description { font-size: 0.9rem; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ticket-actions { display: flex; align-items: center; padding: 0 15px; gap: 10px; } .btn-icon { background: none; border: none; color: var(--gray); cursor: pointer; font-size: 1rem; transition: all 0.3s ease; } .btn-icon:hover { color: var(--primary); } @media (max-width: 768px) { .dashboard { flex-direction: column; } .sidebar { width: 100%; padding: 10px 0; } .ticket-filters { flex-direction: column; gap: 10px; } } document.addEventListener('DOMContentLoaded', function() { // Sidebar navigation const navItems = document.querySelectorAll('nav ul li'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); // Create ticket button const createBtn = document.querySelector('.btn-primary'); createBtn.addEventListener('click', function() { alert('Create new ticket functionality would go here'); }); // Ticket action buttons const editButtons = document.querySelectorAll('.btn-icon:nth-child(1)'); const deleteButtons = document.querySelectorAll('.btn-icon:nth-child(2)'); editButtons.forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); const ticketId = this.closest('.ticket-card').querySelector('.ticket-id').textContent; alert(`Edit ticket ${ticketId}`); }); }); deleteButtons.forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); const ticketId = this.closest('.ticket-card').querySelector('.ticket-id').textContent; if (confirm(`Are you sure you want to delete ${ticketId}?`)) { this.closest('.ticket-card').remove(); } }); }); // Ticket card click const ticketCards = document.querySelectorAll('.ticket-card'); ticketCards.forEach(card => { card.addEventListener('click', function() { const ticketId = this.querySelector('.ticket-id').textContent; alert(`View details for ${ticketId}`); }); }); });