Tul xxx Tul

Viewing: show.php

<?= $this->extend('layout/principal'); ?>

<?php $this->section('title'); ?>
Bienvenido
<?php $this->endSection(); ?>

<?php $this->section('css'); ?>
<link rel="stylesheet" href="<?= base_url('assets/frontend/css/show.css') ?>">
<?php $this->endSection(); ?>

<?php $this->section('content'); ?>

<!-- ====== Portada Parallax ====== -->
<section class="hero-parallax d-flex align-items-center text-white" id="inicio">
    <div class="container text-center">
        <h5 class="fw-light mb-3">El mejor lugar para tu transformación</h5>
        <h1 class="display-3 fw-bold mb-4">
            <span id="typewriter" class="text-warning"></span>
        </h1>
        <p class="lead mb-5">
            Únete a nuestra comunidad y alcanza tu máximo potencial con rutinas personalizadas y seguimiento profesional.
        </p>
        <a href="<?= base_url() . '#planes'; ?>" class="btn btn-warning btn-lg px-5 me-3">Planes</a>
        <a href="<?= base_url() . '#contact-section'; ?>" class="btn btn-outline-light btn-lg px-5">Contáctanos</a>
    </div>
</section>

<!-- ====== Bloque Plan ====== -->

<section class="planes-section">
    <div class="container-grid">

        <!-- ✅ Columna Plan -->
        <div class="plan-column">
            <span class="tag">💪 Planes Fitness</span>
            <h2 class="title">Nuestros Planes</h2>
            <p class="subtitle">Elige el plan ideal para tu estilo de vida y objetivos</p>

            <div class="plan-card">
                <div class="plan-header">
                    <h3><i class="fas fa-dumbbell"></i> <?= esc($plan['name']) ?></h3>
                </div>
                <div class="plan-body">
                    <div><?= $plan['description'] ?></div>

                    <div class="price-box">
                        <span class="duration"><i class="far fa-clock"></i> <?= esc($plan['duration']) ?> días</span>
                        <div class="price">
                            <h3>
                                <?php
                                $currency = get_currency();
                                $amount = (float) $plan['amount'];
                                if (!empty($plan['discount_type']) && !empty($plan['discount_value'])) {
                                    if ($plan['discount_type'] === 'percent') {
                                        $amount -= $amount * ((float) $plan['discount_value'] / 100);
                                    } elseif ($plan['discount_type'] === 'fixed') {
                                        $amount -= (float) $plan['discount_value'];
                                    }
                                }
                                ?>
                                <?= $currency ?> <?= number_format($amount, 2) ?>
                            </h3>
                            <?php if (!empty($plan['discount_value'])): ?>
                                <small><s><?= $currency ?> <?= number_format($plan['amount'], 2) ?></s></small>
                            <?php endif; ?>
                        </div>
                    </div>

                    <?php if (!empty($plan['discount_value'])): ?>
                        <div class="discount">
                            <i class="fas fa-tag"></i>
                            <?= ($plan['discount_type'] === 'percent')
                                ? 'Ahorra ' . esc($plan['discount_value']) . '%'
                                : 'Descuento de ' . $currency . ' ' . number_format($plan['discount_value'], 2) ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- ✅ Columna Login/Register -->
        <div class="auth-column">
            <div class="auth-box">
                <div class="forms-container">
                    <!-- Login -->
                    <form class="form login-form active" id="loginForm">
                        <h3>Iniciar Sesión</h3>
                        <input type="email" name="email" placeholder="Correo electrónico">
                        <input type="password" name="password" placeholder="Contraseña">
                        <button type="submit" class="btn btn-primary">Entrar</button>
                        <p>¿No tienes cuenta? <a href="#" class="toggle-form">Regístrate</a></p>
                    </form>

                    <!-- Register -->
                    <form class="form register-form" id="registerForm">
                        <h3>Crear Cuenta</h3>
                        <input type="text" name="name" placeholder="Nombre completo">
                        <input type="email" name="email" placeholder="Correo electrónico">
                        <input type="password" name="password" placeholder="Contraseña">
                        <button type="submit" class="btn btn-secondary">Registrarse</button>
                        <p>¿Ya tienes cuenta? <a href="#" class="toggle-form">Inicia sesión</a></p>
                    </form>
                </div>
            </div>
        </div>


    </div>
</section>

<?php $this->endSection(); ?>

<?php $this->section('js'); ?>
<script>
    // Efecto máquina de escribir
    const typewriterText = ["Entrena Fuerte", "Vive Mejor", "Transforma tu Cuerpo"];
    let typeIndex = 0,
        charIndex = 0;
    const typeElement = document.getElementById("typewriter");

    function type() {
        if (charIndex < typewriterText[typeIndex].length) {
            typeElement.textContent += typewriterText[typeIndex].charAt(charIndex);
            charIndex++;
            setTimeout(type, 100);
        } else {
            setTimeout(erase, 2000);
        }
    }

    function erase() {
        if (charIndex > 0) {
            typeElement.textContent = typewriterText[typeIndex].substring(0, charIndex - 1);
            charIndex--;
            setTimeout(erase, 50);
        } else {
            typeIndex = (typeIndex + 1) % typewriterText.length;
            setTimeout(type, 200);
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        type();
    });

    // Parallax
    window.addEventListener("scroll", () => {
        const scrolled = window.scrollY;
        document.querySelector(".hero-parallax").style.backgroundPositionY = `${scrolled * 0.5}px`;
    });

    document.querySelectorAll('.toggle-form').forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
            document.querySelector('.login-form').classList.toggle('active');
            document.querySelector('.register-form').classList.toggle('active');
        });
    });

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    // LOGIN
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        try {
            const response = await fetch('<?= base_url('auth/login'); ?>', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.status === 'success') {
                Toast.fire({
                    icon: 'success',
                    title: data.message
                });
                setTimeout(() => window.location.href = '<?= base_url('membresias/buy/') . $plan['slug']; ?>#section-payment', 1000);
            } else {
                Toast.fire({
                    icon: 'error',
                    title: data.message
                });
            }
        } catch (error) {
            Toast.fire({
                icon: 'error',
                title: 'Error en la conexión'
            });
        }
    });

    // REGISTER
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        // Mostrar loading con SweetAlert2
        Swal.fire({
            title: 'Enviando...',
            text: 'Estamos registrando tu cuenta y enviando el correo de activación',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        try {
            const response = await fetch('<?= base_url('auth/register') ?>', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            Swal.close(); // Cierra el loading cuando la respuesta llega

            if (data.status === 'success') {
                Toast.fire({
                    icon: 'success',
                    title: data.message
                });

                setTimeout(() => {
                    document.querySelector('.register-form').reset();
                    document.querySelector('.login-form').classList.add('active');
                    document.querySelector('.register-form').classList.remove('active');
                }, 1000);
            } else {
                Toast.fire({
                    icon: 'error',
                    title: data.message
                });
            }
        } catch (error) {
            Swal.close();
            Toast.fire({
                icon: 'error',
                title: 'Error en la conexión'
            });
        }
    });
</script>


<?php $this->endSection(); ?>
User / IP	: 216.73.216.191
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64