Honey/Ticketsystem
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 1.3 - Update Design and removed User

Browse Source
This commit is contained in:
Honey committed 2026-02-27 13:57:47 +01:00
1 parent 24eda1ae81
commit 3d9f4dfda0
13 files changed
+706 -809
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "ticketsystem", "name": "ticketsystem",
"version": "1.2.0", "version": "1.3",
"description": "", "description": "",
"main": "server.js", "main": "server.js",
"scripts": { "scripts": {
public/admin-script.js
-1
View File
@@ -191,7 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
<tr> <tr>
<td>${ticket.id}</td> <td>${ticket.id}</td>
<td class="ticket-title">${escapeHtml(shortTitle)}</td> <td class="ticket-title">${escapeHtml(shortTitle)}</td>
<td>${escapeHtml(ticket.requester)}</td>
<td>${escapeHtml(ticket.category) || '-'}</td> <td>${escapeHtml(ticket.category) || '-'}</td>
<td><span class="status-badge status-${statusClass}">${escapeHtml(ticket.status) || 'Unknown'}</span></td> <td><span class="status-badge status-${statusClass}">${escapeHtml(ticket.status) || 'Unknown'}</span></td>
<td><span class="priority-badge priority-${priorityClass}">${escapeHtml(ticket.priority) || 'None'}</span></td> <td><span class="priority-badge priority-${priorityClass}">${escapeHtml(ticket.priority) || 'None'}</span></td>
public/admin.css
+110 -177
View File
@@ -1,179 +1,124 @@
/* admin.css - Dark Mode Only */ /* admin.css - Glassmorphism + Gradient Design (Admin) */
/* NOTE: admin.html also loads user.css for shared base styles */
/* ===== GLOBAL STYLES & VARIABLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary-color: #4A90E2;
--primary-hover-color: #357ABD;
--secondary-color: #50E3C2;
--accent-color: #F5A623;
--success-color: #7ED321;
--danger-color: #D0021B;
--neutral-dark: #f0f0f0;
--neutral-medium: #cccccc;
--neutral-light: #999999;
--bg-color: #121212;
--card-bg-color: #1e1e1e;
--border-color: #2a2a2a;
--shadow-color: rgba(0, 0, 0, 0.5);
--text-color: #f5f5f5;
--link-color: var(--primary-color);
--font-family: 'Inter', sans-serif;
--border-radius: 8px;
--card-padding: 25px;
--input-padding: 12px 15px;
--transition-speed: 0.2s ease-in-out;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
font-size: 16px;
line-height: 1.6;
}
a {
color: var(--link-color);
text-decoration: none;
transition: color var(--transition-speed);
}
a:hover {
color: var(--primary-hover-color);
text-decoration: underline;
}
/* ===== UTILITY CLASSES ===== */
.container {
max-width: 1400px;
margin: auto;
padding: 20px 30px;
}
/* ===== HEADER ===== */
.header {
background: var(--card-bg-color);
padding: 20px var(--card-padding);
border-radius: var(--border-radius);
box-shadow: 0 2px 10px var(--shadow-color);
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.header h1 {
color: var(--primary-color);
font-size: 1.7rem;
font-weight: 700;
display: flex;
align-items: center;
}
.header h1 i {
margin-right: 12px;
}
/* ===== SECTION HEADER ===== */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.section-header h2 {
color: var(--neutral-dark);
font-size: 1.6rem;
font-weight: 700;
}
.section-header h2 i {
margin-right: 10px;
color: var(--primary-color);
}
/* ===== STATS CARDS ===== */ /* ===== STATS CARDS ===== */
.admin-stats { .admin-stats {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px; gap: 16px;
background: var(--card-bg-color); background: var(--glass-bg);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
border: 1px solid var(--glass-border);
padding: var(--card-padding); padding: var(--card-padding);
border-radius: var(--border-radius); border-radius: var(--border-radius-lg);
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 4px 15px var(--shadow-color); box-shadow: var(--glass-shadow);
} }
.stat-card { .stat-card {
text-align: center; text-align: center;
padding: 12px;
background: rgba(30, 30, 30, 0.3);
border-radius: var(--border-radius);
border: 1px solid rgba(148, 163, 184, 0.06);
transition: all var(--transition-speed);
} }
.stat-card:hover {
border-color: rgba(99, 102, 241, 0.2);
background: rgba(99, 102, 241, 0.05);
}
.stat-value { .stat-value {
font-size: 2.5rem; font-size: 2.4rem;
color: var(--primary-color); color: var(--primary-color);
font-weight: bold; font-weight: 800;
line-height: 1.2;
}
font-weight: 800;
line-height: 1.2;
} }
.stat-label { .stat-label {
font-size: 1rem; font-size: 0.9rem;
color: var(--neutral-medium); color: var(--neutral-medium);
margin-top: 4px;
} }
/* ===== FILTERS ===== */ /* ===== FILTERS ===== */
.admin-filters { .admin-filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px; gap: 12px;
} }
.admin-filters input, .admin-filters input,
.admin-filters select { .admin-filters select {
padding: var(--input-padding); padding: var(--input-padding);
background: #1c1c1c; background: rgba(30, 30, 30, 0.5);
border: 1px solid var(--border-color); backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
color: var(--text-color); color: var(--text-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
font-size: 0.95rem; font-size: 0.95rem;
font-family: var(--font-family);
transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.admin-filters input:focus,
.admin-filters select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-glow);
} }
/* ===== TICKET TABLE STYLES (OPEN + CLOSED) ===== */ /* ===== TICKET TABLE ===== */
.admin-tickets-list { .admin-tickets-list {
background: var(--card-bg-color); background: var(--glass-bg);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
border: 1px solid var(--glass-border);
padding: var(--card-padding); padding: var(--card-padding);
border-radius: var(--border-radius); border-radius: var(--border-radius-lg);
overflow-x: auto;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.95rem; font-size: 0.95rem;
} }
table th, table th, table td {
table td {
padding: 12px 15px; padding: 12px 15px;
text-align: left; text-align: left;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid rgba(148, 163, 184, 0.08);
color: var(--text-color); color: var(--text-color);
} }
table th { table th {
background: #1a1a1a; background: rgba(30, 30, 30, 0.4);
color: var(--neutral-medium); color: var(--neutral-medium);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 0.5px;
}
table tr {
transition: background var(--transition-speed);
}
table tbody tr:hover {
background: rgba(99, 102, 241, 0.05);
}
.empty-table {
text-align: center;
color: var(--neutral-light);
padding: 30px !important;
} }
/* ===== TABLE ACTION BUTTONS ===== */ /* ===== TABLE BUTTONS ===== */
.table-actions { .table-actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
} }
.table-btn { .table-btn {
padding: 6px 10px; padding: 7px 12px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
@@ -181,76 +126,64 @@ table th {
align-items: center; align-items: center;
gap: 5px; gap: 5px;
cursor: pointer; cursor: pointer;
border: none;
transition: all var(--transition-speed);
} }
.view-btn { .table-btn.view-btn {
background-color: var(--primary-color); background: var(--primary-color);
} }
.view-btn:hover { .table-btn.view-btn:hover {
background-color: var(--primary-hover-color); transform: translateY(-1px);
} }
.delete-btn { .table-btn.delete-btn {
background-color: var(--danger-color); background: #ef4444;
} }
.delete-btn:hover { .table-btn.delete-btn:hover {
background-color: #a60014; transform: translateY(-1px);
} }
/* ===== BADGES ===== */ /* ===== BADGES ===== */
.status-Open { background-color: rgba(74, 144, 226, 0.15); color: #4A90E2; } .status-badge, .priority-badge {
.status-In-Progress { background-color: rgba(245, 166, 35, 0.15); color: #F5A623; } padding: 4px 12px;
.status-On-Hold { background-color: rgba(155, 155, 155, 0.15); color: #9B9B9B; }
.status-Closed { background-color: rgba(126, 211, 33, 0.15); color: #7ED321; }
.priority-Low { background-color: rgba(80, 227, 194, 0.2); color: #50E3C2; }
.priority-Medium { background-color: rgba(74, 144, 226, 0.2); color: #4A90E2; }
.priority-High { background-color: rgba(245, 166, 35, 0.2); color: #F5A623; }
.priority-Urgent { background-color: rgba(208, 2, 27, 0.15); color: #D0021B; }
.status-badge,
.priority-badge {
padding: 0.25em 0.6em;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
} }
/* ===== CLOSED TICKETS SECTION ===== */ .status-Open { background: rgba(99,102,241,0.15); color: #818cf8; }
.status-In-Progress { background: rgba(245,158,11,0.15); color: #fbbf24; }
.status-On-Hold { background: rgba(100,116,139,0.2); color: #94a3b8; }
.status-Closed { background: rgba(34,197,94,0.15); color: #4ade80; }
.priority-Low { background: rgba(6,182,212,0.15); color: #22d3ee; }
.priority-Medium { background: rgba(99,102,241,0.15); color: #818cf8; }
.priority-High { background: rgba(245,158,11,0.15); color: #fbbf24; }
.priority-Urgent { background: rgba(239,68,68,0.15); color: #f87171; }
/* ===== CLOSED TICKETS ===== */
.closed-tickets-section { .closed-tickets-section {
margin-top: 30px; margin: 30px 30px 0;
} position: relative;
.closed-tickets-section .section-header h2 { z-index: 1;
color: var(--success-color);
} }
/* ===== RESPONSIVE ===== */ /* ===== RESPONSIVE ===== */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container { padding: 15px 20px; }
padding: 15px 20px; .header { flex-direction: column; align-items: flex-start; }
} .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.header { .closed-tickets-section { margin: 20px 16px 0; }
flex-direction: column;
align-items: flex-start;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.header h1 { .header h1 { font-size: 1.3rem; }
font-size: 1.3rem; .stat-value { font-size: 1.8rem; }
} .admin-stats { grid-template-columns: repeat(2, 1fr); }
.stat-value { .btn-primary { width: 100%; }
font-size: 2rem; table { font-size: 0.85rem; }
} table th, table td { padding: 8px 10px; }
.btn-primary, }
.btn-small {
width: 100%;
}
table {
font-size: 0.85rem;
}
table th,
table td {
padding: 8px 10px;
}
}
public/admin.html
+4 -6
View File
@@ -13,12 +13,12 @@
<div class="container"> <div class="container">
<header class="header"> <header class="header">
<h1><i class="fas fa-ticket-alt"></i> Admin Dashboard</h1> <h1><i class="fas fa-ticket-alt"></i> Admin Dashboard</h1>
<div class="user-actions"> <div class="header-right">
<span>Welcome, Admin!</span>
<img class="avatar" src="/assets/admin.jpg" alt="Admin Avatar">
<button id="update-pfp-btn" class="btn-update-pfp small-btn"> <button id="update-pfp-btn" class="btn-update-pfp small-btn">
<i class="fas fa-camera"></i> Update Picture <i class="fas fa-camera"></i> Update Picture
</button> </button>
<span>Welcome, Admin!</span>
<img class="avatar" src="/assets/admin.jpg" alt="Admin Avatar">
<a href="/">User View</a> <a href="/">User View</a>
</div> </div>
</header> </header>
@@ -91,7 +91,6 @@
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Title</th> <th>Title</th>
<th>Requester</th>
<th>Category</th> <th>Category</th>
<th>Status</th> <th>Status</th>
<th>Priority</th> <th>Priority</th>
@@ -122,7 +121,6 @@
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Title</th> <th>Title</th>
<th>Requester</th>
<th>Category</th> <th>Category</th>
<th>Status</th> <th>Status</th>
<th>Priority</th> <th>Priority</th>
@@ -139,7 +137,7 @@
</section> </section>
<footer class="footer"> <footer class="footer">
<p class="app-footer-text"></p> <p class="app-footer-text">Ticket System by Honey</p>
</footer> </footer>
</div> </div>
public/index.html
+23 -7
View File
@@ -12,15 +12,15 @@
<div class="container"> <div class="container">
<header class="header"> <header class="header">
<h1><i class="fas fa-ticket-alt"></i> My Tickets</h1> <h1><i class="fas fa-ticket-alt"></i> My Tickets</h1>
<div class="user-actions"> <div class="header-right">
<span>Hi Laila!</span>
<img class="avatar" src="/assets/user.jpg" alt="User Avatar">
<button id="open-modal-btn" class="btn-primary small-btn"> <button id="open-modal-btn" class="btn-primary small-btn">
<i class="fas fa-plus"></i> Create Ticket <i class="fas fa-plus"></i> Create Ticket
</button> </button>
<button id="update-pfp-btn" class="btn-update-pfp small-btn"> <button id="update-pfp-btn" class="btn-update-pfp small-btn">
<i class="fas fa-camera"></i> Update Picture <i class="fas fa-camera"></i> Update Picture
</button> </button>
<span>Hi Laila!</span>
<img class="avatar" src="/assets/user.jpg" alt="User Avatar">
</div> </div>
</header> </header>
@@ -38,6 +38,9 @@
<textarea id="description" rows="3" placeholder="Describe your issue..." required></textarea> <textarea id="description" rows="3" placeholder="Describe your issue..." required></textarea>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-group">
<select id="category"></select>
</div>
<div class="form-group"> <div class="form-group">
<select id="priority"> <select id="priority">
<option value="Low">Low Priority</option> <option value="Low">Low Priority</option>
@@ -46,9 +49,6 @@
<option value="Urgent">Urgent</option> <option value="Urgent">Urgent</option>
</select> </select>
</div> </div>
<div class="form-group">
<select id="category"></select>
</div>
</div> </div>
<div class="form-group button-wrapper"> <div class="form-group button-wrapper">
<button type="submit" class="btn-primary"> <button type="submit" class="btn-primary">
@@ -113,10 +113,26 @@
</main> </main>
<footer class="footer"> <footer class="footer">
<p class="app-footer-text"></p> <p class="app-footer-text">Ticket System by Honey</p>
</footer> </footer>
</div> </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="user-script.js"></script>
<script src="version.js"></script> <script src="version.js"></script>
</body> </body>
public/ticketview/admin-view.css
+22 -34
View File
@@ -1,7 +1,7 @@
/* ==== ADMIN COMMENT STYLING ==== */ /* ==== ADMIN COMMENT STYLING ==== */
.comment.admin .comment-content { .comment.admin .comment-content {
background-color: var(--color-admin-highlight); background-color: rgba(99, 102, 241, 0.08);
border-left: 4px solid var(--color-primary); border-left: 3px solid var(--color-primary);
} }
.comment.admin .comment-author::after { .comment.admin .comment-author::after {
content: " (Admin)"; content: " (Admin)";
@@ -19,18 +19,17 @@
} }
.btn-secondary { .btn-secondary {
padding: 10px 16px; padding: 10px 16px;
border: none; border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
transition: background 0.2s ease; transition: all 0.25s ease;
} background: rgba(99, 102, 241, 0.15);
.btn-secondary { color: #818cf8;
background-color: var(--color-accent);
color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: #1976d2; background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.3);
} }
/* ==== CUSTOM ADMIN LAYOUT FIX ==== */ /* ==== CUSTOM ADMIN LAYOUT FIX ==== */
@@ -43,58 +42,47 @@
.ticket-info-grid { .ticket-info-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
}
/* GRID ADMIN SIDE ORDER */ /* GRID ADMIN SIDE ORDER */
.ticket-info-grid { .ticket-info-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto; /* 3 rows */ grid-template-rows: auto auto auto;
gap: 15px; gap: 15px;
} }
/* Requester: span all 3 columns on row 1 */ /* Description: span all 3 columns on row 1 */
.info-item.requester { .info-item.description {
grid-column: 1 / 4; grid-column: 1 / 4;
grid-row: 1 / 2; grid-row: 1 / 2;
} }
/* Description: span all 3 columns on row 2 */ /* Created, Updated, Time: row 2 */
.info-item.description {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
/* Created, Updated, Time: row 3, columns 1-3 */
.info-item.created { .info-item.created {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 3 / 4; grid-row: 2 / 3;
} }
.info-item.updated { .info-item.updated {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 3 / 4; grid-row: 2 / 3;
} }
/* Time div isn’t .info-item, so select it directly by nth-child */ .ticket-info-grid > div:nth-child(4) {
.ticket-info-grid > div:nth-child(5) {
grid-column: 3 / 4; grid-column: 3 / 4;
grid-row: 3 / 4; grid-row: 2 / 3;
display: flex;
align-items: center;
gap: 10px;
} }
/* Status, Priority, Category: row 4, columns 1-3 */ /* Status, Priority, Category: row 3 */
.info-item.status { .info-item.status {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 4 / 5; grid-row: 3 / 4;
} }
.info-item.priority { .info-item.priority {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 4 / 5; grid-row: 3 / 4;
} }
.info-item.category { .info-item.category {
grid-column: 3 / 4; grid-column: 3 / 4;
grid-row: 4 / 5; grid-row: 3 / 4;
} }
.forms-row { .forms-row {
@@ -119,4 +107,4 @@
.forms-row { .forms-row {
flex-direction: column; flex-direction: column;
} }
} }
public/ticketview/ticket-admin.js
-1
View File
@@ -52,7 +52,6 @@ document.addEventListener('DOMContentLoaded', async () => {
categorySelect.value = ticket.category || ''; categorySelect.value = ticket.category || '';
document.getElementById('ticket-id-val').textContent = ticket.id; document.getElementById('ticket-id-val').textContent = ticket.id;
document.getElementById('ticket-requester').textContent = ticket.requester;
document.getElementById('ticket-created').textContent = formatDateTime(ticket.created_at); document.getElementById('ticket-created').textContent = formatDateTime(ticket.created_at);
document.getElementById('ticket-updated').textContent = formatDateTime(ticket.updated_at); document.getElementById('ticket-updated').textContent = formatDateTime(ticket.updated_at);
totalTimeDisplay.textContent = formatMinutes(typeof ticket.total_time === 'number' ? ticket.total_time : 0); totalTimeDisplay.textContent = formatMinutes(typeof ticket.total_time === 'number' ? ticket.total_time : 0);
public/ticketview/ticket-user.js
-2
View File
@@ -14,7 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
const ticketStatus = document.getElementById('ticket-status-badge'); const ticketStatus = document.getElementById('ticket-status-badge');
const ticketPriority = document.getElementById('priority-text'); const ticketPriority = document.getElementById('priority-text');
const ticketDescription = document.getElementById('ticket-description-text'); const ticketDescription = document.getElementById('ticket-description-text');
const ticketRequester = document.getElementById('ticket-requester');
const ticketCreated = document.getElementById('ticket-created'); const ticketCreated = document.getElementById('ticket-created');
const ticketUpdated = document.getElementById('ticket-updated'); const ticketUpdated = document.getElementById('ticket-updated');
const ticketCategory = document.getElementById('ticket-category'); const ticketCategory = document.getElementById('ticket-category');
@@ -34,7 +33,6 @@ document.addEventListener('DOMContentLoaded', () => {
ticketIdElem.textContent = ticket.id; ticketIdElem.textContent = ticket.id;
ticketStatus.textContent = ticket.status; ticketStatus.textContent = ticket.status;
ticketDescription.innerHTML = linkify(ticket.description || ''); ticketDescription.innerHTML = linkify(ticket.description || '');
ticketRequester.textContent = ticket.requester;
ticketCreated.textContent = formatDateTime(ticket.created_at); ticketCreated.textContent = formatDateTime(ticket.created_at);
ticketUpdated.textContent = formatDateTime(ticket.updated_at); ticketUpdated.textContent = formatDateTime(ticket.updated_at);
ticketPriority.textContent = ticket.priority; ticketPriority.textContent = ticket.priority;
public/ticketview/ticket-view-admin.html
+1 -5
View File
@@ -34,10 +34,6 @@
</div> </div>
<div class="ticket-info-grid"> <div class="ticket-info-grid">
<div class="info-item requester">
<h4>Requester</h4>
<p id="ticket-requester">-</p>
</div>
<div class="info-item description"> <div class="info-item description">
<h3>Description</h3> <h3>Description</h3>
<p id="ticket-description-text">Loading...</p> <p id="ticket-description-text">Loading...</p>
@@ -122,7 +118,7 @@
</main> </main>
<footer class="footer"> <footer class="footer">
<p class="app-footer-text"></p> <p class="app-footer-text">Ticket System by Honey</p>
</footer> </footer>
</div> </div>
public/ticketview/ticket-view-user.html
+3 -9
View File
@@ -35,13 +35,7 @@
</div> </div>
<div class="ticket-body"> <div class="ticket-body">
<!-- Requester first --> <!-- Description -->
<div class="info-item requester">
<h4>Requester</h4>
<p id="ticket-requester">-</p>
</div>
<!-- Then description -->
<h3>Description</h3> <h3>Description</h3>
<p id="ticket-description-text">Loading...</p> <p id="ticket-description-text">Loading...</p>
@@ -110,11 +104,11 @@
</main> </main>
<footer class="footer"> <footer class="footer">
<p class="app-footer-text"></p> <p class="app-footer-text">Ticket System by Honey</p>
</footer> </footer>
</div> </div>
<script type="module" src="ticket-user.js"></script> <script type="module" src="ticket-user.js"></script>
<script src="../version.js"></script> <script src="../version.js"></script>
</body> </body>
</html> </html>
public/ticketview/ticket-view.css
+194 -188
View File
@@ -1,86 +1,109 @@
/* ticket-view.css - Glassmorphism + Gradient Design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root { :root {
--color-bg: #2e2e2e; --color-bg: #1a1a1a;
--color-surface: #3c3c3c; --color-surface: rgba(40, 40, 40, 0.6);
--color-primary: #4caf50; --color-primary: #6366f1;
--color-primary-hover: #45a049; --color-primary-hover: #818cf8;
--color-accent: #2196f3; --color-accent: #06b6d4;
--color-text: #f5f5f5; --color-text: #d4d4d4;
--color-muted: #b0b0b0; --color-muted: #9a9a9a;
--color-border: #4f4f4f; --color-border: rgba(255, 255, 255, 0.08);
--color-danger: #e53935; --color-danger: #ef4444;
--color-admin-highlight: #424242; --color-admin-highlight: rgba(99, 102, 241, 0.05);
--radius: 8px;
--glass-bg: rgba(40, 40, 40, 0.6);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--glass-blur: 16px;
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
--primary-glow: rgba(99, 102, 241, 0.25);
--radius: 12px;
--radius-lg: 16px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
} }
* { *, *::before, *::after {
margin: 0; margin: 0; padding: 0; box-sizing: border-box;
padding: 0;
box-sizing: border-box;
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Inter', sans-serif;
background-color: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
line-height: 1.6; line-height: 1.6;
padding: 20px; padding: 20px;
min-height: 100vh;
} }
a { a { color: var(--color-primary-hover); text-decoration: none; }
color: var(--color-accent); a:hover { text-decoration: underline; color: var(--color-accent); }
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ===== CONTAINER ===== */
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
background-color: var(--color-surface); background: var(--glass-bg);
border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); box-shadow: var(--glass-shadow);
position: relative;
z-index: 1;
} }
/* ===== HEADER ===== */
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20px; padding: 20px 24px;
border-bottom: 1px solid var(--color-border); background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
} }
.header h1 { .header h1 {
font-size: 1.8rem; font-size: 1.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
color: var(--color-text);
}
.header h1 i {
color: var(--color-primary-hover);
} }
.back-link { .back-link {
font-size: 1rem; font-size: 1rem;
color: var(--color-muted);
transition: color var(--transition);
} }
.back-link i { .back-link:hover { color: var(--color-primary-hover); text-decoration: none; }
margin-right: 5px; .back-link i { margin-right: 5px; }
}
.main-content { /* ===== MAIN ===== */
padding: 20px; .main-content { padding: 20px; }
}
.ticket-details-layout { .ticket-details-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.ticket-details-layout { .ticket-details-layout { flex-direction: row; }
flex-direction: row;
}
} }
.ticket-details, .ticket-details,
.ticket-activity { .ticket-activity {
background-color: var(--color-bg); background: rgba(30, 30, 30, 0.4);
border: 1px solid var(--color-border); backdrop-filter: blur(8px);
border-radius: var(--radius); border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 20px; padding: 20px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@@ -91,6 +114,7 @@ a:hover {
flex-direction: column; flex-direction: column;
height: 600px; height: 600px;
} }
.tab-content { .tab-content {
display: none; display: none;
flex-direction: column; flex-direction: column;
@@ -98,9 +122,8 @@ a:hover {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
.tab-content.active { .tab-content.active { display: flex; }
display: flex;
}
#comments-container, #comments-container,
#history-container { #history-container {
flex-grow: 1; flex-grow: 1;
@@ -111,74 +134,21 @@ a:hover {
scrollbar-color: var(--color-primary) transparent; scrollbar-color: var(--color-primary) transparent;
} }
#comments-container::-webkit-scrollbar, #comments-container::-webkit-scrollbar,
#history-container::-webkit-scrollbar { #history-container::-webkit-scrollbar { width: 8px; }
width: 8px;
}
#comments-container::-webkit-scrollbar-thumb, #comments-container::-webkit-scrollbar-thumb,
#history-container::-webkit-scrollbar-thumb { #history-container::-webkit-scrollbar-thumb {
background-color: var(--color-primary); background: rgba(99, 102, 241, 0.3);
border-radius: 4px; border-radius: 4px;
} }
/* ===== TICKET HEADER ===== */
.ticket-header { .ticket-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: 20px;
} }
.ticket-header-left { .ticket-header h2 { font-size: 1.4rem; font-weight: bold; }
display: flex;
flex-direction: column;
gap: 10px;
max-width: 100%;
}
.ticket-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.ticket-header h2 {
font-size: 1.4rem;
font-weight: bold;
}
.ticket-status-priority-requester {
display: flex;
gap: 15px;
align-items: center;
margin-top: 5px;
flex-wrap: wrap;
}
.ticket-status,
.ticket-priority,
.ticket-requester,
.ticket-category {
padding: 6px 14px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9rem;
white-space: nowrap;
display: inline-block;
overflow: visible;
max-width: 100%;
box-sizing: border-box;
}
.ticket-status {
background-color: var(--color-primary);
color: white;
}
.ticket-priority {
background-color: var(--color-accent);
color: white;
}
.ticket-requester,
.ticket-category {
background-color: var(--color-muted);
color: var(--color-bg);
}
.ticket-meta { .ticket-meta {
margin-top: 10px; margin-top: 10px;
font-size: 0.9rem; font-size: 0.9rem;
@@ -188,101 +158,117 @@ a:hover {
gap: 20px; gap: 20px;
} }
.ticket-body h3 { .ticket-id span {
margin: 20px 0 10px; color: var(--color-primary-hover);
font-weight: 700;
font-size: 1.1rem; font-size: 1.1rem;
} }
#ticket-description-text {
white-space: pre-wrap; /* ===== BADGES ===== */
word-wrap: break-word; .ticket-status, .ticket-priority, .ticket-requester, .ticket-category {
overflow-wrap: break-word; padding: 6px 14px;
max-width: 100%; border-radius: 20px;
max-height: 200px; font-weight: 600;
overflow-y: auto; font-size: 0.9rem;
overflow-x: hidden; white-space: nowrap;
padding-right: 10px; display: inline-block;
margin-bottom: 20px;
} }
@media (min-width: 600px) { .ticket-status { background: rgba(99, 102, 241, 0.2); color: var(--color-primary-hover); }
.ticket-info-grid { .ticket-priority { background: rgba(6, 182, 212, 0.2); color: var(--color-accent); }
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); .ticket-requester, .ticket-category {
} background: rgba(148, 163, 184, 0.15);
color: var(--color-muted);
} }
/* ===== INFO GRID ===== */
.ticket-info-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
@media (max-width: 600px) {
.ticket-info-grid { grid-template-columns: 1fr 1fr; }
}
.info-item { min-width: 0; overflow: hidden; }
.info-item h4 { .info-item h4 {
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
} }
.form-control { .form-control {
width: 100%;
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: var(--radius);
border: 1px solid var(--color-border); border: 1px solid var(--glass-border);
background-color: var(--color-surface); background: rgba(30, 30, 30, 0.5);
backdrop-filter: blur(8px);
color: var(--color-text); color: var(--color-text);
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
transition: border-color var(--transition), box-shadow var(--transition);
} }
.form-control:focus { .form-control:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--primary-glow);
} }
.ticket-info-grid { #ticket-description-text {
display: grid; white-space: pre-wrap;
grid-template-columns: 1fr 1fr 1fr; /* 3 columns */ word-wrap: break-word;
gap: 15px; max-height: 200px;
grid-auto-rows: auto; overflow-y: auto;
} padding-right: 10px;
.ticket-info-grid .info-item { margin-bottom: 20px;
min-width: 0;
overflow: hidden;
}
.info-item .form-control {
width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
/* ===== TABS ===== */
.tabs { .tabs {
display: flex; display: flex;
margin-bottom: 15px; margin-bottom: 15px;
gap: 10px; gap: 8px;
} }
.tab-btn { .tab-btn {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
border: none; border: 1px solid var(--glass-border);
border-radius: var(--radius); border-radius: var(--radius);
background-color: var(--color-surface); background: rgba(30, 30, 30, 0.3);
color: var(--color-text); color: var(--color-text);
cursor: pointer; cursor: pointer;
transition: background 0.2s ease; transition: all var(--transition);
} font-family: 'Inter', sans-serif;
.tab-btn:hover { font-weight: 500;
background-color: var(--color-border);
} }
.tab-btn:hover { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.2); }
.tab-btn.active { .tab-btn.active {
background-color: var(--color-primary); background: var(--color-primary);
border-color: transparent;
color: white;
font-weight: 600;
} }
/* ===== COMMENTS ===== */
.comment { .comment {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 16px; gap: 14px;
margin-bottom: 20px; margin-bottom: 16px;
max-width: 800px;
} }
.comment-avatar { .comment-avatar {
width: 50px; width: 44px; height: 44px;
height: 50px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
} }
.comment-content { .comment-content {
background-color: var(--color-surface); background: rgba(30, 30, 30, 0.4);
border: 1px solid var(--glass-border);
padding: 12px 16px; padding: 12px 16px;
border-radius: var(--radius); border-radius: var(--radius);
width: 100%; width: 100%;
@@ -294,59 +280,49 @@ a:hover {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0.85rem; font-size: 0.85rem;
} }
.comment-author { .comment-author { font-weight: 600; }
font-weight: bold; .comment-date { color: var(--color-muted); font-size: 0.8rem; }
} .comment-text { font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; }
.comment-date {
color: var(--color-muted);
font-size: 0.8rem;
}
.comment-text {
font-size: 0.95rem;
line-height: 1.5;
word-wrap: break-word;
}
.comment-form { .comment-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
margin-bottom: 20px; margin-bottom: 16px;
} }
.comment-form input, .comment-form input,
.comment-form textarea { .comment-form textarea {
background-color: var(--color-surface); background: rgba(30, 30, 30, 0.5);
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-border); border: 1px solid var(--glass-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 10px; padding: 10px;
font-size: 1rem; font-size: 0.95rem;
font-family: 'Inter', sans-serif;
transition: border-color var(--transition), box-shadow var(--transition);
} }
.comment-form input:focus, .comment-form input:focus,
.comment-form textarea:focus { .comment-form textarea:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--primary-glow);
} }
/* ===== HISTORY ===== */
.history-item { .history-item {
display: flex; display: flex;
gap: 12px; gap: 12px;
margin-bottom: 15px; margin-bottom: 12px;
}
.history-icon {
font-size: 1.2rem;
color: var(--color-primary);
} }
.history-icon { font-size: 1.2rem; color: var(--color-primary-hover); }
.history-content { .history-content {
background-color: var(--color-surface); background: rgba(30, 30, 30, 0.4);
border: 1px solid var(--glass-border);
padding: 10px 15px; padding: 10px 15px;
border-radius: var(--radius); border-radius: var(--radius);
width: 100%; width: 100%;
} }
.history-action { .history-action { font-weight: 600; margin-bottom: 4px; }
font-weight: bold;
margin-bottom: 4px;
}
.history-meta { .history-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -354,21 +330,45 @@ a:hover {
color: var(--color-muted); color: var(--color-muted);
} }
/* Post Comment Button Styling */ /* ===== BUTTONS ===== */
.btn-primary { .btn-primary {
padding: 10px 16px; padding: 10px 16px;
background-color: var(--color-primary); background: var(--color-primary);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
transition: background 0.2s ease; font-family: 'Inter', sans-serif;
align-self: flex-start; /* damit er nicht breit wird */ transition: all var(--transition);
align-self: flex-start;
}
.btn-primary:hover {
transform: translateY(-1px);
} }
.btn-primaryt-btn:hover { .btn-secondary {
background-color: var(--color-primary-hover); padding: 10px 16px;
background: rgba(99, 102, 241, 0.15);
color: var(--color-primary-hover);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
font-family: 'Inter', sans-serif;
transition: all var(--transition);
}
.btn-secondary:hover {
background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.3);
}
.ticket-actions-bar {
display: flex;
gap: 10px;
margin-top: 20px;
} }
.footer { .footer {
@@ -376,5 +376,11 @@ a:hover {
text-align: center; text-align: center;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-muted); color: var(--color-muted);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--glass-border);
} }
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }
public/user-script.js
+1 -2
View File
@@ -237,14 +237,13 @@ document.addEventListener('DOMContentLoaded', () => {
<h3>${escapeHtml(ticket.title)} <span class="ticket-id">#${ticket.id}</span> <small class="total-time">Time: (${ticket.total_time} min)</small></h3> <h3>${escapeHtml(ticket.title)} <span class="ticket-id">#${ticket.id}</span> <small class="total-time">Time: (${ticket.total_time} min)</small></h3>
<p class="description">${escapeHtml(ticket.description)}</p> <p class="description">${escapeHtml(ticket.description)}</p>
<div class="meta"> <div class="meta">
<span class="requester"><i class="fas fa-user"></i> ${escapeHtml(ticket.requester)}</span>
<span class="date"><i class="fas fa-calendar"></i> ${formatDate(ticket.created_at)}</span> <span class="date"><i class="fas fa-calendar"></i> ${formatDate(ticket.created_at)}</span>
${ticket.category ? `<span class="category"><i class="fas fa-tag"></i> ${escapeHtml(ticket.category)}</span>` : ''}
</div> </div>
<div class="status-row"> <div class="status-row">
<div class="status status-${statusSafe.replace(/\s+/g, '-')}"> <div class="status status-${statusSafe.replace(/\s+/g, '-')}">
<i class="fas fa-circle"></i> ${escapeHtml(ticket.status)} <i class="fas fa-circle"></i> ${escapeHtml(ticket.status)}
</div> </div>
${ticket.category ? `<div class="category-badge"><i class="fas fa-tag"></i> ${escapeHtml(ticket.category)}</div>` : ''}
<div class="priority priority-${prioritySafe.replace(/\s+/g, '-')}"> <div class="priority priority-${prioritySafe.replace(/\s+/g, '-')}">
<i class="fas fa-flag"></i> ${escapeHtml(prioritySafe)} <i class="fas fa-flag"></i> ${escapeHtml(prioritySafe)}
</div> </div>
public/user.css
+347 -376
View File
File diff suppressed because it is too large. Load diff