HTML Editor

Edita código
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentación de Juegos Retro</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
            overflow: hidden;
        }
        .presentation {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #1a1a1a;
            color: white;
        }
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            opacity: 0;
            transition: all 0.5s ease-in-out;
        }
        .slide.active {
            opacity: 1;
            z-index: 1;
        }
        .slide h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            text-align: center;
        }
        .slide p {
            font-size: 1.2em;
            max-width: 800px;
            text-align: center;
            margin-bottom: 20px;
        }
        .slide img {
            max-width: 60%;
            max-height: 50%;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
        }
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 1.5em;
            border-radius: 50%;
            z-index: 2;
        }
        .nav-button:hover {
            background-color: rgba(255,255,255,0.3);
        }
        #prevBtn {
            left: 20px;
        }
        #nextBtn {
            right: 20px;
        }
        .indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 2;
        }
        .indicator {
            width: 12px;
            height: 12px;
            background-color: rgba(255,255,255,0.3);
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        .indicator.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="presentation">
        <div class="slide active">
            <h2>La Era Dorada de los Juegos Retro</h2>
            <p>Breve introducción sobre qué son los juegos retro, su importancia en la historia de los videojuegos, y un vistazo a las décadas más influyentes (70s, 80s, 90s).</p>
            <img src="images/1.jpg" alt="Juegos Retro">
        </div>
        <div class="slide">
            <h2>De Atari a Nintendo: La Evolución de las Consolas</h2>
            <p>Historia de las primeras consolas de videojuegos, como Atari 2600, NES, y Sega Genesis.</p>
            <img src="images/2.jpg" alt="Consolas Retro">
        </div>
        <div class="slide">
            <h2>Los Reyes del Arcade</h2>
            <p>Información sobre los juegos de arcade más influyentes, como Pac-Man, Space Invaders, y Donkey Kong.</p>
            <img src="images/3.jpg" alt="Juegos Arcade">
        </div>
        <div class="slide">
            <h2>Saltos y Aventuras: Los Juegos de Plataforma</h2>
            <p>Análisis de juegos de plataforma icónicos como Super Mario Bros., Sonic the Hedgehog, y Mega Man.</p>
            <img src="images/4.jpg" alt="Juegos de Plataforma">
        </div>
        <div class="slide">
            <h2>Fantasías Épicas: Los Juegos de Rol</h2>
            <p>Exploración de los juegos de rol clásicos como Final Fantasy, The Legend of Zelda, y Dragon Quest.</p>
            <img src="images/5.jpg" alt="Juegos de Rol">
        </div>
        <div class="slide">
            <h2>Combates Legendarios</h2>
            <p>Historia de los primeros juegos de pelea, como Street Fighter II, Mortal Kombat, y Tekken.</p>
            <img src="images/6.jpg" alt="Juegos de Pelea">
        </div>
        <div class="slide">
            <h2>Retos para la Mente</h2>
            <p>Análisis de juegos de puzzle populares como Tetris, Dr. Mario, y Lemmings.</p>
            <img src="images/7.webp" alt="Juegos de Puzzle">
        </div>
        <div class="slide">
            <h2>Historias Interactivas</h2>
            <p>Historia de las aventuras gráficas como The Secret of Monkey Island, King's Quest, y Myst.</p>
            <img src="images/8.jpg" alt="Aventuras Gráficas">
        </div>
        <div class="slide">
            <h2>La Competencia Virtual</h2>
            <p>Evolución de los juegos de deportes y carreras, como Pong, FIFA, y Mario Kart.</p>
            <img src="images/9.webp" alt="Juegos de Deportes y Carreras">
        </div>
        <div class="slide">
            <h2>El Legado y la Nostalgia</h2>
            <p>Reflexión sobre el impacto duradero de los juegos retro en la industria moderna de los videojuegos.</p>
            <img src="images/10.png" alt="Legado de Juegos Retro">
        </div>
        
        <button id="prevBtn" class="nav-button">❮</button>
        <button id="nextBtn" class="nav-button">❯</button>
        
        <div class="indicators"></div>
    </div>

    <script>
        const slides = document.querySelectorAll('.slide');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const indicators = document.querySelector('.indicators');
        let currentSlide = 0;

        const transitions = ['fade', 'slideLeft', 'slideRight', 'slideUp', 'slideDown', 'rotate', 'scale'];

        function showSlide(index) {
            slides[currentSlide].classList.remove('active');
            slides[index].classList.add('active');
            currentSlide = index;
            updateIndicators();
            applyRandomTransition();
        }

        function nextSlide() {
            showSlide((currentSlide + 1) % slides.length);
        }

        function prevSlide() {
            showSlide((currentSlide - 1 + slides.length) % slides.length);
        }

        function updateIndicators() {
            indicators.innerHTML = '';
            slides.forEach((_, index) => {
                const dot = document.createElement('div');
                dot.classList.add('indicator');
                if (index === currentSlide) dot.classList.add('active');
                dot.addEventListener('click', () => showSlide(index));
                indicators.appendChild(dot);
            });
        }

        function applyRandomTransition() {
            const randomTransition = transitions[Math.floor(Math.random() * transitions.length)];
            slides[currentSlide].style.animation = `${randomTransition} 0.5s ease-in-out`;
        }

        prevBtn.addEventListener('click', prevSlide);
        nextBtn.addEventListener('click', nextSlide);

        updateIndicators();

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') nextSlide();
            if (e.key === 'ArrowLeft') prevSlide();
        });

        // Add transition animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
            @keyframes slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
            @keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
            @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
            @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
            @keyframes rotate { from { transform: rotate(90deg) scale(0); } to { transform: rotate(0) scale(1); } }
            @keyframes scale { from { transform: scale(0); } to { transform: scale(1); } }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>