94 lines
4.8 KiB
HTML
94 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sk">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>To-Do aplikácia</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
select {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
|
|
background-position: right 0.75rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.25em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen bg-gray-100">
|
|
|
|
<header class="bg-orange-500 h-20 flex justify-between items-center shadow-md px-6">
|
|
<h1 class="text-white font-bold text-2xl">To-Do aplikácia</h1>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<span id="loggedUser" class="text-white font-medium"></span>
|
|
<form action="/logout" method="POST">
|
|
<button
|
|
type="submit"
|
|
class="bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-lg transition"
|
|
>
|
|
Odhlásiť sa
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 p-6 flex flex-col items-center bg-gray-50">
|
|
|
|
<div class="w-full max-w-3xl mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<select id="filterDate" class="pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg shadow-sm focus:border-orange-400 focus:ring-orange-400 appearance-none">
|
|
<option value="asc">Najskôr najbližší termín</option>
|
|
<option value="desc">Najskôr najvzdialenejší termín</option>
|
|
</select>
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="addCardBtn" class="px-7 py-3.5 bg-orange-600 hover:bg-orange-700 text-white font-semibold rounded-full shadow-lg transition-all transform hover:scale-105 flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Pridať úlohu
|
|
</button>
|
|
</div>
|
|
|
|
<div id="emptyMessage" class="hidden text-center py-16 w-full max-w-3xl">
|
|
<p class="text-2xl font-medium text-gray-500 mb-6">Zatiaľ žiadne úlohy</p>
|
|
</div>
|
|
|
|
<div id="cardContainer" class="w-full max-w-3xl space-y-5">
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="bg-orange-500 h-16 flex justify-center items-center text-white font-medium shadow-inner">
|
|
<div>By Michal</div>
|
|
</footer>
|
|
|
|
<div id="taskModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center hidden z-50">
|
|
<div class="bg-white rounded-xl p-8 w-full max-w-md shadow-2xl">
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Nová úloha</h2>
|
|
|
|
<label for="taskTitle" class="block text-sm font-medium text-gray-700 mb-1">Názov</label>
|
|
<input id="taskTitle" type="text" class="w-full p-3 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-orange-400" placeholder="Zadajte názov úlohy">
|
|
|
|
<label for="taskDescription" class="block text-sm font-medium text-gray-700 mb-1">Popis</label>
|
|
<textarea id="taskDescription" class="w-full p-3 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-orange-400" rows="4" placeholder="Detailnejší popis..."></textarea>
|
|
|
|
<label for="taskDeadline" class="block text-sm font-medium text-gray-700 mb-1">Termín dokončenia</label>
|
|
<input id="taskDeadline" type="date" class="w-full p-3 border border-gray-300 rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-orange-400">
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button id="cancelTaskBtn" class="px-5 py-2.5 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition">Zrušiť</button>
|
|
<button id="saveTaskBtn" class="px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">Uložiť</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="generovanie_karticiek.js"></script>
|
|
</body>
|
|
</html> |