Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Diário Emocional</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap'); | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-b from-cyan-50 to-teal-50"> | |
| <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 text-cyan-800 font-serif"> | |
| Diário Emocional | |
| </h1> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow w-full flex flex-col items-center px-4 py-4 sm:py-8"> | |
| <div class="w-full max-w-2xl mx-4 bg-white bg-opacity-90 backdrop-blur-lg rounded-3xl 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"> | |
| Registre suas emoções | |
| </h2> | |
| <p class="text-gray-600 mb-6"> | |
| Use este espaço para refletir sobre seus sentimentos e pensamentos. | |
| </p> | |
| </div> | |
| <form id="diary-form" class="space-y-6"> | |
| <div> | |
| <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Data</label> | |
| <input type="date" id="date" name="date" required | |
| class="w-full px-4 py-2 border border-cyan-200 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"> | |
| </div> | |
| <div> | |
| <label for="emotion" class="block text-sm font-medium text-gray-700 mb-1">Emoção predominante</label> | |
| <select id="emotion" name="emotion" | |
| class="w-full px-4 py-2 border border-cyan-200 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"> | |
| <option value="felicidade">Felicidade</option> | |
| <option value="tristeza">Tristeza</option> | |
| <option value="raiva">Raiva</option> | |
| <option value="medo">Medo</option> | |
| <option value="surpresa">Surpresa</option> | |
| <option value="ansiedade">Ansiedade</option> | |
| <option value="calma">Calma</option> | |
| <option value="confusao">Confusão</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="intensity" class="block text-sm font-medium text-gray-700 mb-1">Intensidade (1-10)</label> | |
| <input type="range" id="intensity" name="intensity" min="1" max="10" value="5" | |
| class="w-full h-2 bg-cyan-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>1 (Leve)</span> | |
| <span>5 (Moderado)</span> | |
| <span>10 (Intenso)</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="entry" class="block text-sm font-medium text-gray-700 mb-1">Registro</label> | |
| <textarea id="entry" name="entry" rows="6" | |
| class="w-full px-4 py-2 border border-cyan-200 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500" | |
| placeholder="Descreva o que está sentindo, o que aconteceu, seus pensamentos..."></textarea> | |
| </div> | |
| <div class="flex justify-center gap-4"> | |
| <button type="submit" 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"> | |
| Salvar | |
| </button> | |
| <button type="button" id="view-entries" 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"> | |
| Ver Registros | |
| </button> | |
| </div> | |
| </form> | |
| <div id="entries-container" class="hidden mt-8 space-y-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Seus Registros</h3> | |
| <div id="entries-list" class="space-y-4"></div> | |
| </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> | |
| <a href="dashboard.html" class="text-cyan-600 hover:text-cyan-800 mt-2 inline-block"> | |
| <i data-feather="grid" class="inline mr-1"></i> Voltar ao Dashboard | |
| </a> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Database configuration - REPLACE WITH YOUR DATABASE CREDENTIALS | |
| const dbConfig = { | |
| host: 'YOUR_DB_HOST', | |
| user: 'YOUR_DB_USER', | |
| password: 'YOUR_DB_PASSWORD', | |
| database: 'YOUR_DB_NAME', | |
| table: 'emotional_diary' | |
| }; | |
| // Form submission | |
| document.getElementById('diary-form').addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const entry = { | |
| date: document.getElementById('date').value, | |
| emotion: document.getElementById('emotion').value, | |
| intensity: document.getElementById('intensity').value, | |
| text: document.getElementById('entry').value, | |
| timestamp: new Date().toISOString() | |
| }; | |
| try { | |
| // Database connection and insertion would go here in a real backend | |
| // Example SQL for creating the table: | |
| /* | |
| CREATE TABLE emotional_diary ( | |
| id INT AUTO_INCREMENT PRIMARY KEY, | |
| date DATE NOT NULL, | |
| emotion VARCHAR(50) NOT NULL, | |
| intensity INT NOT NULL, | |
| text TEXT NOT NULL, | |
| timestamp DATETIME NOT NULL | |
| ); | |
| */ | |
| const response = await fetch('/api/diary', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(entry) | |
| }); | |
| if (response.ok) { | |
| alert('Registro salvo com sucesso!'); | |
| this.reset(); | |
| document.getElementById('date').valueAsDate = new Date(); | |
| } else { | |
| throw new Error('Falha ao salvar registro'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert('Erro ao salvar registro. Tente novamente.'); | |
| } | |
| }); | |
| // View entries button | |
| document.getElementById('view-entries').addEventListener('click', async function() { | |
| const entriesContainer = document.getElementById('entries-container'); | |
| const entriesList = document.getElementById('entries-list'); | |
| entriesList.innerHTML = ''; | |
| try { | |
| // Database query would go here in a real backend | |
| // Example SQL for retrieving entries: | |
| /* | |
| SELECT * FROM emotional_diary | |
| ORDER BY date DESC | |
| LIMIT 50; | |
| */ | |
| const response = await fetch('/api/diary'); | |
| const diaryEntries = await response.json(); | |
| if (diaryEntries.length === 0) { | |
| entriesList.innerHTML = '<p class="text-gray-500">Nenhum registro encontrado.</p>'; | |
| } else { | |
| diaryEntries.forEach(entry => { | |
| const entryDiv = document.createElement('div'); | |
| entryDiv.className = 'bg-cyan-50 p-4 rounded-lg'; | |
| const date = new Date(entry.date).toLocaleDateString(); | |
| const intensityStars = '⭐'.repeat(entry.intensity); | |
| entryDiv.innerHTML = ` | |
| <h4 class="font-medium text-cyan-800">${date} - ${entry.emotion.charAt(0).toUpperCase() + entry.emotion.slice(1)}</h4> | |
| <p class="text-sm text-cyan-600 mb-2">Intensidade: ${intensityStars} (${entry.intensity}/10)</p> | |
| <p class="text-gray-700">${entry.text}</p> | |
| `; | |
| entriesList.appendChild(entryDiv); | |
| }); | |
| } | |
| entriesContainer.classList.toggle('hidden'); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| entriesList.innerHTML = '<p class="text-red-500">Erro ao carregar registros.</p>'; | |
| entriesContainer.classList.remove('hidden'); | |
| } | |
| }); | |
| // Set today's date as default | |
| document.getElementById('date').valueAsDate = new Date(); | |
| // Database connection functions would go here in a real backend | |
| /* | |
| async function saveToDatabase(entry) { | |
| const conn = await mysql.createConnection(dbConfig); | |
| const [result] = await conn.execute( | |
| 'INSERT INTO emotional_diary (date, emotion, intensity, text, timestamp) VALUES (?, ?, ?, ?, ?)', | |
| [entry.date, entry.emotion, entry.intensity, entry.text, entry.timestamp] | |
| ); | |
| await conn.end(); | |
| return result; | |
| } | |
| async function getEntriesFromDatabase() { | |
| const conn = await mysql.createConnection(dbConfig); | |
| const [rows] = await conn.execute('SELECT * FROM emotional_diary ORDER BY date DESC LIMIT 50'); | |
| await conn.end(); | |
| return rows; | |
| } | |
| */ | |
| // Add CSRF token to requests | |
| function getCookie(name) { | |
| const value = `; ${document.cookie}`; | |
| const parts = value.split(`; ${name}=`); | |
| if (parts.length === 2) return parts.pop().split(';').shift(); | |
| } | |
| </script> | |
| </body> | |
| </html> |