LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement complete ANSI art terminal redesign

Browse Source 
Transform entire UI into retro terminal aesthetic with ASCII/ANSI art:

Visual Changes:
- Add large ASCII art "TINKER TICKETS" banner with typewriter animation
- Terminal black background (#0a0a0a) with matrix green text (#00ff41)
- ASCII borders throughout using box-drawing characters (┌─┐│└─┘╔═╗║╚╝)
- Monospace fonts (Courier New, Consolas, Monaco) everywhere
- All rounded corners removed (border-radius: 0)
- Text glow effects on important elements
- Terminal prompts (>, $) and brackets ([]) on all UI elements

Dashboard:
- Table with ASCII corner decorations and terminal green borders
- Headers with > prefix and amber glow
- Priority badges: [P1] [P2] format with colored glows
- Status badges: [OPEN] [CLOSED] with borders and glows
- Search box with $ SEARCH prompt
- All buttons in [ BRACKET ] format

Ticket View:
- Ticket container with double ASCII borders (╔╗╚╝)
- Priority-colored corner characters
- UUID display: [UUID: xxx] format
- Comments section: ╔═══ COMMENTS ═══╗ header
- Activity timeline with ASCII tree (├──, │, └──)
- Tabs with [ ] brackets and ▼ active indicator

Components:
- Modals with ╔═══ TITLE ═══╗ headers and ASCII corners
- Hamburger menu with MENU SYSTEM box decoration
- Settings modal with terminal styling
- All inputs with green borders and amber focus glow
- Checkboxes with ✓ characters

Technical:
- New file: ascii-banner.js with banner artwork and typewriter renderer
- Comprehensive responsive design (1024px, 768px, 480px breakpoints)
- Mobile: simplified ASCII, hidden decorations, full-width menu
- Print styles for clean black/white output
- All functionality preserved, purely visual transformation

Colors preserved:
- Priority: P1=red, P2=orange, P3=blue, P4=green, P5=gray
- Status: Open=green, In Progress=yellow, Closed=red
- Accents: Terminal green, amber, cyan

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-06 23:22:25 -05:00
parent eda40a150b
commit 8aa5c39ed8
4 changed files with 1620 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
views/DashboardView.php
View File

@@ -10,6 +10,7 @@
<title>Ticket Dashboard</title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
</head>
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
@@ -90,6 +91,16 @@
}
}
</style>
<!-- ASCII Banner Container -->
<div id="ascii-banner-container" style="margin: 2rem auto; text-align: center; max-width: 1200px;"></div>
<script>
// Render ASCII banner on page load with typewriter effect
document.addEventListener('DOMContentLoaded', function() {
renderResponsiveBanner('#ascii-banner-container', 3);
});
</script>
<div class="dashboard-header">
<h1>Ticket Dashboard</h1>
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">New Ticket</button> </div>