Here's a **"Neon CyberGrid"** interface - a retro-futuristic 3D grid where websites pulse as glowing nodes in an infinite cyberpunk cityscape that responds to your movements with holographic effects:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon CyberGrid</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Courier New', monospace;
}
#cyberCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.grid-node {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, currentColor, #000);
box-shadow: 0 0 30px currentColor;
cursor: pointer;
z-index: 2;
transition: all 0.3s ease-out;
transform-style: preserve-3d;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.grid-node.active {
box-shadow: 0 0 60px white;
transform: scale(1.5) translateZ(50px);
z-index: 3;
}
.grid-node .node-core {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0.7;
transition: opacity 0.3s;
}
.grid-node.active .node-core {
opacity: 0.9;
}
.grid-node iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.node-label {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
color: #0ff;
text-align: center;
font-size: 11px;
text-shadow: 0 0 10px #0ff;
opacity: 0;
transition: opacity 0.3s;
}
.grid-node:hover .node-label {
opacity: 1;
}
#mainTerminal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective(1000px) rotateX(10deg);
width: 80vw;
height: 70vh;
background: rgba(0, 20, 30, 0.95);
border: 2px solid #0ff;
box-shadow: 0 0 80px rgba(0, 255, 255, 0.7);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
}
#mainTerminal.active {
display: flex;
animation: terminalGlow 3s infinite alternate;
}
@keyframes terminalGlow {
0% { box-shadow: 0 0 80px rgba(0, 255, 255, 0.7); }
100% { box-shadow: 0 0 120px rgba(255, 0, 255, 0.9); }
}
#terminalIframe {
flex: 1;
border: none;
background: #000;
}
#terminalHeader {
padding: 15px;
background: linear-gradient(to right, #000, #003);
color: #0ff;
text-align: center;
font-size: 16px;
letter-spacing: 2px;
border-bottom: 1px solid #0ff;
}
#cyberControls {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 30px;
z-index: 20;
}
.cyber-btn {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(0, 30, 50, 0.7);
border: 2px solid #f0f;
color: #f0f;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 28px;
box-shadow: 0 0 30px rgba(255, 0, 255, 0.6);
transition: all 0.3s;
}
.cyber-btn:hover {
background: rgba(50, 0, 80, 0.8);
transform: scale(1.2);
box-shadow: 0 0 50px rgba(0, 255, 255, 0.9);
color: #0ff;
border-color: #0ff;
}
#gridStats {
position: fixed;
top: 30px;
left: 30px;
color: #0ff;
background: rgba(0, 0, 0, 0.5);
padding: 15px;
border-radius: 5px;
z-index: 20;
font-size: 12px;
border: 1px solid #0ff;
}
.grid-connection {
position: absolute;
height: 2px;
background: linear-gradient(to right, rgba(0, 255, 255, 0.3), rgba(255, 0, 255, 0.7));
transform-origin: 0 0;
z-index: 1;
box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}
.scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 255, 255, 0.05) 0%,
rgba(0, 255, 255, 0) 10%
);
background-size: 100% 4px;
z-index: 4;
pointer-events: none;
animation: scanline 8s linear infinite;
}
@keyframes scanline {
0% { background-position: 0 0; }
100% { background-position: 0 100%; }
}
.hologram {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at center, rgba(0, 255, 255, 0.1), transparent 70%),
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.9),
rgba(0, 0, 0, 0.9) 1px,
transparent 1px,
transparent 2px
);
z-index: 0;
pointer-events: none;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 0.7;
}
20%, 22%, 24%, 55% {
opacity: 0.2;
}
}
</style>
</head>
<body>
<canvas id="cyberCanvas"></canvas>
<div class="hologram"></div>
<div class="scanline"></div>
<div id="nodesContainer">
<!-- Grid nodes will be added by JavaScript -->
</div>
<div id="connectionsContainer">
<!-- Grid connections will be added by JavaScript -->
</div>
<div id="mainTerminal">
<div id="terminalHeader">CYBER TERMINAL [v3.1.7]</div>
<iframe id="terminalIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="cyberControls">
<div class="cyber-btn" id="scanBtn">⌕</div>
<div class="cyber-btn" id="pulseBtn">⚡</div>
<div class="cyber-btn" id="regenBtn">⟳</div>
</div>
<div id="gridStats">
NODES: <span id="nodeCount">0</span> |
CONNECTIONS: <span id="connectionCount">0</span> |
SIGNAL: <span id="signalStrength">100%</span>
</div>
<script>
// CyberGrid parameters
const GRID_SIZE = 7;
const MAX_CONNECTIONS = 20;
const PULSE_RADIUS = 300;
const NODE_SPACING = 200;
// Cyber sites with neon colors
const cyberSites = [
{ url: 'https://advertica13.blogspot.com/', title: 'DATA HUB 13', color: '#0ff', category: 'data' },
{ url: 'https://advertica12.blogspot.com/', title: 'ARCHIVE 12', color: '#f0f', category: 'archive' },
{ url: 'https://www.softmod.shop/', title: 'CYBER MARKET', color: '#ff0', category: 'market' },
{ url: 'https://example.com/news', title: 'NEON NEWS', color: '#0f0', category: 'news' },
{ url: 'https://example.com/forum', title: 'HACKER FORUM', color: '#f00', category: 'social' },
{ url: 'https://example.com/tech', title: 'TECH GRID', color: '#00f', category: 'tech' }
];
// DOM elements
const cyberCanvas = document.getElementById('cyberCanvas');
const ctx = cyberCanvas.getContext('2d');
const nodesContainer = document.getElementById('nodesContainer');
const connectionsContainer = document.getElementById('connectionsContainer');
const mainTerminal = document.getElementById('mainTerminal');
const terminalIframe = document.getElementById('terminalIframe');
const terminalHeader = document.getElementById('terminalHeader');
const scanBtn = document.getElementById('scanBtn');
const pulseBtn = document.getElementById('pulseBtn');
const regenBtn = document.getElementById('regenBtn');
const nodeCount = document.getElementById('nodeCount');
const connectionCount = document.getElementById('connectionCount');
const signalStrength = document.getElementById('signalStrength');
// Grid state
let nodes = [];
let connections = [];
let activeNode = null;
let currentSignal = 100;
let gridOffset = { x: 0, y: 0, z: 0 };
let isDragging = false;
let lastX, lastY;
// Initialize the CyberGrid
function initCyberGrid() {
clearGrid();
// Create grid nodes
for (let x = 0; x < GRID_SIZE; x++) {
for (let y = 0; y < GRID_SIZE; y++) {
const screenX = (x - GRID_SIZE/2) * NODE_SPACING + window.innerWidth/2;
const screenY = (y - GRID_SIZE/2) * NODE_SPACING + window.innerHeight/2;
const screenZ = (Math.random() - 0.5) * 500;
const site = cyberSites[(x * GRID_SIZE + y) % cyberSites.length];
nodes.push(createGridNode(
nodes.length,
screenX,
screenY,
screenZ,
site
));
}
}
// Create initial connections
createGridConnections();
updateStats();
}
// Create a grid node
function createGridNode(id, x, y, z, site) {
const node = {
id: id,
x: x,
y: y,
z: z,
site: site,
element: null,
connections: []
};
const el = document.createElement('div');
el.className = 'grid-node';
el.id = `node-${id}`;
el.style.color = site.color;
el.style.left = `${x - 40}px`;
el.style.top = `${y - 40}px`;
el.style.transform = `translateZ(${z}px)`;
el.innerHTML = `
<div class="node-core">
<iframe src="${site.url}"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="node-label">${site.title}</div>
`;
el.addEventListener('click', (e) => {
e.stopPropagation();
activateNode(node);
});
nodesContainer.appendChild(el);
node.element = el;
return node;
}
// Create grid connections
function createGridConnections() {
// Clear existing connections
connectionsContainer.innerHTML = '';
connections = [];
// Connect nodes to their neighbors
nodes.forEach((node, i) => {
const x = Math.floor(i / GRID_SIZE);
const y = i % GRID_SIZE;
// Connect to right neighbor
if (x < GRID_SIZE - 1) {
const rightIndex = (x + 1) * GRID_SIZE + y;
createConnection(node, nodes[rightIndex]);
}
// Connect to bottom neighbor
if (y < GRID_SIZE - 1) {
const bottomIndex = x * GRID_SIZE + (y + 1);
createConnection(node, nodes[bottomIndex]);
}
});
}
// Create connection between two nodes
function createConnection(nodeA, nodeB) {
if (connections.length >= MAX_CONNECTIONS) return;
const connection = {
id: connections.length,
from: nodeA.id,
to: nodeB.id,
element: null
};
connections.push(connection);
nodeA.connections.push(nodeB.id);
nodeB.connections.push(nodeA.id);
updateConnectionElement(connection);
return connection;
}
// Update connection visual element
function updateConnectionElement(connection) {
// Remove existing element if any
if (connection.element) {
connection.element.remove();
}
const fromNode = nodes.find(n => n.id === connection.from);
const toNode = nodes.find(n => n.id === connection.to);
if (fromNode && toNode) {
const el = document.createElement('div');
el.className = 'grid-connection';
el.id = `connection-${connection.id}`;
const dx = toNode.x - fromNode.x;
const dy = toNode.y - fromNode.y;
const length = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
el.style.width = `${length}px`;
el.style.left = `${fromNode.x}px`;
el.style.top = `${fromNode.y}px`;
el.style.transform = `rotate(${angle}rad)`;
el.style.opacity = Math.min(0.7, 200 / length);
connectionsContainer.appendChild(el);
connection.element = el;
}
}
// Activate a node (show in terminal)
function activateNode(node) {
terminalIframe.src = node.site.url;
terminalHeader.textContent = `${node.site.title} [ACCESS GRANTED]`;
mainTerminal.classList.add('active');
// Highlight active node
nodes.forEach(n => {
if (n.element) n.element.classList.remove('active');
});
node.element.classList.add('active');
activeNode = node;
// Boost signal strength
currentSignal = Math.min(100, currentSignal + 10);
updateStats();
}
// Scan for nearby nodes
function scanNodes() {
if (!activeNode) return;
// Pulse effect from active node
const pulse = document.createElement('div');
pulse.style.position = 'absolute';
pulse.style.borderRadius = '50%';
pulse.style.border = `2px solid ${activeNode.site.color}`;
pulse.style.left = `${activeNode.x - PULSE_RADIUS}px`;
pulse.style.top = `${activeNode.y - PULSE_RADIUS}px`;
pulse.style.width = `${PULSE_RADIUS * 2}px`;
pulse.style.height = `${PULSE_RADIUS * 2}px`;
pulse.style.opacity = '0';
pulse.style.animation = 'pulseFade 1.5s forwards';
document.body.appendChild(pulse);
setTimeout(() => pulse.remove(), 1500);
// Highlight nodes in radius
nodes.forEach(node => {
if (node !== activeNode) {
const dx = node.x - activeNode.x;
const dy = node.y - activeNode.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < PULSE_RADIUS) {
node.element.style.animation = 'flicker 2s';
setTimeout(() => {
node.element.style.animation = '';
}, 2000);
}
}
});
// Drain signal strength
currentSignal = Math.max(20, currentSignal - 15);
updateStats();
}
// Send pulse through connections
function pulseConnections() {
if (!activeNode) return;
// Animate connections from active node
const pulseNodes = (nodeIds, delay) => {
nodeIds.forEach((nodeId, i) => {
setTimeout(() => {
const node = nodes.find(n => n.id === nodeId);
if (node) {
node.element.style.animation = 'flicker 0.5s';
setTimeout(() => {
node.element.style.animation = '';
}, 500);
// Continue pulsing through connections
if (node.connections.length > 0) {
setTimeout(() => {
pulseNodes(node.connections, 0);
}, 200);
}
}
}, i * 100 + delay);
});
};
pulseNodes(activeNode.connections, 0);
// Further drain signal
currentSignal = Math.max(10, currentSignal - 20);
updateStats();
}
// Regenerate grid
function regenerateGrid() {
// Randomize node positions
nodes.forEach(node => {
node.x = (Math.random() - 0.5) * (window.innerWidth - 400) + window.innerWidth/2;
node.y = (Math.random() - 0.5) * (window.innerHeight - 400) + window.innerHeight/2;
node.z = (Math.random() - 0.5) * 500;
node.element.style.left = `${node.x - 40}px`;
node.element.style.top = `${node.y - 40}px`;
node.element.style.transform = `translateZ(${node.z}px)`;
});
// Recreate connections
createGridConnections();
// Reset signal
currentSignal = 100;
updateStats();
}
// Update statistics
function updateStats() {
nodeCount.textContent = nodes.length;
connectionCount.textContent = connections.length;
signalStrength.textContent = `${currentSignal}%`;
}
// Clear the grid
function clearGrid() {
nodesContainer.innerHTML = '';
connectionsContainer.innerHTML = '';
nodes = [];
connections = [];
activeNode = null;
}
// Handle mouse drag to move grid
cyberCanvas.addEventListener('mousedown', (e) => {
isDragging = true;
lastX = e.clientX;
lastY = e.clientY;
});
window.addEventListener('mousemove', (e) => {
if (isDragging) {
const dx = e.clientX - lastX;
const dy = e.clientY - lastY;
gridOffset.x += dx;
gridOffset.y += dy;
nodes.forEach(node => {
node.element.style.left = `${parseInt(node.element.style.left) + dx}px`;
node.element.style.top = `${parseInt(node.element.style.top) + dy}px`;
});
connections.forEach(conn => {
if (conn.element) {
conn.element.style.left = `${parseInt(conn.element.style.left) + dx}px`;
conn.element.style.top = `${parseInt(conn.element.style.top) + dy}px`;
}
});
lastX = e.clientX;
lastY = e.clientY;
}
});
window.addEventListener('mouseup', () => {
isDragging = false;
});
// Close terminal when clicking outside
document.addEventListener('click', (e) => {
if (!mainTerminal.contains(e.target)) {
mainTerminal.classList.remove('active');
nodes.forEach(node => {
if (node.element) node.element.classList.remove('active');
});
activeNode = null;
}
});
// Event listeners
scanBtn.addEventListener('click', scanNodes);
pulseBtn.addEventListener('click', pulseConnections);
regenBtn.addEventListener('click', regenerateGrid);
// Handle window resize
window.addEventListener('resize', () => {
cyberCanvas.width = window.innerWidth;
cyberCanvas.height = window.innerHeight;
});
// Initialize
cyberCanvas.width = window.innerWidth;
cyberCanvas.height = window.innerHeight;
initCyberGrid();
// Background animation
function animateBackground() {
ctx.fillStyle = 'rgba(0, 5, 10, 0.05)';
ctx.fillRect(0, 0, cyberCanvas.width, cyberCanvas.height);
// Draw grid lines
ctx.strokeStyle = 'rgba(0, 100, 150, 0.03)';
ctx.lineWidth = 1;
const gridSize = 50;
for (let x = 0; x < cyberCanvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, cyberCanvas.height);
ctx.stroke();
}
for (let y = 0; y < cyberCanvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(cyberCanvas.width, y);
ctx.stroke();
}
// Draw random data points
ctx.fillStyle = 'rgba(0, 255, 255, 0.1)';
for (let i = 0; i < 20; i++) {
const x = Math.random() * cyberCanvas.width;
const y = Math.random() * cyberCanvas.height;
const size = Math.random() * 3;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(animateBackground);
}
animateBackground();
// Add CSS for pulse animation
const style = document.createElement('style');
style.textContent = `
@keyframes pulseFade {
0% { transform: scale(0.5); opacity: 0.8; }
100% { transform: scale(1); opacity: 0; }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
```
### Key Features of This Neon CyberGrid:
1. **Retro-Futuristic Grid Interface**:
- Websites as glowing nodes in a 3D cyberpunk grid
- Scanline and holographic visual effects
- Neon color scheme with pulsating animations
2. **Interactive Cyber Controls**:
- Scan for nearby nodes with radial pulse
- Send energy pulses through connections
- Regenerate the entire grid layout
- Drag to navigate the infinite grid
3. **Holographic Terminal**:
- Main display terminal with CRT effects
- Glowing borders and animated headers
- Perspective transforms for 3D feel
4. **Dynamic Network Behavior**:
- Nodes connected in a living grid
- Signal strength affects operations
- Energy pulses propagate through connections
5. **Visual Effects**:
- Glowing connections between nodes
- Particle pulse animations
- Flickering and scanline effects
- Depth perception through z-positioning
6. **System Stats Display**:
- Node and connection counts
- Signal strength meter
- Cyberpunk-style terminal headers
This implementation creates a completely unique cyberpunk-inspired browsing experience where websites exist as nodes in a vast digital cityscape. The retro-futuristic aesthetic combined with interactive network behaviors makes web exploration feel like hacking into a futuristic mainframe.
Additional features you could add:
- Cyberpunk sound effects
- Password/authentication sequences
- Data encryption/decryption animations
- Hacking mini-games
- Custom node creation
- Augmented reality integration
