Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>TrendSpot - Hashtag Explorer</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> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #1DA1F2; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #0c7abf; | |
| } | |
| /* Animation for loading */ | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| /* Card hover effect */ | |
| .trend-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Loading spinner */ | |
| .spinner { | |
| width: 24px; | |
| height: 24px; | |
| border: 3px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Platform colors */ | |
| .twitter-bg { background-color: #1DA1F2; } | |
| .tiktok-bg { background-color: #000000; } | |
| .instagram-bg { background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); } | |
| .youtube-bg { background-color: #FF0000; } | |
| /* Floating button */ | |
| .floating-btn { | |
| position: fixed; | |
| bottom: 80px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| z-index: 50; | |
| } | |
| /* Platform color indicators */ | |
| .platform-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 4px; | |
| } | |
| /* Prevent text selection */ | |
| * { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| /* Tap highlight color */ | |
| * { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| /* Disable pull-to-refresh */ | |
| body { | |
| overscroll-behavior-y: contain; | |
| } | |
| /* DMIM token color */ | |
| .dmim-bg { background-color: #4a6fdc; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <!-- App Container --> | |
| <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-primary p-4 shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-white text-xl font-bold">TrendSpot</h1> | |
| <div class="flex space-x-3"> | |
| <button class="text-white" id="darkModeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <button class="text-white" id="settingsBtn"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4" id="mainContent"> | |
| <!-- Home Tab Content --> | |
| <div id="homeTab"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-4">Trending Now</h2> | |
| <div class="grid grid-cols-1 gap-4" id="trendingCardsContainer"> | |
| <!-- Cards will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h2 class="text-lg font-semibold mb-4">Recently Viewed</h2> | |
| <div class="space-y-4" id="recentCardsContainer"> | |
| <!-- Recent cards will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Explore Tab Content (hidden by default) --> | |
| <div id="exploreTab" class="hidden"> | |
| <h2 class="text-lg font-semibold mb-4">Search Trends</h2> | |
| <div class="mb-4"> | |
| <div class="relative"> | |
| <input type="text" id="trendSearchInput" placeholder="Search for trends..." | |
| class="w-full py-3 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button id="searchTrendBtn" class="absolute right-3 top-3 text-gray-500 hover:text-primary"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-2">Popular Categories</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="crypto">#Crypto</button> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="tech">#Tech</button> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="gaming">#Gaming</button> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="music">#Music</button> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="finance">#Finance</button> | |
| <button class="category-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition" data-category="news">#News</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4" id="searchResultsContainer"> | |
| <!-- Search results will appear here --> | |
| </div> | |
| </div> | |
| <!-- Library Tab Content (hidden by default) --> | |
| <div id="libraryTab" class="hidden"> | |
| <h2 class="text-lg font-semibold mb-4">Saved Trends</h2> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between bg-gray-100 rounded-lg p-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full dmim-bg text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium">DMIM Token</span> | |
| <span class="text-xs text-gray-500 block">Bitcoin Cash CHIP Protocol</span> | |
| </div> | |
| </div> | |
| <span class="text-sm font-medium">0.3% APY</span> | |
| </div> | |
| </div> | |
| <div class="space-y-3" id="savedTrendsContainer"> | |
| <!-- Saved trends will appear here --> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-2">Stake DMIM to Trends</h3> | |
| <div class="bg-gray-100 rounded-lg p-4"> | |
| <div class="mb-3"> | |
| <label class="block text-sm font-medium mb-1">Select Trend</label> | |
| <select id="trendSelect" class="w-full p-2 rounded border border-gray-300"> | |
| <option value="">-- Select a saved trend --</option> | |
| </select> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="block text-sm font-medium mb-1">DMIM Amount</label> | |
| <input type="number" id="stakeAmount" placeholder="0.00" class="w-full p-2 rounded border border-gray-300"> | |
| </div> | |
| <button id="stakeBtn" class="w-full py-2 bg-primary text-white rounded-lg font-medium"> | |
| Stake & Farm Yield | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-white border-t border-gray-200 p-2"> | |
| <div class="flex justify-around"> | |
| <button class="tab-button active flex flex-col items-center text-primary" data-tab="homeTab"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button class="tab-button flex flex-col items-center text-gray-500" data-tab="exploreTab"> | |
| <i class="fas fa-search text-lg"></i> | |
| <span class="text-xs mt-1">Explore</span> | |
| </button> | |
| <button class="tab-button flex flex-col items-center text-gray-500" data-tab="libraryTab"> | |
| <i class="fas fa-bookmark text-lg"></i> | |
| <span class="text-xs mt-1">Library</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Floating Hashtag Search Button --> | |
| <button class="floating-btn bg-primary text-white flex items-center justify-center" id="hashtagSearchBtn"> | |
| <i class="fas fa-plus text-2xl"></i> | |
| </button> | |
| <!-- Add Trend Modal (hidden by default) --> | |
| <div id="addTrendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold text-lg">Add New Trend</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Hashtag</label> | |
| <input type="text" id="newHashtag" placeholder="#trend" | |
| class="w-full py-2 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Platform</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="twitter"> | |
| <i class="fab fa-twitter mr-1 text-blue-400"></i> Twitter | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="tiktok"> | |
| <i class="fab fa-tiktok mr-1"></i> TikTok | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="instagram"> | |
| <i class="fab fa-instagram mr-1 text-pink-500"></i> Instagram | |
| </button> | |
| <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="youtube"> | |
| <i class="fab fa-youtube mr-1 text-red-500"></i> YouTube | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Link DMIM Token</label> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="linkDmim" class="mr-2"> | |
| <label for="linkDmim" class="text-sm">Stake DMIM to this trend</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-end space-x-3"> | |
| <button id="cancelAddTrend" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700"> | |
| Cancel | |
| </button> | |
| <button id="saveTrend" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium"> | |
| Save Trend | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DMIM Token Info Modal (hidden by default) --> | |
| <div id="dmimModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-lg">DMIM Token</h3> | |
| <span class="inline-flex items-center bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"> | |
| <i class="fas fa-check-circle mr-1"></i> Verified | |
| </span> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full dmim-bg text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Bitcoin Cash CHIP Protocol</h4> | |
| <p class="text-sm text-gray-500">0.3% APY Yield Farming</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-700 mb-3"> | |
| DMIM is a private cryptocurrency token on the Bitcoin Cash network using the CHIP protocol. | |
| Stake DMIM to your saved trends to earn yield. | |
| </p> | |
| <div class="space-y-2"> | |
| <a href="https://tokenexplorer.cash/?tokenId=81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-external-link-alt mr-2"></i> View on Token Explorer | |
| </a> | |
| <a href="https://app.cauldron.quest/swap/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Swap on Cauldron | |
| </a> | |
| <a href="https://blockchair.com/bitcoin-cash/transaction/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="flex items-center text-blue-500 text-sm"> | |
| <i class="fas fa-link mr-2"></i> View Transaction | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <h4 class="font-medium text-sm mb-2">Your DMIM Balance</h4> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium" id="dmimBalance">0 DMIM</span> | |
| <button id="addDmimBtn" class="text-sm text-primary font-medium"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add DMIM | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-center"> | |
| <button id="closeDmimModal" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification (hidden by default) --> | |
| <div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg hidden z-50"> | |
| <div class="flex items-center"> | |
| <span id="toastMessage">Searching for #trending...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for trending cards | |
| const trendingData = [ | |
| { | |
| hashtag: "#Crypto", | |
| title: "Latest cryptocurrency trends and discussions", | |
| platform: "twitter", | |
| posts: "12K", | |
| trendType: "newest", | |
| popularity: "1.2M", | |
| hasDmim: true | |
| }, | |
| { | |
| hashtag: "#Tech", | |
| title: "New tech innovations and product launches", | |
| platform: "twitter", | |
| posts: "8K", | |
| trendType: "hottest", | |
| popularity: "890K", | |
| hasDmim: false | |
| }, | |
| { | |
| hashtag: "#Gaming", | |
| title: "Upcoming game releases and esports news", | |
| platform: "youtube", | |
| posts: "15K", | |
| trendType: "newest", | |
| popularity: "750K", | |
| hasDmim: true | |
| }, | |
| { | |
| hashtag: "#Finance", | |
| title: "Stock market updates and investment tips", | |
| platform: "twitter", | |
| posts: "25K", | |
| trendType: "hottest", | |
| popularity: "1.5M", | |
| hasDmim: false | |
| } | |
| ]; | |
| // Sample data for recent cards | |
| const recentData = [ | |
| { | |
| hashtag: "#Bitcoin", | |
| title: "Bitcoin price analysis and market trends", | |
| platform: "twitter", | |
| posts: "5K", | |
| trendType: "newest", | |
| hasDmim: true | |
| }, | |
| { | |
| hashtag: "#DeFi", | |
| title: "Decentralized finance protocols and yield farming", | |
| platform: "twitter", | |
| posts: "18K", | |
| trendType: "hottest", | |
| hasDmim: true | |
| } | |
| ]; | |
| // User data | |
| let userData = { | |
| dmimBalance: 0, | |
| savedTrends: [], | |
| stakedTrends: {} | |
| }; | |
| // Function to generate platform icon | |
| function getPlatformIcon(platform) { | |
| const icons = { | |
| twitter: '<i class="fab fa-twitter text-blue-400"></i>', | |
| tiktok: '<i class="fab fa-tiktok"></i>', | |
| instagram: '<i class="fab fa-instagram text-pink-500"></i>', | |
| youtube: '<i class="fab fa-youtube text-red-500"></i>' | |
| }; | |
| return icons[platform] || '<i class="fas fa-hashtag"></i>'; | |
| } | |
| // Function to generate platform color indicator | |
| function getPlatformColor(platform) { | |
| const colors = { | |
| twitter: 'bg-blue-400', | |
| tiktok: 'bg-black', | |
| instagram: 'bg-gradient-to-r from-purple-500 via-pink-500 to-red-500', | |
| youtube: 'bg-red-500' | |
| }; | |
| return colors[platform] || 'bg-gray-400'; | |
| } | |
| // Function to render trending cards | |
| function renderTrendingCards() { | |
| const container = document.getElementById('trendingCardsContainer'); | |
| container.innerHTML = ''; | |
| trendingData.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer p-4 h-32 flex flex-col justify-between'; | |
| card.innerHTML = ` | |
| <div class="flex items-start justify-between mb-2"> | |
| <div> | |
| <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full"> | |
| ${getPlatformIcon(item.platform)} | |
| <span class="ml-1">${item.hashtag}</span> | |
| ${item.hasDmim ? '<span class="ml-1 text-green-500"><i class="fas fa-check-circle"></i></span>' : ''} | |
| </span> | |
| </div> | |
| <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full"> | |
| <i class="fas fa-fire text-orange-400 mr-1"></i> ${item.popularity} | |
| </span> | |
| </div> | |
| <h3 class="font-medium text-sm line-clamp-2 mb-3">${item.title}</h3> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>${item.posts} posts</span> | |
| <span class="capitalize">${item.trendType}</span> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| } | |
| // Function to render recent cards | |
| function renderRecentCards() { | |
| const container = document.getElementById('recentCardsContainer'); | |
| container.innerHTML = ''; | |
| recentData.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'trend-card bg-white rounded-lg shadow-sm transition duration-300 cursor-pointer p-3 flex items-start h-28'; | |
| card.innerHTML = ` | |
| <div class="flex-shrink-0 mr-3"> | |
| <span class="platform-indicator ${getPlatformColor(item.platform)}"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-sm line-clamp-2">${item.title}</h3> | |
| <div class="flex justify-between items-center mt-2 text-xs text-gray-500"> | |
| <span>${item.hashtag} ${item.hasDmim ? '<i class="fas fa-check-circle text-green-500 ml-1"></i>' : ''}</span> | |
| <span class="capitalize">${item.trendType}</span> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| } | |
| // Function to render saved trends | |
| function renderSavedTrends() { | |
| const container = document.getElementById('savedTrendsContainer'); | |
| container.innerHTML = ''; | |
| // Update select dropdown | |
| const trendSelect = document.getElementById('trendSelect'); | |
| trendSelect.innerHTML = '<option value="">-- Select a saved trend --</option>'; | |
| userData.savedTrends.forEach(trend => { | |
| const element = document.createElement('div'); | |
| element.className = 'flex items-center p-3 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-gray-50'; | |
| element.innerHTML = ` | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-8 h-8 rounded-full ${getPlatformColor(trend.platform)} flex items-center justify-center text-white"> | |
| ${getPlatformIcon(trend.platform)} | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium text-sm line-clamp-1">${trend.hashtag}</h4> | |
| ${trend.hasDmim ? '<span class="ml-1 text-green-500"><i class="fas fa-check-circle"></i></span>' : ''} | |
| </div> | |
| <p class="text-gray-500 text-xs">${trend.platform} • ${trend.hasDmim ? 'Staked: ' + (userData.stakedTrends[trend.hashtag] || 0) + ' DMIM' : 'Not staked'}</p> | |
| </div> | |
| <button class="text-gray-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| `; | |
| container.appendChild(element); | |
| // Add to select dropdown | |
| const option = document.createElement('option'); | |
| option.value = trend.hashtag; | |
| option.textContent = trend.hashtag; | |
| trendSelect.appendChild(option); | |
| }); | |
| // Update DMIM balance display | |
| document.getElementById('dmimBalance').textContent = userData.dmimBalance + ' DMIM'; | |
| } | |
| // Function to show search results | |
| function showSearchResults(query) { | |
| const container = document.getElementById('searchResultsContainer'); | |
| container.innerHTML = ''; | |
| if (!query) return; | |
| // Simulate search with timeout | |
| setTimeout(() => { | |
| // In a real app, this would fetch actual search results | |
| const results = [ | |
| { | |
| hashtag: `#${query}`, | |
| title: `Latest content about ${query}`, | |
| platform: "twitter", | |
| posts: Math.floor(Math.random() * 100) + "K", | |
| trendType: "hottest" | |
| }, | |
| { | |
| hashtag: `#${query}News`, | |
| title: `Breaking news about ${query}`, | |
| platform: "twitter", | |
| posts: Math.floor(Math.random() * 50) + "K", | |
| trendType: "newest" | |
| }, | |
| { | |
| hashtag: `#${query}Trends`, | |
| title: `Trending topics related to ${query}`, | |
| platform: "youtube", | |
| posts: Math.floor(Math.random() * 30) + "K", | |
| trendType: "hottest" | |
| } | |
| ]; | |
| results.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer p-4 h-32 flex flex-col justify-between'; | |
| card.innerHTML = ` | |
| <div class="flex items-start justify-between mb-2"> | |
| <div> | |
| <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full"> | |
| ${getPlatformIcon(item.platform)} | |
| <span class="ml-1">${item.hashtag}</span> | |
| </span> | |
| </div> | |
| <button class="save-trend-btn text-gray-400 hover:text-primary" data-hashtag="${item.hashtag}" data-platform="${item.platform}"> | |
| <i class="fas fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="font-medium text-sm line-clamp-2 mb-3">${item.title}</h3> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>${item.posts} posts</span> | |
| <span class="capitalize">${item.trendType}</span> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| // Add event listeners to save buttons | |
| document.querySelectorAll('.save-trend-btn').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const hashtag = this.getAttribute('data-hashtag'); | |
| const platform = this.getAttribute('data-platform'); | |
| saveTrend(hashtag, platform); | |
| }); | |
| }); | |
| showToast(`Found results for ${query}`); | |
| }, 1000); | |
| } | |
| // Function to save a trend | |
| function saveTrend(hashtag, platform) { | |
| // Check if already saved | |
| if (userData.savedTrends.some(t => t.hashtag === hashtag)) { | |
| showToast('This trend is already saved'); | |
| return; | |
| } | |
| // Add to saved trends | |
| userData.savedTrends.push({ | |
| hashtag, | |
| platform, | |
| hasDmim: false | |
| }); | |
| // Update UI | |
| renderSavedTrends(); | |
| showToast(`${hashtag} saved to your library`); | |
| // Close modal if open | |
| document.getElementById('addTrendModal').classList.add('hidden'); | |
| } | |
| // Function to stake DMIM to a trend | |
| function stakeDmim(hashtag, amount) { | |
| if (!hashtag || !amount || amount <= 0) { | |
| showToast('Please select a trend and enter a valid amount'); | |
| return; | |
| } | |
| if (amount > userData.dmimBalance) { | |
| showToast('Insufficient DMIM balance'); | |
| return; | |
| } | |
| // Update staked amount | |
| userData.stakedTrends[hashtag] = (userData.stakedTrends[hashtag] || 0) + amount; | |
| userData.dmimBalance -= amount; | |
| // Mark trend as having DMIM | |
| const trend = userData.savedTrends.find(t => t.hashtag === hashtag); | |
| if (trend) { | |
| trend.hasDmim = true; | |
| } | |
| // Update UI | |
| renderSavedTrends(); | |
| showToast(`Staked ${amount} DMIM to ${hashtag}`); | |
| } | |
| // Function to add DMIM tokens | |
| function addDmim(amount) { | |
| userData.dmimBalance += amount; | |
| renderSavedTrends(); | |
| showToast(`Added ${amount} DMIM to your balance`); | |
| } | |
| // Initialize the app | |
| function initApp() { | |
| renderTrendingCards(); | |
| renderRecentCards(); | |
| renderSavedTrends(); | |
| // Add some sample saved trends | |
| userData.savedTrends = [ | |
| { | |
| hashtag: "#Bitcoin", | |
| platform: "twitter", | |
| hasDmim: true | |
| }, | |
| { | |
| hashtag: "#DeFi", | |
| platform: "twitter", | |
| hasDmim: false | |
| } | |
| ]; | |
| // Add some sample staked trends | |
| userData.stakedTrends = { | |
| "#Bitcoin": 500 | |
| }; | |
| // Set initial DMIM balance | |
| userData.dmimBalance = 1000; | |
| } | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('active', 'text-primary'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.add('active', 'text-primary'); | |
| this.classList.remove('text-gray-500'); | |
| // Hide all tabs | |
| document.querySelectorAll('#mainContent > div').forEach(tab => { | |
| tab.classList.add('hidden'); | |
| }); | |
| // Show selected tab | |
| const tabId = this.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| // Scroll to top when switching tabs | |
| document.getElementById('mainContent').scrollTo(0, 0); | |
| // If switching to explore tab, focus search input | |
| if (tabId === 'exploreTab') { | |
| setTimeout(() => { | |
| document.getElementById('trendSearchInput').focus(); | |
| }, 100); | |
| } | |
| }); | |
| }); | |
| // Search trend functionality | |
| document.getElementById('searchTrendBtn').addEventListener('click', function() { | |
| const query = document.getElementById('trendSearchInput').value.trim(); | |
| if (query) { | |
| showSearchResults(query); | |
| } | |
| }); | |
| document.getElementById('trendSearchInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const query = this.value.trim(); | |
| if (query) { | |
| showSearchResults(query); | |
| } | |
| } | |
| }); | |
| // Category buttons | |
| document.querySelectorAll('.category-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const category = this.getAttribute('data-category'); | |
| document.getElementById('trendSearchInput').value = category; | |
| showSearchResults(category); | |
| }); | |
| }); | |
| // Floating button to add new trend | |
| document.getElementById('hashtagSearchBtn').addEventListener('click', function() { | |
| document.getElementById('addTrendModal').classList.remove('hidden'); | |
| }); | |
| // Cancel add trend | |
| document.getElementById('cancelAddTrend').addEventListener('click', function() { | |
| document.getElementById('addTrendModal').classList.add('hidden'); | |
| }); | |
| // Save new trend | |
| document.getElementById('saveTrend').addEventListener('click', function() { | |
| const hashtag = document.getElementById('newHashtag').value.trim(); | |
| const platform = document.querySelector('.platform-btn.bg-primary')?.getAttribute('data-platform'); | |
| const linkDmim = document.getElementById('linkDmim').checked; | |
| if (!hashtag || !platform) { | |
| showToast('Please enter a hashtag and select a platform'); | |
| return; | |
| } | |
| // Add to saved trends | |
| userData.savedTrends.push({ | |
| hashtag, | |
| platform, | |
| hasDmim: linkDmim | |
| }); | |
| // If linking DMIM, add some stake | |
| if (linkDmim) { | |
| userData.stakedTrends[hashtag] = 100; | |
| userData.dmimBalance = Math.max(0, userData.dmimBalance - 100); | |
| } | |
| // Update UI | |
| renderSavedTrends(); | |
| document.getElementById('addTrendModal').classList.add('hidden'); | |
| showToast(`${hashtag} saved to your library`); | |
| }); | |
| // Platform selection in add trend modal | |
| document.querySelectorAll('.platform-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.platform-btn').forEach(b => { | |
| b.classList.remove('bg-primary', 'text-white'); | |
| b.classList.add('bg-gray-200', 'text-gray-700'); | |
| }); | |
| this.classList.remove('bg-gray-200', 'text-gray-700'); | |
| this.classList.add('bg-primary', 'text-white'); | |
| }); | |
| }); | |
| // Stake DMIM button | |
| document.getElementById('stakeBtn').addEventListener('click', function() { | |
| const hashtag = document.getElementById('trendSelect').value; | |
| const amount = parseFloat(document.getElementById('stakeAmount').value); | |
| stakeDmim(hashtag, amount); | |
| }); | |
| // DMIM token info | |
| document.addEventListener('click', function(e) { | |
| if (e.target.closest('.dmim-info')) { | |
| document.getElementById('dmimModal').classList.remove('hidden'); | |
| } | |
| }); | |
| // Close DMIM modal | |
| document.getElementById('closeDmimModal').addEventListener('click', function() { | |
| document.getElementById('dmimModal').classList.add('hidden'); | |
| }); | |
| // Add DMIM button | |
| document.getElementById('addDmimBtn').addEventListener('click', function() { | |
| addDmim(1000); | |
| }); | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| function toggleDarkMode() { | |
| document.body.classList.toggle('bg-gray-900'); | |
| document.body.classList.toggle('text-gray-100'); | |
| document.querySelector('main').classList.toggle('bg-gray-800'); | |
| document.querySelectorAll('.bg-white').forEach(el => { | |
| el.classList.toggle('bg-gray-700'); | |
| el.classList.toggle('text-gray-100'); | |
| }); | |
| document.querySelector('nav').classList.toggle('bg-gray-700'); | |
| document.querySelector('nav').classList.toggle('border-gray-600'); | |
| // Save preference to localStorage | |
| const isDark = document.body.classList.contains('bg-gray-900'); | |
| localStorage.setItem('darkMode', isDark); | |
| } | |
| darkModeToggle.addEventListener('click', toggleDarkMode); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| toggleDarkMode(); | |
| } | |
| // Toast notification function | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| toastMessage.textContent = message; | |
| toast.classList.remove('hidden'); | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Initialize the app when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', initApp); | |
| // Prevent default behavior for all buttons to avoid unwanted scrolling on mobile | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('touchstart', function(e) { | |
| e.preventDefault(); | |
| }); | |
| }); | |
| </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=privateuserh/privdmi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |