<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIX // TERMINAL AUDIO INTERFACE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #050505;
--term-bg: #0b0f19;
--tui-cyan: #00f3ff;
--tui-orange: #ffb454;
--tui-green: #50fa7b;
--tui-purple: #bd93f9;
--text-dim: #5a7d85;
--text-bright: #ffffff;
--flicker-speed: 0.15s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }
body {
background-color: var(--bg-color);
color: var(--tui-cyan);
font-family: 'Share Tech Mono', monospace;
height: 100vh;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.crt::before {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 10;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.crt::after {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 10;
pointer-events: none;
animation: flicker var(--flicker-speed) infinite;
}
@keyframes flicker {
0% { opacity: 0.02; }
5% { opacity: 0.05; }
10% { opacity: 0.02; }
100% { opacity: 0.02; }
}
.container {
width: 95%;
max-width: 1400px;
height: 92vh;
border: 1px solid var(--tui-cyan);
position: relative;
background: radial-gradient(circle at center, #0e1420 0%, #000 100%);
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 40px;
box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
border-radius: 5px;
}
.corner {
position: absolute;
width: 15px;
height: 15px;
border: 2px solid var(--tui-green);
z-index: 5;
transition: all 0.5s ease;
}
.tl { top: -1px; left: -1px; border-bottom: none; border-right: none; border-color: var(--tui-cyan); }
.tr { top: -1px; right: -1px; border-bottom: none; border-left: none; border-color: var(--tui-orange); }
.bl { bottom: -1px; left: -1px; border-top: none; border-right: none; border-color: var(--tui-purple); }
.br { bottom: -1px; right: -1px; border-top: none; border-left: none; border-color: var(--tui-green); }
header {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid var(--tui-cyan);
background: rgba(0, 243, 255, 0.05);
}
.brand {
font-size: 2rem;
letter-spacing: 4px;
text-shadow: 0 0 10px var(--tui-cyan);
}
.status-badge {
font-size: 0.8rem;
border: 1px solid var(--tui-green);
color: var(--tui-green);
padding: 2px 8px;
background: rgba(80, 250, 123, 0.1);
}
aside {
grid-row: 2 / 3;
border-right: 1px solid var(--tui-orange);
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.nav-btn {
background: transparent;
border: 1px solid var(--text-dim);
color: var(--text-dim);
padding: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.nav-btn:hover, .nav-btn.active {
color: #000;
text-shadow: none;
font-weight: bold;
}
.nav-btn:nth-child(1):hover, .nav-btn:nth-child(1).active { background: var(--tui-cyan); border-color: var(--tui-cyan); }
.nav-btn:nth-child(2):hover, .nav-btn:nth-child(2).active { background: var(--tui-orange); border-color: var(--tui-orange); }
.nav-btn:nth-child(3):hover, .nav-btn:nth-child(3).active { background: var(--tui-purple); border-color: var(--tui-purple); }
.nav-btn:nth-child(4):hover, .nav-btn:nth-child(4).active { background: var(--tui-green); border-color: var(--tui-green); }
main {
grid-row: 2 / 3;
padding: 0;
overflow-y: auto;
position: relative;
}
.content-section {
display: none;
height: 100%;
padding: 30px;
animation: slideIn 0.3s ease;
}
.content-section.active {
display: block;
}
.hero-layout {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}
.screenshot-container {
flex: 1;
border: 1px solid var(--tui-cyan);
border-radius: 4px;
padding: 5px;
background: rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}
.screenshot-container img,
.screenshot-container video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
opacity: 0.9;
}
.screenshot-overlay {
position: absolute;
top: 10px; right: 10px;
background: rgba(0,0,0,0.8);
border: 1px solid var(--tui-cyan);
padding: 5px 10px;
font-size: 0.7rem;
color: var(--tui-cyan);
}
.hero-text {
border-left: 3px solid var(--tui-orange);
padding-left: 20px;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
color: var(--tui-cyan);
margin-bottom: 10px;
text-transform: uppercase;
}
.typing-effect {
border-right: 2px solid var(--tui-green);
white-space: nowrap;
overflow: hidden;
animation: blinkCursor 0.75s step-end infinite;
display: inline-block;
color: var(--text-bright);
}
.install-box {
background: #000;
border: 1px solid var(--tui-orange);
padding: 20px;
margin-top: 20px;
}
.install-tabs {
display: flex;
gap: 2px;
margin-bottom: 15px;
}
.tab {
padding: 8px 20px;
cursor: pointer;
color: var(--text-dim);
border: 1px solid var(--text-dim);
border-bottom: none;
background: #050505;
}
.tab.active {
color: #000;
background: var(--tui-orange);
border-color: var(--tui-orange);
font-weight: bold;
}
.cmd-display {
display: flex;
align-items: flex-start;
justify-content: space-between;
background: #0e1420;
border: 1px solid var(--tui-orange);
padding: 15px;
font-family: 'JetBrains Mono', monospace;
color: var(--text-bright);
gap: 12px;
}
.cmd-body {
flex: 1;
min-width: 0;
}
.cmd-note {
font-size: 0.85rem;
color: var(--text-dim);
margin-bottom: 8px;
line-height: 1.3;
}
.cmd-display code {
flex: 1;
min-width: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.35;
}
.cmd-body code {
display: block;
}
.copy-btn {
background: transparent;
border: 1px solid var(--tui-orange);
color: var(--tui-orange);
width: 44px;
height: 40px;
padding: 0;
cursor: pointer;
font-weight: bold;
font-family: 'Share Tech Mono', monospace;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.copy-btn:hover {
background: rgba(255, 180, 84, 0.12);
}
.copy-btn__icon {
width: 18px;
height: 18px;
display: inline-block;
}
.copy-btn__icon--check { display: none; }
.copy-btn.copied {
border-color: var(--tui-green);
color: var(--tui-green);
}
.copy-btn.copied .copy-btn__icon--copy { display: none; }
.copy-btn.copied .copy-btn__icon--check { display: inline-block; }
.keys-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
margin-top: 10px;
}
.key-item {
border: 1px solid var(--tui-purple);
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(189, 147, 249, 0.05);
}
.key {
background: var(--tui-purple);
color: #000;
padding: 2px 6px;
font-weight: bold;
}
.section-header {
color: var(--tui-purple);
border-bottom: 1px solid var(--tui-purple);
padding-bottom: 5px;
margin-top: 25px;
margin-bottom: 15px;
display: inline-block;
}
footer {
grid-column: 1 / -1;
grid-row: 3 / 4;
border-top: 1px solid var(--tui-green);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 0.8rem;
background: rgba(0,0,0,0.8);
color: var(--text-dim);
}
a {
color: var(--tui-green);
text-decoration: none;
border-bottom: 1px dotted var(--tui-green);
}
a:hover { background: var(--tui-green); color: #000; border:none; }
@keyframes blinkCursor {
0%, 100% { border-color: transparent; }
50% { border-color: var(--tui-green); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 800px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 60px auto 1fr 40px;
height: 100vh;
width: 100%;
border: none;
border-radius: 0;
}
aside {
grid-row: 2;
flex-direction: row;
overflow-x: auto;
border-right: none;
border-bottom: 1px solid var(--tui-orange);
padding: 10px;
gap: 5px;
}
.nav-btn { padding: 8px 15px; white-space: nowrap; flex: 1; }
main { grid-row: 3; }
.hero-layout { display: block; }
.screenshot-container { height: 250px; margin-bottom: 20px; }
footer { grid-row: 4; }
.content-section { padding: 18px 14px; }
.install-box { padding: 12px; }
.install-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.tab {
flex: 0 0 auto;
white-space: nowrap;
padding: 8px 12px;
font-size: 0.9rem;
}
.cmd-display {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px;
}
.cmd-display code { font-size: 0.9rem; }
.cmd-note { font-size: 0.8rem; }
.copy-btn {
align-self: flex-end;
width: 44px;
height: 38px;
}
}
</style>
</head>
<body class="crt">
<div class="container">
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<header>
<div class="brand">TRIX_PLAYER</div>
<div class="status-badge">SYSTEM_ONLINE</div>
</header>
<aside>
<button class="nav-btn active" onclick="showSection('home')">01_VISUAL</button>
<button class="nav-btn" onclick="showSection('install')">02_DEPLOY</button>
<button class="nav-btn" onclick="showSection('controls')">03_INPUTS</button>
<button class="nav-btn" onclick="window.open('https://github.com/RIZAmohammadkhan/TerminalMusicPlayer', '_blank')">04_SOURCE</button>
</aside>
<main>
<section id="home" class="content-section active">
<div class="hero-layout">
<div class="hero-text">
<h1>TERMINAL AUDIO ENGINE</h1>
<p class="typing-target">High-performance Rust TUI. Vim-bindings. Minimal resource footprint.</p>
<div style="margin-top: 15px; display: flex; gap: 15px;">
<span style="color: var(--tui-orange)">[ MP3 / FLAC / WAV ]</span>
<span style="color: var(--tui-green)">[ ALSA-NATIVE ]</span>
<span style="color: var(--tui-purple)">[ FUZZY-SEARCH ]</span>
</div>
</div>
<div class="screenshot-container">
<div class="screenshot-overlay">LIVE_FEED :: /usr/bin/trix</div>
<video controls autoplay muted loop playsinline preload="metadata" aria-label="Trix Player demo video">
<source src="./assets/demo.mp4" type="video/mp4">
</video>
</div>
</div>
</section>
<section id="install" class="content-section">
<h1 style="color: var(--tui-orange)">INITIALIZE SEQUENCE</h1>
<p style="color: var(--text-dim); margin-bottom: 20px;">Select target environment for binary extraction.</p>
<div class="install-box">
<div class="install-tabs">
<div class="tab active" onclick="setInstallTab('curl')">CURL</div>
<div class="tab" onclick="setInstallTab('arch')">ARCH (AUR)</div>
<div class="tab" onclick="setInstallTab('deb')">DEBIAN</div>
<div class="tab" onclick="setInstallTab('rpm')">RPM</div>
</div>
<div id="cmd-curl" class="cmd-display">
<code>curl -fsSL https://raw.githubusercontent.com/RIZAmohammadkhan/TerminalMusicPlayer/main/install.sh | sh</code>
<button class="copy-btn" type="button" aria-label="Copy command" onclick="copyCmd('curl -fsSL https://raw.githubusercontent.com/RIZAmohammadkhan/TerminalMusicPlayer/main/install.sh | sh', this)">
<span class="copy-btn__icon copy-btn__icon--copy" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</span>
<span class="copy-btn__icon copy-btn__icon--check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>
</svg>
</span>
</button>
</div>
<div id="cmd-arch" class="cmd-display" style="display:none">
<code>yay -S trix-player</code>
<button class="copy-btn" type="button" aria-label="Copy command" onclick="copyCmd('yay -S trix-player', this)">
<span class="copy-btn__icon copy-btn__icon--copy" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</span>
<span class="copy-btn__icon copy-btn__icon--check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>
</svg>
</span>
</button>
</div>
<div id="cmd-deb" class="cmd-display" style="display:none">
<div class="cmd-body">
<div class="cmd-note">Download the latest <b>.deb</b> from <a href="https://github.com/RIZAmohammadkhan/TerminalMusicPlayer/releases" target="_blank" rel="noopener noreferrer">GitHub Releases</a>, then run:</div>
<code>sudo dpkg -i trix-player_*.deb</code>
</div>
<button class="copy-btn" type="button" aria-label="Copy command" onclick="copyCmd('sudo dpkg -i trix-player_*.deb', this)">
<span class="copy-btn__icon copy-btn__icon--copy" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</span>
<span class="copy-btn__icon copy-btn__icon--check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>
</svg>
</span>
</button>
</div>
<div id="cmd-rpm" class="cmd-display" style="display:none">
<div class="cmd-body">
<div class="cmd-note">Download the latest <b>.rpm</b> from <a href="https://github.com/RIZAmohammadkhan/TerminalMusicPlayer/releases" target="_blank" rel="noopener noreferrer">GitHub Releases</a>, then run:</div>
<code>sudo rpm -i trix-player-*.rpm</code>
</div>
<button class="copy-btn" type="button" aria-label="Copy command" onclick="copyCmd('sudo rpm -i trix-player-*.rpm', this)">
<span class="copy-btn__icon copy-btn__icon--copy" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</span>
<span class="copy-btn__icon copy-btn__icon--check" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>
</svg>
</span>
</button>
</div>
</div>
</section>
<section id="controls" class="content-section">
<h1 style="color: var(--tui-purple)">MANUAL OVERRIDE</h1>
<p style="color: var(--text-dim)">Master the keyboard-driven interface.</p>
<div class="section-header">NAVIGATION (VIM-STYLE)</div>
<div class="keys-grid">
<div class="key-item"><span>Move Up</span> <span class="key">↑</span></div>
<div class="key-item"><span>Move Down</span> <span class="key">↓</span></div>
<div class="key-item"><span>Select / Play</span> <span class="key">Enter</span></div>
<div class="key-item"><span>Delete File</span> <span class="key">D</span></div>
</div>
<div class="section-header">PLAYBACK CONTROL</div>
<div class="keys-grid">
<div class="key-item"><span>Pause / Resume</span> <span class="key">Space</span></div>
<div class="key-item"><span>Next Track</span> <span class="key">N</span></div>
<div class="key-item"><span>Prev Track</span> <span class="key">P</span></div>
<div class="key-item"><span>Seek +/- 5s</span> <span class="key">← / →</span></div>
<div class="key-item"><span>Toggle Shuffle</span> <span class="key">s</span></div>
<div class="key-item"><span>Toggle Loop</span> <span class="key">l</span></div>
</div>
<div class="section-header">SYSTEM COMMANDS</div>
<div class="keys-grid">
<div class="key-item"><span>Volume Mode</span> <span class="key">v</span></div>
<div class="key-item"><span>Library Search</span> <span class="key">S</span></div>
<div class="key-item"><span>Cheatsheet</span> <span class="key">?</span></div>
<div class="key-item"><span>Quit</span> <span class="key">q</span></div>
</div>
</section>
</main>
<footer>
<div class="sys-info">
<span>STATUS: OPERATIONAL</span>
<span style="color: var(--tui-orange)">:: RUST_LANG</span>
<span style="color: var(--tui-green)">:: RATATUI_LIB</span>
</div>
<div>
<a href="https://github.com/RIZAmohammadkhan/TerminalMusicPlayer/releases" target="_blank">GITHUB_RELEASES</a>
</div>
</footer>
</div>
<script>
const heroText = document.querySelector('.typing-target');
const textContent = heroText.innerText;
heroText.innerText = '';
let charIndex = 0;
function typeWriter() {
if (charIndex < textContent.length) {
heroText.innerText += textContent.charAt(charIndex);
charIndex++;
setTimeout(typeWriter, 30);
} else {
heroText.style.borderRight = "none";
}
}
setTimeout(() => {
typeWriter();
}, 300);
function showSection(id) {
document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
const activeBtn = Array.from(document.querySelectorAll('.nav-btn')).find(b => b.getAttribute('onclick').includes(id));
if(activeBtn) activeBtn.classList.add('active');
document.querySelectorAll('.content-section').forEach(sec => sec.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function setInstallTab(type) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
const clickedTab = Array.from(document.querySelectorAll('.tab')).find(t => t.getAttribute('onclick').includes(type));
clickedTab.classList.add('active');
document.querySelectorAll('.cmd-display').forEach(d => d.style.display = 'none');
document.getElementById('cmd-' + type).style.display = 'flex';
}
function copyCmd(text, btn) {
navigator.clipboard.writeText(text).then(() => {
if (btn) {
btn.classList.add('copied');
setTimeout(() => btn.classList.remove('copied'), 800);
}
const activeTab = document.querySelector('.tab.active');
const originalText = activeTab.innerText;
activeTab.innerText = "COPIED";
setTimeout(() => {
activeTab.innerText = originalText;
}, 800);
});
}
</script>
</body>
</html>