Spaces:

Rwhehhehe
/

foi-g

Running

App Files Files Community

Rwhehhehe commited on May 1

Commit

d1c8079

verified ·

1 Parent(s): 19e904f

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: foi-g
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 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,882 @@
-<!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>
+    @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');
+    :root {
+      --primary: #354C2B;
+      --secondary: #A4B17B;
+      --accent: #4E653D;
+      --light: #F8F8F8;
+      --dark: #20331B;
+    }
+    body {
+      font-family: 'Open Sans', sans-serif;
+    }
+    h1, h2, h3, h4 {
+      font-family: 'Merriweather', serif;
+    }
+    .article-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    }
+    .tab-indicator {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 3px;
+      background-color: var(--accent);
+      transition: all 0.3s ease;
+    }
+    .notification-dot {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      width: 12px;
+      height: 12px;
+      background-color: #EF4444;
+      border-radius: 50%;
+    }
+    .fade-in {
+      animation: fadeIn 0.5s ease-in-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .markdown-content p {
+      margin-bottom: 1rem;
+    }
+    .markdown-content h3 {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin: 1.5rem 0 1rem;
+    }
+  </style>
+</head>
+<body class="bg-gray-50">
+  <!-- Header -->
+  <header class="bg-[var(--primary)] 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-[var(--secondary)] italic">Feito de alunos para alunos</p>
+        </div>
+        <div class="flex items-center space-x-4">
+          <div class="relative">
+            <button id="loginBtn" class="bg-[var(--accent)] hover:bg-[#3a5530] text-white px-4 py-2 rounded-lg transition">
+              <i class="fas fa-user mr-2"></i>Entrar
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <!-- Navigation -->
+  <nav class="bg-white shadow-md sticky top-0 z-10">
+    <div class="container mx-auto px-4">
+      <div class="relative flex overflow-x-auto">
+        <div class="flex space-x-1">
+          <button data-tab="home" class="tab-btn active relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition">
+            <i class="fas fa-home mr-2"></i>Início
+          </button>
+          <button data-tab="enviar" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition">
+            <i class="fas fa-paper-plane mr-2"></i>Enviar
+          </button>
+          <button data-tab="pendentes" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition">
+            <i class="fas fa-clock mr-2"></i>Pendentes
+            <span id="pendingCount" class="hidden ml-2 bg-[var(--accent)] text-white text-xs font-bold px-2 py-1 rounded-full">0</span>
+          </button>
+          <button data-tab="notificacoes" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition">
+            <i class="fas fa-bell mr-2"></i>Notificações
+            <span id="notificationCount" class="hidden ml-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">0</span>
+          </button>
+        </div>
+        <div class="tab-indicator"></div>
+      </div>
+    </div>
+  </nav>
+  <!-- Main Content -->
+  <main class="container mx-auto px-4 py-8">
+    <!-- Home Section -->
+    <section id="home" class="content-section active fade-in">
+      <div class="flex justify-between items-center mb-8">
+        <h2 class="text-2xl font-bold text-[var(--primary)]">Últimas Notícias</h2>
+        <div class="relative">
+          <select id="categoryFilter" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]">
+            <option value="Todas">Todas Categorias</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 class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+            <i class="fas fa-chevron-down"></i>
+          </div>
+        </div>
+      </div>
+      <div id="articles" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Articles will be loaded here -->
+      </div>
+      <div id="noArticles" class="hidden text-center py-12">
+        <i class="fas fa-newspaper text-5xl text-gray-300 mb-4"></i>
+        <h3 class="text-xl font-medium text-gray-500">Nenhuma matéria encontrada</h3>
+        <p class="text-gray-400">Seja o primeiro a publicar uma matéria!</p>
+      </div>
+    </section>
+    <!-- Submit Article Section -->
+    <section id="enviar" class="content-section restricted fade-in">
+      <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+        <h2 class="text-2xl font-bold text-[var(--primary)] mb-6">
+          <i class="fas fa-pen-alt 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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite o título da matéria" required>
+          </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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Seu nome" required>
+            </div>
+            <div>
+              <label for="artDate" class="block text-sm font-medium text-gray-700 mb-1">Data</label>
+              <input id="artDate" type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" required>
+            </div>
+          </div>
+          <div>
+            <label for="artCat" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
+            <select id="artCat" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" 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>
+          </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">O quê, quem, quando, onde, como e por quê.</p>
+            <textarea id="artLide" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Resumo inicial da matéria" required></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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Corpo principal da matéria" required></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">Encerramento, reflexões finais.</p>
+            <textarea id="artConc" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Finalização da matéria" required></textarea>
+          </div>
+          <div>
+            <label for="artImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem de Capa (Opcional)</label>
+            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
+              <div class="space-y-1 text-center">
+                <div class="flex text-sm text-gray-600">
+                  <label for="artImage" class="relative cursor-pointer bg-white rounded-md font-medium text-[var(--accent)] hover:text-[var(--primary)] focus-within:outline-none">
+                    <span>Carregar arquivo</span>
+                    <input id="artImage" type="file" class="sr-only" accept="image/*">
+                  </label>
+                  <p class="pl-1">ou arraste e solte</p>
+                </div>
+                <p class="text-xs text-gray-500">PNG, JPG, GIF até 5MB</p>
+              </div>
+            </div>
+            <div id="imagePreview" class="hidden mt-2">
+              <img id="previewImage" src="#" alt="Preview" class="max-h-48 rounded-lg">
+            </div>
+          </div>
+          <div class="pt-4">
+            <button type="submit" class="w-full bg-[var(--accent)] hover:bg-[#3a5530] text-white font-medium py-2 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!
+        </div>
+      </div>
+    </section>
+    <!-- Pending Articles Section -->
+    <section id="pendentes" class="content-section restricted fade-in">
+      <h2 class="text-2xl font-bold text-[var(--primary)] mb-6">
+        <i class="fas fa-clock mr-2"></i>Matérias Pendentes
+      </h2>
+      <div id="pendingList" class="space-y-6">
+        <!-- Pending articles will be loaded here -->
+      </div>
+      <div id="noPending" class="hidden text-center py-12">
+        <i class="fas fa-check-circle text-5xl text-gray-300 mb-4"></i>
+        <h3 class="text-xl font-medium text-gray-500">Nenhuma matéria pendente</h3>
+        <p class="text-gray-400">Todas as matérias foram revisadas</p>
+      </div>
+    </section>
+    <!-- Notifications Section -->
+    <section id="notificacoes" class="content-section restricted fade-in">
+      <h2 class="text-2xl font-bold text-[var(--primary)] mb-6">
+        <i class="fas fa-bell mr-2"></i>Notificações
+      </h2>
+      <div id="notificationList" class="space-y-4">
+        <!-- Notifications will be loaded here -->
+      </div>
+      <div id="noNotifications" class="hidden text-center py-12">
+        <i class="fas fa-bell-slash text-5xl text-gray-300 mb-4"></i>
+        <h3 class="text-xl font-medium text-gray-500">Nenhuma notificação</h3>
+        <p class="text-gray-400">Você não tem notificações no momento</p>
+      </div>
+    </section>
+  </main>
+  <!-- Footer -->
+  <footer class="bg-[var(--primary)] text-white py-8">
+    <div class="container mx-auto px-4">
+      <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-[var(--secondary)] italic">Feito de alunos para alunos</p>
+        </div>
+        <div class="flex space-x-6">
+          <a href="#" class="hover:text-[var(--secondary)] transition">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="#" class="hover:text-[var(--secondary)] transition">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="#" class="hover:text-[var(--secondary)] transition">
+            <i class="fab fa-twitter"></i>
+          </a>
+        </div>
+      </div>
+      <div class="mt-6 pt-6 border-t border-[var(--secondary)] text-center 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 w-full max-w-md">
+      <div class="p-6">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-xl font-bold text-[var(--primary)]">Entrar no 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="username" class="block text-sm font-medium text-gray-700 mb-1">Nome de Usuário</label>
+            <input id="username" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite seu usuário" required>
+          </div>
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
+            <input id="password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite sua senha" required>
+          </div>
+          <div class="pt-2">
+            <button type="submit" class="w-full bg-[var(--accent)] hover:bg-[#3a5530] text-white font-medium py-2 px-4 rounded-lg transition">
+              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>Usuário ou senha incorretos
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Article Modal -->
+  <div id="articleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
+    <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl my-8">
+      <div class="p-6">
+        <div class="flex justify-between items-start mb-4">
+          <div>
+            <h3 id="modalTitle" class="text-2xl font-bold text-[var(--primary)]"></h3>
+            <div class="flex items-center mt-2 text-sm text-gray-600">
+              <span id="modalAuthor" class="font-medium"></span>
+              <span class="mx-2">•</span>
+              <span id="modalDate"></span>
+              <span class="mx-2">•</span>
+              <span id="modalCategory" class="px-2 py-1 bg-gray-100 rounded-full text-xs"></span>
+            </div>
+          </div>
+          <button id="closeArticleModal" class="text-gray-500 hover:text-gray-700">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div id="modalImageContainer" class="hidden mb-6">
+          <img id="modalImage" src="#" alt="Article Image" class="w-full h-64 object-cover rounded-lg">
+        </div>
+        <div id="modalContent" class="markdown-content space-y-4">
+          <!-- Article content will be loaded here -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Data
+    let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [
+      { username: 'admin', password: 'admin123', role: 'admin' },
+      { username: 'editor', password: 'editor123', role: 'editor' },
+      { username: 'reporter', password: 'reporter123', role: 'reporter' }
+    ];
+    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;
+    let isLoggedIn = false;
+    // 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 articleModal = document.getElementById('articleModal');
+    const closeArticleModal = document.getElementById('closeArticleModal');
+    const categoryFilter = document.getElementById('categoryFilter');
+    const imagePreview = document.getElementById('imagePreview');
+    const previewImage = document.getElementById('previewImage');
+    const artImage = document.getElementById('artImage');
+    const pendingCount = document.getElementById('pendingCount');
+    const notificationCount = document.getElementById('notificationCount');
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      updateCounts();
+      renderHome();
+      renderPending();
+      renderNotifications();
+      // Check if user is already logged in (for demo purposes)
+      // In a real app, you'd check session or token
+      if (localStorage.getItem('jo_currentUser')) {
+        currentUser = JSON.parse(localStorage.getItem('jo_currentUser'));
+        isLoggedIn = true;
+        updateAuthUI();
+      }
+    });
+    // Event Listeners
+    loginBtn.addEventListener('click', () => {
+      if (isLoggedIn) {
+        logout();
+      } else {
+        loginModal.classList.remove('hidden');
+      }
+    });
+    closeModal.addEventListener('click', () => {
+      loginModal.classList.add('hidden');
+      loginError.classList.add('hidden');
+    });
+    closeArticleModal.addEventListener('click', () => {
+      articleModal.classList.add('hidden');
+    });
+    loginForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const username = document.getElementById('username').value;
+      const password = document.getElementById('password').value;
+      const user = authUsers.find(u => u.username === username && u.password === password);
+      if (user) {
+        currentUser = user;
+        isLoggedIn = true;
+        localStorage.setItem('jo_currentUser', JSON.stringify(user));
+        loginModal.classList.add('hidden');
+        loginError.classList.add('hidden');
+        updateAuthUI();
+      } else {
+        loginError.classList.remove('hidden');
+      }
+    });
+    categoryFilter.addEventListener('change', () => {
+      renderHome(categoryFilter.value);
+    });
+    artImage.addEventListener('change', function() {
+      if (this.files && this.files[0]) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+          imagePreview.classList.remove('hidden');
+          previewImage.src = e.target.result;
+        }
+        reader.readAsDataURL(this.files[0]);
+      } else {
+        imagePreview.classList.add('hidden');
+      }
+    });
+    // Tab Navigation
+    document.querySelectorAll('.tab-btn').forEach(tab => {
+      tab.addEventListener('click', () => {
+        if (tab.classList.contains('restricted') && !isLoggedIn) {
+          loginModal.classList.remove('hidden');
+          return;
+        }
+        // Update active tab
+        document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // Update tab indicator position
+        const indicator = document.querySelector('.tab-indicator');
+        indicator.style.width = `${tab.offsetWidth}px`;
+        indicator.style.left = `${tab.offsetLeft}px`;
+        // Show corresponding section
+        const tabId = tab.getAttribute('data-tab');
+        document.querySelectorAll('.content-section').forEach(section => {
+          section.classList.remove('active');
+          if (section.id === tabId) {
+            section.classList.add('active');
+            section.classList.add('fade-in');
+          }
+        });
+      });
+    });
+    // Form Submission
+    document.getElementById('formEnviar').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const fields = ['Title', 'Author', 'Date', 'Cat', 'Lide', 'Dev', 'Conc'].map(f =>
+        document.getElementById('art' + f)
+      );
+      if (fields.slice(0, 6).some(inp => !inp.value.trim())) {
+        alert('Preencha todos os campos obrigatórios!');
+        return;
+      }
+      const newArticle = {
+        title: fields[0].value,
+        author: fields[1].value,
+        date: fields[2].value,
+        category: document.getElementById('artCat').value,
+        lide: fields[4].value,
+        desenvolvimento: fields[5].value,
+        conclusao: fields[6].value,
+        imageUrl: ''
+      };
+      if (artImage.files.length) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          newArticle.imageUrl = e.target.result;
+          savePendingArticle(newArticle);
+        };
+        reader.readAsDataURL(artImage.files[0]);
+      } else {
+        savePendingArticle(newArticle);
+      }
+    });
+    // Functions
+    function logout() {
+      currentUser = null;
+      isLoggedIn = false;
+      localStorage.removeItem('jo_currentUser');
+      updateAuthUI();
+      // Hide restricted sections if visible
+      document.querySelectorAll('.content-section.restricted.active').forEach(section => {
+        section.classList.remove('active');
+      });
+      // Show home section
+      document.getElementById('home').classList.add('active');
+      // Reset active tab
+      document.querySelectorAll('.tab-btn').forEach(tab => tab.classList.remove('active'));
+      document.querySelector('[data-tab="home"]').classList.add('active');
+    }
+    function updateAuthUI() {
+      if (isLoggedIn) {
+        loginBtn.innerHTML = `<i class="fas fa-sign-out-alt mr-2"></i>Sair`;
+        document.querySelectorAll('.restricted').forEach(el => el.classList.remove('restricted'));
+        // Show notification and pending counts for editors/admins
+        if (currentUser.role === 'admin' || currentUser.role === 'editor') {
+          updateCounts();
+        }
+      } else {
+        loginBtn.innerHTML = `<i class="fas fa-user mr-2"></i>Entrar`;
+        document.querySelectorAll('.restricted').forEach(el => el.classList.add('restricted'));
+        pendingCount.classList.add('hidden');
+        notificationCount.classList.add('hidden');
+      }
+    }
+    function updateCounts() {
+      if (currentUser && (currentUser.role === 'admin' || currentUser.role === 'editor')) {
+        // Update pending count
+        if (pending.length > 0) {
+          pendingCount.textContent = pending.length;
+          pendingCount.classList.remove('hidden');
+        } else {
+          pendingCount.classList.add('hidden');
+        }
+        // Update notification count
+        const unreadNotifications = notifications.filter(n => !n.read).length;
+        if (unreadNotifications > 0) {
+          notificationCount.textContent = unreadNotifications;
+          notificationCount.classList.remove('hidden');
+        } else {
+          notificationCount.classList.add('hidden');
+        }
+      }
+    }
+    function savePendingArticle(article) {
+      pending.push(article);
+      localStorage.setItem('jo_pending', JSON.stringify(pending));
+      // Add notification for editors
+      if (currentUser && (currentUser.role === 'admin' || currentUser.role === 'editor')) {
+        notifications.unshift({
+          type: 'new',
+          message: `Nova matéria "${article.title}" enviada para aprovação.`,
+          author: article.author,
+          date: new Date().toISOString(),
+          read: false
+        });
+        localStorage.setItem('jo_notifications', JSON.stringify(notifications));
+      }
+      // Reset form
+      document.getElementById('formEnviar').reset();
+      imagePreview.classList.add('hidden');
+      // Show success message
+      const successMessage = document.getElementById('successMessage');
+      successMessage.classList.remove('hidden');
+      setTimeout(() => successMessage.classList.add('hidden'), 3000);
+      // Update UI
+      updateCounts();
+      renderPending();
+    }
+    function renderHome(filter = 'Todas') {
+      const container = document.getElementById('articles');
+      const noArticles = document.getElementById('noArticles');
+      container.innerHTML = '';
+      let articlesToShow = published;
+      if (filter !== 'Todas') {
+        articlesToShow = published.filter(a => a.category === filter);
+      }
+      if (!articlesToShow.length) {
+        noArticles.classList.remove('hidden');
+        return;
+      }
+      noArticles.classList.add('hidden');
+      articlesToShow.sort((a, b) => new Date(b.date) - new Date(a.date));
+      articlesToShow.forEach(article => {
+        const card = document.createElement('div');
+        card.className = 'article-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg';
+        card.innerHTML = `
+          ${article.imageUrl ? `<img src="${article.imageUrl}" alt="${article.title}" class="w-full h-48 object-cover">` : ''}
+          <div class="p-6">
+            <span class="inline-block px-3 py-1 text-xs font-semibold bg-[var(--secondary)] text-[var(--primary)] rounded-full mb-2">${article.category}</span>
+            <h3 class="text-xl font-bold mb-2 line-clamp-2">${article.title}</h3>
+            <p class="text-gray-600 text-sm mb-4 line-clamp-3">${article.lide}</p>
+            <div class="flex justify-between items-center">
+              <span class="text-sm text-gray-500">${formatDate(article.date)}</span>
+              <button onclick="openArticleModal('${article.title}')" class="text-sm font-medium text-[var(--accent)] hover:text-[var(--primary)] transition">
+                Ler mais <i class="fas fa-arrow-right ml-1"></i>
+              </button>
+            </div>
+          </div>
+        `;
+        container.appendChild(card);
+      });
+    }
+    function renderPending() {
+      const container = document.getElementById('pendingList');
+      const noPending = document.getElementById('noPending');
+      container.innerHTML = '';
+      if (!pending.length) {
+        noPending.classList.remove('hidden');
+        return;
+      }
+      noPending.classList.add('hidden');
+      pending.forEach((article, index) => {
+        const card = document.createElement('div');
+        card.className = 'bg-white rounded-xl shadow-md overflow-hidden';
+        card.innerHTML = `
+          <div class="p-6">
+            <div class="flex justify-between items-start mb-4">
+              <div>
+                <h3 class="text-lg font-bold">${article.title}</h3>
+                <div class="flex items-center mt-1 text-sm text-gray-600">
+                  <span class="font-medium">${article.author}</span>
+                  <span class="mx-2">•</span>
+                  <span>${formatDate(article.date)}</span>
+                  <span class="mx-2">•</span>
+                  <span class="px-2 py-1 bg-gray-100 rounded-full text-xs">${article.category}</span>
+                </div>
+              </div>
+            </div>
+            ${article.imageUrl ? `<img src="${article.imageUrl}" alt="${article.title}" class="w-full h-48 object-cover rounded-lg mb-4">` : ''}
+            <div class="space-y-4 mb-4">
+              <div>
+                <h4 class="font-medium text-sm text-gray-700 mb-1">Lide</h4>
+                <p class="text-gray-600">${article.lide}</p>
+              </div>
+              <div>
+                <h4 class="font-medium text-sm text-gray-700 mb-1">Desenvolvimento</h4>
+                <p class="text-gray-600 line-clamp-3">${article.desenvolvimento}</p>
+              </div>
+              <div>
+                <h4 class="font-medium text-sm text-gray-700 mb-1">Conclusão</h4>
+                <p class="text-gray-600">${article.conclusao}</p>
+              </div>
+            </div>
+            <div class="pt-4 border-t border-gray-200">
+              <textarea id="cmt${index}" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] mb-3" placeholder="Adicione um comentário (opcional)"></textarea>
+              <div class="flex justify-end space-x-3">
+                <button onclick="rejectArticle(${index})" class="bg-red-100 hover:bg-red-200 text-red-700 font-medium py-2 px-4 rounded-lg transition">
+                  <i class="fas fa-times mr-2"></i>Recusar
+                </button>
+                <button onclick="approveArticle(${index})" class="bg-green-100 hover:bg-green-200 text-green-700 font-medium py-2 px-4 rounded-lg transition">
+                  <i class="fas fa-check mr-2"></i>Aprovar
+                </button>
+              </div>
+            </div>
+          </div>
+        `;
+        container.appendChild(card);
+      });
+    }
+    function renderNotifications() {
+      const container = document.getElementById('notificationList');
+      const noNotifications = document.getElementById('noNotifications');
+      container.innerHTML = '';
+      if (!notifications.length) {
+        noNotifications.classList.remove('hidden');
+        return;
+      }
+      noNotifications.classList.add('hidden');
+      notifications.forEach((notification, index) => {
+        const notificationEl = document.createElement('div');
+        notificationEl.className = `p-4 rounded-lg border ${notification.read ? 'bg-white border-gray-200' : 'bg-blue-50 border-blue-200'}`;
+        notificationEl.innerHTML = `
+          <div class="flex justify-between items-start">
+            <div class="flex-1">
+              <div class="flex items-center mb-1">
+                <span class="font-medium ${notification.read ? 'text-gray-700' : 'text-blue-700'}">
+                  ${notification.type === 'approved' ? 'Matéria Aprovada' :
+                    notification.type === 'rejected' ? 'Matéria Recusada' : 'Nova Matéria'}
+                </span>
+                <span class="mx-2 text-gray-400">•</span>
+                <span class="text-sm ${notification.read ? 'text-gray-500' : 'text-blue-500'}">${formatDate(notification.date)}</span>
+              </div>
+              <p class="${notification.read ? 'text-gray-600' : 'text-blue-600'}">${notification.message}</p>
+              ${notification.author ? `<p class="text-xs mt-2 ${notification.read ? 'text-gray-500' : 'text-blue-500'}">Autor: ${notification.author}</p>` : ''}
+            </div>
+            <button onclick="markAsRead(${index})" class="ml-2 text-gray-400 hover:text-gray-600">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        `;
+        container.appendChild(notificationEl);
+      });
+    }
+    function approveArticle(index) {
+      const article = pending[index];
+      const comment = document.getElementById(`cmt${index}`).value;
+      // Add to published
+      published.unshift(article);
+      localStorage.setItem('jo_published', JSON.stringify(published));
+      // Remove from pending
+      pending.splice(index, 1);
+      localStorage.setItem('jo_pending', JSON.stringify(pending));
+      // Add notification
+      notifications.unshift({
+        type: 'approved',
+        message: `Sua matéria "${article.title}" foi aprovada.${comment ? ' Comentário: ' + comment : ''}`,
+        author: article.author,
+        date: new Date().toISOString(),
+        read: false
+      });
+      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
+      // Update UI
+      updateCounts();
+      renderPending();
+      renderHome();
+      renderNotifications();
+    }
+    function rejectArticle(index) {
+      const article = pending[index];
+      const comment = document.getElementById(`cmt${index}`).value || 'Sem comentários adicionais';
+      // Remove from pending
+      pending.splice(index, 1);
+      localStorage.setItem('jo_pending', JSON.stringify(pending));
+      // Add notification
+      notifications.unshift({
+        type: 'rejected',
+        message: `Sua matéria "${article.title}" foi recusada. Motivo: ${comment}`,
+        author: article.author,
+        date: new Date().toISOString(),
+        read: false
+      });
+      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
+      // Update UI
+      updateCounts();
+      renderPending();
+      renderNotifications();
+    }
+    function markAsRead(index) {
+      notifications[index].read = true;
+      localStorage.setItem('jo_notifications', JSON.stringify(notifications));
+      updateCounts();
+      renderNotifications();
+    }
+    function openArticleModal(title) {
+      const article = published.find(a => a.title === title);
+      if (!article) return;
+      document.getElementById('modalTitle').textContent = article.title;
+      document.getElementById('modalAuthor').textContent = article.author;
+      document.getElementById('modalDate').textContent = formatDate(article.date);
+      document.getElementById('modalCategory').textContent = article.category;
+      const imageContainer = document.getElementById('modalImageContainer');
+      const modalImage = document.getElementById('modalImage');
+      if (article.imageUrl) {
+        imageContainer.classList.remove('hidden');
+        modalImage.src = article.imageUrl;
+      } else {
+        imageContainer.classList.add('hidden');
+      }
+      const modalContent = document.getElementById('modalContent');
+      modalContent.innerHTML = `
+        <h3 class="text-lg font-bold text-[var(--primary)] mb-2">Lide</h3>
+        <p>${article.lide}</p>
+        <h3 class="text-lg font-bold text-[var(--primary)] mb-2">Desenvolvimento</h3>
+        <p>${article.desenvolvimento}</p>
+        <h3 class="text-lg font-bold text-[var(--primary)] mb-2">Conclusão</h3>
+        <p>${article.conclusao}</p>
+      `;
+      articleModal.classList.remove('hidden');
+    }
+    function formatDate(dateString) {
+      const options = { year: 'numeric', month: 'long', day: 'numeric' };
+      return new Date(dateString).toLocaleDateString('pt-BR', options);
+    }
+    // Initialize tab indicator position
+    window.addEventListener('load', () => {
+      const activeTab = document.querySelector('.tab-btn.active');
+      if (activeTab) {
+        const indicator = document.querySelector('.tab-indicator');
+        indicator.style.width = `${activeTab.offsetWidth}px`;
+        indicator.style.left = `${activeTab.offsetLeft}px`;
+      }
+    });
+  </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/foi-g" 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; --footer-bg: #20331B; --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; } nav .tab { background-color: var(--card-bg); color: var(--text-main); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } nav .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 { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; } .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; } </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: encerramento, reflexões finais." required></textarea> <input id="artImage" type="file" accept="image/*"> <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> // Dados let authUsers = JSON.parse(localStorage.getItem('jo_users')) || []; let pending = JSON.parse(localStorage.getItem('jo_pending') || '[]'); let published = JSON.parse(localStorage.getItem('jo_published') || '[]'); let notifications = JSON.parse(localStorage.getItem('jo_notifications') || '[]'); // Simulação de login já realizado // Em sua implementação real, use o sistema de login anterior // Render Home function renderHome(filter='Todas') { const container = document.getElementById('articles'); container.innerHTML = ''; let list = published; if (filter!=='Todas') list = published.filter(a=>a.category===filter); if (!list.length) { container.innerHTML='<p>Nenhuma matéria.</p>'; return; } list.sort((a,b)=>new Date(b.date)-new Date(a.date)); list.forEach(a=>{ const card=document.createElement('div');card.className='card'; card.innerHTML=`<h3>${a.title}</h3><p><strong>${a.author}</strong> - ${a.date}</p><p><em>${a.category}</em></p><p>${a.lide}</p>`; container.appendChild(card); }); } // Envio de matéria const form = document.getElementById('formEnviar'); form.addEventListener('submit',e=>{ e.preventDefault(); const fields=['Title','Author','Date','Cat','Lide','Dev','Conc'].map(f=>document.getElementById('art'+f)); if(fields.slice(0,6).some(inp=>!inp.value.trim())){alert('Preencha todos os campos!');return;} const reader = new FileReader(); const data={ title:fields[0].value, author:fields[1].value, date:fields[2].value, category:document.getElementById('artCat').value, lide:document.getElementById('artLide').value, desenvolvimento:document.getElementById('artDev').value, conclusao:document.getElementById('artConc').value, imageUrl:'' }; if(document.getElementById('artImage').files.length){ reader.onload=e2=>{ data.imageUrl=e2.target.result; savePending(data); }; reader.readAsDataURL(document.getElementById('artImage').files[0]); } else savePending(data); }); function savePending(data){ pending.push(data); localStorage.setItem('jo_pending',JSON.stringify(pending)); document.getElementById('formEnviar').reset(); 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}</p><p><em>${a.category}</em></p> <p>${a.lide}</p><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({type:'approved',message:Matéria "${a.title}" aprovada.,author:a.author}); saveAll(); renderPending(); renderNot(); renderHome(); } function reject(i){ const a=pending[i]; const cmt=document.getElementById('cmt'+i).value; pending.splice(i,1); notifications.push({type:'rejected',message:Matéria "${a.title}" recusada. Motivo: ${cmt},author:a.author}); saveAll(); renderPending(); renderNot(); } 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 renderNot(){ const n=document.getElementById('notificationList');n.innerHTML=''; notifications.forEach(x=>{ const d=document.createElement('div'); d.className='notification'; d.textContent=x.message; n.appendChild(d); }); } // Tabs 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'); }); // Init renderHome(); renderPending(); renderNot(); </script> </body> </html>