Gestionnaire de tâches HTML : ajouter, supprimer et terminer des tâches

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 December 2023

Modèle HTML de page de connexion Liquid Drop

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerenciador de tarefas</title>
    <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=Caveat:wght@700&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <style>       
        body{
            margin: 0;
            padding: 0;
            background-color: #4E0083;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%234E0083' cx='50' cy='0' r='50'/%3E%3Cg fill='%23540188' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2359018e' cx='50' cy='100' r='50'/%3E%3Cg fill='%235f0293' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23650298' cx='50' cy='200' r='50'/%3E%3Cg fill='%236b039e' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%237103a3' cx='50' cy='300' r='50'/%3E%3Cg fill='%237704a8' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%237d04ad' cx='50' cy='400' r='50'/%3E%3Cg fill='%238304b3' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%238905b8' cx='50' cy='500' r='50'/%3E%3Cg fill='%239005bd' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%239605c3' cx='50' cy='600' r='50'/%3E%3Cg fill='%239d05c8' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a305cd' cx='50' cy='700' r='50'/%3E%3Cg fill='%23aa05d2' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b004d7' cx='50' cy='800' r='50'/%3E%3Cg fill='%23b703dd' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23be02e2' cx='50' cy='900' r='50'/%3E%3Cg fill='%23c501e7' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23CC00EC' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
            background-attachment: fixed;
            background-size: contain;
            font-family: 'Roboto', sans-serif;
        }
        #main{
            display: flex;
            flex-direction: column;
            padding: 10px;
            align-items: center;
            margin-top: 95px;
            font-size: 2.1rem;
        }
        #main-content{
            background: white;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 30px;
            border-radius: 20px;
            border-top: black 3px solid;
            min-width: 600px;
            max-width: 600px;
            overflow: auto;           
        }
        h1{
            font-family: 'Caveat', cursive;   
        }
        #lista-de-tarefas li {
        list-style: decimal;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 0 8px;
        text-align: left;
        margin-left: 100px;
        font-weight: normal;
        }
        hr{
            background: white;
            color: black;
            margin-top: 30px;
        }
        .excluir{
            background: red;
        }
        .concluir{
            background: green;
            margin-left: 3px;           
        }
        #adicionar{
            background: blue;
            margin-left: 3px;
        }
        button{
            border-radius: 5px;
            width: 120px;
            height: 30px;
            font-weight: bold;
            color: white;
            font-size: 10px;
        }
        #adicionar-tarefa input{
            width: 160px;
            height: 20px;
            border-radius: 5px;
            text-align: center;
            margin-left: 10px;
        }
        #lista-de-tarefas .concluida span {
        color: green;
        text-decoration: line-through;
        }
        footer{
            margin-top: 200px;
            text-align: center;
        }

/* Estilos para o botão de doação */
        .custom-donation-container {
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            z-index: 99999 !important;
            pointer-events: auto !important;
        }
        
        .donation-btn {
            background: linear-gradient(45deg, #ff6b35, #f7931e) !important;
            color: white !important;
            padding: 10px 18px !important;
            border-radius: 30px !important;
            text-decoration: none !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5) !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 100000 !important;
            min-height: 40px !important;
            white-space: nowrap !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
        }
        
        .donation-btn:hover {
            transform: translateY(-3px) scale(1.05) !important;
            box-shadow: 0 8px 30px rgba(255, 107, 53, 0.7) !important;
            color: white !important;
            text-decoration: none !important;
            background: linear-gradient(45deg, #ff7b45, #f8a31e) !important;
        }
        
        .donation-btn:active {
            transform: translateY(-1px) scale(1.02) !important;
        }
        
        .donation-btn:visited {
            color: white !important;
        }
        
        .heart-icon {
            font-size: 18px !important;
            animation: heartbeat 2.5s infinite !important;
            display: inline-block !important;
            filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)) !important;
        }
        
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1.2); }
            75% { transform: scale(1.1); }
        }
        
        /* Responsivo para mobile */
        @media (max-width: 480px) {
            .custom-donation-container {
                top: 15px !important;
                right: 15px !important;
            }
            
            .donation-btn {
                padding: 8px 14px !important;
                font-size: 13px !important;
                min-height: 36px !important;
            }
            
            .heart-icon {
                font-size: 16px !important;
            }

#main-content {
                min-width: 90%;
                max-width: 90%;
            }
        }

/* Estilos para tarefas concluídas */
        .concluida {
            color: #4CAF50 !important;
            text-decoration: line-through !important;
            opacity: 0.7 !important;
            background-color: #f0f8f0 !important;
            border-radius: 8px !important;
            padding: 5px !important;
        }

/* Botão salvar metas */
        #salvar-metas {
            background: #9C27B0;
            margin: 20px auto;
            width: 150px;
            font-size: 12px;
        }

/* Status de salvamento */
        .status-salvamento {
            margin: 10px 0;
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }

.sucesso {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

.erro {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>

<body>
    <section id="main">
        <header>
            <h1>Gerenciador de Metas</h1>
        </header>
        <div id="main-content">
            <div id="adicionar-tarefa">
                <span><input type="text" placeholder="nome"><button id="adicionar">adicionar tarefa</button></span>
            </div>
            
            <div id="status-container"></div>
            
            <button id="salvar-metas"> Salvar Metas</button>
            
            <div id="lista-de-tarefas">
                <ul>
                    <li>vinixodin.com<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div></li>
                    <hr>
                </ul>
            </div>
        </div>
    </section>

// FUNCIONALIDADE DO GERENCIADOR DE METAS COM LOCALSTORAGE
        document.addEventListener('DOMContentLoaded', function () {
            const adicionarTarefaBtn = document.getElementById('adicionar');
            const nomeTarefaInput = document.querySelector('#adicionar-tarefa input');
            const listaDeTarefas = document.getElementById('lista-de-tarefas');
            const salvarMetasBtn = document.getElementById('salvar-metas');
            const statusContainer = document.getElementById('status-container');

// Função para mostrar status
            function mostrarStatus(mensagem, tipo = 'sucesso') {
                statusContainer.innerHTML = `<div class="status-salvamento ${tipo}">${mensagem}</div>`;
                
                // Remove o status após 3 segundos
                setTimeout(() => {
                    statusContainer.innerHTML = '';
                }, 3000);
            }

// Função para carregar metas do localStorage
            function carregarMetas() {
                try {
                    const metas = JSON.parse(localStorage.getItem('metas')) || [];
                    
                    // Limpa a lista atual (exceto o exemplo)
                    const ul = listaDeTarefas.querySelector('ul');
                    ul.innerHTML = '<li>exemplo de meta<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div></li><hr>';
                    
                    // Adiciona as metas salvas
                    metas.forEach(meta => {
                        const novaTarefa = document.createElement('li');
                        novaTarefa.innerHTML = `${meta.nome}<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div>`;
                        
                        if (meta.concluida) {
                            novaTarefa.classList.add('concluida');
                        }
                        
                        ul.appendChild(novaTarefa);
                        const hrElement = document.createElement('hr');
                        ul.appendChild(hrElement);
                    });
                    
                    if (metas.length > 0) {
                        mostrarStatus(`${metas.length} meta(s) carregada(s) com sucesso!`);
                    }
                } catch (error) {
                    console.error('Erro ao carregar metas:', error);
                    mostrarStatus(' Erro ao carregar metas salvas', 'erro');
                }
            }

// Função para salvar metas no localStorage
            function salvarMetas() {
                try {
                    const metas = [];
                    const listItems = listaDeTarefas.querySelectorAll('li');
                    
                    listItems.forEach(item => {
                        const texto = item.childNodes[0].textContent.trim();
                        
                        // Pula o exemplo
                        if (texto === 'exemplo de meta') return;
                        
                        const meta = {
                            nome: texto,
                            concluida: item.classList.contains('concluida'),
                            dataAdicao: new Date().toISOString()
                        };
                        
                        metas.push(meta);
                    });
                    
                    localStorage.setItem('metas', JSON.stringify(metas));
                    mostrarStatus(` ${metas.length} meta(s) salva(s) com sucesso!`);
                    
                    // Estatísticas
                    const concluidas = metas.filter(m => m.concluida).length;
                    const pendentes = metas.length - concluidas;
                    
                    setTimeout(() => {
                        mostrarStatus(` ${concluidas} concluída(s) | ${pendentes} pendente(s)`);
                    }, 1500);
                    
                } catch (error) {
                    console.error('Erro ao salvar metas:', error);
                    mostrarStatus('Erro ao salvar metas', 'erro');
                }
            }

function adicionarTarefa() {
                const nomeTarefa = nomeTarefaInput.value;

if (nomeTarefa.trim() !== '') {
                    const novaTarefa = document.createElement('li');
                    novaTarefa.innerHTML = `${nomeTarefa}<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div>`;
                    listaDeTarefas.querySelector('ul').appendChild(novaTarefa);
                    const hrElement = document.createElement('hr');
                    listaDeTarefas.querySelector('ul').appendChild(hrElement);
                    nomeTarefaInput.value = '';
                    
                    mostrarStatus('Nova meta adicionada!');
                }
            }

// Event listeners
            adicionarTarefaBtn.addEventListener('click', adicionarTarefa);
            salvarMetasBtn.addEventListener('click', salvarMetas);
            
            // Enter para adicionar tarefa
            nomeTarefaInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    adicionarTarefa();
                }
            });
            
            listaDeTarefas.addEventListener('click', function (event) {
                if (event.target.classList.contains('excluir')) {
                    excluirTarefa(event);
                } else if (event.target.classList.contains('concluir')) {
                    concluirTarefa(event);
                }
            });

// Carrega as metas salvas ao inicializar
            carregarMetas();
            
            // Auto-salvar a cada 30 segundos
            setInterval(() => {
                salvarMetas();
            }, 30000);
        });
    </script>
    
</body>
</html>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #181818; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
.codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } 
.animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; }
.animacao1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('https://picsum.photos/100/100?random=1'); /* Use YOUR image */
    background-size: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); 
    animation: glitch 3s linear infinite;
    background-color: rgba(255, 255, 255, 0.1);
}
.animacao1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); 
    filter: blur(5px);
    animation: blurFade 10s ease-in-out infinite; 
}

.animacao2 {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #66D9EF;
    transform: rotate(45deg);
    clip-path: circle(50% at 50% 40%);
    animation: pulse 2.5s ease-in-out infinite alternate;
}

@keyframes glitch { 
    0% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
    25% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 100%); } 
    50% { clip-path: polygon( 50% 0%, 100% 40%, 50% 100%, 0 40%); } 
    75% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 10%); } 
    100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }

}
@keyframes blurFade { 
   0% { opacity: 1; }
   70% { opacity: 0.5; filter: blur(20px); } 
   100% { opacity: 1; } 
}
@keyframes pulse { 
    0% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #48BEFF; }
    100% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; } 
}

Gestionnaire de tâches HTML : ajouter, supprimer et terminer des tâches

Recommandé

Page d'accueil de café

Un code par hamzanramzan034

Modèle HTML de page de connexion Liquid Drop

HTML

CSS

JS

Recommandé

Page d'accueil de café

Un code par hamzanramzan034

Modèle HTML de page de connexion Liquid Drop

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS