167 lines
9.1 KiB
PHP
167 lines
9.1 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
@date_default_timezone_set('UTC');
|
|
|
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'ManutApp';
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Protótipo mobile para gestão de lojas, fornos, peças, ordens de serviço e manutenções.';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
$now = date('Y-m-d H:i:s');
|
|
?>
|
|
<!doctype html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title><?= htmlspecialchars($projectName) ?> — App de Manutenção</title>
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
|
|
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?> — App de Manutenção">
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>">
|
|
<meta property="twitter:title" content="<?= htmlspecialchars($projectName) ?> — App de Manutenção">
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>">
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
|
|
<?php endif; ?>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=2026070102">
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#app-main">Pular para o conteúdo</a>
|
|
<main id="app-main" class="app-shell" data-api-base="api/mock.php">
|
|
<section class="phone-frame" aria-label="Protótipo do aplicativo mobile">
|
|
<header class="app-topbar">
|
|
<div>
|
|
<span class="eyebrow">MVP Mobile</span>
|
|
<h1 id="screenTitle">ManutApp</h1>
|
|
</div>
|
|
<button id="logoutBtn" class="btn btn-sm btn-outline-dark d-none" type="button">Sair</button>
|
|
</header>
|
|
|
|
<div id="toastRegion" class="toast-region" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<section id="loginScreen" class="screen active" data-title="Login">
|
|
<div class="hero-card">
|
|
<p class="label">Equipe técnica</p>
|
|
<h2>Entre para gerenciar manutenções.</h2>
|
|
<p class="muted">Use qualquer usuário e senha para testar o fluxo com chamadas fake de API.</p>
|
|
</div>
|
|
<form id="loginForm" class="stack" novalidate>
|
|
<div>
|
|
<label class="form-label" for="username">Usuário</label>
|
|
<input class="form-control" id="username" name="username" autocomplete="username" placeholder="ex: tecnico01" required>
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="password">Senha</label>
|
|
<input class="form-control" id="password" name="password" type="password" autocomplete="current-password" placeholder="••••••" required>
|
|
</div>
|
|
<button class="btn btn-dark w-100" type="submit">Entrar</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="homeScreen" class="screen" data-title="Home">
|
|
<div class="status-card">
|
|
<div>
|
|
<p class="label">Operação</p>
|
|
<strong id="welcomeUser">Bem-vindo</strong>
|
|
</div>
|
|
<span class="badge text-bg-light" id="maintenanceCount">0 manutenções</span>
|
|
</div>
|
|
<div class="module-grid" aria-label="Módulos do aplicativo">
|
|
<button class="module-card" data-target="storesScreen" type="button"><span>▦</span><strong>Lojas</strong><small>Lista mock</small></button>
|
|
<button class="module-card" data-target="ordersScreen" type="button"><span>□</span><strong>OS</strong><small>Ordens</small></button>
|
|
<button class="module-card" data-target="partsScreen" type="button"><span>◌</span><strong>Peças</strong><small>Estoque</small></button>
|
|
<button class="module-card" data-target="ovensScreen" type="button"><span>▤</span><strong>Fornos</strong><small>Por loja</small></button>
|
|
<button class="module-card featured" data-target="maintenanceScreen" type="button"><span>✓</span><strong>Manutenção</strong><small>Criar e listar</small></button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="maintenanceScreen" class="screen" data-title="Manutenções">
|
|
<div class="screen-actions">
|
|
<button class="btn btn-sm btn-outline-secondary" data-target="homeScreen" type="button">Voltar</button>
|
|
<button class="btn btn-sm btn-dark" data-target="newMaintenanceScreen" type="button">Nova manutenção</button>
|
|
</div>
|
|
<div id="maintenanceList" class="list-stack"></div>
|
|
<div id="maintenanceEmpty" class="empty-state d-none">
|
|
<strong>Nenhuma manutenção registrada.</strong>
|
|
<p>Crie a primeira manutenção escolhendo loja, forno e peças utilizadas.</p>
|
|
<button class="btn btn-dark btn-sm" data-target="newMaintenanceScreen" type="button">Criar agora</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="newMaintenanceScreen" class="screen" data-title="Nova manutenção">
|
|
<div class="screen-actions">
|
|
<button class="btn btn-sm btn-outline-secondary" data-target="maintenanceScreen" type="button">Voltar</button>
|
|
</div>
|
|
<form id="maintenanceForm" class="stack" novalidate>
|
|
<div>
|
|
<label class="form-label" for="storeSelect">Loja</label>
|
|
<select class="form-select" id="storeSelect" required></select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="ovenSelect">Forno</label>
|
|
<select class="form-select" id="ovenSelect" required></select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="technicianInput">Técnico responsável</label>
|
|
<input class="form-control" id="technicianInput" placeholder="Nome do técnico" required>
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="serviceTypeSelect">Tipo de serviço</label>
|
|
<select class="form-select" id="serviceTypeSelect" required>
|
|
<option value="Preventiva">Preventiva</option>
|
|
<option value="Corretiva">Corretiva</option>
|
|
<option value="Inspeção">Inspeção</option>
|
|
</select>
|
|
</div>
|
|
<fieldset class="parts-box">
|
|
<legend>Peças utilizadas</legend>
|
|
<div id="partsChoices" class="parts-list"></div>
|
|
</fieldset>
|
|
<div>
|
|
<label class="form-label" for="notesInput">Observações</label>
|
|
<textarea class="form-control" id="notesInput" rows="3" maxlength="500" placeholder="Resumo do serviço executado"></textarea>
|
|
</div>
|
|
<button class="btn btn-dark w-100" type="submit">Salvar manutenção</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="detailScreen" class="screen" data-title="Detalhe da manutenção">
|
|
<div class="screen-actions">
|
|
<button class="btn btn-sm btn-outline-secondary" data-target="maintenanceScreen" type="button">Voltar</button>
|
|
</div>
|
|
<article id="detailCard" class="detail-card"></article>
|
|
</section>
|
|
|
|
<section id="storesScreen" class="screen" data-title="Lojas">
|
|
<div class="screen-actions"><button class="btn btn-sm btn-outline-secondary" data-target="homeScreen" type="button">Voltar</button><button class="btn btn-sm btn-light" disabled>Nova loja em breve</button></div>
|
|
<div id="storesList" class="list-stack"></div>
|
|
</section>
|
|
|
|
<section id="partsScreen" class="screen" data-title="Peças">
|
|
<div class="screen-actions"><button class="btn btn-sm btn-outline-secondary" data-target="homeScreen" type="button">Voltar</button><button class="btn btn-sm btn-light" disabled>Nova peça em breve</button></div>
|
|
<div id="partsList" class="list-stack"></div>
|
|
</section>
|
|
|
|
<section id="ovensScreen" class="screen" data-title="Fornos">
|
|
<div class="screen-actions"><button class="btn btn-sm btn-outline-secondary" data-target="homeScreen" type="button">Voltar</button><button class="btn btn-sm btn-light" disabled>Novo forno em breve</button></div>
|
|
<div id="ovensList" class="list-stack"></div>
|
|
</section>
|
|
|
|
<section id="ordersScreen" class="screen" data-title="Ordens de serviço">
|
|
<div class="screen-actions"><button class="btn btn-sm btn-outline-secondary" data-target="homeScreen" type="button">Voltar</button><button class="btn btn-sm btn-light" disabled>Nova OS em breve</button></div>
|
|
<div class="empty-state"><strong>OS mockadas</strong><p>O próximo passo é conectar ordens de serviço ao fluxo de manutenção.</p></div>
|
|
</section>
|
|
|
|
<footer class="app-footer">
|
|
<span>PHP <?= htmlspecialchars(PHP_VERSION) ?></span>
|
|
<span>UTC <?= htmlspecialchars($now) ?></span>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
<script src="assets/js/main.js?v=2026070102" defer></script>
|
|
</body>
|
|
</html>
|