| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>InstaGhost - Anonymous Instagram Viewer</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| .profile-pic { |
| width: 100px; |
| height: 100px; |
| object-fit: cover; |
| border: 3px solid white; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .story-ring { |
| width: 110px; |
| height: 110px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); |
| } |
| .post-image { |
| height: 300px; |
| object-fit: cover; |
| transition: transform 0.3s ease; |
| } |
| .post-image:hover { |
| transform: scale(1.03); |
| } |
| .tab-active { |
| border-bottom: 3px solid #dc2743; |
| color: #dc2743; |
| font-weight: 600; |
| } |
| .animate-pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| .story-viewer { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.9); |
| z-index: 1000; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s ease; |
| } |
| .story-viewer.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| .story-content { |
| width: 90%; |
| max-width: 400px; |
| height: 70vh; |
| background: #000; |
| border-radius: 10px; |
| overflow: hidden; |
| position: relative; |
| } |
| .story-progress { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| right: 10px; |
| height: 3px; |
| background: rgba(255, 255, 255, 0.3); |
| border-radius: 3px; |
| } |
| .story-progress-bar { |
| height: 100%; |
| background: white; |
| border-radius: 3px; |
| width: 0%; |
| transition: width 0.1s linear; |
| } |
| .story-close { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| color: white; |
| font-size: 24px; |
| cursor: pointer; |
| z-index: 10; |
| } |
| .story-image { |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| } |
| .download-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.7); |
| z-index: 1000; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s ease; |
| } |
| .download-modal.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| .download-content { |
| background: white; |
| padding: 20px; |
| border-radius: 10px; |
| max-width: 400px; |
| width: 90%; |
| } |
| .download-options { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| margin-top: 20px; |
| } |
| .download-btn { |
| padding: 10px; |
| border-radius: 5px; |
| text-align: center; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
| .download-btn:hover { |
| background: #f0f0f0; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-100"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-instagram text-3xl"></i> |
| <h1 class="text-2xl font-bold">InstaGhost</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-gray-200">Home</a> |
| <a href="#" class="hover:text-gray-200">Features</a> |
| <a href="#" class="hover:text-gray-200">FAQ</a> |
| <a href="#" class="hover:text-gray-200">Contact</a> |
| </nav> |
| <button class="md:hidden text-2xl" id="mobileMenuBtn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="md:hidden bg-gray-800 text-white hidden" id="mobileMenu"> |
| <div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> |
| <a href="#" class="py-2 hover:text-gray-300">Home</a> |
| <a href="#" class="py-2 hover:text-gray-300">Features</a> |
| <a href="#" class="py-2 hover:text-gray-300">FAQ</a> |
| <a href="#" class="py-2 hover:text-gray-300">Contact</a> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="glass-effect rounded-xl p-8 mb-10 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">View Instagram Profiles Anonymously</h2> |
| <p class="text-xl mb-8 text-gray-100">Browse stories, posts, and highlights without leaving a trace</p> |
| |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6"> |
| <div class="flex flex-col md:flex-row gap-4"> |
| <input |
| type="text" |
| id="usernameInput" |
| placeholder="Enter Instagram username" |
| class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" |
| > |
| <button id="searchBtn" class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition"> |
| <i class="fas fa-search mr-2"></i> View Profile |
| </button> |
| </div> |
| <p class="text-sm text-gray-500 mt-3">We don't store any data or notify the profile owner</p> |
| </div> |
| </section> |
|
|
| |
| <section id="profileSection" class="mb-16 hidden"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> |
| |
| <div class="p-6 md:p-8 flex flex-col md:flex-row items-center md:items-start gap-6"> |
| <div class="story-ring"> |
| <img id="profilePic" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="profile-pic rounded-full"> |
| </div> |
| <div class="flex-grow"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
| <h3 id="profileUsername" class="text-2xl font-bold">travel_explorer</h3> |
| <div class="flex space-x-3 mt-3 md:mt-0"> |
| <button id="downloadBtn" class="bg-gray-100 px-4 py-2 rounded-lg font-medium hover:bg-gray-200"> |
| <i class="fas fa-download mr-2"></i> Save |
| </button> |
| <button id="viewStoriesBtn" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90"> |
| <i class="fas fa-eye mr-2"></i> View Stories |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex space-x-8 mb-4"> |
| <div class="text-center"> |
| <span id="postCount" class="block font-bold">1,234</span> |
| <span class="text-gray-500 text-sm">posts</span> |
| </div> |
| <div class="text-center"> |
| <span id="followerCount" class="block font-bold">45.6K</span> |
| <span class="text-gray-500 text-sm">followers</span> |
| </div> |
| <div class="text-center"> |
| <span id="followingCount" class="block font-bold">342</span> |
| <span class="text-gray-500 text-sm">following</span> |
| </div> |
| </div> |
| |
| <div> |
| <p id="profileName" class="font-semibold">Travel Blogger ✈️</p> |
| <p id="profileBio" class="text-gray-600">Exploring the world one destination at a time 🌍</p> |
| <p id="profileLocation" class="text-gray-600">📍 Currently in Bali, Indonesia</p> |
| <a id="profileLink" href="#" class="text-blue-500">www.travel-explorer.com</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-b border-gray-200"> |
| <div class="flex justify-center"> |
| <button id="postsTab" class="px-6 py-4 font-medium tab-active"> |
| <i class="fas fa-grid mr-2"></i> Posts |
| </button> |
| <button id="savedTab" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-bookmark mr-2"></i> Saved |
| </button> |
| <button id="taggedTab" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-user-tag mr-2"></i> Tagged |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="postsGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1 p-1"> |
| |
| </div> |
|
|
| |
| <div id="savedGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1 p-1 hidden"> |
| |
| </div> |
|
|
| |
| <div id="taggedGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-1 p-1 hidden"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="featuresSection" class="mb-16"> |
| <h2 class="text-2xl font-bold mb-8 text-center">Why Choose InstaGhost?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-pink-500 text-4xl mb-4"> |
| <i class="fas fa-user-secret"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">100% Anonymous</h3> |
| <p class="text-gray-600">No login required. Your identity remains completely hidden from the profile owner.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-pink-500 text-4xl mb-4"> |
| <i class="fas fa-lock"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Secure Browsing</h3> |
| <p class="text-gray-600">Encrypted connections ensure your activity stays private and secure.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition"> |
| <div class="text-pink-500 text-4xl mb-4"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Fast Loading</h3> |
| <p class="text-gray-600">Optimized servers deliver content quickly without buffering or delays.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-lg p-8"> |
| <h2 class="text-2xl font-bold mb-8 text-center">How It Works</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <span class="text-pink-500 text-2xl font-bold">1</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Enter Username</h3> |
| <p class="text-gray-600">Type the Instagram username you want to view anonymously in the search box.</p> |
| </div> |
| <div class="flex flex-col items-center text-center"> |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <span class="text-pink-500 text-2xl font-bold">2</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">View Content</h3> |
| <p class="text-gray-600">Browse through the profile's posts, stories, and highlights without logging in.</p> |
| </div> |
| <div class="flex flex-col items-center text-center"> |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
| <span class="text-pink-500 text-2xl font-bold">3</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Stay Anonymous</h3> |
| <p class="text-gray-600">The profile owner won't receive any notification that you viewed their content.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white rounded-xl p-8 text-center"> |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to Browse Anonymously?</h2> |
| <p class="text-xl mb-8">Start exploring Instagram profiles without leaving a trace</p> |
| <button id="ctaBtn" class="bg-white text-pink-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition animate-pulse"> |
| <i class="fas fa-user-secret mr-2"></i> Try It Now |
| </button> |
| </section> |
| </main> |
|
|
| |
| <div class="story-viewer" id="storyViewer"> |
| <div class="story-content"> |
| <div class="story-progress"> |
| <div class="story-progress-bar" id="storyProgress"></div> |
| </div> |
| <div class="story-close" id="storyClose"> |
| <i class="fas fa-times"></i> |
| </div> |
| <img id="storyImage" src="" alt="Story" class="story-image"> |
| </div> |
| </div> |
|
|
| |
| <div class="download-modal" id="downloadModal"> |
| <div class="download-content"> |
| <h3 class="text-xl font-bold">Download Options</h3> |
| <p class="text-gray-600 mt-2">Choose how you want to save this content</p> |
| |
| <div class="download-options"> |
| <div class="download-btn border border-gray-300" id="downloadImageBtn"> |
| <i class="fas fa-image mr-2"></i> Download Image |
| </div> |
| <div class="download-btn border border-gray-300" id="downloadVideoBtn"> |
| <i class="fas fa-video mr-2"></i> Download Video |
| </div> |
| <div class="download-btn border border-gray-300" id="downloadProfileBtn"> |
| <i class="fas fa-user mr-2"></i> Download Profile Info |
| </div> |
| <div class="download-btn bg-gray-100 text-gray-500" id="cancelDownloadBtn"> |
| Cancel |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fab fa-instagram mr-2"></i> InstaGhost |
| </h3> |
| <p class="text-gray-400">The safest way to browse Instagram content anonymously.</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Disclaimer</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Contact Us</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> |
| <span class="text-gray-400">support@instaghost.com</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fab fa-twitter mr-2 text-gray-400"></i> |
| <span class="text-gray-400">@instaghost</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
| <p>© 2023 InstaGhost. All rights reserved. This is a demo project only.</p> |
| <p class="text-xs mt-2">Note: This is a frontend demonstration only. No actual Instagram data is accessed or displayed.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const sampleProfiles = { |
| "travel_explorer": { |
| username: "travel_explorer", |
| name: "Travel Blogger ✈️", |
| bio: "Exploring the world one destination at a time 🌍", |
| location: "📍 Currently in Bali, Indonesia", |
| link: "www.travel-explorer.com", |
| profilePic: "https://randomuser.me/api/portraits/women/44.jpg", |
| posts: 1234, |
| followers: "45.6K", |
| following: 342, |
| postsData: [ |
| { id: 1, image: "https://source.unsplash.com/random/600x600/?travel,beach", likes: 1200, comments: 87 }, |
| { id: 2, image: "https://source.unsplash.com/random/600x600/?travel,mountain", likes: 2400, comments: 134 }, |
| { id: 3, image: "https://source.unsplash.com/random/600x600/?travel,city", likes: 3100, comments: 212 }, |
| { id: 4, image: "https://source.unsplash.com/random/600x600/?travel,food", likes: 876, comments: 54 }, |
| { id: 5, image: "https://source.unsplash.com/random/600x600/?travel,desert", likes: 1800, comments: 97 }, |
| { id: 6, image: "https://source.unsplash.com/random/600x600/?travel,waterfall", likes: 2700, comments: 156 } |
| ], |
| savedData: [ |
| { id: 7, image: "https://source.unsplash.com/random/600x600/?travel,hotel", likes: 3200, comments: 198 }, |
| { id: 8, image: "https://source.unsplash.com/random/600x600/?travel,airport", likes: 1500, comments: 76 }, |
| { id: 9, image: "https://source.unsplash.com/random/600x600/?travel,sunset", likes: 4200, comments: 312 } |
| ], |
| taggedData: [ |
| { id: 10, image: "https://source.unsplash.com/random/600x600/?travel,friend", likes: 980, comments: 43 }, |
| { id: 11, image: "https://source.unsplash.com/random/600x600/?travel,group", likes: 2100, comments: 127 } |
| ], |
| stories: [ |
| "https://source.unsplash.com/random/800x1400/?travel,adventure", |
| "https://source.unsplash.com/random/800x1400/?travel,island", |
| "https://source.unsplash.com/random/800x1400/?travel,culture" |
| ] |
| }, |
| "food_lover": { |
| username: "food_lover", |
| name: "Food Enthusiast 🍔", |
| bio: "Sharing my culinary adventures around the world 🍽️", |
| location: "📍 New York City", |
| link: "www.foodlover.com", |
| profilePic: "https://randomuser.me/api/portraits/men/32.jpg", |
| posts: 856, |
| followers: "32.1K", |
| following: 421, |
| postsData: [ |
| { id: 1, image: "https://source.unsplash.com/random/600x600/?food,pizza", likes: 3200, comments: 145 }, |
| { id: 2, image: "https://source.unsplash.com/random/600x600/?food,burger", likes: 2800, comments: 98 }, |
| { id: 3, image: "https://source.unsplash.com/random/600x600/?food,pasta", likes: 4100, comments: 201 }, |
| { id: 4, image: "https://source.unsplash.com/random/600x600/?food,sushi", likes: 3500, comments: 167 }, |
| { id: 5, image: "https://source.unsplash.com/random/600x600/?food,dessert", likes: 5200, comments: 312 }, |
| { id: 6, image: "https://source.unsplash.com/random/600x600/?food,breakfast", likes: 2100, comments: 87 } |
| ], |
| savedData: [ |
| { id: 7, image: "https://source.unsplash.com/random/600x600/?food,recipe", likes: 1800, comments: 76 }, |
| { id: 8, image: "https://source.unsplash.com/random/600x600/?food,cooking", likes: 2400, comments: 112 } |
| ], |
| taggedData: [ |
| { id: 9, image: "https://source.unsplash.com/random/600x600/?food,restaurant", likes: 3100, comments: 156 }, |
| { id: 10, image: "https://source.unsplash.com/random/600x600/?food,chef", likes: 4200, comments: 234 } |
| ], |
| stories: [ |
| "https://source.unsplash.com/random/800x1400/?food,gourmet", |
| "https://source.unsplash.com/random/800x1400/?food,streetfood", |
| "https://source.unsplash.com/random/800x1400/?food,michelin" |
| ] |
| }, |
| "fitness_guru": { |
| username: "fitness_guru", |
| name: "Fitness Coach 💪", |
| bio: "Helping you achieve your fitness goals | Online coaching available", |
| location: "📍 Los Angeles", |
| link: "www.fitwithguru.com", |
| profilePic: "https://randomuser.me/api/portraits/women/68.jpg", |
| posts: 543, |
| followers: "78.3K", |
| following: 289, |
| postsData: [ |
| { id: 1, image: "https://source.unsplash.com/random/600x600/?fitness,gym", likes: 5200, comments: 321 }, |
| { id: 2, image: "https://source.unsplash.com/random/600x600/?fitness,workout", likes: 4800, comments: 287 }, |
| { id: 3, image: "https://source.unsplash.com/random/600x600/?fitness,yoga", likes: 6100, comments: 412 }, |
| { id: 4, image: "https://source.unsplash.com/random/600x600/?fitness,running", likes: 4300, comments: 256 }, |
| { id: 5, image: "https://source.unsplash.com/random/600x600/?fitness,weights", likes: 3900, comments: 198 }, |
| { id: 6, image: "https://source.unsplash.com/random/600x600/?fitness,outdoor", likes: 5700, comments: 345 } |
| ], |
| savedData: [ |
| { id: 7, image: "https://source.unsplash.com/random/600x600/?fitness,nutrition", likes: 3200, comments: 187 }, |
| { id: 8, image: "https://source.unsplash.com/random/600x600/?fitness,transformation", likes: 6800, comments: 512 } |
| ], |
| taggedData: [ |
| { id: 9, image: "https://source.unsplash.com/random/600x600/?fitness,group", likes: 4100, comments: 234 }, |
| { id: 10, image: "https://source.unsplash.com/random/600x600/?fitness,event", likes: 2900, comments: 156 } |
| ], |
| stories: [ |
| "https://source.unsplash.com/random/800x1400/?fitness,motivation", |
| "https://source.unsplash.com/random/800x1400/?fitness,progress", |
| "https://source.unsplash.com/random/800x1400/?fitness,training" |
| ] |
| } |
| }; |
| |
| |
| let currentProfile = null; |
| let currentStoryIndex = 0; |
| let storyInterval = null; |
| let currentDownloadType = null; |
| |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| const usernameInput = document.getElementById('usernameInput'); |
| const searchBtn = document.getElementById('searchBtn'); |
| const profileSection = document.getElementById('profileSection'); |
| const featuresSection = document.getElementById('featuresSection'); |
| const profilePic = document.getElementById('profilePic'); |
| const profileUsername = document.getElementById('profileUsername'); |
| const profileName = document.getElementById('profileName'); |
| const profileBio = document.getElementById('profileBio'); |
| const profileLocation = document.getElementById('profileLocation'); |
| const profileLink = document.getElementById('profileLink'); |
| const postCount = document.getElementById('postCount'); |
| const followerCount = document.getElementById('followerCount'); |
| const followingCount = document.getElementById('followingCount'); |
| const postsGrid = document.getElementById('postsGrid'); |
| const savedGrid = document.getElementById('savedGrid'); |
| const taggedGrid = document.getElementById('taggedGrid'); |
| const postsTab = document.getElementById('postsTab'); |
| const savedTab = document.getElementById('savedTab'); |
| const taggedTab = document.getElementById('taggedTab'); |
| const viewStoriesBtn = document.getElementById('viewStoriesBtn'); |
| const downloadBtn = document.getElementById('downloadBtn'); |
| const storyViewer = document.getElementById('storyViewer'); |
| const storyImage = document.getElementById('storyImage'); |
| const storyProgress = document.getElementById('storyProgress'); |
| const storyClose = document.getElementById('storyClose'); |
| const downloadModal = document.getElementById('downloadModal'); |
| const downloadImageBtn = document.getElementById('downloadImageBtn'); |
| const downloadVideoBtn = document.getElementById('downloadVideoBtn'); |
| const downloadProfileBtn = document.getElementById('downloadProfileBtn'); |
| const cancelDownloadBtn = document.getElementById('cancelDownloadBtn'); |
| const ctaBtn = document.getElementById('ctaBtn'); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| mobileMenuBtn.addEventListener('click', toggleMobileMenu); |
| |
| |
| searchBtn.addEventListener('click', handleSearch); |
| usernameInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| handleSearch(); |
| } |
| }); |
| |
| |
| ctaBtn.addEventListener('click', function() { |
| usernameInput.focus(); |
| }); |
| |
| |
| postsTab.addEventListener('click', () => switchTab('posts')); |
| savedTab.addEventListener('click', () => switchTab('saved')); |
| taggedTab.addEventListener('click', () => switchTab('tagged')); |
| |
| |
| viewStoriesBtn.addEventListener('click', viewStories); |
| storyClose.addEventListener('click', closeStoryViewer); |
| |
| |
| downloadBtn.addEventListener('click', openDownloadModal); |
| downloadImageBtn.addEventListener('click', () => downloadContent('image')); |
| downloadVideoBtn.addEventListener('click', () => downloadContent('video')); |
| downloadProfileBtn.addEventListener('click', () => downloadContent('profile')); |
| cancelDownloadBtn.addEventListener('click', closeDownloadModal); |
| }); |
| |
| |
| function toggleMobileMenu() { |
| mobileMenu.classList.toggle('hidden'); |
| } |
| |
| function handleSearch() { |
| const username = usernameInput.value.trim().toLowerCase(); |
| |
| if (username === '') { |
| alert('Please enter an Instagram username'); |
| return; |
| } |
| |
| if (sampleProfiles[username]) { |
| currentProfile = sampleProfiles[username]; |
| displayProfile(currentProfile); |
| profileSection.classList.remove('hidden'); |
| featuresSection.classList.add('hidden'); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } else { |
| alert('Profile not found in our demo data. Try "travel_explorer", "food_lover", or "fitness_guru"'); |
| } |
| } |
| |
| function displayProfile(profile) { |
| profilePic.src = profile.profilePic; |
| profileUsername.textContent = profile.username; |
| profileName.textContent = profile.name; |
| profileBio.textContent = profile.bio; |
| profileLocation.textContent = profile.location; |
| profileLink.href = profile.link; |
| profileLink.textContent = profile.link; |
| postCount.textContent = profile.posts.toLocaleString(); |
| followerCount.textContent = profile.followers; |
| followingCount.textContent = profile.following; |
| |
| |
| postsGrid.innerHTML = ''; |
| savedGrid.innerHTML = ''; |
| taggedGrid.innerHTML = ''; |
| |
| |
| profile.postsData.forEach(post => { |
| const postElement = createPostElement(post); |
| postsGrid.appendChild(postElement); |
| }); |
| |
| |
| profile.savedData.forEach(post => { |
| const postElement = createPostElement(post); |
| savedGrid.appendChild(postElement); |
| }); |
| |
| |
| profile.taggedData.forEach(post => { |
| const postElement = createPostElement(post); |
| taggedGrid.appendChild(postElement); |
| }); |
| |
| |
| switchTab('posts'); |
| } |
| |
| function createPostElement(post) { |
| const postDiv = document.createElement('div'); |
| postDiv.className = 'relative group'; |
| |
| const img = document.createElement('img'); |
| img.src = post.image; |
| img.alt = 'Post'; |
| img.className = 'w-full post-image'; |
| |
| const overlay = document.createElement('div'); |
| overlay.className = 'absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition'; |
| |
| const stats = document.createElement('div'); |
| stats.className = 'text-white flex space-x-4'; |
| |
| const likes = document.createElement('span'); |
| likes.innerHTML = `<i class="fas fa-heart mr-1"></i> ${post.likes.toLocaleString()}`; |
| |
| const comments = document.createElement('span'); |
| comments.innerHTML = `<i class="fas fa-comment mr-1"></i> ${post.comments.toLocaleString()}`; |
| |
| stats.appendChild(likes); |
| stats.appendChild(comments); |
| overlay.appendChild(stats); |
| postDiv.appendChild(img); |
| postDiv.appendChild(overlay); |
| |
| |
| postDiv.addEventListener('click', () => { |
| alert(`Would normally open full post view for post ID: ${post.id}`); |
| }); |
| |
| return postDiv; |
| } |
| |
| function switchTab(tab) { |
| |
| postsTab.classList.remove('tab-active', 'text-pink-600'); |
| postsTab.classList.add('text-gray-500'); |
| savedTab.classList.remove('tab-active', 'text-pink-600'); |
| savedTab.classList.add('text-gray-500'); |
| taggedTab.classList.remove('tab-active', 'text-pink-600'); |
| taggedTab.classList.add('text-gray-500'); |
| |
| |
| postsGrid.classList.add('hidden'); |
| savedGrid.classList.add('hidden'); |
| taggedGrid.classList.add('hidden'); |
| |
| |
| switch(tab) { |
| case 'posts': |
| postsTab.classList.add('tab-active', 'text-pink-600'); |
| postsTab.classList.remove('text-gray-500'); |
| postsGrid.classList.remove('hidden'); |
| break; |
| case 'saved': |
| savedTab.classList.add('tab-active', 'text-pink-600'); |
| savedTab.classList.remove('text-gray-500'); |
| savedGrid.classList.remove('hidden'); |
| break; |
| case 'tagged': |
| taggedTab.classList.add('tab-active', 'text-pink-600'); |
| taggedTab.classList.remove('text-gray-500'); |
| taggedGrid.classList.remove('hidden'); |
| break; |
| } |
| } |
| |
| function viewStories() { |
| if (!currentProfile || !currentProfile.stories || currentProfile.stories.length === 0) { |
| alert('No stories available for this profile'); |
| return; |
| } |
| |
| currentStoryIndex = 0; |
| storyImage.src = currentProfile.stories[currentStoryIndex]; |
| storyViewer.classList.add('active'); |
| |
| |
| startStoryProgress(); |
| |
| |
| document.addEventListener('keydown', handleStoryKeyboardNav); |
| } |
| |
| function startStoryProgress() { |
| |
| storyProgress.style.width = '0%'; |
| |
| |
| if (storyInterval) { |
| clearInterval(storyInterval); |
| } |
| |
| |
| let progress = 0; |
| storyInterval = setInterval(() => { |
| progress += 1; |
| storyProgress.style.width = `${progress}%`; |
| |
| if (progress >= 100) { |
| nextStory(); |
| } |
| }, 50); |
| } |
| |
| function nextStory() { |
| clearInterval(storyInterval); |
| |
| if (currentStoryIndex < currentProfile.stories.length - 1) { |
| currentStoryIndex++; |
| storyImage.src = currentProfile.stories[currentStoryIndex]; |
| startStoryProgress(); |
| } else { |
| closeStoryViewer(); |
| } |
| } |
| |
| function prevStory() { |
| clearInterval(storyInterval); |
| |
| if (currentStoryIndex > 0) { |
| currentStoryIndex--; |
| storyImage.src = currentProfile.stories[currentStoryIndex]; |
| startStoryProgress(); |
| } |
| } |
| |
| function closeStoryViewer() { |
| clearInterval(storyInterval); |
| storyViewer.classList.remove('active'); |
| document.removeEventListener('keydown', handleStoryKeyboardNav); |
| } |
| |
| function handleStoryKeyboardNav(e) { |
| if (e.key === 'ArrowRight') { |
| nextStory(); |
| } else if (e.key === 'ArrowLeft') { |
| prevStory(); |
| } else if (e.key === 'Escape') { |
| closeStoryViewer(); |
| } |
| } |
| |
| function openDownloadModal() { |
| downloadModal.classList.add('active'); |
| } |
| |
| function closeDownloadModal() { |
| downloadModal.classList.remove('active'); |
| } |
| |
| function downloadContent(type) { |
| closeDownloadModal(); |
| |
| switch(type) { |
| case 'image': |
| |
| alert('Downloading profile image...'); |
| simulateDownload(`${currentProfile.username}_profile.jpg`); |
| break; |
| case 'video': |
| |
| alert('Downloading profile highlights video...'); |
| simulateDownload(`${currentProfile.username}_highlights.mp4`); |
| break; |
| case 'profile': |
| |
| alert('Downloading profile information...'); |
| const profileText = ` |
| Username: ${currentProfile.username} |
| Name: ${currentProfile.name} |
| Bio: ${currentProfile.bio} |
| Posts: ${currentProfile.posts} |
| Followers: ${currentProfile.followers} |
| Following: ${currentProfile.following} |
| `; |
| simulateDownload(`${currentProfile.username}_info.txt`, profileText); |
| break; |
| } |
| } |
| |
| function simulateDownload(filename, content = null) { |
| |
| console.log(`Simulating download of ${filename}`); |
| if (content) { |
| console.log(`File content:\n${content}`); |
| } |
| } |
| </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=Tiko933/tiko" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
