426 lines
20 KiB
Plaintext
426 lines
20 KiB
Plaintext
@using QRRapidoApp.Services
|
|
@using Microsoft.Extensions.Localization
|
|
@inject AdDisplayService AdService
|
|
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
|
|
|
|
@{
|
|
ViewData["Title"] = Localizer["HowToUse"];
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
<div class="container py-5">
|
|
<!-- Hero Section -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<div class="mb-5">
|
|
<h1 class="display-5 fw-bold text-primary mb-3">
|
|
<i class="fas fa-book-open me-3"></i>@Localizer["HowToUseTitle"]
|
|
</h1>
|
|
<p class="lead text-muted">@Localizer["HowToUseSubtitle"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Start Guide -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<div class="card border-primary">
|
|
<div class="card-header bg-primary text-white text-center">
|
|
<h3 class="mb-0">
|
|
<i class="fas fa-rocket me-2"></i>@Localizer["QuickStartGuide"]
|
|
</h3>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="text-center step-card h-100 p-3">
|
|
<div class="step-number bg-primary text-white rounded-circle mx-auto mb-3">1</div>
|
|
<i class="fas fa-list fa-2x text-primary mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["Step1Title"]</h6>
|
|
<p class="small text-muted">@Localizer["Step1Description"]</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="text-center step-card h-100 p-3">
|
|
<div class="step-number bg-success text-white rounded-circle mx-auto mb-3">2</div>
|
|
<i class="fas fa-edit fa-2x text-success mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["Step2Title"]</h6>
|
|
<p class="small text-muted">@Localizer["Step2Description"]</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="text-center step-card h-100 p-3">
|
|
<div class="step-number bg-warning text-dark rounded-circle mx-auto mb-3">3</div>
|
|
<i class="fas fa-bolt fa-2x text-warning mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["Step3Title"]</h6>
|
|
<p class="small text-muted">@Localizer["Step3Description"]</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="text-center step-card h-100 p-3">
|
|
<div class="step-number bg-info text-white rounded-circle mx-auto mb-3">4</div>
|
|
<i class="fas fa-download fa-2x text-info mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["Step4Title"]</h6>
|
|
<p class="small text-muted">@Localizer["Step4Description"]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Guides by QR Type -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2 class="text-center text-primary mb-5">
|
|
<i class="fas fa-cogs me-2"></i>@Localizer["DetailedGuides"]
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- URL/Link Guide -->
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-primary">
|
|
<i class="fas fa-link me-2"></i>@Localizer["URLQRGuide"]
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-3">@Localizer["URLQRGuideDesc"]</p>
|
|
<ol class="small">
|
|
<li>@Localizer["URLGuideStep1"]</li>
|
|
<li>@Localizer["URLGuideStep2"]</li>
|
|
<li>@Localizer["URLGuideStep3"]</li>
|
|
<li>@Localizer["URLGuideStep4"]</li>
|
|
</ol>
|
|
<div class="alert alert-info border-0 small">
|
|
<i class="fas fa-lightbulb me-1"></i><strong>@Localizer["Tips"]:</strong> @Localizer["URLGuideTips"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WiFi Guide -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-primary">
|
|
<i class="fas fa-wifi me-2"></i>@Localizer["WiFiQRGuide"]
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-3">@Localizer["WiFiQRGuideDesc"]</p>
|
|
<ol class="small">
|
|
<li>@Localizer["WiFiGuideStep1"]</li>
|
|
<li>@Localizer["WiFiGuideStep2"]</li>
|
|
<li>@Localizer["WiFiGuideStep3"]</li>
|
|
<li>@Localizer["WiFiGuideStep4"]</li>
|
|
</ol>
|
|
<div class="alert alert-warning border-0 small">
|
|
<i class="fas fa-shield-alt me-1"></i><strong>@Localizer["Security"]:</strong> @Localizer["WiFiGuideSecurity"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- vCard Guide -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-primary">
|
|
<i class="fas fa-address-card me-2"></i>@Localizer["VCardQRGuide"]
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-3">@Localizer["VCardQRGuideDesc"]</p>
|
|
<ol class="small">
|
|
<li>@Localizer["VCardGuideStep1"]</li>
|
|
<li>@Localizer["VCardGuideStep2"]</li>
|
|
<li>@Localizer["VCardGuideStep3"]</li>
|
|
<li>@Localizer["VCardGuideStep4"]</li>
|
|
<li>@Localizer["VCardGuideStep5"]</li>
|
|
</ol>
|
|
<div class="alert alert-success border-0 small">
|
|
<i class="fas fa-mobile-alt me-1"></i><strong>@Localizer["Compatibility"]:</strong> @Localizer["VCardGuideCompat"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WhatsApp Guide -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-primary">
|
|
<i class="fab fa-whatsapp me-2"></i>@Localizer["WhatsAppQRGuide"]
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-3">@Localizer["WhatsAppQRGuideDesc"]</p>
|
|
<ol class="small">
|
|
<li>@Localizer["WhatsAppGuideStep1"]</li>
|
|
<li>@Localizer["WhatsAppGuideStep2"]</li>
|
|
<li>@Localizer["WhatsAppGuideStep3"]</li>
|
|
<li>@Localizer["WhatsAppGuideStep4"]</li>
|
|
</ol>
|
|
<div class="alert alert-info border-0 small">
|
|
<i class="fas fa-info-circle me-1"></i><strong>@Localizer["Note"]:</strong> @Localizer["WhatsAppGuideNote"]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Features -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<div class="card border-warning">
|
|
<div class="card-header bg-warning text-dark">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-star me-2"></i>@Localizer["AdvancedFeatures"]
|
|
</h4>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row">
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="feature-item text-center p-3">
|
|
<i class="fas fa-palette fa-3x text-primary mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["CustomDesign"]</h6>
|
|
<p class="small text-muted">@Localizer["CustomDesignDesc"]</p>
|
|
<ul class="small text-start">
|
|
<li>@Localizer["ChangeColors"]</li>
|
|
<li>@Localizer["AdjustSize"]</li>
|
|
<li>@Localizer["SetMargins"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="feature-item text-center p-3">
|
|
<i class="fas fa-image fa-3x text-success mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["LogoIntegration"] <span class="badge bg-warning small">Premium</span></h6>
|
|
<p class="small text-muted">@Localizer["LogoIntegrationDesc"]</p>
|
|
<ul class="small text-start">
|
|
<li>@Localizer["UploadLogo"]</li>
|
|
<li>@Localizer["AdjustLogoSize"]</li>
|
|
<li>@Localizer["ColorMatching"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
|
<div class="feature-item text-center p-3">
|
|
<i class="fas fa-download fa-3x text-info mb-3"></i>
|
|
<h6 class="fw-bold">@Localizer["MultipleFormats"]</h6>
|
|
<p class="small text-muted">@Localizer["MultipleFormatsDesc"]</p>
|
|
<ul class="small text-start">
|
|
<li>@Localizer["PNGFormat"]</li>
|
|
<li>@Localizer["SVGFormat"]</li>
|
|
<li>@Localizer["PDFFormat"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Practices -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<div class="card bg-light border-0">
|
|
<div class="card-body p-5">
|
|
<h3 class="text-center text-primary mb-4">
|
|
<i class="fas fa-thumbs-up me-2"></i>@Localizer["BestPractices"]
|
|
</h3>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h6 class="text-success mb-3">
|
|
<i class="fas fa-check-circle me-2"></i>@Localizer["DoBest"]
|
|
</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice1"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice2"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice3"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-arrow-right text-success me-2"></i>@Localizer["BestPractice4"]
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<h6 class="text-danger mb-3">
|
|
<i class="fas fa-times-circle me-2"></i>@Localizer["AvoidMistakes"]
|
|
</h6>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake1"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake2"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake3"]
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-times text-danger me-2"></i>@Localizer["AvoidMistake4"]
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Troubleshooting -->
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<div class="card border-secondary">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-tools me-2"></i>@Localizer["Troubleshooting"]
|
|
</h4>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="accordion" id="troubleshootingAccordion">
|
|
|
|
<!-- QR Code not scanning -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
|
|
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
|
|
<strong>@Localizer["TroubleQRNotScanning"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
<div class="accordion-body">
|
|
<h6>@Localizer["PossibleCauses"]:</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["TroubleCause1"]</li>
|
|
<li>@Localizer["TroubleCause2"]</li>
|
|
<li>@Localizer["TroubleCause3"]</li>
|
|
</ul>
|
|
<h6>@Localizer["Solutions"]:</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["TroubleSolution1"]</li>
|
|
<li>@Localizer["TroubleSolution2"]</li>
|
|
<li>@Localizer["TroubleSolution3"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generation is slow -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
|
|
<i class="fas fa-hourglass-half text-info me-2"></i>
|
|
<strong>@Localizer["TroubleSlowGeneration"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
<div class="accordion-body">
|
|
<h6>@Localizer["ImprovementTips"]:</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["SpeedTip1"]</li>
|
|
<li>@Localizer["SpeedTip2"]</li>
|
|
<li>@Localizer["SpeedTip3"]</li>
|
|
<li>@Localizer["SpeedTip4"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download issues -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
|
|
<i class="fas fa-download text-success me-2"></i>
|
|
<strong>@Localizer["TroubleDownloadIssues"]</strong>
|
|
</button>
|
|
</h2>
|
|
<div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
<div class="accordion-body">
|
|
<h6>@Localizer["CommonSolutions"]:</h6>
|
|
<ul class="small">
|
|
<li>@Localizer["DownloadSolution1"]</li>
|
|
<li>@Localizer["DownloadSolution2"]</li>
|
|
<li>@Localizer["DownloadSolution3"]</li>
|
|
<li>@Localizer["DownloadSolution4"]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Get Started CTA -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card bg-primary text-white text-center">
|
|
<div class="card-body p-5">
|
|
<h3 class="mb-3">@Localizer["ReadyToStart"]</h3>
|
|
<p class="mb-4">@Localizer["ReadyToStartDesc"]</p>
|
|
<a href="@Url.Action("Index", "Home")" class="btn btn-light btn-lg">
|
|
<i class="fas fa-rocket me-2"></i>@Localizer["StartGenerating"]
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ad Space Footer (conditional) -->
|
|
@await Html.PartialAsync("_AdSpace", new { position = "footer" })
|
|
|
|
<style>
|
|
.step-card {
|
|
transition: transform 0.3s ease;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.step-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: var(--bs-primary);
|
|
}
|
|
|
|
.step-number {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.feature-item {
|
|
transition: all 0.3s ease;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.feature-item:hover {
|
|
border-color: var(--bs-primary);
|
|
background-color: rgba(0,123,255,0.05);
|
|
}
|
|
|
|
.card {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
|
|
}
|
|
</style> |