File size: 9,861 Bytes
52e816d
 
 
 
 
 
 
 
 
 
351ea5d
 
b0d5524
52e816d
846057f
 
 
52e816d
 
 
 
 
 
 
 
 
 
 
 
3b602cb
b0d5524
52e816d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b602cb
 
52e816d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b602cb
 
52e816d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b602cb
b0d5524
52e816d
 
 
 
3b602cb
b0d5524
52e816d
 
 
 
 
 
 
 
 
 
 
3b602cb
 
52e816d
 
 
 
 
 
 
 
 
 
 
3b602cb
 
52e816d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b0d5524
 
52e816d
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduPulse | Interactive Teaching Hub</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 relative overflow-hidden">
  <particle-background></particle-background>
<div class="flex h-screen overflow-hidden">
        <!-- Sidebar Component -->
    <script src="components/sidebar.js"></script>
    <script src="components/glow-effect.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">
                    <!-- Dashboard Overview -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                        <div class="card glass p-6 card-hover" data-animate>
<h3 class="text-lg font-medium text-gray-900 mb-4">Recent Projects</h3>
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                        <i data-feather="book" class="text-blue-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium">Advanced Mathematics</p>
                                        <p class="text-sm text-gray-500">Last edited 2 days ago</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                        <i data-feather="layers" class="text-purple-600"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium">History of Science</p>
                                        <p class="text-sm text-gray-500">Last edited 1 week ago</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card p-6 shadow-sm">
<h3 class="text-lg font-medium text-gray-900 mb-4">Quick Access</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <a href="#" class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
                                    <i data-feather="file-plus" class="text-indigo-600 mb-2"></i>
                                    <span class="text-sm font-medium">New Slide</span>
                                </a>
                                <a href="#" class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
                                    <i data-feather="grid" class="text-green-600 mb-2"></i>
                                    <span class="text-sm font-medium">New Block</span>
                                </a>
                                <a href="#" class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
                                    <i data-feather="edit-3" class="text-yellow-600 mb-2"></i>
                                    <span class="text-sm font-medium">New Quiz</span>
                                </a>
                                <a href="#" class="flex flex-col items-center justify-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
                                    <i data-feather="zap" class="text-red-600 mb-2"></i>
                                    <span class="text-sm font-medium">AI Assistant</span>
                                </a>
                            </div>
                        </div>
                        <div class="card p-6 shadow-sm">
<h3 class="text-lg font-medium text-gray-900 mb-4">Activity Stats</h3>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">Students Engaged</p>
                                    <p class="text-2xl font-bold">142</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">Completion Rate</p>
                                    <div class="flex items-center">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                                            <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div>
                                        </div>
                                        <span class="text-sm font-medium">78%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Recent Resources -->
                    <div class="card glass p-6 mb-8 card-hover" data-animate data-animate-delay="100">
<div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold text-gray-900">Your Recent Resources</h2>
                            <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">View All</a>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="card overflow-hidden card-hover" data-animate data-animate-delay="200">
<div class="h-40 bg-gradient-to-r from-blue-50 to-indigo-50 flex items-center justify-center">
                                    <i data-feather="file-text" class="h-12 w-12 text-blue-600"></i>
                                </div>
                                <div class="p-4">
                                    <h3 class="font-medium mb-1">Introduction to Calculus</h3>
                                    <p class="text-sm text-gray-500 mb-3">12 slides</p>
                                    <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>
                                        <span class="text-xs text-gray-500">Edited 3 days ago</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card overflow-hidden card-hover">
<div class="h-40 bg-gradient-to-r from-green-50 to-teal-50 flex items-center justify-center">
                                    <i data-feather="grid" class="h-12 w-12 text-green-600"></i>
                                </div>
                                <div class="p-4">
                                    <h3 class="font-medium mb-1">Scientific Revolution</h3>
                                    <p class="text-sm text-gray-500 mb-3">8 blocks</p>
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">History</span>
                                        <span class="text-xs text-gray-500">Edited 1 week ago</span>
                                    </div>
                                </div>
                            </div>
                            <div class="card overflow-hidden card-hover">
<div class="h-40 bg-gradient-to-r from-purple-50 to-pink-50 flex items-center justify-center">
                                    <i data-feather="edit-3" class="h-12 w-12 text-purple-600"></i>
                                </div>
                                <div class="p-4">
                                    <h3 class="font-medium mb-1">Algebra Basics Quiz</h3>
                                    <p class="text-sm text-gray-500 mb-3">15 questions</p>
                                    <div class="flex justify-between items-center">
                                        <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Assessment</span>
                                        <span class="text-xs text-gray-500">Edited 2 weeks ago</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- AI Assistant Floating Button -->
                    <div class="fixed bottom-6 right-6">
                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-full shadow-lg transition-all transform hover:scale-105 float">
<i data-feather="zap" class="h-6 w-6"></i>
                        </button>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="components/sidebar.js"></script>
    <script src="components/header.js"></script>
    <script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>