├── scripts.js
├── y.pdf
├── z.pdf
├── xm.png
├── ymohit.jpg
├── zmoja.jpg
├── zmyank.jpg
├── zsujal.jpg
├── Screenshot_2025-06-14-16-44-24-42_254de13a4bc8758c9908fff1f73e3725.jpg
├── Screenshot_2025-06-14-16-44-50-93_254de13a4bc8758c9908fff1f73e3725.jpg
├── mohit.css
├── README.md
└── index.html


/scripts.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/y.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/y.pdf


--------------------------------------------------------------------------------
/z.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/z.pdf


--------------------------------------------------------------------------------
/xm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/xm.png


--------------------------------------------------------------------------------
/ymohit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/ymohit.jpg


--------------------------------------------------------------------------------
/zmoja.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/zmoja.jpg


--------------------------------------------------------------------------------
/zmyank.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/zmyank.jpg


--------------------------------------------------------------------------------
/zsujal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/zsujal.jpg


--------------------------------------------------------------------------------
/Screenshot_2025-06-14-16-44-24-42_254de13a4bc8758c9908fff1f73e3725.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/Screenshot_2025-06-14-16-44-24-42_254de13a4bc8758c9908fff1f73e3725.jpg


--------------------------------------------------------------------------------
/Screenshot_2025-06-14-16-44-50-93_254de13a4bc8758c9908fff1f73e3725.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/CODING-GROUP/main/Screenshot_2025-06-14-16-44-50-93_254de13a4bc8758c9908fff1f73e3725.jpg


--------------------------------------------------------------------------------
/mohit.css:
--------------------------------------------------------------------------------
 1 | chatbot {
 2 |   display: none;  /* Hidden by default */
 3 |   position: fixed;
 4 |   bottom: 20px;
 5 |   right: 20px;
 6 |   width: 300px;
 7 |   height: 400px;
 8 |   background-color: white;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 10px;
11 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
12 |   flex-direction: column;
13 |   z-index: 9999;
14 | }
15 | 
16 | .chat-header {
17 |   background-color: mediumpurple;
18 |   color: white;
19 |   padding: 10px;
20 |   font-size: 18px;
21 |   text-align: center;
22 | }
23 | 
24 | .chat-body {
25 |   padding: 10px;
26 |   overflow-y: auto;
27 |   height: 300px;
28 |   font-size: 14px;
29 | }
30 | 
31 | .quick-replies button {
32 |   margin: 5px;
33 |   padding: 8px;
34 |   background-color: mediumpurple;
35 |   color: white;
36 |   border: none;
37 |   border-radius: 5px;
38 |   cursor: pointer;
39 | }
40 | 
41 | .quick-replies button:hover {
42 |   background-color: #97a045;
43 | }
44 | 
45 | #chat-input {
46 |   width: calc(100% - 20px);
47 |   padding: 10px;
48 |   border: 1px solid #ccc;
49 |   border-top: none;
50 |   font-size: 14px;
51 | }
52 | 
53 | #chatbot-icon {
54 |   position: fixed;
55 |   bottom: 20px;
56 |   right: 20px;
57 |   font-size: 40px;
58 |   cursor: pointer;
59 |   z-index: 10000;
60 | }
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CODING-GROUP
 2 | 
 3 | Welcome to the Coding Group website! This project is designed by a group of four friends to showcase our coding skills, performance metrics, and helpful resources in the areas of Data Structures and Algorithms (DSA). Additionally, it includes an interactive chatbot that assists users with DSA-related queries.A coding group is a collaborative team formed by individuals interested in coding, programming, or software development. Typically, such a group aims to work on projects, improve their coding skills, share knowledge, and assist each other in learning new technologies or programming languages.
 4 | <div align="center">
 5 |   <img src="Screenshot_2025-06-14-16-44-24-42_254de13a4bc8758c9908fff1f73e3725.jpg" alt="DevOpsShack Banner">
 6 | </div>
 7 | 
 8 | Here are the main components of a typical coding group:
 9 | 1. Team Members:
10 | 
11 | 
12 | Roles: Each member may take on different roles based on their skills, interests, and the requirements of the project. Roles might include a project manager, front-end developer, back-end developer, and database administrator.
13 | 
14 | Diversity of Skills: Members often come with varied backgrounds and expertise, enriching the group with different perspectives and solutions.
15 | 
16 | <div align="center">
17 |   <img src="Screenshot_2025-06-14-16-44-50-93_254de13a4bc8758c9908fff1f73e3725.jpg" alt="DevOpsShack Banner">
18 | </div>
19 | 
20 | 2. Objectives:
21 | 
22 | 
23 | Learning: One of the primary goals is to learn from each other, experimenting with new technologies and tools.
24 | 
25 | Project Development: The group might be focused on building a specific project, such as a website, application, or software tool.
26 | 
27 | Problem-Solving: Group members often collaborate to tackle coding challenges or algorithmic problems, such as those found in Data Structures and Algorithms (DSA).
28 | 
29 | 
30 | 3. Activities:
31 | 
32 | 
33 | Meetings: Regular meetings to discuss progress, share knowledge, and brainstorm ideas.
34 | 
35 | Code Reviews: Group members may review each other's code to provide feedback and suggestions for improvement.
36 | 
37 | Workshops and Study Sessions: Organizing sessions to learn about specific programming languages, frameworks, or concepts.
38 | 
39 | 
40 | 4. Resources:
41 | 
42 | 
43 | Documentation: Sharing resources such as tutorials, coding challenges, and articles that help in learning and practicing coding.
44 | 
45 | Tools: Utilizing version control systems (like Git), project management tools (like Trello or Jira), and communication platforms (like Slack or Discord).
46 | 
47 | 
48 | 
49 | 
50 | ## Features
51 | 
52 | - Team Showcase: A dedicated section displaying each member's name, skills, and performance metrics.
53 | - DSA Chatbot: An interactive chatbot to provide assistance and answer questions related to Data Structures and Algorithms.
54 | - Resource Notes: A collection of notes and references for enhancing coding skills and understanding DSA concepts.
55 | 
56 | ## Tech Stack
57 | 
58 | This website has been developed using the following technologies:
59 | 
60 | - Frontend: HTML, CSS, JavaScript
61 | - Backend: Node.js, Express (if applicable)
62 | 
63 | ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Fortran](https://img.shields.io/badge/Fortran-%23734F96.svg?style=for-the-badge&logo=fortran&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)  ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![Scaleway](https://img.shields.io/badge/SCALEWAY-%234f0599.svg?style=for-the-badge&logo=scaleway&logoColor=white) ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7) ![
64 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!--make your own group -->
  2 | <!DOCTYPE html>
  3 | <html lang="en" class="transition duration-500">
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  7 |   <title>Coding-Group</title>
  8 |   <script src="https://cdn.tailwindcss.com"></script>
  9 |   <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
 10 | 
 11 |   <link rel="stylesheet" href="mohit.css">
 12 |   <script>
 13 |     tailwind.config = { darkMode: 'class' };
 14 |   </script>
 15 |   <style>
 16 |     
 17 |     html { scroll-behavior: smooth; }
 18 |     
 19 |     .fade-in {
 20 |       opacity: 0;
 21 |       transform: translateY(20px);
 22 |       transition: all 0.7s ease;
 23 |     }
 24 |     .fade-in.show {
 25 |       opacity: 1;
 26 |       transform: translateY(0);
 27 |     }
 28 |   </style>
 29 | </head>
 30 | <body class="bg-white text-black dark:bg-gray-900 dark:text-white transition-colors duration-500 font-sans">
 31 |   <div id="galleryOverlay" class="fixed inset-0 z-50 bg-black/90 hidden items-center justify-center flex-col space-y-4">
 32 |     <button onclick="closeGallery()" class="absolute top-4 right-4 text-white text-2xl">&times;</button>
 33 |   
 34 |     <img id="galleryImage" src="" class="max-h-[80vh] max-w-[90vw] object-contain rounded-lg shadow-lg border border-white/20" />
 35 |   
 36 |     <div class="space-x-4">
 37 |       <button onclick="prevImage()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">⬅ Prev</button>
 38 |       <button onclick="nextImage()" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">Next ➡</button>
 39 |     </div>
 40 |   </div>
 41 |   
 42 | <!-- Header -->
 43 | <header class="fixed w-full z-50 bg-gray-100 dark:bg-gray-800 shadow">
 44 |   <div class="max-w-6xl mx-auto flex justify-between items-center px-6 py-4">
 45 |     <div class="flex items-center space-x-3">
 46 |       <img src="img/xm.png" alt="logo" class="h-8 w-8">
 47 |       <h1 class="text-xl font-bold">Coding-Group</h1>
 48 |       <!--button-->
 49 |     </div>
 50 |     <button id="theme-toggle" class="px-3 py-1 bg-indigo-600 dark:bg-yellow-500 text-white rounded hover:opacity-80">
 51 |       Toggle Theme
 52 |     </button>
 53 |   </div>
 54 | </header>
 55 | 
 56 | <!-- Main -->
 57 | <main class="pt-28 px-6 max-w-6xl mx-auto space-y-20">
 58 |   <div class="profile-text">
 59 |     <h3>Hi,we are coding members</h3>
 60 |     <h2>We are a group of 4</h2>
 61 |     <h2>And we are <span class="text"></span></h2>
 62 |     <p>
 63 |       We are a team of four passionate coders collaborating to solve real-world problems, 
 64 |       build innovative projects and grow through shared learning and creativity. 
 65 |       Each of us brings unique strengths—from frontend design and backend logic 
 66 |       to debugging and deployment. United by curiosity, we code, learn and thrive together.
 67 |     </p>
 68 |   </div>
 69 |   <!--style part-->
 70 |   <style>
 71 |     .profile-text {
 72 |       max-width: 700px;
 73 |       margin: auto;
 74 |       padding: 40px;
 75 |       background-color: #1e1e2f;
 76 |       border-radius: 12px;
 77 |       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 78 |       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 79 |       text-align: center;
 80 |     }
 81 |   
 82 |     .profile-text h3 {
 83 |       color: #aaa;
 84 |       font-size: 18px;
 85 |       margin-bottom: 10px;
 86 |     }
 87 |   
 88 |     .profile-text h2 {
 89 |       color: #fff;
 90 |       font-size: 28px;
 91 |       margin: 10px 0;
 92 |     }
 93 |   
 94 |     .profile-text h2 span.text {
 95 |       color: #00aaff;
 96 |       font-weight: bold;
 97 |       border-right: 2px solid #00aaff;
 98 |       white-space: nowrap;
 99 |       overflow: hidden;
100 |       display: inline-block;
101 |       width: 0;
102 |       animation: typing 2s steps(20, end) forwards, blink 0.75s step-end infinite;
103 |     }
104 |   
105 |     .profile-text p {
106 |       color: #dcdcdc;
107 |       font-size: 16px;
108 |       line-height: 1.6;
109 |       margin-top: 20px;
110 |     }
111 |   
112 |     @keyframes blink {
113 |       50% {
114 |         border-color: transparent;
115 |       }
116 |     }
117 |   
118 |     @keyframes typing {
119 |       from {
120 |         width: 0;
121 |       }
122 |       to {
123 |         width: 100%;
124 |       }
125 |     }
126 |   </style>
127 |   
128 |   <script>
129 |     const phrases = ["innovators", "problem solvers", "developers", "creators"];
130 |     const textSpan = document.querySelector(".text");
131 |   
132 |     let i = 0;
133 |   
134 |     function typePhrase() {
135 |       textSpan.style.animation = "none"; // Reset animation
136 |       void textSpan.offsetWidth; // Trigger reflow
137 |       textSpan.textContent = phrases[i];
138 |       textSpan.style.animation = "typing 2s steps(20, end) forwards, blink 0.75s step-end infinite";
139 |   
140 |       i = (i + 1) % phrases.length;
141 |       setTimeout(typePhrase, 3000);
142 |     }
143 |   
144 |     window.onload = typePhrase;
145 |   </script>
146 |   
147 | 
148 |   <!-- Profiles -->
149 |   <!-- Profiles -->
150 | <section class="fade-in">
151 |   <h2 class="text-3xl font-bold mb-8">👥 Friends Profiles</h2>
152 |   <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
153 |     <!-- Your old friend cards here -->
154 | 
155 |       <!-- Friend Card -->
156 |       <div class="group [perspective:1500px] w-full max-w-xs mx-auto">
157 |         <div class="relative h-80 w-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
158 |       
159 |           <!-- Front Side -->
160 |           <div class="absolute inset-0 bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 dark:border-gray-700 rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl flex flex-col justify-center items-center px-6 py-8 overflow-hidden [backface-visibility:hidden]">
161 |             <div class="relative">
162 |               <img src="ymohit.jpg" class="w-24 h-24 object-cover rounded-full border-4 border-indigo-500 shadow-md z-10" alt="Rohit">
163 |               <div class="absolute -inset-1 rounded-full bg-indigo-500 blur-xl opacity-30 animate-pulse"></div>
164 |             </div>
165 |             <h3 class="mt-5 text-xl font-bold text-indigo-700 dark:text-indigo-300">MOHIT TIWARI</h3>
166 |             <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">🚀 FULL STACK DEVELOPER AS WELL AS MAINTAINIG AND EDITING WEBSITE</p>
167 |           </div>
168 |       
169 |           <!-- Back Side -->
170 |           <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-indigo-800 dark:to-purple-900 text-white px-6 py-8 rounded-xl [transform:rotateY(180deg)] [backface-visibility:hidden]">
171 |             <h4 class="text-lg font-semibold mb-3">📚 CGPA Details</h4>
172 |             <ul class="text-sm space-y-1 mb-6">
173 |               <li>Semester 1: <span class="font-medium">8.5</span></li>
174 |               <li>Semester 2: <span class="font-medium">8.3</span></li>
175 |               <li>Semester 3: <span class="font-medium">9.0</span></li>
176 |             
177 |             </ul>
178 |             <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-white/70 italic">
179 |               👋 Let's connect and collaborate!
180 |             </div>
181 |           </div>
182 |       
183 |         </div>
184 |       </div>
185 |       
186 |   
187 |       <!-- Friend Card -->
188 |       <div class="group [perspective:1500px] w-full max-w-xs mx-auto">
189 |         <div class="relative h-80 w-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
190 |       
191 |           <!-- Front Side -->
192 |           <div class="absolute inset-0 bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 dark:border-gray-700 rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl flex flex-col justify-center items-center px-6 py-8 overflow-hidden [backface-visibility:hidden]">
193 |             <div class="relative">
194 |               <img src="zsujal.jpg" class="w-24 h-24 object-cover rounded-full border-4 border-indigo-500 shadow-md z-10" alt="Rohit">
195 |               <div class="absolute -inset-1 rounded-full bg-indigo-500 blur-xl opacity-30 animate-pulse"></div>
196 |             </div>
197 |             <h3 class="mt-5 text-xl font-bold text-indigo-700 dark:text-indigo-300">PIYUSH SUJAL</h3>
198 |             <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">🚀 PYTHON DEVELOPER WITH VAST KNOWLEDGE OF THINKTER</p>
199 |           </div>
200 |       
201 |           <!-- Back Side -->
202 |           <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-indigo-800 dark:to-purple-900 text-white px-6 py-8 rounded-xl [transform:rotateY(180deg)] [backface-visibility:hidden]">
203 |             <h4 class="text-lg font-semibold mb-3">📚 CGPA Details</h4>
204 |             <ul class="text-sm space-y-1 mb-6">
205 |               <li>Semester 1: <span class="font-medium">8.35</span></li>
206 |               <li>Semester 2: <span class="font-medium">7.50</span></li>
207 |               <li>Semester 3: <span class="font-medium">7.35</span></li>
208 |               
209 |             </ul>
210 |             <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-white/70 italic">
211 |               👋 Let's connect and collaborate!
212 |             </div>
213 |           </div>
214 |       
215 |         </div>
216 |       </div>
217 |       
218 |   
219 |       <!-- Friend Card -->
220 |       <div class="group [perspective:1500px] w-full max-w-xs mx-auto">
221 |         <div class="relative h-80 w-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
222 |       
223 |           <!-- Front Side -->
224 |           <div class="absolute inset-0 bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 dark:border-gray-700 rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl flex flex-col justify-center items-center px-6 py-8 overflow-hidden [backface-visibility:hidden]">
225 |             <div class="relative">
226 |               <img src="zmoja.jpg" class="w-24 h-24 object-cover rounded-full border-4 border-indigo-500 shadow-md z-10" alt="Rohit">
227 |               <div class="absolute -inset-1 rounded-full bg-indigo-500 blur-xl opacity-30 animate-pulse"></div>
228 |             </div>
229 |             <h3 class="mt-5 text-xl font-bold text-indigo-700 dark:text-indigo-300">MOJHAID</h3>
230 |             <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">🚀 PROBLEM SOLVER ALONG WITH VAST KNOWLEGE IN GAME DEV</p>
231 |           </div>
232 |       
233 |           <!-- Back Side -->
234 |           <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-indigo-800 dark:to-purple-900 text-white px-6 py-8 rounded-xl [transform:rotateY(180deg)] [backface-visibility:hidden]">
235 |             <h4 class="text-lg font-semibold mb-3">📚 CGPA Details</h4>
236 |             <ul class="text-sm space-y-1 mb-6">
237 |               <li>Semester 1: <span class="font-medium">7.4</span></li>
238 |               <li>Semester 2: <span class="font-medium">6.78</span></li>
239 |               <li>Semester 3: <span class="font-medium">7.27</span></li>
240 |               
241 |             </ul>
242 |             <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-white/70 italic">
243 |               👋 Let's connect and collaborate!
244 |             </div>
245 |           </div>
246 |       
247 |         </div>
248 |       </div>
249 |       
250 |        <!-- Friend Card -->
251 |        <div class="group [perspective:1500px] w-full max-w-xs mx-auto">
252 |         <div class="relative h-80 w-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
253 |       
254 |           <!-- Front Side -->
255 |           <div class="absolute inset-0 bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 dark:border-gray-700 rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl flex flex-col justify-center items-center px-6 py-8 overflow-hidden [backface-visibility:hidden]">
256 |             <div class="relative">
257 |               <img src="zmyank.jpg" class="w-24 h-24 object-cover rounded-full border-4 border-indigo-500 shadow-md z-10" alt="Rohit">
258 |               <div class="absolute -inset-1 rounded-full bg-indigo-500 blur-xl opacity-30 animate-pulse"></div>
259 |             </div>
260 |             <h3 class="mt-5 text-xl font-bold text-indigo-700 dark:text-indigo-300">MAYANK GUPTA</h3>
261 |             <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">🚀 JAVA DEVELOPER WITH GOOD CONTENT CREATER</p>
262 |           </div>
263 |       
264 |           <!-- Back Side -->
265 |           <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-indigo-800 dark:to-purple-900 text-white px-6 py-8 rounded-xl [transform:rotateY(180deg)] [backface-visibility:hidden]">
266 |             <h4 class="text-lg font-semibold mb-3">📚 CGPA Details</h4>
267 |             <ul class="text-sm space-y-1 mb-6">
268 |               <li>Semester 1: <span class="font-medium">6.86</span></li>
269 |               <li>Semester 2: <span class="font-medium">6.95</span></li>
270 |               <li>Semester 3: <span class="font-medium">6.75</span></li>
271 |             </ul>
272 |             <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-white/70 italic">
273 |               👋 Let's connect and collaborate!
274 |             </div>
275 |           </div>
276 |       
277 |         </div>
278 |       </div>
279 |       
280 |     </div>
281 |   </section>
282 |   <div class="text-center my-10">
283 |     <button onclick="openGallery()" class="px-6 py-2 text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg">
284 |       📚 Open Library
285 |     </button>
286 |   </div>
287 |   
288 |     <div class="chatbot-wrapper" id="chatbot">
289 |     <div class="chat-header">MohitBot</div>
290 |     <div class="chat-body" id="chat-body"></div>
291 |     <div class="quick-replies">
292 |     <button onclick="sendQuick('college')">college</button>
293 |     <button onclick="sendQuick('Skills')">Skills</button>
294 |     <button onclick="sendQuick('Hobbies')">Hobbies</button>
295 |     <button onclick="sendQuick('time-complexity')">time-complexity</button>
296 |     <button onclick="sendQuick('asymptotic notation')">asymptotic notation</button>
297 |     <button onclick="sendQuick('Divide and conqure')">Divide and conqure</button>
298 |     <button onclick="sendQuick('greedy algorithm')">greedy algorithm</button>
299 |     <button onclick="sendQuick('dynamic programming')">dynamic programming</button>
300 |     
301 |     </div>
302 |     <input type="text" id="chat-input" placeholder="Ask me something..." />
303 |     </div>
304 | 
305 | 
306 | 
307 | <script>
308 | // Toggle chatbot visibility
309 | function toggleChatbot() {
310 |   const chatbot = document.getElementById("chatbot");
311 |   chatbot.style.display = chatbot.style.display === "flex" ? "none" : "flex";
312 | }
313 | 
314 | // Add user message and bot reply
315 | function addMessage(sender, msg) {
316 |   const el = document.createElement("div");
317 |   el.innerHTML = `<strong>${sender}:</strong> ${msg}`;
318 |   const chatBody = document.getElementById("chat-body");
319 |   chatBody.appendChild(el);
320 |   chatBody.scrollTop = chatBody.scrollHeight;
321 | }
322 | 
323 | // Respond to the user message
324 | function respond(msg) {
325 |   const typing = document.createElement("div");
326 |   typing.id = "typing";
327 |   typing.innerHTML = `<em>MohitBot is typing...</em>`;
328 |   const chatBody = document.getElementById("chat-body");
329 |   chatBody.appendChild(typing);
330 |   chatBody.scrollTop = chatBody.scrollHeight;
331 | 
332 |   const reply = getReply(msg);
333 |   setTimeout(() => {
334 |       typing.remove();
335 |       addMessage("MohitBot", reply);
336 |       speak(reply);
337 |   }, 1000);
338 | }
339 | 
340 | // Get the reply based on user input
341 | function getReply(input) {
342 |   const text = input.toLowerCase();
343 | 
344 |   if (text.includes("hello")) return "Hey there! How can I help you today?";
345 |   if (text.includes("college")) return "B.P.PODDAR INSTITUE OF MANAGEMENT OF TECHNOLOGY";
346 |   if (text.includes("skill")) return "We skilled in HTML, CSS, JavaScript, React, and Python.";
347 |   if (text.includes("hobby"))  return "I enjoy UI design, coding, gaming, and exploring new tech!";
348 |   if (text.includes("time-complexity")) return "Bubble: O(n), O(n²), O(n²) | Selection: O(n²), O(n²), O(n²) | Insertion: O(n), O(n²), O(n²) | Merge: O(n log n), O(n log n), O(n log n) | Quick: O(n log n), O(n log n), O(n²) | Heap: O(n log n), O(n log n), O(n log n) | Radix: O(nk), O(nk), O(nk) | Counting: O(n+k), O(n+k), O(n+k)";
349 |   if (text.includes("motivation")) return "Every expert was once a beginner. Every mountain top is within reach if you just keep climbing. One step at a time.";
350 |   if (text.includes("asymptotic notation")) return "Big O: worst case, Ω: best case, Θ: average case — all describe algorithm growth as input size increases.";
351 |   if (text.includes("Divide and conqure")) return "Divide and Conquer: Split the problem, solve subproblems recursively, and combine solutions for the final result.";
352 |   if (text.includes("greedy algorithm")) return "Greedy Algorithm: Make the locally optimal choice at each step hoping for a global optimum. ";
353 |   if (text.includes("dynamic programming")) return "Solve complex problems by breaking them into overlapping subproblems and storing solutions to avoid recomputation.";
354 | 
355 |   return  "undefined";
356 | }
357 | 
358 | // Handle speech synthesis
359 | function speak(text) {
360 |   const speech = new SpeechSynthesisUtterance(text);
361 |   speech.lang = "en-IN";
362 |   speechSynthesis.speak(speech);
363 | }
364 | 
365 | // Handle quick reply buttons
366 | function sendQuick(text) {
367 |   addMessage("You", text);
368 |   respond(text);
369 | }
370 | 
371 | // Handle user input through the chat input box
372 | const chatInput = document.getElementById("chat-input");
373 | chatInput.addEventListener("keydown", function (e) {
374 |   if (e.key === "Enter" && chatInput.value.trim() !== "") {
375 |       const msg = chatInput.value;
376 |       addMessage("You", msg);
377 |       respond(msg);
378 |       chatInput.value = "";
379 |   }
380 | });
381 | </script>
382 | <div class="btn-group">
383 |   <a href="z.pdf" class="btn active">Download bst</a>
384 |   <style>
385 |   .btn-group{
386 |     margin: 15px 0;
387 |     margin-top: 0px;
388 |     display: flex;
389 |   }
390 |   .btn-group .btn{
391 |     
392 |     border-color: #d5d5d5;
393 |     color: #fff;
394 |     background-color: #333;
395 |     padding:12px 25px;
396 |     margin-top: 0px;
397 |     margin: 5px 0;
398 |     margin-right: 7px;
399 |     border-radius: 30px;
400 |     border: 2px solid #e5e5e5;
401 |     box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%);
402 |   }
403 |   .btn.active{
404 |     border-color: #00f1fe;
405 |   }
406 |   </style>
407 |   
408 |   
409 | </div>
410 | 
411 | 
412 | <div class="btn-group">
413 |   <a href="y.pdf" class="btn active">Download Graphs</a>
414 |   <style>
415 |   .btn-group{
416 |     margin: 45px 0;
417 |     display: flex;
418 |   }
419 |   .btn-group .btn{
420 |   
421 |     border-color: #d5d5d5;
422 |     color: #fff;
423 |     background-color: #333;
424 |     padding:12px 25px;
425 |     margin: 5px 0;
426 |     margin-right: 7px;
427 |     border-radius: 30px;
428 |     border: 2px solid #e5e5e5;
429 |     box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%);
430 |   }
431 |   .btn.active{
432 |     border-color: #00f1fe;
433 |   }
434 |   </style>
435 |   
436 |   
437 | </div>
438 | 
439 | 
440 | 
441 |   <!-- File Upload -->
442 |   <section class="fade-in">
443 |     <h2 class="text-3xl font-bold mb-6">📁 Share Files</h2>
444 |     <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
445 |       <input 
446 |         id="file-input"
447 |         type="file"
448 |         accept=".pdf,.doc,.docx,.ppt,.pptx,.txt,.zip"
449 |         multiple
450 |         class="block w-full mb-4 text-sm text-gray-500 dark:text-gray-300 
451 |                file:mr-4 file:py-2 file:px-4 file:rounded-full 
452 |                file:border-0 file:text-sm file:font-semibold 
453 |                file:bg-indigo-600 file:text-white hover:file:bg-indigo-700">
454 | 
455 |       <div>
456 |         <h3 class="font-semibold text-lg mb-2">Uploaded Files:</h3>
457 |         <ul id="file-list" class="space-y-2 text-sm">
458 |           <!-- List of files -->
459 |         </ul>
460 |       </div>
461 |     </div>
462 |   </section>
463 | 
464 | </main>
465 | 
466 | <!-- Footer -->
467 | <footer class="mt-20 p-6 text-center text-sm text-gray-400 dark:text-gray-500">
468 |   &copy; 2025 Coding Group. All rights reserved.
469 | </footer>
470 | 
471 | <!-- JavaScript (No TypeScript syntax) -->
472 | <script>
473 |   // Theme Toggle
474 |   const toggleBtn = document.getElementById("theme-toggle");
475 |   const htmlEl = document.documentElement;
476 |   const setTheme = (mode) => {
477 |     if (mode === "dark") {
478 |       htmlEl.classList.add("dark");
479 |       localStorage.setItem("theme", "dark");
480 |     } else {
481 |       htmlEl.classList.remove("dark");
482 |       localStorage.setItem("theme", "light");
483 |     }
484 |   };
485 |   toggleBtn?.addEventListener("click", () => {
486 |     const isDark = htmlEl.classList.contains("dark");
487 |     setTheme(isDark ? "light" : "dark");
488 |   });
489 |   const savedTheme = localStorage.getItem("theme");
490 |   if (savedTheme) setTheme(savedTheme);
491 | 
492 |   // Scroll animation
493 |   window.addEventListener("scroll", () => {
494 |     document.querySelectorAll(".fade-in").forEach(el => {
495 |       const rect = el.getBoundingClientRect();
496 |       if (rect.top < window.innerHeight - 100) el.classList.add("show");
497 |     });
498 |   });
499 |   window.dispatchEvent(new Event("scroll"));
500 | 
501 | 
502 |   const images = [
503 |     "ymohit.jpg",
504 |     "zmoja.jpg",
505 |     "zmyank.jpg",
506 |     "zsujal.jpg",
507 |     "xm.png"
508 |   ];
509 | 
510 |   let currentIndex = 0;
511 |   const galleryOverlay = document.getElementById('galleryOverlay');
512 |   const galleryImage = document.getElementById('galleryImage');
513 | 
514 |   function openGallery(index = 0) {
515 |     currentIndex = index;
516 |     galleryOverlay.style.display = 'flex';
517 |     showImage(currentIndex);
518 |   }
519 | 
520 |   function closeGallery() {
521 |     galleryOverlay.style.display = 'none';
522 |   }
523 | 
524 |   function showImage(index) {
525 |     galleryImage.src = images[index];
526 |   }
527 | 
528 |   function nextImage() {
529 |     currentIndex = (currentIndex + 1) % images.length;
530 |     showImage(currentIndex);
531 |   }
532 | 
533 |   function prevImage() {
534 |     currentIndex = (currentIndex - 1 + images.length) % images.length;
535 |     showImage(currentIndex);
536 |   }
537 |   
538 |   //you can make for you personal group too
539 | 
540 |   // File upload preview
541 |   const fileInput = document.getElementById("file-input");
542 |   const fileList = document.getElementById("file-list");
543 |   fileInput.addEventListener("change", () => {
544 |     const files = fileInput.files;
545 |     if (files && files.length > 0) {
546 |       Array.from(files).forEach(file => {
547 |         const li = document.createElement("li");
548 |         li.className = "bg-white dark:bg-gray-700 p-3 rounded flex justify-between items-center";
549 |         li.innerHTML = `
550 |           <span class="truncate max-w-[60%]">${file.name}</span>
551 |           <button class="text-sm px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Download</button>
552 |         `;
553 | 
554 |         const downloadBtn = li.querySelector("button");
555 |         downloadBtn.addEventListener("click", () => {
556 |           const url = URL.createObjectURL(file);
557 |           const a = document.createElement("a");
558 |           a.href = url;
559 |           a.download = file.name;
560 |           a.click();
561 |           URL.revokeObjectURL(url);
562 |         });
563 | 
564 |         fileList.appendChild(li);
565 |       });
566 | 
567 |       fileInput.value = '';
568 |     }
569 |   });
570 |   document.addEventListener("DOMContentLoaded", function() {
571 |            var typed = new Typed(".text", { 
572 |                strings: ["Frontend Developer", "Game developer", "Web Developer"],
573 |                typeSpeed: 100,
574 |                backSpeed: 100,
575 |                backDelay: 1000,
576 |                loop: true
577 |            });
578 |        });
579 | 
580 | 
581 | </script>
582 | <script src="scripts.js"></script>
583 | </body>
584 | </html>
585 | 


--------------------------------------------------------------------------------