|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Verlofdagen Planner</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.day:hover { |
|
|
transform: scale(1.05); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.day.selected { |
|
|
box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-3xl font-bold text-center text-indigo-700 mb-8">Verlofdagen Planner</h1> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Maandoverzicht</h2> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="prev-month" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-left text-gray-600"></i> |
|
|
</button> |
|
|
<h3 id="current-month" class="text-lg font-medium text-gray-700">Januari 2023</h3> |
|
|
<button id="next-month" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-right text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Selecteer persoon:</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<template id="person-template"> |
|
|
<button class="person-btn px-4 py-2 rounded-full text-sm font-medium"></button> |
|
|
</template> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<input type="text" id="new-person" placeholder="Nieuwe persoon" class="px-3 py-2 border rounded-md text-sm"> |
|
|
<button id="add-person" class="ml-2 px-3 py-2 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700">Toevoegen</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-7 gap-1 mb-2"> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Zo</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Ma</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Di</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Wo</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Do</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Vr</div> |
|
|
<div class="text-center text-sm font-medium text-gray-500">Za</div> |
|
|
</div> |
|
|
|
|
|
<div id="calendar" class="grid grid-cols-7 gap-1"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-6">Verlofoverzicht</h2> |
|
|
|
|
|
<div id="vacation-summary"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
let currentDate = new Date(); |
|
|
let selectedPerson = null; |
|
|
let persons = [ |
|
|
{ id: 1, name: "Jan", color: "bg-blue-500", textColor: "text-blue-500" }, |
|
|
{ id: 2, name: "Marie", color: "bg-green-500", textColor: "text-green-500" }, |
|
|
{ id: 3, name: "Piet", color: "bg-yellow-500", textColor: "text-yellow-500" } |
|
|
]; |
|
|
let vacations = []; |
|
|
|
|
|
|
|
|
const calendarEl = document.getElementById('calendar'); |
|
|
|
|
|
</html> |
