Ticketsystem/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Laila Dashboard - Ticket System!</title>
  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
  <link rel="stylesheet" href="user.css" />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  />
</head>
<body>
  <div class="container">
    <header class="header">
      <h1><i class="fas fa-ticket-alt"></i> My Tickets</h1>
      <div class="user-actions">
        <span>Hi Laila!</span>
        <img class="avatar" src="/assets/user.jpg" alt="User Avatar">
        <button id="open-modal-btn" class="btn-primary small-btn">
          <i class="fas fa-plus"></i> Create Ticket
        </button>
        <button id="update-pfp-btn" class="btn-update-pfp small-btn">
          <i class="fas fa-camera"></i> Update Picture
        </button>
      </div>
    </header>

    <!-- Modal Window for Creating Ticket -->
    <div id="create-ticket-modal" class="modal" style="display:none;">
      <div class="modal-content">
        <button id="close-modal-btn" class="modal-close-btn" aria-label="Close modal">
          &times;
        </button>
        <section class="ticket-form">
          <h2><i class="fas fa-plus-circle"></i> Create New Ticket</h2>
          <form id="create-form">
            <div class="form-group">
              <input type="text" id="title" placeholder="Ticket Title" required />
            </div>
            <div class="form-group">
              <textarea
                id="description"
                rows="3"
                placeholder="Describe your issue..."
                required
              ></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <select id="priority">
                  <option value="Low">Low Priority</option>
                  <option value="Medium" selected>Medium Priority</option>
                  <option value="High">High Priority</option>
                  <option value="Urgent">Urgent</option>
                </select>
              </div>
              <div class="form-group">
                <select id="category">
                  <option value="HELP">HELP</option>
                  <option value="HELP MEE NOOOW">HELP MEE NOOOW</option>
                  <option value="IT-Support">IT-Support</option>
                  <option value="Suggestion...">Suggestion...</option>
                  <option value="Add Book pls">Add Book pls</option>
                  <option value="Honeyycloud!">Honeyycloud!</option>
                </select>
              </div>
            </div>
            <div class="form-group button-wrapper">
             <button type="submit" class="btn-primary">
              <i class="fas fa-paper-plane"></i> Create Ticket
             </button>
            </div>
          </form>
        </section>
      </div>
    </div>

    <!-- Profile Picture Modal -->
    <div id="update-pfp-modal" class="modal" style="display:none;">
      <div class="modal-content small-modal">
        <h2><i class="fas fa-camera"></i> Update Profile Picture</h2>

        <div id="drop-zone">
          <p>Drag & Drop your picture here<br>or click to select</p>
          <input type="file" id="pfp-file-input" accept="image/*" hidden>
        </div>

        <button id="upload-pfp-btn" class="btn-update-pfp" style="margin-top: 12px;">
          <i class="fas fa-upload"></i> Upload
        </button>
      </div>
    </div>

    <main class="main-content">
      <section class="tickets-section">
        <div class="section-header">
          <h2><i class="fas fa-tasks"></i> My Tickets</h2>
          <div class="filters-row">
            <input type="text" id="search-input" placeholder="Search tickets..." />
            <select id="status-filter">
              <option value="all">All Statuses</option>
              <option value="Open">Open</option>
              <option value="In Progress">In Progress</option>
              <option value="On Hold">On Hold</option>
            </select>
            <select id="category-filter">
              <option value="all">All Categories</option>
              <option value="HELP">HELP</option>
              <option value="HELP MEE NOOOW">HELP MEE NOOOW</option>
              <option value="IT-Support">IT-Support</option>
              <option value="Suggestion...">Suggestion...</option>
              <option value="Add Book pls">Add Book pls</option>
              <option value="Honeyycloud!">Honeyycloud!</option>
            </select>
          </div>
        </div>

        <!-- 🟢 Open/Active Tickets -->
        <div>
          <h3>Active Tickets</h3>
          <div id="tickets-container" class="tickets-grid"></div>
        </div>

        <!-- 🔴 Closed Tickets -->
        <div style="margin-top: 2rem;">
          <h3>Closed Tickets</h3>
          <div id="closed-tickets-container" class="tickets-grid"></div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p>Ticket System by Honey v1.1 &copy; 2025</p>
    </footer>
  </div>

  <script src="user-script.js"></script>
</body>
</html>