ZaneDev/ZDTT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance terminal compatibility and add Arch Linux support

Browse Source 
- Updated terminal.py to support Arch Linux alongside Debian-based systems.
- Implemented distro detection and user override for unsupported distributions.
- Added a status bar feature with customizable colors and live updates.
- Introduced JSON-based user preferences for status bar color.
- Replaced neofetch with fastfetch for system info display.
- Updated version to 0.1.2.a in version.txt.
- Created a new website with installation instructions, features, and community engagement.
- Added JavaScript for interactive elements and CSS for styling the website.
This commit is contained in:
Zane V
2025-11-12 21:59:23 -05:00
parent 95d01c6897
commit 2e67031175
7 changed files with 1069 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
website/index.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDTT Terminal</title>
<link rel="stylesheet" href="styles.css">
<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=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="hero" id="top">
<nav class="nav">
<div class="brand">ZDTT</div>
<button class="nav__toggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="nav__links">
<a href="#features">Features</a>
<a href="#install">Install</a>
<a href="#showcase">Showcase</a>
<a href="#community">Community</a>
</div>
</nav>
<div class="hero__content">
<p class="eyebrow">Linux-first terminal</p>
<h1>ZDTT Terminal</h1>
<p class="lead">
A vibe-coded, distro-aware terminal experience for Debian and Arch power users.
Smart onboarding, plugin support, custom aliases, and a living status bar—no fluff.
</p>
<div class="hero__actions">
<button class="btn primary" data-copy="#install-command">Copy Install Command</button>
<a class="btn ghost" href="#features">Explore Features</a>
</div>
<code id="install-command" class="install-command">
curl -O https://zdtt-sources.zane.org/install.sh && chmod +x install.sh && ./install.sh
</code>
</div>
<div class="hero__metrics">
<div class="metric">
<p class="metric__label">Current release</p>
<p class="metric__value">v0.1.2.a</p>
</div>
<div class="metric">
<p class="metric__label">Supported families</p>
<p class="metric__value">Debian · Arch</p>
</div>
<div class="metric">
<p class="metric__label">Extension slots</p>
<p class="metric__value">Plugins + Aliases</p>
</div>
</div>
</header>
<main>
<section id="features" class="section features">
<div class="section__intro">
<p class="eyebrow">Why ZDTT</p>
<h2>Built for Linux hackers, tuned for comfort.</h2>
<p>ZDTT pairs a friendly onboarding story with serious tooling. No learning cliff, no silent failure when you hop distros.</p>
</div>
<div class="feature-grid">
<article class="card">
<h3>Smart distro detection</h3>
<p>Installer inspects <code>/etc/os-release</code>, package managers, and user overrides to keep Debian and Arch flows tight.</p>
</article>
<article class="card">
<h3>Always-on status bar</h3>
<p>Background thread renders a live status bar with branding, time, and color themes you can swap on the fly.</p>
</article>
<article class="card">
<h3>Plugin-friendly core</h3>
<p>Drop Python hooks inside <code>~/.zdtt/plugins</code>, log issues automatically, and iterate without touching core files.</p>
</article>
<article class="card">
<h3>Aliases that stick</h3>
<p>Readable aliases file, inline history, and tab-completion support so your favorite shortcuts load every launch.</p>
</article>
<article class="card">
<h3>Command batteries included</h3>
<p><code>ls</code>, <code>grep</code>, <code>fastfetch</code>, Python runners, package helpers, and more are wired in.</p>
</article>
<article class="card">
<h3>Graceful fallbacks</h3>
<p>Unsupported systems get friendly warnings, opt-in installs, and clear messaging so nothing breaks silently.</p>
</article>
</div>
</section>
<section id="install" class="section install">
<div class="section__intro">
<p class="eyebrow">3-step install</p>
<h2>From curl to custom shell in minutes.</h2>
</div>
<ol class="install-steps">
<li>
<h3>Fetch the installer</h3>
<p>Use the one-liner above or download <code>install.sh</code> directly if you want to inspect the script first.</p>
</li>
<li>
<h3>Follow the prompts</h3>
<p>The script checks your distro, offers overrides, and handles both Debian (<code>apt</code>) and Arch (<code>pacman</code>) flows.</p>
</li>
<li>
<h3>Launch <code>zdtt</code></h3>
<p>Run <code>zdtt</code> from any shell. Tweak banner art, status-bar colors, and drop plugins into <code>~/.zdtt</code>.</p>
</li>
</ol>
<div class="callout">
<p><strong>Heads up:</strong> ZDTT is Linux-only. Non-Debian/Arch installs can continue at your own risk—warnings are built in.</p>
</div>
</section>
<section id="showcase" class="section showcase">
<div class="section__intro">
<p class="eyebrow">Showcase</p>
<h2>Personality baked in.</h2>
</div>
<div class="showcase__grid">
<figure>
<figcaption>Custom ASCII banner system</figcaption>
<pre>
░█████████ ░███████ ░██████████░██████████
░██ ░██ ░██ ░██ ░██
░██ ░██ ░██ ░██ ░██
░███ ░██ ░██ ░██ ░██
░██ ░██ ░██ ░██ ░██
░██ ░██ ░██ ░██ ░██
░█████████ ░███████ ░██ ░██
</pre>
</figure>
<figure>
<figcaption>Live status bar with themed colors</figcaption>
<div class="statusbar-demo">ZDTT by ZaneDev<span>10:24pm</span></div>
</figure>
<figure>
<figcaption>Plugin logging with guard rails</figcaption>
<pre>
2024-01-02 21:41:07 ERROR my_plugin
Traceback (most recent call last):
...
</pre>
</figure>
</div>
</section>
<section id="community" class="section community">
<div class="section__intro">
<p class="eyebrow">Community</p>
<h2>Bring your tweaks, aliases, and plugins.</h2>
<p>ZDTT thrives on experimentation. Fork it, vibe with it, file PRs, or just send screenshots.</p>
</div>
<div class="community__actions">
<a class="btn primary" href="mailto:hello@zane.org">Say hello</a>
<a class="btn ghost" href="https://github.com/" target="_blank" rel="noreferrer">View source</a>
</div>
</section>
</main>
<footer class="footer">
<p>© <span id="year"></span> ZDTT • Built for Debian + Arch explorers.</p>
<a href="#top">Back to top ↑</a>
</footer>
<script src="script.js"></script>
</body>
</html>

35
website/script.js Normal file
View File

@@ -0,0 +1,35 @@
document.addEventListener('DOMContentLoaded', () => {
const navToggle = document.querySelector('.nav__toggle');
const navLinks = document.querySelector('.nav__links');
const yearEl = document.getElementById('year');
if (yearEl) {
yearEl.textContent = new Date().getFullYear();
}
if (navToggle && navLinks) {
navToggle.addEventListener('click', () => {
navLinks.classList.toggle('is-open');
});
}
document.querySelectorAll('[data-copy]').forEach((button) => {
button.addEventListener('click', () => {
const target = document.querySelector(button.dataset.copy);
if (!target) {
return;
}
navigator.clipboard?.writeText(target.textContent.trim()).then(() => {
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy Install Command';
}, 1800);
}).catch(() => {
button.textContent = 'Unable to copy';
setTimeout(() => {
button.textContent = 'Copy Install Command';
}, 1800);
});
});
});
});

350
website/styles.css Normal file
View File

@@ -0,0 +1,350 @@
:root {
color-scheme: dark;
font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--bg: #05060a;
--bg-alt: #0e1018;
--card: #121422;
--card-border: rgba(255, 255, 255, 0.08);
--text: #f5f6fd;
--muted: #9aa2c4;
--accent: #4dd5ff;
--accent-strong: #6d84ff;
--shadow: 0 18px 45px rgba(4, 6, 11, 0.6);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at top, rgba(77, 213, 255, 0.12), transparent 55%),
radial-gradient(circle at 20% 20%, rgba(109, 132, 255, 0.25), transparent 35%),
var(--bg);
color: var(--text);
font-size: 1rem;
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
.hero {
padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 5rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.brand {
font-weight: 700;
letter-spacing: 0.08em;
}
.nav__links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav__links a {
color: var(--muted);
font-weight: 500;
transition: color 0.2s ease;
}
.nav__links a:hover {
color: var(--text);
}
.nav__toggle {
display: none;
background: none;
border: none;
cursor: pointer;
gap: 0.4rem;
flex-direction: column;
}
.nav__toggle span {
display: block;
width: 1.5rem;
height: 2px;
background: var(--text);
}
.hero__content {
max-width: 48rem;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.75rem;
color: var(--accent);
margin-bottom: 1rem;
}
h1 {
font-size: clamp(2.7rem, 5vw, 4.8rem);
margin: 0 0 1rem;
line-height: 1.05;
}
h2 {
font-size: clamp(2rem, 3vw, 3rem);
margin-bottom: 0.75rem;
}
h3 {
margin-bottom: 0.35rem;
}
.lead {
color: var(--muted);
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.btn {
border: 1px solid transparent;
padding: 0.85rem 1.4rem;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn.primary {
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
color: #05060a;
border: none;
box-shadow: 0 15px 40px rgba(77, 213, 255, 0.3);
}
.btn.ghost {
border-color: rgba(255, 255, 255, 0.2);
color: var(--text);
background: transparent;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(109, 132, 255, 0.25);
}
.install-command {
display: block;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
background: rgba(18, 20, 34, 0.7);
border: 1px solid var(--card-border);
font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
font-size: 0.95rem;
overflow-x: auto;
}
.hero__metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
}
.metric {
padding: 1.25rem;
border-radius: 1rem;
border: 1px solid var(--card-border);
background: rgba(5, 6, 10, 0.55);
}
.metric__label {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.25em;
color: var(--muted);
}
.metric__value {
font-size: 1.2rem;
margin: 0.35rem 0 0;
font-weight: 600;
}
.section {
padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}
.section__intro {
max-width: 42rem;
margin-bottom: 2.5rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.25rem;
}
.card {
padding: 1.5rem;
border-radius: 1.2rem;
border: 1px solid var(--card-border);
background: var(--card);
box-shadow: var(--shadow);
min-height: 10rem;
}
.card p {
color: var(--muted);
margin: 0;
}
.install {
background: var(--bg-alt);
}
.install-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.25rem;
}
.install-steps li {
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--card-border);
background: rgba(5, 6, 10, 0.5);
counter-increment: install-step;
position: relative;
padding-left: 4.5rem;
}
.install-steps li::before {
content: counter(install-step);
position: absolute;
left: 1.5rem;
top: 1.5rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(77, 213, 255, 0.2);
border: 1px solid var(--accent);
display: grid;
place-items: center;
font-weight: 600;
}
.callout {
margin-top: 2rem;
padding: 1.25rem 1.5rem;
border-radius: 1rem;
background: rgba(255, 196, 87, 0.12);
border: 1px solid rgba(255, 196, 87, 0.35);
}
.showcase__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.35rem;
}
figure {
margin: 0;
border: 1px solid var(--card-border);
border-radius: 1rem;
padding: 1rem;
background: rgba(9, 10, 18, 0.8);
min-height: 15rem;
}
figcaption {
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--accent);
}
pre {
background: rgba(5, 6, 10, 0.65);
padding: 1rem;
border-radius: 0.75rem;
overflow: auto;
font-size: 0.85rem;
line-height: 1.3;
}
.statusbar-demo {
display: flex;
justify-content: space-between;
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
color: #05060a;
padding: 0.65rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
}
.community__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.footer {
padding: 2rem clamp(1.5rem, 5vw, 5rem);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.9rem;
color: var(--muted);
}
@media (max-width: 720px) {
.nav {
flex-wrap: wrap;
}
.nav__toggle {
display: inline-flex;
}
.nav__links {
display: none;
width: 100%;
flex-direction: column;
padding: 1rem 0 0;
gap: 0.75rem;
}
.nav__links.is-open {
display: flex;
}
}