Hugging Face's logo

Spaces:
Shakil2024111
/
ml
Running

App Files Community
Shakil2024111 commited on
Commit
d3e06bf
·
verified ·
1 Parent(s): 9e619dc

add more features and also fix the manu bar - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +7 -5
  2. about.html +206 -0
  3. index.html +313 -18
  4. projects.html +222 -0
  5. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ml
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ml
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
about.html ADDED
@@ -0,0 +1,206 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About - Ceramic Innovation Club</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .about-hero {
15
+ background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('http://static.photos/industry/1200x630/3');
16
+ background-size: cover;
17
+ background-position: center;
18
+ min-height: 50vh;
19
+ }
20
+ .timeline-item::before {
21
+ content: '';
22
+ position: absolute;
23
+ left: 0;
24
+ top: 0;
25
+ height: 100%;
26
+ width: 2px;
27
+ background: #3b82f6;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans antialiased text-gray-800">
32
+ <!-- Navigation -->
33
+ <nav class="fixed w-full z-50 bg-white shadow-md">
34
+ <div class="container mx-auto px-6 py-4">
35
+ <div class="flex justify-between items-center">
36
+ <a href="index.html" class="text-2xl font-bold text-gray-800">Ceramic Innovation Club</a>
37
+ <div class="hidden md:flex space-x-8">
38
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 transition">Home</a>
39
+ <a href="about.html" class="text-blue-600 font-semibold">About</a>
40
+ <a href="projects.html" class="text-gray-800 hover:text-blue-600 transition">Projects</a>
41
+ <a href="events.html" class="text-gray-800 hover:text-blue-600 transition">Events</a>
42
+ <a href="members.html" class="text-gray-800 hover:text-blue-600 transition">Members</a>
43
+ <a href="gallery.html" class="text-gray-800 hover:text-blue-600 transition">Gallery</a>
44
+ <a href="contact.html" class="text-gray-800 hover:text-blue-600 transition">Contact</a>
45
+ </div>
46
+ <button class="md:hidden">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </nav>
52
+
53
+ <!-- About Hero -->
54
+ <section class="about-hero flex items-center justify-center pt-20">
55
+ <div class="text-center text-white px-6" data-aos="fade-up">
56
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">About Us</h1>
57
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto">Discover our mission, vision, and the journey of ceramic innovation</p>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Mission & Vision -->
62
+ <section class="py-20 bg-white">
63
+ <div class="container mx-auto px-6">
64
+ <div class="grid md:grid-cols-2 gap-12 items-center">
65
+ <div data-aos="fade-right">
66
+ <h2 class="text-3xl font-bold mb-6">Our Mission</h2>
67
+ <p class="text-lg text-gray-600 mb-6">To advance ceramic technology through innovative research, collaborative projects, and educational initiatives that bridge traditional craftsmanship with modern scientific approaches.</p>
68
+ <p class="text-lg text-gray-600">We aim to create a vibrant community where students, researchers, and industry professionals can exchange ideas and push the boundaries of what's possible with ceramic materials.</p>
69
+ </div>
70
+ <div data-aos="fade-left">
71
+ <img src="http://static.photos/science/640x360/4" alt="Ceramic Research" class="rounded-xl shadow-lg w-full">
72
+ </div>
73
+ </div>
74
+
75
+ <div class="grid md:grid-cols-2 gap-12 items-center mt-20">
76
+ <div data-aos="fade-right">
77
+ <img src="http://static.photos/technology/640x360/5" alt="Future Vision" class="rounded-xl shadow-lg w-full">
78
+ </div>
79
+ <div data-aos="fade-left">
80
+ <h2 class="text-3xl font-bold mb-6">Our Vision</h2>
81
+ <p class="text-lg text-gray-600 mb-6">To become a leading center for ceramic innovation that drives sustainable technological advancements and inspires the next generation of materials scientists and engineers.</p>
82
+ <p class="text-lg text-gray-600">We envision a future where ceramic materials play a central role in solving global challenges through their unique properties and applications across various industries.</p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Timeline -->
89
+ <section class="py-20 bg-gray-100">
90
+ <div class="container mx-auto px-6">
91
+ <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Our Journey</h2>
92
+
93
+ <div class="relative max-w-4xl mx-auto">
94
+ <div class="timeline-item relative pl-8 pb-12" data-aos="fade-right">
95
+ <div class="absolute -left-1.5 top-0 w-3 h-3 bg-blue-600 rounded-full"></div>
96
+ <h3 class="text-xl font-semibold mb-2">Foundation</h3>
97
+ <p class="text-gray-600">January 2023 - Established with 15 founding members and faculty support</p>
98
+ </div>
99
+
100
+ <div class="timeline-item relative pl-8 pb-12" data-aos="fade-left">
101
+ <div class="absolute -left-1.5 top-0 w-3 h-3 bg-blue-600 rounded-full"></div>
102
+ <h3 class="text-xl font-semibold mb-2">First Workshop</h3>
103
+ <p class="text-gray-600">March 2023 - Hosted our inaugural ceramic 3D printing workshop</p>
104
+ </div>
105
+
106
+ <div class="timeline-item relative pl-8 pb-12" data-aos="fade-right">
107
+ <div class="absolute -left-1.5 top-0 w-3 h-3 bg-blue-600 rounded-full"></div>
108
+ <h3 class="text-xl font-semibold mb-2">Industry Partnership</h3>
109
+ <p class="text-gray-600">May 2023 - Secured first industry collaboration with CeramicTech Inc.</p>
110
+ </div>
111
+
112
+ <div class="timeline-item relative pl-8" data-aos="fade-left">
113
+ <div class="absolute -left-1.5 top-0 w-3 h-3 bg-blue-600 rounded-full"></div>
114
+ <h3 class="text-xl font-semibold mb-2">Research Grant</h3>
115
+ <p class="text-gray-600">August 2023 - Awarded $50,000 research grant for sustainable ceramics project</p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Values -->
122
+ <section class="py-20 bg-white">
123
+ <div class="container mx-auto px-6">
124
+ <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Our Values</h2>
125
+
126
+ <div class="grid md:grid-cols-3 gap-8">
127
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
128
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
129
+ <i data-feather="lightbulb" class="text-blue-600 text-2xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-semibold mb-4">Innovation</h3>
132
+ <p class="text-gray-600">We embrace creative thinking and experimental approaches to advance ceramic technology</p>
133
+ </div>
134
+
135
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
136
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
137
+ <i data-feather="users" class="text-green-600 text-2xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold mb-4">Collaboration</h3>
140
+ <p class="text-gray-600">We believe in the power of teamwork and interdisciplinary cooperation</p>
141
+ </div>
142
+
143
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
144
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
145
+ <i data-feather="award" class="text-purple-600 text-2xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-semibold mb-4">Excellence</h3>
148
+ <p class="text-gray-600">We strive for the highest standards in research, education, and community engagement</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Footer -->
155
+ <footer class="bg-gray-900 text-white py-12">
156
+ <div class="container mx-auto px-6">
157
+ <div class="grid md:grid-cols-4 gap-8">
158
+ <div>
159
+ <h3 class="text-xl font-semibold mb-4">Ceramic Innovation Club</h3>
160
+ <p class="text-gray-400">Pushing the boundaries of ceramic technology through collaboration and innovation</p>
161
+ </div>
162
+
163
+ <div>
164
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
165
+ <ul class="space-y-2">
166
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
167
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
168
+ <li><a href="events.html" class="text-gray-400 hover:text-white transition">Events</a></li>
169
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
170
+ </ul>
171
+ </div>
172
+
173
+ <div>
174
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
175
+ <ul class="space-y-2">
176
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li>
177
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
178
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
179
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Newsletter</a></li>
180
+ </ul>
181
+ </div>
182
+
183
+ <div>
184
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
185
+ <div class="flex space-x-4">
186
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
187
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
188
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
189
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
190
+ </div>
191
+ <p class="mt-4 text-gray-400">contact@ceramicinnovation.org</p>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
196
+ <p>&copy; 2023 Ceramic Innovation Club. All rights reserved.</p>
197
+ </div>
198
+ </div>
199
+ </footer>
200
+
201
+ <script>
202
+ AOS.init();
203
+ feather.replace();
204
+ </script>
205
+ </body>
206
+ </html>
index.html CHANGED
@@ -1,19 +1,314 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ceramic Innovation Club</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
14
+ <style>
15
+ .hero-section {
16
+ min-height: 100vh;
17
+ position: relative;
18
+ }
19
+ .nav-transparent {
20
+ background: rgba(255, 255, 255, 0.1);
21
+ backdrop-filter: blur(10px);
22
+ }
23
+ .ceramic-gradient {
24
+ background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #d6d6d6 100%);
25
+ }
26
+ .project-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="font-sans antialiased text-gray-800">
33
+ <!-- Navigation -->
34
+ <nav class="fixed w-full z-50 nav-transparent transition-all duration-300">
35
+ <div class="container mx-auto px-6 py-4">
36
+ <div class="flex justify-between items-center">
37
+ <a href="index.html" class="text-2xl font-bold text-gray-800">Ceramic Innovation Club</a>
38
+ <div class="hidden md:flex space-x-8">
39
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 transition">Home</a>
40
+ <a href="about.html" class="text-gray-800 hover:text-blue-600 transition">About</a>
41
+ <a href="projects.html" class="text-gray-800 hover:text-blue-600 transition">Projects</a>
42
+ <a href="events.html" class="text-gray-800 hover:text-blue-600 transition">Events</a>
43
+ <a href="members.html" class="text-gray-800 hover:text-blue-600 transition">Members</a>
44
+ <a href="gallery.html" class="text-gray-800 hover:text-blue-600 transition">Gallery</a>
45
+ <a href="contact.html" class="text-gray-800 hover:text-blue-600 transition">Contact</a>
46
+ </div>
47
+ <button class="md:hidden">
48
+ <i data-feather="menu"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section with Vanta.js -->
55
+ <section class="hero-section" id="vanta-bg">
56
+ <div class="absolute inset-0 bg-black opacity-20"></div>
57
+ <div class="relative z-10 flex items-center justify-center h-full">
58
+ <div class="text-center px-6" data-aos="fade-up" data-aos-duration="1000">
59
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Ceramic Innovation Club</h1>
60
+ <p class="text-xl md:text-2xl text-white mb-8 max-w-3xl mx-auto">Exploring the future of ceramic materials through innovation, collaboration, and creativity</p>
61
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
62
+ <a href="about.html" class="bg-white text-gray-800 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Learn More</a>
63
+ <a href="contact.html" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-gray-800 transition">Join Us</a>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Featured Section -->
70
+ <section class="py-20 ceramic-gradient">
71
+ <div class="container mx-auto px-6">
72
+ <div class="text-center mb-16" data-aos="fade-up">
73
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What We Do</h2>
74
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We bridge traditional ceramic techniques with modern innovation to create groundbreaking materials and applications</p>
75
+ </div>
76
+
77
+ <div class="grid md:grid-cols-3 gap-8">
78
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="100">
79
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
80
+ <i data-feather="layers" class="text-blue-600"></i>
81
+ </div>
82
+ <h3 class="text-xl font-semibold mb-4">Material Research</h3>
83
+ <p class="text-gray-600">Exploring new ceramic compositions and properties for advanced applications</p>
84
+ </div>
85
+
86
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="200">
87
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
88
+ <i data-feather="users" class="text-green-600"></i>
89
+ </div>
90
+ <h3 class="text-xl font-semibold mb-4">Collaborative Projects</h3>
91
+ <p class="text-gray-600">Working together with industry partners and academic institutions</p>
92
+ </div>
93
+
94
+ <div class="bg-white p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="300">
95
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
96
+ <i data-feather="award" class="text-purple-600"></i>
97
+ </div>
98
+ <h3 class="text-xl font-semibold mb-4">Innovation Challenges</h3>
99
+ <p class="text-gray-600">Competitions and hackathons to push the boundaries of ceramic technology</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Latest Projects Preview -->
106
+ <section class="py-20 bg-white">
107
+ <div class="container mx-auto px-6">
108
+ <div class="text-center mb-16" data-aos="fade-up">
109
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
110
+ <p class="text-xl text-gray-600">Discover our latest innovations in ceramic technology</p>
111
+ </div>
112
+
113
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
114
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden transition-all duration-300" data-aos="fade-right">
115
+ <img src="http://static.photos/technology/640x360/1" alt="Advanced Ceramic Material" class="w-full h-64 object-cover">
116
+ <div class="p-6">
117
+ <h3 class="text-xl font-semibold mb-2">Nano-Ceramic Composites</h3>
118
+ <p class="text-gray-600 mb-4">Developing lightweight, high-strength ceramic materials for aerospace applications</p>
119
+ <a href="projects.html" class="text-blue-600 font-semibold hover:underline">View Project</a>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden transition-all duration-300" data-aos="fade-left">
124
+ <img src="http://static.photos/science/640x360/2" alt="Ceramic Research" class="w-full h-64 object-cover">
125
+ <div class="p-6">
126
+ <h3 class="text-xl font-semibold mb-2">Sustainable Ceramics</h3>
127
+ <p class="text-gray-600 mb-4">Eco-friendly ceramic production methods and recyclable materials research</p>
128
+ <a href="projects.html" class="text-blue-600 font-semibold hover:underline">View Project</a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="text-center" data-aos="fade-up">
134
+ <a href="projects.html" class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800 transition">
135
+ View All Projects
136
+ <i data-feather="arrow-right" class="ml-2"></i>
137
+ </a>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Upcoming Events -->
143
+ <section class="py-20 bg-gray-100">
144
+ <div class="container mx-auto px-6">
145
+ <div class="text-center mb-16" data-aos="fade-up">
146
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Upcoming Events</h2>
147
+ <p class="text-xl text-gray-600">Join us for workshops, seminars, and innovation sessions</p>
148
+ </div>
149
+
150
+ <div class="grid md:grid-cols-3 gap-8">
151
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
152
+ <div class="p-6 border-b">
153
+ <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">Workshop</span>
154
+ <h3 class="text-xl font-semibold mt-4 mb-2">3D Ceramic Printing</h3>
155
+ <p class="text-gray-600">Learn advanced 3D printing techniques for ceramic materials</p>
156
+ </div>
157
+ <div class="p-6">
158
+ <div class="flex items-center text-gray-600 mb-2">
159
+ <i data-feather="calendar" class="mr-2"></i>
160
+ <span>October 15, 2023</span>
161
+ </div>
162
+ <div class="flex items-center text-gray-600">
163
+ <i data-feather="map-pin" class="mr-2"></i>
164
+ <span>Innovation Lab, Room 304</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
170
+ <div class="p-6 border-b">
171
+ <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full">Seminar</span>
172
+ <h3 class="text-xl font-semibold mt-4 mb-2">Future of Ceramics</h3>
173
+ <p class="text-gray-600">Industry experts discuss emerging trends in ceramic technology</p>
174
+ </div>
175
+ <div class="p-6">
176
+ <div class="flex items-center text-gray-600 mb-2">
177
+ <i data-feather="calendar" class="mr-2"></i>
178
+ <span>November 5, 2023</span>
179
+ </div>
180
+ <div class="flex items-center text-gray-600">
181
+ <i data-feather="map-pin" class="mr-2"></i>
182
+ <span>Main Auditorium</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
188
+ <div class="p-6 border-b">
189
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Competition</span>
190
+ <h3 class="text-xl font-semibold mt-4 mb-2">Innovation Challenge</h3>
191
+ <p class="text-gray-600">Annual ceramic innovation competition with exciting prizes</p>
192
+ </div>
193
+ <div class="p-6">
194
+ <div class="flex items-center text-gray-600 mb-2">
195
+ <i data-feather="calendar" class="mr-2"></i>
196
+ <span>December 12, 2023</span>
197
+ </div>
198
+ <div class="flex items-center text-gray-600">
199
+ <i data-feather="map-pin" class="mr-2"></i>
200
+ <span>Engineering Building</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="text-center mt-12" data-aos="fade-up">
207
+ <a href="events.html" class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800 transition">
208
+ View All Events
209
+ <i data-feather="arrow-right" class="ml-2"></i>
210
+ </a>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Call to Action -->
216
+ <section class="py-20 ceramic-gradient">
217
+ <div class="container mx-auto px-6 text-center" data-aos="fade-up">
218
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Innovate with Us?</h2>
219
+ <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">Join our community of ceramic enthusiasts, researchers, and innovators</p>
220
+ <a href="contact.html" class="bg-gray-800 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-900 transition inline-flex items-center">
221
+ Become a Member
222
+ <i data-feather="arrow-right" class="ml-2"></i>
223
+ </a>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Footer -->
228
+ <footer class="bg-gray-900 text-white py-12">
229
+ <div class="container mx-auto px-6">
230
+ <div class="grid md:grid-cols-4 gap-8">
231
+ <div>
232
+ <h3 class="text-xl font-semibold mb-4">Ceramic Innovation Club</h3>
233
+ <p class="text-gray-400">Pushing the boundaries of ceramic technology through collaboration and innovation</p>
234
+ </div>
235
+
236
+ <div>
237
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
238
+ <ul class="space-y-2">
239
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>
240
+ <li><a href="projects.html" class="text-gray-400 hover:text-white transition">Projects</a></li>
241
+ <li><a href="events.html" class="text-gray-400 hover:text-white transition">Events</a></li>
242
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
243
+ </ul>
244
+ </div>
245
+
246
+ <div>
247
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
248
+ <ul class="space-y-2">
249
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li>
250
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
251
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
252
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Newsletter</a></li>
253
+ </ul>
254
+ </div>
255
+
256
+ <div>
257
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
258
+ <div class="flex space-x-4">
259
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
260
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
261
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
262
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
263
+ </div>
264
+ <p class="mt-4 text-gray-400">contact@ceramicinnovation.org</p>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
269
+ <p>&copy; 2023 Ceramic Innovation Club. All rights reserved.</p>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ // Initialize AOS
276
+ AOS.init({
277
+ duration: 1000,
278
+ once: true
279
+ });
280
+
281
+ // Initialize Feather Icons
282
+ feather.replace();
283
+
284
+ // Initialize Vanta.js waves background
285
+ VANTA.WAVES({
286
+ el: "#vanta-bg",
287
+ mouseControls: true,
288
+ touchControls: true,
289
+ gyroControls: false,
290
+ minHeight: 200.00,
291
+ minWidth: 200.00,
292
+ scale: 1.00,
293
+ scaleMobile: 1.00,
294
+ color: 0x7a7a7a,
295
+ shininess: 35.00,
296
+ waveHeight: 15.00,
297
+ waveSpeed: 0.75,
298
+ zoom: 0.85
299
+ });
300
+
301
+ // Navbar background change on scroll
302
+ window.addEventListener('scroll', function() {
303
+ const nav = document.querySelector('nav');
304
+ if (window.scrollY > 50) {
305
+ nav.classList.remove('nav-transparent');
306
+ nav.classList.add('bg-white', 'shadow-md');
307
+ } else {
308
+ nav.classList.add('nav-transparent');
309
+ nav.classList.remove('bg-white', 'shadow-md');
310
+ }
311
+ });
312
+ </script>
313
+ </body>
314
  </html>
projects.html ADDED
@@ -0,0 +1,222 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Projects - Ceramic Innovation Club</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .project-hero {
15
+ background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('http://static.photos/technology/1200x630/6');
16
+ background-size: cover;
17
+ background-position: center;
18
+ min-height: 50vh;
19
+ }
20
+ .project-filter button.active {
21
+ background: #3b82f6;
22
+ color: white;
23
+ }
24
+ .project-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .project-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans antialiased text-gray-800">
34
+ <!-- Navigation -->
35
+ <nav class="fixed w-full z-50 bg-white shadow-md">
36
+ <div class="container mx-auto px-6 py-4">
37
+ <div class="flex justify-between items-center">
38
+ <a href="index.html" class="text-2xl font-bold text-gray-800">Ceramic Innovation Club</a>
39
+ <div class="hidden md:flex space-x-8">
40
+ <a href="index.html" class="text-gray-800 hover:text-blue-600 transition">Home</a>
41
+ <a href="about.html" class="text-gray-800 hover:text-blue-600 transition">About</a>
42
+ <a href="projects.html" class="text-blue-600 font-semibold">Projects</a>
43
+ <a href="events.html" class="text-gray-800 hover:text-blue-600 transition">Events</a>
44
+ <a href="members.html" class="text-gray-800 hover:text-blue-600 transition">Members</a>
45
+ <a href="gallery.html" class="text-gray-800 hover:text-blue-600 transition">Gallery</a>
46
+ <a href="contact.html" class="text-gray-800 hover:text-blue-600 transition">Contact</a>
47
+ </div>
48
+ <button class="md:hidden">
49
+ <i data-feather="menu"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Projects Hero -->
56
+ <section class="project-hero flex items-center justify-center pt-20">
57
+ <div class="text-center text-white px-6" data-aos="fade-up">
58
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Our Projects</h1>
59
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto">Explore our innovative ceramic research and development initiatives</p>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Project Filters -->
64
+ <section class="py-12 bg-gray-100">
65
+ <div class="container mx-auto px-6">
66
+ <div class="project-filter flex flex-wrap justify-center gap-4" data-aos="fade-up">
67
+ <button class="px-6 py-2 bg-white rounded-full border transition active" data-filter="all">All Projects</button>
68
+ <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="research">Research</button>
69
+ <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="development">Development</button>
70
+ <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="sustainability">Sustainability</button>
71
+ <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="completed">Completed</button>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Projects Grid -->
77
+ <section class="py-20 bg-white">
78
+ <div class="container mx-auto px-6">
79
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
80
+ <!-- Project 1 -->
81
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden research" data-aos="fade-up">
82
+ <img src="http://static.photos/science/640x360/7" alt="Nano-Ceramic Research" class="w-full h-48 object-cover">
83
+ <div class="p-6">
84
+ <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Research</span>
85
+ <h3 class="text-xl font-semibold mb-2">Nano-Ceramic Composites</h3>
86
+ <p class="text-gray-600 mb-4">Developing advanced ceramic nanocomposites for high-temperature applications</p>
87
+ <div class="flex justify-between items-center">
88
+ <span class="text-sm text-gray-500">Ongoing</span>
89
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Project 2 -->
95
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden development" data-aos="fade-up" data-aos-delay="100">
96
+ <img src="http://static.photos/technology/640x360/8" alt="3D Printing" class="w-full h-48 object-cover">
97
+ <div class="p-6">
98
+ <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Development</span>
99
+ <h3 class="text-xl font-semibold mb-2">Ceramic 3D Printing</h3>
100
+ <p class="text-gray-600 mb-4">Advanced additive manufacturing techniques for complex ceramic structures</p>
101
+ <div class="flex justify-between items-center">
102
+ <span class="text-sm text-gray-500">Ongoing</span>
103
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Project 3 -->
109
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden sustainability completed" data-aos="fade-up" data-aos-delay="200">
110
+ <img src="http://static.photos/nature/640x360/9" alt="Sustainable Ceramics" class="w-full h-48 object-cover">
111
+ <div class="p-6">
112
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Sustainability</span>
113
+ <h3 class="text-xl font-semibold mb-2">Eco-Friendly Ceramics</h3>
114
+ <p class="text-gray-600 mb-4">Developing sustainable ceramic production methods and recyclable materials</p>
115
+ <div class="flex justify-between items-center">
116
+ <span class="text-sm text-green-600">Completed</span>
117
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Project 4 -->
123
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden research" data-aos="fade-up">
124
+ <img src="http://static.photos/medical/640x360/10" alt="Bioceramics" class="w-full h-48 object-cover">
125
+ <div class="p-6">
126
+ <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Research</span>
127
+ <h3 class="text-xl font-semibold mb-2">Advanced Bioceramics</h3>
128
+ <p class="text-gray-600 mb-4">Research on ceramic materials for medical implants and dental applications</p>
129
+ <div class="flex justify-between items-center">
130
+ <span class="text-sm text-gray-500">Ongoing</span>
131
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Project 5 -->
137
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden development" data-aos="fade-up" data-aos-delay="100">
138
+ <img src="http://static.photos/industry/640x360/11" alt="Industrial Ceramics" class="w-full h-48 object-cover">
139
+ <div class="p-6">
140
+ <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Development</span>
141
+ <h3 class="text-xl font-semibold mb-2">Industrial Ceramic Coatings</h3>
142
+ <p class="text-gray-600 mb-4">Developing protective ceramic coatings for extreme industrial environments</p>
143
+ <div class="flex justify-between items-center">
144
+ <span class="text-sm text-gray-500">Ongoing</span>
145
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Project 6 -->
151
+ <div class="project-card bg-gray-50 rounded-xl overflow-hidden sustainability" data-aos="fade-up" data-aos-delay="200">
152
+ <img src="http://static.photos/construction/640x360/12" alt="Building Materials" class="w-full h-48 object-cover">
153
+ <div class="p-6">
154
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Sustainability</span>
155
+ <h3 class="text-xl font-semibold mb-2">Sustainable Building Materials</h3>
156
+ <p class="text-gray-600 mb-4">Eco-friendly ceramic materials for construction and architectural applications</p>
157
+ <div class="flex justify-between items-center">
158
+ <span class="text-sm text-gray-500">Ongoing</span>
159
+ <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Load More Button -->
166
+ <div class="text-center mt-12" data-aos="fade-up">
167
+ <button class="bg-gray-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-gray-900 transition">
168
+ Load More Projects
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Project Statistics -->
175
+ <section class="py-20 bg-gray-100">
176
+ <div class="container mx-auto px-6">
177
+ <div class="grid md:grid-cols-4 gap-8 text-center">
178
+ <div data-aos="fade-up" data-aos-delay="100">
179
+ <div class="text-4xl font-bold text-blue-600 mb-2">15+</div>
180
+ <div class="text-gray-600">Active Projects</div>
181
+ </div>
182
+ <div data-aos="fade-up" data-aos-delay="200">
183
+ <div class="text-4xl font-bold text-green-600 mb-2">8</div>
184
+ <div class="text-gray-600">Completed Projects</div>
185
+ </div>
186
+ <div data-aos="fade-up" data-aos-delay="300">
187
+ <div class="text-4xl font-bold text-purple-600 mb-2">12</div>
188
+ <div class="text-gray-600">Research Papers</div>
189
+ </div>
190
+ <div data-aos="fade-up" data-aos-delay="400">
191
+ <div class="text-4xl font-bold text-orange-600 mb-2">5</div>
192
+ <div class="text-gray-600">Patents Filed</div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Call to Action -->
199
+ <section class="py-20 bg-white">
200
+ <div class="container mx-auto px-6 text-center" data-aos="fade-up">
201
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Want to Collaborate?</h2>
202
+ <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">Join us in pushing the boundaries of ceramic technology through innovative projects and research</p>
203
+ <a href="contact.html" class="bg-gray-800 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-900 transition inline-flex items-center">
204
+ Get Involved
205
+ <i data-feather="arrow-right" class="ml-2"></i>
206
+ </a>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- Footer -->
211
+ <footer class="bg-gray-900 text-white py-12">
212
+ <div class="container mx-auto px-6">
213
+ <div class="grid md:grid-cols-4 gap-8">
214
+ <div>
215
+ <h3 class="text-xl font-semibold mb-4">Ceramic Innovation Club</h3>
216
+ <p class="text-gray-400">Pushing the boundaries of ceramic technology through collaboration and innovation</p>
217
+ </div>
218
+
219
+ <div>
220
+ <h4 class="text-lg font-sem极
221
+ </body>
222
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Ceramic Innovation Club,is a new club of my Department, so i need to make a website for it,now make a dynamic website for it with many features which are effective.make individual pages for all features
2
+ add more features and also fix the manu bar