e93b0e206f
Implements HTML, CSS (with theme toggle), and Font Awesome for a responsive landing page with a dark/light theme switch. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 55e82cb8-1efd-4207-b5ea-909ed5ea5072 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/384cba56-07d6-4b99-a92b-ff797264613a/9290aef4-4b5e-472a-b8fb-b13752924be3.jpg
201 lines
7.8 KiB
HTML
201 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portal Amixx - Acesso aos Sistemas</title>
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo-section">
|
|
<div class="logo">
|
|
<i class="fas fa-layer-group"></i>
|
|
<h1>Portal Amixx</h1>
|
|
</div>
|
|
<p class="subtitle">Central de Acesso aos Sistemas</p>
|
|
</div>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Alternar tema">
|
|
<i class="fas fa-sun"></i>
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="systems-grid">
|
|
<!-- Row 1 -->
|
|
<a href="https://requisicao.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Pessoal</h3>
|
|
<p>Gestão de Recursos Humanos</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://movimentacao.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Movimento</h3>
|
|
<p>Controle de Movimentações</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://descricaocargos.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Desc Cargos</h3>
|
|
<p>Descrição de Cargos</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Row 2 -->
|
|
<a href="https://ppu.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-credit-card"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>PayPerUse</h3>
|
|
<p>Sistema de Pagamento</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://faturamento.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-file-invoice"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Nota Fiscal</h3>
|
|
<p>Faturamento e NF-e</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Row 3 -->
|
|
<a href="https://sgq.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-award"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Qualidade</h3>
|
|
<p>Sistema de Gestão da Qualidade</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://reuniao.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Reunião</h3>
|
|
<p>Gestão de Reuniões</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://compras.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Compras</h3>
|
|
<p>Sistema de Compras</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Row 4 -->
|
|
<a href="https://precificacao.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Comercial</h3>
|
|
<p>Precificação e Vendas</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://contrato.aplicativopro.com/login" class="system-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-file-contract"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Contratos</h3>
|
|
<p>Gestão de Contratos</p>
|
|
</div>
|
|
<div class="card-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>© 2024 Portal Amixx. Todos os direitos reservados.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Theme Toggle Functionality
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const body = document.body;
|
|
|
|
// Check for saved theme preference or default to dark mode
|
|
const currentTheme = localStorage.getItem('theme') || 'dark';
|
|
body.setAttribute('data-theme', currentTheme);
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = body.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
body.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
});
|
|
|
|
// Add loading animation to cards on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cards = document.querySelectorAll('.system-card');
|
|
cards.forEach((card, index) => {
|
|
card.style.animationDelay = `${index * 0.1}s`;
|
|
card.classList.add('animate-in');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|