retoor
619e320780
Add multi-tier subscription system (Starter, Professional, Enterprise) with per-tier storage and bandwidth pricing, replace static free-tier limits with nullable usage-based fields in SubscriptionPlan model, introduce subscribe/unsubscribe API endpoints with plan validation, update invoice generator to calculate costs based on user's active plan tier, and refactor pricing page to load plans dynamically from backend API instead of hardcoded HTML.
474 lines
15 KiB
HTML
474 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Pricing - MyWebdav Cloud Storage{% endblock %}
|
|
|
|
{% block description %}Simple, transparent pay-as-you-go pricing. Only pay for what you use with no hidden fees.{%
|
|
endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.content-section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
color: #1565c0;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.25rem;
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.pricing-hero {
|
|
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
|
|
color: white;
|
|
padding: 3rem;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.pricing-hero-amount {
|
|
font-size: 5rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.pricing-hero-description {
|
|
font-size: 1.5rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.pricing-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
border: 2px solid #e0e0e0;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
border-color: #d32f2f;
|
|
box-shadow: 0 8px 24px rgba(211, 47, 47, 0.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
border-color: #1976d2;
|
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
|
|
}
|
|
|
|
.pricing-tier {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.pricing-amount {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #d32f2f;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 1rem;
|
|
color: #666;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.pricing-features li {
|
|
padding: 0.75rem 0;
|
|
color: #555;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.pricing-features li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pricing-features li:before {
|
|
content: "✓ ";
|
|
color: #d32f2f;
|
|
font-weight: bold;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.pricing-cta {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.calculator-section {
|
|
background: #f5f5f5;
|
|
padding: 3rem;
|
|
border-radius: 12px;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.calculator-title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.calculator-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.calculator-input-group {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.calculator-label {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
display: block;
|
|
}
|
|
|
|
.calculator-input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.calculator-result {
|
|
background: #1976d2;
|
|
color: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.calculator-result-label {
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.calculator-result-amount {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.faq-section {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.faq-title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.faq-item {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 2px solid #e0e0e0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.faq-question {
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.faq-answer {
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.pricing-hero-amount {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content-section">
|
|
<h1 class="page-title">SIMPLE, TRANSPARENT PRICING</h1>
|
|
<p class="page-subtitle">Pay only for what you use. No hidden fees, no surprises.</p>
|
|
|
|
<div class="pricing-hero">
|
|
<h2 style="font-size: 2rem; margin: 0;">Simple Cloud Storage Pricing</h2>
|
|
<div class="pricing-hero-amount">$3-$5/TB</div>
|
|
<p class="pricing-hero-description">Pay only for what you use. No hidden features, just storage.</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid" id="pricing-plans">
|
|
<!-- Plans will be loaded dynamically from API -->
|
|
<div class="pricing-card">
|
|
<div class="pricing-tier">Loading...</div>
|
|
<div class="pricing-amount">$-</div>
|
|
<div class="pricing-period">Loading plans...</div>
|
|
<ul class="pricing-features">
|
|
<li>Loading subscription plans...</li>
|
|
</ul>
|
|
<div class="pricing-cta">
|
|
<button class="btn btn-secondary" style="width: 100%;" disabled>Loading...</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calculator-section">
|
|
<h2 class="calculator-title">Pricing Calculator</h2>
|
|
<div class="calculator-grid">
|
|
<div class="calculator-input-group">
|
|
<label class="calculator-label">Storage (GB)</label>
|
|
<input type="number" class="calculator-input" id="storage" value="100" min="0"
|
|
oninput="calculatePrice()">
|
|
</div>
|
|
<div class="calculator-input-group">
|
|
<label class="calculator-label">Bandwidth Egress (GB/month)</label>
|
|
<input type="number" class="calculator-input" id="bandwidth" value="50" min="0"
|
|
oninput="calculatePrice()">
|
|
</div>
|
|
</div>
|
|
<div class="calculator-result">
|
|
<div class="calculator-result-label">Estimated Monthly Cost</div>
|
|
<div class="calculator-result-amount" id="result">$0.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-section">
|
|
<h2 class="faq-title">Frequently Asked Questions</h2>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">How is storage calculated?</div>
|
|
<div class="faq-answer">Storage is calculated based on your average daily usage throughout the month. You're
|
|
charged per GB per month starting from the first GB. No free tiers or hidden limits.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">What is bandwidth egress?</div>
|
|
<div class="faq-answer">Bandwidth egress is data transferred out of MyWebdav (downloads). You're charged
|
|
per GB for downloads. Uploads (ingress) are always free.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Are there any hidden fees?</div>
|
|
<div class="faq-answer">No. You only pay for storage usage and download bandwidth. No setup fees,
|
|
no minimum charges, no surprise costs. The price you see is what you pay.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Can I cancel anytime?</div>
|
|
<div class="faq-answer">Yes. There are no long-term contracts or commitments. You can close your account at
|
|
any time and will only be charged for actual usage up to that point.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">What payment methods do you accept?</div>
|
|
<div class="faq-answer">We accept all major credit cards through our payment processor Stripe.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">Do you offer volume discounts?</div>
|
|
<div class="faq-answer">Yes. Our Enterprise tier offers lower rates for high volume usage (10TB+).
|
|
Contact us for details on volume pricing.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadSubscriptionPlans() {
|
|
try {
|
|
const response = await fetch('/api/billing/plans');
|
|
if (!response.ok) throw new Error('Failed to load plans');
|
|
|
|
const plans = await response.json();
|
|
const plansContainer = document.getElementById('pricing-plans');
|
|
|
|
plansContainer.innerHTML = plans.map(plan => {
|
|
const isFeatured = plan.name === 'professional';
|
|
|
|
// Set pricing based on plan name
|
|
let storagePrice, bandwidthPrice, ctaText, ctaAction, features;
|
|
if (plan.name === 'starter') {
|
|
storagePrice = '$0.005/GB';
|
|
bandwidthPrice = '$0.008/GB';
|
|
ctaText = 'Get Started';
|
|
ctaAction = () => subscribeToPlan('starter');
|
|
features = [
|
|
'Cloud storage for individuals',
|
|
'Storage: ' + storagePrice,
|
|
'Bandwidth: ' + bandwidthPrice,
|
|
'Free uploads (ingress)',
|
|
'WebDAV access',
|
|
'SFTP access',
|
|
'API access',
|
|
'File versioning',
|
|
'99.9% uptime SLA',
|
|
'Email support'
|
|
];
|
|
} else if (plan.name === 'professional') {
|
|
storagePrice = '$0.004/GB';
|
|
bandwidthPrice = '$0.007/GB';
|
|
ctaText = 'Choose Plan';
|
|
ctaAction = () => subscribeToPlan('professional');
|
|
features = [
|
|
'Cloud storage for professionals',
|
|
'Storage: ' + storagePrice,
|
|
'Bandwidth: ' + bandwidthPrice,
|
|
'Free uploads (ingress)',
|
|
'WebDAV access',
|
|
'SFTP access',
|
|
'API access',
|
|
'File versioning',
|
|
'99.9% uptime SLA',
|
|
'Priority email support'
|
|
];
|
|
} else if (plan.name === 'enterprise') {
|
|
storagePrice = '$0.003/GB (10TB+)';
|
|
bandwidthPrice = '$0.005/GB';
|
|
ctaText = 'Contact Sales';
|
|
ctaAction = () => window.location.href = '/support';
|
|
features = [
|
|
'Cloud storage for enterprises',
|
|
'Storage: ' + storagePrice,
|
|
'Bandwidth: ' + bandwidthPrice,
|
|
'Free uploads (ingress)',
|
|
'WebDAV access',
|
|
'SFTP access',
|
|
'API access',
|
|
'File versioning',
|
|
'99.9% uptime SLA',
|
|
'Priority email support',
|
|
'Volume discounts available'
|
|
];
|
|
}
|
|
|
|
return `
|
|
<div class="pricing-card ${isFeatured ? 'featured' : ''}">
|
|
<div class="pricing-tier">${plan.display_name}</div>
|
|
<div class="pricing-amount">${plan.price_monthly > 0 ? '$' + plan.price_monthly : 'Usage-based'}</div>
|
|
<div class="pricing-period">Billed monthly based on usage</div>
|
|
<ul class="pricing-features">
|
|
${features.map(feature => `<li>${feature}</li>`).join('')}
|
|
</ul>
|
|
<div class="pricing-cta">
|
|
<button class="btn ${isFeatured ? 'btn-primary' : 'btn-secondary'}"
|
|
style="width: 100%;"
|
|
onclick="(${ctaAction})()">
|
|
${ctaText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading plans:', error);
|
|
document.getElementById('pricing-plans').innerHTML = `
|
|
<div class="pricing-card">
|
|
<div class="pricing-tier">Error</div>
|
|
<div class="pricing-amount">-</div>
|
|
<div class="pricing-period">Failed to load plans</div>
|
|
<ul class="pricing-features">
|
|
<li>Please refresh the page and try again</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
async function subscribeToPlan(planName) {
|
|
try {
|
|
// Check if user is logged in
|
|
const response = await fetch('/api/auth/me');
|
|
if (!response.ok) {
|
|
// User not logged in, redirect to login
|
|
window.location.href = '/app#login';
|
|
return;
|
|
}
|
|
|
|
const subscribeResponse = await fetch('/api/billing/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ plan_name: planName })
|
|
});
|
|
|
|
if (!subscribeResponse.ok) {
|
|
const error = await subscribeResponse.json();
|
|
throw new Error(error.detail || 'Failed to subscribe');
|
|
}
|
|
|
|
const result = await subscribeResponse.json();
|
|
alert(result.message);
|
|
|
|
} catch (error) {
|
|
console.error('Subscription error:', error);
|
|
alert(error.message || 'Failed to subscribe. Please try again.');
|
|
}
|
|
}
|
|
|
|
function calculatePrice() {
|
|
const storage = parseFloat(document.getElementById('storage').value) || 0;
|
|
const bandwidth = parseFloat(document.getElementById('bandwidth').value) || 0;
|
|
|
|
// Professional tier pricing (featured)
|
|
const storageCost = storage * 0.004;
|
|
const bandwidthCost = bandwidth * 0.007;
|
|
|
|
const total = storageCost + bandwidthCost;
|
|
|
|
document.getElementById('result').textContent = '$' + total.toFixed(2);
|
|
}
|
|
|
|
// Load plans when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadSubscriptionPlans();
|
|
calculatePrice();
|
|
});
|
|
</script>
|
|
{% endblock %} |