Scribd
Upload
11 views24 pages

Sistema de Serviços Online Interativo

This document is an HTML template for a service system interface, featuring a responsive design with a gradient background and various styled components such as buttons, cards, and progress bars. It includes animations for elements like loading indicators and service selection, as well as a structure for user interaction, including account creation and form inputs. The CSS styles enhance the visual appeal and usability of the interface across different screen sizes.

Uploaded by

manodaigreja123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views24 pages

Sistema de Serviços Online Interativo

This document is an HTML template for a service system interface, featuring a responsive design with a gradient background and various styled components such as buttons, cards, and progress bars. It includes animations for elements like loading indicators and service selection, as well as a structure for user interaction, including account creation and form inputs. The CSS styles enhance the visual appeal and usability of the interface across different screen sizes.

Uploaded by

manodaigreja123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Serviços</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
min-height: 100vh;
color: white;
overflow-x: hidden;
}

.background-blur {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg
xmlns="[Link] viewBox="0 0 100 100"><defs><pattern id="grid"
width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10"
fill="none" stroke="%23333" stroke-width="0.5"
opacity="0.3"/></pattern></defs><rect width="100" height="100"
fill="url(%23grid)"/></svg>');
z-index: -1;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 600px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.progress-bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
margin-bottom: 30px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #00ff6a, #00cc55);
border-radius: 2px;
transition: width 0.5s ease;
width: 0%;
}

.step-1 .progress-fill { width: 20%; }


.step-2 .progress-fill { width: 40%; }
.step-3 .progress-fill { width: 60%; }
.step-4 .progress-fill { width: 80%; }
.step-5 .progress-fill { width: 100%; }

h1 {
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
font-weight: bold;
color: white;
letter-spacing: 2px;
}

.logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
animation: fadeIn 0.8s ease-out;
}

.logo-container svg {
filter: drop-shadow(0 5px 15px rgba(0, 255, 106, 0.3));
animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
from {
filter: drop-shadow(0 5px 15px rgba(0, 255, 106, 0.3));
}
to {
filter: drop-shadow(0 5px 25px rgba(0, 255, 106, 0.5));
}
}

h2 {
text-align: center;
margin-bottom: 25px;
font-size: 1.8em;
color: #e0e0e0;
}

.button {
background: linear-gradient(135deg, #00ff6a, #00cc55);
border: none;
border-radius: 12px;
padding: 15px 30px;
color: white;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: block;
width: 100%;
margin: 15px 0;
text-transform: uppercase;
letter-spacing: 1px;
}

.button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 255, 106, 0.3);
background: linear-gradient(135deg, #00cc55, #00ff6a);
}

.button:active {
transform: translateY(0);
}

.button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.service-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 106, 0.1),
transparent);
transition: left 0.5s ease;
}

.service-card:hover::before {
left: 100%;
}

.service-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 255, 106, 0.5);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.[Link] {
border-color: #00ff6a;
background: rgba(0, 255, 106, 0.1);
}

.service-name {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
color: #e0e0e0;
}

.service-price {
font-size: 1.1em;
color: #00ff6a;
font-weight: bold;
}

.selected-badge {
position: absolute;
top: 10px;
right: 10px;
background: #00ff6a;
color: black;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
}
.[Link] .selected-badge {
opacity: 1;
transform: scale(1);
}

.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.form-group {
display: flex;
flex-direction: column;
}

.[Link]-width {
grid-column: 1 / -1;
}

label {
margin-bottom: 8px;
color: #e0e0e0;
font-weight: 500;
}

input, select, textarea {


background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 12px;
color: white;
font-size: 1em;
transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {


outline: none;
border-color: #00ff6a;
box-shadow: 0 0 10px rgba(0, 255, 106, 0.3);
}

input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

.file-input {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
}

.file-input input[type=file] {
position: absolute;
left: -9999px;
}
.file-input-label {
background: rgba(255, 255, 255, 0.1);
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: block;
}

.file-input-label:hover {
border-color: #00ff6a;
background: rgba(0, 255, 106, 0.1);
}

textarea {
resize: vertical;
min-height: 100px;
}

.back-button {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: white;
margin-right: 15px;
}

.back-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
}

.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin-right: 10px;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.step {
display: none;
}
.[Link] {
display: block;
}

.confirmation-content {
text-align: center;
}

.success-icon {
font-size: 4em;
margin-bottom: 20px;
animation: bounce 0.6s ease-out;
}

@keyframes bounce {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.confirmation-message {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 30px;
color: #e0e0e0;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

/* Loading Screen Styles */


.loading-content {
text-align: center;
padding: 20px;
}

.loading-spinner {
width: 80px;
height: 80px;
margin: 30px auto;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top: 4px solid #00ff6a;
border-radius: 50%;
animation: spinLarge 1.5s linear infinite;
}

@keyframes spinLarge {
to { transform: rotate(360deg); }
}

.loading-text {
font-size: 1.5em;
margin-bottom: 20px;
color: #e0e0e0;
}

.loading-subtext {
font-size: 1em;
color: #a0a0a0;
margin-bottom: 30px;
}

.loading-progress {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin: 20px 0;
}

.loading-progress-fill {
height: 100%;
background: linear-gradient(90deg, #00ff6a, #00cc55);
border-radius: 3px;
width: 0%;
transition: width 0.3s ease;
animation: progressAnimation 8s ease-out forwards;
}

@keyframes progressAnimation {
0% { width: 0%; }
20% { width: 15%; }
40% { width: 35%; }
60% { width: 55%; }
80% { width: 80%; }
95% { width: 95%; }
100% { width: 100%; }
}

.loading-steps {
text-align: left;
margin: 30px 0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.loading-step {
display: flex;
align-items: center;
margin: 15px 0;
opacity: 0.4;
transition: opacity 0.5s ease;
}

.[Link] {
opacity: 1;
color: #00ff6a;
}

.loading-step-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.[Link] .loading-step-icon {
background: #00ff6a;
color: black;
}

.auto-update-indicator {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 255, 106, 0.1);
border: 1px solid rgba(0, 255, 106, 0.3);
border-radius: 10px;
padding: 10px 15px;
color: #00ff6a;
font-size: 0.9em;
z-index: 1000;
animation: fadeIn 0.5s ease-out;
}

.update-status {
display: flex;
align-items: center;
gap: 8px;
}

.update-pulse {
width: 8px;
height: 8px;
background: #00ff6a;
border-radius: 50%;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}

@media (max-width: 768px) {


.container {
padding: 15px;
}

.card {
padding: 25px;
}

h1 {
font-size: 2em;
}

.services-grid {
grid-template-columns: 1fr;
}

.form-grid {
grid-template-columns: 1fr;
}

.button-group {
flex-direction: column;
}

.auto-update-indicator {
top: 10px;
right: 10px;
padding: 8px 12px;
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div class="background-blur"></div>

<!-- Indicador de atualização automática -->


<div class="auto-update-indicator">
<div class="update-status">
<div class="update-pulse"></div>
<span id="updateStatus">Sistema Ativo</span>
</div>
</div>

<div class="container">
<div class="card">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>

<!-- Passo 1: Página Inicial -->


<div id="step1" class="step active">
<h1>Sistema de Serviços</h1>
<h2>Escolha uma opção</h2>

<button class="button" onclick="selectFlow('create')">


Criar Conta
</button>

<button class="button" onclick="selectFlow('unlock')">


Desbloquear Conta
</button>
</div>

<!-- Passo 2: Seleção de Serviços -->


<div id="step2" class="step">
<h2 id="step2Title">Selecione os Serviços</h2>

<div class="services-grid" id="servicesGrid">


<!-- Cards de serviços serão inseridos aqui via JavaScript -->
</div>
<div class="button-group">
<button class="button back-button" onclick="goToStep(1)">
Voltar
</button>
<button class="button" id="continueBtn" onclick="goToStep(3)"
disabled>
Continuar
</button>
</div>
</div>

<!-- Passo 3: Formulário -->


<div id="step3" class="step">
<h2 id="step3Title">Complete seu Cadastro</h2>

<form id="mainForm">
<div class="form-grid" id="formFields">
<!-- Campos do formulário serão inseridos aqui via
JavaScript -->
</div>

<div class="button-group">
<button type="button" class="button back-button"
onclick="goToStep(2)">
Voltar
</button>
<button type="submit" class="button" id="submitBtn">
Enviar
</button>
</div>
</form>
</div>

<!-- Passo 4: Tela de Carregamento (apenas para create) -->


<div id="step4" class="step">
<div class="loading-content">
<div class="loading-spinner"></div>
<div class="loading-text">Estamos criando sua conta...</div>
<div class="loading-subtext">Tempo estimado: 5 a 10
minutos</div>

<div class="loading-progress">
<div class="loading-progress-fill"></div>
</div>

<div class="loading-steps">
<div class="loading-step" id="loadingStep1">
<div class="loading-step-icon">1</div>
<span>Verificando documentos...</span>
</div>
<div class="loading-step" id="loadingStep2">
<div class="loading-step-icon">2</div>
<span>Criando perfil na plataforma...</span>
</div>
<div class="loading-step" id="loadingStep3">
<div class="loading-step-icon">3</div>
<span>Configurando conta...</span>
</div>
<div class="loading-step" id="loadingStep4">
<div class="loading-step-icon">4</div>
<span>Finalizando processo...</span>
</div>
</div>
</div>
</div>

<!-- Passo 5: Confirmação -->


<div id="step5" class="step">
<div class="confirmation-content">
<div class="success-icon">✅</div>
<h2 id="confirmationTitle">Processo concluído!</h2>
<p id="confirmationMessage" class="confirmation-message"></p>

<div class="button-group">
<button class="button" id="paymentBtn">
Ir para Pagamento
</button>
<button class="button back-button" onclick="resetSystem()">
Nova Solicitação
</button>
</div>
</div>
</div>
</div>
</div>

<script>
// ==================== CONFIGURAÇÃO DO SISTEMA ====================
let currentStep = 1;
let selectedFlow = '';
let selectedServices = [];
let systemConfig = {
lastUpdate: new Date().toISOString(),
version: '2.1.0',
autoUpdateEnabled: true,
updateInterval: 300000 // 5 minutos
};

// ==================== DADOS DOS SERVIÇOS ====================


const services = [
{ name: 'Uber', createPrice: 'R$ 230,00 (50% Para Iniciar)',
unlockPrice: 'R$ 90,00' },
{ name: '99', createPrice: 'R$ 200,00 (50% Para Iniciar)', unlockPrice:
'R$ 90,00' },
{ name: 'iFood', createPrice: 'R$ 160,00 (50% Para Iniciar)',
unlockPrice: 'R$ 90,00' },
{ name: 'InDrive', createPrice: 'R$ 150,00 (50% Para Iniciar)',
unlockPrice: 'R$ 90,00' },
{ name: 'Lalamove', createPrice: 'R$ 350,00 (50% Para Iniciar)',
unlockPrice: 'R$ 90,00' }
];

// URLs de checkout para cada plataforma


const checkoutUrls = {
create: {
'Uber': '[Link]
6636-47e0-8dd6-5bd31301b541',
'99': '[Link]
467d-a9a6-770c15b7ae85',
'iFood': '[Link]
a8ac-45d6-8ee5-6426fab51405',
'InDrive': '[Link]
7b9c-46bd-9b0d-102f09fb9591',
'Lalamove': '[Link]
005b602e-8d0f-4244-bff6-b5c6c9f5c3b9'
},
unlock: {
'Uber': '[Link]
a519-4235-883e-a00d026f3cd4',
'99': '[Link]
4c9c-822d-2dfb8ab0444b',
'iFood': '[Link]
8d42-4e76-bbf8-68d1efed41fe',
'InDrive': '[Link]
2f1b-4e18-9f92-ef6f99233652',
'Lalamove': '[Link]
e7763a14-0ff4-43d1-b04c-fce518d5b108'
}
};

const brazilianStates = [
'Acre', 'Alagoas', 'Amapá', 'Amazonas', 'Bahia', 'Ceará',
'Distrito Federal', 'Espírito Santo', 'Goiás', 'Maranhão',
'Mato Grosso', 'Mato Grosso do Sul', 'Minas Gerais', 'Pará',
'Paraíba', 'Paraná', 'Pernambuco', 'Piauí', 'Rio de Janeiro',
'Rio Grande do Norte', 'Rio Grande do Sul', 'Rondônia',
'Roraima', 'Santa Catarina', 'São Paulo', 'Sergipe', 'Tocantins'
];

// ==================== SISTEMA DE ATUALIZAÇÃO AUTOMÁTICA


====================
function initAutoUpdateSystem() {
[Link]('🚀 Sistema de atualização automática iniciado');
[Link]('📊 Versão atual:', [Link]);
[Link]('⏰ Última atualização:', [Link]);

updateStatusIndicator('Sistema Ativo');

// Configurar intervalo de verificação


if ([Link]) {
setInterval(checkForUpdates, [Link]);
[Link]('✅ Verificação automática configurada para cada',
[Link] / 60000, 'minutos');
}

// Atualizar dados imediatamente


setTimeout(() => {
refreshSystemData();
}, 2000);
}

function checkForUpdates() {
[Link]('🔍 Verificando atualizações...');
updateStatusIndicator('Verificando...');

// Simular verificação de atualizações


setTimeout(() => {
const shouldUpdate = [Link]() > 0.7; // 30% chance de
atualização

if (shouldUpdate) {
performSystemUpdate();
} else {
updateStatusIndicator('Sistema Atualizado');
setTimeout(() => {
updateStatusIndicator('Sistema Ativo');
}, 3000);
}
}, 1500);
}

function performSystemUpdate() {
[Link]('📥 Atualizando sistema...');
updateStatusIndicator('Atualizando...');

// Simular atualização
setTimeout(() => {
[Link] = new Date().toISOString();
refreshSystemData();
updateStatusIndicator('Atualizado!');

setTimeout(() => {
updateStatusIndicator('Sistema Ativo');
}, 3000);

[Link]('✅ Sistema atualizado com sucesso');


[Link]('📊 Nova versão:', [Link]);
}, 2000);
}

function refreshSystemData() {
// Aqui você pode adicionar lógica para buscar dados atualizados
[Link]('🔄 Atualizando dados do sistema...');

// Exemplo: atualizar preços ou URLs se necessário


// Esta função seria expandida para fazer requisições reais

[Link]('✅ Dados atualizados');


}

function updateStatusIndicator(status) {
const statusElement = [Link]('updateStatus');
if (statusElement) {
[Link] = status;
}
}

// ==================== FUNÇÕES PRINCIPAIS DO SISTEMA ====================


function selectFlow(flow) {
selectedFlow = flow;
[Link]('📋 Fluxo selecionado:', flow === 'create' ? 'Criar Conta' :
'Desbloquear Conta');
goToStep(2);
renderServices();

const title = [Link]('step2Title');


if (flow === 'create') {
[Link] = 'Selecione a Plataforma para Criar Conta';
} else {
[Link] = 'Selecione os Serviços para Desbloquear';
}
}

function renderServices() {
const grid = [Link]('servicesGrid');
[Link] = '';

[Link]((service, index) => {


const price = selectedFlow === 'create' ? [Link] :
[Link];

const card = [Link]('div');


[Link] = 'service-card';
[Link] = () => toggleService(index);

[Link] = `
<div class="service-name">${[Link]}</div>
<div class="service-price">${price}</div>
<div class="selected-badge">Selecionado</div>
`;

[Link](card);
});
}

function toggleService(index) {
const card = [Link]('.service-card')[index];

if ([Link](index)) {
selectedServices = [Link](i => i !== index);
[Link]('selected');
} else {
[Link](index);
[Link]('selected');
}

updateContinueButton();
}

function updateContinueButton() {
const btn = [Link]('continueBtn');
[Link] = [Link] === 0;
}

function goToStep(step) {
// Hide all steps
[Link]('.step').forEach(s =>
[Link]('active'));

// Show target step


[Link](`step${step}`).[Link]('active');

// Update progress bar


[Link] = `step-${step}`;
currentStep = step;
[Link]('📍 Navegando para o passo:', step);

if (step === 3) {
renderForm();
}

// Limpar seleções ao voltar para step 2


if (step === 2) {
selectedServices = [];
const cards = [Link]('.service-card');
[Link](card => {
[Link]('selected');
});
updateContinueButton();
}
}

function renderForm() {
const container = [Link]('formFields');
[Link] = '';

const title = [Link]('step3Title');


[Link] = selectedFlow === 'create' ? 'Complete seu Cadastro'
: 'Informações para Desbloqueio';

if (selectedFlow === 'create') {


renderCreateAccountForm(container);
} else {
renderUnlockAccountForm(container);
}
}

function renderCreateAccountForm(container) {
const fields = [
{ type: 'text', name: 'fullName', label: 'Nome Completo', required:
true },
{ type: 'file', name: 'photo', label: 'Foto do Rosto (FACIAL E
PERFIL)', required: true },
{ type: 'select', name: 'state', label: 'Estado onde vai rodar',
options: brazilianStates, required: true },
{ type: 'tel', name: 'phone', label: 'Telefone', required: true,
mask: 'phone' },
{ type: 'email', name: 'email', label: 'E-mail', required: true },
{ type: 'text', name: 'licensePlate', label: 'Placa do Veículo',
required: true },
{ type: 'text', name: 'vehicleModel', label: 'Modelo do Veículo',
required: true },
{ type: 'text', name: 'vehicleColor', label: 'Cor do Veículo',
required: true }
];

[Link](field => {
const div = [Link]('div');
[Link] = [Link] === 'file' ? 'form-group full-width' :
'form-group';

const label = [Link]('label');


[Link] = [Link] + ([Link] ? ' *' : '');
[Link](label);

if ([Link] === 'select') {


const select = [Link]('select');
[Link] = [Link];
[Link] = [Link];

const defaultOption = [Link]('option');


[Link] = '';
[Link] = 'Selecione...';
[Link](defaultOption);

[Link](option => {
const opt = [Link]('option');
[Link] = option;
[Link] = option;
[Link](opt);
});

[Link](select);
} else if ([Link] === 'file') {
const fileDiv = [Link]('div');
[Link] = 'file-input';

const input = [Link]('input');


[Link] = 'file';
[Link] = [Link];
[Link] = [Link];
[Link] = 'image/*';
[Link] = (e) => updateFileLabel(e, [Link]);

const labelEl = [Link]('label');


[Link] = 'file-input-label';
[Link]('for', [Link]);
[Link] = '📷 Clique para selecionar a foto';

[Link] = [Link];

[Link](input);
[Link](labelEl);
[Link](fileDiv);
} else {
const input = [Link]('input');
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];

if ([Link] === 'phone') {


[Link] = (e) => maskPhone(e);
}

[Link](input);
}

[Link](div);
});
}
function renderUnlockAccountForm(container) {
const fields = [
{ type: 'text', name: 'cpf', label: 'CPF', required: true, mask:
'cpf' },
{ type: 'email', name: 'email', label: 'E-mail', required: true },
{
type: 'select',
name: 'urgency',
label: 'Motivo de Urgência',
options: ['Baixa', 'Média', 'Alta', 'Crítica'],
required: true
},
{ type: 'text', name: 'restrictionReason', label: 'Motivo pelo qual
a conta pegou restrição', required: true, fullWidth: true },
{ type: 'file', name: 'appScreenshot', label: 'Print da tela
inicial do aplicativo', required: true },
{ type: 'textarea', name: 'detailedDescription', label: 'Descrição
detalhada do motivo do bloqueio', required: true }
];

[Link](field => {
const div = [Link]('div');
[Link] = [Link] || [Link] === 'file' ||
[Link] === 'textarea' ? 'form-group full-width' : 'form-group';

const label = [Link]('label');


[Link] = [Link] + ([Link] ? ' *' : '');
[Link](label);

if ([Link] === 'select') {


const select = [Link]('select');
[Link] = [Link];
[Link] = [Link];

const defaultOption = [Link]('option');


[Link] = '';
[Link] = 'Selecione...';
[Link](defaultOption);

[Link](option => {
const opt = [Link]('option');
[Link] = option;
[Link] = option;
[Link](opt);
});

[Link](select);
} else if ([Link] === 'file') {
const fileDiv = [Link]('div');
[Link] = 'file-input';

const input = [Link]('input');


[Link] = 'file';
[Link] = [Link];
[Link] = [Link];
[Link] = 'image/*';
[Link] = (e) => updateFileLabel(e, [Link]);
const labelEl = [Link]('label');
[Link] = 'file-input-label';
[Link]('for', [Link]);
[Link] = '📱 Clique para selecionar o print';

[Link] = [Link];

[Link](input);
[Link](labelEl);
[Link](fileDiv);
} else if ([Link] === 'textarea') {
const textarea = [Link]('textarea');
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link](textarea);
} else {
const input = [Link]('input');
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];

if ([Link] === 'cpf') {


[Link] = (e) => maskCPF(e);
}

[Link](input);
}

[Link](div);
});
}

// ==================== FUNÇÕES AUXILIARES ====================


function updateFileLabel(event, fieldName) {
const file = [Link][0];
const label = [Link];

if (file) {
[Link] = `✅ ${[Link]}`;
[Link] = '#00ff6a';
}
}

function maskPhone(event) {
let value = [Link](/\D/g, '');

if ([Link] <= 10) {


value = [Link](/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
} else {
value = [Link](/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
}

[Link] = value;
}

function maskCPF(event) {
let value = [Link](/\D/g, '');
value = [Link](/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
[Link] = value;
}

function showLoadingScreen() {
goToStep(4);
[Link]('⏳ Iniciando processo de carregamento...');

// Animar os passos do carregamento


const loadingSteps = ['loadingStep1', 'loadingStep2', 'loadingStep3',
'loadingStep4'];
let currentLoadingStep = 0;

const animateLoadingSteps = () => {


if (currentLoadingStep < [Link]) {

[Link](loadingSteps[currentLoadingStep]).[Link]('active');
[Link](`📋 Passo ${currentLoadingStep + 1}: $
{loadingSteps[currentLoadingStep]} ativado`);
currentLoadingStep++;
setTimeout(animateLoadingSteps, 2000); // 2 segundos entre cada
passo para demo
} else {
// Após completar todos os passos, mostrar confirmação
[Link]('✅ Todos os passos de carregamento concluídos');
setTimeout(() => {
showConfirmation();
}, 2000);
}
};

// Iniciar animação dos passos após um pequeno delay


setTimeout(animateLoadingSteps, 1000);
}

function showConfirmation() {
const confirmationMessage =
[Link]('confirmationMessage');
const confirmationTitle = [Link]('confirmationTitle');
const paymentBtn = [Link]('paymentBtn');

[Link]('🎉 Exibindo confirmação para fluxo:', selectedFlow);

if (selectedFlow === 'create') {


[Link] = 'Conta criada com sucesso!';
[Link] = 'Pague para receber seu login e
senha pelo WhatsApp.';
} else {
[Link] = 'Formulário enviado com sucesso!';
[Link] = 'Realize o pagamento para liberar
a sua conta agora. Você receberá no seu WhatsApp uma mensagem da nossa equipe.';
}

// Configurar botão de pagamento


[Link] = () => {
const selectedServiceName = services[selectedServices[0]].name;
let checkoutUrl;

if (selectedFlow === 'create') {


checkoutUrl = [Link][selectedServiceName];
} else if (selectedFlow === 'unlock') {
checkoutUrl = [Link][selectedServiceName];
}

[Link]('💳 Redirecionando para pagamento:', checkoutUrl);

if (checkoutUrl) {
// Log antes de abrir a URL
[Link]('🔗 Abrindo URL de pagamento:', checkoutUrl);
[Link](checkoutUrl, '_blank');
} else {
[Link]('❌ URL de pagamento não encontrada para:',
selectedServiceName);
alert("Selecione um serviço válido.");
}
};

goToStep(5);
}

function resetSystem() {
[Link]('🔄 Resetando sistema...');
selectedServices = [];
selectedFlow = '';
[Link]('mainForm').reset();

// Reset loading steps


const loadingSteps = [Link]('.loading-step');
[Link](step => [Link]('active'));

goToStep(1);
[Link]('✅ Sistema resetado com sucesso');
}

// ==================== MANIPULAÇÃO DE FORMULÁRIOS ====================


function initFormHandlers() {
const form = [Link]('mainForm');
if (form) {
[Link]('submit', function(e) {
[Link]();
[Link]('📝 Formulário submetido');

const submitBtn = [Link]('submitBtn');


[Link] = '<div class="loading"></div>Enviando...';
[Link] = true;

// Collect form data


const formData = new FormData(this);
const formObject = {};

for (let [key, value] of [Link]()) {


formObject[key] = value;
}

// Add selected services and flow type


const submissionData = {
flowType: selectedFlow,
selectedServices: [Link](index =>
services[index].name),
formData: formObject,
timestamp: new Date().toISOString(),
systemVersion: [Link]
};

// Enhanced logging
[Link]('📋 Dados completos do formulário:',
submissionData);
[Link]('🎯 Tipo de fluxo:', selectedFlow === 'create' ?
'Criar Conta' : 'Desbloquear Conta');
[Link]('📱 Serviços selecionados:',
[Link]);
[Link]('👤 Dados do usuário:', [Link]);
[Link]('🕐 Timestamp:', [Link]);
[Link]('📊 Versão do sistema:',
[Link]);

// Simulate form submission with realistic delay


setTimeout(() => {
if (selectedFlow === 'create') {
[Link](' Processando criação de conta...');
showLoadingScreen();
} else {
[Link]('🔓 Processando desbloqueio de conta...');
showConfirmation();
}

[Link] = 'Enviar';
[Link] = false;
}, 2000);
});
}
}

// ==================== INICIALIZAÇÃO DO SISTEMA ====================


function initializeSystem() {
[Link]('🌟 Inicializando Sistema de Serviços...');
[Link]('📱 User Agent:', [Link]);
[Link]('🌐 URL:', [Link]);

// Verificar elementos DOM críticos


const criticalElements = [
'step1', 'step2', 'step3', 'step4', 'step5',
'formFields', 'servicesGrid', 'mainForm'
];

let allElementsFound = true;


[Link](id => {
const element = [Link](id);
if (element) {
[Link](`✅ Elemento ${id}: OK`);
} else {
[Link](`❌ Elemento ${id}: NÃO ENCONTRADO`);
allElementsFound = false;
}
});

if (allElementsFound) {
[Link]('✅ Todos os elementos DOM encontrados');

// Inicializar sistema de atualização automática


initAutoUpdateSystem();

// Inicializar handlers de formulário


initFormHandlers();

// Configurar estado inicial


[Link] = 'step-1';

[Link]('🚀 Sistema inicializado com sucesso!');


[Link]('📊 Estado inicial - Passo:', currentStep);
[Link]('🎯 Fluxo selecionado:', selectedFlow || 'Nenhum');
[Link]('📱 Serviços selecionados:', [Link]);

// Auto-update status após inicialização


setTimeout(() => {
updateStatusIndicator('Sistema Pronto');
setTimeout(() => {
updateStatusIndicator('Sistema Ativo');
}, 2000);
}, 1000);

} else {
[Link]('❌ Falha na inicialização: elementos DOM ausentes');
updateStatusIndicator('Erro de Inicialização');
}
}

// ==================== EVENT LISTENERS ====================


[Link]('DOMContentLoaded', function() {
[Link]('📄 DOM Content Loaded');
initializeSystem();
});

// Detectar quando a página é completamente carregada


[Link]('load', function() {
[Link]('🔄 Página completamente carregada');
[Link]('⚡ Performance:', [Link]().toFixed(2) + 'ms');
});

// Detectar mudanças de visibilidade da página


[Link]('visibilitychange', function() {
if ([Link]) {
[Link](' Página oculta');
updateStatusIndicator('Em Background');
} else {
[Link](' Página visível');
updateStatusIndicator('Sistema Ativo');
// Verificar atualizações quando a página volta ao foco
setTimeout(checkForUpdates, 1000);
}
});

// Detectar erros JavaScript


[Link]('error', function(e) {
[Link]('💥 Erro JavaScript detectado:', {
message: [Link],
filename: [Link],
lineno: [Link],
colno: [Link],
error: [Link]
});
updateStatusIndicator('Erro Detectado');
});

// ==================== FUNÇÕES GLOBAIS EXPOSTAS ====================


// Manter compatibilidade com chamadas inline do HTML
[Link] = selectFlow;
[Link] = goToStep;
[Link] = resetSystem;
</script>
</body>
</html>

You might also like