Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Muslim Names - Beautiful Islamic Names for Your Child</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> | |
| @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: #f8f5f2; | |
| } | |
| .name-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .name-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .arabic-name { | |
| font-family: 'Traditional Arabic', Arial, sans-serif; | |
| font-size: 1.5rem; | |
| direction: rtl; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); | |
| } | |
| .filter-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .favorite-btn.active { | |
| color: #ef4444; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="hero-gradient text-white py-12 px-4 md:px-8"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Beautiful Muslim Names</h1> | |
| <p class="text-xl mb-6">Discover meaningful Islamic names for your child with their origins and beautiful meanings</p> | |
| <div class="relative max-w-md"> | |
| <input type="text" id="searchInput" placeholder="Search names..." class="w-full py-3 px-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="absolute right-3 top-3 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://img.icons8.com/color/256/mosque.png" alt="Islamic illustration" class="w-64 h-64 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto max-w-6xl py-8 px-4"> | |
| <!-- Filters --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Filter Names</h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="filter-btn active px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="all">All</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="boys">Boys</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="girls">Girls</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="quranic">Quranic</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="prophets">Prophets</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="arabic">Arabic</button> | |
| <button class="filter-btn px-4 py-2 rounded-full border border-gray-200 hover:bg-blue-50 transition" data-filter="modern">Modern</button> | |
| </div> | |
| </div> | |
| <!-- Names Grid --> | |
| <div id="namesContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Names will be dynamically inserted here --> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="text-center mt-10"> | |
| <button id="loadMoreBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-full transition shadow-md"> | |
| Load More Names | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4"> | |
| <div class="container mx-auto max-w-6xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">About</h3> | |
| <p class="text-gray-300">Our mission is to help Muslim parents find beautiful, meaningful names for their children based on Islamic tradition and modern preferences.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Popular Names</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Quranic Names</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Prophet Names</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Modern Names</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition text-2xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition text-2xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition text-2xl"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| <p class="text-gray-400 mt-4">Subscribe for new name suggestions</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="py-2 px-3 rounded-l text-gray-800 w-full"> | |
| <button class="bg-blue-500 hover:bg-blue-600 px-4 rounded-r"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Modern Muslim Names. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Favorites Modal --> | |
| <div id="favoritesModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-xl max-w-md w-full max-h-[80vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Your Favorite Names</h3> | |
| <button id="closeFavoritesModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="favoritesList" class="space-y-3"> | |
| <!-- Favorites will be inserted here --> | |
| </div> | |
| <div id="noFavoritesMessage" class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-heart text-4xl mb-3"></i> | |
| <p>You haven't saved any favorites yet.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Details Modal --> | |
| <div id="nameDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-xl max-w-md w-full"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 id="modalName" class="text-2xl font-semibold"></h3> | |
| <button id="closeNameModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <p id="modalArabic" class="arabic-name text-right mb-2"></p> | |
| <p id="modalMeaning" class="text-gray-700"></p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Gender</p> | |
| <p id="modalGender" class="font-medium"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Origin</p> | |
| <p id="modalOrigin" class="font-medium"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Popularity</p> | |
| <p id="modalPopularity" class="font-medium"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Quranic</p> | |
| <p id="modalQuranic" class="font-medium"></p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t"> | |
| <button id="modalFavoriteBtn" class="text-gray-400 hover:text-red-500 transition"> | |
| <i class="far fa-heart"></i> <span>Save to favorites</span> | |
| </button> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition"> | |
| Share this name | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Favorites Button --> | |
| <button id="floatingFavoritesBtn" class="fixed bottom-6 right-6 bg-white shadow-xl rounded-full p-4 text-red-500 hover:bg-red-50 transition"> | |
| <i class="fas fa-heart"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" id="favoritesCount">0</span> | |
| </button> | |
| <script> | |
| // Sample data for Muslim names | |
| const namesData = [ | |
| { id: 1, name: "Muhammad", arabic: "مُحَمَّد", meaning: "The praised one", gender: "boy", origin: "Arabic", popularity: "Very High", quranic: "Yes", tags: ["prophets", "quranic", "arabic"] }, | |
| { id: 2, name: "Aisha", arabic: "عائشة", meaning: "Living, prosperous", gender: "girl", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["quranic", "arabic"] }, | |
| { id: 3, name: "Ibrahim", arabic: "إبراهيم", meaning: "Father of many", gender: "boy", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["prophets", "quranic", "arabic"] }, | |
| { id: 4, name: "Fatima", arabic: "فاطمة", meaning: "Captivating, abstainer", gender: "girl", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["quranic", "arabic"] }, | |
| { id: 5, name: "Yusuf", arabic: "يوسف", meaning: "God increases", gender: "boy", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["prophets", "quranic", "arabic"] }, | |
| { id: 6, name: "Zainab", arabic: "زينب", meaning: "Fragrant flower", gender: "girl", origin: "Arabic", popularity: "Medium", quranic: "Yes", tags: ["quranic", "arabic"] }, | |
| { id: 7, name: "Omar", arabic: "عمر", meaning: "Long-lived", gender: "boy", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic"] }, | |
| { id: 8, name: "Layla", arabic: "ليلى", meaning: "Night", gender: "girl", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic", "modern"] }, | |
| { id: 9, name: "Adam", arabic: "آدم", meaning: "Man, mankind", gender: "boy", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["prophets", "quranic", "arabic"] }, | |
| { id: 10, name: "Maryam", arabic: "مريم", meaning: "Exalted, bitter", gender: "girl", origin: "Arabic", popularity: "High", quranic: "Yes", tags: ["quranic", "arabic"] }, | |
| { id: 11, name: "Ali", arabic: "علي", meaning: "Exalted, noble", gender: "boy", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic"] }, | |
| { id: 12, name: "Noor", arabic: "نور", meaning: "Light", gender: "girl", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic", "modern"] }, | |
| { id: 13, name: "Hamza", arabic: "حمزة", meaning: "Lion", gender: "boy", origin: "Arabic", popularity: "Medium", quranic: "No", tags: ["arabic"] }, | |
| { id: 14, name: "Huda", arabic: "هدى", meaning: "Right guidance", gender: "girl", origin: "Arabic", popularity: "Medium", quranic: "Yes", tags: ["quranic", "arabic"] }, | |
| { id: 15, name: "Khalid", arabic: "خالد", meaning: "Immortal, eternal", gender: "boy", origin: "Arabic", popularity: "Medium", quranic: "No", tags: ["arabic"] }, | |
| { id: 16, name: "Amina", arabic: "آمنة", meaning: "Trustworthy, faithful", gender: "girl", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic"] }, | |
| { id: 17, name: "Bilal", arabic: "بلال", meaning: "Moisture, water", gender: "boy", origin: "Arabic", popularity: "Medium", quranic: "No", tags: ["arabic"] }, | |
| { id: 18, name: "Jannah", arabic: "جنة", meaning: "Paradise, garden", gender: "girl", origin: "Arabic", popularity: "Medium", quranic: "Yes", tags: ["quranic", "arabic", "modern"] }, | |
| { id: 19, name: "Rayyan", arabic: "ريان", meaning: "Gates of Paradise", gender: "boy", origin: "Arabic", popularity: "Medium", quranic: "Yes", tags: ["quranic", "arabic", "modern"] }, | |
| { id: 20, name: "Safiya", arabic: "صفية", meaning: "Pure, best friend", gender: "girl", origin: "Arabic", popularity: "Medium", quranic: "No", tags: ["arabic"] }, | |
| { id: 21, name: "Zayn", arabic: "زين", meaning: "Beauty, grace", gender: "boy", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic", "modern"] }, | |
| { id: 22, name: "Yasmin", arabic: "ياسمين", meaning: "Jasmine flower", gender: "girl", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic", "modern"] }, | |
| { id: 23, name: "Idris", arabic: "إدريس", meaning: "Interpreter", gender: "boy", origin: "Arabic", popularity: "Medium", quranic: "Yes", tags: ["prophets", "quranic", "arabic"] }, | |
| { id: 24, name: "Aaliyah", arabic: "عالية", meaning: "Exalted, sublime", gender: "girl", origin: "Arabic", popularity: "High", quranic: "No", tags: ["arabic", "modern"] } | |
| ]; | |
| // DOM Elements | |
| const namesContainer = document.getElementById('namesContainer'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const loadMoreBtn = document.getElementById('loadMoreBtn'); | |
| const favoritesModal = document.getElementById('favoritesModal'); | |
| const closeFavoritesModal = document.getElementById('closeFavoritesModal'); | |
| const floatingFavoritesBtn = document.getElementById('floatingFavoritesBtn'); | |
| const favoritesList = document.getElementById('favoritesList'); | |
| const noFavoritesMessage = document.getElementById('noFavoritesMessage'); | |
| const favoritesCount = document.getElementById('favoritesCount'); | |
| const nameDetailsModal = document.getElementById('nameDetailsModal'); | |
| const closeNameModal = document.getElementById('closeNameModal'); | |
| const modalFavoriteBtn = document.getElementById('modalFavoriteBtn'); | |
| // State | |
| let currentFilter = 'all'; | |
| let displayedNames = 12; | |
| let favorites = JSON.parse(localStorage.getItem('favorites')) || []; | |
| // Initialize | |
| function init() { | |
| renderNames(); | |
| updateFavoritesCount(); | |
| setupEventListeners(); | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| // Search functionality | |
| searchInput.addEventListener('input', () => { | |
| displayedNames = 12; | |
| renderNames(); | |
| }); | |
| // Filter buttons | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| currentFilter = button.dataset.filter; | |
| displayedNames = 12; | |
| // Update active state | |
| filterButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| renderNames(); | |
| }); | |
| }); | |
| // Load more names | |
| loadMoreBtn.addEventListener('click', () => { | |
| displayedNames += 12; | |
| renderNames(); | |
| }); | |
| // Favorites modal | |
| floatingFavoritesBtn.addEventListener('click', () => { | |
| showFavoritesModal(); | |
| }); | |
| closeFavoritesModal.addEventListener('click', () => { | |
| favoritesModal.classList.add('hidden'); | |
| }); | |
| // Name details modal | |
| closeNameModal.addEventListener('click', () => { | |
| nameDetailsModal.classList.add('hidden'); | |
| }); | |
| // Click outside modals to close | |
| window.addEventListener('click', (e) => { | |
| if (e.target === favoritesModal) { | |
| favoritesModal.classList.add('hidden'); | |
| } | |
| if (e.target === nameDetailsModal) { | |
| nameDetailsModal.classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Render names based on current filter and search | |
| function renderNames() { | |
| namesContainer.innerHTML = ''; | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| let filteredNames = namesData.filter(name => { | |
| const matchesSearch = name.name.toLowerCase().includes(searchTerm) || | |
| name.arabic.includes(searchTerm) || | |
| name.meaning.toLowerCase().includes(searchTerm); | |
| let matchesFilter = true; | |
| if (currentFilter === 'boys') { | |
| matchesFilter = name.gender === 'boy'; | |
| } else if (currentFilter === 'girls') { | |
| matchesFilter = name.gender === 'girl'; | |
| } else if (currentFilter !== 'all') { | |
| matchesFilter = name.tags.includes(currentFilter); | |
| } | |
| return matchesSearch && matchesFilter; | |
| }); | |
| // Display only a subset of names | |
| const namesToDisplay = filteredNames.slice(0, displayedNames); | |
| if (namesToDisplay.length === 0) { | |
| namesContainer.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <i class="fas fa-search text-4xl text-gray-400 mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-700">No names found</h3> | |
| <p class="text-gray-500">Try adjusting your search or filter</p> | |
| </div> | |
| `; | |
| loadMoreBtn.classList.add('hidden'); | |
| return; | |
| } | |
| namesToDisplay.forEach((name, index) => { | |
| const isFavorite = favorites.includes(name.id); | |
| const nameCard = document.createElement('div'); | |
| nameCard.className = `name-card bg-white rounded-xl overflow-hidden shadow-md fade-in`; | |
| nameCard.style.animationDelay = `${index * 0.05}s`; | |
| nameCard.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800">${name.name}</h3> | |
| <p class="arabic-name text-right mt-1">${name.arabic}</p> | |
| </div> | |
| <button class="favorite-btn ${isFavorite ? 'active' : ''} text-gray-300 hover:text-red-500 transition" data-id="${name.id}"> | |
| <i class="${isFavorite ? 'fas' : 'far'} fa-heart"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 mt-3">${name.meaning}</p> | |
| <div class="flex justify-between items-center mt-4 pt-4 border-t border-gray-100"> | |
| <span class="text-sm px-3 py-1 rounded-full ${name.gender === 'boy' ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800'}"> | |
| ${name.gender === 'boy' ? 'Boy' : 'Girl'} | |
| </span> | |
| <button class="text-blue-500 hover:text-blue-700 text-sm font-medium view-details-btn" data-id="${name.id}"> | |
| View Details <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| namesContainer.appendChild(nameCard); | |
| }); | |
| // Show/hide load more button | |
| loadMoreBtn.classList.toggle('hidden', displayedNames >= filteredNames.length); | |
| // Add event listeners to the new elements | |
| addCardEventListeners(); | |
| } | |
| // Add event listeners to name cards | |
| function addCardEventListeners() { | |
| // Favorite buttons | |
| document.querySelectorAll('.favorite-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const nameId = parseInt(button.dataset.id); | |
| toggleFavorite(nameId); | |
| // Update button appearance | |
| const icon = button.querySelector('i'); | |
| if (button.classList.contains('active')) { | |
| button.classList.remove('active'); | |
| icon.classList.replace('fas', 'far'); | |
| } else { | |
| button.classList.add('active'); | |
| icon.classList.replace('far', 'fas'); | |
| } | |
| updateFavoritesCount(); | |
| }); | |
| }); | |
| // View details buttons | |
| document.querySelectorAll('.view-details-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const nameId = parseInt(button.dataset.id); | |
| showNameDetails(nameId); | |
| }); | |
| }); | |
| // Whole card click | |
| document.querySelectorAll('.name-card').forEach(card => { | |
| card.addEventListener('click', () => { | |
| const nameId = parseInt(card.querySelector('.favorite-btn').dataset.id); | |
| showNameDetails(nameId); | |
| }); | |
| }); | |
| } | |
| // Toggle favorite status | |
| function toggleFavorite(nameId) { | |
| const index = favorites.indexOf(nameId); | |
| if (index === -1) { | |
| favorites.push(nameId); | |
| } else { | |
| favorites.splice(index, 1); | |
| } | |
| localStorage.setItem('favorites', JSON.stringify(favorites)); | |
| // If favorites modal is open, update it | |
| if (!favoritesModal.classList.contains('hidden')) { | |
| showFavoritesModal(); | |
| } | |
| } | |
| // Update favorites count badge | |
| function updateFavoritesCount() { | |
| favoritesCount.textContent = favorites.length; | |
| } | |
| // Show favorites modal | |
| function showFavoritesModal() { | |
| favoritesModal.classList.remove('hidden'); | |
| if (favorites.length === 0) { | |
| noFavoritesMessage.classList.remove('hidden'); | |
| favoritesList.classList.add('hidden'); | |
| return; | |
| } | |
| noFavoritesMessage.classList.add('hidden'); | |
| favoritesList.classList.remove('hidden'); | |
| favoritesList.innerHTML = ''; | |
| const favoriteNames = namesData.filter(name => favorites.includes(name.id)); | |
| favoriteNames.forEach(name => { | |
| const favoriteItem = document.createElement('div'); | |
| favoriteItem.className = 'flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition'; | |
| favoriteItem.innerHTML = ` | |
| <div> | |
| <h4 class="font-medium">${name.name}</h4> | |
| <p class="text-sm text-gray-500">${name.meaning}</p> | |
| </div> | |
| <button class="favorite-btn active text-red-500" data-id="${name.id}"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| `; | |
| favoritesList.appendChild(favoriteItem); | |
| }); | |
| // Add event listeners to favorite items | |
| document.querySelectorAll('#favoritesList .favorite-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const nameId = parseInt(button.dataset.id); | |
| toggleFavorite(nameId); | |
| showFavoritesModal(); // Refresh the modal | |
| renderNames(); // Update the main view | |
| }); | |
| }); | |
| } | |
| // Show name details modal | |
| function showNameDetails(nameId) { | |
| const name = namesData.find(n => n.id === nameId); | |
| if (!name) return; | |
| const isFavorite = favorites.includes(nameId); | |
| // Update modal content | |
| document.getElementById('modalName').textContent = name.name; | |
| document.getElementById('modalArabic').textContent = name.arabic; | |
| document.getElementById('modalMeaning').textContent = name.meaning; | |
| document.getElementById('modalGender').textContent = name.gender === 'boy' ? 'Male' : 'Female'; | |
| document.getElementById('modalOrigin').textContent = name.origin; | |
| document.getElementById('modalPopularity').textContent = name.popularity; | |
| document.getElementById('modalQuranic').textContent = name.quranic; | |
| // Update favorite button | |
| const favoriteIcon = modalFavoriteBtn.querySelector('i'); | |
| const favoriteText = modalFavoriteBtn.querySelector('span'); | |
| if (isFavorite) { | |
| modalFavoriteBtn.classList.add('active'); | |
| favoriteIcon.classList.replace('far', 'fas'); | |
| favoriteText.textContent = 'Remove from favorites'; | |
| } else { | |
| modalFavoriteBtn.classList.remove('active'); | |
| favoriteIcon.classList.replace('fas', 'far'); | |
| favoriteText.textContent = 'Save to favorites'; | |
| } | |
| // Set up favorite button event | |
| modalFavoriteBtn.onclick = (e) => { | |
| e.stopPropagation(); | |
| toggleFavorite(nameId); | |
| showNameDetails(nameId); // Refresh the modal | |
| renderNames(); // Update the main view | |
| }; | |
| // Show modal | |
| nameDetailsModal.classList.remove('hidden'); | |
| } | |
| // Initialize the app | |
| init(); | |
| </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=Nekruz/mclm-names" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |