Wathuta's picture
Using the description below and the attached file create a site.
0ba5d77 verified
Raw
History Blame Contribute Delete
3.53 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskFlow Calendar - Project Management Dashboard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<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: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 font-sans">
<custom-navbar></custom-navbar>
<main class="flex h-screen pt-16">
<!-- Calendar Container -->
<div class="flex-1 overflow-auto">
<custom-calendar-header></custom-calendar-header>
<div id="calendar-grid" class="bg-white border border-gray-200 rounded-lg shadow-sm m-4">
<!-- Calendar grid will be populated by JavaScript -->
</div>
</div>
<!-- Command Panel -->
<custom-command-panel></custom-command-panel>
</main>
<!-- Floating Action Button -->
<div class="fixed bottom-6 right-6 z-50">
<button id="quick-add-btn" class="bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-full shadow-lg transition-all duration-200 transform hover:scale-110">
<i data-feather="plus"></i>
</button>
</div>
<script src="components/navbar.js"></script>
<script src="components/calendar-header.js"></script>
<script src="components/command-panel.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Initialize calendar
document.addEventListener('DOMContentLoaded', function() {
initializeCalendar();
});
</script>
<!-- Dependency Visualization -->
<svg id="dependency-lines" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5;">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#6b7280" />
</marker>
</defs>
</svg>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>