Here's a **"Celestial Web Atlas"** - a cosmic interface where websites exist as stars in an interactive galaxy that you can navigate through gravitational slingshots, with constellations forming between related sites:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celestial Web Atlas</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
}
#starfield {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.celestial-star {
position: absolute;
border-radius: 50%;
cursor: pointer;
z-index: 2;
transition: all 0.5s ease-out;
transform-origin: center;
filter: drop-shadow(0 0 10px currentColor);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.celestial-star.active {
filter: drop-shadow(0 0 30px gold);
z-index: 3;
transform: scale(1.5);
}
.celestial-star .star-core {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0.7;
transition: opacity 0.3s;
background: radial-gradient(circle at 30% 30%, white, transparent 70%);
}
.celestial-star.active .star-core {
opacity: 0.9;
}
.celestial-star iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.star-label {
position: absolute;
bottom: -25px;
left: 0;
right: 0;
color: #7af;
text-align: center;
font-size: 11px;
text-shadow: 0 0 5px #000;
opacity: 0;
transition: opacity 0.3s;
}
.celestial-star:hover .star-label {
opacity: 1;
}
#observatory {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 70vh;
background: rgba(10, 15, 30, 0.95);
border-radius: 20px;
box-shadow: 0 0 80px rgba(100, 150, 255, 0.6);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
border: 2px solid #58a;
}
#observatory.active {
display: flex;
animation: observatoryPulse 4s infinite alternate;
}
@keyframes observatoryPulse {
0% { box-shadow: 0 0 80px rgba(100, 150, 255, 0.6); }
100% { box-shadow: 0 0 120px rgba(200, 220, 255, 0.9); }
}
#telescopeView {
flex: 1;
border: none;
background: #000;
}
#observatoryTitle {
padding: 15px;
background: linear-gradient(to right, #123, #234);
color: #adf;
text-align: center;
font-size: 16px;
letter-spacing: 1px;
}
#celestialControls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 20;
}
.celestial-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(20, 40, 80, 0.7);
border: 2px solid #58a;
color: #adf;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 0 20px rgba(100, 150, 255, 0.5);
transition: all 0.3s;
}
.celestial-btn:hover {
background: rgba(40, 80, 120, 0.8);
transform: scale(1.1);
box-shadow: 0 0 30px rgba(200, 220, 255, 0.7);
}
#celestialStats {
position: fixed;
top: 20px;
left: 20px;
color: #adf;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
z-index: 20;
font-size: 12px;
border: 1px solid #58a;
}
.constellation {
position: absolute;
height: 2px;
background: linear-gradient(to right,
rgba(100, 150, 255, 0.3),
rgba(200, 220, 255, 0.7));
transform-origin: 0 0;
z-index: 1;
transition: all 0.5s ease-out;
}
.gravity-well {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(100, 150, 255, 0.1), transparent 70%);
z-index: 0;
pointer-events: none;
display: none;
}
.comet {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
filter: blur(1px);
z-index: 4;
pointer-events: none;
opacity: 0;
}
@keyframes cometTail {
0% { opacity: 0; }
10% { opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
.nebula {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(100, 50, 150, 0.1), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(50, 100, 150, 0.1), transparent 50%);
z-index: 0;
pointer-events: none;
}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<div class="nebula"></div>
<div class="gravity-well" id="gravityWell"></div>
<div id="starsContainer">
<!-- Celestial stars will be added by JavaScript -->
</div>
<div id="constellationsContainer">
<!-- Constellations will be added by JavaScript -->
</div>
<div id="cometsContainer">
<!-- Comets will be added by JavaScript -->
</div>
<div id="observatory">
<div id="observatoryTitle">CELESTIAL OBSERVATORY</div>
<iframe id="telescopeView" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="celestialControls">
<div class="celestial-btn" id="slingshotBtn">🌌</div>
<div class="celestial-btn" id="newConstellationBtn">✨</div>
<div class="celestial-btn" id="shootCometBtn">☄️</div>
</div>
<div id="celestialStats">
Stars: <span id="starCount">0</span> |
Constellations: <span id="constellationCount">0</span> |
Gravity: <span id="gravityStrength">0%</span>
</div>
<script>
// Celestial parameters
const STAR_COUNT = 15;
const MAX_CONSTELLATIONS = 10;
const GRAVITY_STRENGTH = 0.1;
const SLINGSHOT_POWER = 5;
// Celestial sites with stellar properties
const celestialSites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Alpha Centauri', color: '#7af', type: 'star', mass: 1.2 },
{ url: 'https://advertica12.blogspot.com/', title: 'Sirius', color: '#fff', type: 'star', mass: 2.1 },
{ url: 'https://www.softmod.shop/', title: 'Orion Market', color: '#fa7', type: 'nebula', mass: 0.8 },
{ url: 'https://example.com/news', title: 'Pleiades News', color: '#aaf', type: 'cluster', mass: 1.5 },
{ url: 'https://example.com/forum', title: 'Andromeda Forum', color: '#f7a', type: 'galaxy', mass: 3.0 },
{ url: 'https://example.com/tech', title: 'Quantum Quasar', color: '#7fa', type: 'quasar', mass: 2.5 }
];
// DOM elements
const starfield = document.getElementById('starfield');
const ctx = starfield.getContext('2d');
const starsContainer = document.getElementById('starsContainer');
const constellationsContainer = document.getElementById('constellationsContainer');
const cometsContainer = document.getElementById('cometsContainer');
const observatory = document.getElementById('observatory');
const telescopeView = document.getElementById('telescopeView');
const observatoryTitle = document.getElementById('observatoryTitle');
const slingshotBtn = document.getElementById('slingshotBtn');
const newConstellationBtn = document.getElementById('newConstellationBtn');
const shootCometBtn = document.getElementById('shootCometBtn');
const starCount = document.getElementById('starCount');
const constellationCount = document.getElementById('constellationCount');
const gravityStrength = document.getElementById('gravityStrength');
const gravityWell = document.getElementById('gravityWell');
// Celestial state
let stars = [];
let constellations = [];
let activeStar = null;
let currentGravity = 0;
let isSlingshotActive = false;
let slingshotStartX, slingshotStartY;
// Initialize the starfield
function initStarfield() {
clearStarfield();
// Create stars
for (let i = 0; i < STAR_COUNT; i++) {
const x = Math.random() * (starfield.width - 200) + 100;
const y = Math.random() * (starfield.height - 200) + 100;
const site = celestialSites[i % celestialSites.length];
const size = 30 + site.mass * 20;
stars.push(createStar(
stars.length,
x,
y,
size,
site
));
}
// Create some initial constellations
createRandomConstellations(3);
updateStats();
}
// Clear the starfield
function clearStarfield() {
starsContainer.innerHTML = '';
constellationsContainer.innerHTML = '';
cometsContainer.innerHTML = '';
stars = [];
constellations = [];
activeStar = null;
}
// Create a star
function createStar(id, x, y, size, site) {
const star = {
id: id,
x: x,
y: y,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: size,
site: site,
element: null,
connections: []
};
const el = document.createElement('div');
el.className = 'celestial-star';
el.id = `star-${id}`;
el.style.width = `${size}px`;
el.style.height = `${size}px`;
el.style.left = `${x - size/2}px`;
el.style.top = `${y - size/2}px`;
el.style.color = site.color;
el.innerHTML = `
<div class="star-core">
<iframe src="${site.url}"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="star-label">${site.title}</div>
`;
el.addEventListener('click', (e) => {
e.stopPropagation();
activateStar(star);
});
starsContainer.appendChild(el);
star.element = el;
return star;
}
// Create random constellations
function createRandomConstellations(count) {
for (let i = 0; i < count && constellations.length < MAX_CONSTELLATIONS; i++) {
const starIndices = [];
// Get 3-5 random stars
const starCount = 3 + Math.floor(Math.random() * 3);
while (starIndices.length < starCount) {
const randomIndex = Math.floor(Math.random() * stars.length);
if (!starIndices.includes(randomIndex)) {
starIndices.push(randomIndex);
}
}
// Create connections between them
for (let j = 0; j < starIndices.length - 1; j++) {
createConstellation(stars[starIndices[j]], stars[starIndices[j + 1]]);
}
}
}
// Create constellation between two stars
function createConstellation(starA, starB) {
const exists = constellations.some(c =>
(c.from === starA.id && c.to === starB.id) ||
(c.from === starB.id && c.to === starA.id)
);
if (!exists) {
const constellation = {
id: constellations.length,
from: starA.id,
to: starB.id,
element: null
};
constellations.push(constellation);
starA.connections.push(starB.id);
starB.connections.push(starA.id);
updateConstellationElement(constellation);
}
}
// Update constellation visual element
function updateConstellationElement(constellation) {
// Remove existing element if any
if (constellation.element) {
constellation.element.remove();
}
const fromStar = stars.find(s => s.id === constellation.from);
const toStar = stars.find(s => s.id === constellation.to);
if (fromStar && toStar) {
const el = document.createElement('div');
el.className = 'constellation';
el.id = `constellation-${constellation.id}`;
const dx = toStar.x - fromStar.x;
const dy = toStar.y - fromStar.y;
const length = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
el.style.width = `${length}px`;
el.style.left = `${fromStar.x}px`;
el.style.top = `${fromStar.y}px`;
el.style.transform = `rotate(${angle}rad)`;
el.style.opacity = Math.min(0.7, 300 / length);
constellationsContainer.appendChild(el);
constellation.element = el;
}
}
// Activate a star (show in observatory)
function activateStar(star) {
telescopeView.src = star.site.url;
observatoryTitle.textContent = `${star.site.title} [OBSERVING]`;
observatory.classList.add('active');
// Highlight active star
stars.forEach(s => {
if (s.element) s.element.classList.remove('active');
});
star.element.classList.add('active');
activeStar = star;
// Increase gravity
currentGravity = Math.min(100, currentGravity + 15);
updateStats();
}
// Prepare gravity slingshot
function prepareSlingshot() {
if (!activeStar) return;
isSlingshotActive = true;
gravityWell.style.display = 'block';
gravityWell.style.left = `${activeStar.x - 150}px`;
gravityWell.style.top = `${activeStar.y - 150}px`;
// Track mouse for slingshot direction
document.addEventListener('mousemove', updateSlingshot);
document.addEventListener('mouseup', executeSlingshot);
}
// Update slingshot direction
function updateSlingshot(e) {
if (!isSlingshotActive || !activeStar) return;
const dx = e.clientX - activeStar.x;
const dy = e.clientY - activeStar.y;
const angle = Math.atan2(dy, dx);
const power = Math.min(200, Math.sqrt(dx * dx + dy * dy)) / 20;
// Visualize slingshot
ctx.clearRect(0, 0, starfield.width, starfield.height);
ctx.strokeStyle = `rgba(255, 255, 255, ${power/10})`;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(activeStar.x, activeStar.y);
ctx.lineTo(
activeStar.x - Math.cos(angle) * power * 15,
activeStar.y - Math.sin(angle) * power * 15
);
ctx.stroke();
}
// Execute slingshot maneuver
function executeSlingshot(e) {
if (!isSlingshotActive || !activeStar) return;
isSlingshotActive = false;
gravityWell.style.display = 'none';
ctx.clearRect(0, 0, starfield.width, starfield.height);
// Calculate slingshot vector
const dx = e.clientX - activeStar.x;
const dy = e.clientY - activeStar.y;
const angle = Math.atan2(dy, dx);
const power = Math.min(SLINGSHOT_POWER, Math.sqrt(dx * dx + dy * dy) / 100);
// Apply velocity to all stars (gravity slingshot)
stars.forEach(star => {
const starDx = star.x - activeStar.x;
const starDy = star.y - activeStar.y;
const distance = Math.sqrt(starDx * starDx + starDy * starDy);
if (distance > 0) {
const gravity = (GRAVITY_STRENGTH * activeStar.size * star.size) / (distance * distance);
star.vx += -Math.cos(angle) * power * gravity;
star.vy += -Math.sin(angle) * power * gravity;
}
});
// Reset gravity
currentGravity = 0;
updateStats();
// Remove event listeners
document.removeEventListener('mousemove', updateSlingshot);
document.removeEventListener('mouseup', executeSlingshot);
}
// Shoot a comet from active star
function shootComet() {
if (!activeStar) return;
const comet = document.createElement('div');
comet.className = 'comet';
comet.style.left = `${activeStar.x - 5}px`;
comet.style.top = `${activeStar.y - 5}px`;
comet.style.color = activeStar.site.color;
// Random direction
const angle = Math.random() * Math.PI * 2;
const distance = 500 + Math.random() * 500;
comet.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
comet.style.setProperty('--ty', `${Math.sin(angle) * distance}px`);
cometsContainer.appendChild(comet);
setTimeout(() => {
comet.style.animation = 'cometTail 2s forwards';
setTimeout(() => comet.remove(), 2000);
}, 10);
// Connect to a random star along the path
setTimeout(() => {
const potentialTargets = stars.filter(s => {
const dx = s.x - activeStar.x;
const dy = s.y - activeStar.y;
const starAngle = Math.atan2(dy, dx);
return Math.abs(starAngle - angle) < 0.3;
});
if (potentialTargets.length > 0) {
const target = potentialTargets[Math.floor(Math.random() * potentialTargets.length)];
createConstellation(activeStar, target);
}
}, 1000);
}
// Update statistics
function updateStats() {
starCount.textContent = stars.length;
constellationCount.textContent = constellations.length;
gravityStrength.textContent = `${currentGravity}%`;
}
// Simulation loop
function simulateStarfield() {
// Update star positions
stars.forEach(star => {
// Apply gravity toward center
const centerDx = starfield.width/2 - star.x;
const centerDy = starfield.height/2 - star.y;
const centerDist = Math.sqrt(centerDx * centerDx + centerDy * centerDy);
if (centerDist > 0) {
const centerGravity = (GRAVITY_STRENGTH * 0.1) / centerDist;
star.vx += centerDx * centerGravity;
star.vy += centerDy * centerGravity;
}
// Apply gravity between stars
stars.forEach(otherStar => {
if (otherStar !== star) {
const dx = otherStar.x - star.x;
const dy = otherStar.y - star.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 0) {
const gravity = (GRAVITY_STRENGTH * star.size * otherStar.size * 0.001) / (distance * distance);
star.vx += dx * gravity;
star.vy += dy * gravity;
}
}
});
// Update position
star.x += star.vx;
star.y += star.vy;
// Boundary checks with bounce
if (star.x < star.size/2) {
star.x = star.size/2;
star.vx *= -0.8;
}
if (star.x > starfield.width - star.size/2) {
star.x = starfield.width - star.size/2;
star.vx *= -0.8;
}
if (star.y < star.size/2) {
star.y = star.size/2;
star.vy *= -0.8;
}
if (star.y > starfield.height - star.size/2) {
star.y = starfield.height - star.size/2;
star.vy *= -0.8;
}
// Update DOM position
if (star.element) {
star.element.style.left = `${star.x - star.size/2}px`;
star.element.style.top = `${star.y - star.size/2}px`;
}
});
// Update constellation positions
constellations.forEach(updateConstellationElement);
// Gradually decrease gravity
currentGravity = Math.max(0, currentGravity - 0.5);
updateStats();
requestAnimationFrame(simulateStarfield);
}
// Event listeners
slingshotBtn.addEventListener('mousedown', prepareSlingshot);
newConstellationBtn.addEventListener('click', () => createRandomConstellations(1));
shootCometBtn.addEventListener('click', shootComet);
// Close observatory when clicking outside
document.addEventListener('click', (e) => {
if (!observatory.contains(e.target)) {
observatory.classList.remove('active');
stars.forEach(star => {
if (star.element) star.element.classList.remove('active');
});
activeStar = null;
}
});
// Handle window resize
window.addEventListener('resize', () => {
starfield.width = window.innerWidth;
starfield.height = window.innerHeight;
});
// Initialize
starfield.width = window.innerWidth;
starfield.height = window.innerHeight;
initStarfield();
simulateStarfield();
// Background animation
function animateBackground() {
ctx.fillStyle = 'rgba(0, 5, 15, 0.05)';
ctx.fillRect(0, 0, starfield.width, starfield.height);
// Draw distant stars
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
for (let i = 0; i < 100; i++) {
const x = Math.random() * starfield.width;
const y = Math.random() * starfield.height;
const size = Math.random() * 1.5;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(animateBackground);
}
animateBackground();
</script>
</body>
</html>
```
### Key Features of This Celestial Web Atlas:
1. **Interactive Cosmic Interface**:
- Websites as stars in a living galaxy
- Realistic gravitational physics between celestial bodies
- Nebula background with distant stars
2. **Astronomical Navigation**:
- Gravity slingshot propulsion between sites
- Comet trails that create new connections
- Constellations form between related sites
3. **Observatory View**:
- Main observation deck for focused browsing
- Animated transitions and glowing effects
- Real-time tracking of celestial movements
4. **Dynamic Star Systems**:
- Stars attract each other based on mass
- Momentum conservation through collisions
- Boundary bounces with energy loss
5. **Visual Effects**:
- Glowing stars with iframe cores
- Constellation links between sites
- Comet trails with particle effects
- Nebula cloud background
6. **System Statistics**:
- Star and constellation counts
- Current gravity strength
- Observatory tracking data
This implementation creates a completely unique astronomical browsing experience where navigating websites feels like traveling through a living galaxy. The gravitational physics and celestial metaphors provide an intuitive way to explore how sites relate to each other in the vastness of the web cosmos.
Additional features you could add:
- Black holes as bookmarks
- Planetary systems for site categories
- Supernova events for trending sites
- Asteroid belts for related links
- Space station hub for favorites
- Cosmic background radiation effects
