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
4e2ffd1
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Brand ROI Calculator | Gamified</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: '#fdfdfd', | |
| gray: '#e4e4e4', | |
| dark: '#1d1d1d', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .has-tooltip:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: #ff330c; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light 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 text-gray-600 max-w-2xl mx-auto">Calculate your brand's return on investment with this interactive tool. See how small changes can impact your results!</p> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="bg-primary text-lighter px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-trophy mr-2"></i> | |
| <span>Level Up Your Brand Strategy</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Calculator Container --> | |
| <div class="bg-lighter rounded-xl shadow-lg overflow-hidden"> | |
| <div class="grid md:grid-cols-3 gap-0"> | |
| <!-- Input Section --> | |
| <div class="md:col-span-2 p-8"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-primary flex items-center"> | |
| <i class="fas fa-sliders-h mr-3"></i> | |
| <span>Adjust Your Brand Metrics</span> | |
| </h2> | |
| <!-- Gamification Progress --> | |
| <div class="mb-8 bg-gray rounded-full h-4 overflow-hidden"> | |
| <div id="completion-bar" class="progress-bar bg-primary h-full" style="width: 0%"></div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-6">Complete all fields to unlock your full brand potential score!</p> | |
| <!-- Input Fields --> | |
| <div class="space-y-6"> | |
| <!-- Brand Awareness --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Brand Awareness (%)</label> | |
| <span id="awareness-value" class="font-bold text-primary">50%</span> | |
| </div> | |
| <input type="range" id="awareness" min="0" max="100" value="50" class="w-full h-2 bg-gray rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-600 mt-1"> | |
| <span>Low</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <!-- Engagement Rate --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Engagement Rate (%)</label> | |
| <span id="engagement-value" class="font-bold text-primary">3%</span> | |
| </div> | |
| <input type="range" id="engagement" min="0" max="20" value="3" class="w-full h-2 bg-gray rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-600 mt-1"> | |
| <span>Low</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <!-- Conversion Rate --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Conversion Rate (%)</label> | |
| <span id="conversion-value" class="font-bold text-primary">2%</span> | |
| </div> | |
| <input type="range" id="conversion" min="0" max="10" value="2" class="w-full h-2 bg-gray rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-600 mt-1"> | |
| <span>Low</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <!-- Customer Lifetime Value --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Avg. Customer Value ($)</label> | |
| <span id="clv-value" class="font-bold text-primary">$500</span> | |
| </div> | |
| <input type="range" id="clv" min="50" max="5000" value="500" step="50" class="w-full h-2 bg-gray rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-600 mt-1"> | |
| <span>$50</span> | |
| <span>$5000</span> | |
| </div> | |
| </div> | |
| <!-- Marketing Investment --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Monthly Marketing Budget ($)</label> | |
| <span id="budget-value" class="font-bold text-primary">$5,000</span> | |
| </div> | |
| <input type="range" id="budget" min="500" max="50000" value="5000" step="500" class="w-full h-2 bg-gray rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-600 mt-1"> | |
| <span>$500</span> | |
| <span>$50,000</span> | |
| </div> | |
| </div> | |
| <!-- Audience Size --> | |
| <div class="input-group"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium">Target Audience Size</label> | |
| <span id="audience-value" class="font-bold text-primary">10,000</span> | |
| </div> | |
| <div class="relative"> | |
| <select id="audience" class="w-full p-3 border border-gray rounded-lg appearance-none bg-white"> | |
| <option value="1000">1,000 (Small Niche)</option> | |
| <option value="10000" selected>10,000 (Local Market)</option> | |
| <option value="50000">50,000 (Regional)</option> | |
| <option value="100000">100,000 (National)</option> | |
| <option value="1000000">1,000,000 (Global)</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-col sm:flex-row gap-4 mt-8"> | |
| <button id="calculate-btn" class="flex-1 bg-primary hover:bg-opacity-90 text-lighter font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-calculator mr-2"></i> Calculate ROI | |
| </button> | |
| <button id="randomize-btn" class="flex-1 bg-gray hover:bg-opacity-80 text-dark font-bold py-3 px-6 rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-random mr-2"></i> Try Random Scenario | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-gray p-8 flex flex-col"> | |
| <h2 class="text-2xl font-bold mb-6 text-primary flex items-center"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>Your Brand ROI</span> | |
| </h2> | |
| <!-- Score Display --> | |
| <div class="bg-lighter rounded-xl p-6 mb-6 text-center shadow-inner"> | |
| <div class="text-sm font-medium mb-1">BRAND POTENTIAL SCORE</div> | |
| <div id="score" class="text-5xl font-bold text-primary mb-2">0</div> | |
| <div id="score-label" class="text-sm font-medium">Complete the form to calculate</div> | |
| <div class="mt-4 h-2 bg-gray rounded-full overflow-hidden"> | |
| <div id="score-bar" class="progress-bar bg-primary h-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- ROI Breakdown --> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Estimated Reach</div> | |
| <div id="reach" class="font-bold">0</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Engaged Audience</div> | |
| <div id="engaged" class="font-bold">0</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Potential Conversions</div> | |
| <div id="conversions" class="font-bold">0</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Revenue Potential</div> | |
| <div id="revenue" class="font-bold">$0</div> | |
| </div> | |
| <div class="border-t border-gray-300 my-2"></div> | |
| <div class="flex justify-between items-center font-bold text-lg"> | |
| <div>ROI</div> | |
| <div id="roi" class="text-primary">0%</div> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="mt-auto"> | |
| <h3 class="font-bold mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-primary"></i> | |
| <span>Recommendations</span> | |
| </h3> | |
| <div id="recommendations" class="text-sm space-y-2"> | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-info-circle text-primary mt-1 mr-2"></i> | |
| <span>Adjust the sliders to see how different strategies affect your brand ROI.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Badges Section --> | |
| <div class="mt-12 text-center"> | |
| <h3 class="text-xl font-bold mb-6 text-primary">Earn Badges by Exploring Scenarios</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-lighter p-4 rounded-lg border-2 border-gray"> | |
| <div class="text-3xl mb-2 text-primary"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <div class="font-bold">Emerging Brand</div> | |
| <div class="text-xs text-gray-600">Complete your first calculation</div> | |
| </div> | |
| <div class="bg-lighter p-4 rounded-lg border-2 border-gray opacity-50"> | |
| <div class="text-3xl mb-2 text-gray"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <div class="font-bold">Growth Hacker</div> | |
| <div class="text-xs text-gray-600">Achieve 200% ROI</div> | |
| </div> | |
| <div class="bg-lighter p-4 rounded-lg border-2 border-gray opacity-50"> | |
| <div class="text-3xl mb-2 text-gray"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div class="font-bold">Brand Champion</div> | |
| <div class="text-xs text-gray-600">Score above 80</div> | |
| </div> | |
| <div class="bg-lighter p-4 rounded-lg border-2 border-gray opacity-50"> | |
| <div class="text-3xl mb-2 text-gray"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <div class="font-bold">Experimenter</div> | |
| <div class="text-xs text-gray-600">Try 5 random scenarios</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Get all DOM elements | |
| const awarenessSlider = document.getElementById('awareness'); | |
| const engagementSlider = document.getElementById('engagement'); | |
| const conversionSlider = document.getElementById('conversion'); | |
| const clvSlider = document.getElementById('clv'); | |
| const budgetSlider = document.getElementById('budget'); | |
| const audienceSelect = document.getElementById('audience'); | |
| const awarenessValue = document.getElementById('awareness-value'); | |
| const engagementValue = document.getElementById('engagement-value'); | |
| const conversionValue = document.getElementById('conversion-value'); | |
| const clvValue = document.getElementById('clv-value'); | |
| const budgetValue = document.getElementById('budget-value'); | |
| const audienceValue = document.getElementById('audience-value'); | |
| const calculateBtn = document.getElementById('calculate-btn'); | |
| const randomizeBtn = document.getElementById('randomize-btn'); | |
| const scoreElement = document.getElementById('score'); | |
| const scoreLabel = document.getElementById('score-label'); | |
| const scoreBar = document.getElementById('score-bar'); | |
| const completionBar = document.getElementById('completion-bar'); | |
| const reachElement = document.getElementById('reach'); | |
| const engagedElement = document.getElementById('engaged'); | |
| const conversionsElement = document.getElementById('conversions'); | |
| const revenueElement = document.getElementById('revenue'); | |
| const roiElement = document.getElementById('roi'); | |
| const recommendationsElement = document.getElementById('recommendations'); | |
| // Update displayed values when sliders change | |
| awarenessSlider.addEventListener('input', function() { | |
| awarenessValue.textContent = `${this.value}%`; | |
| updateCompletion(); | |
| }); | |
| engagementSlider.addEventListener('input', function() { | |
| engagementValue.textContent = `${this.value}%`; | |
| updateCompletion(); | |
| }); | |
| conversionSlider.addEventListener('input', function() { | |
| conversionValue.textContent = `${this.value}%`; | |
| updateCompletion(); | |
| }); | |
| clvSlider.addEventListener('input', function() { | |
| clvValue.textContent = `$${parseInt(this.value).toLocaleString()}`; | |
| updateCompletion(); | |
| }); | |
| budgetSlider.addEventListener('input', function() { | |
| budgetValue.textContent = `$${parseInt(this.value).toLocaleString()}`; | |
| updateCompletion(); | |
| }); | |
| audienceSelect.addEventListener('change', function() { | |
| audienceValue.textContent = parseInt(this.value).toLocaleString(); | |
| updateCompletion(); | |
| }); | |
| // Calculate completion percentage | |
| function updateCompletion() { | |
| // All fields have values (even if default), so completion is always 100% | |
| completionBar.style.width = '100%'; | |
| } | |
| // Calculate ROI | |
| function calculateROI() { | |
| const awareness = parseInt(awarenessSlider.value) / 100; | |
| const engagement = parseInt(engagementSlider.value) / 100; | |
| const conversion = parseInt(conversionSlider.value) / 100; | |
| const clv = parseInt(clvSlider.value); | |
| const budget = parseInt(budgetSlider.value); | |
| const audience = parseInt(audienceSelect.value); | |
| // Calculate metrics | |
| const reach = Math.round(audience * awareness); | |
| const engaged = Math.round(reach * engagement); | |
| const conversions = Math.round(engaged * conversion); | |
| const revenue = conversions * clv; | |
| const roi = budget > 0 ? Math.round(((revenue - budget) / budget) * 100) : 0; | |
| // Calculate brand score (0-100) | |
| const score = Math.min(100, Math.round( | |
| (awareness * 25) + | |
| (engagement * 5 * 25) + // engagement is 0-20%, so multiply by 5 to normalize | |
| (conversion * 10 * 25) + // conversion is 0-10%, so multiply by 10 to normalize | |
| (Math.min(1, clv / 2000) * 25) // CLV contribution capped at $2000 | |
| )); | |
| // Update UI | |
| reachElement.textContent = reach.toLocaleString(); | |
| engagedElement.textContent = engaged.toLocaleString(); | |
| conversionsElement.textContent = conversions.toLocaleString(); | |
| revenueElement.textContent = `$${revenue.toLocaleString()}`; | |
| roiElement.textContent = `${roi}%`; | |
| scoreElement.textContent = score; | |
| scoreBar.style.width = `${score}%`; | |
| // Update score label | |
| if (score >= 80) { | |
| scoreLabel.textContent = "Excellent Brand Potential!"; | |
| scoreElement.classList.add('text-primary'); | |
| scoreElement.classList.remove('text-yellow-500', 'text-red-500'); | |
| } else if (score >= 50) { | |
| scoreLabel.textContent = "Good Potential - Room to Improve"; | |
| scoreElement.classList.add('text-yellow-500'); | |
| scoreElement.classList.remove('text-primary', 'text-red-500'); | |
| } else { | |
| scoreLabel.textContent = "Needs Significant Improvement"; | |
| scoreElement.classList.add('text-red-500'); | |
| scoreElement.classList.remove('text-primary', 'text-yellow-500'); | |
| } | |
| // Generate recommendations | |
| let recommendationsHTML = ''; | |
| if (awareness < 0.3) { | |
| recommendationsHTML += ` | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-bullhorn text-primary mt-1 mr-2"></i> | |
| <span>Your brand awareness is low. Consider increasing marketing efforts and PR activities to reach more of your target audience.</span> | |
| </div> | |
| `; | |
| } | |
| if (engagement < 0.05) { | |
| recommendationsHTML += ` | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-comments text-primary mt-1 mr-2"></i> | |
| <span>Your engagement rate could improve. Try creating more interactive content, responding to comments, and running engagement campaigns.</span> | |
| </div> | |
| `; | |
| } | |
| if (conversion < 0.03) { | |
| recommendationsHTML += ` | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-shopping-cart text-primary mt-1 mr-2"></i> | |
| <span>Optimize your conversion funnel. Consider A/B testing your landing pages, simplifying checkout processes, and improving calls-to-action.</span> | |
| </div> | |
| `; | |
| } | |
| if (roi < 100) { | |
| recommendationsHTML += ` | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-chart-pie text-primary mt-1 mr-2"></i> | |
| <span>To improve ROI, focus on strategies that increase customer lifetime value while maintaining or reducing acquisition costs.</span> | |
| </div> | |
| `; | |
| } | |
| if (recommendationsHTML === '') { | |
| recommendationsHTML = ` | |
| <div class="bg-lighter p-3 rounded-lg flex items-start"> | |
| <i class="fas fa-check-circle text-primary mt-1 mr-2"></i> | |
| <span>Your brand metrics look strong! Consider experimenting with premium pricing or expanding to new markets.</span> | |
| </div> | |
| `; | |
| } | |
| recommendationsElement.innerHTML = recommendationsHTML; | |
| // Add celebration if ROI is high | |
| if (roi > 300) { | |
| celebrate(); | |
| } | |
| } | |
| // Randomize inputs | |
| function randomizeInputs() { | |
| awarenessSlider.value = Math.floor(Math.random() * 60) + 20; | |
| engagementSlider.value = (Math.random() * 15 + 1).toFixed(1); | |
| conversionSlider.value = (Math.random() * 8 + 0.5).toFixed(1); | |
| clvSlider.value = Math.floor(Math.random() * 4500) + 100; | |
| budgetSlider.value = Math.floor(Math.random() * 45000) + 1000; | |
| // Trigger change events | |
| awarenessSlider.dispatchEvent(new Event('input')); | |
| engagementSlider.dispatchEvent(new Event('input')); | |
| conversionSlider.dispatchEvent(new Event('input')); | |
| clvSlider.dispatchEvent(new Event('input')); | |
| budgetSlider.dispatchEvent(new Event('input')); | |
| // Randomly select audience size | |
| const audienceOptions = audienceSelect.options; | |
| const randomOption = Math.floor(Math.random() * audienceOptions.length); | |
| audienceSelect.selectedIndex = randomOption; | |
| audienceSelect.dispatchEvent(new Event('change')); | |
| // Calculate after randomizing | |
| calculateROI(); | |
| } | |
| // Simple celebration effect | |
| function celebrate() { | |
| const btn = calculateBtn; | |
| btn.classList.add('pulse-animation'); | |
| setTimeout(() => { | |
| btn.classList.remove('pulse-animation'); | |
| }, 3000); | |
| } | |
| // Event listeners for buttons | |
| calculateBtn.addEventListener('click', calculateROI); | |
| randomizeBtn.addEventListener('click', randomizeInputs); | |
| // Initialize with default values | |
| updateCompletion(); | |
| }); | |
| </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-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |