Spaces:
Running
Running
A single-page website where users type a personal thought. When they click ‘Understand Me’, the site displays 3 interpretations: Rational, Emotional, and Poetic. These are generated using keyword-matching, emotion categories, and random combinations of prewritten responses in JavaScript. No backend, no AI, no data leaves the browser. Optional ambient background music and slow fade-in for drama. - Initial Deployment
33155bb
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Thought Interpreter</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f8f9fa; | |
| color: #333; | |
| transition: background-color 0.5s ease; | |
| min-height: 100vh; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .interpretation-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| .interpretation-card.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .music-control { | |
| transition: all 0.3s ease; | |
| } | |
| .music-control:hover { | |
| transform: scale(1.1); | |
| } | |
| textarea { | |
| resize: none; | |
| min-height: 120px; | |
| } | |
| .bg-gradient { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12 fade-in"> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold text-gray-800 mb-4">Thought Interpreter</h1> | |
| <p class="text-lg text-gray-600">Share your thought and discover its hidden dimensions</p> | |
| <!-- Music Control --> | |
| <div class="mt-6 flex justify-center items-center space-x-4"> | |
| <button id="musicToggle" class="music-control bg-white p-3 rounded-full shadow-md hover:shadow-lg"> | |
| <i class="fas fa-music text-purple-600"></i> | |
| </button> | |
| <span id="musicStatus" class="text-sm text-gray-600">Background music: Off</span> | |
| <audio id="ambientMusic" loop> | |
| <source src="https://assets.mixkit.co/music/preview/mixkit-forest-flow-1380.mp3" type="audio/mpeg"> | |
| </audio> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Input Section --> | |
| <section class="mb-12 fade-in"> | |
| <div class="bg-white rounded-xl shadow-md p-6 md:p-8"> | |
| <h2 class="title-font text-2xl font-semibold text-gray-800 mb-4">What's on your mind?</h2> | |
| <textarea id="thoughtInput" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Type your thought here..."></textarea> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span id="charCount" class="text-sm text-gray-500">0/200 characters</span> | |
| <button id="interpretBtn" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| Understand Me | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Initially Hidden) --> | |
| <section id="resultsSection" class="hidden"> | |
| <h2 class="title-font text-2xl md:text-3xl font-semibold text-gray-800 mb-6 text-center">Your Thought Interpreted</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Rational Interpretation --> | |
| <div id="rationalCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-blue-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-brain text-blue-600"></i> | |
| </div> | |
| <h3 class="title-font text-xl font-semibold text-gray-800">Rational</h3> | |
| </div> | |
| <p id="rationalText" class="text-gray-700">Your logical interpretation will appear here...</p> | |
| </div> | |
| <!-- Emotional Interpretation --> | |
| <div id="emotionalCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-red-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-heart text-red-600"></i> | |
| </div> | |
| <h3 class="title-font text-xl font-semibold text-gray-800">Emotional</h3> | |
| </div> | |
| <p id="emotionalText" class="text-gray-700">Your emotional interpretation will appear here...</p> | |
| </div> | |
| <!-- Poetic Interpretation --> | |
| <div id="poeticCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-yellow-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-feather-alt text-yellow-600"></i> | |
| </div> | |
| <h3 class="title-font text-xl font-semibold text-gray-800">Poetic</h3> | |
| </div> | |
| <p id="poeticText" class="text-gray-700">Your poetic interpretation will appear here...</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button id="resetBtn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-300"> | |
| Start Over | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="text-center mt-16 text-sm text-gray-500 fade-in"> | |
| <p>All interpretations are generated in your browser. No data is collected or stored.</p> | |
| <p class="mt-2">© 2023 Thought Interpreter</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const thoughtInput = document.getElementById('thoughtInput'); | |
| const interpretBtn = document.getElementById('interpretBtn'); | |
| const charCount = document.getElementById('charCount'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const rationalText = document.getElementById('rationalText'); | |
| const emotionalText = document.getElementById('emotionalText'); | |
| const poeticText = document.getElementById('poeticText'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const musicToggle = document.getElementById('musicToggle'); | |
| const musicStatus = document.getElementById('musicStatus'); | |
| const ambientMusic = document.getElementById('ambientMusic'); | |
| // Interpretation databases | |
| const rationalResponses = { | |
| keywords: { | |
| 'work': ["This seems to be related to productivity and career aspirations.", "Work-related thoughts often stem from a desire for achievement or security.", "Professional concerns typically involve weighing costs and benefits."], | |
| 'love': ["Romantic considerations involve complex social and biological factors.", "Relationships can be analyzed through attachment theory frameworks.", "Love is a powerful motivator with measurable psychological effects."], | |
| 'future': ["Future-oriented thinking engages the prefrontal cortex's planning functions.", "Anticipating outcomes is a key survival mechanism in humans.", "Projection into the future involves probabilistic reasoning."], | |
| 'past': ["Nostalgia activates the brain's memory consolidation pathways.", "Reflection on past events helps with pattern recognition.", "Historical analysis can inform present decision-making."], | |
| 'money': ["Financial considerations trigger risk-assessment neural pathways.", "Economic decisions involve opportunity cost calculations.", "Monetary concerns often relate to Maslow's hierarchy of needs."], | |
| 'family': ["Kin relationships are fundamental to human social structures.", "Family dynamics follow established psychological patterns.", "Genetic and environmental factors shape familial bonds."], | |
| 'friend': ["Friendship satisfies the human need for social connection.", "Peer relationships follow reciprocity principles.", "Social bonds have measurable health benefits."], | |
| 'time': ["Time perception is a complex neurological phenomenon.", "Temporal concerns relate to resource allocation strategies.", "Chronological thinking is uniquely human."], | |
| 'dream': ["Dream analysis reveals subconscious processing mechanisms.", "Sleep states facilitate memory consolidation.", "Aspirations follow goal-setting theory principles."], | |
| 'change': ["Change management involves cognitive adaptation processes.", "Transition periods activate stress response systems.", "Neurological plasticity enables behavioral modification."] | |
| }, | |
| generic: [ | |
| "From a logical perspective, this thought appears to be about fundamental human needs.", | |
| "Rational analysis suggests this relates to basic decision-making processes.", | |
| "This seems to involve cognitive processes common to most individuals.", | |
| "A systematic approach would examine this through established psychological frameworks.", | |
| "Objectively speaking, this thought pattern follows predictable neural pathways." | |
| ] | |
| }; | |
| const emotionalResponses = { | |
| emotions: { | |
| 'happy': ["Your joy radiates from this thought like sunshine!", "This happiness speaks to your fulfilled spirit.", "What a beautiful expression of contentment!"], | |
| 'sad': ["This sorrow weighs heavy on your heart.", "Your pain is valid and understandable.", "Grief moves through you like a slow river."], | |
| 'angry': ["This fury burns with righteous energy!", "Your anger points to something that needs to change.", "Strong emotions demand to be heard."], | |
| 'fear': ["This anxiety wraps around you like fog.", "Your fear protects you, but don't let it control you.", "Uncertainty can be terrifying, but also transformative."], | |
| 'love': ["Your heart overflows with tender affection!", "This love connects you to something greater.", "What a powerful expression of connection!"], | |
| 'confused': ["This uncertainty leaves you feeling untethered.", "Not knowing can be its own kind of wisdom.", "The maze of your mind has many turns."], | |
| 'hopeful': ["Your optimism shines like a beacon!", "This hope carries the seeds of possibility.", "What wonderful anticipation fills your spirit!"], | |
| 'lonely': ["This isolation feels vast and empty.", "Your longing for connection is deeply human.", "Even in solitude, you're part of something larger."], | |
| 'excited': ["Your enthusiasm bubbles over with energy!", "This thrill courses through you like electricity!", "What vibrant anticipation you're experiencing!"], | |
| 'peaceful': ["This serenity flows through you like calm water.", "Your tranquility is a rare and precious gift.", "What beautiful stillness you've found."] | |
| }, | |
| generic: [ | |
| "This touches something deep within your emotional core.", | |
| "Your feelings about this are valid and important.", | |
| "This thought carries significant emotional weight.", | |
| "There's profound feeling behind these words.", | |
| "Emotionally, this resonates on multiple levels." | |
| ] | |
| }; | |
| const poeticResponses = { | |
| fragments: { | |
| start: [ | |
| "Like a whisper of dawn,", | |
| "As autumn leaves dancing,", | |
| "With the patience of mountains,", | |
| "Like a river carving stone,", | |
| "As stars tracing ancient paths,", | |
| "With the fragility of spider's silk,", | |
| "Like fire transforming all it touches,", | |
| "As tides obeying the moon's call,", | |
| "With the persistence of roots through rock,", | |
| "Like a melody half-remembered," | |
| ], | |
| middle: [ | |
| "your thought lingers", | |
| "your words take flight", | |
| "the meaning unfolds", | |
| "truth reveals itself", | |
| "understanding blossoms", | |
| "the heart responds", | |
| "silence speaks volumes", | |
| "light finds its way", | |
| "shadows grow shorter", | |
| "time stands still" | |
| ], | |
| end: [ | |
| "in the garden of the mind.", | |
| "between what is and what could be.", | |
| "where all rivers meet the sea.", | |
| "as the world turns toward morning.", | |
| "in the space between breaths.", | |
| "while the universe listens.", | |
| "beneath the surface of things.", | |
| "where endings become beginnings.", | |
| "as the veil grows thin.", | |
| "in the language of the soul." | |
| ] | |
| }, | |
| full: [ | |
| "Your thought is a feather drifting on the wind of consciousness.", | |
| "These words form constellations in the night sky of your mind.", | |
| "Like raindrops on a pond, your idea ripples outward.", | |
| "This is the song your heart sings when no one is listening.", | |
| "Your thought blooms like a flower in the desert after rain.", | |
| "These words are footprints in the sand of your psyche.", | |
| "Like a key turning in a long-forgotten lock, your idea opens doors.", | |
| "Your thought is a bridge between worlds seen and unseen.", | |
| "This is the color of your mind at this exact moment.", | |
| "Your words weave tapestries in the loom of understanding." | |
| ] | |
| }; | |
| // Emotion detection words | |
| const emotionWords = { | |
| 'happy': ['happy', 'joy', 'delight', 'pleasure', 'cheer', 'glad', 'content'], | |
| 'sad': ['sad', 'grief', 'sorrow', 'mourn', 'heartbreak', 'melancholy', 'blue'], | |
| 'angry': ['angry', 'mad', 'fury', 'rage', 'irritated', 'frustrated', 'annoyed'], | |
| 'fear': ['fear', 'scared', 'afraid', 'anxious', 'worried', 'nervous', 'terror'], | |
| 'love': ['love', 'adore', 'cherish', 'passion', 'affection', 'devotion', 'romance'], | |
| 'confused': ['confused', 'uncertain', 'doubt', 'puzzled', 'bewildered', 'perplexed', 'mystified'], | |
| 'hopeful': ['hope', 'optimistic', 'expect', 'anticipate', 'wish', 'faith', 'confidence'], | |
| 'lonely': ['lonely', 'alone', 'isolated', 'abandoned', 'forsaken', 'solitary', 'detached'], | |
| 'excited': ['excited', 'thrilled', 'eager', 'enthused', 'pumped', 'elated', 'animated'], | |
| 'peaceful': ['peace', 'calm', 'serene', 'tranquil', 'relaxed', 'placid', 'composed'] | |
| }; | |
| // Music control | |
| let musicPlaying = false; | |
| musicToggle.addEventListener('click', function() { | |
| if (musicPlaying) { | |
| ambientMusic.pause(); | |
| musicStatus.textContent = 'Background music: Off'; | |
| musicToggle.innerHTML = '<i class="fas fa-music text-purple-600"></i>'; | |
| } else { | |
| ambientMusic.play(); | |
| musicStatus.textContent = 'Background music: On'; | |
| musicToggle.innerHTML = '<i class="fas fa-pause text-purple-600"></i>'; | |
| } | |
| musicPlaying = !musicPlaying; | |
| }); | |
| // Character count and button enable/disable | |
| thoughtInput.addEventListener('input', function() { | |
| const count = this.value.length; | |
| charCount.textContent = `${count}/200 characters`; | |
| interpretBtn.disabled = count < 10 || count > 200; | |
| }); | |
| // Interpretation function | |
| interpretBtn.addEventListener('click', function() { | |
| const thought = thoughtInput.value.toLowerCase(); | |
| // Generate Rational interpretation | |
| let rationalInterpretation = generateRationalInterpretation(thought); | |
| // Generate Emotional interpretation | |
| let emotionalInterpretation = generateEmotionalInterpretation(thought); | |
| // Generate Poetic interpretation | |
| let poeticInterpretation = generatePoeticInterpretation(); | |
| // Display results | |
| rationalText.textContent = rationalInterpretation; | |
| emotionalText.textContent = emotionalInterpretation; | |
| poeticText.textContent = poeticInterpretation; | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| // Animate cards | |
| setTimeout(() => { | |
| document.getElementById('rationalCard').classList.add('show'); | |
| }, 200); | |
| setTimeout(() => { | |
| document.getElementById('emotionalCard').classList.add('show'); | |
| }, 400); | |
| setTimeout(() => { | |
| document.getElementById('poeticCard').classList.add('show'); | |
| }, 600); | |
| // Scroll to results | |
| setTimeout(() => { | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 800); | |
| }); | |
| // Reset function | |
| resetBtn.addEventListener('click', function() { | |
| thoughtInput.value = ''; | |
| charCount.textContent = '0/200 characters'; | |
| interpretBtn.disabled = true; | |
| resultsSection.classList.add('hidden'); | |
| // Reset cards animation | |
| document.getElementById('rationalCard').classList.remove('show'); | |
| document.getElementById('emotionalCard').classList.remove('show'); | |
| document.getElementById('poeticCard').classList.remove('show'); | |
| // Scroll to top | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Helper functions | |
| function generateRationalInterpretation(text) { | |
| // Check for keywords | |
| for (const [keyword, responses] of Object.entries(rationalResponses.keywords)) { | |
| if (text.includes(keyword)) { | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| } | |
| // Fallback to generic | |
| return rationalResponses.generic[Math.floor(Math.random() * rationalResponses.generic.length)]; | |
| } | |
| function generateEmotionalInterpretation(text) { | |
| // Detect emotion | |
| let detectedEmotion = null; | |
| for (const [emotion, words] of Object.entries(emotionWords)) { | |
| for (const word of words) { | |
| if (text.includes(word)) { | |
| detectedEmotion = emotion; | |
| break; | |
| } | |
| } | |
| if (detectedEmotion) break; | |
| } | |
| // Use specific response if emotion detected | |
| if (detectedEmotion && emotionalResponses.emotions[detectedEmotion]) { | |
| const responses = emotionalResponses.emotions[detectedEmotion]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Fallback to generic | |
| return emotionalResponses.generic[Math.floor(Math.random() * emotionalResponses.generic.length)]; | |
| } | |
| function generatePoeticInterpretation() { | |
| // 50% chance for full poem or constructed one | |
| if (Math.random() > 0.5) { | |
| return poeticResponses.full[Math.floor(Math.random() * poeticResponses.full.length)]; | |
| } else { | |
| const start = poeticResponses.fragments.start[Math.floor(Math.random() * poeticResponses.fragments.start.length)]; | |
| const middle = poeticResponses.fragments.middle[Math.floor(Math.random() * poeticResponses.fragments.middle.length)]; | |
| const end = poeticResponses.fragments.end[Math.floor(Math.random() * poeticResponses.fragments.end.length)]; | |
| return `${start} ${middle} ${end}`; | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dhishooooom/interpretor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |