Spaces:

ioniacob
/

emojistory-generator

Running

App Files Files Community

ioniacob commited on Jun 25

Commit

169bcf4

verified ·

1 Parent(s): 2549310

Big IDEAS come from emojis

Browse files

Files changed (1) hide show

index.html +575 -19

index.html CHANGED Viewed

@@ -1,19 +1,575 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generador de Historias con Emojis</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8b5cf6',
+                        'primary-dark': '#7c3aed',
+                        secondary: '#f0f9ff',
+                        dark: '#1e293b',
+                        accent: '#d8b4fe'
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            overflow-x: hidden;
+            background: linear-gradient(135deg, #f0f9ff 0%, #d8b4fe 100%);
+            min-height: 100vh;
+        }
+        .emoji-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(139, 92, 246, 0.1);
+        }
+        .emoji-card:hover {
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 10px 15px rgba(139, 92, 246, 0.2);
+            z-index: 10;
+        }
+        .emoji-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+            gap: 1rem;
+        }
+        @media (min-width: 640px) {
+            .emoji-grid {
+                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+            }
+        }
+        .emoji-bubble {
+            animation: float 5s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .story-text {
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+        }
+        .selected-emoji {
+            position: relative;
+            display: inline-block;
+            transition: all 0.3s ease;
+        }
+        .selected-emoji::after {
+            content: '✕';
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background-color: #ef4444;
+            color: white;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            cursor: pointer;
+        }
+        .selected-emoji:hover::after {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <!-- Header with title and navigation -->
+    <header class="bg-white shadow-lg sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center">
+                <i class="fa-solid fa-face-smile-beam text-3xl text-primary mr-3"></i>
+                <h1 class="text-2xl md:text-3xl font-bold text-dark">EmojiStory Generator</h1>
+            </div>
+            <div class="mt-2 md:mt-0 flex space-x-2">
+                <button id="how-to-use-btn" class="px-4 py-2 rounded-full bg-secondary text-primary hover:bg-primary hover:text-white transition">
+                    <i class="fas fa-question-circle mr-2"></i>Instrucciones
+                </button>
+                <button id="api-config-btn" class="px-4 py-2 rounded-full bg-secondary text-primary hover:bg-primary hover:text-white transition">
+                    <i class="fas fa-cog mr-2"></i>Configurar API
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content Area -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Selected Emoji Bar -->
+        <div id="selection-bar" class="bg-white rounded-xl shadow-lg p-4 mb-8 flex flex-wrap items-center min-h-[60px]">
+            <h2 class="text-lg font-semibold text-dark mr-4">Tus emojis:</h2>
+            <div id="selected-emojis-container" class="flex flex-wrap gap-2">
+                <!-- Selected emojis will appear here -->
+            </div>
+            <button id="clear-selection" class="ml-auto text-sm px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
+                Limpiar selección
+            </button>
+        </div>
+        <!-- Search Area -->
+        <div class="text-center mb-10">
+            <div class="relative max-w-2xl mx-auto">
+                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                <input
+                    id="search-input"
+                    type="text"
+                    placeholder="Buscar emojis por nombre o categoría..."
+                    class="w-full py-4 pl-12 pr-40 rounded-full border-2 border-primary focus:border-primary-dark focus:ring-0 text-dark shadow-lg"
+                >
+                <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-full transition">
+                    Buscar
+                </button>
+            </div>
+        </div>
+        <!-- Story Generation Area -->
+        <div class="text-center my-12">
+            <button id="generate-btn" class="bg-gradient-to-r from-primary to-primary-dark hover:from-primary-dark hover:to-primary text-white font-bold py-4 px-8 rounded-full text-xl transition-all transform hover:scale-105 shadow-xl">
+                <i class="fas fa-wand-magic-sparkles mr-2"></i>Crear Historia
+            </button>
+        </div>
+        <!-- Story Display -->
+        <div id="story-container" class="hidden mt-12">
+            <div class="story-text bg-white rounded-2xl p-8 mb-6">
+                <h2 class="text-2xl font-bold text-center text-dark mb-6">Tu historia generada</h2>
+                <div id="story-content" class="text-lg text-gray-700 mb-6 leading-relaxed">
+                    <!-- Story content will be loaded here -->
+                </div>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <button id="copy-story" class="px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-full transition flex items-center">
+                        <i class="fas fa-copy mr-2"></i> Copiar historia
+                    </button>
+                    <button id="share-twitter" class="px-5 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-full transition flex items-center">
+                        <i class="fab fa-twitter mr-2"></i> Compartir en Twitter
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Emoji Grid -->
+        <div id="emoji-grid" class="emoji-grid">
+            <!-- Emojis will be loaded here dynamically -->
+        </div>
+    </main>
+    <!-- Modal Dialogs -->
+    <div id="how-to-use-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl p-8 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
+            <div class="flex justify-between items-start mb-6">
+                <h3 class="text-2xl font-bold text-dark">Instrucciones de Uso</h3>
+                <button id="close-how-to-use" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">1. Explorar Emojis</h4>
+                    <p class="text-gray-700">Navega por los emojis organizados en categorías. Puedes ver más usando las flechas de navegación.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">2. Seleccionar Emojis</h4>
+                    <p class="text-gray-700">Haz clic en cualquier emoji para añadirlo a tu selección en la barra superior. Verás aparecer una X sobre el emoji para poder eliminarlo.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">3. Buscar Emojis</h4>
+                    <p class="text-gray-700">Usa el buscador central para filtrar emojis por nombre o categoría.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">4. Generar Historia</h4>
+                    <p class="text-gray-700">Una vez que tengas seleccionados algunos emojis, pulsa "Crear Historia" para generar una historia única basada en tus emojis.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">5. Compartir</h4>
+                    <p class="text-gray-700">Puedes copiar tu historia o compartirla directamente en Twitter.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="api-config-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl p-8 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
+            <div class="flex justify-between items-start mb-6">
+                <h3 class="text-2xl font-bold text-dark">Configuración de API</h3>
+                <button id="close-api-config" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-6">
+                <div>
+                    <h4 class="font-semibold text-primary mb-2">Configuración de Hugging Face</h4>
+                    <p class="text-gray-700 mb-4">Para generar historias, necesitas una API key de Hugging Face. Cómo obtenerla:</p>
+                    <ol class="list-decimal pl-6 space-y-2 mb-4">
+                        <li>Crear una cuenta en <a href="https://huggingface.co" target="_blank" class="text-primary hover:underline">huggingface.co</a></li>
+                        <li>Ir a <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-primary hover:underline">Settings → Access Tokens</a></li>
+                        <li>Generar un nuevo token (seleccionar "Read" como permiso)</li>
+                        <li>Copiar y pegar el token aquí:</li>
+                    </ol>
+                    <div class="flex space-x-3">
+                        <input
+                            type="text"
+                            id="api-key-input"
+                            placeholder="Pega tu API key de Hugging Face aquí"
+                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
+                        >
+                        <button id="save-api-key" class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg">
+                            Guardar
+                        </button>
+                    </div>
+                </div>
+                <div class="pt-4 border-t border-gray-200">
+                    <h4 class="font-semibold text-primary mb-2">Alternativas de API</h4>
+                    <p class="text-gray-700 mb-3">Si Hugging Face no está disponible, puedes usar estos servicios alternativos:</p>
+                    <ul class="list-disc pl-6 space-y-2">
+                        <li><a href="https://openrouter.ai" target="_blank" class="text-primary hover:underline">OpenRouter AI</a>: Servicio con múltiples modelos de IA gratuitos.</li>
+                        <li><a href="https://deepai.org" target="_blank" class="text-primary hover:underline">DeepAI</a>: Plataforma de IA con API gratuita.</li>
+                        <li><a href="https://beta.openai.com" target="_blank" class="text-primary hover:underline">OpenAI</a>: ChatGPT con API (requiere registro y créditos iniciales gratuitos).</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Emoji database - categorized
+        const emojisByCategory = {
+            "caras": ["😀", "😁", "😂", "🤣", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😎", "😍", "😘", "🥰"],
+            "manos": ["👋", "🤚", "🖐", "✋", "🖖", "👌", "🤏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈", "👉", "👆"],
+            "animales": ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐵"],
+            "comida": ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🫐", "🍈", "🍒", "🍑", "🥭", "🍍"],
+            "naturaleza": ["🌵", "🎄", "🌲", "🌳", "🌴", "🌱", "🌿", "☘️", "🍀", "🎍", "🎋", "🍃", "🍂", "🍁", "🍄"],
+            "deportes": ["⚽", "🏀", "🏈", "⚾", "🎾", "🏐", "🏉", "🎱", "🏓", "🏸", "🥊", "🛹", "⛳", "🥏", "🏹"],
+            "objetos": ["⌚", "📱", "📲", "💻", "⌨️", "🖥", "🖨", "🖱", "🖲", "🕹", "📞", "☎️", "📟", "📠", "📺"],
+            "transporte": ["🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🛻", "🚚", "🚛", "🚜", "🏍"],
+            "símbolos": ["💖", "💝", "💘", "❤️", "💓", "💔", "💌", "💋", "💯", "💢", "💥", "💫", "💦", "💨", "🕳️"]
+        };
+        // UI elements
+        const searchInput = document.getElementById('search-input');
+        const searchBtn = document.getElementById('search-btn');
+        const emojiGrid = document.getElementById('emoji-grid');
+        const selectionBar = document.getElementById('selection-bar');
+        const selectedEmojisContainer = document.getElementById('selected-emojis-container');
+        const clearSelectionBtn = document.getElementById('clear-selection');
+        const generateBtn = document.getElementById('generate-btn');
+        const storyContainer = document.getElementById('story-container');
+        const storyContent = document.getElementById('story-content');
+        const copyStoryBtn = document.getElementById('copy-story');
+        const shareTwitterBtn = document.getElementById('share-twitter');
+        const howToUseModal = document.getElementById('how-to-use-modal');
+        const apiConfigModal = document.getElementById('api-config-modal');
+        const howToUseBtn = document.getElementById('how-to-use-btn');
+        const apiConfigBtn = document.getElementById('api-config-btn');
+        const closeHowToUse = document.getElementById('close-how-to-use');
+        const closeApiConfig = document.getElementById('close-api-config');
+        const apiKeyInput = document.getElementById('api-key-input');
+        const saveApiKeyBtn = document.getElementById('save-api-key');
+        // App state
+        let selectedEmojis = [];
+        let filteredEmojis = [];
+        const apiKey = localStorage.getItem('huggingface_api_key') || 'hf_wF';
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', () => {
+            loadEmojis();
+            loadSelectedFromUrl();
+            setupEventListeners();
+            if (!apiKey) {
+                showApiConfigModal();
+            }
+        });
+        // Load emojis from the database
+        function loadEmojis() {
+            emojiGrid.innerHTML = '';
+            for (const category in emojisByCategory) {
+                emojisByCategory[category].forEach(emoji => {
+                    const emojiElement = createEmojiElement(emoji, category);
+                    emojiGrid.appendChild(emojiElement);
+                });
+            }
+        }
+        // Create emoji element with animation and hover effects
+        function createEmojiElement(emoji, category) {
+            const div = document.createElement('div');
+            div.className = 'emoji-card bg-white rounded-xl p-4 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-accent';
+            div.innerHTML = `
+                <div class="text-4xl mb-1">${emoji}</div>
+                <span class="text-xs text-gray-500">${category}</span>
+            `;
+            div.addEventListener('click', () => {
+                toggleEmojiSelection(emoji);
+                div.classList.add('bg-accent');
+            });
+            return div;
+        }
+        // Toggle emoji selection
+        function toggleEmojiSelection(emoji) {
+            const index = selectedEmojis.indexOf(emoji);
+            if (index === -1) {
+                selectedEmojis.push(emoji);
+            } else {
+                selectedEmojis.splice(index, 1);
+            }
+            updateSelectedEmojisDisplay();
+            updateUrlParameters();
+        }
+        // Update the selected emojis display
+        function updateSelectedEmojisDisplay() {
+            selectedEmojisContainer.innerHTML = '';
+            if (selectedEmojis.length === 0) {
+                selectedEmojisContainer.innerHTML = '<p class="text-gray-500 italic">Selecciona algunos emojis para generar una historia</p>';
+                return;
+            }
+            selectedEmojis.forEach(emoji => {
+                const span = document.createElement('span');
+                span.className = 'selected-emoji text-3xl px-2 py-1 bg-white rounded-lg border-2 border-primary transition-all';
+                span.textContent = emoji;
+                span.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    toggleEmojiSelection(emoji);
+                });
+                selectedEmojisContainer.appendChild(span);
+            });
+        }
+        // Update URL with selected emojis as parameters
+        function updateUrlParameters() {
+            const url = new URL(window.location);
+            url.searchParams.set('emojis', selectedEmojis.join(''));
+            window.history.replaceState({}, '', url);
+        }
+        // Load selected emojis from URL parameters
+        function loadSelectedFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const emojisParam = urlParams.get('emojis');
+            if (emojisParam) {
+                selectedEmojis = Array.from(emojisParam);
+                updateSelectedEmojisDisplay();
+            }
+        }
+        // Filter emojis by name or category
+        function filterEmojis(query) {
+            emojiGrid.innerHTML = '';
+            const filtered = [];
+            query = query.toLowerCase();
+            for (const category in emojisByCategory) {
+                emojisByCategory[category].forEach(emoji => {
+                    if (category.toLowerCase().includes(query) || emoji.toLowerCase().includes(query)) {
+                        filtered.push({emoji, category});
+                    }
+                });
+            }
+            if (filtered.length === 0) {
+                emojiGrid.innerHTML = `
+                    <div class="col-span-full text-center py-12">
+                        <i class="fas fa-sad-tear text-5xl text-primary mb-4"></i>
+                        <p class="text-xl text-gray-700">No se encontraron emojis para "${query}"</p>
+                        <p class="text-gray-500 mt-2">Intenta buscar por nombre o categoría</p>
+                    </div>
+                `;
+            } else {
+                filtered.forEach(item => {
+                    const emojiElement = createEmojiElement(item.emoji, item.category);
+                    emojiGrid.appendChild(emojiElement);
+                });
+            }
+        }
+        // Show API configuration modal
+        function showApiConfigModal() {
+            apiKeyInput.value = apiKey;
+            apiConfigModal.classList.remove('hidden');
+        }
+        // Setup all event listeners
+        function setupEventListeners() {
+            // Search functionality
+            searchBtn.addEventListener('click', () => {
+                filterEmojis(searchInput.value.trim());
+            });
+            searchInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    filterEmojis(searchInput.value.trim());
+                }
+            });
+            // Clear selection
+            clearSelectionBtn.addEventListener('click', () => {
+                selectedEmojis = [];
+                updateSelectedEmojisDisplay();
+                updateUrlParameters();
+            });
+            // Generate story
+            generateBtn.addEventListener('click', async () => {
+                if (selectedEmojis.length === 0) {
+                    alert("Por favor selecciona al menos un emoji primero");
+                    return;
+                }
+                if (!apiKey) {
+                    alert("Necesitas configurar tu API key primero");
+                    showApiConfigModal();
+                    return;
+                }
+                try {
+                    generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generando...';
+                    generateBtn.disabled = true;
+                    const story = await generateStory(selectedEmojis);
+                    storyContent.innerHTML = `<p class="text-lg">${story}</p>`;
+                    storyContainer.classList.remove('hidden');
+                    window.scrollTo({
+                        top: document.getElementById('story-container').offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                } catch (error) {
+                    alert(`Error al generar la historia: ${error.message}`);
+                    console.error(error);
+                } finally {
+                    generateBtn.innerHTML = '<i class="fas fa-wand-magic-sparkles mr-2"></i>Crear Historia';
+                    generateBtn.disabled = false;
+                }
+            });
+            // Copy story to clipboard
+            copyStoryBtn.addEventListener('click', () => {
+                const textarea = document.createElement('textarea');
+                textarea.value = storyContent.innerText;
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textarea);
+                // Show feedback
+                const originalText = copyStoryBtn.innerHTML;
+                copyStoryBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Copiada!';
+                setTimeout(() => {
+                    copyStoryBtn.innerHTML = originalText;
+                }, 2000);
+            });
+            // Share to Twitter
+            shareTwitterBtn.addEventListener('click', () => {
+                const text = encodeURIComponent(`He creado una historia con emojis! Mira lo que generé:\n\n${storyContent.innerText}\n\n#EmojiStory`);
+                const url = `https://twitter.com/intent/tweet?text=${text}`;
+                window.open(url, '_blank');
+            });
+            // Modal controls
+            howToUseBtn.addEventListener('click', () => {
+                howToUseModal.classList.remove('hidden');
+            });
+            apiConfigBtn.addEventListener('click', () => {
+                showApiConfigModal();
+            });
+            closeHowToUse.addEventListener('click', () => {
+                howToUseModal.classList.add('hidden');
+            });
+            closeApiConfig.addEventListener('click', () => {
+                apiConfigModal.classList.add('hidden');
+            });
+            saveApiKeyBtn.addEventListener('click', () => {
+                const key = apiKeyInput.value.trim();
+                localStorage.setItem('huggingface_api_key', key);
+                apiConfigModal.classList.add('hidden');
+                alert("API key guardada con éxito!");
+            });
+        }
+        // Simulate story generation from an AI API
+        async function generateStory(emojis) {
+            // This is a simulation of an AI API call
+            // In a real implementation, this would be replaced with a fetch to Hugging Face or OpenRouter
+            // Simulate API call delay
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            // Map of possible stories for different emoji combinations
+            const stories = {
+                "😀": "Había una vez un personaje que siempre estaba feliz. Su sonrisa iluminaba todo a su alrededor.",
+                "🐶": "Un perrito juguetón corría por el parque persiguiendo una pelota. Era el alma de la fiesta en el parque.",
+                "🍕": "La mejor pizza del mundo tenía extra queso y todos los ingredientes que podías imaginar.",
+                "😀🐶": "Un niño feliz jugaba con su perrito en el parque. Juntos hacían travesuras.",
+                "😀🍕": "Nada hacía más feliz a Juan que una deliciosa pizza recién horneada.",
+                "🐶🍕": "El perro miraba con ojos suplicantes cada vez que sus dueños comían pizza.",
+                "😀🐶🍕": "María sonreía mientras compartía su pizza con su leal perrito, que meneaba la cola con alegría."
+            };
+            // For demo purposes, return a story based on the combination or a default story
+            const key = emojis.join('');
+            if (stories[key]) {
+                return stories[key];
+            }
+            // Create a generic story for the selected emojis
+            const emojiList = emojis.join(' ');
+            return `Esta es una historia especial para tus emojis seleccionados: ${emojiList}. Había una vez un lugar mágico donde estos símbolos cobraban vida. Juntos creaban aventuras increíbles. ¿Te imaginas qué pasaría si ${emojis[0]} conociera a ${emojis[1]}? Seguramente sería una aventura que nunca olvidarías.`;
+        }
+    </script>
+</body>
+</html>