Spaces:

Rwhehhehe
/

sim

Running

App Files Files Community

Rwhehhehe commited on May 1

Commit

2983192

verified ·

1 Parent(s): 3aa2631

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +789 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sim
-emoji: 🌖
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sim
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,789 @@
-<!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="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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ <!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> <style> :root { --bg-main: #C3CA92; --header-bg: #354C2B; --card-bg: #A4B17B; --card-bg-alt: #859864; --button-primary: #4E653D; --button-secondary: #697E50; --text-main: #20331B; --text-light: #FFFFFF; } * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--bg-main); color: var(--text-main); font-family: Arial, sans-serif; } header { background-color: var(--header-bg); color: var(--text-light); padding: 1rem; text-align: center; } nav { background-color: var(--header-bg); display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem; } .tab { background-color: var(--card-bg); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; color: var(--text-main); } .tab.active { background-color: var(--button-primary); color: var(--text-light); } .content-section { display: none; padding: 1rem; } .content-section.active { display: block; } .card { background-color: var(--card-bg); padding: 1rem; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-right: 0.5rem; } .btn-primary { background-color: var(--button-primary); color: var(--text-light); } .btn-secondary { background-color: var(--button-secondary); color: var(--text-light); } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; } th { background-color: var(--card-bg-alt); } .notification { background: #f8d7da; color: #721c24; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 4px; } .hidden { display: none; } img.preview { max-width: 100%; height: auto; margin-top: 0.5rem; border-radius: 4px; } </style> </head> <body> <header> <h1>Jornal Oliveira</h1> <p>Feito de alunos para alunos</p> </header> <nav> <div class="tab active" data-tab="home">Início</div> <div class="tab restricted" data-tab="enviar">Enviar</div> <div class="tab restricted" data-tab="pendentes">Pendentes</div> <div class="tab restricted" data-tab="notificacoes">Notificações</div> </nav>  <section id="home" class="content-section active"> <div id="articles"></div> </section>  <section id="enviar" class="content-section restricted"> <h2>Enviar Matéria</h2> <form id="formEnviar"> <input id="artTitle" type="text" placeholder="Título da Matéria" required> <input id="artAuthor" type="text" placeholder="Autor" required> <input id="artDate" type="date" required> <select id="artCat" required> <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> <textarea id="artLide" rows="3" placeholder="Lide (o quê, quem, quando, onde, como e por quê)" required></textarea> <textarea id="artDev" rows="5" placeholder="Desenvolvimento (detalhes, contexto, explicações)" required></textarea> <textarea id="artConc" rows="3" placeholder="Conclusão (reflexões finais)" required></textarea> <input id="artImage" type="file" accept="image/*"> <img id="preview" class="preview hidden" alt="Pré-visualização"> <button type="submit" class="btn btn-primary">Enviar para Aprovação</button> </form> <p id="successMessage" class="hidden" style="color:green; margin-top:10px;">Sua matéria foi enviada para aprovação!</p> </section>  <section id="pendentes" class="content-section restricted"> <h2>Matérias Pendentes</h2> <div id="pendingList"></div> </section>  <section id="notificacoes" class="content-section restricted"> <h2>Notificações</h2> <div id="notificationList"></div> </section> <footer> <p>Jornal Oliveira © 2025</p> </footer><script> // Inicialização 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; // Login simulado (substitua por seu sistema de login) function simulateLogin() { const name = prompt('Nome do editor:'); const pass = prompt('Senha:'); if (pass.toLowerCase() === 'jornal oliveira') { currentUser = { name, role: 'editor' }; } else { const user = authUsers.find(u => u.name.toLowerCase() === name.toLowerCase().trim() && u.pass === pass); if (user) currentUser = user; } if (!currentUser) { alert('Login falhou'); return; } document.querySelectorAll('.restricted').forEach(el => el.style.display = 'block'); renderAll(); } simulateLogin(); // Render Home function renderHome() { const container = document.getElementById('articles'); container.innerHTML = ''; if (!published.length) createWelcome(); published.sort((a,b) => new Date(b.date) - new Date(a.date)); published.forEach(a => { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = ` <h3>${a.title}</h3> <p><strong>${a.author}</strong> - ${a.date} (<em>${a.category}</em>)</p> ${a.imageUrl ? `<img src="${a.imageUrl}" class="preview" alt="">` : ''} <p>${a.lide}</p> <p>${a.desenvolvimento}</p> <p>${a.conclusao}</p> `; container.appendChild(card); }); } function createWelcome() { published.push({ title: 'Bem-vindo ao Jornal Oliveira!', author:'Equipe', date: new Date().toLocaleDateString('pt-BR'), category:'Notícias da Escola', lide:'Este é nosso primeiro artigo.', desenvolvimento:'Aguarde novas matérias feitas por alunos.', conclusao:'Participe você também!', imageUrl:'' }); localStorage.setItem('jo_published', JSON.stringify(published)); } // Formulário de envio const previewImg = document.getElementById('preview'); document.getElementById('artImage').addEventListener('change', e=>{ const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => { previewImg.src = ev.target.result; previewImg.classList.remove('hidden'); }; reader.readAsDataURL(file); }); document.getElementById('formEnviar').addEventListener('submit', e=>{ e.preventDefault(); const data = { 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: previewImg.src || '' }; pending.push(data); localStorage.setItem('jo_pending', JSON.stringify(pending)); document.getElementById('formEnviar').reset(); previewImg.classList.add('hidden'); document.getElementById('successMessage').classList.remove('hidden'); renderPending(); }); // Render Pendentes function renderPending() { const list = document.getElementById('pendingList'); list.innerHTML=''; pending.forEach((a,i) => { const c = document.createElement('div'); c.className='card'; c.innerHTML = ` <h3>${a.title}</h3> <p><strong>${a.author}</strong> - ${a.date} (<em>${a.category}</em>)</p> ${a.imageUrl ? `<img src="${a.imageUrl}" class="preview" alt="">` : ''} <textarea id="cmt${i}" rows="2" placeholder="Comentário"></textarea><button class="btn btn-primary" onclick="approve(${i})">Aprovar</button> <button class="btn btn-secondary" onclick="reject(${i})">Recusar</button> `; list.appendChild(c); }); } function approve(i) { const a = pending[i]; a.comment = document.getElementById('cmt'+i).value; published.push(a); pending.splice(i,1); notifications.push({ message:Sua matéria "${a.title}" foi aprovada! }); saveAll(); renderPending(); renderHome(); renderNotifications(); } function reject(i) { const a = pending[i]; const cmt = document.getElementById('cmt'+i).value; pending.splice(i,1); notifications.push({ message:Sua matéria "${a.title}" foi recusada. Motivo: ${cmt} }); saveAll(); renderPending(); renderNotifications(); } function saveAll() { localStorage.setItem('jo_published', JSON.stringify(published)); localStorage.setItem('jo_pending', JSON.stringify(pending)); localStorage.setItem('jo_notifications', JSON.stringify(notifications)); } // Render Notificações function renderNotifications() { const n = document.getElementById('notificationList'); n.innerHTML=''; notifications.forEach(nt => { const d = document.createElement('div'); d.className='notification'; d.textContent = nt.message; n.appendChild(d); }); } // Controle de abas function renderAll() { renderHome(); renderPending(); renderNotifications(); } document.querySelectorAll('.tab').forEach(t => t.onclick = () => { document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active')); t.classList.add('active'); document.querySelectorAll('.content-section').forEach(s=>s.classList.remove('active')); document.getElementById(t.dataset.tab).classList.add('active'); }); // Iniciar renderAll(); </script> </body> </html>