Download index.html from isubbu/first: direct link, hf CLI and curl.
- Browser
- Download file 60.9 kB
-
https://huggingface.co/spaces/isubbu/first/resolve/main/index.html
- Command line
-
hf download hf://spaces/isubbu/first/index.html
-
curl -L -o index.html https://huggingface.co/spaces/isubbu/first/resolve/main/index.html
60.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Membership Platform</title> | |
| <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"> | |
| <link rel="manifest" href="/manifest.json"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom styles */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%); | |
| } | |
| .chat-bubble { | |
| border-radius: 1rem; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| background-color: #4F46E5; | |
| color: white; | |
| margin-left: auto; | |
| } | |
| .other-bubble { | |
| background-color: #E5E7EB; | |
| color: #1F2937; | |
| margin-right: auto; | |
| } | |
| .language-selector:hover .language-dropdown { | |
| display: block; | |
| } | |
| /* PWA specific */ | |
| #installButton { | |
| display: none; | |
| } | |
| /* Animation */ | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- PWA Install Prompt --> | |
| <div id="installContainer" class="fixed bottom-4 right-4 z-50 hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow-xl max-w-xs"> | |
| <p class="text-sm text-gray-700 mb-2">Install our app for a better experience</p> | |
| <div class="flex space-x-2"> | |
| <button id="installButton" class="bg-primary text-white px-3 py-1 rounded text-sm">Install</button> | |
| <button id="dismissInstall" class="border border-gray-300 px-3 py-1 rounded text-sm">Later</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center"> | |
| <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div> | |
| <p class="mt-4 text-gray-600">Loading your experience...</p> | |
| </div> | |
| <!-- Auth Modal --> | |
| <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Welcome</h3> | |
| <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <button id="googleAuth" class="w-full flex items-center justify-center space-x-2 bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50"> | |
| <i class="fab fa-google text-red-500"></i> | |
| <span>Continue with Google</span> | |
| </button> | |
| <div class="relative flex items-center"> | |
| <div class="flex-grow border-t border-gray-300"></div> | |
| <span class="flex-shrink mx-4 text-gray-500">or</span> | |
| <div class="flex-grow border-t border-gray-300"></div> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="whatsappNumber" class="block text-sm font-medium text-gray-700">WhatsApp Number</label> | |
| <div class="flex"> | |
| <select class="border border-gray-300 rounded-l-lg px-3 py-2 bg-gray-50 text-gray-700"> | |
| <option>+1</option> | |
| <option>+44</option> | |
| <option>+49</option> | |
| <option>+33</option> | |
| <option>+34</option> | |
| <option>+81</option> | |
| <option>+63</option> | |
| <option>+91</option> | |
| </select> | |
| <input type="tel" id="whatsappNumber" placeholder="1234567890" class="flex-grow border border-gray-300 rounded-r-lg px-3 py-2 focus:ring-primary focus:border-primary"> | |
| </div> | |
| </div> | |
| <button id="whatsappAuth" class="w-full flex items-center justify-center space-x-2 bg-green-600 text-white rounded-lg px-4 py-2 hover:bg-green-700"> | |
| <i class="fab fa-whatsapp"></i> | |
| <span>Continue with WhatsApp</span> | |
| </button> | |
| </div> | |
| <div class="mt-6 text-center text-sm text-gray-500"> | |
| <p>By continuing, you agree to our <a href="#" class="text-primary hover:underline">Terms</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Role Selection Modal --> | |
| <div id="roleModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Select Your Role</h3> | |
| <div class="grid grid-cols-1 gap-4"> | |
| <button data-role="member" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:bg-opacity-5 transition-all"> | |
| <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-user text-primary text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">Member</h4> | |
| <p class="text-sm text-gray-500 text-center mt-1">Join clubs, access services, and connect with others</p> | |
| </button> | |
| <button data-role="vendor" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-secondary hover:bg-secondary hover:bg-opacity-5 transition-all"> | |
| <div class="w-12 h-12 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-store text-secondary text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">Vendor</h4> | |
| <p class="text-sm text-gray-500 text-center mt-1">Offer services and manage bookings</p> | |
| </button> | |
| <button data-role="agent" class="role-btn flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-500 hover:bg-opacity-5 transition-all"> | |
| <div class="w-12 h-12 bg-purple-500 bg-opacity-10 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-robot text-purple-500 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800">Agent</h4> | |
| <p class="text-sm text-gray-500 text-center mt-1">Connect members and facilitate services</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div id="appContainer" class="hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center"> | |
| <button id="menuToggle" class="mr-4 text-gray-500 hover:text-gray-700 md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <span class="ml-2 font-semibold text-gray-800">AI Membership</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Voice Search --> | |
| <button id="voiceSearchBtn" class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <!-- Language Selector --> | |
| <div class="language-selector relative"> | |
| <button class="flex items-center space-x-1 p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-globe"></i> | |
| <span class="text-sm">EN</span> | |
| </button> | |
| <div class="language-dropdown absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden"> | |
| <div class="px-4 py-2 text-xs text-gray-500">Select Language</div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Deutsch</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Français</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Español</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">日本語</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Tagalog</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">हिन्दी</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">বাংলা</a> | |
| </div> | |
| </div> | |
| <!-- Notifications --> | |
| <div class="relative"> | |
| <button id="notificationsBtn" class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <div id="notificationsDropdown" class="absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-10 hidden"> | |
| <div class="px-4 py-2 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium">Notifications</h3> | |
| <button class="text-xs text-primary">Mark all as read</button> | |
| </div> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto"> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">New connection request</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 border-b border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-500"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Your booking is confirmed</p> | |
| <p class="text-xs text-gray-500">5 hours ago</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-500"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">AI Agent has a suggestion for you</p> | |
| <p class="text-xs text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="px-4 py-2 border-t border-gray-200 text-center"> | |
| <a href="#" class="text-xs text-primary font-medium">View all notifications</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="relative"> | |
| <button id="userMenuBtn" class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center"> | |
| <span id="userInitial">U</span> | |
| </div> | |
| </button> | |
| <div id="userMenuDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden"> | |
| <div class="px-4 py-2 border-b border-gray-200"> | |
| <p class="text-sm font-medium">Signed in as</p> | |
| <p class="text-sm text-gray-500 truncate" id="userEmail">user@example.com</p> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <div class="border-t border-gray-200"></div> | |
| <button id="logoutBtn" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Sidebar --> | |
| <div id="mobileSidebar" class="fixed inset-0 bg-black bg-opacity-50 z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out"> | |
| <div class="w-64 bg-white h-full relative"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <span class="ml-2 font-semibold text-gray-800">AI Membership</span> | |
| </div> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-home w-5"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-users w-5"></i> | |
| <span>Clubs</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-store w-5"></i> | |
| <span>Vendors</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-comments w-5"></i> | |
| <span>Messages</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-calendar w-5"></i> | |
| <span>Bookings</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200"> | |
| <button class="w-full flex items-center justify-center space-x-2 text-gray-700 hover:text-primary"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Logout</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex"> | |
| <!-- Desktop Sidebar --> | |
| <aside class="hidden md:block w-64 bg-white border-r border-gray-200 h-[calc(100vh-65px)] sticky top-[65px]"> | |
| <nav class="p-4"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-home w-5"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-users w-5"></i> | |
| <span>Clubs</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-store w-5"></i> | |
| <span>Vendors</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-comments w-5"></i> | |
| <span>Messages</span> | |
| <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-calendar w-5"></i> | |
| <span>Bookings</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-robot w-5"></i> | |
| <span>AI Assistant</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-wallet w-5"></i> | |
| <span>Payments</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Your Clubs</h3> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="w-5 h-5 rounded-full bg-blue-500"></div> | |
| <span class="text-sm">Tech Enthusiasts</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="w-5 h-5 rounded-full bg-green-500"></div> | |
| <span class="text-sm">Fitness Group</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="w-5 h-5 rounded-full bg-purple-500"></div> | |
| <span class="text-sm">Book Club</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </aside> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 pb-8"> | |
| <!-- Page header --> | |
| <div class="bg-white shadow"> | |
| <div class="px-4 sm:px-6 lg:px-8"> | |
| <div class="py-6 md:flex md:items-center md:justify-between"> | |
| <div class="min-w-0 flex-1"> | |
| <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"> | |
| Welcome back, <span id="userName">User</span> | |
| </h1> | |
| <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6"> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400"></i> | |
| <span id="userLocation">Detecting your location...</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user-tag mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400"></i> | |
| <span id="userRole">Member</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex md:mt-0 md:ml-4"> | |
| <button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"> | |
| <i class="fas fa-robot mr-2"></i> AI Assistant | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"> | |
| <i class="fas fa-plus mr-2"></i> New Club | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="mt-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Stats --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-users text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Your Clubs</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">3</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i class="fas fa-arrow-up text-xs"></i> | |
| <span class="sr-only">Increased by</span> | |
| 12% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-store text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Connected Vendors</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">5</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> | |
| <i class="fas fa-arrow-up text-xs"></i> | |
| <span class="sr-only">Increased by</span> | |
| 2% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-calendar-check text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Upcoming Bookings</dt> | |
| <dd class="flex items-baseline"> | |
| <div class="text-2xl font-semibold text-gray-900">2</div> | |
| <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> | |
| <i class="fas fa-arrow-down text-xs"></i> | |
| <span class="sr-only">Decreased by</span> | |
| 1% | |
| </div> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="mt-8"> | |
| <h2 class="text-lg font-medium text-gray-900">AI Recommendations For You</h2> | |
| <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Recommendation 1 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i class="fas fa-users text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Tech Innovators Club</h3> | |
| <p class="mt-1 text-sm text-gray-500">Join other tech enthusiasts to discuss the latest innovations.</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark"> | |
| Join Club | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendation 2 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i class="fas fa-store text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">FitLife Gym</h3> | |
| <p class="mt-1 text-sm text-gray-500">Personal training sessions tailored to your fitness goals.</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark"> | |
| View Services | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendation 3 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i class="fas fa-user-friends text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Connect with Sarah</h3> | |
| <p class="mt-1 text-sm text-gray-500">Based on your interests, you might enjoy connecting with Sarah.</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button type="button" class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark"> | |
| Send Message | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="mt-8"> | |
| <h2 class="text-lg font-medium text-gray-900">Recent Activity</h2> | |
| <div class="mt-4 bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-500"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Booking confirmed</div> | |
| <div class="text-sm text-gray-500">Your session with FitLife Gym has been confirmed for tomorrow at 5 PM.</div> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-500">2 hours ago</div> | |
| </div> | |
| </li> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"> | |
| <i class="fas fa-comment"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">New message</div> | |
| <div class="text-sm text-gray-500">You have a new message from the Book Club organizer.</div> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-500">5 hours ago</div> | |
| </div> | |
| </li> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">AI suggestion</div> | |
| <div class="text-sm text-gray-500">Based on your interests, we found a new coding workshop you might enjoy.</div> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-500">1 day ago</div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- AI Chat Modal --> | |
| <div id="aiChatModal" class="fixed bottom-4 right-4 z-40 hidden"> | |
| <div class="w-80 bg-white rounded-t-lg shadow-xl overflow-hidden"> | |
| <div class="bg-primary px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-white text-primary flex items-center justify-center"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <span class="text-white font-medium">AI Assistant</span> | |
| </div> | |
| <button id="closeAIChat" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="aiChatMessages" class="h-64 overflow-y-auto p-4 bg-gray-50 space-y-3"> | |
| <div class="flex"> | |
| <div class="other-bubble px-4 py-2"> | |
| <p class="text-sm">Hello! I'm your AI assistant. How can I help you today?</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border-t border-gray-200 p-3"> | |
| <div class="flex"> | |
| <input type="text" id="aiChatInput" placeholder="Type your message..." class="flex-grow border border-gray-300 rounded-l-lg px-3 py-2 focus:ring-primary focus:border-primary"> | |
| <button id="sendAIMessage" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary-dark"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Test Data Modal --> | |
| <div id="testDataModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Test Data</h3> | |
| <button id="closeTestDataModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Members (5)</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-sm text-gray-600">john@example.com</p> | |
| <p class="text-xs text-gray-500">Interests: Tech, Fitness</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Jane Smith</p> | |
| <p class="text-sm text-gray-600">jane@example.com</p> | |
| <p class="text-xs text-gray-500">Interests: Books, Travel</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Mike Johnson</p> | |
| <p class="text-sm text-gray-600">mike@example.com</p> | |
| <p class="text-xs text-gray-500">Interests: Sports, Music</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Sarah Williams</p> | |
| <p class="text-sm text-gray-600">sarah@example.com</p> | |
| <p class="text-xs text-gray-500">Interests: Art, Cooking</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">David Brown</p> | |
| <p class="text-sm text-gray-600">david@example.com</p> | |
| <p class="text-xs text-gray-500">Interests: Photography, Hiking</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Vendors (3)</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-3 gap-2"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">FitLife Gym</p> | |
| <p class="text-sm text-gray-600">fitlife@example.com</p> | |
| <p class="text-xs text-gray-500">Services: Personal Training, Yoga</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Tech Workshops</p> | |
| <p class="text-sm text-gray-600">tech@example.com</p> | |
| <p class="text-xs text-gray-500">Services: Coding Classes, Seminars</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Book Haven</p> | |
| <p class="text-sm text-gray-600">books@example.com</p> | |
| <p class="text-xs text-gray-500">Services: Book Clubs, Readings</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Agents (2)</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">AI Agent</p> | |
| <p class="text-sm text-gray-600">ai@example.com</p> | |
| <p class="text-xs text-gray-500">AI-powered connection facilitator</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Lisa Taylor</p> | |
| <p class="text-sm text-gray-600">lisa@example.com</p> | |
| <p class="text-xs text-gray-500">Human community manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Clubs (2)</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Tech Enthusiasts</p> | |
| <p class="text-sm text-gray-600">12 members</p> | |
| <p class="text-xs text-gray-500">Focus: Technology discussions</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">Book Club</p> | |
| <p class="text-sm text-gray-600">8 members</p> | |
| <p class="text-xs text-gray-500">Focus: Monthly book readings</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button id="useTestData" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark"> | |
| Use Test Data | |
| </button> | |
| <button id="closeTestData" class="border border-gray-300 px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| const appContainer = document.getElementById('appContainer'); | |
| const authModal = document.getElementById('authModal'); | |
| const roleModal = document.getElementById('roleModal'); | |
| const closeAuthModal = document.getElementById('closeAuthModal'); | |
| const googleAuth = document.getElementById('googleAuth'); | |
| const whatsappAuth = document.getElementById('whatsappAuth'); | |
| const roleButtons = document.querySelectorAll('.role-btn'); | |
| const menuToggle = document.getElementById('menuToggle'); | |
| const mobileSidebar = document.getElementById('mobileSidebar'); | |
| const userMenuBtn = document.getElementById('userMenuBtn'); | |
| const userMenuDropdown = document.getElementById('userMenuDropdown'); | |
| const notificationsBtn = document.getElementById('notificationsBtn'); | |
| const notificationsDropdown = document.getElementById('notificationsDropdown'); | |
| const voiceSearchBtn = document.getElementById('voiceSearchBtn'); | |
| const logoutBtn = document.getElementById('logoutBtn'); | |
| const aiChatModal = document.getElementById('aiChatModal'); | |
| const closeAIChat = document.getElementById('closeAIChat'); | |
| const aiChatMessages = document.getElementById('aiChatMessages'); | |
| const aiChatInput = document.getElementById('aiChatInput'); | |
| const sendAIMessage = document.getElementById('sendAIMessage'); | |
| const testDataModal = document.getElementById('testDataModal'); | |
| const closeTestDataModal = document.getElementById('closeTestDataModal'); | |
| const useTestData = document.getElementById('useTestData'); | |
| const closeTestData = document.getElementById('closeTestData'); | |
| const installContainer = document.getElementById('installContainer'); | |
| const installButton = document.getElementById('installButton'); | |
| const dismissInstall = document.getElementById('dismissInstall'); | |
| // Current user state | |
| let currentUser = null; | |
| let currentRole = null; | |
| let deferredPrompt = null; | |
| // Simulate loading | |
| setTimeout(() => { | |
| loadingScreen.classList.add('hidden'); | |
| authModal.classList.remove('hidden'); | |
| }, 2000); | |
| // Event Listeners | |
| closeAuthModal.addEventListener('click', () => { | |
| authModal.classList.add('hidden'); | |
| }); | |
| googleAuth.addEventListener('click', () => { | |
| // Simulate Google auth | |
| simulateAuth('Google'); | |
| }); | |
| whatsappAuth.addEventListener('click', () => { | |
| const number = document.getElementById('whatsappNumber').value; | |
| if (number) { | |
| // Simulate WhatsApp auth | |
| simulateAuth('WhatsApp'); | |
| } else { | |
| alert('Please enter your WhatsApp number'); | |
| } | |
| }); | |
| roleButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| currentRole = button.getAttribute('data-role'); | |
| document.getElementById('userRole').textContent = currentRole.charAt(0).toUpperCase() + currentRole.slice(1); | |
| roleModal.classList.add('hidden'); | |
| appContainer.classList.remove('hidden'); | |
| // Update UI based on role | |
| updateUIForRole(currentRole); | |
| }); | |
| }); | |
| menuToggle.addEventListener('click', () => { | |
| mobileSidebar.classList.toggle('-translate-x-full'); | |
| }); | |
| userMenuBtn.addEventListener('click', () => { | |
| userMenuDropdown.classList.toggle('hidden'); | |
| notificationsDropdown.classList.add('hidden'); | |
| }); | |
| notificationsBtn.addEventListener('click', () => { | |
| notificationsDropdown.classList.toggle('hidden'); | |
| userMenuDropdown.classList.add('hidden'); | |
| }); | |
| voiceSearchBtn.addEventListener('click', () => { | |
| startVoiceSearch(); | |
| }); | |
| logoutBtn.addEventListener('click', () => { | |
| // Simulate logout | |
| currentUser = null; | |
| currentRole = null; | |
| appContainer.classList.add('hidden'); | |
| authModal.classList.remove('hidden'); | |
| userMenuDropdown.classList.add('hidden'); | |
| }); | |
| closeAIChat.addEventListener('click', () => { | |
| aiChatModal.classList.add('hidden'); | |
| }); | |
| sendAIMessage.addEventListener('click', () => { | |
| sendAIMessageHandler(); | |
| }); | |
| aiChatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendAIMessageHandler(); | |
| } | |
| }); | |
| document.addEventListener('click', (e) => { | |
| // Close dropdowns when clicking outside | |
| if (!userMenuBtn.contains(e.target) && !userMenuDropdown.contains(e.target)) { | |
| userMenuDropdown.classList.add('hidden'); | |
| } | |
| if (!notificationsBtn.contains(e.target) && !notificationsDropdown.contains(e.target)) { | |
| notificationsDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Show test data modal after 5 seconds (for demo purposes) | |
| setTimeout(() => { | |
| testDataModal.classList.remove('hidden'); | |
| }, 5000); | |
| closeTestDataModal.addEventListener('click', () => { | |
| testDataModal.classList.add('hidden'); | |
| }); | |
| closeTestData.addEventListener('click', () => { | |
| testDataModal.classList.add('hidden'); | |
| }); | |
| useTestData.addEventListener('click', () => { | |
| // Simulate loading test data | |
| testDataModal.classList.add('hidden'); | |
| alert('Test data loaded successfully!'); | |
| }); | |
| // PWA Installation | |
| window.addEventListener('beforeinstallprompt', (e) => { | |
| // Prevent the mini-infobar from appearing on mobile | |
| e.preventDefault(); | |
| // Stash the event so it can be triggered later. | |
| deferredPrompt = e; | |
| // Update UI notify the user they can install the PWA | |
| installContainer.classList.remove('hidden'); | |
| }); | |
| installButton.addEventListener('click', () => { | |
| // Hide the app provided install promotion | |
| installContainer.classList.add('hidden'); | |
| // Show the install prompt | |
| deferredPrompt.prompt(); | |
| // Wait for the user to respond to the prompt | |
| deferredPrompt.userChoice.then((choiceResult) => { | |
| if (choiceResult.outcome === 'accepted') { | |
| console.log('User accepted the install prompt'); | |
| } else { | |
| console.log('User dismissed the install prompt'); | |
| } | |
| deferredPrompt = null; | |
| }); | |
| }); | |
| dismissInstall.addEventListener('click', () => { | |
| installContainer.classList.add('hidden'); | |
| }); | |
| // Functions | |
| function simulateAuth(provider) { | |
| // Simulate authentication | |
| loadingScreen.classList.remove('hidden'); | |
| authModal.classList.add('hidden'); | |
| setTimeout(() => { | |
| currentUser = { | |
| name: provider === 'Google' ? 'Demo User' : 'WhatsApp User', | |
| email: provider === 'Google' ? 'demo@example.com' : 'whatsapp@example.com', | |
| initial: provider === 'Google' ? 'D' : 'W' | |
| }; | |
| document.getElementById('userInitial').textContent = currentUser.initial; | |
| document.getElementById('userEmail').textContent = currentUser.email; | |
| document.getElementById('userName').textContent = currentUser.name; | |
| loadingScreen.classList.add('hidden'); | |
| roleModal.classList.remove('hidden'); | |
| // Detect location | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition( | |
| (position) => { | |
| // In a real app, you would reverse geocode to get city/country | |
| document.getElementById('userLocation').textContent = `Lat: ${position.coords.latitude.toFixed(2)}, Long: ${position.coords.longitude.toFixed(2)}`; | |
| }, | |
| (error) => { | |
| document.getElementById('userLocation').textContent = 'Location access denied'; | |
| } | |
| ); | |
| } else { | |
| document.getElementById('userLocation').textContent = 'Geolocation not supported'; | |
| } | |
| }, 1500); | |
| } | |
| function updateUIForRole(role) { | |
| // In a real app, you would update the UI based on the user's role | |
| console.log(`UI updated for ${role} role`); | |
| } | |
| function startVoiceSearch() { | |
| if ('webkitSpeechRecognition' in window) { | |
| const recognition = new webkitSpeechRecognition(); | |
| recognition.lang = 'en-US'; | |
| recognition.start(); | |
| voiceSearchBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>'; | |
| voiceSearchBtn.classList.add('animate-pulse'); | |
| recognition.onresult = (event) => { | |
| const transcript = event.results[0][0].transcript; | |
| alert(`You said: ${transcript}`); | |
| voiceSearchBtn.innerHTML = '<i class="fas fa-microphone"></i>'; | |
| voiceSearchBtn.classList.remove('animate-pulse'); | |
| }; | |
| recognition.onerror = (event) => { | |
| console.error('Voice recognition error', event.error); | |
| voiceSearchBtn.innerHTML = '<i class="fas fa-microphone"></i>'; | |
| voiceSearchBtn.classList.remove('animate-pulse'); | |
| }; | |
| } else { | |
| alert('Voice search is not supported in your browser'); | |
| } | |
| } | |
| function sendAIMessageHandler() { | |
| const message = aiChatInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| addAIMessage(message, true); | |
| aiChatInput.value = ''; | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| const responses = [ | |
| "I understand you're asking about " + message + ". Here's what I can tell you...", | |
| "That's an interesting question about " + message + ". Let me help with that.", | |
| "I've analyzed your query about " + message + " and here's my suggestion...", | |
| message + " is something I can certainly help with. Here's the information you need." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addAIMessage(randomResponse, false); | |
| }, 1000); | |
| } | |
| } | |
| function addAIMessage(message, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex'; | |
| const bubbleDiv = document.createElement('div'); | |
| bubbleDiv.className = isUser ? 'user-bubble chat-bubble px-4 py-2' : 'other-bubble chat-bubble px-4 py-2'; | |
| const messageText = document.createElement('p'); | |
| messageText.className = 'text-sm'; | |
| messageText.textContent = message; | |
| const timeText = document.createElement('p'); | |
| timeText.className = 'text-xs text-gray-500 mt-1'; | |
| timeText.textContent = 'Just now'; | |
| bubbleDiv.appendChild(messageText); | |
| bubbleDiv.appendChild(timeText); | |
| messageDiv.appendChild(bubbleDiv); | |
| aiChatMessages.appendChild(messageDiv); | |
| // Scroll to bottom | |
| aiChatMessages.scrollTop = aiChatMessages.scrollHeight; | |
| } | |
| // Initialize AI chat button in header | |
| document.querySelector('[aria-label="AI Assistant"]').addEventListener('click', () => { | |
| aiChatModal.classList.remove('hidden'); | |
| }); | |
| // Service Worker Registration for PWA | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js').then(registration => { | |
| console.log('ServiceWorker registration successful with scope: ', registration.scope); | |
| }).catch(err => { | |
| console.log('ServiceWorker registration failed: ', err); | |
| }); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=isubbu/first" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |