index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RADBIOEDGE - Radiobiología Clínica y Radioterapia</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            background: linear-gradient(45deg, #fff, #e0e0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 25px;
        }

        .nav a:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 4rem 0;
            text-align: center;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease;
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease 0.3s both;
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s ease;
            animation: fadeInUp 1s ease 0.6s both;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255,107,107,0.4);
        }

        /* Main Content */
        main {
            padding: 3rem 0;
        }

        .section {
            margin-bottom: 4rem;
        }

        .section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Video Grid */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .video-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 1px solid #e0e0e0;
        }

        .video-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        .video-thumbnail {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
        }

        .video-content {
            padding: 1.5rem;
        }

        .video-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .video-description {
            color: #666;
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .video-link {
            display: inline-block;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 0.7rem 1.5rem;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .video-link:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(102,126,234,0.4);
        }

        /* Category Filters */
        .filters {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: white;
            border: 2px solid #667eea;
            color: #667eea;
            padding: 0.7rem 1.5rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        /* About Section */
        .about {
            background: white;
            padding: 3rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            text-align: center;
        }

        .about h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: #667eea;
        }

        .about p {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 1rem;
        }

        /* Footer */
        footer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Search Bar */
        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .search-bar {
            width: 100%;
            max-width: 500px;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            outline: none;
            transition: all 0.3s ease;
        }

        .search-bar:focus {
            box-shadow: 0 10px 30px rgba(102,126,234,0.2);
            transform: translateY(-2px);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav {
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">RADBIOEDGE</div>
                <nav class="nav">
                    <a href="#inicio">Inicio</a>
                    <a href="#videos">Videos</a>
                    <a href="#sobre-el-canal">Sobre el Canal</a>
                    <a href="#contacto">Contacto</a>
                </nav>
            </div>
        </div>
    </header>

    <section class="hero" id="inicio">
        <div class="container">
            <h1>RADBIOEDGE</h1>
            <p>Tu fuente especializada de conocimiento en radiobiología clínica y radioterapia</p>
            <a href="#videos" class="cta-button">Explorar Videos</a>
        </div>
    </section>

    <main class="container">
        <section class="section" id="videos">
            <h2>Biblioteca de Videos</h2>
            
            <div class="search-container">
                <input type="text" class="search-bar" placeholder="Buscar videos por tema..." id="searchBar">
            </div>

            <div class="filters">
                <button class="filter-btn active" data-category="todos">Todos</button>
                <button class="filter-btn" data-category="radiobiologia">Radiobiología</button>
                <button class="filter-btn" data-category="planificacion">Planificación</button>
                <button class="filter-btn" data-category="tecnicas">Técnicas Avanzadas</button>
                <button class="filter-btn" data-category="casos">Casos Clínicos</button>
                <button class="filter-btn" data-category="fisica">Física Médica</button>
            </div>

            <div class="video-grid" id="videoGrid">
                <!-- Video cards will be dynamically inserted here -->
                <div class="video-card" data-category="radiobiologia">
                    <div class="video-thumbnail">📡</div>
                    <div class="video-content">
                        <div class="video-title">Fundamentos de Radiobiología Clínica</div>
                        <div class="video-description">Introducción a los conceptos básicos de la radiobiología y su aplicación en la práctica clínica diaria.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>

                <div class="video-card" data-category="planificacion">
                    <div class="video-thumbnail">🎯</div>
                    <div class="video-content">
                        <div class="video-title">Optimización en Planificación de Tratamientos</div>
                        <div class="video-description">Estrategias avanzadas para la optimización de planes de tratamiento en radioterapia moderna.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>

                <div class="video-card" data-category="tecnicas">
                    <div class="video-thumbnail">⚡</div>
                    <div class="video-content">
                        <div class="video-title">VMAT: Principios y Aplicaciones</div>
                        <div class="video-description">Análisis detallado de la técnica VMAT y sus ventajas en diferentes tipos de tratamiento.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>

                <div class="video-card" data-category="casos">
                    <div class="video-thumbnail">🏥</div>
                    <div class="video-content">
                        <div class="video-title">Caso Clínico: Cáncer de Próstata</div>
                        <div class="video-description">Revisión completa de un caso clínico de cáncer de próstata desde la planificación hasta el seguimiento.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>

                <div class="video-card" data-category="fisica">
                    <div class="video-thumbnail">🔬</div>
                    <div class="video-content">
                        <div class="video-title">Control de Calidad en Aceleradores Lineales</div>
                        <div class="video-description">Protocolos esenciales para el control de calidad diario y periódico de equipos de radioterapia.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>

                <div class="video-card" data-category="radiobiologia">
                    <div class="video-thumbnail">🧬</div>
                    <div class="video-content">
                        <div class="video-title">Reparación del ADN y Radiosensibilidad</div>
                        <div class="video-description">Mecanismos moleculares de reparación del ADN y su impacto en la respuesta a la radiación.</div>
                        <a href="#" class="video-link">Ver Video</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="section about" id="sobre-el-canal">
            <h3>Sobre RADBIOEDGE</h3>
            <p>RADBIOEDGE es un canal educativo especializado en radiobiología clínica y radioterapia, diseñado específicamente para radiooncólogos, radiofísicos y profesionales de la oncología radioterápica.</p>
            <p>Nuestro contenido abarca desde conceptos fundamentales hasta técnicas avanzadas, casos clínicos reales y las últimas innovaciones en el campo de la radioterapia.</p>
            <p>Mantente al día con los avances más recientes y profundiza en temas especializados que te ayudarán en tu práctica clínica diaria.</p>
        </section>
    </main>

    <footer id="contacto">
        <div class="container">
            <p>&copy; 2024 RADBIOEDGE. Educación especializada en radiobiología clínica y radioterapia.</p>
        </div>
    </footer>

    <script>
        // Filter functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        const videoCards = document.querySelectorAll('.video-card');
        const searchBar = document.getElementById('searchBar');

        filterButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const category = btn.getAttribute('data-category');
                
                // Update active button
                filterButtons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // Filter cards
                videoCards.forEach(card => {
                    if (category === 'todos' || card.getAttribute('data-category') === category) {
                        card.style.display = 'block';
                        card.style.animation = 'fadeInUp 0.5s ease';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

        // Search functionality
        searchBar.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            
            videoCards.forEach(card => {
                const title = card.querySelector('.video-title').textContent.toLowerCase();
                const description = card.querySelector('.video-description').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || description.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add video function (you can use this to add new videos dynamically)
        function addVideo(title, description, category, videoUrl) {
            const videoGrid = document.getElementById('videoGrid');
            const videoCard = document.createElement('div');
            videoCard.className = 'video-card';
            videoCard.setAttribute('data-category', category);
            
            const categoryIcons = {
                'radiobiologia': '🧬',
                'planificacion': '🎯',
                'tecnicas': '⚡',
                'casos': '🏥',
                'fisica': '🔬'
            };
            
            videoCard.innerHTML = `
                <div class="video-thumbnail">${categoryIcons[category] || '📹'}</div>
                <div class="video-content">
                    <div class="video-title">${title}</div>
                    <div class="video-description">${description}</div>
                    <a href="${videoUrl}" class="video-link" target="_blank">Ver Video</a>
                </div>
            `;
            
            videoGrid.appendChild(videoCard);
        }

        // Example of how to add a new video:
        // addVideo('Nuevo Video', 'Descripción del video', 'radiobiologia', 'https://youtube.com/watch?v=...');
    </script>
</body>
</html>