Spaces:
Running
Running
crie tres grupos, admin que pode fazer toda configuração, criar, ativação e desativação de usuarios, pode fazer tudo no site, outro grupo de profissional, onde ele pode ter acesso aos jogos, resultados, e vincular o usuario que atravez de um codigo fique no espaço do profissional, cada profissional terá sua area e seus usuários (pacientes) vinculado a ele. e o terceiro grupo de usuários (pacientes) que só terão acesso ao que o profissional lhe atribuir, só terá acesso ao seu resultado e jogo.
c960b60
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Oráculo da Inteligência Emocional</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;500;700&display=swap'); | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .card-transition { | |
| transition: all 0.8s ease-in-out; | |
| } | |
| .card-flip { | |
| transition: transform 0.8s; | |
| transform-style: preserve-3d; | |
| } | |
| .flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .card-face { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #88ced0, #5eb3b5); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-face.front { | |
| background: linear-gradient(135deg, #c2e9eb, #a8dfe0); | |
| color: #2c7a7b; | |
| border-color: rgba(255, 255, 255, 0.5); | |
| } | |
| .card-back { | |
| border: 4px solid #88ced0; | |
| border-radius: 0.75rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-b from-cyan-50 to-teal-50"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0 w-full h-full"></div> | |
| <div class="relative z-10 w-full min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="py-6 px-4 sm:px-8"> | |
| <h1 class="text-4xl sm:text-5xl font-bold text-center gradient-text font-serif"> | |
| Oráculo da Inteligência Emocional | |
| </h1> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow w-full flex flex-col items-center px-6 py-6 sm:py-10"> | |
| <div class="w-full max-w-2x1 mx-4 bg-white bg-opacity-90 backdrop-blur-lg rounded-6xl shadow-xl overflow-hidden p-4 sm:p-8"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl sm:text-3xl font-semibold text-gray-800 mb-4"> | |
| Descubra sua reflexão para hoje | |
| </h2> | |
| <p class="text-gray-600 mb-6"> | |
| Puxe uma carta virtual e receba um exercício para praticar sua inteligência emocional. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 mb-10"> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">1</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-xs sm:text-sm text-gray-700 flex-grow flex items-center overflow-auto p-2"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">2</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">3</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">4</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">5</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">6</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">7</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">8</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">9</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-container aspect-[3/4]"> | |
| <div class="card-flip w-full h-full cursor-pointer"> | |
| <div class="card-face front rounded-xl shadow-lg flex items-center justify-center border-4"> | |
| <span class="text-2xl font-bold text-white">10</span> | |
| </div> | |
| <div class="card-face card-back bg-white rounded-xl shadow-lg p-4 flex flex-col"> | |
| <p class="text-sm text-gray-700 flex-grow flex items-center"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button id="draw-card" class="bg-gradient-to-r from-cyan-500 to-teal-600 hover:from-cyan-600 hover:to-teal-700 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="zap" class="w-5 h-5 mr-2"></i> | |
| Ideias do Gênio | |
| </button> | |
| <a href="diario.html" class="bg-white border border-cyan-200 hover:bg-cyan-50 text-cyan-700 font-medium py-3 px-8 rounded-full shadow transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="book" class="w-5 h-5 mr-2"></i> | |
| Diário | |
| </a> | |
| <a href="profissional.html" class="bg-white border border-cyan-200 hover:bg-cyan-50 text-cyan-700 font-medium py-3 px-8 rounded-full shadow transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="briefcase" class="w-5 h-5 mr-2"></i> | |
| Área Profissional | |
| </a> | |
| <a href="admin.html" class="bg-white border border-cyan-200 hover:bg-cyan-50 text-cyan-700 font-medium py-3 px-8 rounded-full shadow transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="shield" class="w-5 h-5 mr-2"></i> | |
| Admin | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-6 px-4 text-center text-gray-500 text-sm"> | |
| <p>© 2025 Oráculo da Inteligência Emocional. Todos os direitos reservados.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x88ced0, | |
| backgroundColor: 0xf0f9fa, | |
| size: 0.8 | |
| }); | |
| // Emotional cards data | |
| const emotionalCards = [ | |
| {id: 1, text: "Em momentos de tensão, respire profundamente por 4 segundos, segure por 4, solte por 4 e repita. Essa técnica simples ajuda a acalmar o corpo e clarear a mente."}, | |
| {id: 2, text: "Dar nome ao que você sente é o primeiro passo para regular as emoções. Diga para si mesmo: 'Estou sentindo raiva', 'Estou triste', e observe como isso já traz alívio."}, | |
| {id: 3, text: "Você não precisa eliminar emoções negativas — precisa aprender a ouvi-las. Qual emoção você tem evitado? O que ela pode estar tentando te mostrar?"}, | |
| {id: 4, text: "Pense em situações que te tiram do eixo. Qual é o padrão entre elas? Reconhecer esses gatilhos é o primeiro passo para transformá-los em oportunidades de crescimento."}, | |
| {id: 5, text: "Durante uma semana, anote ao fim do dia: o que sentiu, o que desencadeou isso, como reagiu e o que faria diferente. Isso ajuda a criar consciência emocional."}, | |
| {id: 6, text: "Desenhe uma linha do tempo da sua vida com momentos marcantes. Identifique as emoções que sentiu em cada fase. Quais aprendizados essas emoções trouxeram?"}, | |
| {id: 7, text: "Escolha um gesto (como pressionar os dedos) e associe a uma emoção positiva. Sempre que precisar, repita o gesto e traga à mente aquela sensação boa."}, | |
| {id: 8, text: "Feche os olhos e imagine um lugar seguro e calmo. Visualize os detalhes, sons, cheiros. Essa técnica ajuda a acalmar o sistema nervoso em momentos de estresse."}, | |
| {id: 9, text: "Por que será que ela está tão presente? O que você tem evitado sentir ou dizer para si mesmo?"}, | |
| {id: 10, text: "Você se permite sentir ou costuma se culpar por isso? Em que momentos reprime e em quais consegue se expressar com clareza?"}, | |
| {id: 11, text: "Seu corpo fala antes da mente entender. Observe batimentos acelerados, tensão muscular ou dores. Eles podem ser alertas emocionais importantes."}, | |
| {id: 12, text: "Antes de responder algo no impulso, pare, respire e conte até 10. Essa pausa pode ser suficiente para mudar sua reação e evitar arrependimentos."}, | |
| {id: 13, text: "Quantas decisões você tomou movido por uma emoção intensa? O que teria mudado se tivesse esperado a emoção passar?"}, | |
| {id: 14, text: "Você se permite ser vulnerável ou tenta parecer forte o tempo todo? Se abrir com segurança pode ser libertador e fortalecer vínculos."}, | |
| {id: 15, text: "Crie uma escala de 0 a 10 para cada emoção que sentir hoje. Observe quais estão mais intensas e pense: o que posso fazer para regular as mais desconfortáveis?"}, | |
| {id: 16, text: "Desenhe ou escolha emojis para representar como se sentiu ao longo do dia. Depois, reflita: o que influenciou essas emoções? Como lidou com elas?"}, | |
| {id: 17, text: "Diante de um pensamento negativo, pare e pergunte: 'Existe outra forma de ver isso?' Substitua o automático por um pensamento mais realista e equilibrado."}, | |
| {id: 18, text: "Pare (vermelho) e respire quando notar uma emoção intensa. Reflita (amarelo) sobre o que sente e o que precisa. Só então aja (verde) com consciência."}, | |
| {id: 19, text: "Com que frequência você para ouvir o que sente, sem julgamentos? O que seu silêncio emocional tem tentando te dizer?"}, | |
| {id: 20, text: "Muitas vezes sentimos raiva, tristeza ou ansiedade porque estamos com alguma necessidade não atendida. Qual é a sua real necessidade hoje?"}, | |
| {id: 21, text: "Evite dizer 'sou ansioso' ou 'sou explosivo'. Prefira 'estou ansioso' ou 'às vezes reajo com intensidade'. Você não é sua emoção, você a experimenta."}, | |
| {id: 22, text: "Sono, alimentação e rotina afetam diretamente seu equilíbrio emocional. Cuidar do corpo é um passo essencial para regular as emoções."}, | |
| {id: 23, text: "Como suas emoções influenciam suas relações? Você consegue conversar com clareza sobre o que sente ou guarda tudo até explodir?"}, | |
| {id: 24, text: "Pense em um momento difícil recente. Sua reação foi de julgamento ou de compaixão consigo mesmo? O que mudaria se você se tratasse com mais gentileza?"}, | |
| {id: 25, text: "Feche os olhos e traga atenção para seu corpo dos pés à cabeça. Observe onde há tensão, calor, frio ou dor. Respire nesses pontos e perceba o alívio."}, | |
| {id: 26, text: "Escreva o que você costuma dizer para si mesmo nos momentos de tristeza ou raiva. Depois, reescreva com mais acolhimento, como falaria com um amigo."}, | |
| {id: 27, text: "Olhe-se no espelho e diga em voz alta o que está sentindo. Validar suas emoções com palavras e olhar pode gerar alívio e auto conexão."}, | |
| {id: 28, text: "Dê nome à emoção e cronometre quanto tempo ela dura no corpo. Normalmente, ela diminui em poucos minutos. Você aprende que sentir é suportável."}, | |
| {id: 29, text: "Pense em algo que você faz quando está muito nervoso ou triste e que te ajuda a se acalmar. Como pode trazer isso mais para sua rotina?"}, | |
| {id: 30, text: "Quando alguém expressa algo emocional, sua tendência é acolher ou se defender? Como você pode ouvir mais antes de responder?"}, | |
| {id: 31, text: "Nem toda emoção precisa de solução imediata. Às vezes, só sentir, respirar e acolher já é suficiente para atravessar o que está presente."}, | |
| {id: 32, text: "Escolha algo simples para fazer ao fim do dia: escrever, ouvir música, caminhar. Ter um momento só seu ajuda na regulação emocional."}, | |
| {id: 33, text: "Tente não tomar decisões importantes quando estiver sob forte carga emocional. Dê tempo para a emoção baixar e a razão voltar."}, | |
| {id: 34, text: "Cada pessoa sente e lida com as emoções de formas diferentes. Comparar sua jornada emocional com a de outros só gera frustração."}, | |
| {id: 35, text: "Algumas pessoas foram ensinadas a esconder emoções. Reflita: que mensagem você recebeu sobre chorar, sentir medo ou raiva?"}, | |
| {id: 36, text: "Pense: como sua família lidava com emoções na infância? Isso ainda influencia seu jeito de sentir e expressar?"}, | |
| {id: 37, text: "Você se define por alguma emoção específica? ('Sou sempre ansioso', 'vivo estressado'). Como seria se você se permitisse ser mais do que isso?"}, | |
| {id: 38, text: "As emoções também revelam o que importa para você. O que te frustra, te magoa ou te emociona? O que isso diz sobre seus valores?"}, | |
| {id: 39, text: "Escolha uma emoção que tem aparecido com frequência. Escreva uma carta curta para ela: 'Querida raiva...' - diga o que sente, o que precisa e como gostaria de lidar com ela."}, | |
| {id: 40, text: "Desenhe um círculo com as principais emoções do dia. Pinte a intensidade de cada uma. Isso ajuda a visualizar e reconhecer a variedade emocional que você sente."}, | |
| {id: 41, text: "O que havia naquele momento? Como pode trazer mais disso para sua rotina?"}, | |
| {id: 42, text: "Identifique pessoas, hábitos ou lugares que te ajudam a se reconectar consigo mesmo. Como pode acessá-los com mais frequência?"}, | |
| {id: 43, text: "Escolha uma emoção e escreva: Quando ela aparece? Como ela se manifesta no seu corpo? O que você costuma fazer com ela?"}, | |
| {id: 44, text: "Anote: o que estou sentindo, o que estou pensando, e o que estou fazendo. Esse exercício ajuda a alinhar emoção, pensamento e ação."}, | |
| {id: 45, text: "Em crise ou ansiedade, foque nos sentidos: 5 coisas que vê, 4 que sente, 3 que ouve, 2 que cheira e 1 que saboreia. Isso ajuda a voltar ao presente."}, | |
| {id: 46, text: "Quando sentir raiva, escreva tudo o que gostaria de dizer. Não envie. Só escreva. Depois, rasgue ou queime com segurança. Esvaziar é diferente de reprimir."}, | |
| {id: 47, text: "Imagine alguém (ou uma parte sua) sentado à sua frente. Fale o que sente. Depois, troque de lugar e responda. Ajuda a entender conflitos internos."}, | |
| {id: 48, text: "Feche os olhos, cruze os braços e abrace a si mesmo. Fique assim por 1 minuto respirando fundo. É simples, mas poderoso para se acolher emocionalmente."}, | |
| {id: 49, text: "Por trás de toda emoção há uma necessidade. Medo pede proteção. Raiva, limites. Tristeza, acolhimento. O que sua emoção quer te mostrar hoje?"}, | |
| {id: 50, text: "Existe alguma emoção que você evita sentir? O que teme que aconteça se a deixar vir à tona?"} | |
| ]; | |
| // DOM Elements | |
| const card = document.getElementById('card'); | |
| const drawCardBtn = document.getElementById('draw-card'); | |
| const emotionalCardText = document.getElementById('emotional-card'); | |
| let currentCards = []; | |
| let displayedCards = []; | |
| // Initialize cards | |
| function initializeCards() { | |
| const cardContainers = document.querySelectorAll('.card-container'); | |
| const shuffled = [...emotionalCards].sort(() => 0.5 - Math.random()); | |
| currentCards = shuffled.slice(0, 10); | |
| cardContainers.forEach((container, index) => { | |
| const card = container.querySelector('.card-flip'); | |
| const cardBack = container.querySelector('.card-back p'); | |
| if (currentCards[index]) { | |
| cardBack.textContent = currentCards[index].text; | |
| } | |
| card.addEventListener('click', function() { | |
| // Close all other cards first | |
| document.querySelectorAll('.card-flip').forEach(otherCard => { | |
| if (otherCard !== this) { | |
| otherCard.classList.remove('flipped'); | |
| } | |
| }); | |
| // Toggle clicked card | |
| this.classList.toggle('flipped'); | |
| }); | |
| }); | |
| } | |
| // Get new set of cards | |
| function getNewCards() { | |
| // Reset if we've shown all cards | |
| if (displayedCards.length >= emotionalCards.length) { | |
| displayedCards = []; | |
| } | |
| // Filter out already displayed cards | |
| const availableCards = emotionalCards.filter(card => !displayedCards.includes(card.id)); | |
| // Shuffle and get 10 cards | |
| const shuffled = [...availableCards].sort(() => 0.5 - Math.random()); | |
| currentCards = shuffled.slice(0, 10); | |
| displayedCards.push(...currentCards.map(card => card.id)); | |
| // Update card backs | |
| const cardContainers = document.querySelectorAll('.card-container'); | |
| cardContainers.forEach((container, index) => { | |
| const card = container.querySelector('.card-flip'); | |
| const cardBack = container.querySelector('.card-back p'); | |
| if (currentCards[index]) { | |
| cardBack.textContent = currentCards[index].text; | |
| } | |
| // Flip all cards back to front | |
| card.classList.remove('flipped'); | |
| }); | |
| } | |
| // Flip card and show random message | |
| function drawRandomCard() { | |
| // Close all cards before getting new ones | |
| document.querySelectorAll('.card-flip').forEach(card => { | |
| card.classList.remove('flipped'); | |
| }); | |
| getNewCards(); | |
| } | |
| // Event Listeners | |
| drawCardBtn.addEventListener('click', drawRandomCard); | |
| // Initialize on load | |
| initializeCards(); | |
| feather.replace(); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |