Spaces:

Malaji71
/

keynote-ha-muerto

Running

App Files Files Community

Malaji71 commited on May 19, 2025

Commit

0988a9c

verified ·

1 Parent(s): b20d4bd

Add 2 files

Browse files

Files changed (2) hide show

index.html +162 -6
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Keynote ha muerto</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             margin: 0;
@@ -30,6 +30,7 @@
             height: 100%;
             object-fit: cover;
             z-index: 1;
         }
         .hero-content {
@@ -44,6 +45,12 @@
             text-align: center;
             padding: 2rem;
             background: rgba(0, 0, 0, 0.2);
         }
         .hero-title {
@@ -52,12 +59,48 @@
             line-height: 1;
             margin-bottom: 1rem;
             text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
         }
         .hero-subtitle {
             font-size: 1.5rem;
             max-width: 600px;
             text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
         }
         @media (max-width: 768px) {
@@ -68,11 +111,26 @@
             .hero-subtitle {
                 font-size: 1.2rem;
             }
         }
     </style>
 </head>
 <body>
-    <!-- First Hero Section -->
     <div class="hero-container">
         <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/malaji71_IMG_7249.CR2_ISO_400_f16_11000s_50mm_MF_A_crazy_person_4a13a1fb-3eb8-4175-8fe4-8250ced7722e.png"
              alt="Keynote ha muerto"
@@ -84,7 +142,7 @@
         </div>
     </div>
-    <!-- Second Hero Section -->
     <div class="hero-container">
         <img src="https://datasets-server.huggingface.co/assets/Malaji71/imagenes/--/24517f4d9d97cae07d3446e1a4c60bab0586a779/--/default/train/4/image/image.jpg?Expires=1747667165&Signature=bnr98m3MrrYWMVFj52O6EupK9ezh5VFxhm2Sn18eCZ7a68EmT-SxJ1jK-~NwzA6cy1bC5s-ZNVY8~ag9vF8Vd00xxbV0Em9uilUe1U2WrtbQyIV~rriiOUNoC1C5ucix0~lbh6r6lZp2FxOPqKi31lM6duvQQSaf9sz3G50s~56btYWVWcrBOPZkvI4M0ROlff7SFeOaJ94IT-Qg6BCXYa7~Q9o33WeKDqiafw~4FD7UhrOYE9Hv0J02pT-03iba8c8a3zdBLhkOJVLXXak3PwVfXTxQBVVM7qyVuf-FJORUNldZaFwKFL3K4641s4fApAd6XcuZDFuCxGZdsqr7Ig__&Key-Pair-Id=K3EI6M078Z3AC3"
              alt="Que se mueran los feos"
@@ -96,25 +154,123 @@
         </div>
     </div>
     <script>
-        // Simple parallax effect for both images
         document.addEventListener('DOMContentLoaded', function() {
             const heroImages = document.querySelectorAll('.hero-image');
             window.addEventListener('scroll', function() {
                 const scrollPosition = window.pageYOffset;
                 heroImages.forEach(img => {
                     const section = img.parentElement;
                     const sectionTop = section.offsetTop;
                     const sectionHeight = section.offsetHeight;
-                    // Only apply parallax when the section is in view
                     if (scrollPosition > sectionTop - window.innerHeight &&
                         scrollPosition < sectionTop + sectionHeight) {
                         const relativeScroll = scrollPosition - sectionTop;
                         img.style.transform = `translateY(${relativeScroll * 0.3}px)`;
                     }
                 });
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Galería Visual Impactante</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             margin: 0;
             height: 100%;
             object-fit: cover;
             z-index: 1;
+            transition: transform 0.5s ease;
         }
         .hero-content {
             text-align: center;
             padding: 2rem;
             background: rgba(0, 0, 0, 0.2);
+            opacity: 0;
+            transition: opacity 0.8s ease;
+        }
+        .hero-container:hover .hero-content {
+            opacity: 1;
         }
         .hero-title {
             line-height: 1;
             margin-bottom: 1rem;
             text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+            transform: translateY(20px);
+            transition: transform 0.5s ease;
         }
         .hero-subtitle {
             font-size: 1.5rem;
             max-width: 600px;
             text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
+            transform: translateY(20px);
+            transition: transform 0.5s ease 0.1s;
+            font-family: 'Montserrat', sans-serif;
+            font-weight: 300;
+        }
+        .hero-container:hover .hero-title,
+        .hero-container:hover .hero-subtitle {
+            transform: translateY(0);
+        }
+        .nav-dots {
+            position: fixed;
+            right: 2rem;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .nav-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .nav-dot.active {
+            background: white;
+            transform: scale(1.3);
         }
         @media (max-width: 768px) {
             .hero-subtitle {
                 font-size: 1.2rem;
             }
+            .nav-dots {
+                display: none;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Navigation Dots -->
+    <div class="nav-dots">
+        <div class="nav-dot active" data-section="0"></div>
+        <div class="nav-dot" data-section="1"></div>
+        <div class="nav-dot" data-section="2"></div>
+        <div class="nav-dot" data-section="3"></div>
+        <div class="nav-dot" data-section="4"></div>
+        <div class="nav-dot" data-section="5"></div>
+        <div class="nav-dot" data-section="6"></div>
+    </div>
+    <!-- Section 1 -->
     <div class="hero-container">
         <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/malaji71_IMG_7249.CR2_ISO_400_f16_11000s_50mm_MF_A_crazy_person_4a13a1fb-3eb8-4175-8fe4-8250ced7722e.png"
              alt="Keynote ha muerto"
         </div>
     </div>
+    <!-- Section 2 -->
     <div class="hero-container">
         <img src="https://datasets-server.huggingface.co/assets/Malaji71/imagenes/--/24517f4d9d97cae07d3446e1a4c60bab0586a779/--/default/train/4/image/image.jpg?Expires=1747667165&Signature=bnr98m3MrrYWMVFj52O6EupK9ezh5VFxhm2Sn18eCZ7a68EmT-SxJ1jK-~NwzA6cy1bC5s-ZNVY8~ag9vF8Vd00xxbV0Em9uilUe1U2WrtbQyIV~rriiOUNoC1C5ucix0~lbh6r6lZp2FxOPqKi31lM6duvQQSaf9sz3G50s~56btYWVWcrBOPZkvI4M0ROlff7SFeOaJ94IT-Qg6BCXYa7~Q9o33WeKDqiafw~4FD7UhrOYE9Hv0J02pT-03iba8c8a3zdBLhkOJVLXXak3PwVfXTxQBVVM7qyVuf-FJORUNldZaFwKFL3K4641s4fApAd6XcuZDFuCxGZdsqr7Ig__&Key-Pair-Id=K3EI6M078Z3AC3"
              alt="Que se mueran los feos"
         </div>
     </div>
+    <!-- Section 3 -->
+    <div class="hero-container">
+        <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/WhatsApp%20Image%202025-05-18%20at%2012.45.32.jpeg"
+             alt="Instantáneas del caos"
+             class="hero-image">
+        <div class="hero-content">
+            <h1 class="hero-title">Instantáneas del caos</h1>
+            <p class="hero-subtitle">Cuando la realidad supera la ficción</p>
+        </div>
+    </div>
+    <!-- Section 4 -->
+    <div class="hero-container">
+        <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/magnific-fKE10HPbp6kO5KajBZFJ-malaji71_CSP_MANGA15.CLIP_portrait_of_a_young_woman_with_short__23e9ab78-b3fd-43f8-bb96-1e2f38871976.jpeg"
+             alt="Retrato de una era"
+             class="hero-image">
+        <div class="hero-content">
+            <h1 class="hero-title">Retrato de una era</h1>
+            <p class="hero-subtitle">La belleza en la simplicidad</p>
+        </div>
+    </div>
+    <!-- Section 5 -->
+    <div class="hero-container">
+        <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_cdd45518-cc4d-4cd6-96f9-c2aafb5a9d04.png"
+             alt="El arte de la luz"
+             class="hero-image">
+        <div class="hero-content">
+            <h1 class="hero-title">El arte de la luz</h1>
+            <p class="hero-subtitle">Cuando la fotografía se convierte en pintura</p>
+        </div>
+    </div>
+    <!-- Section 6 -->
+    <div class="hero-container">
+        <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_e5199102-ad12-41fe-8813-42f62709ce4a.png"
+             alt="Sombras que hablan"
+             class="hero-image">
+        <div class="hero-content">
+            <h1 class="hero-title">Sombras que hablan</h1>
+            <p class="hero-subtitle">Lo que no se ve es más importante que lo visible</p>
+        </div>
+    </div>
+    <!-- Section 7 -->
+    <div class="hero-container">
+        <img src="https://huggingface.co/datasets/Malaji71/imagenes/resolve/main/malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_a_c_31211b2e-1d11-4521-9a2d-073a6fcac8fe.png"
+             alt="El último suspiro"
+             class="hero-image">
+        <div class="hero-content">
+            <h1 class="hero-title">El último suspiro</h1>
+            <p class="hero-subtitle">Cuando el tiempo se detiene para siempre</p>
+        </div>
+    </div>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const heroImages = document.querySelectorAll('.hero-image');
+            const heroContainers = document.querySelectorAll('.hero-container');
+            const navDots = document.querySelectorAll('.nav-dot');
+            // Parallax effect
             window.addEventListener('scroll', function() {
                 const scrollPosition = window.pageYOffset;
                 heroImages.forEach(img => {
                     const section = img.parentElement;
                     const sectionTop = section.offsetTop;
                     const sectionHeight = section.offsetHeight;
                     if (scrollPosition > sectionTop - window.innerHeight &&
                         scrollPosition < sectionTop + sectionHeight) {
                         const relativeScroll = scrollPosition - sectionTop;
                         img.style.transform = `translateY(${relativeScroll * 0.3}px)`;
                     }
                 });
+                // Update active nav dot
+                heroContainers.forEach((container, index) => {
+                    const rect = container.getBoundingClientRect();
+                    if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
+                        navDots.forEach(dot => dot.classList.remove('active'));
+                        navDots[index].classList.add('active');
+                    }
+                });
+            });
+            // Navigation dots click event
+            navDots.forEach(dot => {
+                dot.addEventListener('click', function() {
+                    const sectionIndex = parseInt(this.getAttribute('data-section'));
+                    const targetSection = heroContainers[sectionIndex];
+                    window.scrollTo({
+                        top: targetSection.offsetTop,
+                        behavior: 'smooth'
+                    });
+                });
+            });
+            // Show content on hover
+            heroContainers.forEach(container => {
+                container.addEventListener('mouseenter', function() {
+                    this.querySelector('.hero-content').style.opacity = '1';
+                    this.querySelector('.hero-title').style.transform = 'translateY(0)';
+                    this.querySelector('.hero-subtitle').style.transform = 'translateY(0)';
+                });
+                container.addEventListener('mouseleave', function() {
+                    this.querySelector('.hero-content').style.opacity = '0';
+                    this.querySelector('.hero-title').style.transform = 'translateY(20px)';
+                    this.querySelector('.hero-subtitle').style.transform = 'translateY(20px)';
+                });
             });
         });
     </script>

prompts.txt CHANGED Viewed

@@ -1,4 +1,5 @@
 Quiero crear una web ultra moderna y dinámica que se llame "Keynote ha muerto". Con texto: "ya es posible crear las presentaciones e incluir las imágenes". Esta app tieme que contener estas imágnenes que ordenarás de la forma más estètica y creatia que puedas y pone tus propios textos: Imágenes:   https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=WhatsApp%20Image%202025%2D05%2D18%20at%2012.45.32.jpeg  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=magnific%2DfKE10HPbp6kO5KajBZFJ%2Dmalaji71_CSP_MANGA15.CLIP_portrait_of_a_young_woman_with_short__23e9ab78%2Db3fd%2D43f8%2Dbb96%2D1e2f38871976.jpeg https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_cdd45518%2Dcc4d%2D4cd6%2D96f9%2Dc2aafb5a9d04.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_e5199102%2Dad12%2D41fe%2D8813%2D42f62709ce4a.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_a_c_31211b2e%2D1d11%2D4521%2D9a2d%2D073a6fcac8fe.png  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_IMG_7249.CR2_ISO_400_f16_11000s_50mm_MF_A_crazy_person_4a13a1fb%2D3eb8%2D4175%2D8fe4%2D8250ced7722e.png
 No me gusta lo que has hecho. Es muy "viejo". uiero algo más moderno. Las imágnees , com ña que tienes como "intensidad narrativa" debe esta en el encabezado, a dónd dice "keynote ha muerto". Un diseño más minimalista y la imágenes deben esta integrada, no como una galría, sino a lo lago de la web. Usa tonos blancos, tipografía más elegante
 1. El texto de Kynote ha muerto tiene que esta sobre la imagen que te dije: https://huggingface.co/datasets/Malaji71/imagenes/viewer?image-viewer=C51C628D9C17EE9D13C51B81E0DE00E6BF40B134. EL TECTO VA SOBRE LA IAMGEN. Elimina el menú. Y todos los botones.
-Ahora añade una segunda imagen a esta presentación que es sta: https://datasets-server.huggingface.co/assets/Malaji71/imagenes/--/24517f4d9d97cae07d3446e1a4c60bab0586a779/--/default/train/4/image/image.jpg?Expires=1747667165&Signature=bnr98m3MrrYWMVFj52O6EupK9ezh5VFxhm2Sn18eCZ7a68EmT-SxJ1jK-~NwzA6cy1bC5s-ZNVY8~ag9vF8Vd00xxbV0Em9uilUe1U2WrtbQyIV~rriiOUNoC1C5ucix0~lbh6r6lZp2FxOPqKi31lM6duvQQSaf9sz3G50s~56btYWVWcrBOPZkvI4M0ROlff7SFeOaJ94IT-Qg6BCXYa7~Q9o33WeKDqiafw~4FD7UhrOYE9Hv0J02pT-03iba8c8a3zdBLhkOJVLXXak3PwVfXTxQBVVM7qyVuf-FJORUNldZaFwKFL3K4641s4fApAd6XcuZDFuCxGZdsqr7Ig__&Key-Pair-Id=K3EI6M078Z3AC3 Y que l título diga: Que se mueran los feos. Y el suntítulo: Y todos los que los apollan.

 Quiero crear una web ultra moderna y dinámica que se llame "Keynote ha muerto". Con texto: "ya es posible crear las presentaciones e incluir las imágenes". Esta app tieme que contener estas imágnenes que ordenarás de la forma más estètica y creatia que puedas y pone tus propios textos: Imágenes:   https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=WhatsApp%20Image%202025%2D05%2D18%20at%2012.45.32.jpeg  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=magnific%2DfKE10HPbp6kO5KajBZFJ%2Dmalaji71_CSP_MANGA15.CLIP_portrait_of_a_young_woman_with_short__23e9ab78%2Db3fd%2D43f8%2Dbb96%2D1e2f38871976.jpeg https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_cdd45518%2Dcc4d%2D4cd6%2D96f9%2Dc2aafb5a9d04.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_e5199102%2Dad12%2D41fe%2D8813%2D42f62709ce4a.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_a_c_31211b2e%2D1d11%2D4521%2D9a2d%2D073a6fcac8fe.png  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_IMG_7249.CR2_ISO_400_f16_11000s_50mm_MF_A_crazy_person_4a13a1fb%2D3eb8%2D4175%2D8fe4%2D8250ced7722e.png
 No me gusta lo que has hecho. Es muy "viejo". uiero algo más moderno. Las imágnees , com ña que tienes como "intensidad narrativa" debe esta en el encabezado, a dónd dice "keynote ha muerto". Un diseño más minimalista y la imágenes deben esta integrada, no como una galría, sino a lo lago de la web. Usa tonos blancos, tipografía más elegante
 1. El texto de Kynote ha muerto tiene que esta sobre la imagen que te dije: https://huggingface.co/datasets/Malaji71/imagenes/viewer?image-viewer=C51C628D9C17EE9D13C51B81E0DE00E6BF40B134. EL TECTO VA SOBRE LA IAMGEN. Elimina el menú. Y todos los botones.
+Ahora añade una segunda imagen a esta presentación que es sta: https://datasets-server.huggingface.co/assets/Malaji71/imagenes/--/24517f4d9d97cae07d3446e1a4c60bab0586a779/--/default/train/4/image/image.jpg?Expires=1747667165&Signature=bnr98m3MrrYWMVFj52O6EupK9ezh5VFxhm2Sn18eCZ7a68EmT-SxJ1jK-~NwzA6cy1bC5s-ZNVY8~ag9vF8Vd00xxbV0Em9uilUe1U2WrtbQyIV~rriiOUNoC1C5ucix0~lbh6r6lZp2FxOPqKi31lM6duvQQSaf9sz3G50s~56btYWVWcrBOPZkvI4M0ROlff7SFeOaJ94IT-Qg6BCXYa7~Q9o33WeKDqiafw~4FD7UhrOYE9Hv0J02pT-03iba8c8a3zdBLhkOJVLXXak3PwVfXTxQBVVM7qyVuf-FJORUNldZaFwKFL3K4641s4fApAd6XcuZDFuCxGZdsqr7Ig__&Key-Pair-Id=K3EI6M078Z3AC3 Y que l título diga: Que se mueran los feos. Y el suntítulo: Y todos los que los apollan.
+ahora prosigue con el resto de las imágenes: Imágenes:   https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=WhatsApp%20Image%202025%2D05%2D18%20at%2012.45.32.jpeg  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=magnific%2DfKE10HPbp6kO5KajBZFJ%2Dmalaji71_CSP_MANGA15.CLIP_portrait_of_a_young_woman_with_short__23e9ab78%2Db3fd%2D43f8%2Dbb96%2D1e2f38871976.jpeg https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_cdd45518%2Dcc4d%2D4cd6%2D96f9%2Dc2aafb5a9d04.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_A_m_e5199102%2Dad12%2D41fe%2D8813%2D42f62709ce4a.png https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_A001C003_140325_R28F.ari_ISO_800_f16_130s_135mm_MF_a_c_31211b2e%2D1d11%2D4521%2D9a2d%2D073a6fcac8fe.png  https://huggingface.co/datasets/Malaji71/imagenes/tree/main#:~:text=malaji71_IMG_7249.CR2_ISO_400_f16_11000s_50mm_MF_A_crazy_person_4a13a1fb%2D3eb8%2D4175%2D8fe4%2D8250ced7722e.png del dataser y crea textos para ilustrarlos. Estas son todas las imágnes del dataset: