Files
initpage/web/index.html

900 lines
55 KiB
HTML

<!DOCTYPE html>
<html lang="pt-BR" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="./">
<title>InitPage — Seu navegador, personalizado</title>
<meta name="description" content="Pagina inicial personalizavel com atalhos, categorias, busca e plano de fundo. Tudo salvo localmente no seu navegador.">
<meta name="theme-color" content="#0f172a">
<link rel="icon" href="https://www.google.com/s2/favicons?domain=weltonmoura.com.br&sz=128">
<link rel="manifest" href="manifest.json">
<!-- Open Graph / Social -->
<meta property="og:type" content="website">
<meta property="og:title" content="InitPage — Seu navegador, personalizado">
<meta property="og:description" content="Pagina inicial personalizavel com atalhos, categorias, busca e plano de fundo.">
<meta property="og:url" content="https://apps.weltonmoura.com.br/initpage/">
<meta property="og:site_name" content="InitPage">
<meta property="og:image" content="https://apps.weltonmoura.com.br/initpage/icon.svg">
<meta name="twitter:card" content="summary">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Ícones Lucide -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Anúncios patrocinados (injeção independente, fora do estado/export) -->
<script src="ads.js" defer></script>
<!-- Fonte Google Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
},
colors: {
accent: 'var(--accent-color)',
'accent-hover': 'var(--accent-hover)',
},
animation: {
'fade-in': 'fadeIn 0.3s ease-out forwards',
'slide-up': 'slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(12px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
}
}
}
}
}
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="h-full bg-slate-950 text-slate-100 font-sans antialiased overflow-x-hidden relative flex flex-col justify-between pb-14 sm:pb-0 sm:pr-12 sm:pl-0">
<!-- Fundo com Imagem e Máscara -->
<div id="bg-cover" class="fixed inset-0 bg-cover bg-center transition-all duration-700 -z-20 transform scale-105"></div>
<div id="bg-overlay" class="fixed inset-0 bg-black/60 transition-all duration-500 -z-10"></div>
<!-- Notificação Toast Flutuante -->
<div id="toast" role="status" aria-live="polite" class="fixed bottom-6 right-6 z-[90] transform translate-y-16 opacity-0 transition-all duration-300 pointer-events-none flex items-center gap-3 px-4 py-3 rounded-2xl glass-panel text-sm text-white shadow-2xl">
<i id="toast-icon" data-lucide="info" class="w-4 h-4 text-accent"></i>
<span id="toast-msg">Notificação</span>
</div>
<!-- Sidebar Lateral Direita (desktop) e Barra Inferior (mobile) -->
<aside id="app-sidebar" class="fixed right-0 top-auto bottom-0 w-full h-12 z-50 flex flex-row items-center justify-center px-2 gap-2 border-t border-white/10 sm:top-0 sm:bottom-0 sm:right-0 sm:left-auto sm:w-12 sm:h-auto sm:flex-col sm:justify-start sm:pt-4 sm:pb-4 sm:border-t-0 sm:border-l sm:border-white/10 sm:border-r-0">
<button id="clock-calendar-sidebar-trigger" title="Calendário" aria-label="Abrir Calendário" class="sidebar-btn relative group">
<i data-lucide="calendar" class="w-6 h-6"></i>
</button>
<button id="btn-open-tasks" title="Tarefas" aria-label="Abrir Tarefas" class="sidebar-btn relative group">
<i data-lucide="clipboard-list" class="w-6 h-6"></i>
<span id="tasks-dot-badge" class="hidden absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
</button>
<button id="btn-open-notes" title="Notas" aria-label="Abrir Notas" class="sidebar-btn relative group" style="color: var(--accent-color);">
<i data-lucide="sticky-note" class="w-6 h-6"></i>
</button>
<div class="hidden sm:block flex-1"></div>
<button id="btn-open-settings" title="Configurações e Customização" aria-label="Abrir Configurações" class="sidebar-btn relative group">
<i data-lucide="settings" class="w-6 h-6 group-hover:rotate-45 transition-transform duration-300"></i>
</button>
</aside>
<!-- Barra Superior / Cabeçalho Minimalista -->
<header class="w-full px-5 sm:px-8 py-4 flex items-center justify-end z-30 animate-fade-in">
</header>
<!-- Área Central de Conteúdo -->
<main class="w-full max-w-6xl mx-auto px-4 sm:px-8 pt-4 sm:pt-3 pb-12 sm:pb-12 flex-1 flex flex-col items-center justify-start gap-5 sm:gap-7 z-10">
<!-- 1. BLOCO INTEGRADO: RELÓGIO + DATA + SAUDAÇÃO (Gatilho do Calendário) -->
<section class="w-full flex flex-col items-center justify-center animate-slide-up">
<button id="clock-calendar-trigger" type="button" class="group flex flex-col items-center justify-center p-3 sm:p-4 rounded-3xl hover:bg-white/5 transition-all duration-300 active:scale-[0.99] cursor-pointer outline-none select-none" title="Clique para expandir o calendário">
<h1 id="clock-display" class="text-6xl sm:text-7xl md:text-8xl font-black tracking-tight text-white drop-shadow-md group-hover:scale-[1.02] transition-transform duration-300">
00:00
</h1>
<!-- Elemento de Data e Saudação Integrados sem Borda e sem Animação -->
<div class="flex flex-wrap items-center justify-center gap-2 mt-2 text-sm sm:text-base font-medium text-slate-300">
<span class="text-xs sm:text-sm text-slate-200 font-medium flex items-center gap-1.5">
<span id="header-date">Carregando data...</span>
<i data-lucide="calendar" class="w-3.5 h-3.5 text-accent opacity-80 ml-0.5"></i>
</span>
<span class="text-slate-400 hidden sm:inline">•</span>
<div class="text-slate-200 font-light drop-shadow">
<span id="greeting-text">Olá</span>,
<span id="user-display-name" class="font-bold text-white tracking-wide underline decoration-accent decoration-2 underline-offset-4 hover:opacity-85 transition" title="Alterar nome">Visitante</span>!
</div>
</div>
</button>
<!-- Informação de Tempo (meteorológico) -->
<div id="weather-info" class="hidden mt-1">
<span class="inline-flex items-center gap-1.5 text-xs sm:text-sm text-slate-300 font-medium glass-card px-3 py-1 rounded-full">
<span id="weather-icon">☀️</span>
<span id="weather-temp">--°</span>
<span class="text-slate-500">·</span>
<span id="weather-city" class="capitalize">Cidade</span>
</span>
</div>
<!-- ==================== COMPONENTE DE CALENDÁRIO INTEGRADO À PÁGINA ==================== -->
<div id="calendar-widget" class="hidden mt-3 w-[92vw] sm:w-[26rem] md:w-[28rem] rounded-3xl glass-translucent p-4 border border-white/15 animate-fade-in">
<!-- Topo do Widget de Calendário -->
<div class="flex items-center justify-between pb-3 border-b border-white/10 mb-3">
<button type="button" id="cal-prev-month" aria-label="Mês anterior" class="p-1.5 rounded-xl hover:bg-white/15 text-slate-300 hover:text-white transition active:scale-95">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<div class="text-center">
<h4 id="cal-month-year" class="text-xs sm:text-sm font-bold text-white capitalize tracking-wide">Mês Ano</h4>
</div>
<button type="button" id="cal-next-month" aria-label="Próximo mês" class="p-1.5 rounded-xl hover:bg-white/15 text-slate-300 hover:text-white transition active:scale-95">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
</div>
<!-- Cabeçalho dos Dias da Semana -->
<div class="grid grid-cols-7 text-center text-[10px] font-bold text-slate-400 mb-2">
<span>DOM</span>
<span>SEG</span>
<span>TER</span>
<span>QUA</span>
<span>QUI</span>
<span>SEX</span>
<span>SÁB</span>
</div>
<!-- Grade de Dias do Mês -->
<div id="cal-days-grid" class="grid grid-cols-7 gap-1 text-center text-xs">
<!-- Dias renderizados dinamicamente via JS -->
</div>
<!-- Tarefas do Dia Selecionado -->
<div id="cal-day-tasks" class="hidden mt-3 pt-2.5 border-t border-white/10 space-y-1.5 max-h-44 overflow-y-auto pr-1">
<div class="flex items-center justify-between mb-1">
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tarefas do dia</p>
<button id="btn-add-task-from-day" type="button" class="px-1.5 py-0.5 rounded-md bg-white/10 hover:bg-white/20 text-[9px] text-slate-300 flex items-center gap-1" title="Adicionar tarefa neste dia" aria-label="Adicionar tarefa neste dia">
<i data-lucide="plus" class="w-2.5 h-2.5"></i> Adicionar
</button>
</div>
<div id="cal-day-tasks-list" class="space-y-1.5">
<!-- Renderizado dinamicamente via JS -->
</div>
</div>
<!-- Rodapé do Widget -->
<div class="mt-3 pt-2.5 border-t border-white/10 flex items-center justify-between text-[11px] text-slate-400">
<span id="cal-selected-info" aria-live="polite">Hoje</span>
<button type="button" id="cal-btn-today" class="text-accent hover:underline font-semibold cursor-pointer">Ir para Hoje</button>
</div>
</div>
</section>
<!-- 2. BARRA DE PESQUISA COM O MESMO FUNDO DOS CARDS (glass-card) -->
<section class="w-full max-w-2xl relative z-40 animate-slide-up">
<form id="search-form" class="relative flex items-center glass-card rounded-2xl p-1.5 shadow-2xl focus-within:ring-2 focus-within:ring-accent focus-within:border-accent transition-all duration-300">
<!-- Dropdown Seletor de Buscador -->
<div class="relative">
<button type="button" id="search-engine-btn" class="flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3.5 py-2 rounded-xl hover:bg-white/10 text-xs font-semibold text-slate-100 transition active:scale-95">
<span id="search-engine-icon" class="text-base">🌐</span>
<span id="search-engine-label" class="hidden sm:inline">Google</span>
<i data-lucide="chevron-down" class="w-3.5 h-3.5 opacity-70"></i>
</button>
<div id="search-engine-menu" class="hidden absolute top-full left-0 mt-2 w-48 rounded-2xl glass-panel py-1.5 shadow-2xl border border-white/20 z-50 overflow-hidden">
<button type="button" data-engine="google" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">🌐</span> Google
</button>
<button type="button" data-engine="duckduckgo" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">🦆</span> DuckDuckGo
</button>
<button type="button" data-engine="bing" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">🔎</span> Bing
</button>
<button type="button" data-engine="brave" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">🦁</span> Brave
</button>
<button type="button" data-engine="youtube" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">▶️</span> YouTube
</button>
<button type="button" data-engine="github" class="engine-opt w-full px-3.5 py-2.5 text-left text-xs text-slate-200 hover:bg-white/15 flex items-center gap-2.5 transition">
<span class="text-base">🐙</span> GitHub
</button>
</div>
</div>
<input
type="text"
id="search-input"
placeholder="Pesquisar ou digitar URL..."
autocomplete="off"
class="flex-1 bg-transparent px-3 py-2 text-sm sm:text-base text-white placeholder-slate-400 focus:outline-none min-w-0"
>
<button type="submit" title="Buscar em nova aba" aria-label="Buscar em nova aba" class="p-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white transition shadow-md flex items-center justify-center flex-shrink-0 active:scale-95">
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</form>
</section>
<!-- 3. SEÇÃO DE ABAS DE CATEGORIAS E ATALHOS -->
<section class="w-full relative z-10 space-y-3.5">
<!-- Linha de Abas com o Botão '+' ao final -->
<div class="flex items-center justify-between gap-3 border-b border-white/10 pb-2">
<div id="tabs-wrapper" class="flex items-center gap-2 overflow-x-auto no-scrollbar py-1 flex-1 pr-2">
<!-- Abas renderizadas dinamicamente + botão '+' de gerenciar categorias -->
</div>
<div class="flex items-center gap-2 flex-shrink-0 text-xs text-slate-400 pl-2 border-l border-white/10">
<span id="shortcuts-count" class="font-medium whitespace-nowrap">0 atalhos</span>
</div>
</div>
<!-- Grade / Lista / Dock de Atalhos (com o Card '+' ao final) -->
<div id="shortcuts-container" class="min-h-[140px] w-full">
<!-- Renderizado dinamicamente via JavaScript -->
</div>
</section>
</main>
<!-- Rodapé -->
<footer class="w-full px-6 py-3 pb-16 sm:pb-3 flex flex-col items-center gap-2 text-xs text-slate-400/80 z-10">
<div class="w-full flex flex-col sm:flex-row items-center justify-between gap-2">
<div class="flex items-center gap-2">
</div>
<div class="flex items-center gap-2">
</div>
</div>
<div class="flex items-center gap-3 text-[11px] text-slate-500">
<a href="./politica-privacidade/" class="hover:text-white transition">Política de Privacidade</a>
<span class="text-slate-700">•</span>
<a href="./termos-servico/" class="hover:text-white transition">Termos de Serviço</a>
<span class="text-slate-700">•</span>
<span>by <a href="https://weltonmoura.com.br/" class="hover:text-amber-400 text-white transition">Welton Moura</a></span>
</div>
</footer>
<!-- ==================== MODAL DE ADICIONAR / EDITAR ATALHO (Z-50) ==================== -->
<div id="modal-shortcut" role="dialog" aria-modal="true" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl relative max-h-[92vh] overflow-y-auto">
<div class="flex items-center justify-between mb-4">
<h3 id="modal-shortcut-title" class="text-lg font-bold text-white flex items-center gap-2">
<i data-lucide="bookmark-plus" class="w-5 h-5 text-accent"></i>
Novo Atalho
</h3>
<button id="btn-close-shortcut-modal" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<form id="form-shortcut" class="space-y-3.5 text-xs">
<input type="hidden" id="input-shortcut-id">
<div>
<label class="block text-slate-300 font-medium mb-1">Nome do Atalho *</label>
<input type="text" id="input-shortcut-name" required placeholder="Ex: GitHub, YouTube, Notícias" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Endereço Web (URL) *</label>
<input type="text" id="input-shortcut-url" required placeholder="exemplo.com ou https://exemplo.com" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Categoria *</label>
<div class="flex gap-2">
<select id="input-shortcut-category" class="flex-1 bg-slate-900/80 border border-white/15 rounded-xl px-3 py-2.5 text-xs text-white focus:outline-none focus:border-accent">
<!-- Categorias inseridas dinamicamente -->
</select>
<button type="button" id="btn-shortcut-new-cat" class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white font-medium text-xs transition flex items-center gap-1" title="Gerenciar Categorias">
<i data-lucide="settings-2" class="w-3 h-3 text-accent"></i> Gerenciar
</button>
</div>
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Imagem de Capa (Edge-to-Edge)</label>
<input type="url" id="input-shortcut-cover" placeholder="URL da imagem (ou deixe vazio para gradiente elegante)" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Descrição (opcional)</label>
<input type="text" id="input-shortcut-desc" placeholder="Ex: Comunidade de programadores" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Ícone Personalizado (opcional)</label>
<input type="url" id="input-shortcut-icon" placeholder="Deixe vazio para obter o favicon oficial" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div class="flex items-center justify-end gap-2.5 pt-4 border-t border-white/10">
<button type="button" id="btn-cancel-shortcut" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition">Cancelar</button>
<button type="submit" class="px-5 py-2 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition shadow-lg flex items-center gap-2">
<i data-lucide="check" class="w-4 h-4"></i> Salvar Atalho
</button>
</div>
</form>
</div>
</div>
<!-- ==================== MODAL DE GERENCIAR CATEGORIAS (CRUD) (Z-[60]) ==================== -->
<div id="modal-categories" role="dialog" aria-modal="true" class="fixed inset-0 z-[60] hidden flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl relative space-y-4">
<div class="flex items-center justify-between border-b border-white/10 pb-3">
<h3 class="text-base font-bold text-white flex items-center gap-2">
<i data-lucide="tags" class="w-5 h-5 text-accent"></i>
Gerenciar Categorias
</h3>
<button id="btn-close-categories-modal" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<!-- Formulário de Criação/Edição de Categoria -->
<form id="form-category" class="space-y-3">
<input type="hidden" id="input-cat-id">
<div class="flex gap-2">
<input type="text" id="input-cat-name" required placeholder="Nome da categoria..." class="flex-1 bg-slate-900/90 border border-white/20 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-accent">
<button type="submit" id="btn-submit-cat" class="px-4 py-2 rounded-xl bg-accent hover:bg-accent-hover text-white text-xs font-semibold transition shadow flex items-center gap-1.5">
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
<span id="btn-submit-cat-text">Adicionar</span>
</button>
<button type="button" id="btn-cancel-cat-edit" class="hidden px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-slate-300 text-xs transition">
Cancelar
</button>
</div>
</form>
<!-- Lista de Categorias com Ações -->
<div class="space-y-1.5 max-h-60 overflow-y-auto pr-1" id="categories-crud-list">
<!-- Itens de categoria gerados dinamicamente -->
</div>
<div class="pt-3 border-t border-white/10 flex justify-between items-center text-xs text-slate-400">
<span>Arraste as abas na tela para mudar a ordem.</span>
<button type="button" id="btn-done-categories" class="px-4 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-medium transition">
Concluir
</button>
</div>
</div>
</div>
<!-- ==================== MODAL DE CONFIRMAÇÃO DE EXCLUSÃO DE CATEGORIA (Z-[70]) ==================== -->
<div id="modal-delete-cat-confirm" role="dialog" aria-modal="true" class="fixed inset-0 z-[70] hidden flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl border border-rose-500/30 text-center space-y-4">
<div class="w-12 h-12 rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center mx-auto">
<i data-lucide="folder-x" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-base font-bold text-white">Excluir categoria?</h3>
<p id="delete-cat-confirm-text" class="text-xs text-slate-300 mt-1">Os atalhos associados a ela serão movidos para Geral.</p>
</div>
<div class="flex items-center justify-center gap-3 pt-2">
<button type="button" id="btn-cancel-cat-delete" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">
Cancelar
</button>
<button type="button" id="btn-confirm-cat-delete" class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-semibold transition text-xs shadow-lg">
Excluir Categoria
</button>
</div>
</div>
</div>
<!-- ==================== MODAL DE CONFIRMAÇÃO DE EXCLUSÃO DE ATALHO ==================== -->
<div id="modal-delete-confirm" role="dialog" aria-modal="true" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl border border-rose-500/20 text-center space-y-4">
<div class="w-12 h-12 rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center mx-auto">
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-base font-bold text-white">Excluir este atalho?</h3>
<p id="delete-confirm-text" class="text-xs text-slate-300 mt-1">Essa ação não pode ser desfeita.</p>
</div>
<div class="flex items-center justify-center gap-3 pt-2">
<button type="button" id="btn-cancel-delete" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">
Cancelar
</button>
<button type="button" id="btn-confirm-delete" class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-semibold transition text-xs shadow-lg">
Sim, Excluir
</button>
</div>
</div>
</div>
<!-- ==================== MODAL DE COLAR JSON ==================== -->
<div id="modal-paste-json" role="dialog" aria-modal="true" class="fixed inset-0 z-[70] hidden flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-base font-bold text-white flex items-center gap-2">
<i data-lucide="clipboard-paste" class="w-5 h-5 text-accent"></i>
Colar JSON
</h3>
<button id="btn-close-paste" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<textarea id="input-paste-json" rows="8" placeholder="Cole aqui o conteúdo do arquivo .json..." class="w-full bg-slate-900/90 border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white font-mono focus:outline-none focus:border-accent resize-y"></textarea>
<div class="flex items-center justify-end gap-2.5 pt-2 border-t border-white/10">
<button type="button" id="btn-cancel-paste" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">Cancelar</button>
<button type="button" id="btn-confirm-paste" class="px-5 py-2 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition text-xs shadow-lg">Importar</button>
</div>
</div>
</div>
<!-- ==================== DRAWER DE CONFIGURAÇÕES ==================== -->
<div id="modal-settings" role="dialog" aria-modal="true" class="fixed inset-0 z-50 hidden flex justify-end bg-black/60 backdrop-blur-sm animate-fade-in">
<div class="w-full max-w-md h-full modal-panel p-6 overflow-y-auto border-l border-white/15 shadow-2xl flex flex-col justify-between">
<div class="space-y-6">
<div class="flex items-center justify-between pb-4 border-b border-white/10">
<div class="flex items-center gap-2.5">
<i data-lucide="sliders" class="w-5 h-5 text-accent"></i>
<h2 class="text-lg font-bold text-white">Configurações</h2>
</div>
<button id="btn-close-settings" aria-label="Fechar Configurações" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<!-- Perfil -->
<div class="space-y-2">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Identificação</label>
<div>
<label class="block text-xs text-slate-300 mb-1">Seu Nome / Apelido</label>
<input type="text" id="setting-user-name" class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-xs text-slate-300 mb-1">Cidade (para o clima)</label>
<input type="text" id="setting-city" placeholder="Ex: São Paulo, Rio de Janeiro..." class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-accent">
<p class="text-[10px] text-slate-500 mt-1">Deixe vazio para ocultar o clima ao lado do relógio.</p>
</div>
</div>
<!-- Fundo -->
<div class="space-y-3">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Plano de Fundo</label>
<div>
<label class="block text-xs text-slate-300 mb-1">URL da Imagem de Fundo</label>
<div class="flex gap-2">
<input type="url" id="setting-bg-url" placeholder="https://images.unsplash.com/..." class="flex-1 bg-slate-900/80 border border-white/15 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-accent">
<button id="btn-apply-bg" class="px-3 py-2 bg-white/10 hover:bg-white/20 rounded-xl text-xs font-semibold text-white transition">Aplicar</button>
</div>
</div>
<div>
<label class="block text-xs text-slate-400 mb-1.5">Predefinições Rápidas</label>
<div class="grid grid-cols-4 gap-2">
<button type="button" class="preset-bg rounded-lg h-12 bg-cover bg-center border border-white/20 hover:scale-105 transition" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&q=70')" data-url="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920&q=85"></button>
<button type="button" class="preset-bg rounded-lg h-12 bg-cover bg-center border border-white/20 hover:scale-105 transition" style="background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=600&q=70')" data-url="https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1920&q=85"></button>
<button type="button" class="preset-bg rounded-lg h-12 bg-cover bg-center border border-white/20 hover:scale-105 transition" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&q=70')" data-url="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=85"></button>
<button type="button" class="preset-bg rounded-lg h-12 bg-cover bg-center border border-white/20 hover:scale-105 transition" style="background-image: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=600&q=70')" data-url="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1920&q=85"></button>
</div>
</div>
<div>
<div class="flex justify-between text-xs text-slate-300 mb-1">
<span>Escurecimento do Fundo</span>
<span id="val-bg-dim">60%</span>
</div>
<input type="range" id="setting-bg-dim" min="10" max="95" value="60" class="w-full accent-accent cursor-pointer">
</div>
</div>
<!-- Cores -->
<div class="space-y-2">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Cor de Destaque</label>
<div class="flex items-center gap-3">
<button type="button" data-accent="#3b82f6" data-hover="#2563eb" class="theme-color w-7 h-7 rounded-full bg-blue-500 ring-2 ring-white/20 hover:scale-110 transition"></button>
<button type="button" data-accent="#10b981" data-hover="#059669" class="theme-color w-7 h-7 rounded-full bg-emerald-500 ring-2 ring-white/20 hover:scale-110 transition"></button>
<button type="button" data-accent="#8b5cf6" data-hover="#7c3aed" class="theme-color w-7 h-7 rounded-full bg-purple-500 ring-2 ring-white/20 hover:scale-110 transition"></button>
<button type="button" data-accent="#f43f5e" data-hover="#e11d48" class="theme-color w-7 h-7 rounded-full bg-rose-500 ring-2 ring-white/20 hover:scale-110 transition"></button>
<button type="button" data-accent="#f59e0b" data-hover="#d97706" class="theme-color w-7 h-7 rounded-full bg-amber-500 ring-2 ring-white/20 hover:scale-110 transition"></button>
<div class="flex items-center ml-auto">
<label for="setting-custom-color" class="text-[11px] text-slate-300 mr-2">Outra:</label>
<input type="color" id="setting-custom-color" value="#3b82f6" class="w-7 h-7 rounded-full cursor-pointer bg-transparent border-0">
</div>
</div>
</div>
<!-- Layout e Tamanho dos Cards -->
<div class="space-y-3">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Estilo dos Atalhos</label>
<div class="grid grid-cols-3 gap-2">
<button type="button" data-layout="grid" class="layout-btn p-2.5 rounded-xl glass-panel text-center text-xs font-semibold text-white border border-transparent hover:border-accent transition flex flex-col items-center gap-1">
<i data-lucide="layout-grid" class="w-4 h-4"></i>
<span>Grade</span>
</button>
<button type="button" data-layout="dock" class="layout-btn p-2.5 rounded-xl glass-panel text-center text-xs font-semibold text-white border border-transparent hover:border-accent transition flex flex-col items-center gap-1">
<i data-lucide="panel-bottom" class="w-4 h-4"></i>
<span>Dock</span>
</button>
<button type="button" data-layout="list" class="layout-btn p-2.5 rounded-xl glass-panel text-center text-xs font-semibold text-white border border-transparent hover:border-accent transition flex flex-col items-center gap-1">
<i data-lucide="list" class="w-4 h-4"></i>
<span>Lista</span>
</button>
</div>
<div class="pt-1">
<label class="block text-xs text-slate-300 mb-1.5">Tamanho dos Cards</label>
<div class="grid grid-cols-3 gap-2">
<button type="button" data-size="sm" class="size-btn py-2 rounded-xl glass-panel text-xs text-center text-slate-200 hover:text-white transition">Pequeno</button>
<button type="button" data-size="md" class="size-btn py-2 rounded-xl glass-panel text-xs text-center text-slate-200 hover:text-white transition">Médio</button>
<button type="button" data-size="lg" class="size-btn py-2 rounded-xl glass-panel text-xs text-center text-slate-200 hover:text-white transition">Grande</button>
</div>
</div>
</div>
<!-- Sincronização na Nuvem -->
<div class="pt-3 border-t border-white/10 space-y-3">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Sincronização na Nuvem</label>
<div class="rounded-2xl bg-white/5 border border-white/10 p-3 space-y-2.5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-xl bg-accent/20 flex items-center justify-center">
<i data-lucide="cloud" class="w-4 h-4 text-accent"></i>
</div>
<div>
<p id="sync-status-title" class="text-xs font-semibold text-white">Não conectado</p>
<p id="sync-status-sub" class="text-[11px] text-slate-400">Faça login para sincronizar</p>
</div>
</div>
<span id="sync-badge" class="hidden px-2 py-0.5 rounded-full text-[10px] bg-emerald-500/20 text-emerald-300 font-semibold">Sincronizado</span>
</div>
<div class="grid grid-cols-2 gap-2">
<button id="btn-sync-login" class="flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-accent/90 hover:bg-accent text-xs font-semibold text-white transition">
<i data-lucide="log-in" class="w-3.5 h-3.5"></i> Entrar / Cadastrar
</button>
<button id="btn-sync-now" class="flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-semibold text-white transition disabled:opacity-40 disabled:pointer-events-none">
<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i> Sincronizar agora
</button>
</div>
<button id="btn-sync-logout" class="hidden w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-white/5 hover:bg-white/10 text-xs font-medium text-slate-300 transition">
<i data-lucide="log-out" class="w-3.5 h-3.5"></i> Sair da conta
</button>
</div>
</div>
<!-- Dados -->
<div class="pt-3 border-t border-white/10 space-y-3">
<label class="block text-xs uppercase tracking-wider font-semibold text-slate-400">Dados</label>
<div class="grid grid-cols-2 gap-2.5">
<button id="btn-export-json" class="flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-semibold text-white transition">
<i data-lucide="download" class="w-4 h-4 text-emerald-400"></i> Exportar
</button>
<label class="flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-semibold text-white transition cursor-pointer">
<i data-lucide="upload" class="w-4 h-4 text-cyan-400"></i> Importar
<input type="file" id="file-import-json" accept=".json" class="hidden">
</label>
</div>
<div class="grid grid-cols-2 gap-2.5">
<button id="btn-copy-json" class="flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-semibold text-white transition">
<i data-lucide="copy" class="w-4 h-4 text-amber-400"></i> Copiar JSON
</button>
<button id="btn-paste-json" class="flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-semibold text-white transition">
<i data-lucide="clipboard-paste" class="w-4 h-4 text-sky-400"></i> Colar JSON
</button>
</div>
</div>
</div>
<div class="pt-6 mt-6 border-t border-white/10">
<button id="btn-save-settings" class="w-full py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold text-xs transition shadow-lg">
Concluir e Fechar
</button>
</div>
</div>
</div>
<!-- ==================== MODAL DE LOGIN/CADASTRO ==================== -->
<div id="modal-auth" role="dialog" aria-modal="true" class="fixed inset-0 z-[80] hidden flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl space-y-4">
<div class="flex items-center justify-between border-b border-white/10 pb-3">
<h3 class="text-base font-bold text-white flex items-center gap-2">
<i data-lucide="cloud" class="w-5 h-5 text-accent"></i>
Sincronizar na nuvem
</h3>
<button id="btn-close-auth-modal" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<!-- Abas Auth -->
<div class="flex items-center bg-white/5 rounded-xl p-1 text-xs">
<button type="button" data-auth-tab="login" class="auth-tab-btn flex-1 py-1.5 rounded-lg font-semibold text-white bg-white/15 transition">Entrar</button>
<button type="button" data-auth-tab="register" class="auth-tab-btn flex-1 py-1.5 rounded-lg font-semibold text-slate-300 hover:text-white transition">Criar conta</button>
</div>
<!-- Login -->
<form id="form-login" class="space-y-3 text-xs">
<div>
<label class="block text-slate-300 font-medium mb-1">E-mail</label>
<input type="email" id="login-email" required autocomplete="email" placeholder="seu@email.com" class="w-full bg-slate-900/90 border border-white/20 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Senha</label>
<input type="password" id="login-password" required autocomplete="current-password" placeholder="••••••••" class="w-full bg-slate-900/90 border border-white/20 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition shadow-lg">
<i data-lucide="log-in" class="w-4 h-4"></i> Entrar
</button>
<p id="login-error" class="text-rose-400 text-[11px] hidden"></p>
</form>
<!-- Registro -->
<form id="form-register" class="space-y-3 text-xs hidden">
<div>
<label class="block text-slate-300 font-medium mb-1">E-mail</label>
<input type="email" id="reg-email" required autocomplete="email" placeholder="seu@email.com" class="w-full bg-slate-900/90 border border-white/20 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Senha (mín. 6 caracteres)</label>
<input type="password" id="reg-password" required minlength="6" autocomplete="new-password" placeholder="••••••••" class="w-full bg-slate-900/90 border border-white/20 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<input type="text" name="website" id="reg-honeypot" tabindex="-1" autocomplete="off" class="hidden">
<button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition shadow-lg">
<i data-lucide="user-plus" class="w-4 h-4"></i> Criar conta
</button>
<p id="reg-error" class="text-rose-400 text-[11px] hidden"></p>
</form>
<p class="text-[11px] text-slate-400 leading-relaxed">
Seus atalhos, categorias, tarefas, notas e configurações são sincronizados com segurança na sua conta.
</p>
</div>
</div>
<!-- ==================== MODAL DE MERGE SYNC ==================== -->
<div id="modal-sync-merge" role="dialog" aria-modal="true" class="fixed inset-0 z-[90] hidden flex items-center justify-center p-4 bg-black/90 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl space-y-4 text-center">
<div class="w-12 h-12 rounded-full bg-accent/20 text-accent flex items-center justify-center mx-auto">
<i data-lucide="cloud-download" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-base font-bold text-white">Dados encontrados na nuvem</h3>
<p class="text-xs text-slate-300 mt-2 leading-relaxed">
Há configurações salvas nessa conta. O que deseja fazer?
</p>
</div>
<div class="space-y-2 pt-2">
<button id="btn-sync-download" class="w-full px-4 py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold text-xs transition shadow-lg flex items-center justify-center gap-2">
<i data-lucide="download-cloud" class="w-4 h-4"></i> Substituir local pelos dados da nuvem
</button>
<button id="btn-sync-upload" class="w-full px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-semibold text-xs transition flex items-center justify-center gap-2">
<i data-lucide="upload-cloud" class="w-4 h-4"></i> Enviar dados locais para a nuvem
</button>
<button id="btn-sync-cancel" class="w-full px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">
Cancelar
</button>
</div>
</div>
</div>
<!-- ==================== PAINEL DE TAREFAS (slide esquerda) ==================== -->
<div id="panel-tasks" role="dialog" aria-modal="true" class="fixed inset-0 z-[55] hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" data-close-panel="panel-tasks"></div>
<div class="absolute left-0 top-0 h-full w-full sm:max-w-md modal-panel border-r border-white/15 flex flex-col">
<div class="flex items-center justify-between p-5 border-b border-white/10 flex-shrink-0">
<h2 class="text-base font-bold text-white flex items-center gap-2">
<i data-lucide="clipboard-list" class="w-5 h-5 text-accent"></i>
Tarefas
</h2>
<button id="btn-close-tasks" aria-label="Fechar Tarefas" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<div class="px-5 py-3 flex-shrink-0">
<button id="btn-new-task" class="w-full py-2.5 rounded-xl bg-accent hover:bg-accent-hover text-white text-xs font-semibold transition shadow flex items-center justify-center gap-2">
<i data-lucide="plus" class="w-4 h-4"></i> Nova Tarefa
</button>
</div>
<div id="tasks-list" class="flex-1 overflow-y-auto px-5 pb-5 space-y-2">
<!-- Itens renderizados dinamicamente -->
</div>
</div>
</div>
<!-- ==================== MODAL DETALHE DA TAREFA ==================== -->
<div id="modal-task-detail" role="dialog" aria-modal="true" class="fixed inset-0 z-[65] hidden flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl relative max-h-[90vh] overflow-y-auto">
<button id="btn-close-task-detail" aria-label="Fechar" class="absolute top-4 right-4 p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition z-10">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<div id="task-detail-content">
<!-- Conteúdo renderizado dinamicamente -->
</div>
</div>
</div>
<!-- ==================== MODAL FORMULÁRIO DE TAREFA ==================== -->
<div id="modal-task-form" role="dialog" aria-modal="true" class="fixed inset-0 z-[65] hidden flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl relative max-h-[92vh] overflow-y-auto">
<div class="flex items-center justify-between mb-4">
<h3 id="task-form-title" class="text-lg font-bold text-white flex items-center gap-2">
<i data-lucide="clipboard-plus" class="w-5 h-5 text-accent"></i>
Nova Tarefa
</h3>
<button id="btn-close-task-form" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<form id="form-task" class="space-y-3.5 text-xs">
<input type="hidden" id="input-task-id">
<div>
<label class="block text-slate-300 font-medium mb-1">Nome da Tarefa *</label>
<input type="text" id="input-task-name" required placeholder="Ex: Reunião de projeto, Academia..." class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Descrição</label>
<textarea id="input-task-desc" rows="2" placeholder="Detalhes sobre a tarefa..." class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent resize-y"></textarea>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-slate-300 font-medium mb-1">Data *</label>
<input type="date" id="input-task-date" required class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Prioridade *</label>
<select id="input-task-priority" required class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-accent">
<option value="low">Baixa</option>
<option value="medium" selected>Média</option>
<option value="high">Alta</option>
</select>
</div>
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Checklist</label>
<div id="checklist-editor" class="space-y-2 mb-2">
<!-- Itens do checklist renderizados dinamicamente -->
</div>
<button type="button" id="btn-add-check-item" class="flex items-center gap-1.5 text-accent hover:text-accent-hover text-xs font-semibold transition">
<i data-lucide="plus" class="w-3.5 h-3.5"></i> Adicionar item
</button>
</div>
<div class="flex items-center justify-end gap-2.5 pt-4 border-t border-white/10">
<button type="button" id="btn-cancel-task" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition">Cancelar</button>
<button type="submit" class="px-5 py-2 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold transition shadow-lg flex items-center gap-2">
<i data-lucide="check" class="w-4 h-4"></i> Salvar
</button>
</div>
</form>
</div>
</div>
<!-- ==================== MODAL EXCLUSÃO DE TAREFA ==================== -->
<div id="modal-task-delete" role="dialog" aria-modal="true" class="fixed inset-0 z-[70] hidden flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl border border-rose-500/30 text-center space-y-4">
<div class="w-12 h-12 rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center mx-auto">
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-base font-bold text-white">Excluir esta tarefa?</h3>
<p id="task-delete-text" class="text-xs text-slate-300 mt-1">Essa ação não pode ser desfeita.</p>
</div>
<div class="flex items-center justify-center gap-3 pt-2">
<button type="button" id="btn-cancel-task-delete" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">Cancelar</button>
<button type="button" id="btn-confirm-task-delete" class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-semibold transition text-xs shadow-lg">Excluir</button>
</div>
</div>
</div>
<!-- ==================== PAINEL DE NOTAS (slide esquerda) ==================== -->
<div id="panel-notes" role="dialog" aria-modal="true" class="fixed inset-0 z-[55] hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" data-close-panel="panel-notes"></div>
<div class="absolute left-0 top-0 h-full w-full sm:max-w-md modal-panel border-r border-white/15 flex flex-col">
<div class="flex items-center justify-between p-5 border-b border-white/10 flex-shrink-0">
<h2 class="text-base font-bold text-white flex items-center gap-2">
<i data-lucide="sticky-note" class="w-5 h-5" style="color: var(--accent-color);"></i>
Notas
</h2>
<button id="btn-close-notes" aria-label="Fechar Notas" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<div class="px-5 py-3 flex-shrink-0">
<button id="btn-new-note" class="w-full py-2.5 rounded-xl text-slate-900 text-xs font-bold transition shadow flex items-center justify-center gap-2" style="background: var(--accent-color);">
<i data-lucide="plus" class="w-4 h-4"></i> Nova Nota
</button>
</div>
<div id="notes-list" class="flex-1 overflow-y-auto px-5 pb-5 space-y-2">
<!-- Itens renderizados dinamicamente -->
</div>
</div>
</div>
<!-- ==================== MODAL FORMULÁRIO DE NOTA ==================== -->
<div id="modal-note-form" role="dialog" aria-modal="true" class="fixed inset-0 z-[65] hidden flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in">
<div class="modal-panel w-full max-w-md rounded-3xl p-6 shadow-2xl relative max-h-[92vh] overflow-y-auto">
<div class="flex items-center justify-between mb-4">
<h3 id="note-form-title" class="text-lg font-bold text-white flex items-center gap-2">
<i data-lucide="sticky-note" class="w-5 h-5" style="color: var(--accent-color);"></i>
Nova Nota
</h3>
<button id="btn-close-note-form" aria-label="Fechar" class="p-1.5 rounded-full hover:bg-white/10 text-slate-400 hover:text-white transition">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<form id="form-note" class="space-y-3.5 text-xs">
<input type="hidden" id="input-note-id">
<div>
<label class="block text-slate-300 font-medium mb-1">Título *</label>
<input type="text" id="input-note-name" required placeholder="Ex: Ideias, Lembretes, Anotações..." class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none" style="--focus-border: var(--accent-color);">
</div>
<div>
<label class="block text-slate-300 font-medium mb-1">Conteúdo *</label>
<textarea id="input-note-desc" rows="8" required placeholder="Escreva sua nota aqui..." class="w-full bg-slate-900/80 border border-white/15 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none resize-y" style="--focus-border: var(--accent-color);"></textarea>
</div>
<p id="note-created-info" class="hidden text-[10px] text-slate-500"></p>
<div class="flex items-center justify-end gap-2.5 pt-4 border-t border-white/10">
<button type="button" id="btn-cancel-note" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition">Cancelar</button>
<button type="submit" class="px-5 py-2 rounded-xl text-slate-900 font-bold transition shadow-lg flex items-center gap-2" style="background: var(--accent-color);">
<i data-lucide="check" class="w-4 h-4"></i> Salvar
</button>
</div>
</form>
</div>
</div>
<!-- ==================== MODAL EXCLUSÃO DE NOTA ==================== -->
<div id="modal-note-delete" role="dialog" aria-modal="true" class="fixed inset-0 z-[70] hidden flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-fade-in">
<div class="modal-panel w-full max-w-sm rounded-3xl p-6 shadow-2xl border border-rose-500/30 text-center space-y-4">
<div class="w-12 h-12 rounded-full bg-rose-500/20 text-rose-400 flex items-center justify-center mx-auto">
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-base font-bold text-white">Excluir esta nota?</h3>
<p id="note-delete-text" class="text-xs text-slate-300 mt-1">Essa ação não pode ser desfeita.</p>
</div>
<div class="flex items-center justify-center gap-3 pt-2">
<button type="button" id="btn-cancel-note-delete" class="px-4 py-2 rounded-xl text-slate-300 hover:bg-white/10 transition text-xs font-semibold">Cancelar</button>
<button type="button" id="btn-confirm-note-delete" class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-semibold transition text-xs shadow-lg">Excluir</button>
</div>
</div>
</div>
<!-- ==================== JAVASCRIPT E LÓGICA ==================== -->
<script src="app.js" defer></script>
</body>
</html>