Hugging Face's logo

Spaces:
maralvic
/
cont2
Running

App Files Community
cont2 / index.html
maralvic's picture
maralvic
Add 3 files
925d6ab verified
raw
history blame contribute delete
16.6 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Visualizador de Documentos | MVicente Advogados</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>
 .pdf-container {
 height: 80vh;
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 border-radius: 0.5rem;
 overflow: hidden;
 }
.loading-spinner {
 border: 4px solid rgba(0, 0, 0, 0.1);
 border-radius: 50%;
 border-top: 4px solid #3b82f6;
 width: 40px;
 height: 40px;
 animation: spin 1s linear infinite;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
.toolbar {
 transition: all 0.3s ease;
 }
.toolbar:hover {
 background-color: rgba(59, 130, 246, 0.1);
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <header class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-balance-scale text-blue-500 text-2xl mr-3"></i>
 <h1 class="text-xl font-bold text-gray-900">MVicente Advogados</h1>
 </div>
 <nav>
 <ul class="flex space-x-6">
 <li><a href="#" class="text-gray-600 hover:text-blue-500 transition">Início</a></li>
 <li><a href="#" class="text-gray-600 hover:text-blue-500 transition">Serviços</a></li>
 <li><a href="#" class="text-gray-600 hover:text-blue-500 transition">Contato</a></li>
 </ul>
 </nav>
 </div>
 </header>
<main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
 <div class="bg-white rounded-lg shadow-md p-6 mb-8">
 <div class="flex items-center justify-between mb-6">
 <h2 class="text-2xl font-bold text-gray-800 flex items-center">
 <i class="fas fa-file-pdf text-red-500 mr-3"></i>
 Documento Jurídico
 </h2>
 <div class="flex space-x-3">
 <button id="download-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center transition">
 <i class="fas fa-download mr-2"></i>
 Baixar
 </button>
 <button id="print-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-md flex items-center transition">
 <i class="fas fa-print mr-2"></i>
 Imprimir
 </button>
 </div>
 </div>
<div class="border border-gray-200 rounded-lg overflow-hidden">
 <div class="bg-gray-100 px-4 py-2 flex justify-between items-center">
 <div class="text-sm text-gray-600">
 <span id="page-info">Carregando documento...</span>
 </div>
 <div class="flex space-x-2">
 <button id="zoom-out" class="toolbar p-2 text-gray-600 hover:text-blue-500 rounded">
 <i class="fas fa-search-minus"></i>
 </button>
 <button id="zoom-reset" class="toolbar p-2 text-gray-600 hover:text-blue-500 rounded">
 <span class="text-sm font-medium">100%</span>
 </button>
 <button id="zoom-in" class="toolbar p-2 text-gray-600 hover:text-blue-500 rounded">
 <i class="fas fa-search-plus"></i>
 </button>
 </div>
 </div>
<div id="pdf-container" class="pdf-container bg-gray-100 flex items-center justify-center">
 <div id="loading" class="text-center">
 <div class="loading-spinner mx-auto mb-4"></div>
 <p class="text-gray-600">Carregando documento...</p>
 </div>
 </div>
<div class="bg-gray-100 px-4 py-2 flex justify-between items-center">
 <button id="prev-page" class="toolbar px-3 py-1 text-gray-600 hover:text-blue-500 rounded flex items-center">
 <i class="fas fa-chevron-left mr-2"></i>
 Anterior
 </button>
 <div class="flex items-center">
 <input type="number" id="page-num" class="w-12 text-center border border-gray-300 rounded px-2 py-1 text-sm" min="1" value="1">
 <span class="mx-2 text-gray-600">de</span>
 <span id="page-count" class="text-gray-600">0</span>
 </div>
 <button id="next-page" class="toolbar px-3 py-1 text-gray-600 hover:text-blue-500 rounded flex items-center">
 Próxima
 <i class="fas fa-chevron-right ml-2"></i>
 </button>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow-md p-6">
 <h3 class="text-lg font-medium text-gray-900 mb-4">Informações do Documento</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <h4 class="text-sm font-medium text-gray-500 mb-2">Título</h4>
 <p class="text-gray-800">Documento Jurídico - MVicente Advogados</p>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500 mb-2">Data de Publicação</h4>
 <p class="text-gray-800">Atualizado em: <span id="current-date"></span></p>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500 mb-2">Tamanho</h4>
 <p class="text-gray-800">Aproximadamente <span id="file-size">-</span> MB</p>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500 mb-2">Número de Páginas</h4>
 <p class="text-gray-800"><span id="total-pages">-</span> páginas</p>
 </div>
 </div>
 </div>
 </main>
<footer class="bg-gray-800 text-white py-8">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <h3 class="text-lg font-medium mb-4">MVicente Advogados</h3>
 <p class="text-gray-300">Soluções jurídicas completas e personalizadas para sua necessidade.</p>
 </div>
 <div>
 <h3 class="text-lg font-medium mb-4">Contato</h3>
 <ul class="space-y-2">
 <li class="flex items-center text-gray-300">
 <i class="fas fa-phone mr-2"></i> (XX) XXXX-XXXX
 </li>
 <li class="flex items-center text-gray-300">
 <i class="fas fa-envelope mr-2"></i> contato@mvicente.adv.br
 </li>
 <li class="flex items-center text-gray-300">
 <i class="fas fa-map-marker-alt mr-2"></i> Endereço Completo
 </li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-medium mb-4">Redes Sociais</h3>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fab fa-facebook-f text-xl"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fab fa-twitter text-xl"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fab fa-linkedin-in text-xl"></i>
 </a>
 <a href="#" class="text-gray-300 hover:text-white transition">
 <i class="fab fa-instagram text-xl"></i>
 </a>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
 <p>© 2023 MVicente Advogados. Todos os direitos reservados.</p>
 </div>
 </div>
 </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
 <script>
 // Set PDF.js worker path
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
// PDF document variables
 let pdfDoc = null,
 pageNum = 1,
 pageRendering = false,
 pageNumPending = null,
 scale = 1.0,
 canvas = null,
 ctx = null;
// Set current date
 document.getElementById('current-date').textContent = new Date().toLocaleDateString('pt-BR');
// Initialize PDF viewer
 function initPDFViewer() {
 canvas = document.createElement('canvas');
 ctx = canvas.getContext('2d');
 document.getElementById('pdf-container').appendChild(canvas);
// Load the PDF
 const loadingTask = pdfjsLib.getDocument('https://mvicente.adv.br/cont/images.pdf');
loadingTask.promise.then(function(pdf) {
 pdfDoc = pdf;
 document.getElementById('page-count').textContent = pdf.numPages;
 document.getElementById('total-pages').textContent = pdf.numPages;
// Estimate file size (very rough estimation)
 const estimatedSize = (pdf._pdfInfo.length / (1024 * 1024)).toFixed(2);
 document.getElementById('file-size').textContent = estimatedSize;
// Hide loading spinner
 document.getElementById('loading').style.display = 'none';
// Render the first page
 renderPage(pageNum);
 }).catch(function(error) {
 console.error('Error loading PDF:', error);
 document.getElementById('loading').innerHTML = `
 <div class="text-red-500">
 <i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
 <p>Erro ao carregar o documento. Por favor, tente novamente.</p>
 </div>
 `;
 });
 }
// Render a PDF page
 function renderPage(num) {
 pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
 const viewport = page.getViewport({ scale: scale });
 canvas.height = viewport.height;
 canvas.width = viewport.width;
// Update page info
 document.getElementById('page-info').textContent = `Página ${num} de ${pdfDoc.numPages}`;
 document.getElementById('page-num').value = num;
const renderContext = {
 canvasContext: ctx,
 viewport: viewport
 };
const renderTask = page.render(renderContext);
renderTask.promise.then(function() {
 pageRendering = false;
 if (pageNumPending !== null) {
 renderPage(pageNumPending);
 pageNumPending = null;
 }
 });
 });
 }
// Queue rendering of a new page
 function queueRenderPage(num) {
 if (pageRendering) {
 pageNumPending = num;
 } else {
 renderPage(num);
 }
 }
// Go to previous page
 function onPrevPage() {
 if (pageNum <= 1) {
 return;
 }
 pageNum--;
 queueRenderPage(pageNum);
 }
// Go to next page
 function onNextPage() {
 if (pageNum >= pdfDoc.numPages) {
 return;
 }
 pageNum++;
 queueRenderPage(pageNum);
 }
// Zoom in
 function zoomIn() {
 scale += 0.25;
 document.getElementById('zoom-reset').innerHTML = `<span class="text-sm font-medium">${Math.round(scale * 100)}%</span>`;
 queueRenderPage(pageNum);
 }
// Zoom out
 function zoomOut() {
 if (scale <= 0.5) {
 return;
 }
 scale -= 0.25;
 document.getElementById('zoom-reset').innerHTML = `<span class="text-sm font-medium">${Math.round(scale * 100)}%</span>`;
 queueRenderPage(pageNum);
 }
// Reset zoom
 function zoomReset() {
 scale = 1.0;
 document.getElementById('zoom-reset').innerHTML = `<span class="text-sm font-medium">100%</span>`;
 queueRenderPage(pageNum);
 }
// Go to specific page
 function goToPage() {
 const num = parseInt(document.getElementById('page-num').value);
 if (num > 0 && num <= pdfDoc.numPages) {
 pageNum = num;
 queueRenderPage(pageNum);
 } else {
 document.getElementById('page-num').value = pageNum;
 }
 }
// Download PDF
 function downloadPDF() {
 const link = document.createElement('a');
 link.href = 'https://mvicente.adv.br/cont/images.pdf';
 link.download = 'documento-juridico-mvicente.pdf';
 link.target = '_blank';
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 }
// Print PDF
 function printPDF() {
 const printWindow = window.open('https://mvicente.adv.br/cont/images.pdf', '_blank');
 printWindow.onload = function() {
 printWindow.print();
 };
 }
// Event listeners
 document.getElementById('prev-page').addEventListener('click', onPrevPage);
 document.getElementById('next-page').addEventListener('click', onNextPage);
 document.getElementById('zoom-in').addEventListener('click', zoomIn);
 document.getElementById('zoom-out').addEventListener('click', zoomOut);
 document.getElementById('zoom-reset').addEventListener('click', zoomReset);
 document.getElementById('page-num').addEventListener('change', goToPage);
 document.getElementById('download-btn').addEventListener('click', downloadPDF);
 document.getElementById('print-btn').addEventListener('click', printPDF);
// Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
 initPDFViewer();
 });
 </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=maralvic/cont2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>