Spaces:

privateuserh
/

privdmi

Running

App Files Files Community

privateuserh commited on 18 days ago

Commit

fe9aa86

verified ·

1 Parent(s): 03eb6de

Add 2 files

Browse files

Files changed (2) hide show

index.html +431 -287
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -96,6 +96,9 @@
         body {
             overscroll-behavior-y: contain;
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans text-gray-800">
@@ -138,91 +141,74 @@
             <!-- Explore Tab Content (hidden by default) -->
             <div id="exploreTab" class="hidden">
-                <h2 class="text-lg font-semibold mb-4">Browse Categories</h2>
-                <div class="grid grid-cols-3 gap-3">
-                    <div class="bg-blue-50 rounded-lg p-3 text-center cursor-pointer hover:bg-blue-100 transition">
-                        <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-music"></i>
-                        </div>
-                        <span class="text-sm font-medium">Music</span>
-                    </div>
-                    <div class="bg-orange-50 rounded-lg p-3 text-center cursor-pointer hover:bg-orange-100 transition">
-                        <div class="bg-secondary text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-gamepad"></i>
-                        </div>
-                        <span class="text-sm font-medium">Gaming</span>
-                    </div>
-                    <div class="bg-purple-50 rounded-lg p-3 text-center cursor-pointer hover:bg-purple-100 transition">
-                        <div class="bg-purple-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-newspaper"></i>
-                        </div>
-                        <span class="text-sm font-medium">News</span>
-                    </div>
-                    <div class="bg-green-50 rounded-lg p-3 text-center cursor-pointer hover:bg-green-100 transition">
-                        <div class="bg-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-film"></i>
-                        </div>
-                        <span class="text-sm font-medium">Movies</span>
-                    </div>
-                    <div class="bg-red-50 rounded-lg p-3 text-center cursor-pointer hover:bg-red-100 transition">
-                        <div class="bg-red-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-lightbulb"></i>
-                        </div>
-                        <span class="text-sm font-medium">Learning</span>
-                    </div>
-                    <div class="bg-yellow-50 rounded-lg p-3 text-center cursor-pointer hover:bg-yellow-100 transition">
-                        <div class="bg-yellow-500 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-laugh-beam"></i>
-                        </div>
-                        <span class="text-sm font-medium">Comedy</span>
                     </div>
                 </div>
-                <div class="mt-6">
-                    <h2 class="text-lg font-semibold mb-4">Popular Hashtags</h2>
                     <div class="flex flex-wrap gap-2">
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Viral</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Trending</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Explore</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Discover</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#New</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Hot</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Popular</span>
-                        <span class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm cursor-pointer transition">#Latest</span>
                     </div>
                 </div>
             </div>
             <!-- Library Tab Content (hidden by default) -->
             <div id="libraryTab" class="hidden">
-                <h2 class="text-lg font-semibold mb-4">Your Hashtags</h2>
-                <div class="grid grid-cols-2 gap-4 mb-6">
-                    <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-200 flex items-center cursor-pointer hover:bg-gray-50" id="savedBtn">
-                        <div class="bg-blue-100 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
-                            <i class="fas fa-bookmark"></i>
-                        </div>
-                        <span class="font-medium text-sm">Saved</span>
-                    </div>
-                    <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-200 flex items-center cursor-pointer hover:bg-gray-50" id="historyBtn">
-                        <div class="bg-orange-100 text-secondary w-10 h-10 rounded-full flex items-center justify-center mr-3">
-                            <i class="fas fa-history"></i>
                         </div>
-                        <span class="font-medium text-sm">History</span>
                     </div>
                 </div>
-                <div>
-                    <h3 class="font-medium mb-3">Recently Viewed</h3>
-                    <div class="space-y-3" id="recentlyViewedContainer">
-                        <!-- Recently viewed items will be dynamically inserted here -->
                     </div>
                 </div>
             </div>
@@ -237,7 +223,7 @@
                 </button>
                 <button class="tab-button flex flex-col items-center text-gray-500" data-tab="exploreTab">
-                    <i class="fas fa-compass text-lg"></i>
                     <span class="text-xs mt-1">Explore</span>
                 </button>
@@ -250,115 +236,114 @@
         <!-- Floating Hashtag Search Button -->
         <button class="floating-btn bg-primary text-white flex items-center justify-center" id="hashtagSearchBtn">
-            <i class="fas fa-hashtag text-2xl"></i>
         </button>
-        <!-- Hashtag Search Modal (hidden by default) -->
-        <div id="hashtagModal" 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">Search Hashtags</h3>
                 </div>
                 <div class="p-4">
                     <div class="mb-4">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Enter a hashtag</label>
-                        <input type="text" id="hashtagInput" placeholder="#trending"
-                               class="w-full py-2 px-4 rounded-full 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">Sort by</label>
                         <div class="grid grid-cols-2 gap-2">
-                            <button class="bg-primary text-white py-2 px-3 rounded text-sm sort-btn" data-sort="newest">
-                                <i class="fas fa-clock mr-1"></i> Newest
                             </button>
-                            <button class="bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm sort-btn" data-sort="hottest">
-                                <i class="fas fa-fire mr-1"></i> Hottest
                             </button>
                         </div>
                     </div>
                     <div class="mb-4">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Content type</label>
-                        <div class="grid grid-cols-2 gap-2">
-                            <button class="bg-primary text-white py-2 px-3 rounded text-sm type-btn" data-type="all">
-                                <i class="fas fa-globe mr-1"></i> All
-                            </button>
-                            <button class="bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm type-btn" data-type="media">
-                                <i class="fas fa-photo-video mr-1"></i> Media
-                            </button>
                         </div>
                     </div>
                 </div>
                 <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
-                    <button id="cancelHashtag" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700">
                         Cancel
                     </button>
-                    <button id="searchHashtag" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium">
-                        Search
                     </button>
                 </div>
             </div>
         </div>
-        <!-- Settings Modal (hidden by default) -->
-        <div id="settingsModal" 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 max-h-[80vh] overflow-y-auto">
-                <div class="p-4 border-b border-gray-200">
-                    <h3 class="font-semibold text-lg">Settings</h3>
                 </div>
                 <div class="p-4">
-                    <div class="mb-6">
-                        <h4 class="font-medium text-gray-700 mb-3">Appearance</h4>
-                        <div class="space-y-3">
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-700">Dark Mode</span>
-                                <label class="relative inline-flex items-center cursor-pointer">
-                                    <input type="checkbox" value="" class="sr-only peer" id="darkModeToggleSetting">
-                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
-                                </label>
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-700">App Theme Color</span>
-                                <div class="flex space-x-2">
-                                    <div class="w-6 h-6 rounded-full bg-primary cursor-pointer border-2 border-primary"></div>
-                                    <div class="w-6 h-6 rounded-full bg-purple-500 cursor-pointer border-2 border-transparent"></div>
-                                    <div class="w-6 h-6 rounded-full bg-green-500 cursor-pointer border-2 border-transparent"></div>
-                                    <div class="w-6 h-6 rounded-full bg-red-500 cursor-pointer border-2 border-transparent"></div>
-                                </div>
-                            </div>
                         </div>
                     </div>
-                    <div class="mb-6">
-                        <h4 class="font-medium text-gray-700 mb-3">About</h4>
-                        <div class="space-y-3">
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-700">Version</span>
-                                <span class="text-sm text-gray-500">1.0.0</span>
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-700">Privacy Policy</span>
-                                <span class="text-sm text-primary">View</span>
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-700">Terms of Service</span>
-                                <span class="text-sm text-primary">View</span>
-                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="p-4 border-t border-gray-200 flex justify-center">
-                    <button id="closeSettings" class="px-4 py-2 bg-primary text-white rounded-md text-sm font-medium">
                         Close
                     </button>
                 </div>
@@ -377,78 +362,77 @@
         // Sample data for trending cards
         const trendingData = [
             {
-                hashtag: "#Music",
-                title: "Top music trends this week across all platforms",
-                platform: "youtube",
                 posts: "12K",
                 trendType: "newest",
-                popularity: "1.2M"
             },
             {
                 hashtag: "#Tech",
-                title: "Latest tech innovations and discussions",
                 platform: "twitter",
                 posts: "8K",
                 trendType: "hottest",
-                popularity: "890K"
             },
             {
-                hashtag: "#Fitness",
-                title: "New workout trends taking over social media",
-                platform: "instagram",
                 posts: "15K",
                 trendType: "newest",
-                popularity: "750K"
             },
             {
-                hashtag: "#Foodie",
-                title: "Viral food trends you need to try",
-                platform: "tiktok",
                 posts: "25K",
                 trendType: "hottest",
-                popularity: "1.5M"
             }
         ];
         // Sample data for recent cards
         const recentData = [
             {
-                hashtag: "#Travel",
-                title: "Most beautiful destinations trending this season",
-                platform: "instagram",
                 posts: "5K",
-                trendType: "newest"
             },
             {
-                hashtag: "#Fashion",
-                title: "Streetwear trends going viral right now",
-                platform: "tiktok",
                 posts: "18K",
-                trendType: "hottest"
             }
         ];
-        // Sample data for recently viewed
-        const recentlyViewedData = [
-            {
-                hashtag: "#MusicTrends",
-                platform: "youtube",
-                viewed: "2 days ago"
-            },
-            {
-                hashtag: "#TechNews",
-                platform: "twitter",
-                viewed: "1 week ago"
-            }
-        ];
         // Function to generate platform icon
         function getPlatformIcon(platform) {
             const icons = {
-                twitter: '<i class="fab fa-twitter twitter-bg"></i>',
-                tiktok: '<i class="fab fa-tiktok tiktok-bg"></i>',
-                instagram: '<i class="fab fa-instagram instagram-bg"></i>',
-                youtube: '<i class="fab fa-youtube youtube-bg"></i>'
             };
             return icons[platform] || '<i class="fas fa-hashtag"></i>';
         }
@@ -471,13 +455,14 @@
             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';
                 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">
@@ -501,7 +486,7 @@
             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';
                 card.innerHTML = `
                     <div class="flex-shrink-0 mr-3">
                         <span class="platform-indicator ${getPlatformColor(item.platform)}"></span>
@@ -509,7 +494,7 @@
                     <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}</span>
                             <span class="capitalize">${item.trendType}</span>
                         </div>
                     </div>
@@ -518,37 +503,204 @@
             });
         }
-        // Function to render recently viewed items
-        function renderRecentlyViewed() {
-            const container = document.getElementById('recentlyViewedContainer');
             container.innerHTML = '';
-            recentlyViewedData.forEach(item => {
                 const element = document.createElement('div');
-                element.className = 'flex items-center p-2 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(item.platform)} flex items-center justify-center text-white">
-                            ${getPlatformIcon(item.platform)}
                         </div>
                     </div>
                     <div class="flex-1">
-                        <h4 class="font-medium text-sm line-clamp-1">${item.hashtag}</h4>
-                        <p class="text-gray-500 text-xs">Viewed ${item.viewed}</p>
                     </div>
                     <button class="text-gray-500">
                         <i class="fas fa-ellipsis-v"></i>
                     </button>
                 `;
                 container.appendChild(element);
             });
         }
         // Initialize the app
         function initApp() {
             renderTrendingCards();
             renderRecentCards();
-            renderRecentlyViewed();
         }
         // Tab switching functionality
@@ -575,40 +727,86 @@
                 // Scroll to top when switching tabs
                 document.getElementById('mainContent').scrollTo(0, 0);
             });
         });
-        // Hashtag search modal
-        const hashtagSearchBtn = document.getElementById('hashtagSearchBtn');
-        const hashtagModal = document.getElementById('hashtagModal');
-        const cancelHashtag = document.getElementById('cancelHashtag');
-        const searchHashtag = document.getElementById('searchHashtag');
-        const hashtagInput = document.getElementById('hashtagInput');
-        hashtagSearchBtn.addEventListener('click', function() {
-            hashtagModal.classList.remove('hidden');
         });
-        cancelHashtag.addEventListener('click', function() {
-            hashtagModal.classList.add('hidden');
         });
-        // Sort button selection
-        document.querySelectorAll('.sort-btn').forEach(btn => {
             btn.addEventListener('click', function() {
-                document.querySelectorAll('.sort-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');
             });
         });
-        // Type button selection
-        document.querySelectorAll('.type-btn').forEach(btn => {
             btn.addEventListener('click', function() {
-                document.querySelectorAll('.type-btn').forEach(b => {
                     b.classList.remove('bg-primary', 'text-white');
                     b.classList.add('bg-gray-200', 'text-gray-700');
                 });
@@ -617,62 +815,32 @@
             });
         });
-        // Search hashtag
-        searchHashtag.addEventListener('click', function() {
-            const hashtag = hashtagInput.value.trim();
-            if (!hashtag) return;
-            // Get selected sort option
-            const sortBtn = document.querySelector('.sort-btn.bg-primary');
-            const sort = sortBtn ? sortBtn.getAttribute('data-sort') : 'newest';
-            // Get selected type option
-            const typeBtn = document.querySelector('.type-btn.bg-primary');
-            const type = typeBtn ? typeBtn.getAttribute('data-type') : 'all';
-            hashtagModal.classList.add('hidden');
-            showToast(`Searching for ${hashtag} (${sort}, ${type})...`);
-            // Simulate search with timeout
-            setTimeout(() => {
-                // In a real app, this would fetch actual trending content
-                const container = document.getElementById('trendingCardsContainer');
-                const card = document.createElement('div');
-                card.className = 'trend-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer p-4';
-                // Random platform for demo
-                const platforms = ['twitter', 'tiktok', 'instagram', 'youtube'];
-                const randomPlatform = platforms[Math.floor(Math.random() * platforms.length)];
-                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(randomPlatform)}
-                                <span class="ml-1">${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> ${Math.floor(Math.random() * 1000)}K
-                        </span>
-                    </div>
-                    <h3 class="font-medium text-sm line-clamp-2 mb-3">Latest content for ${hashtag} sorted by ${sort} (${type})</h3>
-                    <div class="flex justify-between items-center text-xs text-gray-500">
-                        <span>${Math.floor(Math.random() * 100)}K posts</span>
-                        <span class="capitalize">${sort}</span>
-                    </div>
-                `;
-                // Insert at the top of the container
-                container.insertBefore(card, container.firstChild);
-                showToast(`Found results for ${hashtag}`);
-            }, 2000);
         });
         // Dark mode toggle
         const darkModeToggle = document.getElementById('darkModeToggle');
-        const darkModeToggleSetting = document.getElementById('darkModeToggleSetting');
         function toggleDarkMode() {
             document.body.classList.toggle('bg-gray-900');
@@ -691,36 +859,12 @@
         }
         darkModeToggle.addEventListener('click', toggleDarkMode);
-        darkModeToggleSetting.addEventListener('change', toggleDarkMode);
         // Check for saved dark mode preference
         if (localStorage.getItem('darkMode') === 'true') {
             toggleDarkMode();
-            darkModeToggleSetting.checked = true;
         }
-        // Settings modal
-        const settingsBtn = document.getElementById('settingsBtn');
-        const settingsModal = document.getElementById('settingsModal');
-        const closeSettings = document.getElementById('closeSettings');
-        settingsBtn.addEventListener('click', function() {
-            settingsModal.classList.remove('hidden');
-        });
-        closeSettings.addEventListener('click', function() {
-            settingsModal.classList.add('hidden');
-        });
-        // Library buttons
-        document.getElementById('savedBtn').addEventListener('click', function() {
-            showToast('Saved hashtags view would be shown here');
-        });
-        document.getElementById('historyBtn').addEventListener('click', function() {
-            showToast('History view would be shown here');
-        });
         // Toast notification function
         function showToast(message) {
             const toast = document.getElementById('toast');

         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">
             <!-- 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>
                 </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>
         <!-- 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>
         // 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>';
         }
             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">
             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 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>
             });
         }
+        // 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
                 // 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');
                 });
             });
         });
+        // 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');
         }
         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');

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 Remove videos and download links only keep the cards on the cards add a floating button to allow user input of a hashtag make the hashtag search for the newest trending to hottest trending content audio and video only display the newest or hottest in the card window
-Remove images for cards on use data

 Remove videos and download links only keep the cards on the cards add a floating button to allow user input of a hashtag make the hashtag search for the newest trending to hottest trending content audio and video only display the newest or hottest in the card window
+Remove images for cards on use data
+Modify the explorer button to search for trends modify the library to add a hashtag to save the search add a private Cryptocurrency token named DMIM it's a Bitcoin Cash CHIP Protocol token the user should be able to stake the tokens to the saved trend search and yield farm at 0.3% max correlate trends to token reference https://tokenexplorer.cash/?tokenId=81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9 and  https://app.cauldron.quest/swap/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9 and https://blockchair.com/bitcoin-cash/transaction/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9 add a verified green checkmark next to the tokento the saved search also make the main screen cards a little taller make the user interface very simple and efficient