Skip to content

Instantly share code, notes, and snippets.

@Mereles639

Mereles639/index.html

Created May 23, 2025 22:25
Show Gist options
  • Save Mereles639/c445ce849574f02a10b344ee742ba679 to your computer and use it in GitHub Desktop.
Save Mereles639/c445ce849574f02a10b344ee742ba679 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Plano Ultra Completo Semanal - Mereles</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 700px;
margin: 20px auto;
padding: 15px;
background: #1e1e1e;
color: #ddd;
}
h1, h2 {
color: #ff4b4b;
text-align: center;
}
.day {
margin-bottom: 25px;
background: #2c2c2c;
padding: 15px;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 8px;
cursor: pointer;
}
input[type="checkbox"] {
transform: scale(1.3);
margin-right: 10px;
cursor: pointer;
}
#progresso {
text-align: center;
margin: 15px 0;
font-weight: bold;
}
textarea {
width: 100%;
height: 70px;
margin-top: 10px;
font-size: 1rem;
border-radius: 6px;
border: none;
padding: 10px;
background: #3a3a3a;
color: #eee;
resize: none;
}
footer {
margin-top: 30px;
font-size: 0.9rem;
text-align: center;
color: #888;
}
button {
background: #ff4b4b;
border: none;
color: white;
padding: 10px 18px;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
display: block;
width: 100%;
}
button:hover {
background: #e03f3f;
}
</style>
</head>
<body>
<h1>Plano Ultra Completo Semanal</h1>
<h2>Mereles - O Imparável</h2>
<label for="lema">Seu lema (escreva aqui):</label>
<textarea id="lema" placeholder="Escreva seu lema aqui..."></textarea>
<div id="plano">
<div class="day" data-day="Segunda a Sexta">
<h3>Segunda a Sexta</h3>
<label><input type="checkbox" data-task="alongamento" /> 06:30 - 06:40: Alongamento + respiração + mentalização do lema</label>
<label><input type="checkbox" data-task="foco_aula" /> 07:00 - 14:00: Aula (foco total)</label>
<label><input type="checkbox" data-task="treino_fisico" /> 14:30 - 15:15: Treino físico (flexões, abdominais, agachamentos...)</label>
<label><input type="checkbox" data-task="estudo_ciencia" /> 15:30 - 16:30: Estudo (Ciências ou Matemática)</label>
<label><input type="checkbox" data-task="estudo_outra" /> 16:30 - 17:00: Estudo (outra matéria)</label>
<label><input type="checkbox" data-task="leitura" /> 17:00 - 17:20: Leitura leve (livros, HQs, artigos)</label>
<label><input type="checkbox" data-task="ajuda_irma" /> 17:20 - 17:40: Ajuda em casa / ensinar irmã</label>
<label><input type="checkbox" data-task="revisao_mental" /> 19:00 - 19:20: Revisão mental do dia</label>
<label><input type="checkbox" data-task="tempo_livre" /> 20:00 - 21:00: Tempo livre inteligente</label>
<label><input type="checkbox" data-task="preparacao_dormir" /> 21:00 - 22:00: Preparação para dormir</label>
</div>
<div class="day" data-day="Sábado">
<h3>Sábado</h3>
<label><input type="checkbox" data-task="alongamento_sab" /> 08:00 - 08:20: Alongamento + mentalização do lema</label>
<label><input type="checkbox" data-task="revisao_geral" /> 08:30 - 09:30: Revisão geral das matérias</label>
<label><input type="checkbox" data-task="leitura_sab" /> 09:30 - 10:00: Leitura livre</label>
<label><input type="checkbox" data-task="treino_sab" /> 10:00 - 11:00: Treino físico</label>
</div>
<div class="day" data-day="Domingo">
<h3>Domingo</h3>
<label><input type="checkbox" data-task="descanso" /> Descanso total ou aprendizado divertido</label>
<label><input type="checkbox" data-task="revisao_app" /> Revisar a semana e planejar a próxima</label>
</div>
</div>
<div id="progresso">Progresso: 0/26 tarefas feitas (0%)</div>
<button id="resetar">Limpar todas as marcações</button>
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const progresso = document.getElementById('progresso');
const lema = document.getElementById('lema');
const resetarBtn = document.getElementById('resetar');
// Salvar estado no localStorage
function salvarEstado() {
const estado = {};
checkboxes.forEach(chk => {
estado[chk.dataset.task] = chk.checked;
});
estado.lema = lema.value;
localStorage.setItem('planoEstado', JSON.stringify(estado));
atualizarProgresso();
}
// Carregar estado do localStorage
function carregarEstado() {
const estado = JSON.parse(localStorage.getItem('planoEstado'));
if (estado) {
checkboxes.forEach(chk => {
if (estado.hasOwnProperty(chk.dataset.task)) {
chk.checked = estado[chk.dataset.task];
}
});
lema.value = estado.lema || '';
atualizarProgresso();
}
}
// Atualizar o texto de progresso
function atualizarProgresso() {
let feitas = 0;
checkboxes.forEach(chk => {
if (chk.checked) feitas++;
});
const total = checkboxes.length;
const percent = Math.round((feitas / total) * 100);
progresso.textContent = `Progresso: ${feitas}/${total} tarefas feitas (${percent}%)`;
}
// Eventos para salvar automaticamente
checkboxes.forEach(chk => {
chk.addEventListener('change', salvarEstado);
});
lema.addEventListener('input', salvarEstado);
// Botão resetar
resetarBtn.addEventListener('click', () => {
checkboxes.forEach(chk => chk.checked = false);
lema.value = '';
salvarEstado();
});
// Inicializar
carregarEstado();
</script>
<footer>
Criado para Mereles - O Imparável | Plano Ultra Completo Semanal
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment