Interactive Pricing Calculator for Creative Services
About this app
A credit-based pricing calculator for selecting and managing credits across creative services. Visualize and strategize your content plans effectively.
Samas Digital - Interactive Pricing Calculator for Creative Services Samas Digital - Creative Services Pricing Calculator Select Credit Package -- Select -- Starter: ₹50,000 → 10 credits Growth: ₹1,00,000 → 22 credits Scale: ₹2,00,000 → 50 credits Total Credits: 0 Used Credits: 0 Remaining Credits: 0 Warning: You need to upgrade your package to cover the selected services!
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Samas Digital - Interactive Pricing Calculator for Creative Services</title>
<meta name="description" content="A credit-based pricing calculator from Samas Digital for selecting and managing credits across creative services. Visualize and strategize your content plans effectively.">
<meta name="keywords" content="Samas Digital, pricing calculator, credit system, creative services, content marketing, service allocation">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let credits = {
"Starter": { price: 50000, credits: 10 },
"Growth": { price: 100000, credits: 22 },
"Scale": { price: 200000, credits: 50 }
};
let serviceCredits = {
"UGC Ad Sprint": { "UGC Ad": 2, "Ad Variant": 1 },
"Product Video Ad System": { "Product Video": 3, "Cutdown Video": 1 },
"AI Product Visual Lab": { "Standard Visual": 0.5, "Premium Visual": 1 },
"Creator Repurposing Engine": { "Short Clip": 0.75, "Carousel": 1 },
"YouTube Packaging System": { "Thumbnail": 0.75, "Title + Packaging": 0.5 },
"Founder Authority Engine": { "LinkedIn Post": 1, "Carousel": 1.5 }
};
let totalSelectedCredits = 0;
let totalUsedCredits = 0;
let totalAvailableCredits = 0;
function allocateCredits() {
$('#service-selection').empty();
Object.keys(serviceCredits).forEach(service => {
let controls = Object.keys(serviceCredits[service]).map(type => {
return `<div class="form-group">
<label>${type} (${serviceCredits[service][type]} credits each)</label>
<input class="form-control" type="number" min="0" value="0" onchange="updateCredits()" data-type="${type}" data-service="${service}">
</div>`;
}).join("");
$('#service-selection').append(`<div class="service">
<h5>${service}</h5>${controls}
</div>`);
});
updateCredits();
}
window.updateCredits = function() {
totalUsedCredits = 0;
$('#service-selection input').each(function() {
const quantity = parseInt($(this).val()) || 0;
const costPerItem = serviceCredits[$(this).data('service')][$(this).data('type')];
totalUsedCredits += quantity * costPerItem;
});
const remainingCredits = totalAvailableCredits - totalUsedCredits;
$('#total-credits').text(totalAvailableCredits);
$('#used-credits').text(totalUsedCredits);
$('#remaining-credits').text(remainingCredits);
if (remainingCredits < 0) {
$('#upgrade-suggestion').show();
} else {
$('#upgrade-suggestion').hide();
}
$('#summary').html(generateSummary());
};
function generateSummary() {
let summary = "<h6>Summary of Selected Services:</h6><ul>";
$('#service-selection .service').each(function() {
const service = $(this).find('h5').text();
$(this).find('input').each(function() {
const type = $(this).data('type');
const quantity = parseInt($(this).val()) || 0;
const costPerItem = serviceCredits[service][type];
if (quantity > 0) {
summary += `<li>${service}: ${type} × ${quantity} = ${(quantity * costPerItem)} credits</li>`;
}
});
});
summary += "</ul>";
return summary;
}
$(document).ready(function() {
$('[name="credit-package"]').change(function() {
const selectedPackage = $(this).val();
totalAvailableCredits = credits[selectedPackage].credits;
$('#credit-package-summary').html(`You selected the <strong>${selectedPackage}</strong> package. Total Credits: <strong>${totalAvailableCredits}</strong>`);
allocateCredits();
});
});
} catch (error) {
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(to right, #f8cdda, #f9bc8c);
color: #333;
text-align: center;
font-family: 'Arial', sans-serif;
}
#main-container {
margin: 50px auto;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 700px;
}
.service {
border: 1px solid #007bff;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
background: rgba(0, 123, 255, 0.1);
}
input[type='number'] {
width: 40px;
}
#upgrade-suggestion {
visibility: hidden;
color: red;
font-weight: bold;
}
h1, h5 {
color: #007bff;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Samas Digital - Creative Services Pricing Calculator</h1>
<div>
<h5>Select Credit Package</h5>
<div class="form-group">
<select class="form-control" name="credit-package">
<option value="">-- Select --</option>
<option value="Starter">Starter: ₹50,000 → 10 credits</option>
<option value="Growth">Growth: ₹1,00,000 → 22 credits</option>
<option value="Scale">Scale: ₹2,00,000 → 50 credits</option>
</select>
</div>
<div id="credit-package-summary"></div>
</div>
<div id="service-selection"></div>
<div id="summary"></div>
<h4>Total Credits: <span id="total-credits">0</span></h4>
<h4>Used Credits: <span id="used-credits">0</span></h4>
<h4>Remaining Credits: <span id="remaining-credits">0</span></h4>
<div id="upgrade-suggestion">Warning: You need to upgrade your package to cover the selected services!</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!