From 849aa97e63e60b3b13d271064921a5d368fa7bf2 Mon Sep 17 00:00:00 2001
From: ankitatjosh <93578769+ankitatjosh@users.noreply.github.com>
Date: Sat, 21 Sep 2024 12:08:08 +0530
Subject: [PATCH] Create index.html

---
 index.html | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..143eb16
--- /dev/null
+++ b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Innovation Cell README</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100">
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold text-center mb-8">Innovation Cell README</h1>
+
+        <div class="mb-8">
+            <div class="flex space-x-4 mb-4">
+                <button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="showTab('ongoing')">Ongoing Projects</button>
+                <button class="bg-green-500 text-white px-4 py-2 rounded" onclick="showTab('completed')">Completed Projects</button>
+                <button class="bg-yellow-500 text-white px-4 py-2 rounded" onclick="showTab('planned')">Planned Projects</button>
+            </div>
+
+            <div id="ongoing" class="tab-content">
+                <h2 class="text-2xl font-semibold mb-4">Ongoing Projects</h2>
+                <div class="space-y-4">
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Project A</h3>
+                        <p class="mb-2">Brief description of Project A.</p>
+                        <p class="mb-2">Team: John Doe, Jane Smith</p>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-2">
+                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
+                        </div>
+                        <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm">View Details</button>
+                    </div>
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Project B</h3>
+                        <p class="mb-2">Brief description of Project B.</p>
+                        <p class="mb-2">Team: Alice Johnson, Bob Williams</p>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-2">
+                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 70%"></div>
+                        </div>
+                        <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm">View Details</button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="completed" class="tab-content hidden">
+                <h2 class="text-2xl font-semibold mb-4">Completed Projects</h2>
+                <div class="space-y-4">
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Project X</h3>
+                        <p class="mb-2">Achievements and outcomes of Project X.</p>
+                        <p class="mb-2">Team: Emily Brown, Michael Green</p>
+                        <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Project X" class="w-full h-40 object-cover rounded mb-2">
+                        <p class="mb-2">Impact: Increased efficiency by 30%</p>
+                    </div>
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Project Y</h3>
+                        <p class="mb-2">Achievements and outcomes of Project Y.</p>
+                        <p class="mb-2">Team: David Lee, Sarah Wilson</p>
+                        <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Project Y" class="w-full h-40 object-cover rounded mb-2">
+                        <p class="mb-2">Impact: Reduced costs by 25%</p>
+                    </div>
+                </div>
+            </div>
+
+            <div id="planned" class="tab-content hidden">
+                <h2 class="text-2xl font-semibold mb-4">Planned Projects</h2>
+                <div class="space-y-4">
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Future Project 1</h3>
+                        <p class="mb-2">Goals and timeline for Future Project 1.</p>
+                        <p class="mb-2">Team: Tom Jackson, Emma White</p>
+                        <p class="mb-2">Timeline: Q3 2023 - Q1 2024</p>
+                        <p class="mb-2">Objectives: Improve user experience, increase engagement</p>
+                        <button class="bg-yellow-500 text-white px-3 py-1 rounded text-sm">Express Interest</button>
+                    </div>
+                    <div class="bg-white p-4 rounded shadow">
+                        <h3 class="text-xl font-semibold">Future Project 2</h3>
+                        <p class="mb-2">Goals and timeline for Future Project 2.</p>
+                        <p class="mb-2">Team: Olivia Brown, James Taylor</p>
+                        <p class="mb-2">Timeline: Q4 2023 - Q2 2024</p>
+                        <p class="mb-2">Objectives: Develop new technology, expand market reach</p>
+                        <button class="bg-yellow-500 text-white px-3 py-1 rounded text-sm">Express Interest</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="mb-8">
+            <h2 class="text-2xl font-semibold mb-4">Contributors</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div class="bg-white p-4 rounded shadow flex items-center">
+                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="John Doe" class="w-16 h-16 rounded-full mr-4">
+                    <div>
+                        <h3 class="text-lg font-semibold">John Doe</h3>
+                        <p class="text-sm">Project Manager</p>
+                        <a href="#" class="text-blue-500 text-sm">Profile</a>
+                    </div>
+                </div>
+                <div class="bg-white p-4 rounded shadow flex items-center">
+                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Jane Smith" class="w-16 h-16 rounded-full mr-4">
+                    <div>
+                        <h3 class="text-lg font-semibold">Jane Smith</h3>
+                        <p class="text-sm">Lead Developer</p>
+                        <a href="#" class="text-blue-500 text-sm">Profile</a>
+                    </div>
+                </div>
+                <div class="bg-white p-4 rounded shadow flex items-center">
+                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Bob Williams" class="w-16 h-16 rounded-full mr-4">
+                    <div>
+                        <h3 class="text-lg font-semibold">Bob Williams</h3>
+                        <p class="text-sm">UX Designer</p>
+                        <a href="#" class="text-blue-500 text-sm">Profile</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="text-center">
+            <button class="bg-purple-600 text-white px-6 py-3 rounded-full text-xl font-semibold hover:bg-purple-700 transition duration-300">Join the Team</button>
+        </div>
+    </div>
+
+    <script>
+        function showTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
+            document.getElementById(tabId).classList.remove('hidden');
+        }
+    </script>
+</body>
+</html>
