| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>IITG BS Connect - College Chat</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
| } |
| |
| .chat-bubble { |
| border-radius: 20px 20px 20px 0; |
| } |
| |
| .chat-bubble.self { |
| border-radius: 20px 20px 0 20px; |
| } |
| |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="message-square" class="w-8 h-8"></i> |
| <h1 class="text-2xl font-bold">IITG BS Connect</h1> |
| </div> |
| <button class="p-2 rounded-full hover:bg-white/10 transition"> |
| <i data-feather="settings" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section id="login" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800">Welcome Back!</h2> |
| <p class="text-gray-600">Login with your college credentials</p> |
| </div> |
| |
| <form class="space-y-6"> |
| <div> |
| <label for="college-id" class="block text-sm font-medium text-gray-700">College ID</label> |
| <input type="text" id="college-id" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700">Password</label> |
| <input type="password" id="password" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> |
| </div> |
| |
| <div class="text-sm"> |
| <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot password?</a> |
| </div> |
| </div> |
| |
| <div> |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white gradient-bg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| Sign in |
| </button> |
| </div> |
| </form> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-sm text-gray-600"> |
| Having trouble logging in? Contact your college IT support |
| </p> |
| </div> |
| </section> |
|
|
| |
| <section id="chat-demo" class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden hidden"> |
| <div class="flex h-[600px]"> |
| |
| <div class="w-1/3 border-r border-gray-200 bg-gray-50"> |
| <div class="p-4 border-b border-gray-200"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <img src="http://static.photos/people/200x200/1" alt="Profile" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> |
| </div> |
| <div> |
| <h3 class="font-semibold">John Doe</h3> |
| <p class="text-xs text-gray-500">Computer Science</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="overflow-y-auto h-[520px] scrollbar-hide"> |
| |
| <div class="p-3"> |
| <div class="relative"> |
| <input type="text" placeholder="Search chats" class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-gray-400"></i> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-1 px-2"> |
| |
| <div class="flex items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer"> |
| <div class="relative"> |
| <img src="http://static.photos/people/200x200/2" alt="Profile" class="w-12 h-12 rounded-full"> |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> |
| </div> |
| <div class="ml-3 flex-1"> |
| <div class="flex justify-between items-center"> |
| <h4 class="font-medium">Jane Smith</h4> |
| <span class="text-xs text-gray-500">2 min ago</span> |
| </div> |
| <p class="text-sm text-gray-500 truncate">Hey, are you coming to the study group?</p> |
| </div> |
| </div> |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-2/3 flex flex-col"> |
| |
| <div class="p-4 border-b border-gray-200 flex items-center"> |
| <div class="relative"> |
| <img src="http://static.photos/people/200x200/2" alt="Profile" class="w-10 h-10 rounded-full"> |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> |
| </div> |
| <div class="ml-3"> |
| <h3 class="font-semibold">Jane Smith</h3> |
| <p class="text-xs text-gray-500">Online</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto p-4 bg-gray-100 scrollbar-hide"> |
| <div class="space-y-3"> |
| |
| <div class="flex"> |
| <div class="bg-white chat-bubble max-w-xs p-3 shadow"> |
| <p>Hey, are you coming to the study group tomorrow?</p> |
| <p class="text-xs text-gray-500 mt-1">10:30 AM</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-end"> |
| <div class="bg-indigo-500 text-white chat-bubble self max-w-xs p-3 shadow"> |
| <p>Yes, I'll be there at 2pm</p> |
| <p class="text-xs text-indigo-100 mt-1">10:32 AM</p> |
| </div> |
| </div> |
| |
| |
| </div> |
| </div> |
| |
| |
| <div class="p-4 border-t border-gray-200"> |
| <div class="flex items-center"> |
| <input type="text" placeholder="Type a message" class="flex-1 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <button class="ml-2 p-2 rounded-full gradient-bg text-white"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h2 class="text-xl font-bold">IITG BS Connect</h2> |
| <p class="text-gray-400">Brainy Scholars Chat Network</p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="instagram" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400 text-sm"> |
| <p>© 2023 CampusConnect. All rights reserved.</p> |
| <p class="mt-2">For college students only. Requires valid college credentials.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelector('form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| document.getElementById('login').classList.add('hidden'); |
| document.getElementById('chat-demo').classList.remove('hidden'); |
| }); |
| </script> |
| </body> |
| </html> |
