Changes to shipcalc.scroll.pub

root
root
26 days ago
Initial commit
body.html
Changed around line 1
+
+

Free Shipping Profit Calculator

+

Optimize your shipping strategy with data-driven insights

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Current Monthly Profit

+

$0

+
+
+

Break-Even Sales Increase

+

0%

+
+
+

Monthly Orders Needed

+

0

+
+
+
+
+
+
+
+ Current
+
+
+
+ Needed
+
+
+
+
+
+
+

Understanding Your Numbers

+

This calculator helps you visualize the impact of offering free shipping on your business. The break-even percentage shows how much your sales need to increase to maintain the same profit level when absorbing shipping costs.

+
+
+
+
+

Built with care for e-commerce businesses

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://shipcalc.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Free Shipping Profit Calculator | Optimize Your E-commerce Strategy
+ description Calculate how free shipping impacts your business profits and discover the sales volume needed to maintain profitability
+ keywords free shipping calculator, e-commerce profitability, shipping strategy, retail calculator
+ author ShipCalc
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # shipcalc.scroll.pub
+ Website generated from prompt: Create a Free Shipping calculator that shows in a visual way how many sales a shop can lose if they charge free shipping, and still profit. Or how many sales needs to go up, so they can start profiting.
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const calculator = {
+ elements: {
+ averageOrder: document.getElementById('averageOrder'),
+ shippingCost: document.getElementById('shippingCost'),
+ profitMargin: document.getElementById('profitMargin'),
+ monthlyOrders: document.getElementById('monthlyOrders'),
+ calculateBtn: document.getElementById('calculate'),
+ currentProfit: document.querySelector('#currentProfit .value'),
+ breakeven: document.querySelector('#breakeven .value'),
+ ordersNeeded: document.querySelector('#ordersNeeded .value'),
+ currentBar: document.querySelector('.current-bar .bar-fill'),
+ neededBar: document.querySelector('.needed-bar .bar-fill')
+ },
+
+ initialize() {
+ this.elements.calculateBtn.addEventListener('click', () => this.calculate());
+ this.calculate(); // Initial calculation
+ },
+
+ calculate() {
+ const averageOrder = parseFloat(this.elements.averageOrder.value);
+ const shippingCost = parseFloat(this.elements.shippingCost.value);
+ const profitMargin = parseFloat(this.elements.profitMargin.value) / 100;
+ const monthlyOrders = parseInt(this.elements.monthlyOrders.value);
+
+ // Calculate current profit
+ const profitPerOrder = averageOrder * profitMargin;
+ const currentMonthlyProfit = profitPerOrder * monthlyOrders;
+
+ // Calculate break-even point
+ const newProfitPerOrder = profitPerOrder - shippingCost;
+ const breakEvenOrders = (currentMonthlyProfit / newProfitPerOrder);
+ const percentageIncrease = ((breakEvenOrders - monthlyOrders) / monthlyOrders) * 100;
+
+ // Update UI
+ this.elements.currentProfit.textContent = `$${currentMonthlyProfit.toFixed(2)}`;
+ this.elements.breakeven.textContent = `${percentageIncrease.toFixed(1)}%`;
+ this.elements.ordersNeeded.textContent = Math.ceil(breakEvenOrders);
+
+ // Update visualization
+ const maxHeight = 280; // Maximum height for bars
+ this.elements.currentBar.style.height = `${maxHeight * 0.5}px`; // Current orders at 50% height
+ this.elements.neededBar.style.height = `${maxHeight * 0.5 * (breakEvenOrders/monthlyOrders)}px`;
+ }
+ };
+
+ calculator.initialize();
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2c3e50;
+ --secondary: #3498db;
+ --accent: #e74c3c;
+ --background: #f8f9fa;
+ --text: #2c3e50;
+ --card-bg: #ffffff;
+ --shadow: rgba(0,0,0,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ min-height: 100vh;
+ }
+
+ header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: var(--primary);
+ color: white;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ .calculator {
+ background: var(--card-bg);
+ border-radius: 1rem;
+ padding: 2rem;
+ box-shadow: 0 4px 6px var(--shadow);
+ margin-bottom: 2rem;
+ }
+
+ .input-group {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .input-field {
+ display: flex;
+ flex-direction: column;
+ }
+
+ label {
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ }
+
+ input {
+ padding: 0.8rem;
+ border: 2px solid #ddd;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ input:focus {
+ border-color: var(--secondary);
+ outline: none;
+ }
+
+ .cta-button {
+ background: var(--secondary);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+ display: block;
+ margin: 0 auto;
+ }
+
+ .cta-button:hover {
+ background: #2980b9;
+ transform: translateY(-2px);
+ }
+
+ .results {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ margin: 2rem 0;
+ }
+
+ .result-card {
+ background: var(--background);
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ text-align: center;
+ }
+
+ .result-card h3 {
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .value {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--secondary);
+ }
+
+ .visualization {
+ margin: 2rem 0;
+ }
+
+ .chart {
+ display: flex;
+ gap: 2rem;
+ height: 300px;
+ align-items: flex-end;
+ padding: 2rem;
+ }
+
+ .bar {
+ flex: 1;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .bar-fill {
+ width: 100%;
+ background: var(--secondary);
+ border-radius: 0.5rem 0.5rem 0 0;
+ transition: height 0.5s ease;
+ }
+
+ .bar-label {
+ margin-top: 0.5rem;
+ font-weight: 500;
+ }
+
+ .info {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px var(--shadow);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 768px) {
+ header {
+ padding: 2rem 1rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .calculator {
+ padding: 1.5rem;
+ }
+
+ .input-group {
+ grid-template-columns: 1fr;
+ }
+ }