Skip to content

Instantly share code, notes, and snippets.

@mode-mercury

mode-mercury/index.html

Created October 26, 2025 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mode-mercury/2a31ee9e65c7dbf59bec2f03eb759c44 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mode-mercury/2a31ee9e65c7dbf59bec2f03eb759c44 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Matrix VoIP Terminal v2.0</title>
<!-- CDN Includes -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sip-0.20.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jssip.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--matrix-green: #0f0;
--matrix-dark-green: #006400;
--matrix-black: #000900;
--matrix-text-glow: 0 0 10px #0f0;
--container-height: 85vh;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
body {
background: var(--matrix-black);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', monospace;
overflow: hidden;
position: relative;
padding: 10px;
}
#matrix-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.app-container {
width: 95%;
max-width: 350px;
height: var(--container-height);
background: rgba(0, 9, 0, 0.85);
backdrop-filter: blur(5px);
border: 1px solid var(--matrix-green);
border-radius: 10px;
padding: 15px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}
.provider-selector select {
width: 100%;
padding: 8px;
background: rgba(0, 100, 0, 0.3);
border: 1px solid var(--matrix-green);
color: var(--matrix-green);
border-radius: 5px;
margin-bottom: 10px;
font-family: 'Courier New', monospace;
text-shadow: var(--matrix-text-glow);
}
.status-bar {
display: flex;
justify-content: space-between;
padding: 8px;
background: rgba(0, 50, 0, 0.3);
border: 1px solid var(--matrix-green);
border-radius: 5px;
color: var(--matrix-green);
font-size: 12px;
margin-bottom: 10px;
text-shadow: var(--matrix-text-glow);
}
#phoneNumber {
width: 100%;
padding: 10px;
background: rgba(0, 50, 0, 0.3);
border: 1px solid var(--matrix-green);
border-radius: 5px;
color: var(--matrix-green);
font-size: 24px;
text-align: center;
margin-bottom: 10px;
font-family: 'Courier New', monospace;
text-shadow: var(--matrix-text-glow);
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 10px;
}
.key {
aspect-ratio: 1.2;
font-size: 20px;
background: rgba(0, 50, 0, 0.3);
border: 1px solid var(--matrix-green);
border-radius: 5px;
color: var(--matrix-green);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
text-shadow: var(--matrix-text-glow);
}
.key span {
font-size: 10px;
margin-top: 2px;
}
.key:active {
background: var(--matrix-green);
color: var(--matrix-black);
transform: scale(0.95);
}
.action-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: auto;
}
.action-btn {
aspect-ratio: 1;
border: 1px solid var(--matrix-green);
border-radius: 50%;
background: rgba(0, 50, 0, 0.3);
color: var(--matrix-green);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
text-shadow: var(--matrix-text-glow);
}
.action-btn:active {
background: var(--matrix-green);
color: var(--matrix-black);
transform: scale(0.95);
}
#remoteVideo {
width: 100%;
border-radius: 5px;
margin-top: 10px;
display: none;
}
.matrix-char {
position: absolute;
color: var(--matrix-green);
font-family: monospace;
font-size: 12px;
text-shadow: var(--matrix-text-glow);
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: rgba(0, 20, 0, 0.9);
padding: 20px;
border-radius: 10px;
border: 1px solid var(--matrix-green);
width: 90%;
max-width: 300px;
}
/* Optimize for smaller screens */
@media (max-height: 700px) {
.app-container {
--container-height: 95vh;
}
.key {
font-size: 18px;
}
.action-btn {
font-size: 16px;
}
}
@media (max-height: 600px) {
.app-container {
padding: 10px;
}
.status-bar {
padding: 5px;
font-size: 10px;
}
#phoneNumber {
padding: 8px;
font-size: 20px;
}
}
</style>
</head>
<body>
<canvas id="matrix-rain"></canvas>
<div class="app-container">
<div class="provider-selector">
<select id="voipProvider">
<option value="matrix">MATRIX-NET</option>
<option value="zion">ZION-SECURE</option>
<option value="nebuchadnezzar">NEBUCHADNEZZAR</option>
<option value="sentinel">SENTINEL-P2P</option>
</select>
</div>
<div class="status-bar">
<span id="connectionStatus">SYSTEM_READY</span>
<span id="callStatus">IDLE</span>
<span id="latency">0ms</span>
</div>
<input type="text" id="phoneNumber" readonly placeholder="ENTER_CODE">
<div class="keypad">
<button class="key" data-value="1">1<span>.</span></button>
<button class="key" data-value="2">2<span>ABC</span></button>
<button class="key" data-value="3">3<span>DEF</span></button>
<button class="key" data-value="4">4<span>GHI</span></button>
<button class="key" data-value="5">5<span>JKL</span></button>
<button class="key" data-value="6">6<span>MNO</span></button>
<button class="key" data-value="7">7<span>PQRS</span></button>
<button class="key" data-value="8">8<span>TUV</span></button>
<button class="key" data-value="9">9<span>WXYZ</span></button>
<button class="key" data-value="*">*<span>SYS</span></button>
<button class="key" data-value="0">0<span>+</span></button>
<button class="key" data-value="#">#<span>CMD</span></button>
</div>
<div class="action-buttons">
<button id="callBtn" class="action-btn">
<i class="fas fa-phone"></i>
</button>
<button id="textBtn" class="action-btn">
<i class="fas fa-comment"></i>
</button>
<button id="deleteBtn" class="action-btn">
<i class="fas fa-backspace"></i>
</button>
<button id="micBtn" class="action-btn">
<i class="fas fa-microphone"></i>
</button>
</div>
</div>
<script>
// Matrix Rain Animation
const canvas = document.getElementById('matrix-rain');
const ctx = canvas.getContext('2d');
// Set canvas size
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Matrix rain configuration
const fontSize = 14;
const columns = Math.floor(canvas.width / fontSize);
const drops = new Array(columns).fill(1);
const matrixChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
function drawMatrixRain() {
ctx.fillStyle = 'rgba(0, 9, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0F0';
ctx.font = `${fontSize}px monospace`;
for (let i = 0; i < drops.length; i++) {
const char = matrixChars[Math.floor(Math.random() * matrixChars.length)];
const x = i * fontSize;
const y = drops[i] * fontSize;
ctx.fillText(char, x, y);
if (y > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
// Main VoIP Controller
class MatrixVoIP {
constructor() {
this.phoneNumber = '';
this.isCallActive = false;
this.isMuted = false;
this.initializeElements();
this.bindEvents();
this.startStatusUpdates();
}
initializeElements() {
this.elements = {
display: document.getElementById('phoneNumber'),
keys: document.querySelectorAll('.key'),
callBtn: document.getElementById('callBtn'),
textBtn: document.getElementById('textBtn'),
deleteBtn: document.getElementById('deleteBtn'),
micBtn: document.getElementById('micBtn'),
connectionStatus: document.getElementById('connectionStatus'),
callStatus: document.getElementById('callStatus'),
latency: document.getElementById('latency')
};
}
bindEvents() {
// Keypad input
this.elements.keys.forEach(key => {
key.addEventListener('click', () => this.handleKeyPress(key.dataset.value));
});
// Action buttons
this.elements.callBtn.addEventListener('click', () => this.handleCall());
this.elements.textBtn.addEventListener('click', () => this.handleMessage());
this.elements.deleteBtn.addEventListener('click', () => this.handleDelete());
this.elements.micBtn.addEventListener('click', () => this.toggleMicrophone());
// Keyboard input
document.addEventListener('keydown', (e) => this.handleKeyboardInput(e));
}
handleKeyPress(value) {
if (this.phoneNumber.length < 15) {
this.phoneNumber += value;
this.updateDisplay();
this.simulateKeyPress(value);
}
}
handleDelete() {
this.phoneNumber = this.phoneNumber.slice(0, -1);
this.updateDisplay();
}
updateDisplay() {
this.elements.display.value = this.phoneNumber;
}
simulateKeyPress(value) {
const key = Array.from(this.elements.keys).find(k => k.dataset.value === value);
if (key) {
key.style.background = 'var(--matrix-green)';
key.style.color = 'var(--matrix-black)';
setTimeout(() => {
key.style.background = 'rgba(0, 50, 0, 0.3)';
key.style.color = 'var(--matrix-green)';
}, 100);
}
}
handleCall() {
this.isCallActive = !this.isCallActive;
if (this.isCallActive) {
this.elements.callBtn.style.background = 'var(--matrix-green)';
this.elements.callStatus.textContent = 'CONNECTED';
} else {
this.elements.callBtn.style.background = 'rgba(0, 50, 0, 0.3)';
this.elements.callStatus.textContent = 'IDLE';
}
}
toggleMicrophone() {
this.isMuted = !this.isMuted;
this.elements.micBtn.style.background = this.isMuted ?
'var(--matrix-green)' : 'rgba(0, 50, 0, 0.3)';
}
startStatusUpdates() {
setInterval(() => {
const latency = Math.floor(Math.random() * 50) + 10;
this.elements.latency.textContent = `${latency}ms`;
}, 1000);
}
handleKeyboardInput(e) {
if (e.key >= '0' && e.key <= '9' || e.key === '*' || e.key === '#') {
this.handleKeyPress(e.key);
} else if (e.key === 'Backspace') {
this.handleDelete();
} else if (e.key === 'Enter') {
this.handleCall();
}
}
}
// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
const voipApp = new MatrixVoIP();
setInterval(drawMatrixRain, 33); // ~30fps matrix animation
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment