139 lines
7.6 KiB
PHP
139 lines
7.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stargas Dashboards</title>
|
|
<!-- Tailwind via Vite -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
<!-- Inter Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Animated gradient background — Stargas dark theme */
|
|
body {
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 30%, #0d0d0d 60%, #0a0a0a 100%);
|
|
min-height: 100vh;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Glass card effect */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(227, 25, 55, 0.12);
|
|
}
|
|
|
|
/* Dashboard card hover glow */
|
|
.dashboard-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.dashboard-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(227, 25, 55, 0.25);
|
|
border-color: rgba(227, 25, 55, 0.4);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.disabled-card {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
border-style: dashed;
|
|
}
|
|
|
|
/* Stargas accent line */
|
|
.stargas-accent {
|
|
background: linear-gradient(90deg, #E31937, #FFD700, #E31937);
|
|
height: 2px;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
.fade-in {
|
|
animation: fadeIn 0.8s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
@keyframes fadeIn {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-white antialiased">
|
|
<!-- Stargas Accent Line -->
|
|
<div class="stargas-accent"></div>
|
|
|
|
<!-- Admin Link -->
|
|
<div class="absolute top-6 right-6 z-50 fade-in">
|
|
<a href="/admin" class="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors border border-white/10 text-xs font-medium text-slate-400 hover:text-white" title="Admin Control Panel">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Settings
|
|
</a>
|
|
</div>
|
|
|
|
<main class="max-w-[1200px] mx-auto px-6 py-16">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="flex flex-col items-center justify-center text-center mb-16 fade-in" style="animation-delay: 100ms">
|
|
<div class="w-32 h-32 rounded-3xl glass flex items-center justify-center mb-8 p-4 bg-white/5 border-red-500/30 shadow-[0_0_50px_rgba(227,25,55,0.15)]">
|
|
<img src="/images/stargas-logo.svg" alt="Stargas Energies" class="w-full h-auto drop-shadow-lg">
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Dashboard Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
|
|
|
<!-- Active: Procurement Dashboard -->
|
|
<a href="/procurement" class="dashboard-card glass rounded-2xl p-6 flex flex-col group fade-in relative overflow-hidden block" style="animation-delay: 200ms">
|
|
<div class="absolute top-0 right-0 p-4">
|
|
<span class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-500/20">Active</span>
|
|
</div>
|
|
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-red-600 to-red-900 flex items-center justify-center mb-6 shadow-lg shadow-red-900/40 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-bold text-white mb-2 group-hover:text-red-400 transition-colors">Procurement</h2>
|
|
<p class="text-sm text-slate-400 mb-6 flex-grow">
|
|
Track supplier spend, analyze product margins, and monitor purchasing trends across the organization.
|
|
</p>
|
|
|
|
<div class="text-sm font-medium text-red-500 flex items-center gap-1 mt-auto">
|
|
Access Dashboard
|
|
<svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Active: E-Commerce Dashboard -->
|
|
<a href="/ecommerce" class="dashboard-card glass rounded-2xl p-6 flex flex-col group fade-in relative overflow-hidden block" style="animation-delay: 300ms">
|
|
<div class="absolute top-0 right-0 p-4">
|
|
<span class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-500/20">Active</span>
|
|
</div>
|
|
|
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-600 to-purple-900 flex items-center justify-center mb-6 shadow-lg shadow-purple-900/40 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">E-Commerce</h2>
|
|
<p class="text-sm text-slate-400 mb-6 flex-grow">
|
|
Monitor online sales, WooCommerce integration, customer insights, and digital revenue streams.
|
|
</p>
|
|
|
|
<div class="text-sm font-medium text-purple-500 flex items-center gap-1 mt-auto">
|
|
Access Dashboard
|
|
<svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="mt-24 text-center text-xs text-slate-600 fade-in" style="animation-delay: 500ms">
|
|
© <script>document.write(new Date().getFullYear())</script> Stargas Energies. All Rights Reserved.
|
|
</div>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|