Sistema completo de organização pessoal com lembretes de remédios, timer de descanso para os olhos, calendário de eventos, notas e controle de abastecimento de veículos.
- Visão geral de todas as funcionalidades
- Acesso rápido aos módulos principais
- Interface responsiva e intuitiva
- Timer baseado na regra 20-20-20 (a cada 20 minutos, olhe para algo a 20 pés de distância por 20 segundos)
- Notificações visuais e sonoras
- Histórico de sessões
- Pausa e retomada do timer
- Cadastro de medicamentos com nome, dosagem e horários
- Sistema de notificações para não esquecer remédios
- Histórico de medicamentos tomados
- Gerenciamento completo (criar, editar, excluir)
- Visualização mensal de eventos
- Criação e edição de eventos
- Diferentes categorias com cores
- Sincronização com backend
- Sistema de notas rápidas
- Editor simples e prático
- Armazenamento local e em nuvem
- Busca e organização
- Registro de abastecimentos de veículos
- Cálculo automático de consumo médio
- Histórico detalhado por veículo
- Estatísticas de gastos
- Cadastro e login de usuários
- Sessões seguras com PHP
- Área de perfil com foto
- Modo visitante para demonstração
- HTML5 - Estrutura semântica
- SCSS/CSS3 - Estilização modular e responsiva
- JavaScript (Vanilla) - Lógica do cliente
- Bootstrap Icons - Ícones
- PHP 7.4+ - Linguagem server-side
- MySQL - Banco de dados relacional
- PDO - Camada de abstração de dados
- SASS - Pré-processador CSS
- VS Code Tasks - Automação de tarefas
- Git - Controle de versão
Lembretes/
├── index.html # Dashboard principal
├── login.html # Página de login
├── register.html # Página de cadastro
├── eye-rest.html # Timer de descanso
├── medicines.html # Gerenciamento de remédios
├── calendar.html # Calendário de eventos
├── notes.html # Sistema de notas
├── fuel-tracker.html # Controle de abastecimento
├── package.json # Dependências Node.js
│
├── backend/
│ ├── api/ # Endpoints da API
│ │ ├── auth-status.php
│ │ ├── login.php
│ │ ├── register.php
│ │ ├── logout.php
│ │ ├── medicines.php
│ │ ├── events.php
│ │ ├── cars.php
│ │ └── fuel-logs.php
│ ├── classes/ # Classes PHP
│ │ ├── User.php
│ │ ├── MedicineReminder.php
│ │ ├── CalendarEvent.php
│ │ ├── Car.php
│ │ └── FuelLog.php
│ ├── config/ # Configurações
│ │ ├── config.php
│ │ ├── database.php
│ │ ├── env.php
│ │ └── auth.php
│ ├── logs/ # Logs do sistema
│ └── database.sql # Schema do banco
│
├── components/
│ └── navbar.html # Navbar reutilizável
│
├── js/
│ ├── app.js # Inicialização geral
│ ├── auth.js # Autenticação
│ ├── navbar.js # Navbar dinâmica
│ ├── calendar.js # Funcionalidades do calendário
│ ├── eyeRestTimer.js # Timer de descanso
│ ├── medicineReminders.js
│ ├── fuelTracker.js
│ ├── notes.js
│ ├── offlineStorage.js
│ └── utils.js # Funções utilitárias
│
└── css/
├── styles.scss # SCSS modular
└── styles.css # CSS compilado
- PHP 7.4 ou superior
- MySQL/MariaDB
- Node.js (para compilar SASS)
- Servidor web (Apache/Nginx) ou Python para desenvolvimento
git clone https://github.com/CadanDev/cadan_utility.git
cd cadan_utility# Importe o schema
mysql -u root -p < backend/database.sqlCrie o arquivo backend/config/env.php:
<?php
// Configurações do Banco de Dados
define('DB_HOST', 'localhost');
define('DB_NAME', 'lembretes_db');
define('DB_USER', 'root');
define('DB_PASS', 'sua_senha');
// Configurações da Aplicação
define('APP_ENV', 'development');
define('APP_DEBUG', true);npm installO projeto já vem com tasks configuradas no VS Code:
- Start Python Server: Inicia servidor HTTP na porta 5200
- Watch SASS: Compila SCSS automaticamente
Execute via Terminal > Run Task... ou Ctrl+Shift+P → "Tasks: Run Task"
# Terminal 1: Servidor Python
python -m http.server 5200
# Terminal 2: Watch SASS
sass --watch css/styles.scss:css/styles.cssAbra o navegador em: http://localhost:5200
- Acesse o painel da Hostinger
- Crie um banco MySQL
- Anote as credenciais fornecidas
- Importe o arquivo
backend/database.sqlvia phpMyAdmin
Via FTP/SFTP ou File Manager, envie todos os arquivos para public_html/:
public_html/
├── index.html
├── login.html
├── backend/
├── js/
├── css/
└── components/
Edite backend/config/env.php com as credenciais da Hostinger:
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'u829917439_lembretes');
define('DB_USER', 'u829917439_user');
define('DB_PASS', 'senha_hostinger');
define('APP_ENV', 'production');
define('APP_DEBUG', false);chmod 755 backend/logs/Acesse seu domínio: https://seudominio.com
# Compilar SCSS uma vez
npm run build-css
# Watch SCSS (recompila automaticamente)
npm run watch-css
# Alias para watch
npm run dev- users - Usuários do sistema
- medicine_reminders - Lembretes de medicamentos
- calendar_events - Eventos do calendário
- cars - Veículos cadastrados
- fuel_logs - Registros de abastecimento
- notes - Notas dos usuários
Veja o schema completo em backend/database.sql
Edite as variáveis SCSS em css/styles.scss:
$primary-color: #007bff;
$success-color: #28a745;
$danger-color: #dc3545;Edite em js/eyeRestTimer.js:
const WORK_TIME = 20 * 60; // 20 minutos
const REST_TIME = 20; // 20 segundos- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/NovaFuncionalidade) - Commit suas mudanças (
git commit -m 'Adiciona nova funcionalidade') - Push para a branch (
git push origin feature/NovaFuncionalidade) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Lucas Cadan
- GitHub: @CadanDev
Se encontrar problemas ou tiver sugestões:
- Abra uma Issue
- Entre em contato via GitHub
Interface principal com acesso rápido a todos os módulos.
Sistema de notificação para saúde dos olhos.
Visualização mensal com eventos coloridos por categoria.
Registro detalhado com cálculo de consumo médio.
⭐ Se este projeto foi útil para você, considere dar uma estrela no repositório!