Here's a **"Neural Network Web Explorer"** that visualizes websites as interconnected nodes in an artificial neural network that responds to your interactions:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neural Web Explorer</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #111;
font-family: 'Arial', sans-serif;
}
#neuralCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.neuron {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #3a0ca3, #1a1a6e);
box-shadow: 0 0 20px rgba(58, 12, 163, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 2;
transition: all 0.3s;
overflow: hidden;
}
.neuron.active {
box-shadow: 0 0 40px rgba(0, 255, 200, 0.9);
transform: scale(1.1);
z-index: 3;
}
.neuron-iframe {
width: 100%;
height: 100%;
border: none;
opacity: 0.3;
transition: opacity 0.3s;
}
.neuron.active .neuron-iframe {
opacity: 0.8;
}
#mainDisplay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 70vh;
background: rgba(20, 20, 40, 0.95);
border-radius: 15px;
box-shadow: 0 0 50px rgba(0, 200, 255, 0.6);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(0, 200, 255, 0.3);
}
#mainDisplay.active {
display: flex;
}
#mainIframe {
flex: 1;
border: none;
background: white;
}
#displayTitle {
padding: 15px;
background: linear-gradient(to right, #3a0ca3, #4361ee);
color: white;
text-align: center;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
}
#controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 20;
}
.control-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(30, 30, 70, 0.8);
border: 1px solid #4361ee;
color: #4cc9f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(67, 97, 238, 0.8);
transform: scale(1.1);
}
#neuralStats {
position: fixed;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
z-index: 20;
font-size: 12px;
}
.synapse {
position: absolute;
height: 2px;
background: linear-gradient(to right, rgba(67, 97, 238, 0.3), rgba(77, 144, 254, 0.7));
transform-origin: 0 0;
z-index: 1;
transition: all 0.3s;
}
.pulse {
position: absolute;
width: 10px;
height: 10px;
background: #4cc9f0;
border-radius: 50%;
filter: blur(2px);
z-index: 2;
opacity: 0;
}
@keyframes pulse {
0% { transform: scale(0.5); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
</style>
</head>
<body>
<canvas id="neuralCanvas"></canvas>
<div id="neuronsContainer">
<!-- Neurons will be added by JavaScript -->
</div>
<div id="synapsesContainer">
<!-- Synapses will be added by JavaScript -->
</div>
<div id="mainDisplay">
<div id="displayTitle">Neural Web Explorer</div>
<iframe id="mainIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="controls">
<div class="control-btn" id="addNeuronBtn">+</div>
<div class="control-btn" id="trainBtn">⚡</div>
<div class="control-btn" id="resetBtn">↻</div>
</div>
<div id="neuralStats">
Neurons: <span id="neuronCount">0</span> |
Synapses: <span id="synapseCount">0</span> |
Active: <span id="activeNeuron">None</span>
</div>
<script>
// Neural network parameters
const LAYER_COUNT = 3;
const NEURONS_PER_LAYER = 5;
const INITIAL_SYNAPSE_PROBABILITY = 0.3;
// Visual parameters
const PULSE_SPEED = 2;
const ACTIVATION_THRESHOLD = 0.7;
// Sites data
const sites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Advertica 13' },
{ url: 'https://advertica12.blogspot.com/', title: 'Advertica 12' },
{ url: 'https://advertica08.blogspot.com/', title: 'Advertica 08' },
{ url: 'https://advertica07.blogspot.com/', title: 'Advertica 07' },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop' },
{ url: 'https://advertica06.blogspot.com/', title: 'Advertica 06' },
{ url: 'https://advertica18.blogspot.com/', title: 'Advertica 18' },
{ url: 'https://advertica19.blogspot.com/', title: 'Advertica 19' }
];
// DOM elements
const neuralCanvas = document.getElementById('neuralCanvas');
const ctx = neuralCanvas.getContext('2d');
const neuronsContainer = document.getElementById('neuronsContainer');
const synapsesContainer = document.getElementById('synapsesContainer');
const mainDisplay = document.getElementById('mainDisplay');
const mainIframe = document.getElementById('mainIframe');
const displayTitle = document.getElementById('displayTitle');
const addNeuronBtn = document.getElementById('addNeuronBtn');
const trainBtn = document.getElementById('trainBtn');
const resetBtn = document.getElementById('resetBtn');
const neuronCount = document.getElementById('neuronCount');
const synapseCount = document.getElementById('synapseCount');
const activeNeuron = document.getElementById('activeNeuron');
// Neural network state
let neurons = [];
let synapses = [];
let pulses = [];
let activeNeuronId = null;
// Canvas setup
neuralCanvas.width = window.innerWidth;
neuralCanvas.height = window.innerHeight;
// Neuron class
class Neuron {
constructor(id, x, y, layer, url, title) {
this.id = id;
this.x = x;
this.y = y;
this.layer = layer;
this.url = url;
this.title = title;
this.activation = 0;
this.output = 0;
this.element = this.createDOMElement();
this.updatePosition();
}
createDOMElement() {
const el = document.createElement('div');
el.className = 'neuron';
el.id = `neuron-${this.id}`;
el.innerHTML = `
<iframe class="neuron-iframe" src="${this.url}"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
<div>${this.title}</div>
`;
el.addEventListener('click', () => this.activate());
neuronsContainer.appendChild(el);
return el;
}
updatePosition() {
this.element.style.left = `${this.x - 30}px`;
this.element.style.top = `${this.y - 30}px`;
}
activate() {
// Show in main display
mainIframe.src = this.url;
displayTitle.textContent = this.title;
mainDisplay.classList.add('active');
// Visual activation
neurons.forEach(n => n.element.classList.remove('active'));
this.element.classList.add('active');
activeNeuronId = this.id;
activeNeuron.textContent = this.title;
// Send pulse through outgoing synapses
this.sendPulse();
}
sendPulse() {
const outgoingSynapses = synapses.filter(s => s.from === this.id);
outgoingSynapses.forEach(synapse => {
const toNeuron = neurons.find(n => n.id === synapse.to);
if (toNeuron) {
this.createPulse(this.x, this.y, toNeuron.x, toNeuron.y);
// Random chance to activate connected neuron
if (Math.random() > 0.7) {
setTimeout(() => {
toNeuron.activate();
}, 300);
}
}
});
}
createPulse(fromX, fromY, toX, toY) {
const pulse = document.createElement('div');
pulse.className = 'pulse';
pulse.style.left = `${fromX - 5}px`;
pulse.style.top = `${fromY - 5}px`;
const angle = Math.atan2(toY - fromY, toX - fromX);
const distance = Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2));
document.body.appendChild(pulse);
let progress = 0;
const duration = distance / PULSE_SPEED;
const animatePulse = () => {
progress += 16; // Roughly 60fps
const ratio = progress / duration;
if (ratio >= 1) {
pulse.remove();
return;
}
pulse.style.left = `${fromX + (toX - fromX) * ratio - 5}px`;
pulse.style.top = `${fromY + (toY - fromY) * ratio - 5}px`;
pulse.style.opacity = 1 - ratio;
requestAnimationFrame(animatePulse);
};
animatePulse();
}
}
// Synapse class
class Synapse {
constructor(id, from, to, weight) {
this.id = id;
this.from = from;
this.to = to;
this.weight = weight;
this.element = this.createDOMElement();
this.updatePosition();
}
createDOMElement() {
const el = document.createElement('div');
el.className = 'synapse';
el.id = `synapse-${this.id}`;
synapsesContainer.appendChild(el);
return el;
}
updatePosition() {
const fromNeuron = neurons.find(n => n.id === this.from);
const toNeuron = neurons.find(n => n.id === this.to);
if (fromNeuron && toNeuron) {
const dx = toNeuron.x - fromNeuron.x;
const dy = toNeuron.y - fromNeuron.y;
const length = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
this.element.style.width = `${length}px`;
this.element.style.left = `${fromNeuron.x}px`;
this.element.style.top = `${fromNeuron.y}px`;
this.element.style.transform = `rotate(${angle}rad)`;
this.element.style.opacity = this.weight;
}
}
}
// Initialize neural network
function initNeuralNetwork() {
clearNetwork();
// Create neurons in layers
for (let layer = 0; layer < LAYER_COUNT; layer++) {
for (let i = 0; i < NEURONS_PER_LAYER; i++) {
const x = (layer + 1) * (window.innerWidth / (LAYER_COUNT + 1));
const y = (i + 1) * (window.innerHeight / (NEURONS_PER_LAYER + 1));
const siteIndex = (layer * NEURONS_PER_LAYER + i) % sites.length;
const site = sites[siteIndex];
neurons.push(new Neuron(
neurons.length,
x,
y,
layer,
site.url,
site.title
));
}
}
// Create random synapses
neurons.forEach(fromNeuron => {
neurons.forEach(toNeuron => {
if (fromNeuron !== toNeuron &&
toNeuron.layer > fromNeuron.layer &&
Math.random() < INITIAL_SYNAPSE_PROBABILITY) {
const weight = Math.random() * 0.5 + 0.3; // 0.3-0.8
synapses.push(new Synapse(
synapses.length,
fromNeuron.id,
toNeuron.id,
weight
));
}
});
});
updateStats();
}
// Add random neuron
function addRandomNeuron() {
const x = Math.random() * (window.innerWidth - 100) + 50;
const y = Math.random() * (window.innerHeight - 100) + 50;
const layer = Math.floor(Math.random() * LAYER_COUNT);
const site = sites[Math.floor(Math.random() * sites.length)];
const newNeuron = new Neuron(
neurons.length,
x,
y,
layer,
site.url,
site.title
);
neurons.push(newNeuron);
// Connect to existing neurons
neurons.forEach(neuron => {
if (neuron !== newNeuron) {
if ((neuron.layer < newNeuron.layer && Math.random() > 0.7) ||
(neuron.layer > newNeuron.layer && Math.random() > 0.7)) {
const weight = Math.random() * 0.5 + 0.3;
const from = neuron.layer < newNeuron.layer ? neuron.id : newNeuron.id;
const to = neuron.layer < newNeuron.layer ? newNeuron.id : neuron.id;
synapses.push(new Synapse(
synapses.length,
from,
to,
weight
));
}
}
});
updateStats();
}
// Train network (add/strengthen connections)
function trainNetwork() {
// Randomly add some new synapses
if (Math.random() > 0.5 && synapses.length < neurons.length * 3) {
const from = Math.floor(Math.random() * neurons.length);
const to = Math.floor(Math.random() * neurons.length);
if (from !== to && !synapses.find(s => s.from === from && s.to === to)) {
const weight = Math.random() * 0.5 + 0.3;
synapses.push(new Synapse(
synapses.length,
from,
to,
weight
));
}
}
// Strengthen some existing synapses
synapses.forEach(synapse => {
if (Math.random() > 0.8) {
synapse.weight = Math.min(1, synapse.weight + 0.1);
synapse.element.style.opacity = synapse.weight;
}
});
// Randomly activate a neuron
if (Math.random() > 0.7 && neurons.length > 0) {
const randomNeuron = neurons[Math.floor(Math.random() * neurons.length)];
randomNeuron.activate();
}
updateStats();
}
// Clear entire network
function clearNetwork() {
neuronsContainer.innerHTML = '';
synapsesContainer.innerHTML = '';
neurons = [];
synapses = [];
activeNeuronId = null;
activeNeuron.textContent = 'None';
}
// Update statistics display
function updateStats() {
neuronCount.textContent = neurons.length;
synapseCount.textContent = synapses.length;
}
// Update all synapse positions
function updateAllSynapses() {
synapses.forEach(synapse => synapse.updatePosition());
}
// Event listeners
addNeuronBtn.addEventListener('click', addRandomNeuron);
trainBtn.addEventListener('click', trainNetwork);
resetBtn.addEventListener('click', initNeuralNetwork);
// Close main display when clicking outside
document.addEventListener('click', (e) => {
if (!mainDisplay.contains(e.target) {
mainDisplay.classList.remove('active');
neurons.forEach(neuron => {
neuron.element.classList.remove('active');
});
activeNeuronId = null;
activeNeuron.textContent = 'None';
}
});
// Handle window resize
window.addEventListener('resize', () => {
neuralCanvas.width = window.innerWidth;
neuralCanvas.height = window.innerHeight;
updateAllSynapses();
});
// Initialize
initNeuralNetwork();
// Background animation
function animateBackground() {
ctx.fillStyle = 'rgba(10, 10, 20, 0.05)';
ctx.fillRect(0, 0, neuralCanvas.width, neuralCanvas.height);
// Draw faint grid
ctx.strokeStyle = 'rgba(60, 60, 100, 0.05)';
ctx.lineWidth = 1;
const gridSize = 50;
for (let x = 0; x < neuralCanvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, neuralCanvas.height);
ctx.stroke();
}
for (let y = 0; y < neuralCanvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(neuralCanvas.width, y);
ctx.stroke();
}
requestAnimationFrame(animateBackground);
}
animateBackground();
</script>
</body>
</html>
```
### Key Features of This Neural Network Explorer:
1. **Interactive Neural Network Visualization**:
- Websites represented as neurons in different layers
- Dynamic connections (synapses) between them
- Visual pulses that travel along connections
2. **Organic Navigation**:
- Click any neuron to view its website
- Activations propagate through the network
- Discover related sites through connections
3. **Dynamic Network Behavior**:
- "Train" button strengthens/creates connections
- Add new random neurons with websites
- Reset the entire network structure
4. **Visual Effects**:
- Glowing neuron nodes with live website previews
- Animated pulses traveling between connected nodes
- Semi-transparent synapse connections
- Dark futuristic interface with grid background
5. **Real-time Statistics**:
- Neuron and synapse counters
- Currently active website display
- Network evolves as you interact
This implementation creates a completely unique way to explore and discover websites by treating them as nodes in a living neural network. The organic connections and propagation of activations make web browsing feel more like exploring a living system than clicking static links.
Additional features you could add:
- Save/load network configurations
- Search functionality to find specific sites
- Custom website addition form
- Different network layout algorithms
- More advanced training/learning algorithms
- Sound effects for network activity
