Here's a **radically different approach** - a **"Radial Carousel"** iframe viewer where sites orbit around a central point and can be selected by rotating the carousel:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orbital Iframe Carousel</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: #121212;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
font-family: 'Arial', sans-serif;
}
/* Central display */
.central-display {
position: absolute;
width: 60%;
height: 60%;
max-width: 600px;
max-height: 400px;
background: rgba(20, 20, 40, 0.9);
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 150, 255, 0.5);
z-index: 100;
display: flex;
flex-direction: column;
overflow: hidden;
}
.central-iframe {
flex: 1;
border: none;
background: black;
}
.central-title {
padding: 10px;
background: rgba(0, 30, 60, 0.7);
color: #0cf;
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Orbital items */
.orbital-container {
position: relative;
width: 100vw;
height: 100vh;
}
.orbital-item {
position: absolute;
width: 150px;
height: 100px;
background: rgba(30, 30, 60, 0.7);
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 150, 255, 0.3);
border: 1px solid rgba(0, 200, 255, 0.3);
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease-out;
transform-style: preserve-3d;
}
.orbital-item iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.orbital-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 30, 60, 0.7);
color: #0cf;
font-size: 10px;
text-align: center;
padding: 3px;
}
/* Controls */
.controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 200;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 30, 60, 0.7);
border: 1px solid rgba(0, 200, 255, 0.3);
color: #0cf;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
box-shadow: 0 0 10px rgba(0, 150, 255, 0.3);
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(0, 150, 255, 0.5);
box-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
}
/* Animation */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Responsive */
@media (max-width: 768px) {
.central-display {
width: 90%;
height: 50%;
}
.orbital-item {
width: 120px;
height: 80px;
}
}
</style>
</head>
<body>
<!-- Central display -->
<div class="central-display">
<div class="central-title" id="centralTitle">Select a Site</div>
<iframe class="central-iframe" id="centralIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<!-- Orbital container -->
<div class="orbital-container" id="orbitalContainer">
<!-- Orbital items will be added by JavaScript -->
</div>
<!-- Controls -->
<div class="controls">
<div class="control-btn" id="rotateLeft">◄</div>
<div class="control-btn" id="rotateRight">►</div>
<div class="control-btn" id="spinFast">⏩</div>
</div>
<script>
// 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://advertica06.blogspot.com/', title: 'Advertica 06' },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop' },
{ url: 'https://advertica18.blogspot.com/', title: 'Advertica 18' },
{ url: 'https://advertica19.blogspot.com/', title: 'Advertica 19' }
];
// DOM elements
const centralIframe = document.getElementById('centralIframe');
const centralTitle = document.getElementById('centralTitle');
const orbitalContainer = document.getElementById('orbitalContainer');
const rotateLeft = document.getElementById('rotateLeft');
const rotateRight = document.getElementById('rotateRight');
const spinFast = document.getElementById('spinFast');
// State variables
let currentAngle = 0;
let selectedIndex = 0;
let orbitalItems = [];
let isSpinning = false;
const radius = Math.min(window.innerWidth, window.innerHeight) * 0.4;
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// Initialize the carousel
function initCarousel() {
createOrbitalItems();
positionItems();
loadSelectedSite();
}
// Create orbital items
function createOrbitalItems() {
orbitalContainer.innerHTML = '';
orbitalItems = [];
sites.forEach((site, index) => {
const item = document.createElement('div');
item.className = 'orbital-item';
item.innerHTML = `
<iframe src="${site.url}" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
<div class="orbital-label">${site.title}</div>
`;
item.addEventListener('click', () => {
selectedIndex = index;
loadSelectedSite();
});
orbitalContainer.appendChild(item);
orbitalItems.push(item);
});
}
// Position items in orbit
function positionItems() {
const angleStep = (Math.PI * 2) / orbitalItems.length;
orbitalItems.forEach((item, index) => {
const angle = currentAngle + angleStep * index;
const x = centerX + Math.cos(angle) * radius - 75;
const y = centerY + Math.sin(angle) * radius - 50;
const scale = 0.7 + Math.abs(Math.cos(angle)) * 0.3;
const z = Math.cos(angle) * 100;
const opacity = 0.5 + Math.abs(Math.cos(angle)) * 0.5;
item.style.left = `${x}px`;
item.style.top = `${y}px`;
item.style.transform = `scale(${scale}) translateZ(${z}px)`;
item.style.opacity = opacity;
item.style.zIndex = Math.floor(z) + 100;
});
}
// Load selected site
function loadSelectedSite() {
centralIframe.src = sites[selectedIndex].url;
centralTitle.textContent = sites[selectedIndex].title;
// Highlight selected orbital item
orbitalItems.forEach((item, index) => {
if (index === selectedIndex) {
item.style.boxShadow = '0 0 25px rgba(0, 200, 255, 0.7)';
item.style.animation = 'float 3s ease-in-out infinite';
} else {
item.style.boxShadow = '0 0 15px rgba(0, 150, 255, 0.3)';
item.style.animation = 'none';
}
});
}
// Rotate carousel
function rotate(angleIncrement) {
currentAngle += angleIncrement;
positionItems();
// Find which item is front and center
const angleStep = (Math.PI * 2) / orbitalItems.length;
let closestIndex = 0;
let smallestDiff = Math.PI * 2;
orbitalItems.forEach((item, index) => {
const angle = (currentAngle + angleStep * index) % (Math.PI * 2);
const diff = Math.abs(angle);
if (diff < smallestDiff) {
smallestDiff = diff;
closestIndex = index;
}
});
selectedIndex = closestIndex;
loadSelectedSite();
}
// Fast spin animation
function startFastSpin() {
if (isSpinning) return;
isSpinning = true;
let spinCount = 0;
const maxSpins = 3;
const spinInterval = setInterval(() => {
currentAngle += 0.1;
positionItems();
spinCount += 0.1;
if (spinCount >= maxSpins * Math.PI * 2) {
clearInterval(spinInterval);
isSpinning = false;
// Snap to nearest item
const angleStep = (Math.PI * 2) / orbitalItems.length;
currentAngle = Math.round(currentAngle / angleStep) * angleStep;
positionItems();
loadSelectedSite();
}
}, 16);
}
// Event listeners
rotateLeft.addEventListener('click', () => rotate(-Math.PI / 4));
rotateRight.addEventListener('click', () => rotate(Math.PI / 4));
spinFast.addEventListener('click', startFastSpin);
// Keyboard controls
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') rotate(-Math.PI / 4);
if (e.key === 'ArrowRight') rotate(Math.PI / 4);
if (e.key === ' ') startFastSpin();
});
// Handle window resize
window.addEventListener('resize', () => {
centerX = window.innerWidth / 2;
centerY = window.innerHeight / 2;
radius = Math.min(window.innerWidth, window.innerHeight) * 0.4;
positionItems();
});
// Initialize
window.addEventListener('load', initCarousel);
</script>
</body>
</html>
```
### Key Features of This Orbital Carousel:
1. **3D Orbital Navigation**:
- Websites orbit around the central display
- Depth perception with scaling and z-positioning
- Items in front are larger and more opaque
2. **Interactive Controls**:
- Rotate left/right buttons
- Fast spin animation
- Keyboard controls (arrow keys and spacebar)
3. **Central Display**:
- Main viewing area for selected site
- Shows currently focused website
- Title display for current selection
4. **Visual Effects**:
- Floating animation for selected item
- Glowing borders and shadows
- Smooth transitions between positions
5. **Responsive Design**:
- Adapts to different screen sizes
- Adjusts orbital radius based on viewport
- Mobile-friendly controls
6. **Dynamic Selection**:
- Automatically detects front-most item
- Updates central display when selection changes
- Visual feedback for selected item
This implementation creates an immersive, game-like interface for browsing multiple websites that's completely different from traditional iframe implementations. The orbital mechanic provides an intuitive spatial relationship between sites while keeping the main focus on the central display.
Additional features you could add:
- Touch swipe controls for mobile
- Search functionality to find specific sites
- Customizable orbits (change radius or shape)
- Sound effects for interactions
- Theming options (colors, shapes, etc.)
