Hugging Face's logo

Spaces:
froublot
/
edupulse-pro
Running

App Files Community
edupulse-pro
File size: 9,559 Bytes
806182b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects | EduPulse</title>
    <link rel="stylesheet" href="style.css">
    <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">
</head>
<body class="bg-surface-1">
<div class="flex h-screen overflow-hidden">
        <!-- Sidebar Component -->
        <script src="components/sidebar.js"></script>
        <custom-sidebar></custom-sidebar>

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Header Component -->
            <script src="components/header.js"></script>
            <custom-header></custom-header>

            <!-- Main Workspace -->
            <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
                <div class="max-w-7xl mx-auto">
                    <div class="flex justify-between items-center mb-6">
                        <h1 class="text-2xl font-bold text-gray-900">Your Projects</h1>
                        <button class="btn-primary">
                            <i class="fas fa-plus mr-2"></i> New Project
                        </button>
                    </div>

                    <!-- Filters Section -->
                    <div class="card p-4 mb-6">
                        <div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0">
                            <div class="flex-1">
                                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search</label>
                                <input type="text" id="search" placeholder="Search projects..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                                <select id="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">All Subjects</option>
                                    <option value="Mathematics">Mathematics</option>
                                    <option value="Science">Science</option>
                                    <option value="History">History</option>
                                    <option value="Literature">Literature</option>
                                    <option value="Languages">Languages</option>
                                </select>
                            </div>
                            <div>
                                <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                                <select id="sort" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                    <option value="recent">Most Recent</option>
                                    <option value="oldest">Oldest</option>
                                    <option value="name">Name (A-Z)</option>
                                </select>
                            </div>
                            <div class="flex items-end">
                                <button id="reset-filters" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Reset</button>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="projects-container">
                        <!-- Project Card 1 -->
                        <div class="card glass p-6 card-hover" data-animate>
                            <div class="flex items-center mb-4">
                                <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-book text-blue-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">Calculus Course</h3>
                                    <p class="text-sm text-gray-500">Last edited 2 days ago</p>
                                </div>
                            </div>
                            <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg mb-4 flex items-center justify-center">
                                <img src="http://static.photos/education/640x360/1" class="w-full h-full object-cover" alt="Project Cover">
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Mathematics</span>
                                <div class="flex space-x-2">
                                    <a href="#" class="text-gray-400 hover:text-blue-600">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="#" class="text-gray-400 hover:text-red-600">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Project Card 2 -->
                        <div class="card glass p-6 card-hover" data-animate data-animate-delay="100">
                            <div class="flex items-center mb-4">
                                <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-flask text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">Biology Lab</h3>
                                    <p class="text-sm text-gray-500">Last edited 1 week ago</p>
                                </div>
                            </div>
                            <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-green-50 to-teal-50 rounded-lg mb-4 flex items-center justify-center">
                                <img src="http://static.photos/science/640x360/2" class="w-full h-full object-cover" alt="Project Cover">
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Science</span>
                                <div class="flex space-x-2">
                                    <a href="#" class="text-gray-400 hover:text-blue-600">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="#" class="text-gray-400 hover:text-red-600">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Project Card 3 -->
                        <div class="card glass p-6 card-hover" data-animate data-animate-delay="200">
                            <div class="flex items-center mb-4">
                                <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-landmark text-purple-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">World History</h3>
                                    <p class="text-sm text-gray-500">Last edited 3 weeks ago</p>
                                </div>
                            </div>
                            <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg mb-4 flex items-center justify-center">
                                <img src="http://static.photos/travel/640x360/3" class="w-full h-full object-cover" alt="Project Cover">
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">History</span>
                                <div class="flex space-x-2">
                                    <a href="#" class="text-gray-400 hover:text-blue-600">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="#" class="text-gray-400 hover:text-red-600">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="components/sidebar.js"></script>
    <script src="components/header.js"></script>
    <script src="script.js"></script>
</body>
</html>