EduTrack/index.php at main · CodeWithTanim/EduTrack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<?php
session_start();
require_once 'includes/auth.php';
$pageTitle = "Home";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduTrack | Effortless Study Tracking</title>
    <link rel="icon" type="image/png" href="assets/img/browser_icon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="assets/css/style.css">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
</head>
<body class="bg-dark-200 text-slate-100 overflow-x-hidden">

    <!-- Header / Nav -->
    <nav class="fixed w-full z-50 bg-dark-200/50 backdrop-blur-xl border-b border-white/5">
        <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <a href="index.php" class="flex items-center space-x-3">
                <div class="w-10 h-10 gradient-btn rounded-xl flex items-center justify-center">
                    <ion-icon name="school-outline" class="text-white text-2xl text-white"></ion-icon>
                </div>
                <span class="text-xl font-bold tracking-tight">Edu<span class="gradient-text tracking-normal">Track</span></span>
            </a>

            <div class="hidden md:flex items-center space-x-10 text-sm font-medium text-slate-400">
                <a href="#features" class="hover:text-white transition-colors">Features</a>
                <a href="about.php" class="hover:text-white transition-colors">About</a>
                <a href="https://github.com/CodeWithTanim" target="_blank" class="hover:text-white transition-colors">Github</a>
            </div>

            <div class="flex items-center space-x-4">
                <?php if (isLoggedIn()): ?>
                    <a href="User/dashboard.php" class="gradient-btn px-6 py-2.5 rounded-full text-sm font-bold text-white shadow-lg">Dashboard</a>
                <?php else: ?>
                    <a href="auth/login.php" class="text-sm font-medium text-slate-300 hover:text-white px-4">Login</a>
                    <a href="auth/register.php" class="gradient-btn px-6 py-2.5 rounded-full text-sm font-bold text-white shadow-lg">Get Started</a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative pt-40 pb-32 px-6 overflow-hidden">
        <!-- Glow effects -->
        <div class="absolute top-20 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-indigo-500/20 blur-[120px] rounded-full -z-10"></div>
        <div class="absolute bottom-0 right-0 w-[400px] h-[400px] bg-purple-500/10 blur-[100px] rounded-full -z-10"></div>

        <div class="max-w-5xl mx-auto text-center">
            <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-semibold text-indigo-400 mb-8 animate-fade-in-down">
                <span class="flex h-2 w-2 rounded-full bg-indigo-500"></span>
                <span>EduTrack: The Future of Study Management</span>
            </div>
            <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-8 leading-tight">
                Manage Your Homework <br>
                <span class="gradient-text uppercase italic">Without the Stress</span>
            </h1>
            <p class="text-xl text-slate-400 max-w-2xl mx-auto mb-12 leading-relaxed">
                Stay organized, track your progress, and never miss a deadline again. The modern, clean, and fast homework tracker built for students.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                <a href="auth/register.php" class="w-full sm:w-auto px-10 py-5 gradient-btn rounded-2xl text-lg font-bold text-white shadow-2xl hover:scale-105 transition-all">
                    Start Managing for Free
                </a>
                <a href="#features" class="w-full sm:w-auto px-10 py-5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl text-lg font-bold text-slate-100 transition-all">
                    See Features
                </a>
            </div>
        </div>

        <!-- Dashboard Mockup (Visual) -->
        <div class="max-w-6xl mx-auto mt-24 relative">
             <div class="glass-card p-4 md:p-8 aspect-video overflow-hidden group">
                <div class="grid grid-cols-12 gap-6 h-full">
                    <div class="col-span-3 bg-white/5 rounded-2xl h-full p-6 hidden md:block border border-white/5">
                        <div class="w-full h-8 bg-white/10 rounded-lg mb-6"></div>
                        <div class="space-y-4">
                            <div class="w-full h-10 bg-indigo-500/20 rounded-xl"></div>
                            <div class="w-full h-10 bg-white/5 rounded-xl"></div>
                            <div class="w-full h-10 bg-white/5 rounded-xl"></div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-9 bg-white/5 rounded-2xl h-full p-8 border border-white/5">
                        <div class="flex justify-between items-center mb-10">
                            <div class="w-48 h-10 bg-white/10 rounded-xl"></div>
                            <div class="w-32 h-10 bg-indigo-500/40 rounded-xl"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-6">
                            <div class="h-40 bg-white/5 rounded-2xl border border-white/5 p-6">
                                <div class="w-3/4 h-6 bg-white/20 rounded-md mb-4"></div>
                                <div class="w-full h-4 bg-white/10 rounded-md mb-2"></div>
                                <div class="w-1/2 h-4 bg-white/10 rounded-md"></div>
                            </div>
                            <div class="h-40 bg-white/5 rounded-2xl border border-white/5 p-6 border-indigo-500/30">
                                <div class="w-3/4 h-6 bg-white/20 rounded-md mb-4"></div>
                                <div class="w-full h-4 bg-white/10 rounded-md mb-2"></div>
                                <div class="w-1/2 h-4 bg-white/10 rounded-md"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Interactive Play Overlay -->
                <div id="watchPreviewBtn" class="absolute inset-0 bg-dark-200/40 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
                    <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center text-4xl text-white">
                        <ion-icon name="play-outline"></ion-icon>
                    </div>
                    <span class="ml-4 text-xl font-bold">Watch Preview</span>
                </div>
             </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-32 px-6 bg-dark-100/50">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-20">
                <h2 class="text-4xl font-bold mb-4">Everything You Need</h2>
                <p class="text-slate-400">Modern tools to keep your academic life on track</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="glass-card p-10 hover:border-indigo-500/50 transition-all">
                    <div class="w-16 h-16 bg-indigo-500/20 rounded-2xl flex items-center justify-center mb-8 text-indigo-400 text-3xl">
                        <ion-icon name="list-outline"></ion-icon>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">Simple Tracking</h3>
                    <p class="text-slate-400 leading-relaxed">Add homework in seconds. Organize by subject, due date, and priority with our intuitive interface.</p>
                </div>
                <!-- Feature 2 -->
                <div class="glass-card p-10 hover:border-purple-500/50 transition-all">
                    <div class="w-16 h-16 bg-purple-500/20 rounded-2xl flex items-center justify-center mb-8 text-purple-400 text-3xl">
                        <ion-icon name="color-palette-outline"></ion-icon>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">Custom Categories</h3>
                    <p class="text-slate-400 leading-relaxed">Create your own subjects with custom colors. Color-code your dashboard for better visual organization.</p>
                </div>
                <!-- Feature 3 -->
                <div class="glass-card p-10 hover:border-pink-500/50 transition-all">
                    <div class="w-16 h-16 bg-pink-500/20 rounded-2xl flex items-center justify-center mb-8 text-pink-400 text-3xl">
                        <ion-icon name="cloud-download-outline"></ion-icon>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">Export & Import</h3>
                    <p class="text-slate-400 leading-relaxed">Download your data in JSON, CSV, or TXT formats. Back up your homework or share it with others easily.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-20 px-6 border-t border-white/5 text-center">
        <div class="mb-8 flex items-center justify-center space-x-3">
            <div class="w-8 h-8 gradient-btn rounded-lg flex items-center justify-center">
                <ion-icon name="school-outline" class="text-white"></ion-icon>
            </div>
            <span class="text-lg font-bold">Edu<span class="gradient-text">Track</span></span>
        </div>
        <p class="text-slate-500 text-sm mb-8">© <?php echo date('Y'); ?> EduTrack. Built with love for students everywhere.</p>
        <div class="flex justify-center space-x-8 text-slate-400">
            <a href="https://www.x.com/codewithtanim" class="hover:text-white"><ion-icon name="logo-twitter" class="text-2xl"></ion-icon></a>
            <a href="https://github.com/CodeWithTanim" class="hover:text-white"><ion-icon name="logo-github" class="text-2xl"></ion-icon></a>
            <a href="https://discord.gg/dBeddEAhRJ" class="hover:text-white"><ion-icon name="logo-discord" class="text-2xl"></ion-icon></a>
        </div>
    </footer>

    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 z-[100] bg-dark-200/90 backdrop-blur-xl flex items-center justify-center p-4 md:p-10 opacity-0 pointer-events-none transition-all duration-300">
        <button id="closeVideoModal" class="absolute top-6 right-6 text-white text-4xl hover:rotate-90 transition-transform"><ion-icon name="close-outline"></ion-icon></button>
        <div class="w-full max-w-5xl aspect-video glass-card overflow-hidden shadow-2xl relative">
            <iframe id="previewVideo" class="w-full h-full" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        const watchPreviewBtn = document.getElementById('watchPreviewBtn');
        const videoModal = document.getElementById('videoModal');
        const closeVideoModal = document.getElementById('closeVideoModal');
        const previewVideo = document.getElementById('previewVideo');
        const videoUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"; // Example placeholder video

        watchPreviewBtn.addEventListener('click', () => {
            previewVideo.src = videoUrl;
            videoModal.classList.remove('opacity-0', 'pointer-events-none');
        });

        const closeFunc = () => {
            videoModal.classList.add('opacity-0', 'pointer-events-none');
            previewVideo.src = ""; // Stop the video
        };

        closeVideoModal.addEventListener('click', closeFunc);
        videoModal.addEventListener('click', (e) => {
            if (e.target === videoModal) closeFunc();
        });
    </script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>