Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstaGrowth - Follower Booster</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Header -->
<div class="text-center mb-12">
<div class="inline-flex items-center bg-white/20 backdrop-blur-lg rounded-full p-4 mb-6">
<i class="fas fa-rocket text-3xl text-yellow-400 mr-4"></i>
<h1 class="text-4xl font-bold text-white drop-shadow-lg">InstaGrowth</h1>
</div>
<p class="text-xl text-white/90 max-w-2xl mx-auto">AI-powered Instagram growth dashboard. Get 10x more followers with data-driven insights.</p>
</div>
<div class="grid lg:grid-cols-2 gap-8 mb-8">
<!-- Connect Instagram -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30">
<h2 class="text-2xl font-bold text-white mb-6 flex items-center">
<i class="fab fa-instagram text-3xl text-pink-400 mr-3"></i>
Connect Instagram
</h2>
<div id="connectSection">
<button id="connectBtn" class="w-full bg-gradient-to-r from-pink-500 to-purple-600 text-white py-4 px-8 rounded-2xl font-semibold text-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-2xl hover:shadow-pink-500/25 flex items-center justify-center">
<i class="fab fa-instagram mr-3"></i>
Connect Your Instagram Account
</button>
<p class="text-white/70 mt-4 text-sm text-center">Secure connection via Instagram Basic Display API</p>
</div>
<div id="profileSection" class="hidden mt-6">
<div class="flex items-center space-x-4 mb-6 p-4 bg-white/10 rounded-2xl">
<img id="profilePic" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" src="">
<div>
<h3 id="username" class="text-2xl font-bold text-white"></h3>
<p id="bio" class="text-white/80"></p>
</div>
</div>
<div class="grid grid-cols-3 gap-4 text-center">
<div class="bg-white/10 p-4 rounded-xl">
<div id="followers" class="text-2xl font-bold text-white">0</div>
<div class="text-white/70 text-sm">Followers</div>
</div>
<div class="bg-white/10 p-4 rounded-xl">
<div id="following" class="text-2xl font-bold text-white">0</div>
<div class="text-white/70 text-sm">Following</div>
</div>
<div class="bg-white/10 p-4 rounded-xl">
<div id="posts" class="text-2xl font-bold text-white">0</div>
<div class="text-white/70 text-sm">Posts</div>
</div>
</div>
</div>
</div>
<!-- Quick Stats -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30">
<h2 class="text-2xl font-bold text-white mb-6">Growth Stats</h2>
<div class="space-y-4">
<div class="flex justify-between items-center p-4 bg-white/10 rounded-xl">
<span class="text-white font-semibold">Daily Growth</span>
<div class="flex items-center">
<span id="dailyGrowth" class="text-2xl font-bold text-green-400">+47</span>
<i class="fas fa-arrow-up ml-2 text-green-400"></i>
</div>
</div>
<div class="flex justify-between items-center p-4 bg-white/10 rounded-xl">
<span class="text-white font-semibold">Best Post Time</span>
<span id="bestTime" class="text-2xl font-bold text-yellow-400">7 PM</span>
</div>
<div class="flex justify-between items-center p-4 bg-white/10 rounded-xl">
<span class="text-white font-semibold">Engagement Rate</span>
<span id="engagementRate" class="text-2xl font-bold text-blue-400">4.2%</span>
</div>
</div>
</div>
</div>
<!-- Analytics Charts -->
<div class="grid lg:grid-cols-2 gap-8 mb-8">
<!-- Follower Growth Chart -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30">
<h3 class="text-xl font-bold text-white mb-6">Follower Growth</h3>
<canvas id="growthChart" height="200"></canvas>
</div>
<!-- Engagement Chart -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30">
<h3 class="text-xl font-bold text-white mb-6">Engagement by Hour</h3>
<canvas id="engagementChart" height="200"></canvas>
</div>
</div>
<!-- Actionable Insights -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30">
<h2 class="text-2xl font-bold text-white mb-8 flex items-center">
<i class="fas fa-lightbulb text-3xl text-yellow-400 mr-3"></i>
AI Growth Recommendations
</h2>
<div id="recommendations" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Recommendations will be populated by JS -->
</div>
</div>
<!-- Content Generator -->
<div class="bg-white/20 backdrop-blur-xl rounded-3xl p-8 border border-white/30 mt-8">
<h2 class="text-2xl font-bold text-white mb-8 flex items-center">
<i class="fas fa-magic text-3xl text-purple-400 mr-3"></i>
AI Content Generator
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-white font-semibold mb-3">Content Type</label>
<select id="contentType" class="w-full p-4 rounded-xl bg-white/10 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="caption">Caption Ideas</option>
<option value="hashtag">Hashtag Strategy</option>
<option value="story">Story Ideas</option>
<option value="reel">Reel Concepts</option>
</select>
</div>
<div>
<label class="block text-white font-semibold mb-3">Your Niche</label>
<input id="niche" type="text" placeholder="Fitness, Fashion, Tech..." class="w-full p-4 rounded-xl bg-white/10 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" value="Fitness">
</div>
</div>
<button id="generateContent" class="mt-6 w-full bg-gradient-to-r from-green-500 to-blue-600 text-white py-4 px-8 rounded-2xl font-semibold text-lg hover:from-green-600 hover:to-blue-700 transition-all duration-300 shadow-2xl">
<i class="fas fa-sparkles mr-2"></i>Generate Content Ideas
</button>
<div id="contentOutput" class="mt-6 hidden space-y-4"></div>
</div>
</div>
<script>
// Demo data - replace with real Instagram API calls
const demoData = {
profile: {
pic: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
username: '@fitnessguru',
bio: 'Fitness Coach | Helping you get shredded 💪',
followers: 1247,
following: 324,
posts: 89
},
growth: [1024, 1056, 1089, 1123, 1187, 1247],
engagement: [12, 45, 78, 23, 67, 89, 112, 56, 34, 78, 123, 156, 89, 45, 67, 134, 89, 156, 201, 178, 234, 267, 289, 312]
};
// Charts
let growthChart, engagementChart;
// Initialize app
document.addEventListener('DOMContentLoaded', function() {
setupEventListeners();
initCharts();
loadDemoData();
});
function setupEventListeners() {
document.getElementById('connectBtn').addEventListener('click', connectInstagram);
document.getElementById('generateContent').addEventListener('click', generateContent);
}
function connectInstagram() {
// In production, redirect to Instagram OAuth
document.getElementById('connectSection').classList.add('hidden');
document.getElementById('profileSection').classList.remove('hidden');
loadDemoData();
}
function loadDemoData() {
// Load profile data
document.getElementById('profilePic').src = demoData.profile.pic;
document.getElementById('username').textContent = demoData.profile.username;
document.getElementById('bio').textContent = demoData.profile.bio;
document.getElementById('followers').textContent = demoData.profile.followers.toLocaleString();
document.getElementById('following').textContent = demoData.profile.following.toLocaleString();
document.getElementById('posts').textContent = demoData.profile.posts.toLocaleString();
// Update stats
document.getElementById('dailyGrowth').textContent = `+${demoData.profile.followers - demoData.growth[demoData.growth.length - 2]}`;
document.getElementById('bestTime').textContent = '7 PM';
document.getElementById('engagementRate').textContent = '4.2%';
// Generate recommendations
generateRecommendations();
updateCharts();
}
function initCharts() {
const growthCtx = document.getElementById('growthChart').getContext('2d');
growthChart = new Chart(growthCtx, {
type: 'line',
data: {
labels: ['Jan 1', 'Jan 7', 'Jan 14', 'Jan 21', 'Jan 28', 'Feb 4'],
datasets: [{
data: demoData.growth,
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.2)',
tension: 0.4,
fill: true,
pointBackgroundColor: '#10B981',
pointBorderColor: '#fff',
pointRadius: 6
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: {
beginAtZero: false,
ticks: { color: 'white' },
grid: { color: 'rgba(255,255,255,0.1)' }
},
x: {
ticks: { color: 'white' },
grid: { color: 'rgba(255,255,255,0.1)' }
}
}
}
});
const engagementCtx = document.getElementById('engagementChart').getContext('2d');
engagementChart = new Chart(engagementCtx, {
type: 'bar',
data: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
datasets: [{
data: demoData.engagement,
backgroundColor: 'rgba(59, 130, 246, 0.8)',
borderRadius: 4
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: {
beginAtZero: true,
ticks: { color: 'white' },
grid: { color: 'rgba(255,255,255,0.1)' }
},
x: {
ticks: { color: 'white' },
grid: { display: false }
}
}
}
});
}
function generateRecommendations() {
const recommendations = [
{
title: 'Post at Peak Times',
desc: 'Your audience is most active at 7 PM. Schedule 3 posts this week at this time.',
icon: 'fa-clock',
color: 'from-blue-500 to-indigo-600'
},
{
title: 'Use Reels',
desc: 'Reels get 22% more engagement. Create 5 short workout reels this week.',
icon: 'fa-video',
color: 'from-pink-500 to-rose-600'
},
{
title: 'Engage with Followers',
desc: 'Reply to all comments within 1 hour. This boosts algorithm ranking.',
icon: 'fa-comment',
color: 'from-green-500 to-emerald-600'
},
{
title: 'Hashtag Strategy',
desc: 'Use 5-10 targeted hashtags per post. Mix popular + niche hashtags.',
icon: 'fa-hashtag',
color: 'from-purple-500 to-violet-600'
},
{
title: 'Stories Daily',
desc: 'Post 3-5 stories daily. Use polls and questions to boost interaction.',
icon: 'fa-circle-play',
color: 'from-orange-500 to-amber-600'
},
{
title: 'Collaborate',
desc: 'DM 10 similar accounts for shoutout swaps. Aim for 100+ followers each.',
icon: 'fa-users',
color: 'from-yellow-500 to-orange-600'
}
];
const container = document.getElementById('recommendations');
container.innerHTML = recommendations.map(rec => `
<div class="bg-white/10 p-6 rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 bg-gradient-to-r ${rec.color} rounded-2xl flex items-center justify-center flex-shrink-0">
<i class="fas ${rec.icon} text-white text-xl"></i>
</div>
<div>
<h4 class="font-bold text-white text-lg mb-2">${rec.title}</h4>
<p class="text-white/80 text-sm">${rec.desc}</p>
</div>
</div>
</div>
`).join('');
}
function generateContent() {
const type = document.getElementById('contentType').value;
const niche = document.getElementById('niche').value;
const output = document.getElementById('contentOutput');
const contentIdeas = {
caption: [
`💪 "Transform your body in 30 days - no gym required!"
Which workout should I post next? 👇
#FitnessMotivation #HomeWorkout`,
`🥗 My #1 fat loss meal that tastes like dessert!
Saved me 15lbs last month 🔥
Recipe in comments!
#HealthyEating #WeightLossJourney`,
`🚀 Day 47 of consistency = visible abs!
What's your biggest fitness win this month?
#FitnessTransformation #AbsWorkout`
],
hashtag: [
`#FitnessMotivation #Workout #GymLife #FitnessJourney #Healthylifestyle
#Fitspiration #Fitfam #Fitnessgoals #GetFit #Fitlife`,
`Mix 3 popular + 7 niche hashtags:
#Fitness (45M) #HomeWorkout (12M) #AbsWorkout (8M)
#BodyweightWorkout #NoEquipment #FitOver40`
],
story: [
`📊 Poll: "Cardio or Weights?"`,
`❓ Question: "What's your biggest fitness struggle?"`,
`🔥 Countdown: "New workout drops in 2 hours!"`
],
reel: [
`15-sec HIIT workout (no equipment)
3 rounds, 30s each exercise
Music: trending upbeat track`,
`Before/after transformation
Text overlay: "90 days consistent"
Call-to-action: "Save for motivation"`
]
};
output.innerHTML = `
<div class="space-y-4 p-6 bg-white/10 rounded-2xl border border-white/20">
<h4 class="text-xl font-bold text-white flex items-center">
<i class="fas fa-sparkles text-yellow-400 mr-2"></i>
${type.charAt(0).toUpperCase() + type.slice(1)} Ideas for ${niche}
</h4>
${contentIdeas[type].map(idea => `
<div class="bg-white/20 p-4 rounded-xlLanding Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
4
Domains
485KB
Transfer Size
972KB
Content Size
497.0ms
Dom Content Loaded
784.0ms
First Paint
582.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...