383 lines
15 KiB
Plaintext
383 lines
15 KiB
Plaintext
@model OnlyOneAccessTemplate.Models.SiteConfiguration
|
|
@{
|
|
ViewData["Title"] = ViewBag.Title ?? Model.SiteTitle;
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@section Head {
|
|
<!-- Google AdSense Script -->
|
|
@if (ViewBag.GoogleAdsEnabled == true && !string.IsNullOrEmpty(ViewBag.GoogleAdsPublisher))
|
|
{
|
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=@ViewBag.GoogleAdsPublisher"
|
|
crossorigin="anonymous"></script>
|
|
}
|
|
}
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="hero-content text-center">
|
|
<h1 class="hero-title">
|
|
@(ViewBag.MainTitle ?? "FERRAMENTAS DE CONVERSÃO")
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
@(ViewBag.MainDescription ?? "Converta seus arquivos de forma rápida e segura")
|
|
</p>
|
|
|
|
<div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
|
|
<span class="feature-badge">
|
|
<i class="fas fa-code me-2"></i> Standalone
|
|
</span>
|
|
<span class="feature-badge">
|
|
<i class="fas fa-globe me-2"></i> Multi-idioma
|
|
</span>
|
|
<span class="feature-badge">
|
|
<i class="fas fa-bolt me-2"></i> API Ready
|
|
</span>
|
|
<span class="feature-badge">
|
|
<i class="fas fa-shield-alt me-2"></i> Seguro
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Banner Superior Ads -->
|
|
<div class="container-fluid mt-3">
|
|
<div class="ad-placeholder banner">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio Banner Superior</strong><br>
|
|
<small>728x90 ou responsivo</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layout Principal -->
|
|
<div class="container-fluid main-layout">
|
|
<div class="row">
|
|
<!-- Sidebar Esquerda - Anúncios -->
|
|
<div class="col-xl-2 col-lg-2 d-none d-lg-block">
|
|
<div class="ad-placeholder sidebar">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio Vertical</strong><br>
|
|
<small>160x600 ou 300x600</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu de Módulos -->
|
|
<div class="col-xl-3 col-lg-3 col-md-4">
|
|
<div class="modules-sidebar">
|
|
<h5 class="fw-bold mb-3 d-flex align-items-center">
|
|
<i class="fas fa-puzzle-piece text-primary me-2"></i>
|
|
Conversores Disponíveis
|
|
</h5>
|
|
|
|
<div id="modules-list" class="modules-list">
|
|
<!-- Loading state -->
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<button class="btn btn-outline-primary btn-sm" onclick="refreshModulesList()">
|
|
<i class="fas fa-sync me-1"></i> Atualizar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Área Principal do Conversor -->
|
|
<div class="col-xl-5 col-lg-5 col-md-8">
|
|
<!-- Anúncio Retangular Pré-Conversor -->
|
|
<div class="ad-placeholder rectangle">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio Retangular</strong><br>
|
|
<small>300x250</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card do Conversor -->
|
|
<div class="converter-area fade-in">
|
|
<div class="converter-header">
|
|
<h2 class="h3 mb-3">
|
|
<i class="fas fa-exchange-alt me-2"></i>
|
|
<span id="converter-title">Selecione um Conversor</span>
|
|
</h2>
|
|
<p class="mb-0" id="converter-description">
|
|
Escolha uma ferramenta de conversão no menu ao lado
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Steps do Processo -->
|
|
<div class="step-indicators">
|
|
<div class="step-indicator">
|
|
<div class="step-number">1</div>
|
|
<h6 class="step-title">Entrada</h6>
|
|
<p class="step-description">Selecione ou cole seu conteúdo</p>
|
|
</div>
|
|
<div class="step-indicator">
|
|
<div class="step-number">2</div>
|
|
<h6 class="step-title">Processar</h6>
|
|
<p class="step-description">Aguarde o processamento</p>
|
|
</div>
|
|
<div class="step-indicator">
|
|
<div class="step-number">3</div>
|
|
<h6 class="step-title">Resultado</h6>
|
|
<p class="step-description">Baixe ou copie o resultado</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Área do Módulo -->
|
|
<div id="converter-container" class="p-4">
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-arrow-left fa-2x text-muted mb-3"></i>
|
|
<h5 class="text-muted">Selecione um conversor</h5>
|
|
<p class="text-muted">Escolha uma ferramenta no menu ao lado para começar</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anúncio Retangular Pós-Conversor -->
|
|
<div class="ad-placeholder rectangle">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio Pós-Conversão</strong><br>
|
|
<small>300x250</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Direita - Anúncios -->
|
|
<div class="col-xl-2 col-lg-2 d-none d-lg-block">
|
|
<div class="ad-placeholder sidebar">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio Vertical</strong><br>
|
|
<small>160x600 ou 300x600</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anúncio In-Feed -->
|
|
<div class="container my-4">
|
|
<div class="ad-placeholder" style="min-height: 120px;">
|
|
<i class="fas fa-rectangle-ad"></i>
|
|
<div>
|
|
<strong>Anúncio In-Feed</strong><br>
|
|
<small>Responsivo ou 728x90</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seção de Benefícios -->
|
|
<div class="container">
|
|
<section class="benefits-section">
|
|
<div class="text-center mb-5">
|
|
<h2 class="h3 fw-bold mb-3">Por Que Usar Nossas Ferramentas?</h2>
|
|
<p class="text-muted">Descubra os benefícios de nossas soluções</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-rocket"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-2">Rápido e Fácil</h6>
|
|
<p class="text-muted small mb-0">Conversão instantânea com poucos cliques</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-2">Seguro</h6>
|
|
<p class="text-muted small mb-0">Seus dados estão protegidos</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-2">Confiável</h6>
|
|
<p class="text-muted small mb-0">Milhares de usuários satisfeitos</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<h6 class="fw-bold mb-2">24/7 Disponível</h6>
|
|
<p class="text-muted small mb-0">Acesso a qualquer hora</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Anúncio Multiplex -->
|
|
<div class="container my-4">
|
|
<div class="ad-placeholder" style="min-height: 200px;">
|
|
<i class="fas fa-th"></i>
|
|
<div>
|
|
<strong>Anúncio Multiplex</strong><br>
|
|
<small>Formato flexível</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="~/js/module-loader.js"></script>
|
|
<script>
|
|
let currentModuleId = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
loadModulesList();
|
|
|
|
// Auto-carregar primeiro módulo se não houver seleção
|
|
setTimeout(() => {
|
|
const firstModule = document.querySelector('.module-item');
|
|
if (firstModule && !currentModuleId) {
|
|
firstModule.click();
|
|
}
|
|
}, 2000);
|
|
});
|
|
|
|
async function loadModulesList() {
|
|
try {
|
|
console.log('🔄 Carregando lista de módulos...');
|
|
const response = await fetch('/api/menu/converters?language=pt');
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.menu) {
|
|
renderModulesList(data.menu);
|
|
} else {
|
|
showModulesError('Não foi possível carregar os módulos');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Erro ao carregar módulos:', error);
|
|
showModulesError('Erro de conexão');
|
|
}
|
|
}
|
|
|
|
function renderModulesList(menuData) {
|
|
const container = document.getElementById('modules-list');
|
|
let html = '';
|
|
|
|
menuData.forEach(category => {
|
|
html += `<div class="category-header">${category.category}</div>`;
|
|
|
|
category.items.forEach(item => {
|
|
const isNew = item.isNew ? '<span class="badge bg-warning badge-sm ms-1">Novo</span>' : '';
|
|
|
|
html += `
|
|
<a href="#" class="module-item" data-module-id="${item.moduleId}" onclick="loadModule('${item.moduleId}', '${item.title}', '${item.description}')">
|
|
<div class="module-icon">
|
|
<i class="${item.icon || 'fas fa-exchange-alt'}"></i>
|
|
</div>
|
|
<div class="module-title">${item.title}${isNew}</div>
|
|
<div class="module-description">${item.description || 'Ferramenta de conversão'}</div>
|
|
</a>
|
|
`;
|
|
});
|
|
});
|
|
|
|
if (html === '') {
|
|
html = `
|
|
<div class="text-center py-4 text-muted">
|
|
<i class="fas fa-puzzle-piece fa-2x mb-3"></i>
|
|
<p>Nenhum módulo disponível</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
console.log('✅ Lista de módulos carregada');
|
|
}
|
|
|
|
function showModulesError(message) {
|
|
const container = document.getElementById('modules-list');
|
|
container.innerHTML = `
|
|
<div class="text-center py-4 text-danger">
|
|
<i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
|
|
<p>${message}</p>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="loadModulesList()">
|
|
Tentar Novamente
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function loadModule(moduleId, title, description) {
|
|
if (currentModuleId === moduleId) return;
|
|
|
|
// Atualizar UI
|
|
document.querySelectorAll('.module-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
document.querySelector(`[data-module-id="${moduleId}"]`).classList.add('active');
|
|
|
|
// Atualizar título
|
|
document.getElementById('converter-title').textContent = title;
|
|
document.getElementById('converter-description').textContent = description;
|
|
|
|
// Carregar módulo
|
|
const container = document.getElementById('converter-container');
|
|
container.innerHTML = `
|
|
<div class="text-center py-4">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">Carregando...</span>
|
|
</div>
|
|
<p>Carregando ${title}...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
const success = await window.ModuleLoader.loadModule(moduleId, 'converter-container', `/modules/${moduleId}`);
|
|
if (success) {
|
|
currentModuleId = moduleId;
|
|
console.log(`✅ Módulo ${moduleId} carregado com sucesso`);
|
|
|
|
// Analytics
|
|
if (typeof gtag !== 'undefined') {
|
|
gtag('event', 'module_loaded', {
|
|
'module_id': moduleId,
|
|
'module_title': title
|
|
});
|
|
}
|
|
} else {
|
|
throw new Error('Falha ao carregar módulo');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Erro ao carregar módulo:', error);
|
|
container.innerHTML = `
|
|
<div class="text-center py-4 text-danger">
|
|
<i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
|
|
<h6>Erro ao carregar ${title}</h6>
|
|
<p class="text-muted">${error.message}</p>
|
|
<button class="btn btn-outline-primary" onclick="loadModule('${moduleId}', '${title}', '${description}')">
|
|
Tentar Novamente
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function refreshModulesList() {
|
|
const container = document.getElementById('modules-list');
|
|
container.innerHTML = `
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
<div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
|
|
`;
|
|
loadModulesList();
|
|
}
|
|
|
|
// Event listener para módulos carregados
|
|
document.addEventListener('moduleLoaded', function (event) {
|
|
console.log('🎯 Evento moduleLoaded:', event.detail);
|
|
});
|
|
</script>
|
|
} |