Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AdhdSigma - Articles & Learning Activities</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .article-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .topic-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .topic-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| min-width: 200px; | |
| z-index: 1; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .reading-progress { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #6e8efb, #a777e3); | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Reading Progress Bar --> | |
| <div class="reading-progress" id="reading-progress"></div> | |
| <!-- Header/Navigation --> | |
| <header class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| <a href="#" class="text-2xl font-bold">Adhd<span class="text-yellow-300">Sigma</span></a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-yellow-300 font-medium">Home</a> | |
| <div class="dropdown relative"> | |
| <button class="hover:text-yellow-300 font-medium flex items-center"> | |
| Topics <i class="fas fa-chevron-down ml-1 text-sm"></i> | |
| </button> | |
| <div class="dropdown-content absolute left-0 mt-2 bg-white text-gray-800 rounded-md shadow-lg py-2 w-48"> | |
| <a href="#" class="block px-4 py-2 hover:bg-purple-100">Psychology</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-purple-100">Technology</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-purple-100">Science</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-purple-100">Philosophy</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-purple-100">Productivity</a> | |
| </div> | |
| </div> | |
| <a href="#" class="hover:text-yellow-300 font-medium">Activities</a> | |
| <a href="#" class="hover:text-yellow-300 font-medium">Analysis</a> | |
| <a href="#" class="hover:text-yellow-300 font-medium">About</a> | |
| </nav> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition"> | |
| Sign In | |
| </button> | |
| <button class="bg-yellow-400 text-purple-800 px-4 py-2 rounded-full font-medium hover:bg-yellow-300 transition"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Navigation (hidden by default) --> | |
| <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2"> | |
| <a href="#" class="block py-2 hover:text-yellow-300">Home</a> | |
| <a href="#" class="block py-2 hover:text-yellow-300">Topics</a> | |
| <a href="#" class="block py-2 hover:text-yellow-300">Activities</a> | |
| <a href="#" class="block py-2 hover:text-yellow-300">Analysis</a> | |
| <a href="#" class="block py-2 hover:text-yellow-300">About</a> | |
| <div class="mt-3 pt-3 border-t border-white border-opacity-20"> | |
| <button class="w-full bg-white text-purple-600 px-4 py-2 rounded-full font-medium mb-2"> | |
| Sign In | |
| </button> | |
| <button class="w-full bg-yellow-400 text-purple-800 px-4 py-2 rounded-full font-medium"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Expand Your Mind Through Curated Knowledge</h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90">Discover insightful articles, engaging learning activities, and in-depth analysis across diverse topics.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition"> | |
| Explore Topics | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition"> | |
| Latest Articles | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Articles --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800">Featured Articles</h2> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Article Card 1 --> | |
| <div class="article-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1673&q=80" | |
| alt="Cognitive Science" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Psychology | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>June 15, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>8 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">The Neuroscience of Focus in ADHD Brains</h3> | |
| <p class="text-gray-600 mb-4">Exploring how attention works differently in neurodivergent individuals and strategies to harness unique cognitive strengths.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Read More</a> | |
| <button class="text-gray-400 hover:text-purple-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article Card 2 --> | |
| <div class="article-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" | |
| alt="Technology" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Technology | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>June 10, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>12 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">How AI is Revolutionizing Personalized Learning</h3> | |
| <p class="text-gray-600 mb-4">Examining the latest advancements in artificial intelligence that adapt to individual learning styles and cognitive patterns.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Read More</a> | |
| <button class="text-gray-400 hover:text-purple-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article Card 3 --> | |
| <div class="article-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80" | |
| alt="Science" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Science | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>June 5, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>15 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">The Quantum Mind: Exploring Consciousness at the Subatomic Level</h3> | |
| <p class="text-gray-600 mb-4">A deep dive into controversial theories that suggest quantum phenomena may play a role in human consciousness.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Read More</a> | |
| <button class="text-gray-400 hover:text-purple-600"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Learning Activities --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Interactive Learning Activities</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Engage with interactive content designed to enhance your understanding and retention.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Activity 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Cognitive Flexibility Challenge</h3> | |
| <p class="text-gray-600 mb-4">A 7-day program to improve your ability to switch between different concepts and perspectives.</p> | |
| <div class="flex items-center text-purple-600 font-medium"> | |
| <span>Start Activity</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Idea Generation Workshop</h3> | |
| <p class="text-gray-600 mb-4">Techniques to boost creativity and overcome mental blocks when brainstorming new ideas.</p> | |
| <div class="flex items-center text-purple-600 font-medium"> | |
| <span>Start Activity</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Pattern Recognition Training</h3> | |
| <p class="text-gray-600 mb-4">Develop your ability to identify patterns in complex information with this visual exercise series.</p> | |
| <div class="flex items-center text-purple-600 font-medium"> | |
| <span>Start Activity</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-purple-600 text-white px-6 py-3 rounded-full font-bold hover:bg-purple-700 transition"> | |
| View All Activities | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Topic Explorer --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Explore Topics</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Dive deep into subjects that spark your curiosity and expand your knowledge.</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button class="topic-chip bg-purple-100 text-purple-800 px-4 py-2 rounded-full font-medium hover:bg-purple-200"> | |
| Psychology | |
| </button> | |
| <button class="topic-chip bg-blue-100 text-blue-800 px-4 py-2 rounded-full font-medium hover:bg-blue-200"> | |
| Neuroscience | |
| </button> | |
| <button class="topic-chip bg-green-100 text-green-800 px-4 py-2 rounded-full font-medium hover:bg-green-200"> | |
| Philosophy | |
| </button> | |
| <button class="topic-chip bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full font-medium hover:bg-yellow-200"> | |
| Productivity | |
| </button> | |
| <button class="topic-chip bg-red-100 text-red-800 px-4 py-2 rounded-full font-medium hover:bg-red-200"> | |
| Technology | |
| </button> | |
| <button class="topic-chip bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full font-medium hover:bg-indigo-200"> | |
| Artificial Intelligence | |
| </button> | |
| <button class="topic-chip bg-pink-100 text-pink-800 px-4 py-2 rounded-full font-medium hover:bg-pink-200"> | |
| Creativity | |
| </button> | |
| <button class="topic-chip bg-gray-100 text-gray-800 px-4 py-2 rounded-full font-medium hover:bg-gray-200"> | |
| All Topics | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Topic Card 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-brain text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Cognitive Science</h3> | |
| <p class="text-gray-600 mb-4">Understanding how the mind processes information and makes decisions.</p> | |
| <a href="#" class="text-purple-600 font-medium text-sm hover:underline">23 Articles</a> | |
| </div> | |
| <!-- Topic Card 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-laptop-code text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Future Tech</h3> | |
| <p class="text-gray-600 mb-4">Emerging technologies that will shape our world in the coming decades.</p> | |
| <a href="#" class="text-purple-600 font-medium text-sm hover:underline">18 Articles</a> | |
| </div> | |
| <!-- Topic Card 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-atom text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Quantum Physics</h3> | |
| <p class="text-gray-600 mb-4">Exploring the strange and counterintuitive world of quantum mechanics.</p> | |
| <a href="#" class="text-purple-600 font-medium text-sm hover:underline">12 Articles</a> | |
| </div> | |
| <!-- Topic Card 4 --> | |
| <div class="bg-gray-50 rounded-lg p-6 hover:shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-book-open text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Learning Methods</h3> | |
| <p class="text-gray-600 mb-4">Evidence-based techniques to acquire and retain knowledge more effectively.</p> | |
| <a href="#" class="text-purple-600 font-medium text-sm hover:underline">27 Articles</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Stay Updated with Our Latest Content</h2> | |
| <p class="text-xl mb-8 opacity-90">Subscribe to our newsletter and receive weekly insights directly to your inbox.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> | |
| <input type="email" placeholder="Your email address" | |
| class="flex-grow px-4 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-300"> | |
| <button class="bg-yellow-400 text-purple-800 px-6 py-3 rounded-full font-bold hover:bg-yellow-300 transition whitespace-nowrap"> | |
| Subscribe Now | |
| </button> | |
| </div> | |
| <p class="text-sm opacity-70 mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-brain text-2xl text-purple-400"></i> | |
| <span class="text-2xl font-bold">Adhd<span class="text-yellow-300">Sigma</span></span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Expanding minds through curated knowledge and interactive learning.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Explore</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Articles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Activities</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Analysis</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Topics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Our Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 text-purple-400"></i> | |
| <span class="text-gray-400">123 Knowledge Lane, Brain City</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-purple-400"></i> | |
| <span class="text-gray-400">info@adhdsigma.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-purple-400"></i> | |
| <span class="text-gray-400">(123) 456-7890</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 AdhdSigma. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Reading progress bar | |
| window.addEventListener('scroll', function() { | |
| const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; | |
| const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; | |
| const scrollProgress = (scrollTop / scrollHeight) * 100; | |
| document.getElementById('reading-progress').style.width = scrollProgress + '%'; | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Bookmark button functionality | |
| document.querySelectorAll('.fa-bookmark').forEach(bookmark => { | |
| bookmark.addEventListener('click', function() { | |
| this.classList.toggle('far'); | |
| this.classList.toggle('fas'); | |
| this.classList.toggle('text-purple-600'); | |
| // Show a toast notification | |
| const toast = document.createElement('div'); | |
| toast.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg'; | |
| toast.textContent = this.classList.contains('fas') ? 'Article bookmarked!' : 'Bookmark removed'; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.remove(); | |
| }, 2000); | |
| }); | |
| }); | |
| </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=Xcoder2020/adhdsigma" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |