Spaces:

Rwhehhehe
/

sim

Running

sim
File size: 31,383 Bytes
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jornal Oliveira</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>
    :root {
      --primary: #4E653D;
      --primary-light: #6B8C4A;
      --secondary: #354C2B;
      --accent: #A4B17B;
      --background: #F5F7F0;
      --text: #20331B;
      --text-light: #FFFFFF;
    }
    
    body {
      background-color: var(--background);
      color: var(--text);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .card-hover:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .preview-image {
      transition: all 0.3s ease;
    }
    
    .preview-image:hover {
      transform: scale(1.02);
    }
    
    .tab-active {
      background-color: var(--primary);
      color: white;
    }
    
    .notification-unread {
      border-left: 4px solid var(--primary-light);
    }
    
    #preview {
      max-height: 300px;
      object-fit: contain;
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-light);
    }
  </style>
</head>
<body class="min-h-screen flex flex-col">
  <!-- Header -->
  <header class="bg-gradient-to-r from-green-900 to-green-700 text-white shadow-lg">
    <div class="container mx-auto px-4 py-6">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left mb-4 md:mb-0">
          <h1 class="text-3xl md:text-4xl font-bold">Jornal Oliveira</h1>
          <p class="text-lg italic">Feito de alunos para alunos</p>
        </div>
        <div class="flex items-center space-x-4">
          <div id="userInfo" class="hidden bg-green-800 px-4 py-2 rounded-full flex items-center">
            <i class="fas fa-user-circle mr-2"></i>
            <span id="usernameDisplay"></span>
          </div>
          <button id="loginBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition">
            <i class="fas fa-sign-in-alt mr-2"></i>Entrar
          </button>
        </div>
      </div>
    </div>
  </header>

  <!-- Navigation -->
  <nav class="bg-green-800 text-white shadow-md sticky top-0 z-10">
    <div class="container mx-auto px-4">
      <div class="flex overflow-x-auto py-2 space-x-1">
        <button data-tab="home" class="tab-btn px-4 py-2 rounded-lg font-medium transition whitespace-nowrap active">
          <i class="fas fa-home mr-2"></i>Início
        </button>
        <button data-tab="enviar" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap">
          <i class="fas fa-paper-plane mr-2"></i>Enviar
        </button>
        <button data-tab="pendentes" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap">
          <i class="fas fa-clock mr-2"></i>Pendentes
        </button>
        <button data-tab="notificacoes" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap relative">
          <i class="fas fa-bell mr-2"></i>Notificações
          <span id="notificationBadge" class="hidden absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
        </button>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <main class="flex-grow container mx-auto px-4 py-6">
    <!-- Home Section -->
    <section id="home" class="content-section active">
      <div class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-green-900 border-b-2 border-green-200 pb-2">Últimas Notícias</h2>
        <div id="articles" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
      </div>
      
      <div class="mb-8">
        <h2 class="text-2xl font-bold mb-4 text-green-900 border-b-2 border-green-200 pb-2">Destaques</h2>
        <div id="featured" class="grid grid-cols-1 gap-6">
          <!-- Featured articles will be inserted here -->
        </div>
      </div>
    </section>

    <!-- Submit Section -->
    <section id="enviar" class="content-section restricted max-w-4xl mx-auto">
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-6 text-green-900">
          <i class="fas fa-edit mr-2"></i>Enviar Matéria
        </h2>
        
        <form id="formEnviar" class="space-y-4">
          <div>
            <label for="artTitle" class="block text-sm font-medium text-gray-700 mb-1">Título da Matéria</label>
            <input id="artTitle" type="text" placeholder="Digite o título da matéria" required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="artAuthor" class="block text-sm font-medium text-gray-700 mb-1">Autor</label>
              <input id="artAuthor" type="text" placeholder="Seu nome" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
            </div>
            
            <div>
              <label for="artDate" class="block text-sm font-medium text-gray-700 mb-1">Data</label>
              <input id="artDate" type="date" required
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
            </div>
          </div>
          
          <div>
            <label for="artCat" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
            <select id="artCat" required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
              <option value="">Selecione uma Categoria</option>
              <option>Notícias da Escola</option>
              <option>Entrevistas</option>
              <option>Opinião</option>
              <option>Cultura e Arte</option>
              <option>Esportes</option>
              <option>Humor</option>
              <option>Você Sabia?</option>
              <option>Projetos e Grêmios</option>
              <option>Fala Estudante</option>
              <option>Investigação</option>
            </select>
          </div>
          
          <div>
            <label for="artLide" class="block text-sm font-medium text-gray-700 mb-1">Lide</label>
            <p class="text-xs text-gray-500 mb-1">Responda: o quê, quem, quando, onde, como e por quê</p>
            <textarea id="artLide" rows="3" placeholder="Escreva o lide da matéria..." required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea>
          </div>
          
          <div>
            <label for="artDev" class="block text-sm font-medium text-gray-700 mb-1">Desenvolvimento</label>
            <p class="text-xs text-gray-500 mb-1">Detalhes, contexto, explicações</p>
            <textarea id="artDev" rows="5" placeholder="Desenvolva sua matéria..." required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea>
          </div>
          
          <div>
            <label for="artConc" class="block text-sm font-medium text-gray-700 mb-1">Conclusão</label>
            <p class="text-xs text-gray-500 mb-1">Reflexões finais</p>
            <textarea id="artConc" rows="3" placeholder="Conclua sua matéria..." required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea>
          </div>
          
          <div>
            <label for="artImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem (opcional)</label>
            <div class="flex items-center space-x-4">
              <label class="cursor-pointer bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition inline-flex items-center">
                <i class="fas fa-image mr-2"></i>
                Escolher Imagem
                <input id="artImage" type="file" accept="image/*" class="hidden">
              </label>
              <span id="fileName" class="text-sm text-gray-500">Nenhum arquivo selecionado</span>
            </div>
            <img id="preview" class="mt-2 rounded-lg hidden max-w-full h-auto max-h-64 object-contain mx-auto">
          </div>
          
          <div class="pt-4">
            <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
              <i class="fas fa-paper-plane mr-2"></i>Enviar para Aprovação
            </button>
          </div>
        </form>
        
        <div id="successMessage" class="hidden mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
          <i class="fas fa-check-circle mr-2"></i> Sua matéria foi enviada para aprovação com sucesso!
        </div>
      </div>
    </section>

    <!-- Pending Section -->
    <section id="pendentes" class="content-section restricted">
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-6 text-green-900">
          <i class="fas fa-clock mr-2"></i>Matérias Pendentes
        </h2>
        
        <div id="pendingList" class="space-y-6">
          <!-- Pending articles will be inserted here -->
        </div>
      </div>
    </section>

    <!-- Notifications Section -->
    <section id="notificacoes" class="content-section restricted max-w-4xl mx-auto">
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-green-900">
            <i class="fas fa-bell mr-2"></i>Notificações
          </h2>
          <button id="markAllRead" class="text-sm text-green-600 hover:text-green-800 transition">
            <i class="fas fa-check-double mr-1"></i>Marcar todas como lidas
          </button>
        </div>
        
        <div id="notificationList" class="space-y-4">
          <!-- Notifications will be inserted here -->
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="bg-green-900 text-white py-6">
    <div class="container mx-auto px-4 text-center">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <h3 class="text-xl font-bold">Jornal Oliveira</h3>
          <p class="text-sm">Feito de alunos para alunos</p>
        </div>
        
        <div class="flex space-x-4">
          <a href="#" class="hover:text-green-300 transition">
            <i class="fab fa-facebook-f text-lg"></i>
          </a>
          <a href="#" class="hover:text-green-300 transition">
            <i class="fab fa-instagram text-lg"></i>
          </a>
          <a href="#" class="hover:text-green-300 transition">
            <i class="fab fa-twitter text-lg"></i>
          </a>
        </div>
      </div>
      
      <div class="mt-4 pt-4 border-t border-green-700 text-sm">
        <p>© 2025 Jornal Oliveira. Todos os direitos reservados.</p>
      </div>
    </div>
  </footer>

  <!-- Login Modal -->
  <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold text-green-900">Acesso ao Sistema</h3>
        <button id="closeModal" class="text-gray-500 hover:text-gray-700">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <form id="loginForm" class="space-y-4">
        <div>
          <label for="loginName" class="block text-sm font-medium text-gray-700 mb-1">Nome do editor</label>
          <input id="loginName" type="text" placeholder="Digite seu nome" required
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
        </div>
        
        <div>
          <label for="loginPass" class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
          <input id="loginPass" type="password" placeholder="Digite sua senha" required
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition">
        </div>
        
        <div class="pt-2">
          <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition">
            <i class="fas fa-sign-in-alt mr-2"></i>Entrar
          </button>
        </div>
      </form>
      
      <div id="loginError" class="hidden mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg">
        <i class="fas fa-exclamation-circle mr-2"></i> Credenciais inválidas. Por favor, tente novamente.
      </div>
    </div>
  </div>

  <script>
    // Initialization
    let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [
      { name: 'Mikael Silva', pass: '1903', role: 'editor' },
      { name: 'Lorena Rangel', pass: 'Editor chefe 2', role: 'editor' }
    ];
    
    localStorage.setItem('jo_users', JSON.stringify(authUsers));
    
    let pending = JSON.parse(localStorage.getItem('jo_pending') || '[]');
    let published = JSON.parse(localStorage.getItem('jo_published') || '[]');
    let notifications = JSON.parse(localStorage.getItem('jo_notifications') || '[]');
    let currentUser = null;
    
    // DOM Elements
    const loginBtn = document.getElementById('loginBtn');
    const loginModal = document.getElementById('loginModal');
    const closeModal = document.getElementById('closeModal');
    const loginForm = document.getElementById('loginForm');
    const loginError = document.getElementById('loginError');
    const userInfo = document.getElementById('userInfo');
    const usernameDisplay = document.getElementById('usernameDisplay');
    const notificationBadge = document.getElementById('notificationBadge');
    const markAllRead = document.getElementById('markAllRead');
    
    // Event Listeners
    loginBtn.addEventListener('click', () => loginModal.classList.remove('hidden'));
    closeModal.addEventListener('click', () => loginModal.classList.add('hidden'));
    
    loginForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('loginName').value.trim();
      const pass = document.getElementById('loginPass').value;
      
      // Special password for demo
      if (pass.toLowerCase() === 'jornal oliveira') {
        currentUser = { name, role: 'editor' };
        handleSuccessfulLogin();
        return;
      }
      
      // Check against authorized users
      const user = authUsers.find(u => 
        u.name.toLowerCase() === name.toLowerCase() && u.pass === pass
      );
      
      if (user) {
        currentUser = user;
        handleSuccessfulLogin();
      } else {
        loginError.classList.remove('hidden');
      }
    });
    
    function handleSuccessfulLogin() {
      loginModal.classList.add('hidden');
      loginError.classList.add('hidden');
      document.getElementById('loginName').value = '';
      document.getElementById('loginPass').value = '';
      
      // Update UI
      loginBtn.classList.add('hidden');
      userInfo.classList.remove('hidden');
      usernameDisplay.textContent = currentUser.name;
      
      // Show restricted content
      document.querySelectorAll('.restricted').forEach(el => el.style.display = 'block');
      
      // Render all content
      renderAll();
      
      // Update notification badge
      updateNotificationBadge();
    }
    
    // Tab Navigation
    document.querySelectorAll('.tab-btn').forEach(tab => {
      tab.addEventListener('click', () => {
        // Update active tab
        document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        // Show corresponding section
        document.querySelectorAll('.content-section').forEach(section => {
          section.classList.remove('active');
        });
        document.getElementById(tab.dataset.tab).classList.add('active');
      });
    });
    
    // Image Preview
    const artImage = document.getElementById('artImage');
    const preview = document.getElementById('preview');
    const fileName = document.getElementById('fileName');
    
    artImage.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      
      fileName.textContent = file.name;
      
      const reader = new FileReader();
      reader.onload = (event) => {
        preview.src = event.target.result;
        preview.classList.remove('hidden');
      };
      reader.readAsDataURL(file);
    });
    
    // Form Submission
    const formEnviar = document.getElementById('formEnviar');
    const successMessage = document.getElementById('successMessage');
    
    formEnviar.addEventListener('submit', (e) => {
      e.preventDefault();
      
      const article = {
        title: document.getElementById('artTitle').value.trim(),
        author: document.getElementById('artAuthor').value.trim(),
        date: document.getElementById('artDate').value,
        category: document.getElementById('artCat').value,
        lide: document.getElementById('artLide').value.trim(),
        desenvolvimento: document.getElementById('artDev').value.trim(),
        conclusao: document.getElementById('artConc').value.trim(),
        imageUrl: preview.src || '',
        submittedBy: currentUser.name,
        submittedAt: new Date().toISOString()
      };
      
      pending.push(article);
      localStorage.setItem('jo_pending', JSON.stringify(pending));
      
      // Reset form
      formEnviar.reset();
      preview.classList.add('hidden');
      fileName.textContent = 'Nenhum arquivo selecionado';
      
      // Show success message
      successMessage.classList.remove('hidden');
      setTimeout(() => {
        successMessage.classList.add('hidden');
      }, 5000);
      
      // Add notification for editors
      notifications.push({
        message: `Nova matéria submetida: "${article.title}" por ${currentUser.name}`,
        read: false,
        date: new Date().toISOString(),
        type: 'submission'
      });
      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
      
      // Update UI
      renderPending();
      updateNotificationBadge();
    });
    
    // Render Home Page
    function renderHome() {
      const articlesContainer = document.getElementById('articles');
      const featuredContainer = document.getElementById('featured');
      
      articlesContainer.innerHTML = '';
      featuredContainer.innerHTML = '';
      
      if (!published.length) {
        createWelcome();
      }
      
      // Sort by date (newest first)
      published.sort((a, b) => new Date(b.date) - new Date(a.date));
      
      // Regular articles
      published.forEach((article, index) => {
        const card = createArticleCard(article);
        
        // First 3 articles are featured
        if (index < 3) {
          const featuredCard = card.cloneNode(true);
          featuredCard.classList.add('bg-green-50', 'border-l-4', 'border-green-500');
          featuredContainer.appendChild(featuredCard);
        }
        
        articlesContainer.appendChild(card);
      });
    }
    
    function createArticleCard(article) {
      const card = document.createElement('div');
      card.className = 'bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover';
      
      card.innerHTML = `
        ${article.imageUrl ? `
          <div class="h-48 overflow-hidden">
            <img src="${article.imageUrl}" alt="${article.title}" class="w-full h-full object-cover preview-image">
          </div>
        ` : ''}
        
        <div class="p-6">
          <div class="flex justify-between items-start mb-2">
            <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
              ${article.category}
            </span>
            <span class="text-sm text-gray-500">${formatDate(article.date)}</span>
          </div>
          
          <h3 class="text-xl font-bold text-green-900 mb-2">${article.title}</h3>
          <p class="text-sm text-gray-600 mb-3">Por <span class="font-medium">${article.author}</span></p>
          
          <p class="text-gray-700 mb-3">${article.lide}</p>
          
          <button class="text-green-600 hover:text-green-800 font-medium text-sm transition">
            Ler mais <i class="fas fa-arrow-right ml-1"></i>
          </button>
        </div>
      `;
      
      return card;
    }
    
    function createWelcome() {
      published.push({
        title: 'Bem-vindo ao Jornal Oliveira!',
        author: 'Equipe',
        date: new Date().toISOString(),
        category: 'Notícias da Escola',
        lide: 'Este é o primeiro artigo do nosso jornal escolar digital.',
        desenvolvimento: 'Aqui você encontrará as últimas notícias, eventos e artigos escritos por alunos para alunos. Nosso objetivo é manter toda a comunidade escolar informada e engajada.',
        conclusao: 'Participe você também! Envie suas matérias e faça parte deste projeto.',
        imageUrl: ''
      });
      
      localStorage.setItem('jo_published', JSON.stringify(published));
    }
    
    // Render Pending Articles
    function renderPending() {
      const pendingList = document.getElementById('pendingList');
      pendingList.innerHTML = '';
      
      if (!pending.length) {
        pendingList.innerHTML = `
          <div class="bg-gray-100 rounded-lg p-6 text-center">
            <i class="fas fa-inbox text-4xl text-gray-400 mb-4"></i>
            <p class="text-gray-600">Nenhuma matéria pendente no momento.</p>
          </div>
        `;
        return;
      }
      
      pending.forEach((article, index) => {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-lg shadow-md overflow-hidden';
        
        card.innerHTML = `
          <div class="p-6">
            <div class="flex justify-between items-start mb-4">
              <div>
                <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full mb-2">
                  Pendente
                </span>
                <h3 class="text-xl font-bold text-green-900">${article.title}</h3>
              </div>
              <span class="text-sm text-gray-500">${formatDate(article.date)}</span>
            </div>
            
            <div class="mb-4">
              <p class="text-sm text-gray-600 mb-1"><span class="font-medium">Autor:</span> ${article.author}</p>
              <p class="text-sm text-gray-600"><span class="font-medium">Categoria:</span> ${article.category}</p>
            </div>
            
            ${article.imageUrl ? `
              <div class="mb-4">
                <img src="${article.imageUrl}" alt="${article.title}" class="max-h-40 mx-auto rounded-lg">
              </div>
            ` : ''}
            
            <div class="mb-4">
              <h4 class="font-medium text-gray-800 mb-1">Lide:</h4>
              <p class="text-gray-700 text-sm">${article.lide}</p>
            </div>
            
            <div class="mb-6">
              <label for="cmt${index}" class="block text-sm font-medium text-gray-700 mb-1">Comentário:</label>
              <textarea id="cmt${index}" rows="2" placeholder="Digite seu comentário..."
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition text-sm"></textarea>
            </div>
            
            <div class="flex justify-end space-x-3">
              <button onclick="reject(${index})" class="bg-red-100 hover:bg-red-200 text-red-700 px-4 py-2 rounded-lg transition text-sm">
                <i class="fas fa-times mr-1"></i> Recusar
              </button>
              <button onclick="approve(${index})" class="bg-green-100 hover:bg-green-200 text-green-700 px-4 py-2 rounded-lg transition text-sm">
                <i class="fas fa-check mr-1"></i> Aprovar
              </button>
            </div>
          </div>
        `;
        
        pendingList.appendChild(card);
      });
    }
    
    // Approve Article
    function approve(index) {
      const article = pending[index];
      const comment = document.getElementById(`cmt${index}`).value;
      
      // Add editor info
      article.approvedBy = currentUser.name;
      article.approvedAt = new Date().toISOString();
      article.editorComment = comment;
      
      // Move to published
      published.push(article);
      pending.splice(index, 1);
      
      // Add notification
      notifications.push({
        message: `Sua matéria "${article.title}" foi aprovada! ${comment ? `Comentário: ${comment}` : ''}`,
        read: false,
        date: new Date().toISOString(),
        type: 'approval',
        recipient: article.submittedBy
      });
      
      saveAll();
      renderPending();
      renderHome();
      updateNotificationBadge();
    }
    
    // Reject Article
    function reject(index) {
      const article = pending[index];
      const comment = document.getElementById(`cmt${index}`).value;
      
      if (!comment) {
        alert('Por favor, forneça um motivo para a recusa.');
        return;
      }
      
      // Add rejection info
      article.rejectedBy = currentUser.name;
      article.rejectedAt = new Date().toISOString();
      article.rejectionReason = comment;
      
      // Remove from pending
      pending.splice(index, 1);
      
      // Add notification
      notifications.push({
        message: `Sua matéria "${article.title}" foi recusada. Motivo: ${comment}`,
        read: false,
        date: new Date().toISOString(),
        type: 'rejection',
        recipient: article.submittedBy
      });
      
      saveAll();
      renderPending();
      updateNotificationBadge();
    }
    
    // Render Notifications
    function renderNotifications() {
      const notificationList = document.getElementById('notificationList');
      notificationList.innerHTML = '';
      
      if (!notifications.length) {
        notificationList.innerHTML = `
          <div class="bg-gray-100 rounded-lg p-6 text-center">
            <i class="fas fa-bell-slash text-4xl text-gray-400 mb-4"></i>
            <p class="text-gray-600">Nenhuma notificação no momento.</p>
          </div>
        `;
        return;
      }
      
      // Filter notifications for current user (if not admin/editor)
      let userNotifications = notifications;
      if (currentUser.role !== 'editor') {
        userNotifications = notifications.filter(n => n.recipient === currentUser.name);
      }
      
      // Sort by date (newest first)
      userNotifications.sort((a, b) => new Date(b.date) - new Date(a.date));
      
      userNotifications.forEach((notification, index) => {
        const notificationElement = document.createElement('div');
        notificationElement.className = `bg-white rounded-lg shadow-sm p-4 ${!notification.read ? 'notification-unread' : ''}`;
        
        notificationElement.innerHTML = `
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <p class="text-gray-800">${notification.message}</p>
              <p class="text-xs text-gray-500 mt-1">${formatDate(notification.date)}</p>
            </div>
            <button onclick="markAsRead(${index})" class="ml-2 text-gray-400 hover:text-gray-600 transition">
              <i class="fas fa-check-circle"></i>
            </button>
          </div>
        `;
        
        notificationList.appendChild(notificationElement);
      });
    }
    
    // Mark Notification as Read
    function markAsRead(index) {
      notifications[index].read = true;
      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
      updateNotificationBadge();
      renderNotifications();
    }
    
    // Mark All Notifications as Read
    markAllRead.addEventListener('click', () => {
      notifications.forEach(n => n.read = true);
      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
      updateNotificationBadge();
      renderNotifications();
    });
    
    // Update Notification Badge
    function updateNotificationBadge() {
      let unreadCount = 0;
      
      if (currentUser) {
        if (currentUser.role === 'editor') {
          unreadCount = notifications.filter(n => !n.read).length;
        } else {
          unreadCount = notifications.filter(n => !n.read && n.recipient === currentUser.name).length;
        }
      }
      
      if (unreadCount > 0) {
        notificationBadge.textContent = unreadCount;
        notificationBadge.classList.remove('hidden');
      } else {
        notificationBadge.classList.add('hidden');
      }
    }
    
    // Save All Data
    function saveAll() {
      localStorage.setItem('jo_published', JSON.stringify(published));
      localStorage.setItem('jo_pending', JSON.stringify(pending));
      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
    }
    
    // Format Date
    function formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(dateString).toLocaleDateString('pt-BR', options);
    }
    
    // Render All Content
    function renderAll() {
      renderHome();
      renderPending();
      renderNotifications();
    }
    
    // Initialize
    updateNotificationBadge();
  </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=Rwhehhehe/sim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>