343 lines
17 KiB
Plaintext
343 lines
17 KiB
Plaintext
@model QRRapidoApp.Models.ViewModels.UpgradeViewModel
|
|
@using Microsoft.Extensions.Localization
|
|
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
|
|
@{
|
|
ViewData["Title"] = "QR Rapido Premium";
|
|
}
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<!-- Hero Section -->
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 text-gradient">
|
|
<i class="fas fa-rocket"></i> QR Rapido Premium
|
|
</h1>
|
|
<p class="lead text-muted">
|
|
@Localizer["PremiumAccelerateProductivity"]
|
|
</p>
|
|
<div class="badge bg-success fs-6 p-2">
|
|
<i class="fas fa-bolt"></i> @Localizer["ThreeTimesFaster"]
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Status -->
|
|
@if (Model.IsAdFreeActive)
|
|
{
|
|
<div class="alert alert-info border-0 shadow-sm mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h6><i class="fas fa-info-circle"></i> @Localizer["CurrentStatus"]</h6>
|
|
<p class="mb-0">
|
|
@Localizer["YouHave"] <strong>@Model.DaysUntilAdExpiry @Localizer["DaysRemainingNoAds"]</strong>
|
|
@Localizer["UpgradeNowForever"]
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="badge bg-success p-2">
|
|
@Model.DaysUntilAdExpiry @Localizer["DaysRemaining"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Pricing Card -->
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card shadow-lg border-warning">
|
|
<div class="card-header bg-warning text-dark text-center">
|
|
<h3 class="mb-0">
|
|
<i class="fas fa-crown"></i> QR Rapido Premium
|
|
</h3>
|
|
<small>@Localizer["MostPopularPlan"]</small>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="display-3 text-warning fw-bold mb-2">
|
|
R$ @Model.PremiumPrice.ToString("0.00")
|
|
</div>
|
|
<p class="text-muted">@Localizer["PerMonth"]</p>
|
|
|
|
<div class="list-group list-group-flush mb-4">
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-infinity text-success me-2"></i>
|
|
<strong>@Localizer["UnlimitedQRCodes"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-bolt text-success me-2"></i>
|
|
<strong>@Localizer["UltraFastGeneration04s"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-ban text-success me-2"></i>
|
|
<strong>@Localizer["NoAdsForever"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-magic text-success me-2"></i>
|
|
<strong>@Localizer["DynamicQRCodes"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-chart-line text-success me-2"></i>
|
|
<strong>@Localizer["RealTimeAnalytics"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-headset text-success me-2"></i>
|
|
<strong>@Localizer["PrioritySupport"]</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-code text-success me-2"></i>
|
|
<strong>@Localizer["DeveloperAPI"]</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="upgrade-btn" class="btn btn-warning btn-lg w-100 mb-3">
|
|
<i class="fas fa-rocket"></i> @Localizer["UpgradeNowButton"]
|
|
<div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
|
|
</button>
|
|
|
|
<small class="text-muted">
|
|
<i class="fas fa-shield-alt"></i> @Localizer["SecurePaymentStripe"]
|
|
<br>
|
|
<i class="fas fa-times-circle"></i> @Localizer["CancelAnytime"]
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Comparison -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-balance-scale"></i> @Localizer["PlanComparison"]
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>@Localizer["Feature"]</th>
|
|
<th class="text-center">Free</th>
|
|
<th class="text-center bg-warning text-dark">Premium</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>@Localizer["QRCodesPerDay"]</td>
|
|
<td class="text-center">50</td>
|
|
<td class="text-center"><i class="fas fa-infinity text-success"></i> @Localizer["Unlimited"]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>@Localizer["GenerationSpeed"]</td>
|
|
<td class="text-center">1.2s</td>
|
|
<td class="text-center"><strong class="text-success">0.4s</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>@Localizer["Ads"]</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i> @Localizer["NoAds"]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>@Localizer["DynamicQRCodes"]</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>@Localizer["DetailedAnalytics"]</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>@Localizer["PrioritySupport"]</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>API access</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speed Demonstration -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-stopwatch"></i> @Localizer["SpeedDemonstration"]
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-md-4">
|
|
<div class="card border-danger">
|
|
<div class="card-body">
|
|
<h5 class="text-danger">@Localizer["Competitors"]</h5>
|
|
<div class="display-4 text-danger">4.5s</div>
|
|
<p class="text-muted">@Localizer["AverageTime"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-primary">
|
|
<div class="card-body">
|
|
<h5 class="text-primary">QR Rapido Free</h5>
|
|
<div class="display-4 text-primary">1.2s</div>
|
|
<p class="text-muted">@Localizer["ThreeTimesFaster"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-success">
|
|
<div class="card-body">
|
|
<h5 class="text-success">QR Rapido Premium</h5>
|
|
<div class="display-4 text-success">0.4s</div>
|
|
<p class="text-muted">@Localizer["ElevenTimesFaster"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-question-circle"></i> @Localizer["FAQ"]
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="faqAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
|
@Localizer["CanCancelAnytime"]
|
|
</button>
|
|
</h2>
|
|
<div id="faq1" class="accordion-collapse collapse show">
|
|
<div class="accordion-body">
|
|
@Localizer["CancelAnytimeAnswer"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
|
@Localizer["WhatAreDynamicQR"]
|
|
</button>
|
|
</h2>
|
|
<div id="faq2" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
@Localizer["DynamicQRAnswer"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
|
@Localizer["HowPrioritySupport"]
|
|
</button>
|
|
</h2>
|
|
<div id="faq3" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
@Localizer["PrioritySupportAnswer"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
document.getElementById('upgrade-btn').addEventListener('click', async function() {
|
|
const btn = this;
|
|
const spinner = btn.querySelector('.spinner-border');
|
|
|
|
btn.disabled = true;
|
|
spinner.classList.remove('d-none');
|
|
|
|
try {
|
|
const response = await fetch('/Premium/CreateCheckout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Track conversion attempt
|
|
if (typeof gtag !== 'undefined') {
|
|
gtag('event', 'begin_checkout', {
|
|
'event_category': 'Premium',
|
|
'value': @Model.PremiumPrice,
|
|
'currency': 'BRL'
|
|
});
|
|
}
|
|
|
|
window.location.href = result.url;
|
|
} else {
|
|
showToast('@Localizer["PaymentProcessingError"]' + result.error, 'danger');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro:', error);
|
|
showToast('@Localizer["PaymentErrorTryAgain"]', 'danger');
|
|
} finally {
|
|
btn.disabled = false;
|
|
spinner.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
// Track page view
|
|
if (typeof gtag !== 'undefined') {
|
|
gtag('event', 'page_view', {
|
|
'page_title': 'Premium Upgrade',
|
|
'page_location': window.location.href
|
|
});
|
|
}
|
|
|
|
// Toast notification function
|
|
function showToast(message, type) {
|
|
// Create toast container if doesn't exist
|
|
let toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) {
|
|
toastContainer = document.createElement('div');
|
|
toastContainer.id = 'toast-container';
|
|
toastContainer.className = 'toast-container position-fixed top-0 start-0 p-3';
|
|
toastContainer.style.zIndex = '1060';
|
|
toastContainer.style.marginTop = '80px';
|
|
document.body.appendChild(toastContainer);
|
|
}
|
|
|
|
// Create toast element
|
|
const toastId = 'toast-' + Date.now();
|
|
const toastElement = document.createElement('div');
|
|
toastElement.innerHTML = `
|
|
<div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">${message}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
toastContainer.appendChild(toastElement);
|
|
const toast = new bootstrap.Toast(toastElement.querySelector('.toast'), { delay: 5000 });
|
|
toast.show();
|
|
|
|
// Remove toast element after it's hidden
|
|
toastElement.querySelector('.toast').addEventListener('hidden.bs.toast', function() {
|
|
toastElement.remove();
|
|
});
|
|
}
|
|
</script>
|
|
} |