Hugging Face's logo

Spaces:
Rwhehhehe
/
teste
Running

App Files Community
teste / index.html
Rwhehhehe's picture
Rwhehhehe
Add 2 files
d90a7de verified
Raw
History Blame Contribute Delete
22.3 kB
<!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: #4E653D;
 --primary-light: #697E50;
 --secondary: #A4B17B;
 --background: #F5F7F0;
 --text-dark: #20331B;
 --text-light: #FFFFFF;
 }
body {
 font-family: 'Open Sans', sans-serif;
 background-color: var(--background);
 color: var(--text-dark);
 }
.title-font {
 font-family: 'Merriweather', serif;
 }
.card-shadow {
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
.tab-animation {
 transition: all 0.3s ease;
 }
.fade-in {
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
 background: var(--primary-light);
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: var(--primary);
 }
 </style>
</head>
<body class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="bg-green-900 text-white py-4 px-6 shadow-md">
 <div class="container mx-auto">
 <h1 class="title-font text-3xl md:text-4xl font-bold mb-1">Jornal Oliveira</h1>
 <p class="text-green-200 italic">Feito de alunos para alunos</p>
 </div>
 </header>
<!-- Navigation -->
 <nav class="bg-green-800 text-white py-3 px-6 sticky top-0 z-10 shadow-sm">
 <div class="container mx-auto flex flex-wrap justify-center gap-2">
 <button data-tab="home" class="tab-animation px-4 py-2 rounded-md bg-green-700 hover:bg-green-600 font-medium flex items-center gap-2">
 <i class="fas fa-home"></i> Início
 </button>
 <button data-tab="enviar" class="tab-animation px-4 py-2 rounded-md bg-green-700 hover:bg-green-600 font-medium flex items-center gap-2 restricted hidden">
 <i class="fas fa-paper-plane"></i> Enviar
 </button>
 <button data-tab="avaliar" class="tab-animation px-4 py-2 rounded-md bg-green-700 hover:bg-green-600 font-medium flex items-center gap-2">
 <i class="fas fa-star"></i> Avaliar
 </button>
 <button data-tab="sugestoes" class="tab-animation px-4 py-2 rounded-md bg-green-700 hover:bg-green-600 font-medium flex items-center gap-2">
 <i class="fas fa-lightbulb"></i> Sugestões
 </button>
 <button id="loginBtn" class="tab-animation px-4 py-2 rounded-md bg-green-600 hover:bg-green-500 font-medium flex items-center gap-2">
 <i class="fas fa-sign-in-alt"></i> Login
 </button>
 </div>
 </nav>
<!-- Main Content -->
 <main class="flex-grow container mx-auto py-6 px-4">
 <!-- Home Section -->
 <section id="home" class="fade-in">
 <div class="max-w-4xl mx-auto">
 <h2 class="title-font text-2xl md:text-3xl font-bold mb-6 text-green-900 border-b pb-2">Últimas Matérias</h2>
<div id="articlesContainer" class="grid md:grid-cols-2 gap-6">
 <!-- Articles will be loaded here -->
 <div class="text-center py-10">
 <i class="fas fa-newspaper text-5xl text-green-700 mb-4"></i>
 <p class="text-lg">Carregando matérias...</p>
 </div>
 </div>
 </div>
 </section>
<!-- Submit Article Section -->
 <section id="enviar" class="hidden max-w-2xl mx-auto">
 <div class="bg-white rounded-lg p-6 card-shadow">
 <h2 class="title-font text-2xl font-bold mb-6 text-green-900 flex items-center gap-3">
 <i class="fas fa-pen-fancy"></i> Enviar Matéria
 </h2>
<div class="space-y-4">
 <div>
 <label for="artTitle" class="block text-sm font-medium text-gray-700 mb-1">Título</label>
 <input id="artTitle" type="text" placeholder="Título da matéria"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 </div>
<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"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 </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-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 </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-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 <option value="">Selecione uma categoria</option>
 <option value="Cultura">Cultura</option>
 <option value="Esportes">Esportes</option>
 <option value="Opinião">Opinião</option>
 <option value="Notícias">Notícias</option>
 <option value="Entrevista">Entrevista</option>
 </select>
 </div>
<div>
 <label for="artContent" class="block text-sm font-medium text-gray-700 mb-1">Conteúdo</label>
 <textarea id="artContent" rows="8" placeholder="Escreva sua matéria aqui..."
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600"></textarea>
 </div>
<button id="btnSubmit"
class="w-full bg-green-700 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center gap-2">
 <i class="fas fa-paper-plane"></i> Enviar Matéria
 </button>
 </div>
 </div>
 </section>
<!-- Evaluate Section -->
 <section id="avaliar" class="hidden max-w-2xl mx-auto">
 <div class="bg-white rounded-lg p-6 card-shadow">
 <h2 class="title-font text-2xl font-bold mb-6 text-green-900 flex items-center gap-3">
 <i class="fas fa-star-half-alt"></i> Avalie o Jornal
 </h2>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Sua avaliação</label>
 <div class="flex justify-center space-x-2 mb-4">
 <i class="far fa-star text-3xl cursor-pointer text-yellow-400 hover:text-yellow-500 rating-star" data-value="1"></i>
 <i class="far fa-star text-3xl cursor-pointer text-yellow-400 hover:text-yellow-500 rating-star" data-value="2"></i>
 <i class="far fa-star text-3xl cursor-pointer text-yellow-400 hover:text-yellow-500 rating-star" data-value="3"></i>
 <i class="far fa-star text-3xl cursor-pointer text-yellow-400 hover:text-yellow-500 rating-star" data-value="4"></i>
 <i class="far fa-star text-3xl cursor-pointer text-yellow-400 hover:text-yellow-500 rating-star" data-value="5"></i>
 </div>
 </div>
<div>
 <label for="evalComment" class="block text-sm font-medium text-gray-700 mb-1">Comentário (opcional)</label>
 <textarea id="evalComment" rows="4" placeholder="O que você achou do jornal?"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600"></textarea>
 </div>
<button id="btnEval"
class="w-full bg-green-700 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center gap-2">
 <i class="fas fa-check"></i> Enviar Avaliação
 </button>
 </div>
 </div>
 </section>
<!-- Suggestions Section -->
 <section id="sugestoes" class="hidden max-w-2xl mx-auto">
 <div class="bg-white rounded-lg p-6 card-shadow">
 <h2 class="title-font text-2xl font-bold mb-6 text-green-900 flex items-center gap-3">
 <i class="fas fa-lightbulb"></i> Envie uma Sugestão
 </h2>
<div class="space-y-4">
 <div>
 <label for="suggestText" class="block text-sm font-medium text-gray-700 mb-1">Sua sugestão</label>
 <textarea id="suggestText" rows="5" placeholder="O que podemos melhorar?"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600"></textarea>
 </div>
<button id="btnSuggest"
class="w-full bg-green-700 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-md transition duration-300 flex items-center justify-center gap-2">
 <i class="fas fa-paper-plane"></i> Enviar Sugestão
 </button>
 </div>
 </div>
 </section>
 </main>
<!-- 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 p-6 w-full max-w-md mx-4 card-shadow">
 <div class="flex justify-between items-center mb-4">
 <h3 class="title-font text-xl font-bold text-green-900">
 <i class="fas fa-sign-in-alt mr-2"></i> Login de Editor
 </h3>
 <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="space-y-4">
 <div>
 <label for="loginName" class="block text-sm font-medium text-gray-700 mb-1">Nome</label>
 <input id="loginName" type="text" placeholder="Seu nome"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 </div>
<div>
 <label for="loginPass" class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
 <input id="loginPass" type="password" placeholder="Sua senha"
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-600 focus:border-green-600">
 </div>
<button id="btnLogin"
class="w-full bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">
 Entrar
 </button>
<p class="text-sm text-gray-600 text-center">
 Senha padrão: <span class="font-semibold">jornal Oliveira</span>
 </p>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-green-900 text-white py-4 px-6">
 <div class="container mx-auto text-center">
 <p class="text-green-200">Jornal Oliveira &copy; <span id="currentYear"></span> - Todos os direitos reservados</p>
 <div class="flex justify-center space-x-4 mt-2">
 <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-twitter"></i></a>
 </div>
 </div>
 </footer>
<script>
 // Initialize data
 let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [
 { name: 'Mikael Silva', pass: 'Editor chefe 1' },
 { name: 'Lorena Rangel', pass: 'Editor chefe 2' }
 ];
 localStorage.setItem('jo_users', JSON.stringify(authUsers));
let isLogged = false;
 let currentRating = 0;
// Set current year in footer
 document.getElementById('currentYear').textContent = new Date().getFullYear();
// Tab switching
 document.querySelectorAll('[data-tab]').forEach(tab => {
 tab.addEventListener('click', () => {
 const tabId = tab.getAttribute('data-tab');
// Hide all sections
 document.querySelectorAll('main > section').forEach(section => {
 section.classList.add('hidden');
 });
// Show selected section
 document.getElementById(tabId).classList.remove('hidden');
 document.getElementById(tabId).classList.add('fade-in');
// Update active tab styling
 document.querySelectorAll('[data-tab]').forEach(t => {
 t.classList.remove('bg-green-600');
 t.classList.add('bg-green-700');
 });
 tab.classList.remove('bg-green-700');
 tab.classList.add('bg-green-600');
// Load articles if home tab
 if (tabId === 'home') {
 loadArticles();
 }
 });
 });
// Login modal
 document.getElementById('loginBtn').addEventListener('click', () => {
 document.getElementById('loginModal').classList.remove('hidden');
 });
document.getElementById('closeLoginModal').addEventListener('click', () => {
 document.getElementById('loginModal').classList.add('hidden');
 });
// Login functionality
 document.getElementById('btnLogin').addEventListener('click', () => {
 const name = document.getElementById('loginName').value.trim();
 const pass = document.getElementById('loginPass').value.trim();
const user = authUsers.find(u => u.name === name && u.pass === pass);
if (user || pass === 'jornal Oliveira') {
 showToast('Login bem-sucedido!', 'success');
 isLogged = true;
 document.getElementById('loginModal').classList.add('hidden');
// Show restricted tabs
 document.querySelectorAll('.restricted').forEach(tab => {
 tab.classList.remove('hidden');
 });
// Clear login fields
 document.getElementById('loginName').value = '';
 document.getElementById('loginPass').value = '';
 } else {
 showToast('Nome ou senha incorretos.', 'error');
 }
 });
// Submit article
 document.getElementById('btnSubmit').addEventListener('click', () => {
 if (!isLogged) {
 showToast('Você precisa estar logado para enviar uma matéria!', 'error');
 return;
 }
const title = document.getElementById('artTitle').value.trim();
 const author = document.getElementById('artAuthor').value.trim();
 const date = document.getElementById('artDate').value;
 const category = document.getElementById('artCat').value;
 const content = document.getElementById('artContent').value.trim();
if (!title || !author || !date || !category || !content) {
 showToast('Preencha todos os campos!', 'error');
 return;
 }
let pending = JSON.parse(localStorage.getItem('jo_pending')) || [];
 pending.push({
title,
author,
date: formatDate(date),
category,
content,
 approved: false
 });
 localStorage.setItem('jo_pending', JSON.stringify(pending));
showToast('Matéria enviada para aprovação!', 'success');
// Clear form
 document.getElementById('artTitle').value = '';
 document.getElementById('artAuthor').value = '';
 document.getElementById('artDate').value = '';
 document.getElementById('artCat').value = '';
 document.getElementById('artContent').value = '';
 });
// Rating stars
 document.querySelectorAll('.rating-star').forEach(star => {
 star.addEventListener('click', () => {
 const value = parseInt(star.getAttribute('data-value'));
 currentRating = value;
document.querySelectorAll('.rating-star').forEach(s => {
 if (parseInt(s.getAttribute('data-value')) <= value) {
 s.classList.remove('far');
 s.classList.add('fas');
 } else {
 s.classList.remove('fas');
 s.classList.add('far');
 }
 });
 });
 });
// Submit evaluation
 document.getElementById('btnEval').addEventListener('click', () => {
 const comment = document.getElementById('evalComment').value.trim();
if (currentRating === 0) {
 showToast('Por favor, selecione uma avaliação!', 'error');
 return;
 }
let evaluations = JSON.parse(localStorage.getItem('jo_evaluations')) || [];
 evaluations.push({
 rating: currentRating,
 comment,
 date: new Date().toISOString()
 });
 localStorage.setItem('jo_evaluations', JSON.stringify(evaluations));
showToast('Obrigado pela sua avaliação!', 'success');
// Reset form
 document.getElementById('evalComment').value = '';
 document.querySelectorAll('.rating-star').forEach(s => {
 s.classList.remove('fas');
 s.classList.add('far');
 });
 currentRating = 0;
 });
// Submit suggestion
 document.getElementById('btnSuggest').addEventListener('click', () => {
 const suggestion = document.getElementById('suggestText').value.trim();
if (!suggestion) {
 showToast('Por favor, escreva sua sugestão!', 'error');
 return;
 }
let suggestions = JSON.parse(localStorage.getItem('jo_suggestions')) || [];
 suggestions.push({
 text: suggestion,
 date: new Date().toISOString()
 });
 localStorage.setItem('jo_suggestions', JSON.stringify(suggestions));
showToast('Sugestão enviada com sucesso!', 'success');
 document.getElementById('suggestText').value = '';
 });
// Load articles for home page
 function loadArticles() {
 const articlesContainer = document.getElementById('articlesContainer');
 articlesContainer.innerHTML = '<div class="text-center py-10"><i class="fas fa-spinner fa-spin text-5xl text-green-700 mb-4"></i><p class="text-lg">Carregando matérias...</p></div>';
// Simulate loading
 setTimeout(() => {
 const approvedArticles = JSON.parse(localStorage.getItem('jo_pending')) || [];
if (approvedArticles.length === 0) {
 articlesContainer.innerHTML = `
 <div class="col-span-full text-center py-10">
 <i class="fas fa-newspaper text-5xl text-green-700 mb-4"></i>
 <p class="text-lg">Nenhuma matéria publicada ainda.</p>
 <p class="text-gray-600 mt-2">Seja o primeiro a contribuir!</p>
 </div>
 `;
 return;
 }
let html = '';
 approvedArticles.forEach(article => {
 html += `
 <div class="bg-white rounded-lg overflow-hidden card-shadow hover:shadow-lg transition duration-300">
 <div class="p-5">
 <div class="flex justify-between items-start mb-2">
 <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">
 ${article.category}
 </span>
 <span class="text-sm text-gray-500">${article.date}</span>
 </div>
 <h3 class="title-font text-xl font-bold mb-2 text-green-900">${article.title}</h3>
 <p class="text-gray-700 mb-4 line-clamp-3">${article.content}</p>
 <div class="flex justify-between items-center">
 <span class="text-sm text-gray-600">Por: ${article.author}</span>
 <button class="text-green-700 hover:text-green-600 font-medium text-sm">
 Ler mais <i class="fas fa-arrow-right ml-1"></i>
 </button>
 </div>
 </div>
 </div>
 `;
 });
articlesContainer.innerHTML = html;
 }, 800);
 }
// Helper functions
 function formatDate(dateString) {
 if (!dateString) return '';
 const date = new Date(dateString);
 return date.toLocaleDateString('pt-BR');
 }
function showToast(message, type) {
 const toast = document.createElement('div');
 toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-md shadow-lg text-white font-medium ${
 type === 'success' ? 'bg-green-600' : 'bg-red-600'
 }`;
 toast.innerHTML = `
 <div class="flex items-center gap-3">
 <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
 <span>${message}</span>
 </div>
 `;
 document.body.appendChild(toast);
setTimeout(() => {
 toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
 setTimeout(() => {
 toast.remove();
 }, 300);
 }, 3000);
 }
// Load articles on initial page load
 document.addEventListener('DOMContentLoaded', () => {
 loadArticles();
 });
 </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/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>