Here's a **completely different type** of iframe implementation - a **"Holographic Floating Display"** with 3D perspective effects and interactive controls:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holographic Floating Iframe</title>
<style>
body {
margin: 0;
height: 100vh;
background: #000;
overflow: hidden;
perspective: 1000px;
font-family: 'Arial', sans-serif;
}
/* Holographic container */
.holographic-display {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(20deg) rotateX(10deg);
background: rgba(20, 20, 40, 0.7);
border-radius: 8px;
box-shadow: 0 0 30px rgba(0, 150, 255, 0.6),
inset 0 0 20px rgba(0, 200, 255, 0.3);
border: 1px solid rgba(0, 200, 255, 0.5);
overflow: hidden;
transition: all 0.5s ease;
z-index: 100;
display: flex;
flex-direction: column;
}
/* Holographic glow effect */
.holographic-display::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg,
rgba(0, 150, 255, 0.3),
rgba(0, 200, 255, 0.2),
rgba(0, 150, 255, 0.3));
border-radius: 12px;
z-index: -1;
filter: blur(15px);
animation: hologlow 3s infinite alternate;
}
@keyframes hologlow {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
/* Iframe styling */
.holographic-iframe {
flex: 1;
border: none;
background: rgba(0, 0, 0, 0.7);
}
/* Control panel */
.holo-controls {
display: flex;
justify-content: space-between;
padding: 10px;
background: rgba(0, 30, 60, 0.7);
border-top: 1px solid rgba(0, 200, 255, 0.3);
}
.holo-btn {
background: rgba(0, 100, 200, 0.3);
color: #0cf;
border: 1px solid rgba(0, 200, 255, 0.3);
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
transition: all 0.3s;
}
.holo-btn:hover {
background: rgba(0, 150, 255, 0.5);
box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}
/* Site selector */
.holo-selector {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 200;
}
.holo-site-btn {
width: 60px;
height: 40px;
background: rgba(0, 30, 60, 0.7);
border: 1px solid rgba(0, 200, 255, 0.3);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #0cf;
font-size: 10px;
transition: all 0.3s;
}
.holo-site-btn:hover {
background: rgba(0, 150, 255, 0.5);
box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}
/* Particle background */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.holographic-display {
width: 90vw;
height: 60vw;
}
.holo-selector {
flex-wrap: wrap;
justify-content: center;
width: 90vw;
}
}
</style>
</head>
<body>
<!-- Particle background -->
<canvas class="particles" id="particles"></canvas>
<!-- Holographic display -->
<div class="holographic-display" id="holoDisplay">
<iframe class="holographic-iframe" id="holoIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
<div class="holo-controls">
<button class="holo-btn" id="holoPrev">◄ Prev</button>
<button class="holo-btn" id="holoNext">Next ►</button>
<button class="holo-btn" id="holoClose">Close</button>
</div>
</div>
<!-- Site selector -->
<div class="holo-selector" id="holoSelector">
<!-- Sites will be added by JavaScript -->
</div>
<script>
// Sites data
const sites = [
{ url: 'https://advertica13.blogspot.com/', name: 'Site 1' },
{ url: 'https://advertica12.blogspot.com/', name: 'Site 2' },
{ url: 'https://advertica08.blogspot.com/', name: 'Site 3' },
{ url: 'https://advertica07.blogspot.com/', name: 'Site 4' },
{ url: 'https://advertica06.blogspot.com/', name: 'Site 5' },
{ url: 'https://www.softmod.shop/', name: 'Shop' }
];
// DOM elements
const holoDisplay = document.getElementById('holoDisplay');
const holoIframe = document.getElementById('holoIframe');
const holoPrev = document.getElementById('holoPrev');
const holoNext = document.getElementById('holoNext');
const holoClose = document.getElementById('holoClose');
const holoSelector = document.getElementById('holoSelector');
const particlesCanvas = document.getElementById('particles');
// State variables
let currentIndex = 0;
let isDragging = false;
let startX, startY, startLeft, startTop;
// Initialize the display
function initHolographicDisplay() {
createSiteButtons();
loadCurrentSite();
initParticles();
setupDrag();
}
// Create site selection buttons
function createSiteButtons() {
holoSelector.innerHTML = '';
sites.forEach((site, index) => {
const btn = document.createElement('div');
btn.className = 'holo-site-btn';
btn.textContent = site.name;
btn.addEventListener('click', () => {
currentIndex = index;
loadCurrentSite();
});
holoSelector.appendChild(btn);
});
}
// Load current site
function loadCurrentSite() {
if (currentIndex >= 0 && currentIndex < sites.length) {
holoIframe.src = sites[currentIndex].url;
}
}
// Load next site
function nextSite() {
currentIndex = (currentIndex + 1) % sites.length;
loadCurrentSite();
}
// Load previous site
function prevSite() {
currentIndex = (currentIndex - 1 + sites.length) % sites.length;
loadCurrentSite();
}
// Setup drag functionality
function setupDrag() {
holoDisplay.addEventListener('mousedown', (e) => {
if (e.target.className.includes('holo-btn')) return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startLeft = holoDisplay.offsetLeft;
startTop = holoDisplay.offsetTop;
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', stopDrag);
});
}
function handleDrag(e) {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
holoDisplay.style.left = `${startLeft + dx}px`;
holoDisplay.style.top = `${startTop + dy}px`;
holoDisplay.style.transform = `translate(0, 0) rotateY(20deg) rotateX(10deg)`;
}
function stopDrag() {
isDragging = false;
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('mouseup', stopDrag);
}
// Particle background
function initParticles() {
const canvas = particlesCanvas;
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const particleCount = 100;
// Create particles
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2 + 1,
speedX: Math.random() * 0.5 - 0.25,
speedY: Math.random() * 0.5 - 0.25,
color: `rgba(0, ${Math.floor(150 + Math.random() * 105)}, 255, ${Math.random() * 0.3 + 0.1})`
});
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
// Move particles
particle.x += particle.speedX;
particle.y += particle.speedY;
// Reset particles that go off screen
if (particle.x < 0 || particle.x > canvas.width ||
particle.y < 0 || particle.y > canvas.height) {
particle.x = Math.random() * canvas.width;
particle.y = Math.random() * canvas.height;
}
});
requestAnimationFrame(animate);
}
animate();
// Resize handler
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
}
// Event listeners
holoPrev.addEventListener('click', prevSite);
holoNext.addEventListener('click', nextSite);
holoClose.addEventListener('click', () => {
holoDisplay.style.display = 'none';
setTimeout(() => {
holoDisplay.style.display = 'flex';
}, 1000);
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextSite();
if (e.key === 'ArrowLeft') prevSite();
});
// Initialize
window.addEventListener('load', initHolographicDisplay);
</script>
</body>
</html>
```
### Key Features of This Holographic Display:
1. **3D Holographic Effect**:
- CSS 3D transforms create depth perspective
- Glowing blue borders with pulsing animation
- Semi-transparent display panel
2. **Interactive Particle Background**:
- Animated floating particles
- Creates depth and sci-fi atmosphere
- Responsive to window resizing
3. **Floating & Draggable**:
- Can be moved around the screen
- Maintains 3D perspective while moving
- Returns to center when closed and reopened
4. **Cyberpunk Styling**:
- Neon blue color scheme
- Glowing buttons and borders
- Futuristic typography
5. **Site Selection Panel**:
- Bottom-mounted site selector
- Glowing buttons for each site
- Clean labeling
6. **Responsive Design**:
- Adjusts for mobile screens
- Maintains aspect ratio
- Particles adapt to screen size
7. **Interactive Controls**:
- Previous/Next navigation
- Close/reopen functionality
- Keyboard arrow key support
This implementation creates a completely different user experience compared to traditional iframe implementations, perfect for:
- Tech demos
- Sci-fi themed websites
- Interactive displays
- Innovative web applications
- Gaming interfaces
The holographic effect is achieved purely with CSS animations and transforms, while the particle background uses canvas animation for performance. You can easily customize the colors, particle density, and site list to match your specific needs.
