Here's a **completely unique "Gravity Web" iframe viewer** where websites float like celestial bodies in a physics simulation that you can interact with:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gravity Web Explorer</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
}
#gravityCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.web-body {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 150, 255, 0.7);
transition: box-shadow 0.3s;
overflow: hidden;
cursor: pointer;
z-index: 2;
}
.web-body iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.web-body.active {
box-shadow: 0 0 40px rgba(0, 255, 150, 0.9);
z-index: 3;
}
.web-body .label {
position: absolute;
bottom: -25px;
left: 0;
right: 0;
color: #0cf;
text-align: center;
font-size: 12px;
text-shadow: 0 0 5px #000;
}
#mainDisplay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
height: 60vh;
max-width: 900px;
background: rgba(10, 20, 30, 0.9);
border-radius: 10px;
box-shadow: 0 0 40px rgba(0, 100, 255, 0.6);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
}
#mainDisplay.active {
display: flex;
}
#mainIframe {
flex: 1;
border: none;
background: #000;
}
#displayTitle {
padding: 10px;
background: rgba(0, 50, 100, 0.7);
color: #0ff;
text-align: center;
font-size: 14px;
}
#controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 20;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 50, 100, 0.7);
border: 1px solid #0cf;
color: #0ff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
box-shadow: 0 0 15px rgba(0, 200, 255, 0.5);
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(0, 150, 255, 0.7);
transform: scale(1.1);
}
#gravityControl {
position: fixed;
top: 20px;
right: 20px;
z-index: 20;
color: white;
background: rgba(0, 50, 100, 0.7);
padding: 10px;
border-radius: 5px;
border: 1px solid #0cf;
}
</style>
</head>
<body>
<canvas id="gravityCanvas"></canvas>
<div id="mainDisplay">
<div id="displayTitle">Website Viewer</div>
<iframe id="mainIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="controls">
<div class="control-btn" id="addSiteBtn">+</div>
<div class="control-btn" id="resetBtn">↻</div>
<div class="control-btn" id="centerBtn">⊙</div>
</div>
<div id="gravityControl">
Gravity: <input type="range" id="gravitySlider" min="0" max="200" value="100">
</div>
<script>
// Physics constants
const GRAVITY_CONSTANT = 6.67430e-11;
let GRAVITY_SCALE = 0.0001;
let DAMPING = 0.98;
// Canvas setup
const canvas = document.getElementById('gravityCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Web bodies collection
const webBodies = [];
const sites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Advertica 13', mass: 5000000 },
{ url: 'https://advertica12.blogspot.com/', title: 'Advertica 12', mass: 4000000 },
{ url: 'https://advertica08.blogspot.com/', title: 'Advertica 08', mass: 6000000 },
{ url: 'https://advertica07.blogspot.com/', title: 'Advertica 07', mass: 3000000 },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop', mass: 8000000 }
];
// DOM elements
const mainDisplay = document.getElementById('mainDisplay');
const mainIframe = document.getElementById('mainIframe');
const displayTitle = document.getElementById('displayTitle');
const addSiteBtn = document.getElementById('addSiteBtn');
const resetBtn = document.getElementById('resetBtn');
const centerBtn = document.getElementById('centerBtn');
const gravitySlider = document.getElementById('gravitySlider');
// Physics body class
class WebBody {
constructor(x, y, mass, url, title) {
this.x = x;
this.y = y;
this.mass = mass;
this.radius = Math.cbrt(mass) / 20;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.url = url;
this.title = title;
this.element = this.createDOMElement();
this.updatePosition();
}
createDOMElement() {
const el = document.createElement('div');
el.className = 'web-body';
el.style.width = `${this.radius * 2}px`;
el.style.height = `${this.radius * 2}px`;
const iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-forms";
const label = document.createElement('div');
label.className = 'label';
label.textContent = this.title;
el.appendChild(iframe);
el.appendChild(label);
document.body.appendChild(el);
el.addEventListener('click', () => this.showInMainDisplay());
return el;
}
updatePosition() {
this.element.style.left = `${this.x - this.radius}px`;
this.element.style.top = `${this.y - this.radius}px`;
}
applyForce(fx, fy, dt) {
const ax = fx / this.mass;
const ay = fy / this.mass;
this.vx += ax * dt;
this.vy += ay * dt;
this.vx *= DAMPING;
this.vy *= DAMPING;
this.x += this.vx * dt;
this.y += this.vy * dt;
// Boundary checks
if (this.x < this.radius) {
this.x = this.radius;
this.vx *= -0.8;
}
if (this.x > canvas.width - this.radius) {
this.x = canvas.width - this.radius;
this.vx *= -0.8;
}
if (this.y < this.radius) {
this.y = this.radius;
this.vy *= -0.8;
}
if (this.y > canvas.height - this.radius) {
this.y = canvas.height - this.radius;
this.vy *= -0.8;
}
this.updatePosition();
}
showInMainDisplay() {
mainIframe.src = this.url;
displayTitle.textContent = this.title;
mainDisplay.classList.add('active');
// Highlight this body
webBodies.forEach(body => {
body.element.classList.remove('active');
});
this.element.classList.add('active');
}
}
// Initialize web bodies
function initWebBodies() {
sites.forEach(site => {
const x = Math.random() * (canvas.width - 200) + 100;
const y = Math.random() * (canvas.height - 200) + 100;
webBodies.push(new WebBody(x, y, site.mass, site.url, site.title));
});
}
// Physics simulation
function simulateGravity() {
const dt = 0.016; // Approximate 60fps
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw gravitational field lines
ctx.strokeStyle = 'rgba(0, 150, 255, 0.1)';
ctx.lineWidth = 1;
// Calculate forces and update positions
for (let i = 0; i < webBodies.length; i++) {
let fx = 0;
let fy = 0;
for (let j = 0; j < webBodies.length; j++) {
if (i === j) continue;
const bodyA = webBodies[i];
const bodyB = webBodies[j];
// Calculate distance
const dx = bodyB.x - bodyA.x;
const dy = bodyB.y - bodyA.y;
const dist = Math.sqrt(dx * dx + dy * dy);
const minDist = bodyA.radius + bodyB.radius;
// Draw field lines between close bodies
if (dist < 300) {
ctx.beginPath();
ctx.moveTo(bodyA.x, bodyA.y);
ctx.lineTo(bodyB.x, bodyB.y);
ctx.stroke();
}
// Calculate gravitational force
if (dist > minDist) {
const f = GRAVITY_CONSTANT * bodyA.mass * bodyB.mass * GRAVITY_SCALE / (dist * dist);
fx += f * dx / dist;
fy += f * dy / dist;
} else {
// Collision response (simple bounce)
const overlap = minDist - dist;
const nx = dx / dist;
const ny = dy / dist;
fx -= nx * overlap * 0.1;
fy -= ny * overlap * 0.1;
}
}
webBodies[i].applyForce(fx, fy, dt);
}
requestAnimationFrame(simulateGravity);
}
// Add random site
function addRandomSite() {
const x = Math.random() * (canvas.width - 200) + 100;
const y = Math.random() * (canvas.height - 200) + 100;
const mass = Math.random() * 5000000 + 2000000;
const url = `https://example.com?rnd=${Math.floor(Math.random() * 1000)}`;
const title = `Site ${webBodies.length + 1}`;
webBodies.push(new WebBody(x, y, mass, url, title));
}
// Reset simulation
function resetSimulation() {
webBodies.forEach(body => {
document.body.removeChild(body.element);
});
webBodies.length = 0;
initWebBodies();
}
// Center on main display
function centerOnMainDisplay() {
if (!mainDisplay.classList.contains('active')) return;
const activeBody = webBodies.find(body =>
body.element.classList.contains('active')
);
if (activeBody) {
// Apply force to all bodies to center the active one
const targetX = canvas.width / 2;
const targetY = canvas.height / 2;
const dx = targetX - activeBody.x;
const dy = targetY - activeBody.y;
webBodies.forEach(body => {
body.x += dx;
body.y += dy;
body.updatePosition();
});
}
}
// Event listeners
addSiteBtn.addEventListener('click', addRandomSite);
resetBtn.addEventListener('click', resetSimulation);
centerBtn.addEventListener('click', centerOnMainDisplay);
gravitySlider.addEventListener('input', (e) => {
GRAVITY_SCALE = e.target.value / 100000;
});
// Close main display when clicking outside
document.addEventListener('click', (e) => {
if (!mainDisplay.contains(e.target) {
mainDisplay.classList.remove('active');
webBodies.forEach(body => {
body.element.classList.remove('active');
});
}
});
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Initialize
initWebBodies();
simulateGravity();
</script>
</body>
</html>
```
### Key Features of This Gravity Web Explorer:
1. **Physics-Based Simulation**:
- Websites behave like celestial bodies with mass and gravity
- Realistic gravitational attraction between sites
- Collision detection and response
2. **Interactive Galaxy**:
- Click on any website to view it in the main display
- Add new random sites with the + button
- Reset the entire simulation
- Center view on selected site
3. **Visual Effects**:
- Gravitational field lines between close bodies
- Glowing borders and shadows
- Size corresponds to "mass" of each site
- Animated movement with velocity and damping
4. **Dynamic Controls**:
- Adjustable gravity slider
- Main display that shows selected site
- Title labels for each web body
5. **Responsive Design**:
- Adapts to window resizing
- Works on different screen sizes
- Touch-friendly controls
This implementation creates an entirely unique way to browse and interact with multiple websites. The physics simulation makes the experience feel organic and dynamic, with websites constantly moving and influencing each other through gravitational forces.
Additional features you could add:
- Custom site addition with URL input
- Different "themes" for the web bodies
- Sound effects for collisions
- Bookmarks/favorites system
- Search functionality to locate specific sites
- Cluster formation algorithms
