Spaces:
Running
Running
File size: 6,690 Bytes
6e93efd cd2f400 6e93efd 79b52d6 6e93efd 79b52d6 6e93efd 6cd921d cd2f400 6cd921d 6e93efd 6cd921d 6e93efd 6cd921d 10a65b0 6e93efd 10a65b0 6e93efd 10a65b0 2eb6ae2 6e93efd 2eb6ae2 6e93efd cd2f400 6e93efd 6cd921d 79b52d6 6e93efd 79b52d6 6e93efd 0b9d414 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GXS Disaster Risk Reduction Program</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
}
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-btn {
transition: all 0.3s ease;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 255, 0.2);
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 text-white overflow-x-hidden">
<div id="vanta-bg" class="vanta-bg"></div>
<nav class="px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<button class="lg:hidden" id="mobileMenuToggle">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
<div class="flex items-center space-x-2">
<i data-feather="briefcase" class="text-blue-300"></i>
<span class="text-xl font-bold">GXS Disaster Risk Reduction Program</span>
</div>
</div>
<a href="#" class="hidden lg:block px-4 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 transition">
<span>Contact Support</span>
</a>
</nav>
<!-- Mobile Menu -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" id="mobileMenu">
<div class="absolute right-0 top-0 bottom-0 w-64 bg-gray-800 p-6">
<div class="flex justify-end">
<button id="closeMobileMenu">
<i data-feather="x" class="w-6 h-6"></i>
</button>
</div>
<div class="mt-8 space-y-4">
<a href="#" class="block px-4 py-3 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20 transition">
Contact Support
</a>
<a href="login.html" class="block px-4 py-3 rounded-lg bg-blue-600 hover:bg-blue-500 transition">
Sign In
</a>
</div>
</div>
</div>
<main class="container mx-auto px-4 py-16 lg:ml-0">
<div class="max-w-4xl mx-auto text-center mb-8 lg:mb-16 px-2">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Streamline Your Business Operations</h1>
<p class="text-xl text-blue-100 max-w-2xl mx-auto">
Centralized platform for purchasing, logistics, and financial management with approval workflows.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 mb-8 lg:mb-16 px-2">
<div class="glass-card p-6 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mb-4">
<i data-feather="shopping-cart" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Purchasing</h3>
<p class="text-blue-100">Manage suppliers, POs, quotes and delivery notes efficiently.</p>
</div>
<div class="glass-card p-6 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-4">
<i data-feather="truck" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Logistics</h3>
<p class="text-blue-100">Track imports, FLs, DUMs and international suppliers.</p>
</div>
<div class="glass-card p-6 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-4">
<i data-feather="dollar-sign" class="w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Finance</h3>
<p class="text-blue-100">Manage invoices, bank statements and payment tracking.</p>
</div>
</div>
<div class="max-w-md mx-auto text-center px-4 pb-8">
<a href="login.html" class="login-btn block px-8 py-3 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-medium text-lg shadow-lg text-center">
Sign In with Microsoft 365
<i data-feather="arrow-right" class="inline ml-2 w-5 h-5"></i>
</a>
<p class="mt-4 text-blue-100">Use your company Microsoft account</p>
</div>
</main>
<footer class="px-6 py-8 text-center text-blue-200 text-sm">
<p>GXS Disaster Risk Reduction Program</p>
<p class="mt-2">© 2025 All rights reserved</p>
</footer>
<script>
feather.replace();
// Mobile menu toggle
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mobileMenu = document.getElementById('mobileMenu');
const closeMobileMenu = document.getElementById('closeMobileMenu');
mobileMenuToggle.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
});
closeMobileMenu.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
document.addEventListener('DOMContentLoaded', function() {
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3a86ff,
backgroundColor: 0x0
});
});
</script>
</body>
</html>
|