LouveApp Clone

Vou criar uma interface completa inspirada no LouveApp com todas as funcionalidades solicitadas. Aqui está a estrutura completa: LouveApp Clone

Dashboard

Músicas

42 Cadastradas

Ver todas

Membros

28 Cadastrados

Ver todos

Escalas

5 Este mês

Ver todas

Ministérios

6 Ativos

Ver todos

Atividades Recentes

Nova música adicionada: "Grande é o Senhor"
2 horas atrás
Novo membro cadastrado: João Silva
Ontem, 15:30
Escala atualizada para o culto de domingo
Ontem, 10:15

Próximos Eventos

15 JUN

Culto de Domingo

09:00 - 12:00 | Templo Central

L M +3

17 JUN

Ensaio do Ministério de Louvor

19:00 - 21:00 | Sala de Ensaios

J A +5

:root { --primary-color: #6a1b9a; --primary-light: #9c4dcc; --primary-dark: #38006b; --secondary-color: #ff9800; --secondary-light: #ffc947; --secondary-dark: #c66900; --background: #f5f5f5; --surface: #ffffff; --error: #d32f2f; --on-primary: #ffffff; --on-secondary: #000000; --on-background: #212121; --on-surface: #212121; --on-error: #ffffff; --border-radius: 8px; --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--background); color: var(--on-background); line-height: 1.6; } .app-container { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "header header" "sidebar main"; min-height: 100vh; } .app-header { grid-area: header; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--primary-color); color: var(--on-primary); box-shadow: var(--box-shadow); z-index: 10; } .header-left { display: flex; align-items: center; gap: 15px; } .menu-toggle { background: none; border: none; color: var(--on-primary); font-size: 1.2rem; cursor: pointer; display: none; } .app-title { font-size: 1.5rem; font-weight: 500; } .header-right { display: flex; align-items: center; gap: 15px; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--secondary-color); color: var(--on-secondary); display: flex; align-items: center; justify-content: center; font-weight: bold; } .sidebar { grid-area: sidebar; background-color: var(--surface); box-shadow: var(--box-shadow); padding: 20px 0; z-index: 5; } .main-nav ul { list-style: none; } .main-nav li { margin-bottom: 5px; } .main-nav a { display: flex; align-items: center; padding: 12px 20px; color: var(--on-surface); text-decoration: none; transition: var(--transition); } .main-nav a i { margin-right: 10px; width: 20px; text-align: center; } .main-nav a:hover { background-color: rgba(106, 27, 154, 0.1); } .main-nav .active a { background-color: var(--primary-light); color: var(--on-primary); } .main-content { grid-area: main; padding: 20px; overflow-y: auto; } .content-header { margin-bottom: 20px; } .content-header h2 { font-size: 1.8rem; font-weight: 500; color: var(--primary-dark); } .breadcrumb { font-size: 0.9rem; color: var(--primary-light); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; } .card { background-color: var(--surface); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; transition: var(--transition); } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .card-header { padding: 15px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; } .card-header h3 { font-size: 1.1rem; font-weight: 500; } .card-header i { color: var(--primary-light); font-size: 1.2rem; } .card-body { padding: 20px; } .summary-card .card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; } .summary-card .count { font-size: 2.5rem; font-weight: 600; color: var(--primary-color); margin-bottom: 5px; } .summary-card .label { font-size: 0.9rem; color: var(--on-background); opacity: 0.7; } .card-footer { padding: 15px 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .card-footer a { color: var(--primary-light); text-decoration: none; font-weight: 500; transition: var(--transition); } .card-footer a:hover { color: var(--primary-dark); } .activities-card, .events-card { grid-column: span 2; } .activities-list { list-style: none; } .activities-list li { display: flex; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .activities-list li:last-child { border-bottom: none; } .activity-icon { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(106, 27, 154, 0.1); color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; } .activity-details { flex-grow: 1; } .activity-details p { margin-bottom: 5px; font-weight: 500; } .activity-time { font-size: 0.8rem; color: rgba(0, 0, 0, 0.5); } .event-item { display: flex; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .event-item:last-child { border-bottom: none; } .event-date { width: 50px; height: 50px; border-radius: var(--border-radius); background-color: var(--primary-color); color: var(--on-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; } .event-date .day { font-size: 1.2rem; font-weight: 600; line-height: 1; } .event-date .month { font-size: 0.7rem; text-transform: uppercase; line-height: 1; } .event-details { flex-grow: 1; } .event-details h4 { margin-bottom: 5px; font-weight: 500; } .event-details p { font-size: 0.9rem; color: rgba(0, 0, 0, 0.7); margin-bottom: 10px; } .event-members { display: flex; gap: 5px; } .member-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: var(--secondary-light); color: var(--on-secondary); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: var(--transition); } .modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--surface); border-radius: var(--border-radius); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; transform: translateY(-20px); transition: var(--transition); } .modal.active .modal-content { transform: translateY(0); } .modal-header { padding: 15px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-size: 1.3rem; font-weight: 500; } .close-modal { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--on-surface); } .modal-body { padding: 20px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 15px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2); } .form-group textarea { min-height: 100px; resize: vertical; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .btn { padding: 10px 20px; border: none; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .btn-primary { background-color: var(--primary-color); color: var(--on-primary); } .btn-primary:hover { background-color: var(--primary-dark); } .btn-secondary { background-color: var(--background); color: var(--on-background); } .btn-secondary:hover { background-color: #e0e0e0; } select[multiple] { height: auto; min-height: 100px; } select[multiple] option { padding: 8px 10px; } @media (max-width: 992px) { .app-container { grid-template-columns: 1fr; grid-template-areas: "header" "main"; } .sidebar { position: fixed; top: 60px; left: -250px; width: 250px; height: calc(100vh - 60px); transition: var(--transition); } .sidebar.active { left: 0; } .menu-toggle { display: block; } } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: 1fr; } .activities-card, .events-card { grid-column: span 1; } } document.addEventListener('DOMContentLoaded', function() { // Toggle sidebar on mobile const menuToggle = document.querySelector('.menu-toggle'); const sidebar = document.querySelector('.sidebar'); menuToggle.addEventListener('click', function() { sidebar.classList.toggle('active'); }); // Modal functionality const modals = document.querySelectorAll('.modal'); const closeModalButtons = document.querySelectorAll('.close-modal'); function openModal(modalId) { const modal = document.getElementById(modalId); modal.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeModal(modal) { modal.classList.remove('active'); document.body.style.overflow = ''; } closeModalButtons.forEach(button => { button.addEventListener('click', function() { const modal = this.closest('.modal'); closeModal(modal); }); }); modals.forEach(modal => { modal.addEventListener('click', function(e) { if (e.target === this) { closeModal(this); } }); }); // Sample data for demonstration const sampleMusics = [ { id: 1, title: "Grande é o Senhor", artist: "Adoração e Adoradores", tone: "G" }, { id: 2, title: "Eu Te Exaltarei", artist: "Gabriela Rocha", tone: "A" }, { id: 3, title: "Tua Graça Me Basta", artist: "Davi Sacer", tone: "B" } ]; const sampleMembers = [ { id: 1, name: "João Silva", email: "joao@example.com", ministry: ["Louvor"], skills: ["vocal", "guitar"] }, { id: 2, name: "Maria Souza", email: "maria@example.com", ministry: ["Louvor", "Diaconia"], skills: ["vocal"] }, { id: 3, name: "Carlos Oliveira", email: "carlos@example.com", ministry: ["Multimídia"], skills: [] } ]; // Form submissions const musicForm = document.getElementById('musicForm'); if (musicForm) { musicForm.addEventListener('submit', function(e) { e.preventDefault(); const title = document.getElementById('musicTitle').value; const artist = document.getElementById('musicArtist').value; const tone = document.getElementById('musicTone').value; const lyrics = document.getElementById('musicLyrics').value; const chords = document.getElementById('musicChords').value; // In a real app, you would send this data to a server console.log('Nova música:', { title, artist, tone, lyrics, chords }); // Close modal closeModal(document.getElementById('addMusicModal')); // Reset form this.reset(); // Show success message alert('Música adicionada com sucesso!'); }); } const memberForm = document.getElementById('memberForm'); if (memberForm) { memberForm.addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('memberName').value; const email = document.getElementById('memberEmail').value; const phone = document.getElementById('memberPhone').value; // Get selected ministries const ministrySelect = document.getElementById('memberMinistry'); const ministries = Array.from(ministrySelect.selectedOptions).map(option => option.text); // Get selected skills const skillsSelect = document.getElementById('memberSkills'); const skills = Array.from(skillsSelect.selectedOptions).map(option => option.value); // In a real app, you would send this data to a server console.log('Novo membro:', { name, email, phone, ministries, skills }); // Close modal closeModal(document.getElementById('addMemberModal')); // Reset form this.reset(); // Show success message alert('Membro adicionado com sucesso!'); }); } // Navigation - simulate page changes const navLinks = document.querySelectorAll('.main-nav a'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Remove active class from all links navLinks.forEach(navLink => { navLink.parentElement.classList.remove('active'); }); // Add active class to clicked link this.parentElement.classList.add('active'); // Update content header const contentHeader = document.querySelector('.content-header h2'); const breadcrumb = document.querySelector('.breadcrumb'); if (contentHeader && breadcrumb) { contentHeader.textContent = this.textContent.trim(); breadcrumb.textContent = this.textContent.trim(); } // Close sidebar on mobile if (window.innerWidth < 992) { sidebar.classList.remove('active'); } }); }); });