linha-de-tempo

Running

App Files Files Community

alexandremoraisdarosa commited on Oct 15, 2025

Commit

9f87ded

verified ·

1 Parent(s): c0c4599

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +227 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Linha De Tempo
-emoji: 🏆
-colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: linha-de-tempo
+emoji: ⚛️
+colorFrom: purple
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,227 @@
-<!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>Linha do Tempo | Gerador de Eventos</title>
+  <!-- Carregar Tailwind CSS via CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Carregar vis.js e CSS -->
+  <script src="https://unpkg.com/vis-timeline@9.0.3/standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="https://unpkg.com/vis-timeline@9.0.3/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <!-- Biblioteca para exportar como imagem -->
+  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', sans-serif;
+      overflow-x: hidden;
+    }
+    #timeline-container {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    .timeline-controls button {
+      @apply px-4 py-2 rounded-lg font-medium transition hover:bg-opacity-90;
+    }
+    #instructions {
+      background: linear-gradient(to right, #e0f7fa, #f3e5f5);
+      border-left: 4px solid #1a73e8;
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 min-h-screen">
+  <div class="container mx-auto px-4 py-6 max-w-6xl">
+    <!-- Título -->
+    <h1 class="text-4xl font-bold text-center text-gray-800 mb-2">📅 Linha do Tempo Interativa</h1>
+    <p class="text-center text-gray-600 mb-8">Crie, salve e compartilhe eventos importantes com exportação em SVG e JPG.</p>
+    <!-- Instruções -->
+    <div id="instructions" class="p-5 mb-6 rounded shadow bg-white text-gray-700 text-sm leading-relaxed">
+      <h3 class="font-bold text-lg mb-2">📚 Instruções de Uso</h3>
+      <ol class="list-decimal list-inside space-y-1 ml-2">
+        <li><strong>Adicionar evento:</strong> Preencha o formulário abaixo e clique em "Adicionar Evento".</li>
+        <li><strong>Editar/Excluir:</strong> Clique em qualquer evento na linha do tempo para editar ou excluir.</li>
+        <li><strong>Salvar:</strong> Use "Salvar Linha do Tempo" para manter os dados no navegador.</li>
+        <li><strong>Exportar:</strong> Use os botões para exportar como SVG (vetor) ou JPG (imagem).</li>
+        <li><strong>Recarregar:</strong> Os dados são carregados automaticamente do armazenamento local ao abrir a página.</li>
+      </ol>
+    </div>
+    <!-- Formulário de Adição de Evento -->
+    <div class="bg-white p-6 rounded-lg shadow mb-6 grid md:grid-cols-3 gap-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Título do Evento</label>
+        <input type="text" id="input-content" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Ex: Lançamento do Projeto" />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Data Inicial</label>
+        <input type="date" id="input-start" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Data Final (opcional)</label>
+        <input type="date" id="input-end" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
+      </div>
+      <div class="md:col-span-3 flex gap-3">
+        <button id="btn-add" class="bg-blue-500 text-white">+ Adicionar Evento</button>
+        <button id="btn-save" class="bg-green-500 text-white">💾 Salvar Line do Tempo</button>
+        <button id="btn-export-svg" class="bg-purple-500 text-white">📤 Exportar SVG</button>
+        <button id="btn-export-jpg" class="bg-orange-500 text-white">🖼️ Exportar JPG</button>
+        <button id="btn-clear" class="bg-red-500 text-white">🗑️ Limpar Tudo</button>
+      </div>
+    </div>
+    <!-- Timeline -->
+    <div id="timeline-container" class="bg-white p-2 mb-6"></div>
+    <!-- Rodapé -->
+    <p class="text-center text-gray-500 text-sm">© 2025 Linha do Tempo App | Dados salvos localmente no seu navegador.</p>
+  </div>
+  <script>
+    // Elemento do contêiner da timeline
+    const container = document.getElementById('timeline-container');
+    let items = new vis.DataSet();
+    let timeline;
+    // Formulários
+    const inputContent = document.getElementById('input-content');
+    const inputStart = document.getElementById('input-start');
+    const inputEnd = document.getElementById('input-end');
+    const btnAdd = document.getElementById('btn-add');
+    const btnSave = document.getElementById('btn-save');
+    const btnExportSVG = document.getElementById('btn-export-svg');
+    const btnExportJPG = document.getElementById('btn-export-jpg');
+    const btnClear = document.getElementById('btn-clear');
+    // Carregar dados salvos do LocalStorage
+    function loadFromStorage() {
+      const saved = localStorage.getItem('timeline-events');
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        parsed.forEach(item => {
+          items.add(item);
+        });
+      }
+    }
+    // Salvar no LocalStorage
+    function saveToStorage() {
+      const data = items.get();
+      localStorage.setItem('timeline-events', JSON.stringify(data));
+      alert('✅ Linha do tempo salva com sucesso!');
+    }
+    // Criar timeline
+    function createTimeline() {
+      const options = {
+        orientation: 'bottom',
+        editable: true,
+        margin: {
+          item: 20
+        },
+        onAdd: (item, callback) => {
+          openModal(null);
+        },
+        onUpdate: (item, callback) => {
+          openModal(item);
+          callback(item);
+        },
+        onMove: (item, callback) => {
+          callback(item);
+          saveToStorage();
+        },
+        onRemove: (item, callback) => {
+          if (confirm(`Excluir o evento "${item.content}"?`)) {
+            callback(item);
+            saveToStorage();
+          } else {
+            callback(null);
+          }
+        }
+      };
+      timeline = new vis.Timeline(container, items, options);
+    }
+    // Adicionar novo evento
+    btnAdd.addEventListener('click', () => {
+      const content = inputContent.value.trim();
+      const start = inputStart.value;
+      const end = inputEnd.value;
+      if (!content || !start) {
+        alert('⚠️ Preencha ao menos o título e a data inicial.');
+        return;
+      }
+      const newItem = {
+        id: Date.now(), // ID único baseado no tempo
+        content,
+        start,
+        end: end || null
+      };
+      items.add(newItem);
+      saveToStorage();
+      inputContent.value = '';
+      inputEnd.value = '';
+    });
+    // Salvar no armazenamento
+    btnSave.addEventListener('click', saveToStorage);
+    // Exportar como SVG
+    btnExportSVG.addEventListener('click', () => {
+      const svgData = new XMLSerializer().serializeToString(document.querySelector('.vis-timeline'));
+      const blob = new Blob([svgData], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'linha-do-tempo.svg';
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+    // Exportar como JPG
+    btnExportJPG.addEventListener('click', () => {
+      html2canvas(document.querySelector('#timeline-container'), {
+        backgroundColor: '#ffffff',
+        scale: 2
+      }).then(canvas => {
+        const imgData = canvas.toDataURL('image/jpeg');
+        const a = document.createElement('a');
+        a.href = imgData;
+        a.download = 'linha-do-tempo.jpg';
+        a.click();
+      });
+    });
+    // Limpar todos os eventos
+    btnClear.addEventListener('click', () => {
+      if (confirm('Tem certeza que deseja limpar todos os eventos?')) {
+        items.clear();
+        localStorage.removeItem('timeline-events');
+      }
+    });
+    // Inicialização
+    window.onload = () => {
+      loadFromStorage();
+      createTimeline();
+      // Preencher a data atual por padrão
+      inputStart.valueAsDate = new Date();
+    };
+  </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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alexandremoraisdarosa/linha-de-tempo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Gere um aplicativo de linha de tempo, com armazenamento e exportação em svg e jpg, criados e implementados, com instruções de uso, a partir do código: <!DOCTYPE HTML> <html> <cabeça> <title> Linha do tempo \| Demonstração básica </title> <estilo tipo = "texto/css" > corpo , html { família de fontes : sans - serif ; } </estilo> <script src = "../../dist/vis.js" ></script> <link href = "../../dist/vis-timeline-graph2d.min.css" rel = "folha de estilo" type = "texto/css" /> </head> <corpo> <div id = "visualização" ></div> <script tipo = "texto/javascript" > // Elemento DOM onde a Linha do Tempo será anexada var container = document . getElementById ( 'visualização' ); // Cria um DataSet (permite vinculação de dados bidirecional) var itens = novo vis . Conjunto de dados ([ { id : 1 , conteúdo : 'item 1' , início : '2013-04-20' }, { id : 2 , conteúdo : 'item 2' , início : '2013-04-14' }, { id : 3 , conteúdo : 'item 3' , início : '2013-04-18' }, { id : 4 , conteúdo : 'item 4' , início : '2013-04-16' , fim : '2013-04-19' }, { id : 5 , conteúdo : 'item 5' , início : '2013-04-25' }, { id : 6 , conteúdo : 'item 6' , início : '2013-04-27' } ]); // Configuração para a Linha do Tempo var opções = {}; // Criar uma linha do tempo var timeline = new vis . Timeline ( container , itens , opções ); </script> </corpo> </html>
2	+ Não veio nada