Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Instagram Hashtag Generator | Boost Your Posts</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> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .hashtag-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .hashtag-chip:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .category-btn.active { | |
| background-color: #6366f1; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-50 to-blue-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <div class="floating inline-block mb-6"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-full p-4 shadow-lg"> | |
| <i class="fas fa-hashtag text-white text-4xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Instagram Hashtag Generator</h1> | |
| <p class="text-gray-600 max-w-md mx-auto">Generate high-performing hashtags to boost your Instagram reach</p> | |
| </div> | |
| <!-- Generator Section --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <label for="keyword" class="block text-gray-700 font-medium mb-2">Enter your keyword or topic</label> | |
| <div class="flex"> | |
| <input | |
| type="text" | |
| id="keyword" | |
| placeholder="e.g. travel, food, fashion" | |
| class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500" | |
| > | |
| <button | |
| id="generateBtn" | |
| class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-r-lg font-medium hover:opacity-90 transition-opacity" | |
| > | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Select categories</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition-colors" data-category="popular">Popular</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition-colors" data-category="niche">Niche</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition-colors" data-category="location">Location</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition-colors" data-category="branded">Branded</button> | |
| <button class="category-btn px-4 py-2 rounded-full border border-gray-300 hover:bg-gray-100 transition-colors" data-category="trending">Trending</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="text-gray-700 font-medium">Number of hashtags</label> | |
| <div class="flex items-center"> | |
| <button id="decrement" class="px-3 py-1 bg-gray-200 rounded-l-lg hover:bg-gray-300">-</button> | |
| <span id="count" class="px-4 py-1 bg-gray-100">30</span> | |
| <button id="increment" class="px-3 py-1 bg-gray-200 rounded-r-lg hover:bg-gray-300">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="resultsSection" class="hidden bg-white rounded-xl shadow-lg overflow-hidden mb-8 fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">Your Hashtags</h2> | |
| <button | |
| id="copyBtn" | |
| class="flex items-center gap-2 bg-purple-100 text-purple-700 px-4 py-2 rounded-lg hover:bg-purple-200 transition-colors" | |
| > | |
| <i class="fas fa-copy"></i> | |
| Copy All | |
| </button> | |
| </div> | |
| <div id="hashtagsContainer" class="flex flex-wrap gap-3 mb-6"></div> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <div class="flex items-start gap-3"> | |
| <div class="mt-1 text-blue-500"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-blue-800 mb-1">Pro Tip</h3> | |
| <p class="text-blue-700 text-sm">Instagram allows up to 30 hashtags per post. Mix popular and niche hashtags for better reach!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Hashtags Section --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden fade-in"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6">Popular Hashtag Categories</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('travel')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-purple-100 p-2 rounded-lg"> | |
| <i class="fas fa-umbrella-beach text-purple-600"></i> | |
| </div> | |
| <h3 class="font-medium">Travel</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#travel #wanderlust #adventure</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('food')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-red-100 p-2 rounded-lg"> | |
| <i class="fas fa-utensils text-red-600"></i> | |
| </div> | |
| <h3 class="font-medium">Food</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#foodie #foodporn #instafood</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('fashion')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-pink-100 p-2 rounded-lg"> | |
| <i class="fas fa-tshirt text-pink-600"></i> | |
| </div> | |
| <h3 class="font-medium">Fashion</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#fashion #style #ootd</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('fitness')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-green-100 p-2 rounded-lg"> | |
| <i class="fas fa-dumbbell text-green-600"></i> | |
| </div> | |
| <h3 class="font-medium">Fitness</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#fitness #workout #gym</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('photography')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-lg"> | |
| <i class="fas fa-camera text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Photography</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#photography #photo #picoftheday</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('art')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-yellow-100 p-2 rounded-lg"> | |
| <i class="fas fa-palette text-yellow-600"></i> | |
| </div> | |
| <h3 class="font-medium">Art</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#art #artist #creative</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('beauty')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-pink-100 p-2 rounded-lg"> | |
| <i class="fas fa-spa text-pink-600"></i> | |
| </div> | |
| <h3 class="font-medium">Beauty</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#beauty #makeup #skincare</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" onclick="quickGenerate('lifestyle')"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-lg"> | |
| <i class="fas fa-home text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Lifestyle</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">#lifestyle #life #dayinmylife</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const keywordInput = document.getElementById('keyword'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const hashtagsContainer = document.getElementById('hashtagsContainer'); | |
| const copyBtn = document.getElementById('copyBtn'); | |
| const countElement = document.getElementById('count'); | |
| const incrementBtn = document.getElementById('increment'); | |
| const decrementBtn = document.getElementById('decrement'); | |
| const categoryBtns = document.querySelectorAll('.category-btn'); | |
| // Variables | |
| let hashtagCount = 30; | |
| let selectedCategories = ['popular']; | |
| // Event Listeners | |
| generateBtn.addEventListener('click', generateHashtags); | |
| copyBtn.addEventListener('click', copyHashtags); | |
| incrementBtn.addEventListener('click', incrementCount); | |
| decrementBtn.addEventListener('click', decrementCount); | |
| categoryBtns.forEach(btn => { | |
| btn.addEventListener('click', toggleCategory); | |
| }); | |
| // Functions | |
| function generateHashtags() { | |
| const keyword = keywordInput.value.trim().toLowerCase(); | |
| if (!keyword) { | |
| alert('Please enter a keyword'); | |
| return; | |
| } | |
| // Clear previous results | |
| hashtagsContainer.innerHTML = ''; | |
| // Generate hashtags based on keyword and categories | |
| const hashtags = []; | |
| // Base hashtags from keyword | |
| hashtags.push(`#${keyword}`); | |
| hashtags.push(`#${keyword}s`); | |
| hashtags.push(`#${keyword}lover`); | |
| hashtags.push(`#${keyword}life`); | |
| hashtags.push(`#${keyword}time`); | |
| hashtags.push(`#${keyword}addict`); | |
| hashtags.push(`#${keyword}gram`); | |
| hashtags.push(`#${keyword}world`); | |
| // Add category-based hashtags | |
| if (selectedCategories.includes('popular')) { | |
| hashtags.push(...getPopularHashtags(keyword)); | |
| } | |
| if (selectedCategories.includes('niche')) { | |
| hashtags.push(...getNicheHashtags(keyword)); | |
| } | |
| if (selectedCategories.includes('location')) { | |
| hashtags.push(...getLocationHashtags()); | |
| } | |
| if (selectedCategories.includes('branded')) { | |
| hashtags.push(...getBrandedHashtags(keyword)); | |
| } | |
| if (selectedCategories.includes('trending')) { | |
| hashtags.push(...getTrendingHashtags(keyword)); | |
| } | |
| // Shuffle and limit to selected count | |
| const shuffled = shuffleArray(hashtags).slice(0, hashtagCount); | |
| // Display hashtags | |
| shuffled.forEach(hashtag => { | |
| const chip = document.createElement('div'); | |
| chip.className = 'hashtag-chip bg-gray-100 px-3 py-2 rounded-lg text-gray-800 cursor-pointer hover:bg-purple-100 hover:text-purple-800'; | |
| chip.textContent = hashtag; | |
| chip.addEventListener('click', () => { | |
| copyToClipboard(hashtag); | |
| chip.classList.add('bg-purple-100', 'text-purple-800'); | |
| setTimeout(() => { | |
| chip.classList.remove('bg-purple-100', 'text-purple-800'); | |
| }, 1000); | |
| }); | |
| hashtagsContainer.appendChild(chip); | |
| }); | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function copyHashtags() { | |
| const hashtags = Array.from(document.querySelectorAll('.hashtag-chip')) | |
| .map(chip => chip.textContent) | |
| .join(' '); | |
| copyToClipboard(hashtags); | |
| // Show feedback | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!'; | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| }, 2000); | |
| } | |
| function copyToClipboard(text) { | |
| navigator.clipboard.writeText(text).then(() => { | |
| console.log('Copied to clipboard'); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| function incrementCount() { | |
| if (hashtagCount < 30) { | |
| hashtagCount += 5; | |
| countElement.textContent = hashtagCount; | |
| } | |
| } | |
| function decrementCount() { | |
| if (hashtagCount > 5) { | |
| hashtagCount -= 5; | |
| countElement.textContent = hashtagCount; | |
| } | |
| } | |
| function toggleCategory(e) { | |
| const category = e.target.dataset.category; | |
| e.target.classList.toggle('active'); | |
| if (selectedCategories.includes(category)) { | |
| selectedCategories = selectedCategories.filter(c => c !== category); | |
| } else { | |
| selectedCategories.push(category); | |
| } | |
| } | |
| // Helper functions | |
| function shuffleArray(array) { | |
| for (let i = array.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [array[i], array[j]] = [array[j], array[i]]; | |
| } | |
| return array; | |
| } | |
| // Hashtag generation functions | |
| function getPopularHashtags(keyword) { | |
| const popular = [ | |
| '#instagood', '#instagram', '#love', '#photooftheday', | |
| '#fashion', '#beautiful', '#happy', '#cute', '#picofhteday', | |
| '#follow', '#followme', '#like4like', '#instadaily', '#me', | |
| '#selfie', '#summer', '#art', '#instalike', '#friends' | |
| ]; | |
| // Add keyword-specific popular hashtags | |
| if (keyword === 'travel') { | |
| popular.push('#travelgram', '#travelphotography', '#wanderlust', '#travelblogger'); | |
| } else if (keyword === 'food') { | |
| popular.push('#foodphotography', '#foodblogger', '#foodstagram', '#yummy'); | |
| } else if (keyword === 'fashion') { | |
| popular.push('#fashionblogger', '#fashionista', '#streetstyle', '#whatiwore'); | |
| } | |
| return popular; | |
| } | |
| function getNicheHashtags(keyword) { | |
| const niche = []; | |
| if (keyword === 'travel') { | |
| niche.push('#solotravel', '#travelcouple', '#traveldiaries', '#passportready'); | |
| } else if (keyword === 'food') { | |
| niche.push('#foodgasm', '#eeeeeats', '#foodlover', '#homemade'); | |
| } else if (keyword === 'fashion') { | |
| niche.push('#outfitinspo', '#slowfashion', '#sustainablefashion', '#thrifted'); | |
| } else { | |
| niche.push(`#${keyword}community`, `#${keyword}oftheday`, `#${keyword}passion`, `#${keyword}inspo`); | |
| } | |
| return niche; | |
| } | |
| function getLocationHashtags() { | |
| return [ | |
| '#london', '#newyork', '#paris', '#tokyo', | |
| '#dubai', '#berlin', '#barcelona', '#sydney' | |
| ]; | |
| } | |
| function getBrandedHashtags(keyword) { | |
| return [ | |
| `#my${keyword}`, `#best${keyword}`, `#${keyword}goals`, | |
| `#${keyword}oftheday`, `#${keyword}addict` | |
| ]; | |
| } | |
| function getTrendingHashtags(keyword) { | |
| const trending = [ | |
| '#trending', '#viral', '#explorepage', '#fyp', '#foryou', | |
| '#reels', '#reelitfeelit', '#instareels', '#igtv', | |
| '#reelsinstagram', '#reelsvideo', '#viralreels' | |
| ]; | |
| if (keyword === 'travel') { | |
| trending.push('#travel2023', '#postpandemicadventures'); | |
| } else if (keyword === 'food') { | |
| trending.push('#foodtrends2023', '#plantbased'); | |
| } | |
| return trending; | |
| } | |
| // Quick generate function for popular categories | |
| window.quickGenerate = function(category) { | |
| keywordInput.value = category; | |
| // Reset categories to only popular | |
| categoryBtns.forEach(btn => { | |
| btn.classList.remove('active'); | |
| if (btn.dataset.category === 'popular') { | |
| btn.classList.add('active'); | |
| } | |
| }); | |
| selectedCategories = ['popular']; | |
| generateHashtags(); | |
| }; | |
| }); | |
| </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=Happydekind/ig-hashtag" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |