ecocalendar-planner / index.html
vamp3461's picture
a partir de estos datos creame un calendario con las actividades, en el formato de google calendar, con casillas ordenadsa por semana y mes Tema Clases Profesor Fecha
e536b77 verified
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecología - Calendario Académico</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
accent: '#f59e0b',
holiday: '#9ca3af'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.print-area {
width: 210mm;
height: 297mm;
margin: 0 auto;
padding: 15mm;
}
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-primary mb-2">Ecología</h1>
<h2 class="text-xl text-gray-600">Otoño 2023</h2>
<div class="flex justify-center mt-4 space-x-4">
<a href="calendar.html" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
<i data-feather="calendar" class="mr-2"></i> Vista Calendario
</a>
<button onclick="window.print()" class="flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition">
<i data-feather="printer" class="mr-2"></i> Imprimir
</button>
<button class="flex items-center px-4 py-2 bg-secondary text-white rounded-lg hover:bg-emerald-600 transition">
<i data-feather="download" class="mr-2"></i> Exportar PDF
</button>
</div>
</div>
<!-- Calendar Table -->
<div class="print-area bg-white rounded-xl shadow-md overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-primary text-white">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Tema</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Clases</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Profesor</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Fecha</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Día</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Notas</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Week 1 -->
<tr class="bg-gray-50">
<td colspan="6" class="px-6 py-2 text-sm font-semibold text-gray-700">Semana 1: 14 Ago - 18 Ago</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
1. La ecología, sus niveles de organización y sus subdisciplinas
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">OAH</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14 Ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lunes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500"></td>
</tr>
<!-- Week 2 -->
<tr class="bg-gray-50">
<td colspan="6" class="px-6 py-2 text-sm font-semibold text-gray-700">Semana 2: 21 Ago - 25 Ago</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
2. Adaptaciones de los organismos al ambiente físico
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">OAH</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">21 Ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lunes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500"></td>
</tr>
<!-- Exam 1 -->
<tr class="bg-yellow-50">
<td class="px-6 py-4 whitespace-normal text-sm font-bold text-gray-900">
Examen 1
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-accent">Ambos</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28 Ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lunes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500">Temas 1-2</td>
</tr>
<!-- Field Trip -->
<tr class="bg-green-50">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
Salida de campo
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary">IRAR</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 Sep</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lunes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500 flex items-center">
<i data-feather="map" class="w-4 h-4 mr-1"></i> Issac en campo
</td>
</tr>
<!-- Holiday -->
<tr class="bg-gray-100">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
Día de la Independencia
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-holiday">-</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-holiday">15 Sep</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-holiday">Viernes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-holiday">Día inhábil</td>
</tr>
<!-- Cultural Week -->
<tr class="bg-purple-50">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
Semana cultural
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">-</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6-10 Oct</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">L-V</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500 flex items-center">
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> No hay clases
</td>
</tr>
<!-- Student Symposium -->
<tr class="bg-blue-50">
<td class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900">
Simposio Estudiantil de Ecología
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Ambos</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 Oct</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lunes</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500 flex items-center">
<i data-feather="users" class="w-4 h-4 mr-1"></i> Presentaciones estudiantiles
</td>
</tr>
<!-- World Soil Day -->
<tr class="bg-amber-50">
<td class="px-6 py-4
</body>
</html>