Spaces:

Xterminator
/

task

Running

App Files Files Community

Xterminator commited on Jul 8, 2025

Commit

4be0e35

verified ·

1 Parent(s): 666efc9

add . function like notion - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +516 -18

README.md CHANGED Viewed

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

 ---
+title: task
+emoji: 🐳
+colorFrom: blue
+colorTo: yellow
 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,517 @@
-<!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>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>