Code de canay corrigé

324 alejandro.diazcanay

Ouvrir dans l'éditeur Publiez votre code

Recommandé

7 August 2025

Masquer Div en cliquant sur le bouton : démarrer l'animation

15 July 2025

Exemple de formulaire de connexion animé HTML

2 February 2026

n-gon : Jeu de physique à défilement latéral Matter.js

HTML

<!DOCTYPE html>
<html>
<head>
    <title>UGS Files - No Redirect</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #2e3244 0%, #36224b 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            overflow-x: hidden;
        }

/* --- ESTILOS SIDEBAR (TUS ORIGINALES) --- */
        .sidebar {
            position: fixed;
            left: 0; top: 0; width: 80px; height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 1000;
        }

.main-content { margin-left: 100px; flex: 1; padding: 20px; }

/* --- EL CONTENEDOR DEL JUEGO (EL TRUCO) --- */
        #game-container {
            display: none; /* Oculto por defecto */
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: #000;
            z-index: 9999;
        }

#game-frame {
            width: 100%; height: 100%;
            border: none;
        }

.close-game {
            position: absolute;
            top: 10px; right: 20px;
            background: red; color: white;
            border: none; padding: 10px 15px;
            cursor: pointer; font-weight: bold;
            border-radius: 5px;
            z-index: 10000;
        }

/* Estilos de botones que genera el script */
        input[type="button"] {
            background: rgb(89, 134, 218);
            border: none; padding: 15px;
            margin: 5px; color: white;
            border-radius: 8px; cursor: pointer;
            width: 100%; max-width: 400px;
        }
    </style>
</head>
<body>

<div class="main-content">
        <h1 style="color: white; text-align: center;">UGS Files</h1>
        <div id="sections-container"></div>
    </div>

<div id="game-container">
        <button class="close-game" onclick="closeGame()">CERRAR JUEGO (ESC)</button>
        <iframe id="game-frame" src=""></iframe>
    </div>

// Extraer la URL (lo que está entre comillas simples o dobles)
                    const urlMatch = originalOnClick.match(/'([^']+)'/) || originalOnClick.match(/"([^"]+)"/);
                    
                    if (urlMatch && urlMatch[1]) {
                        openGameInIframe(urlMatch[1]);
                    }
                }
            }
        }, true);

function openGameInIframe(url) {
            const container = document.getElementById('game-container');
            const frame = document.getElementById('game-frame');
            
            frame.src = url;
            container.style.display = 'block';
            document.body.style.overflow = 'hidden'; // Bloquear scroll
        }

function closeGame() {
            const container = document.getElementById('game-container');
            const frame = document.getElementById('game-frame');
            
            frame.src = ''; // Limpiar el juego para que no siga sonando
            container.style.display = 'none';
            document.body.style.overflow = 'auto'; // Devolver scroll
        }

// Cerrar con la tecla Escape
        document.addEventListener('keydown', (e) => {
            if (e.key === "Escape") closeGame();
        });
    </script>
</body>
</html>

CSS