Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Taskesphere | Painel de Produtividade</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0E0E10', | |
| secondary: '#1F1F22', | |
| surface: '#121212', | |
| accent: '#D2996C', | |
| soft: '#CEC8C3', | |
| text: '#EAEAEA', | |
| blue: '#3B82F6', | |
| green: '#10B981', | |
| red: '#EF4444', | |
| glass: 'rgba(31, 31, 34, 0.75)' | |
| }, | |
| typography: ({ theme }) => ({ | |
| DEFAULT: { | |
| css: { | |
| '--tw-prose-body': theme('colors.gray[700]'), | |
| '--tw-prose-headings': theme('colors.gray[900]'), | |
| '--tw-prose-lead': theme('colors.gray[600]'), | |
| '--tw-prose-links': theme('colors.amber[600]'), | |
| '--tw-prose-bold': theme('colors.gray[900]'), | |
| '--tw-prose-counters': theme('colors.gray[500]'), | |
| '--tw-prose-bullets': theme('colors.gray[300]'), | |
| '--tw-prose-hr': theme('colors.gray[200]'), | |
| '--tw-prose-quotes': theme('colors.gray[900]'), | |
| '--tw-prose-quote-borders': theme('colors.gray[200]'), | |
| '--tw-prose-captions': theme('colors.gray[500]'), | |
| '--tw-prose-code': theme('colors.gray[900]'), | |
| '--tw-prose-pre-code': theme('colors.gray[200]'), | |
| '--tw-prose-pre-bg': theme('colors.gray[800]'), | |
| '--tw-prose-th-borders': theme('colors.gray[300]'), | |
| '--tw-prose-td-borders': theme('colors.gray[200]'), | |
| '--tw-prose-invert-body': theme('colors.soft'), | |
| '--tw-prose-invert-headings': theme('colors.text'), | |
| '--tw-prose-invert-lead': theme('colors.soft'), | |
| '--tw-prose-invert-links': theme('colors.accent'), | |
| '--tw-prose-invert-bold': theme('colors.text'), | |
| '--tw-prose-invert-counters': theme('colors.soft'), | |
| '--tw-prose-invert-bullets': theme('colors.secondary'), | |
| '--tw-prose-invert-hr': theme('colors.secondary'), | |
| '--tw-prose-invert-quotes': theme('colors.text'), | |
| '--tw-prose-invert-quote-borders': theme('colors.secondary'), | |
| '--tw-prose-invert-captions': theme('colors.soft'), | |
| '--tw-prose-invert-code': theme('colors.text'), | |
| '--tw-prose-invert-pre-code': theme('colors.gray[300]'), | |
| '--tw-prose-invert-pre-bg': 'rgba(0,0,0,0.2)', | |
| '--tw-prose-invert-th-borders': theme('colors.secondary'), | |
| '--tw-prose-invert-td-borders': theme('colors.secondary'), | |
| }, | |
| }, | |
| }), | |
| } | |
| } | |
| } | |
| </script> | |
| <script> | |
| if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } | |
| @keyframes toast-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes toast-out { from { opacity: 1; } to { opacity: 0; } } | |
| .toast { animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in 2.7s forwards; } | |
| .card { | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1px solid rgba(0, 0, 0, 0.08); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| transition: all 0.3s ease; | |
| } | |
| .dark .card { | |
| background-color: rgba(31, 31, 34, 0.75); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| } | |
| .dark .card:hover { box-shadow: 0 0 20px rgba(210, 153, 108, 0.1); } | |
| .sidebar { scrollbar-width: thin; } | |
| .dark .sidebar { scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } | |
| .sidebar { scrollbar-color: rgba(0, 0, 0, 0.1) transparent; } | |
| .sidebar::-webkit-scrollbar { width: 6px; } | |
| .sidebar::-webkit-scrollbar-track { background: transparent; } | |
| .sidebar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 20px; } | |
| .dark .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); } | |
| .note-editor { background: transparent; resize: none; min-height: 250px; } | |
| .note-editor:focus { outline: none; } | |
| .note-editor[data-placeholder]:empty:before { | |
| content: attr(data-placeholder); | |
| color: #9ca3af; | |
| pointer-events: none; | |
| display: block; | |
| } | |
| .dark .note-editor[data-placeholder]:empty:before { color: rgba(206, 200, 195, 0.5); } | |
| .slash-command-menu { | |
| position: absolute; | |
| z-index: 100; | |
| width: 240px; | |
| max-height: 330px; | |
| overflow: auto; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| padding: 8px; | |
| transform: translateY(10px); | |
| } | |
| .dark .slash-command-menu { | |
| background: #1F1F22; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); | |
| } | |
| .slash-command-item { | |
| padding: 8px 12px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .slash-command-item:hover { | |
| background: rgba(55,53,47,0.08); | |
| } | |
| .dark .slash-command-item:hover { | |
| background: rgba(255,255,255,0.1); | |
| } | |
| .slash-command-icon { | |
| margin-right: 8px; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(55,53,47,0.08); | |
| border-radius: 4px; | |
| } | |
| .dark .slash-command-icon { | |
| background: rgba(255,255,255,0.1); | |
| } | |
| .theme-switcher { display: flex; padding: 3px; border-radius: 9px; background-color: rgba(120, 120, 128, 0.12); } | |
| .theme-switcher button { flex: 1; padding: 4px 8px; border-radius: 7px; font-size: 13px; font-weight: 500; transition: all 0.2s ease-in-out; border: none; background: none; cursor: pointer; color: #6b7280; } | |
| .dark .theme-switcher button { color: #9ca3af; } | |
| .theme-switcher button.active { background-color: white; color: black; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); } | |
| .dark .theme-switcher button.active { background-color: #374151; color: #f3f4f6; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 dark:bg-surface dark:text-text font-sans min-h-screen flex flex-col transition-colors duration-300"> | |
| <div id="toast-container" class="fixed top-5 right-5 z-[100]"></div> | |
| <!-- Barra de Navegação --> | |
| <nav aria-label="Main navigation" class="bg-white/80 dark:bg-black/30 backdrop-blur-lg border-b border-gray-200 dark:border-secondary fixed top-0 left-0 right-0 z-30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false" class="md:hidden text-gray-700 dark:text-text hover:text-amber-600 dark:hover:text-accent mr-4 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-accent rounded"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg></button> | |
| <h1 class="text-xl font-semibold">Taskesphere</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div id="greeting" class="text-sm font-medium" aria-live="polite">Bom dia, John</div> | |
| <div class="h-8 w-8 rounded-full bg-amber-500 dark:bg-accent flex items-center justify-center" aria-hidden="true"><span class="text-white dark:text-surface font-medium">J</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Conteúdo Principal --> | |
| <div class="flex flex-1 pt-16"> | |
| <!-- Barra Lateral --> | |
| <aside id="sidebar" class="bg-white/80 dark:bg-black/30 backdrop-blur-lg w-64 border-r border-gray-200 dark:border-secondary fixed top-16 bottom-0 left-0 z-20 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out flex flex-col"> | |
| <div class="h-full overflow-y-auto sidebar flex-grow"> | |
| <div class="px-4 py-6"><div class="flex items-center space-x-3"><div class="h-10 w-10 rounded-full bg-amber-500 dark:bg-accent flex items-center justify-center"><span class="text-white dark:text-surface font-medium text-lg">J</span></div><div><p class="text-sm font-medium">John Doe</p><p class="text-xs text-gray-500 dark:text-soft">Espaço de Trabalho Pessoal</p></div></div></div> | |
| <nav class="px-4 space-y-1"> | |
| <button id="command-palette-toggle" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-left hover:bg-gray-100 dark:hover:bg-glass"><svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-gray-500 dark:text-soft group-hover:text-amber-600 dark:group-hover:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>Pesquisar...</button> | |
| <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-left bg-gray-100 dark:bg-glass hover:bg-gray-200 dark:hover:bg-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>Painel</a> | |
| <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-left hover:bg-gray-100 dark:hover:bg-glass"><svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-gray-500 dark:text-soft group-hover:text-amber-600 dark:group-hover:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>Notas</a> | |
| <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-left hover:bg-gray-100 dark:hover:bg-glass"><svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-gray-500 dark:text-soft group-hover:text-amber-600 dark:group-hover:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>Leituras</a> | |
| <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full text-left hover:bg-gray-100 dark:hover:bg-glass"><svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-gray-500 dark:text-soft group-hover:text-amber-600 dark:group-hover:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>Hábitos</a> | |
| </nav> | |
| </div> | |
| <div class="px-4 py-4 border-t border-gray-200 dark:border-secondary"> | |
| <div class="theme-switcher"> | |
| <button id="light-theme-button">Claro</button> | |
| <button id="dark-theme-button">Escuro</button> | |
| </div> | |
| </div> | |
| </aside> | |
| <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden md:hidden"></div> | |
| <main class="flex-1 md:ml-64 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="mb-8"><h2 class="text-2xl font-semibold">Painel</h2><p class="text-gray-500 dark:text-soft mt-1">Bem-vindo de volta. Aqui está o seu resumo de hoje.</p></div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="card rounded-xl p-6 animate-fade-in" style="animation-delay: 0.1s;"><div class="flex items-start"><div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 dark:bg-glass border border-gray-200 dark:border-secondary flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg></div><div class="ml-4 flex-1"><h3 class="text-lg font-medium">Enquanto você esteve fora...</h3><p class="mt-1 text-sm text-gray-500 dark:text-soft">Sua nota sobre "filosofia estóica" foi adicionada à Wiki e uma tarefa foi criada para o "relatório do projeto Atlas".</p><div class="mt-3 flex space-x-3"><button class="px-3 py-1 bg-gray-100 dark:bg-glass border border-gray-200 dark:border-secondary rounded-lg text-sm font-medium hover:bg-gray-200 dark:hover:bg-secondary">Ver detalhes</button></div></div></div></div> | |
| <div id="open-note-modal-card" class="card rounded-xl p-6 animate-fade-in cursor-pointer flex flex-col" style="animation-delay: 0.2s;"><h3 class="font-medium mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.5L15.232 5.232z" /></svg>Nota Rápida</h3><p class="text-sm text-gray-500 dark:text-soft flex-grow">Anote um pensamento rápido, uma ideia ou um lembrete...</p><span class="text-xs text-gray-400 dark:text-soft/50 mt-auto pt-2">Clique para abrir o editor avançado</span></div> | |
| </div> | |
| <div class="mb-8"><h2 class="text-xl font-semibold mb-4">Foco do Dia</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="card rounded-xl p-5 animate-fade-in" style="animation-delay: 0.3s;"><h3 class="font-medium mb-4 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg>Tarefas de Hoje</h3><div id="task-list" class="space-y-3"><div class="task-item flex items-start"><input type="checkbox" class="task-checkbox mt-1 h-4 w-4 rounded border-gray-300 dark:border-secondary bg-transparent text-amber-600 dark:text-accent focus:ring-amber-500 dark:focus:ring-accent"><div class="ml-3"><p class="text-sm">Finalizar relatório do projeto Atlas</p><p class="text-xs text-gray-500 dark:text-soft mt-1">Prazo: Sexta-feira</p></div></div><div class="task-item flex items-start"><input type="checkbox" class="task-checkbox mt-1 h-4 w-4 rounded border-gray-300 dark:border-secondary bg-transparent text-amber-600 dark:text-accent focus:ring-amber-500 dark:focus:ring-accent"><div class="ml-3"><p class="text-sm">Reunião com a equipe de design</p><p class="text-xs text-gray-500 dark:text-soft mt-1">14:30 - 15:15</p></div></div></div></div><div class="card rounded-xl p-5 animate-fade-in" style="animation-delay: 0.4s;"><h3 class="font-medium mb-4 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>Leituras Atuais</h3><div class="space-y-4"><div><div class="flex items-start"><img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1447957962l/25744928.jpg" class="flex-shrink-0 w-10 h-14 rounded-md object-cover shadow-lg" alt="Capa do livro Deep Work" onerror="this.onerror=null;this.src='https://placehold.co/40x56/1F1F22/EAEAEA?text=Capa';"><div class="ml-4 flex-1"><p class="text-sm font-medium">Deep Work</p><p class="text-xs text-gray-500 dark:text-soft mt-1">Cal Newport</p><div class="mt-2 w-full bg-gray-200 dark:bg-secondary rounded-full h-1.5"><div class="progress-bar bg-amber-500 dark:bg-accent h-1.5 rounded-full" style="width: 72%"></div></div></div></div></div><div><div class="flex items-start"><img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1535115320l/40121378.jpg" class="flex-shrink-0 w-10 h-14 rounded-md object-cover shadow-lg" alt="Capa do livro Atomic Habits" onerror="this.onerror=null;this.src='https://placehold.co/40x56/1F1F22/EAEAEA?text=Capa';"><div class="ml-4 flex-1"><p class="text-sm font-medium">Atomic Habits</p><p class="text-xs text-gray-500 dark:text-soft mt-1">James Clear</p><div class="mt-2 w-full bg-gray-200 dark:bg-secondary rounded-full h-1.5"><div class="progress-bar bg-green h-1.5 rounded-full" style="width: 35%"></div></div></div></div></div></div></div></div></div> | |
| <div class="mb-8"><h2 class="text-xl font-semibold mb-4">Desenvolvimento Pessoal</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><div class="card rounded-xl p-5 animate-fade-in" style="animation-delay: 0.5s;"><h3 class="font-medium mb-4 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>Rastreador de Hábitos</h3><div class="space-y-3"><div class="flex items-center justify-between"><p class="text-sm">Meditação</p><div class="flex space-x-1.5"><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-gray-200 dark:bg-secondary"></span></div></div><div class="flex items-center justify-between"><p class="text-sm">Ler 20 páginas</p><div class="flex space-x-1.5"><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-gray-200 dark:bg-secondary"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span></div></div><div class="flex items-center justify-between"><p class="text-sm">Treino matinal</p><div class="flex space-x-1.5"><span class="h-3 w-3 rounded-full bg-gray-200 dark:bg-secondary"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-green"></span><span class="h-3 w-3 rounded-full bg-gray-200 dark:bg-secondary"></span></div></div></div></div><div class="card rounded-xl p-5 animate-fade-in md:col-span-2 lg:col-span-2" style="animation-delay: 0.6s;"><h3 class="font-medium mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4M4 7v4c0 2.21 3.582 4 8 4s8-1.79 8-4V7" /></svg>Inbox Inteligente</h3><p class="text-xs text-gray-500 dark:text-soft mb-4">Itens capturados aguardando categorização.</p><div id="inbox-list" class="space-y-3"><div class="inbox-item bg-gray-100 dark:bg-secondary/80 p-3 rounded-lg"><p class="text-sm">"Revisar Atomic Habits amanhã"</p><div class="mt-2 flex items-center flex-wrap gap-2"><button class="inbox-action-btn text-xs px-2.5 py-1.5 rounded-md flex items-center bg-white dark:bg-gray-600/50 hover:bg-gray-200 dark:hover:bg-gray-500/50 transition-colors"><svg class="w-4 h-4 mr-1.5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg><span>Leitura</span></button><button class="inbox-action-btn text-xs px-2.5 py-1.5 rounded-md flex items-center bg-white dark:bg-gray-600/50 hover:bg-gray-200 dark:hover:bg-gray-500/50 transition-colors"><svg class="w-4 h-4 mr-1.5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span>Tarefa</span></button></div></div><div class="inbox-item bg-gray-100 dark:bg-secondary/80 p-3 rounded-lg"><p class="text-sm">"Ideia para post: Os 3 pilares do estoicismo moderno"</p><div class="mt-2 flex items-center flex-wrap gap-2"><button class="inbox-action-btn text-xs px-2.5 py-1.5 rounded-md flex items-center bg-white dark:bg-gray-600/50 hover:bg-gray-200 dark:hover:bg-gray-500/50 transition-colors"><svg class="w-4 h-4 mr-1.5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.311l.401.201a12.06 12.06 0 01-4.5 0l.401-.201M11.25 12a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75v-.008z" /></svg><span>Wiki</span></button><button class="inbox-action-btn text-xs px-2.5 py-1.5 rounded-md flex items-center bg-white dark:bg-gray-600/50 hover:bg-gray-200 dark:hover:bg-gray-500/50 transition-colors"><svg class="w-4 h-4 mr-1.5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.5 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /></svg><span>Reflexão</span></button></div></div></div></div></div></div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Painel de Notas Lateral --> | |
| <div id="note-panel" class="fixed right-0 top-16 bottom-0 w-full max-w-xl bg-white dark:bg-primary shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out flex flex-col z-30"> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-secondary"> | |
| <div class="theme-switcher"> | |
| <button id="editor-write-btn" class="active">Escrever</button> | |
| <button id="editor-preview-btn">Pré-visualizar</button> | |
| </div> | |
| <button id="close-note-panel-button" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="flex-grow relative overflow-y-auto p-4"> | |
| <div id="note-editor" contenteditable="true" class="note-editor w-full h-full p-1" data-placeholder="Escreva ou digite '/' para ver os comandos..."></div> | |
| <div id="note-preview" class="prose dark:prose-invert max-w-none p-1 hidden"></div> | |
| <div id="slash-command-menu" class="slash-command-menu hidden"> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">📝</div> | |
| <div>Texto</div> | |
| </div> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">📋</div> | |
| <div>Lista de Tarefas</div> | |
| </div> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">🔢</div> | |
| <div>Lista Numerada</div> | |
| </div> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">📅</div> | |
| <div>Data</div> | |
| </div> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">📍</div> | |
| <div>Título 1</div> | |
| </div> | |
| <div class="slash-command-item"> | |
| <div class="slash-command-icon">📍</div> | |
| <div>Título 2</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 dark:border-secondary flex justify-between"> | |
| <button id="new-note-button" class="px-4 py-2 bg-gray-100 dark:bg-secondary text-gray-700 dark:text-text rounded-lg text-sm font-medium hover:bg-gray-200 dark:hover:bg-secondary/80 transition-colors"> | |
| Nova Nota | |
| </button> | |
| <button id="save-note-button" class="px-5 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 dark:bg-accent dark:hover:bg-opacity-80 transition-colors"> | |
| Concluir | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Paleta de Comandos --> | |
| <div id="command-palette" class="fixed inset-0 z-50 hidden items-start justify-center pt-24 p-4"> | |
| <div id="command-palette-backdrop" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div> | |
| <div class="relative card rounded-xl w-full max-w-xl m-4 animate-fade-in flex flex-col shadow-2xl"> | |
| <div class="p-4"><input id="command-input" type="text" placeholder="Pesquisar notas, tarefas ou comandos..." class="w-full bg-transparent text-lg text-gray-800 dark:text-text placeholder-gray-400 dark:placeholder-soft/50 focus:outline-none"></div> | |
| <div id="command-results" class="border-t border-gray-200 dark:border-secondary p-2 max-h-96 overflow-y-auto"> | |
| <!-- Resultados serão inseridos aqui via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // --- Lógica do Painel --- | |
| const showToast = (message) => { | |
| const container = document.getElementById('toast-container'); | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast bg-green-500 text-white text-sm font-medium px-4 py-2 rounded-lg shadow-lg mb-2'; | |
| toast.textContent = message; | |
| toast.setAttribute('role', 'alert'); | |
| toast.setAttribute('aria-live', 'assertive'); | |
| container.appendChild(toast); | |
| setTimeout(() => { | |
| toast.remove(); | |
| }, 3000); | |
| }; | |
| const setTheme = (theme) => { | |
| document.documentElement.classList.toggle('dark', theme === 'dark'); | |
| document.getElementById('light-theme-button').classList.toggle('active', theme === 'light'); | |
| document.getElementById('dark-theme-button').classList.toggle('active', theme === 'dark'); | |
| localStorage.theme = theme; | |
| }; | |
| document.getElementById('light-theme-button').addEventListener('click', () => setTheme('light')); | |
| document.getElementById('dark-theme-button').addEventListener('click', () => setTheme('dark')); | |
| const toggleSidebar = () => { | |
| const sidebar = document.getElementById('sidebar'); | |
| const isExpanded = sidebar.classList.toggle('-translate-x-full'); | |
| document.getElementById('sidebar-overlay').classList.toggle('hidden'); | |
| document.getElementById('sidebar-toggle').setAttribute('aria-expanded', !isExpanded); | |
| }; | |
| document.getElementById('sidebar-toggle').addEventListener('click', toggleSidebar); | |
| document.getElementById('sidebar-overlay').addEventListener('click', toggleSidebar); | |
| // --- Lógica do Painel de Notas --- | |
| const notePanel = document.getElementById('note-panel'); | |
| const editor = document.getElementById('note-editor'); | |
| const preview = document.getElementById('note-preview'); | |
| const writeBtn = document.getElementById('editor-write-btn'); | |
| const previewBtn = document.getElementById('editor-preview-btn'); | |
| const showdownConverter = new showdown.Converter(); | |
| const toggleNotePanel = () => { | |
| notePanel.classList.toggle('translate-x-full'); | |
| // Clear editor when opening | |
| if (!notePanel.classList.contains('translate-x-full')) { | |
| editor.innerHTML = ''; | |
| editor.focus(); | |
| // Setup slash command handler | |
| editor.addEventListener('keydown', handleSlashCommand); | |
| } | |
| }; | |
| const createNewNote = () => { | |
| editor.innerHTML = ''; | |
| editor.focus(); | |
| showToast('Nova nota criada!'); | |
| }; | |
| document.getElementById('open-note-modal-card').addEventListener('click', toggleNotePanel); | |
| document.getElementById('close-note-panel-button').addEventListener('click', toggleNotePanel); | |
| document.getElementById('new-note-button').addEventListener('click', createNewNote); | |
| document.getElementById('save-note-button').addEventListener('click', () => { | |
| toggleNotePanel(); | |
| showToast('Nota guardada!'); | |
| }); | |
| writeBtn.addEventListener('click', () => { | |
| preview.classList.add('hidden'); | |
| editor.classList.remove('hidden'); | |
| writeBtn.classList.add('active'); | |
| previewBtn.classList.remove('active'); | |
| editor.focus(); | |
| }); | |
| previewBtn.addEventListener('click', () => { | |
| const markdownText = editor.innerText; | |
| const html = showdownConverter.makeHtml(markdownText); | |
| preview.innerHTML = html; | |
| editor.classList.add('hidden'); | |
| preview.classList.remove('hidden'); | |
| previewBtn.classList.add('active'); | |
| writeBtn.classList.remove('active'); | |
| }); | |
| // --- Lógica da Paleta de Comandos --- | |
| const commandPalette = document.getElementById('command-palette'); | |
| const commandInput = document.getElementById('command-input'); | |
| const commandResults = document.getElementById('command-results'); | |
| const openPaletteBtn = document.getElementById('command-palette-toggle'); | |
| const openCommandPalette = () => { commandPalette.classList.remove('hidden'); commandPalette.classList.add('flex'); commandInput.focus(); commandInput.value = ''; renderCommands(); }; | |
| const closeCommandPalette = () => { commandPalette.classList.add('hidden'); commandPalette.classList.remove('flex'); }; | |
| openPaletteBtn.addEventListener('click', openCommandPalette); | |
| document.getElementById('command-palette-backdrop').addEventListener('click', closeCommandPalette); | |
| document.addEventListener('keydown', (e) => { | |
| if ((e.metaKey || e.ctrlKey) && e.key === 'k') { | |
| e.preventDefault(); | |
| openCommandPalette(); | |
| } | |
| if (e.key === 'Escape') { | |
| closeCommandPalette(); | |
| closeNoteModal(); | |
| } | |
| }); | |
| const allCommands = [ | |
| { type: 'Ação', name: 'Nova Nota Rápida', action: toggleNotePanel }, | |
| { type: 'Ação', name: 'Mudar Tema', action: () => setTheme(localStorage.theme === 'dark' ? 'light' : 'dark') }, | |
| { type: 'Nota', name: 'Ideias para o Projeto Atlas' }, | |
| { type: 'Leitura', name: 'Atomic Habits' }, | |
| { type: 'Tarefa', name: 'Finalizar relatório' } | |
| ]; | |
| const renderCommands = (filter = '') => { | |
| commandResults.innerHTML = ''; | |
| const filtered = allCommands.filter(c => c.name.toLowerCase().includes(filter.toLowerCase())); | |
| filtered.forEach(cmd => { | |
| const item = document.createElement('div'); | |
| item.className = 'p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-secondary cursor-pointer flex justify-between items-center'; | |
| item.innerHTML = `<span>${cmd.name}</span><span class="text-xs text-gray-400 dark:text-soft">${cmd.type}</span>`; | |
| if (cmd.action) { | |
| item.onclick = () => { | |
| cmd.action(); | |
| closeCommandPalette(); | |
| }; | |
| } | |
| commandResults.appendChild(item); | |
| }); | |
| }; | |
| commandInput.addEventListener('input', () => renderCommands(commandInput.value)); | |
| // --- Task Modal Logic --- | |
| const taskModal = document.getElementById('task-modal'); | |
| const openTaskModal = () => { | |
| taskModal.classList.remove('hidden'); | |
| taskModal.classList.add('flex'); | |
| document.getElementById('task-title').focus(); | |
| }; | |
| const closeTaskModal = () => { | |
| taskModal.classList.add('hidden'); | |
| taskModal.classList.remove('flex'); | |
| document.getElementById('task-title').value = ''; | |
| document.getElementById('task-due').value = ''; | |
| document.getElementById('task-notes').value = ''; | |
| }; | |
| document.getElementById('save-task-button').addEventListener('click', () => { | |
| const title = document.getElementById('task-title').value; | |
| const due = document.getElementById('task-due').value; | |
| const notes = document.getElementById('task-notes').value; | |
| if (title) { | |
| // Here you would normally save the task to your backend | |
| const taskList = document.getElementById('task-list'); | |
| const taskItem = document.createElement('div'); | |
| taskItem.className = 'task-item flex items-start'; | |
| taskItem.innerHTML = ` | |
| <input type="checkbox" class="task-checkbox mt-1 h-4 w-4 rounded border-gray-300 dark:border-secondary bg-transparent text-amber-600 dark:text-accent focus:ring-amber-500 dark:focus:ring-accent"> | |
| <div class="ml-3"> | |
| <p class="text-sm">${title}</p> | |
| ${due ? `<p class="text-xs text-gray-500 dark:text-soft mt-1">Prazo: ${new Date(due).toLocaleDateString()}</p>` : ''} | |
| </div> | |
| `; | |
| taskList.appendChild(taskItem); | |
| showToast('Tarefa adicionada!'); | |
| closeTaskModal(); | |
| } | |
| }); | |
| document.getElementById('close-task-modal-button').addEventListener('click', closeTaskModal); | |
| document.getElementById('task-modal-backdrop').addEventListener('click', closeTaskModal); | |
| document.getElementById('cancel-task-button').addEventListener('click', closeTaskModal); | |
| // --- Slash Command Functionality --- | |
| const handleSlashCommand = (e) => { | |
| const menu = document.getElementById('slash-command-menu'); | |
| if (e.key === '/' && editor.innerText.trim() === '') { | |
| e.preventDefault(); | |
| menu.classList.remove('hidden'); | |
| menu.style.left = editor.getBoundingClientRect().left + 'px'; | |
| menu.style.top = (editor.getBoundingClientRect().top + editor.offsetHeight) + 'px'; | |
| } else if (e.key === 'Escape' && !menu.classList.contains('hidden')) { | |
| menu.classList.add('hidden'); | |
| } | |
| // Close menu if not a slash command | |
| if (!editor.innerText.startsWith('/') && !menu.classList.contains('hidden')) { | |
| menu.classList.add('hidden'); | |
| } | |
| }; | |
| // Handle selecting slash command items | |
| document.querySelectorAll('.slash-command-item').forEach(item => { | |
| item.addEventListener('click', (e) => { | |
| const commandText = e.currentTarget.lastElementChild.textContent; | |
| editor.innerHTML = ''; | |
| // Handle different commands | |
| if (commandText === 'Lista de Tarefas') { | |
| editor.innerHTML = '<div contenteditable="false"><input type="checkbox" class="mr-2"/>Tarefa 1</div>'; | |
| } else if (commandText === 'Lista Numerada') { | |
| editor.innerHTML = '<div>1. Item 1</div><div>2. Item 2</div>'; | |
| } else if (commandText === 'Título 1') { | |
| editor.innerHTML = '<h1>Título</h1>'; | |
| } else if (commandText === 'Título 2') { | |
| editor.innerHTML = '<h2>Subtítulo</h2>'; | |
| } else { | |
| editor.innerHTML = commandText; | |
| } | |
| document.getElementById('slash-command-menu').classList.add('hidden'); | |
| editor.focus(); | |
| }); | |
| }); | |
| // --- Inicialização Geral --- | |
| const greetingElement = document.getElementById('greeting'); | |
| if (greetingElement) { | |
| const hour = new Date().getHours(); | |
| greetingElement.textContent = hour < 12 ? 'Bom dia, John' : hour < 18 ? 'Boa tarde, John' : 'Boa noite, John'; | |
| } | |
| setTheme(localStorage.theme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')); | |
| }); | |
| </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=Xterminator/task" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |