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>DMIM - Trend 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: #4a6fdc; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3a5bc7; | |
| } | |
| /* Card hover effect */ | |
| .trend-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* DMIM token color */ | |
| .dmim-bg { background-color: #4a6fdc; } | |
| /* Prevent text selection */ | |
| * { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| </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="dmim-bg p-4 shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-white text-xl font-bold">DMIM</h1> | |
| <button class="text-white" id="dmimBalanceBtn"> | |
| <span id="dmimBalanceDisplay">0 DMIM</span> | |
| </button> | |
| </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">Your Saved Trends</h2> | |
| <div class="space-y-3" id="savedTrendsContainer"> | |
| <!-- Saved trends will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Tab Content (hidden by default) --> | |
| <div id="searchTab" class="hidden"> | |
| <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-dmim-bg"> | |
| <button id="searchTrendBtn" class="absolute right-3 top-3 text-gray-500 hover:text-dmim-bg"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4" id="searchResultsContainer"> | |
| <!-- Search results will appear here --> | |
| </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-dmim-bg" 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="searchTab"> | |
| <i class="fas fa-search text-lg"></i> | |
| <span class="text-xs mt-1">Search</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500" id="addTrendBtn"> | |
| <i class="fas fa-plus-circle text-lg"></i> | |
| <span class="text-xs mt-1">Add</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- 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-dmim-bg"> | |
| </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> | |
| <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 dmim-bg text-white rounded-md text-sm font-medium"> | |
| Save Trend | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DMIM Token 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 mb-4"> | |
| <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-dmim-bg font-medium"> | |
| <i class="fas fa-plus-circle mr-1"></i> Add DMIM | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <h4 class="font-medium text-sm mb-2">Stake DMIM to Trend</h4> | |
| <div class="mb-2"> | |
| <select id="trendSelect" class="w-full p-2 rounded border border-gray-300 text-sm"> | |
| <option value="">-- Select a saved trend --</option> | |
| </select> | |
| </div> | |
| <div class="mb-2"> | |
| <input type="number" id="stakeAmount" placeholder="DMIM amount" class="w-full p-2 rounded border border-gray-300 text-sm"> | |
| </div> | |
| <button id="stakeBtn" class="w-full py-2 dmim-bg text-white rounded-lg text-sm font-medium"> | |
| Stake & Farm Yield | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-center"> | |
| <button id="closeDmimModal" class="px-4 py-2 dmim-bg 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">Trend saved successfully</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for trending cards | |
| const trendingData = [ | |
| { | |
| hashtag: "#Crypto", | |
| title: "Latest cryptocurrency trends and discussions", | |
| platform: "twitter", | |
| posts: "12K", | |
| popularity: "1.2M" | |
| }, | |
| { | |
| hashtag: "#Tech", | |
| title: "New tech innovations and product launches", | |
| platform: "twitter", | |
| posts: "8K", | |
| popularity: "890K" | |
| }, | |
| { | |
| hashtag: "#Gaming", | |
| title: "Upcoming game releases and esports news", | |
| platform: "youtube", | |
| posts: "15K", | |
| popularity: "750K" | |
| }, | |
| { | |
| hashtag: "#Finance", | |
| title: "Stock market updates and investment tips", | |
| platform: "twitter", | |
| posts: "25K", | |
| popularity: "1.5M" | |
| } | |
| ]; | |
| // User data | |
| let userData = { | |
| dmimBalance: 1000, | |
| savedTrends: [ | |
| { | |
| hashtag: "#Bitcoin", | |
| platform: "twitter", | |
| hasDmim: true, | |
| stakedAmount: 500 | |
| }, | |
| { | |
| hashtag: "#DeFi", | |
| platform: "twitter", | |
| hasDmim: false, | |
| stakedAmount: 0 | |
| } | |
| ] | |
| }; | |
| // 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 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 shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer'; | |
| 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> | |
| <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-3 mb-3">${item.title}</h3> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>${item.posts} posts</span> | |
| <button class="save-trend-btn text-gray-400 hover:text-dmim-bg" data-hashtag="${item.hashtag}" data-platform="${item.platform}"> | |
| <i class="fas fa-bookmark"></i> Save | |
| </button> | |
| </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); | |
| }); | |
| }); | |
| } | |
| // 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 flex items-center justify-center text-white ${trend.platform === 'twitter' ? 'bg-blue-400' : trend.platform === 'instagram' ? 'bg-pink-500' : trend.platform === 'youtube' ? 'bg-red-500' : 'bg-black'}"> | |
| ${getPlatformIcon(trend.platform)} | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center"> | |
| <h4 class="font-medium text-sm">${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: ' + trend.stakedAmount + ' DMIM' : 'Not staked'}</p> | |
| </div> | |
| <button class="text-gray-500 hover:text-dmim-bg" data-hashtag="${trend.hashtag}"> | |
| <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'; | |
| document.getElementById('dmimBalanceDisplay').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" | |
| }, | |
| { | |
| hashtag: `#${query}News`, | |
| title: `Breaking news about ${query}`, | |
| platform: "twitter", | |
| posts: Math.floor(Math.random() * 50) + "K" | |
| }, | |
| { | |
| hashtag: `#${query}Trends`, | |
| title: `Trending topics related to ${query}`, | |
| platform: "youtube", | |
| posts: Math.floor(Math.random() * 30) + "K" | |
| } | |
| ]; | |
| results.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = 'trend-card bg-white rounded-lg shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer'; | |
| 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-dmim-bg" data-hashtag="${item.hashtag}" data-platform="${item.platform}"> | |
| <i class="fas fa-bookmark"></i> Save | |
| </button> | |
| </div> | |
| <h3 class="font-medium text-sm line-clamp-3 mb-3">${item.title}</h3> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>${item.posts} posts</span> | |
| <span>${item.platform}</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, | |
| stakedAmount: 0 | |
| }); | |
| // Update UI | |
| renderSavedTrends(); | |
| showToast(`${hashtag} saved to your library`); | |
| } | |
| // 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 | |
| const trend = userData.savedTrends.find(t => t.hashtag === hashtag); | |
| if (trend) { | |
| trend.hasDmim = true; | |
| trend.stakedAmount = (trend.stakedAmount || 0) + amount; | |
| userData.dmimBalance -= amount; | |
| } | |
| // 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(); | |
| renderSavedTrends(); | |
| } | |
| // 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-dmim-bg'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.add('active', 'text-dmim-bg'); | |
| 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 search tab, focus search input | |
| if (tabId === 'searchTab') { | |
| 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); | |
| } | |
| } | |
| }); | |
| // Add trend button | |
| document.getElementById('addTrendBtn').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-dmim-bg')?.getAttribute('data-platform'); | |
| if (!hashtag || !platform) { | |
| showToast('Please enter a hashtag and select a platform'); | |
| return; | |
| } | |
| // Add to saved trends | |
| userData.savedTrends.push({ | |
| hashtag, | |
| platform, | |
| hasDmim: false, | |
| stakedAmount: 0 | |
| }); | |
| // Update UI | |
| renderSavedTrends(); | |
| document.getElementById('addTrendModal').classList.add('hidden'); | |
| document.getElementById('newHashtag').value = ''; | |
| 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-dmim-bg', 'text-white'); | |
| b.classList.add('bg-gray-200', 'text-gray-700'); | |
| }); | |
| this.classList.remove('bg-gray-200', 'text-gray-700'); | |
| this.classList.add('bg-dmim-bg', '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 balance button | |
| document.getElementById('dmimBalanceBtn').addEventListener('click', function() { | |
| 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); | |
| }); | |
| // 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); | |
| </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/privdmi1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |