evandro26/prayer-intentions-tracker
0
1<!DOCTYPE html>2<html lang="pt-BR">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Prayer Intentions Tracker</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: '#4f46e5',15 'primary-light': '#818cf8',16 'primary-dark': '#3730a3',17 secondary: '#10b981',18 accent: '#f59e0b',19 light: '#f8fafc',20 dark: '#1e293b',21 }22 }23 }24 }25 </script>26<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>27 <script src="https://unpkg.com/feather-icons"></script>28</head>29<body class="bg-gray-50 min-h-screen">30 <custom-header></custom-header>31 32 <main class="container mx-auto px-4 py-8">33 <div class="max-w-4xl mx-auto">34 <!-- Form Section -->35 <section class="bg-white rounded-lg shadow-md p-6 mb-8">36 <h2 class="text-2xl font-semibold text-gray-800 mb-4">Adicionar Intenção</h2>37 <form id="intentionForm" class="space-y-4">38 <div>39 <label for="name" class="block text-sm font-medium text-gray-700">Nome</label>40 <input type="text" id="name" name="name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">41 </div>42 43 <div>44 <label for="type" class="block text-sm font-medium text-gray-700">Tipo de Intenção</label>45 <select id="type" name="type" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">46 <option value="">Selecione...</option>47 <option value="falecimento">Falecimento</option>48 <option value="nascimento">Aniversário de Nascimento</option>49 <option value="matrimonio">Aniversário de Matrimônio</option>50 <option value="saude">Recuperação da Saúde</option>51 <option value="gracas">Ação de Graças</option>52 </select>53 </div>54 55 <div>56 <label for="date" class="block text-sm font-medium text-gray-700">Data (opcional)</label>57 <input type="date" id="date" name="date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">58 </div>59 60 <div>61 <label for="notes" class="block text-sm font-medium text-gray-700">Observações (opcional)</label>62 <textarea id="notes" name="notes" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>63 </div>64 65 <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">66 <i data-feather="plus" class="mr-2"></i> Adicionar Intenção67 </button>68 </form>69 </section>70 71 <!-- Intentions List Section -->72 <section>73 <h2 class="text-2xl font-semibold text-gray-800 mb-4">Intenções Registradas</h2>74 75 <div id="intentionsContainer" class="space-y-6">76 <!-- Intentions will be loaded here by JavaScript -->77 </div>78 </section>79 </div>80 </main>81 82 <custom-footer></custom-footer>83 84 <!-- Print Modal -->85 <div id="printModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">86 <div class="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">87 <div class="flex justify-between items-center mb-4">88 <h3 class="text-xl font-semibold">Imprimir Intenções</h3>89 <button onclick="closePrintModal()" class="text-gray-500 hover:text-gray-700">90 <i data-feather="x"></i>91 </button>92 </div>93 <div id="printContent" class="space-y-6">94 <!-- Print content will be loaded here -->95 </div>96 <div class="mt-6 flex justify-end space-x-4">97 <button onclick="closePrintModal()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancelar</button>98 <button onclick="window.print()" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">Imprimir</button>99 </div>100 </div>101 </div>102 103 <script src="components/header.js"></script>104 <script src="components/footer.js"></script>105 <script src="script.js"></script>106 <script>feather.replace();</script>107<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>108</body>109</html>