ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update install/index.html

Browse Source
This commit is contained in:
Ben de Roo
2026-02-21 11:11:20 +01:00
parent 810dd37de2
commit 5307fa7215
1 changed files with 301 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
install/index.html
View File

@@ -369,16 +369,132 @@
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* ===== INTERACTIVE TERMINAL DOTS ===== */
.terminal-bar-dots span:first-child,
.install-dots span:first-child {
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.terminal-bar-dots span:first-child:hover,
.install-dots span:first-child:hover {
transform: scale(1.3);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
/* Terminal closing animation */
.terminal-closing {
animation: terminalClose 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes terminalClose {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.98, 0.5); }
100% { opacity: 0; transform: scale(0.95, 0.01); }
}
.terminal-opening {
animation: terminalOpen 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}
@keyframes terminalOpen {
0% { opacity: 0; transform: scale(0.95, 0.01); }
50% { opacity: 0.7; transform: scale(0.98, 0.5); }
100% { opacity: 1; transform: scale(1); }
}
/* ===== CONTRIBUTE SECTION ===== */
.contribute-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.contribute-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.contribute-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
opacity: 0;
transition: opacity 0.3s;
}
.contribute-card:hover {
border-color: var(--border-hover);
background: var(--bg-card-hover);
transform: translateY(-2px);
}
.contribute-card:hover::after { opacity: 1; }
.contribute-card .card-number {
font-family: 'JetBrains Mono', monospace;
font-size: 48px;
font-weight: 700;
line-height: 1;
margin-bottom: 16px;
background: linear-gradient(135deg, var(--green), transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.25;
}
/* ===== FLOATING PARTICLES ===== */
.particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: var(--green);
opacity: 0;
animation: floatUp linear infinite;
}
@keyframes floatUp {
0% { opacity: 0; transform: translateY(100vh) scale(0); }
10% { opacity: 0.3; }
90% { opacity: 0.1; }
100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}
/* ===== GLOW CURSOR FOLLOWER ===== */
.cursor-glow {
position: fixed;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
transform: translate(-50%, -50%);
transition: left 0.3s ease-out, top 0.3s ease-out;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.features-grid, .docs-grid { grid-template-columns: 1fr; }
.features-grid, .docs-grid, .contribute-grid { grid-template-columns: 1fr; }
.hero { padding: 130px 24px 60px; }
.hero p { font-size: 16px; }
.cursor-glow { display: none; }
}
</style>
</head>
<body>
<!-- FLOATING PARTICLES -->
<div class="particles" id="particles"></div>
<!-- CURSOR GLOW -->
<div class="cursor-glow" id="cursorGlow"></div>
<!-- NAV -->
<nav id="navbar">
<div class="nav-inner">
@@ -773,13 +889,83 @@
</div>
</section>
<!-- CONTRIBUTE / JOIN THE PROJECT -->
<section id="contribute">
<div class="container fade-in">
<div class="section-label">// contribute</div>
<h2 class="section-title">Make it yours</h2>
<p class="section-desc">Terminal Chat is open source and built to be extended. Whether you want to add new features, build mods, or fix bugs &mdash; you're welcome to join.</p>
<div class="contribute-grid">
<div class="contribute-card">
<div class="card-number">01</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
<div class="feature-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
</div>
<h3 style="font-size:16px;font-weight:600;">Build mods</h3>
</div>
<p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Add new commands, custom themes, message encryption, file sharing, or anything else you can think of. The codebase is simple and easy to extend.</p>
</div>
<div class="contribute-card">
<div class="card-number">02</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
<div class="feature-icon" style="background:rgba(6,182,212,0.15);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
</div>
<h3 style="font-size:16px;font-weight:600;">Improve the core</h3>
</div>
<p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Help fix bugs, improve Windows/macOS compatibility, optimize performance, or refactor the codebase. Every PR matters.</p>
</div>
<div class="contribute-card">
<div class="card-number">03</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
<div class="feature-icon" style="background:rgba(234,179,8,0.15);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
</div>
<h3 style="font-size:16px;font-weight:600;">Share ideas</h3>
</div>
<p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Open an issue to suggest features, report bugs, or discuss improvements. Even if you don't code, your input helps shape the project.</p>
</div>
<div class="contribute-card">
<div class="card-number">04</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
<div class="feature-icon" style="background:rgba(249,115,22,0.15);">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
</div>
<h3 style="font-size:16px;font-weight:600;">Fork & experiment</h3>
</div>
<p style="font-size:14px;color:var(--text-dim);line-height:1.6;">Fork the repo and go wild. Build your own version, add a GUI, make it work with Discord bots &mdash; the code is yours to play with.</p>
</div>
</div>
<!-- CTA -->
<div style="margin-top:48px;text-align:center;">
<p style="font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text-dim);margin-bottom:20px;">Ready to contribute? Start here:</p>
<div class="code-block" style="max-width:500px;margin:0 auto 24px;text-align:left;">
<span class="t-dim"># Clone and start hacking</span><br>
<span class="t-green">$</span> git clone &lt;repo-url&gt;<br>
<span class="t-green">$</span> cd terminal-chat<br>
<span class="t-green">$</span> python3 server.py <span class="t-dim">&amp;</span> python3 client.py
</div>
<p style="font-size:13px;color:var(--text-muted);">No complex setup. No build tools. Just Python.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<p>Terminal Chat &mdash; Built with Python &amp; TCP Sockets</p>
<p style="margin-top: 8px;">
<a href="#installatie">Install</a> &nbsp;&middot;&nbsp;
<a href="#docs">Documentation</a> &nbsp;&middot;&nbsp;
<a href="#features">Features</a>
<a href="#features">Features</a> &nbsp;&middot;&nbsp;
<a href="#contribute">Contribute</a>
</p>
</footer>
@@ -972,6 +1158,119 @@
}, { threshold: 0.15 });
document.querySelectorAll('.fade-in').forEach(el => fadeObserver.observe(el));
// === INTERACTIVE RED DOTS (close & reboot terminals) ===
function setupRedDots() {
// Main terminal red dot
const terminalDots = document.querySelectorAll('.terminal-bar-dots');
terminalDots.forEach(dotsContainer => {
const redDot = dotsContainer.querySelector('span:first-child');
const termWindow = dotsContainer.closest('.terminal-window');
if (!redDot || !termWindow) return;
redDot.title = 'Close terminal';
redDot.addEventListener('click', () => {
if (termWindow.classList.contains('terminal-closing') || termWindow.classList.contains('terminal-opening')) return;
termWindow.classList.add('terminal-closing');
termWindow.addEventListener('animationend', function onClose() {
termWindow.removeEventListener('animationend', onClose);
termWindow.style.visibility = 'hidden';
termWindow.classList.remove('terminal-closing');
// After 2 seconds, reopen and restart animation
setTimeout(() => {
// Reset the terminal contents
const loginPhase = document.getElementById('loginPhase');
const chatPhase = document.getElementById('chatPhase');
const chatMessages = document.getElementById('chatMessages');
const greenLine = document.getElementById('greenLine');
const inputArea = document.getElementById('inputArea');
const typingText = document.getElementById('typingText');
// Reset phases
loginPhase.style.display = 'block';
loginPhase.style.opacity = '1';
chatPhase.style.display = 'none';
chatMessages.innerHTML = '';
greenLine.style.opacity = '0';
inputArea.style.opacity = '0';
typingText.textContent = '';
// Reset all login lines
document.querySelectorAll('#loginPhase .terminal-line').forEach(line => {
line.classList.remove('visible');
});
termWindow.style.visibility = 'visible';
termWindow.classList.add('terminal-opening');
termWindow.addEventListener('animationend', function onOpen() {
termWindow.removeEventListener('animationend', onOpen);
termWindow.classList.remove('terminal-opening');
// Restart the login animation
startLoginPhase();
});
}, 2000);
});
});
});
// Install box red dot
const installDots = document.querySelectorAll('.install-dots');
installDots.forEach(dotsContainer => {
const redDot = dotsContainer.querySelector('span:first-child');
const installBox = dotsContainer.closest('.install-box');
if (!redDot || !installBox) return;
redDot.title = 'Close terminal';
redDot.addEventListener('click', () => {
if (installBox.classList.contains('terminal-closing') || installBox.classList.contains('terminal-opening')) return;
installBox.classList.add('terminal-closing');
installBox.addEventListener('animationend', function onClose() {
installBox.removeEventListener('animationend', onClose);
installBox.style.visibility = 'hidden';
installBox.classList.remove('terminal-closing');
setTimeout(() => {
installBox.style.visibility = 'visible';
installBox.classList.add('terminal-opening');
installBox.addEventListener('animationend', function onOpen() {
installBox.removeEventListener('animationend', onOpen);
installBox.classList.remove('terminal-opening');
});
}, 2000);
});
});
});
}
setupRedDots();
// === FLOATING PARTICLES ===
(function createParticles() {
const container = document.getElementById('particles');
if (!container) return;
for (let i = 0; i < 20; i++) {
const p = document.createElement('div');
p.classList.add('particle');
p.style.left = Math.random() * 100 + '%';
p.style.animationDuration = (12 + Math.random() * 18) + 's';
p.style.animationDelay = (Math.random() * 15) + 's';
p.style.width = p.style.height = (1.5 + Math.random() * 2) + 'px';
container.appendChild(p);
}
})();
// === CURSOR GLOW FOLLOWER ===
(function cursorGlow() {
const glow = document.getElementById('cursorGlow');
if (!glow) return;
document.addEventListener('mousemove', (e) => {
glow.style.left = e.clientX + 'px';
glow.style.top = e.clientY + 'px';
});
})();
</script>
</body>
</html>