Spaces:
Running
Running
Create a comprehensive personal and business Brand ROI calculator that should be fun to play with, gamified and UI uses color codes of #ff330c, #f2f2f2, #e4e4e4, #fdfdfd, #1d1d1d - Initial Deployment
4ff1670
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Brand ROI Calculator | Measure Your Brand Impact</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#ff330c', | |
| light: '#f2f2f2', | |
| lighter: '#e4e4e4', | |
| lightest: '#fdfdfd', | |
| dark: '#1d1d1d', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #1d1d1d; | |
| color: #f2f2f2; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e4e4e4; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #ff330c; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-lightest font-sans text-dark"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 text-primary">Brand ROI Calculator</h1> | |
| <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Measure the impact of your personal or business brand with our gamified calculator. | |
| Discover your brand's true value and potential! | |
| </p> | |
| </header> | |
| <!-- Toggle Switch --> | |
| <div class="flex justify-center mb-10"> | |
| <div class="inline-flex items-center bg-lighter rounded-full p-1"> | |
| <button id="personalBtn" class="px-6 py-2 rounded-full font-medium text-white bg-primary focus:outline-none transition"> | |
| Personal Brand | |
| </button> | |
| <button id="businessBtn" class="px-6 py-2 rounded-full font-medium text-dark bg-transparent focus:outline-none transition"> | |
| Business Brand | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Calculator Sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Input Section --> | |
| <div class="bg-white p-6 rounded-xl shadow-lg lg:col-span-2"> | |
| <h2 class="text-2xl font-bold mb-6 text-primary">Brand Metrics</h2> | |
| <!-- Personal Brand Metrics (Visible by default) --> | |
| <div id="personalMetrics"> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Social Media Following</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="socialFollowing" min="0" max="1000000" step="1000" value="50000" class="w-full mr-4"> | |
| <span id="socialFollowingValue" class="font-bold">50,000</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>0</span> | |
| <span>1M+</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Engagement Rate (%)</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="engagementRate" min="0" max="20" step="0.5" value="3" class="w-full mr-4"> | |
| <span id="engagementRateValue" class="font-bold">3%</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>0%</span> | |
| <span>20%</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Content Quality Score</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="contentQuality" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="contentQualityValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Basic</span> | |
| <span>Exceptional</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Networking Score</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="networkingScore" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="networkingScoreValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Limited</span> | |
| <span>Extensive</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Industry Authority</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="industryAuthority" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="industryAuthorityValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Newcomer</span> | |
| <span>Thought Leader</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Business Brand Metrics (Hidden by default) --> | |
| <div id="businessMetrics" class="hidden"> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Brand Awareness (%)</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="brandAwareness" min="0" max="100" step="1" value="30" class="w-full mr-4"> | |
| <span id="brandAwarenessValue" class="font-bold">30%</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Customer Loyalty Score</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="customerLoyalty" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="customerLoyaltyValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Low</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Marketing Spend ($)</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="marketingSpend" min="0" max="100000" step="1000" value="10000" class="w-full mr-4"> | |
| <span id="marketingSpendValue" class="font-bold">$10,000</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>$0</span> | |
| <span>$100K</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Brand Differentiation</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="brandDifferentiation" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="brandDifferentiationValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Generic</span> | |
| <span>Unique</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-lg font-medium mb-2">Market Position</label> | |
| <div class="flex items-center mb-2"> | |
| <input type="range" id="marketPosition" min="1" max="10" step="1" value="5" class="w-full mr-4"> | |
| <span id="marketPositionValue" class="font-bold">5/10</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Challenger</span> | |
| <span>Leader</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="calculateBtn" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105 mt-6"> | |
| Calculate My Brand ROI | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 text-primary">Your Brand ROI</h2> | |
| <div class="text-center mb-8"> | |
| <div class="relative inline-block"> | |
| <svg class="w-40 h-40"> | |
| <circle class="text-lighter" stroke-width="10" stroke="currentColor" fill="transparent" r="70" cx="80" cy="80" /> | |
| <circle class="text-primary progress-ring__circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="70" cx="80" cy="80" /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center flex-col" style="top: 80px; left: 80px; transform: translate(-50%, -50%);"> | |
| <span id="roiScore" class="text-4xl font-bold">0</span> | |
| <span class="text-sm text-gray-500">ROI Score</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-primary"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Brand Strength</p> | |
| <div class="w-full bg-lighter rounded-full h-2.5"> | |
| <div id="brandStrengthBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-dollar-sign text-primary"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Monetization Potential</p> | |
| <div class="w-full bg-lighter rounded-full h-2.5"> | |
| <div id="monetizationBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-users text-primary"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Influence Level</p> | |
| <div class="w-full bg-lighter rounded-full h-2.5"> | |
| <div id="influenceBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="personalInsights" class="bg-lighter p-4 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-2 text-primary">Personal Brand Insights</h3> | |
| <p id="personalInsightText" class="text-sm">Calculate your metrics to get personalized insights about your personal brand's performance and potential.</p> | |
| </div> | |
| <div id="businessInsights" class="bg-lighter p-4 rounded-lg hidden"> | |
| <h3 class="font-bold text-lg mb-2 text-primary">Business Brand Insights</h3> | |
| <p id="businessInsightText" class="text-sm">Calculate your metrics to get personalized insights about your business brand's performance and potential.</p> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="shareBtn" class="w-full bg-dark hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-share-alt"></i> | |
| <span>Share Your Results</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Badges Section --> | |
| <div class="mt-12 text-center"> | |
| <h2 class="text-2xl font-bold mb-6 text-primary">Earn Brand Badges</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div id="influencerBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center"> | |
| <i class="fas fa-bullhorn text-gray-400 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Influencer</p> | |
| <p class="text-xs text-gray-500">10K+ followers</p> | |
| </div> | |
| <div id="thoughtLeaderBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-gray-400 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Thought Leader</p> | |
| <p class="text-xs text-gray-500">High authority</p> | |
| </div> | |
| <div id="monetizerBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center"> | |
| <i class="fas fa-money-bill-wave text-gray-400 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Monetizer</p> | |
| <p class="text-xs text-gray-500">Strong ROI</p> | |
| </div> | |
| <div id="connectorBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center"> | |
| <i class="fas fa-handshake text-gray-400 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Connector</p> | |
| <p class="text-xs text-gray-500">Strong network</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tips Section --> | |
| <div class="mt-12 bg-primary bg-opacity-10 p-6 rounded-xl"> | |
| <h2 class="text-2xl font-bold mb-4 text-primary">Brand Growth Tips</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-pen-fancy"></i> | |
| </div> | |
| <h3 class="font-bold">Content Strategy</h3> | |
| </div> | |
| <p class="text-sm">Focus on creating high-quality, valuable content that resonates with your target audience. Consistency is key to building brand recognition.</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| <h3 class="font-bold">Networking</h3> | |
| </div> | |
| <p class="text-sm">Build authentic relationships with peers, mentors, and potential collaborators. Strategic partnerships can amplify your brand reach.</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3"> | |
| <i class="fas fa-analytics"></i> | |
| </div> | |
| <h3 class="font-bold">Metrics Tracking</h3> | |
| </div> | |
| <p class="text-sm">Regularly measure your brand performance metrics to identify what's working and where you can improve. Data-driven decisions lead to better ROI.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const personalBtn = document.getElementById('personalBtn'); | |
| const businessBtn = document.getElementById('businessBtn'); | |
| const personalMetrics = document.getElementById('personalMetrics'); | |
| const businessMetrics = document.getElementById('businessMetrics'); | |
| const personalInsights = document.getElementById('personalInsights'); | |
| const businessInsights = document.getElementById('businessInsights'); | |
| const calculateBtn = document.getElementById('calculateBtn'); | |
| const shareBtn = document.getElementById('shareBtn'); | |
| const roiScore = document.getElementById('roiScore'); | |
| // Slider elements for personal brand | |
| const socialFollowing = document.getElementById('socialFollowing'); | |
| const socialFollowingValue = document.getElementById('socialFollowingValue'); | |
| const engagementRate = document.getElementById('engagementRate'); | |
| const engagementRateValue = document.getElementById('engagementRateValue'); | |
| const contentQuality = document.getElementById('contentQuality'); | |
| const contentQualityValue = document.getElementById('contentQualityValue'); | |
| const networkingScore = document.getElementById('networkingScore'); | |
| const networkingScoreValue = document.getElementById('networkingScoreValue'); | |
| const industryAuthority = document.getElementById('industryAuthority'); | |
| const industryAuthorityValue = document.getElementById('industryAuthorityValue'); | |
| // Slider elements for business brand | |
| const brandAwareness = document.getElementById('brandAwareness'); | |
| const brandAwarenessValue = document.getElementById('brandAwarenessValue'); | |
| const customerLoyalty = document.getElementById('customerLoyalty'); | |
| const customerLoyaltyValue = document.getElementById('customerLoyaltyValue'); | |
| const marketingSpend = document.getElementById('marketingSpend'); | |
| const marketingSpendValue = document.getElementById('marketingSpendValue'); | |
| const brandDifferentiation = document.getElementById('brandDifferentiation'); | |
| const brandDifferentiationValue = document.getElementById('brandDifferentiationValue'); | |
| const marketPosition = document.getElementById('marketPosition'); | |
| const marketPositionValue = document.getElementById('marketPositionValue'); | |
| // Progress bars | |
| const brandStrengthBar = document.getElementById('brandStrengthBar'); | |
| const monetizationBar = document.getElementById('monetizationBar'); | |
| const influenceBar = document.getElementById('influenceBar'); | |
| // Badges | |
| const influencerBadge = document.getElementById('influencerBadge'); | |
| const thoughtLeaderBadge = document.getElementById('thoughtLeaderBadge'); | |
| const monetizerBadge = document.getElementById('monetizerBadge'); | |
| const connectorBadge = document.getElementById('connectorBadge'); | |
| // Insight texts | |
| const personalInsightText = document.getElementById('personalInsightText'); | |
| const businessInsightText = document.getElementById('businessInsightText'); | |
| // Toggle between personal and business brand | |
| personalBtn.addEventListener('click', () => { | |
| personalBtn.classList.add('bg-primary', 'text-white'); | |
| personalBtn.classList.remove('bg-transparent', 'text-dark'); | |
| businessBtn.classList.remove('bg-primary', 'text-white'); | |
| businessBtn.classList.add('bg-transparent', 'text-dark'); | |
| personalMetrics.classList.remove('hidden'); | |
| businessMetrics.classList.add('hidden'); | |
| personalInsights.classList.remove('hidden'); | |
| businessInsights.classList.add('hidden'); | |
| }); | |
| businessBtn.addEventListener('click', () => { | |
| businessBtn.classList.add('bg-primary', 'text-white'); | |
| businessBtn.classList.remove('bg-transparent', 'text-dark'); | |
| personalBtn.classList.remove('bg-primary', 'text-white'); | |
| personalBtn.classList.add('bg-transparent', 'text-dark'); | |
| businessMetrics.classList.remove('hidden'); | |
| personalMetrics.classList.add('hidden'); | |
| businessInsights.classList.remove('hidden'); | |
| personalInsights.classList.add('hidden'); | |
| }); | |
| // Update slider values in real-time | |
| socialFollowing.addEventListener('input', () => { | |
| socialFollowingValue.textContent = numberWithCommas(socialFollowing.value); | |
| }); | |
| engagementRate.addEventListener('input', () => { | |
| engagementRateValue.textContent = engagementRate.value + '%'; | |
| }); | |
| contentQuality.addEventListener('input', () => { | |
| contentQualityValue.textContent = contentQuality.value + '/10'; | |
| }); | |
| networkingScore.addEventListener('input', () => { | |
| networkingScoreValue.textContent = networkingScore.value + '/10'; | |
| }); | |
| industryAuthority.addEventListener('input', () => { | |
| industryAuthorityValue.textContent = industryAuthority.value + '/10'; | |
| }); | |
| brandAwareness.addEventListener('input', () => { | |
| brandAwarenessValue.textContent = brandAwareness.value + '%'; | |
| }); | |
| customerLoyalty.addEventListener('input', () => { | |
| customerLoyaltyValue.textContent = customerLoyalty.value + '/10'; | |
| }); | |
| marketingSpend.addEventListener('input', () => { | |
| marketingSpendValue.textContent = '$' + numberWithCommas(marketingSpend.value); | |
| }); | |
| brandDifferentiation.addEventListener('input', () => { | |
| brandDifferentiationValue.textContent = brandDifferentiation.value + '/10'; | |
| }); | |
| marketPosition.addEventListener('input', () => { | |
| marketPositionValue.textContent = marketPosition.value + '/10'; | |
| }); | |
| // Calculate ROI | |
| calculateBtn.addEventListener('click', () => { | |
| // Show loading state | |
| calculateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating...'; | |
| // Simulate calculation delay | |
| setTimeout(() => { | |
| let score, brandStrength, monetization, influence; | |
| if (!businessMetrics.classList.contains('hidden')) { | |
| // Business brand calculation | |
| score = calculateBusinessROI(); | |
| updateBusinessInsights(score); | |
| } else { | |
| // Personal brand calculation | |
| score = calculatePersonalROI(); | |
| updatePersonalInsights(score); | |
| } | |
| // Update UI | |
| updateROIDisplay(score); | |
| updateBadges(score); | |
| // Reset button | |
| calculateBtn.innerHTML = 'Calculate My Brand ROI'; | |
| // Scroll to results | |
| document.querySelector('.bg-white.p-6.rounded-xl.shadow-lg').scrollIntoView({ behavior: 'smooth' }); | |
| }, 1000); | |
| }); | |
| // Share results | |
| shareBtn.addEventListener('click', () => { | |
| alert('Share functionality would be implemented here! In a real app, this would share your Brand ROI score on social media.'); | |
| }); | |
| // Helper functions | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } | |
| function calculatePersonalROI() { | |
| const followingScore = Math.min(100, parseInt(socialFollowing.value) / 10000); | |
| const engagementScore = parseInt(engagementRate.value) * 5; | |
| const contentScore = parseInt(contentQuality.value) * 10; | |
| const networkScore = parseInt(networkingScore.value) * 10; | |
| const authorityScore = parseInt(industryAuthority.value) * 10; | |
| // Weighted average | |
| const totalScore = (followingScore * 0.2) + (engagementScore * 0.25) + | |
| (contentScore * 0.25) + (networkScore * 0.15) + | |
| (authorityScore * 0.15); | |
| // Cap at 100 | |
| return Math.min(100, Math.round(totalScore)); | |
| } | |
| function calculateBusinessROI() { | |
| const awarenessScore = parseInt(brandAwareness.value); | |
| const loyaltyScore = parseInt(customerLoyalty.value) * 10; | |
| const spendEfficiency = Math.min(100, 100 - (parseInt(marketingSpend.value) / 1000)); | |
| const differentiationScore = parseInt(brandDifferentiation.value) * 10; | |
| const positionScore = parseInt(marketPosition.value) * 10; | |
| // Weighted average | |
| const totalScore = (awarenessScore * 0.3) + (loyaltyScore * 0.25) + | |
| (spendEfficiency * 0.15) + (differentiationScore * 0.15) + | |
| (positionScore * 0.15); | |
| // Cap at 100 | |
| return Math.min(100, Math.round(totalScore)); | |
| } | |
| function updateROIDisplay(score) { | |
| // Animate the score increase | |
| let currentScore = 0; | |
| const increment = score / 20; | |
| const timer = setInterval(() => { | |
| currentScore += increment; | |
| if (currentScore >= score) { | |
| currentScore = score; | |
| clearInterval(timer); | |
| } | |
| roiScore.textContent = Math.round(currentScore); | |
| // Update progress circle | |
| const circle = document.querySelector('.progress-ring__circle'); | |
| const radius = 70; | |
| const circumference = radius * 2 * Math.PI; | |
| const offset = circumference - (currentScore / 100) * circumference; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = offset; | |
| // Update progress bars | |
| brandStrengthBar.style.width = `${Math.min(100, score + 10)}%`; | |
| monetizationBar.style.width = `${Math.min(100, score - 5)}%`; | |
| influenceBar.style.width = `${Math.min(100, score + 5)}%`; | |
| }, 50); | |
| } | |
| function updatePersonalInsights(score) { | |
| let insight = ''; | |
| if (score < 30) { | |
| insight = 'Your personal brand is in the early stages. Focus on building your online presence and creating valuable content to establish your authority.'; | |
| } else if (score < 60) { | |
| insight = 'Your personal brand is growing! Continue engaging with your audience and expanding your network to increase your influence.'; | |
| } else if (score < 80) { | |
| insight = 'Strong personal brand! You have good recognition in your industry. Consider monetizing your influence through partnerships or products.'; | |
| } else { | |
| insight = 'Exceptional personal brand! You are a recognized authority with significant influence. Leverage this to create new opportunities and scale your impact.'; | |
| } | |
| personalInsightText.textContent = insight; | |
| } | |
| function updateBusinessInsights(score) { | |
| let insight = ''; | |
| if (score < 30) { | |
| insight = 'Your business brand needs more recognition. Invest in marketing and brand differentiation to stand out in your market.'; | |
| } else if (score < 60) { | |
| insight = 'Your business brand is gaining traction. Focus on customer loyalty and consistent messaging to strengthen your position.'; | |
| } else if (score < 80) { | |
| insight = 'Strong business brand! You have good market awareness. Optimize your marketing spend to improve ROI and consider expanding your offerings.'; | |
| } else { | |
| insight = 'Exceptional business brand! You are a market leader with strong customer loyalty. Explore new markets and innovative ways to leverage your brand equity.'; | |
| } | |
| businessInsightText.textContent = insight; | |
| } | |
| function updateBadges(score) { | |
| // Reset all badges | |
| [influencerBadge, thoughtLeaderBadge, monetizerBadge, connectorBadge].forEach(badge => { | |
| badge.classList.add('opacity-50'); | |
| badge.querySelector('i').classList.remove('text-primary'); | |
| badge.querySelector('i').classList.add('text-gray-400'); | |
| badge.classList.remove('border-primary', 'pulse-animation'); | |
| }); | |
| // Award badges based on score and metrics | |
| if (score >= 40) { | |
| if (!businessMetrics.classList.contains('hidden')) { | |
| // Business brand badges | |
| if (parseInt(brandAwareness.value) >= 50) { | |
| influencerBadge.classList.remove('opacity-50'); | |
| influencerBadge.querySelector('i').classList.remove('text-gray-400'); | |
| influencerBadge.querySelector('i').classList.add('text-primary'); | |
| influencerBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (parseInt(brandDifferentiation.value) >= 7) { | |
| thoughtLeaderBadge.classList.remove('opacity-50'); | |
| thoughtLeaderBadge.querySelector('i').classList.remove('text-gray-400'); | |
| thoughtLeaderBadge.querySelector('i').classList.add('text-primary'); | |
| thoughtLeaderBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (score >= 70) { | |
| monetizerBadge.classList.remove('opacity-50'); | |
| monetizerBadge.querySelector('i').classList.remove('text-gray-400'); | |
| monetizerBadge.querySelector('i').classList.add('text-primary'); | |
| monetizerBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (parseInt(customerLoyalty.value) >= 7) { | |
| connectorBadge.classList.remove('opacity-50'); | |
| connectorBadge.querySelector('i').classList.remove('text-gray-400'); | |
| connectorBadge.querySelector('i').classList.add('text-primary'); | |
| connectorBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| } else { | |
| // Personal brand badges | |
| if (parseInt(socialFollowing.value) >= 10000) { | |
| influencerBadge.classList.remove('opacity-50'); | |
| influencerBadge.querySelector('i').classList.remove('text-gray-400'); | |
| influencerBadge.querySelector('i').classList.add('text-primary'); | |
| influencerBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (parseInt(industryAuthority.value) >= 7) { | |
| thoughtLeaderBadge.classList.remove('opacity-50'); | |
| thoughtLeaderBadge.querySelector('i').classList.remove('text-gray-400'); | |
| thoughtLeaderBadge.querySelector('i').classList.add('text-primary'); | |
| thoughtLeaderBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (score >= 70) { | |
| monetizerBadge.classList.remove('opacity-50'); | |
| monetizerBadge.querySelector('i').classList.remove('text-gray-400'); | |
| monetizerBadge.querySelector('i').classList.add('text-primary'); | |
| monetizerBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| if (parseInt(networkingScore.value) >= 7) { | |
| connectorBadge.classList.remove('opacity-50'); | |
| connectorBadge.querySelector('i').classList.remove('text-gray-400'); | |
| connectorBadge.querySelector('i').classList.add('text-primary'); | |
| connectorBadge.classList.add('border-primary', 'pulse-animation'); | |
| } | |
| } | |
| } | |
| } | |
| // Initialize progress circle | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const circle = document.querySelector('.progress-ring__circle'); | |
| const radius = 70; | |
| const circumference = radius * 2 * Math.PI; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = circumference; | |
| }); | |
| </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=JayStormX8/brand-roi-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |