.btn-primary background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
<!-- Modal for new ticket --> <div id="ticketModal" class="modal"> <div class="modal-card"> <h2><i class="fas fa-life-ring"></i> Create new ticket</h2> <form id="ticketForm"> <div class="form-group"> <label>Subject *</label> <input type="text" id="ticketSubject" placeholder="e.g., Login issue, Billing question" required> </div> <div class="form-group"> <label>Priority</label> <select id="ticketPriority"> <option value="Low">Low</option> <option value="Medium" selected>Medium</option> <option value="High">High</option> </select> </div> <div class="form-group"> <label>Description (optional)</label> <textarea id="ticketDesc" rows="3" placeholder="Brief details..."></textarea> </div> <div class="modal-actions"> <button type="button" class="close-modal" id="closeModalBtn">Cancel</button> <button type="submit" class="btn-primary" style="border-radius: 40px;">Create ticket</button> </div> </form> </div> </div>
.priority.high background: #fee2e2; color: #b91c1c;
/* stats cards */ .stats-grid display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; support ticket system html template free
.search-box i color: #94a3b8;
<!-- tickets table --> <div class="tickets-container"> <table class="ticket-table" id="ticketTable"> <thead> <tr> <th>Ticket ID</th><th>Subject</th><th>Status</th><th>Priority</th><th>Created</th><th>Actions</th> </tr> </thead> <tbody id="ticketTableBody"> <!-- dynamic rows injected --> </tbody> </table> </div> <div class="footer-note"> <i class="fas fa-headset"></i> Free support ticket template — fully functional demo with mock data, add & filter tickets </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>SupportFlow | Free Ticket System Template</title> <!-- Google Fonts & simple reset --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"> <!-- Font Awesome 6 (free icons) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * margin: 0; padding: 0; box-sizing: border-box; .btn-primary background: #3b82f6
.search-box display: flex; align-items: center; background: #f8fafc; border-radius: 40px; padding: 5px 15px; border: 1px solid #e2e8f0;
.logo-area h1 font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #1e293b, #3b82f6); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px;
/* header area */ .header display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; padding: 10px 20px
.btn-outline background: transparent; border: 1px solid #cbd5e1; color: #1e293b; padding: 10px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;
.ticket-table tr:last-child td border-bottom: none;
/* footer note */ .footer-note text-align: center; margin-top: 2rem; font-size: 0.75rem; color: #6c86a3;
.priority font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 40px; background: #f1f5f9; display: inline-block;
.stat-icon font-size: 2.2rem; color: #3b82f6; opacity: 0.7;