commit 5c3cebd27b43fe457a97a56a4f4db7e0c582fa4b
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 00:03:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..412a338
--- /dev/null
+++ b/body.html
@@ -0,0 +1,66 @@
+<header>
+ <h1>Free Shipping Profit Calculator</h1>
+ <p class="tagline">Optimize your shipping strategy with data-driven insights</p>
+</header>
+
+<main>
+ <section class="calculator">
+ <div class="input-group">
+ <div class="input-field">
+ <label for="averageOrder">Average Order Value ($)</label>
+ <input type="number" id="averageOrder" min="0" step="0.01" value="50">
+ </div>
+ <div class="input-field">
+ <label for="shippingCost">Average Shipping Cost ($)</label>
+ <input type="number" id="shippingCost" min="0" step="0.01" value="7.99">
+ </div>
+ <div class="input-field">
+ <label for="profitMargin">Current Profit Margin (%)</label>
+ <input type="number" id="profitMargin" min="0" max="100" step="0.1" value="30">
+ </div>
+ <div class="input-field">
+ <label for="monthlyOrders">Current Monthly Orders</label>
+ <input type="number" id="monthlyOrders" min="0" step="1" value="100">
+ </div>
+ </div>
+
+ <button id="calculate" class="cta-button">Calculate Impact</button>
+
+ <div class="results">
+ <div class="result-card" id="currentProfit">
+ <h3>Current Monthly Profit</h3>
+ <p class="value">$0</p>
+ </div>
+ <div class="result-card" id="breakeven">
+ <h3>Break-Even Sales Increase</h3>
+ <p class="value">0%</p>
+ </div>
+ <div class="result-card" id="ordersNeeded">
+ <h3>Monthly Orders Needed</h3>
+ <p class="value">0</p>
+ </div>
+ </div>
+
+ <div class="visualization">
+ <div class="chart">
+ <div class="bar current-bar">
+ <div class="bar-fill"></div>
+ <span class="bar-label">Current</span>
+ </div>
+ <div class="bar needed-bar">
+ <div class="bar-fill"></div>
+ <span class="bar-label">Needed</span>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="info">
+ <h2>Understanding Your Numbers</h2>
+ <p>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.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Built with care for e-commerce businesses</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b606743
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+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
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..8afa64e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c1a0f46
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+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();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..80b0e2a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,192 @@
+: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;
+ }
+}