{"id":454,"date":"2025-04-06T01:19:31","date_gmt":"2025-04-05T23:19:31","guid":{"rendered":"https:\/\/creatuhistoria.alhambra.app\/?page_id=454"},"modified":"2025-05-13T19:04:12","modified_gmt":"2025-05-13T17:04:12","slug":"inicio","status":"publish","type":"page","link":"https:\/\/creatuhistoria.alhambra.app\/fi\/","title":{"rendered":"Kotiin"},"content":{"rendered":"<!-- Swiper CSS -->\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\n<style>\n#custom-video-container {\n    position: relative;\n     height: 100vh;\n    top: 0;\n    left: 0;\n    width: 100% !important;\n    overflow: hidden;\n    z-index: 1;\n}\n\n    :root {\n        --y-gap: -1rem !important;\n    }\n\n\n#custom-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0.9;\n}\n\n#video-fade-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n    pointer-events: none;\n    transition: opacity 1s ease-out;\n    opacity: 0;\n}\n\n.gradient-overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 75%;\n    pointer-events: none;\n    z-index: 1;\n    background: linear-gradient(to bottom, \n        rgba(255, 255, 255, 0),\n        rgba(255, 255, 255, 0.1),\n        rgba(255, 255, 255, 0.3),\n        rgba(255, 255, 255, 0.5),\n        rgba(255, 255, 255, 0.7),\n        rgba(255, 255, 255, 0.9),\n        rgba(255, 255, 255, 1)\n    );\n}\n\n.dark .gradient-overlay {\n    background: linear-gradient(to bottom,\n        rgba(23, 23, 25, 0),\n        rgba(23, 23, 25, 0.3),\n        rgba(23, 23, 25, 0.5),\n        rgba(23, 23, 25, 0.7),\n        rgba(23, 23, 25, 0.85),\n        rgba(23, 23, 25, 0.95),\n        rgb(23, 23, 25)\n    );\n}\n\n.dark, .dark body {\n    --body-bg-color: #000000a8 !important;\n}\n\nbody {\n    --body-bg-color: #ffffff99 !important;\n    --color-grey-500: #32323957 !important;\n}\n\n.overlay-content {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    padding: 4rem 1rem;\n    color: white;\n    text-shadow: 0 0 6px #000;\n    font-family: 'Poppins', sans-serif;\n    box-sizing: border-box;\n}\n\n.overlay-content h1 {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n    color: white;\n    text-shadow:\n        -1px -1px 0 #000,  \n         1px -1px 0 #000,\n        -1px  1px 0 #000,\n         1px  1px 0 #000;\n}\n\n.overlay-content p {\n    font-size: 1.1rem;\n    max-width: 560px;\n    margin-bottom: 2rem;\n    line-height: 1.6;\n    color: white;\n    text-shadow:\n        -1px -1px 0 #000,  \n         1px -1px 0 #000,\n        -1px  1px 0 #000,\n         1px  1px 0 #000;\n}\n\n\n.carrusel-wrapper {\n    max-width: 560px;\n    width: 100%;\n    margin: 0 auto 1.5rem;\n    overflow: visible;\n    position: relative;\n}\n\n.carrusel-personajes .swiper-slide {\n    text-align: center;\n}\n\n.carrusel-personajes img {\n    width: 150px;\n    height: auto;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    transition: transform 0.3s ease;\n     margin-bottom: 1px;\n}\n\n.carrusel-personajes img:hover {\n    transform: scale(1.05);\n}\n\n.carrusel-personajes h3 {\n    font-size: 0.9rem;\n    margin-top: 10px;\n    color: white;\n    text-shadow: 0 0 4px black;\n}\n\n.swiper-button-prev::after,\n.swiper-button-next::after {\n    display: none !important;\n}\n\n.custom-swiper-button {\n    background-color: var(--color-primary, #444);\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    z-index: 10;\n}\n\n.swiper-button-prev.custom-swiper-button { left: 0; }\n.swiper-button-next.custom-swiper-button { right: 0; }\n\n.custom-swiper-button:hover {\n    background-color: var(--color-primary, #444); \/* mismo color base *\/\n}\n\n.arrow-icon {\n    stroke: white;\n    transition: stroke 0.3s ease;\n}\n\n.custom-swiper-button:hover .arrow-icon {\n    stroke: white; \/* sin cambio de color al hacer hover *\/\n}\n\n.swiper-slide.selected img {\n    border: 2px solid var(--color-primary) !important;\n}\n\n#continuar-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 0px;\n    font-size: 1rem;\n    font-weight: 600;\n    border-radius: 8px;\n    background-color: #8B4513; \/* Marr\u00f3n *\/\n    color: white;\n    border: none;\n    cursor: not-allowed;\n    min-width: 300px;\n    text-align: center;\n    margin-bottom: 1rem;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n    .overlay-content h1 {\n        font-size: 3rem;\n    }\n\n    .overlay-content p {\n        font-size: 1rem;\n        padding: 0 0.5rem;\n    }\n\n    .carrusel-wrapper {\n        padding-inline: 10px;\n    }\n}\n\n\n.carrusel-personajes .swiper-slide {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    height: auto !important;\n    min-height: 0px; \/* o ajusta seg\u00fan tu dise\u00f1o *\/\n    padding-bottom: 1rem;\n}\n\n.custom-swiper-button.disabled {\n    opacity: 0.3;\n    pointer-events: none;\n    cursor: default;\n}\n\n\n<\/style>\n\n\n<div id=\"custom-video-container\">\n    <div id=\"video-fade-overlay\"><\/div>\n    <video id=\"custom-video\" autoplay muted playsinline loop disableremoteplayback>\n        <source src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/baja\/08.mp4\" type=\"video\/mp4\">\n        Selaimesi ei tue videoiden toistoa.\n    <\/video>\n    <div class=\"gradient-overlay\"><\/div>\n\n    <div class=\"overlay-content\">\n        <h1>Luo oma tarinasi<\/h1>\n\n        <p>\n            Koe Alhambran taika luomalla oma tarinasi. <strong> Sin\u00e4 valitset polun, sin\u00e4 muutat kurssia ja sin\u00e4 el\u00e4t joka hetken p\u00e4\u00e4henkil\u00f6n\u00e4.<\/strong> Aloita ainutlaatuinen ja unohtumaton kokemus nyt!\n        <\/p>\n        <br>\n\n        <div class=\"carrusel-wrapper\">\n            <div class=\"swiper carrusel-personajes\">\n                <div class=\"swiper-wrapper\">\n                    <div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Aventura\/\" data-video=\"aventura.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/aventura.jpg\" alt=\"Aventura\" \/>    <h3>Seikkailu<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Ficcion\/\" data-video=\"ficcion.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/ficcion.jpg\" alt=\"Ficci\u00f3n\" \/>    <h3>Kaunokirjallisuus<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Epico\/\" data-video=\"epico.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/epico.jpg\" alt=\"\u00c9pico\" \/>    <h3>Eeppinen<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Fantasia\/\" data-video=\"fantasia.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/fantasia.jpg\" alt=\"Fantas\u00eda\" \/>    <h3>Hieno<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Misterio\/\" data-video=\"misterio.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/misterio.jpg\" alt=\"Misterio\" \/>    <h3>Mysteeri<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Romantica\/\" data-video=\"romantica.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/romantica.jpg\" alt=\"Rom\u00e1ntica\" \/>    <h3>Romanttinen<\/h3><\/div><div class=\"swiper-slide\" data-url=\"https:\/\/creatuhistoria.alhambra.app\/fi\/Terror\/\" data-video=\"terror.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/terror.jpg\" alt=\"Terror\" \/>    <h3>kauhua<\/h3><\/div>                <\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\nconst swiper = new Swiper('.carrusel-personajes', {\n    slidesPerView: 3,\n    centeredSlides: true,\n    initialSlide: 0,\n    spaceBetween: 5,\n    loop: false,\n    navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev',\n    },\n    breakpoints: {\n        1024: { slidesPerView: 3 },\n        768: { slidesPerView: 2 },\n        0: { slidesPerView: 1 },\n    },\n    on: {\n        slideChange: () => {\n            seleccionarSlideCentral();\n        }\n    }\n});\n\n\n\n\n\n\/\/ Seleccionar y centrar autom\u00e1ticamente el primer slide al cargar\n\n\/\/ sebasluego quitar esto\n\/\/ Solo marcar visualmente el primer slide como seleccionado sin cambiar el video\n\/\/ const firstSlide = document.querySelector('.swiper-slide');\n\/\/ if (firstSlide) {\n\/\/     firstSlide.classList.add('selected');\n\/\/     swiper.slideTo(0);\n\/\/ }\n\n\n\n    const slides = document.querySelectorAll('.swiper-slide');\n    const continuarBtn = document.getElementById('continuar-btn');\n    const videoElement = document.getElementById('custom-video');\n    const videoSource = videoElement.querySelector('source');\n    const fadeOverlay = document.getElementById('video-fade-overlay');\n\n    let selectedUrl = null;\n\nslides.forEach(slide => {\n    slide.addEventListener('click', () => {\n        seleccionarSlide(slide);\n    });\n});\n\n\n\n\n\nfunction seleccionarSlide(slide) {\n    slides.forEach(s => s.classList.remove('selected'));\n    slide.classList.add('selected');\n\n    selectedUrl = slide.getAttribute('data-url');\n    const personajeNombre = slide.querySelector('h3')?.textContent || '';\n    const videoFile = slide.getAttribute('data-video');\n\n    continuarBtn.disabled = false;\n    continuarBtn.style.backgroundColor = '#8B4513';\n    continuarBtn.style.cursor = 'pointer';\n    continuarBtn.textContent = `Continuar con ${personajeNombre}`;\n\n    if (videoFile) {\n        fadeOverlay.style.opacity = '1';\n        setTimeout(() => {\n            videoSource.src = `https:\/\/cdn.alhambra.com.ai\/General\/Cuentos\/fondos-video\/categorias\/${videoFile}`;\n            videoElement.load();\n            fadeOverlay.style.opacity = '0';\n        }, 400);\n    }\n}\n\n\n\n\n\nfunction seleccionarSlideCentral() {\n    const currentSlide = swiper.slides[swiper.activeIndex];\n    if (currentSlide) {\n        seleccionarSlide(currentSlide);\n    }\n}\n\n\n\n    continuarBtn.addEventListener('click', () => {\n        if (selectedUrl) {\n            window.location.href = selectedUrl;\n        }\n    });\n});\n<\/script>\n\n\n\n\n\n                <div class=\"swiper-button-prev custom-swiper-button\">\n                    <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <polyline points=\"12 8 8 12 12 16\"><\/polyline>\n                        <line x1=\"16\" y1=\"12\" x2=\"8\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/div>\n                <div class=\"swiper-button-next custom-swiper-button\">\n                    <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <polyline points=\"12 16 16 12 12 8\"><\/polyline>\n                        <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <button id=\"continuar-btn\" disabled>\n            Jatkaa\n        <\/button>\n    <\/div>\n<\/div>\n\n\n\n<style>\n.swiper-slide.selected img {\n    border: 4px solid var(--color-primary) !important;\n}\n\n\n#continuar-btn:disabled {\n    background-color: var(--color-primary) !important;\n    opacity: 1 !important;\n}\n\n\n#continuar-btn {\n    background-color: var(--color-primary) !important;\n}\n\n\n<\/style>\n\n\n\n    <!-- Swiper JS -->\n    <script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"type":"","auto_type":false,"post":"","stream":"","stream_url":"","waveform_data":[],"duration":0,"bpm":0,"downloadable":false,"download_url":"","purchase_title":"","purchase_url":"","post-count-all":0,"like_count":0,"download_count":0,"editor_note":"","copyright":"","captions":[],"sources":[],"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/pages\/454"}],"collection":[{"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":0,"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/pages\/454\/revisions"}],"wp:attachment":[{"href":"https:\/\/creatuhistoria.alhambra.app\/fi\/wp-json\/wp\/v2\/media?parent=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}