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="header-right">
        <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>
        <span>Hi Laila!</span>
        <img class="avatar" src="/assets/user.jpg" alt="User Avatar">
      </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="category"></select>
              </div>
              <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>
            <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>
            </select>
          </div>
        </div>

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

        <!-- Closed Tickets Accordion -->
        <div class="accordion-section" style="margin-top: 2rem;">
          <button class="accordion-toggle" id="closed-toggle">
            <i class="fas fa-archive"></i>
            Closed Tickets
            <span class="accordion-count" id="closed-count">0</span>
            <i class="fas fa-chevron-down accordion-arrow"></i>
          </button>
          <div class="accordion-body" id="closed-accordion" style="display: none;">
            <div id="closed-tickets-container" class="tickets-grid"></div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p class="app-footer-text">Ticket System by Honey</p>
    </footer>
  </div>

  <!-- Mobile Bottom Navigation -->
  <nav class="mobile-bottom-nav">
    <button onclick="window.scrollTo({top:0,behavior:'smooth'})">
      <i class="fas fa-home"></i>Home
    </button>
    <button onclick="document.getElementById('search-input')?.focus()">
      <i class="fas fa-search"></i>Search
    </button>
    <button class="nav-create" onclick="document.getElementById('open-modal-btn')?.click()">
      <i class="fas fa-plus"></i>
    </button>
    <button onclick="document.getElementById('closed-toggle')?.click();document.getElementById('closed-toggle')?.scrollIntoView({behavior:'smooth'})">
      <i class="fas fa-archive"></i>Closed
    </button>
  </nav>

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