1892 lines
138 KiB
HTML
1892 lines
138 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CypSec Security Suite — Modular, Sovereign, End-to-End Protection</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
.cypsec-panel {
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(28, 50, 104, 0.35) 0%,
|
||
rgba(28, 50, 104, 0.18) 40%,
|
||
rgba(0, 0, 0, 0) 100%
|
||
);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow:
|
||
0 0 32px rgba(0, 0, 0, 0.40),
|
||
inset 0 0 12px rgba(255, 255, 255, 0.05);
|
||
}
|
||
:root {
|
||
--primary-blue: #60a5fa;
|
||
--dark-bg: #000000;
|
||
--card-bg: #111111;
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #9ca3af;
|
||
--border-color: #1f2937;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: var(--dark-bg);
|
||
color: var(--text-primary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.cyber-blue {
|
||
color: var(--primary-blue);
|
||
}
|
||
|
||
.bg-cyber-blue {
|
||
background-color: var(--primary-blue);
|
||
}
|
||
|
||
.border-cyber-blue {
|
||
border-color: var(--primary-blue);
|
||
}
|
||
|
||
.text-secondary {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.card-hover:hover {
|
||
border-color: var(--primary-blue);
|
||
}
|
||
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--text-primary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.section-divider {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.compact-text {
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tight-card {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.smaller-text {
|
||
font-size: 0.875rem;
|
||
line-height: 1.3;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<nav class="border-b border-gray-800 bg-black">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-center items-center h-16">
|
||
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
|
||
<span class="text-2xl font-mono text-white">CypSec</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div>
|
||
</div>
|
||
|
||
<div class="mobile-language-button flex justify-end space-x-6 my-auto md:mx-12 xl:hidden mx-2">
|
||
<div class="flex relative" onclick="toggleLanguageOptions1()">
|
||
<div class="flex">
|
||
<img id="currentFlag1" class="h-6 w-6 hover:scale-105" src="/img/language/de.svg" alt="Language picker">
|
||
</div>
|
||
<div class="hidden bg-white dark:bg-gray-900 absolute top-10 right-0 w-64 min-w-min z-50 shadow-md rounded-xl overflow-y-auto max-h-64" id="lang-popup1">
|
||
<div class="w-full">
|
||
<input type="text" id="languageSearch1" placeholder="Select Country" onkeyup="filterLanguages('languageSearch1', 'lang-popup1')" class="p-2 w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ao.svg" alt="Angolan Flag">
|
||
<span class="ml-2 font-semibold language-text">Angola</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('port-AO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">PT</span>
|
||
<span onclick="changeLanguage('english-AO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ar.svg" alt="Argentine Flag">
|
||
<span class="ml-2 font-semibold language-text">Argentina</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-AR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-AR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/au.svg" alt="Australian Flag">
|
||
<span class="ml-2 font-semibold language-text">Australia</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-AU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-AU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/at.svg" alt="Austrian Flag">
|
||
<span class="ml-2 font-semibold language-text">Austria</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('german-AT')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
<span onclick="changeLanguage('english-AT')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/by.svg" alt="Belarusian Flag">
|
||
<span class="ml-2 font-semibold language-text">Belarus</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('russian-BY')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
<span onclick="changeLanguage('english-BY')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/be.svg" alt="Belgian Flag">
|
||
<span class="ml-2 font-semibold language-text">Belgium</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-BE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-BE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ba.svg" alt="Bosnian Flag">
|
||
<span class="ml-2 font-semibold language-text">Bosnia and Herzegovina</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('serbian-BA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RS</span>
|
||
<span onclick="changeLanguage('english-BA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/br.svg" alt="Brazilian Flag">
|
||
<span class="ml-2 font-semibold language-text">Brazil</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('port-BR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">PT</span>
|
||
<span onclick="changeLanguage('english-BR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ca.svg" alt="Canadian Flag">
|
||
<span class="ml-2 font-semibold language-text">Canada</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-CA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-CA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cl.svg" alt="Chilean Flag">
|
||
<span class="ml-2 font-semibold language-text">Chile</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-CL')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-CL')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cn.svg" alt="Chinese Flag">
|
||
<span class="ml-2 font-semibold language-text">China</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('chinese-CN')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">CN</span>
|
||
<span onclick="changeLanguage('english-CN')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/co.svg" alt="Colombian Flag">
|
||
<span class="ml-2 font-semibold language-text">Colombia</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-CO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-CO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cr.svg" alt="Costa Rican Flag">
|
||
<span class="ml-2 font-semibold language-text">Costa Rica</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-CR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-CR')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cu.svg" alt="Cuban Flag">
|
||
<span class="ml-2 font-semibold language-text">Cuba</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-CU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-CU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/de.svg" alt="German Flag">
|
||
<span class="ml-2 font-semibold language-text">Germany</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('german-DE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
<span onclick="changeLanguage('english-DE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/gb.svg" alt="British Flag">
|
||
<span class="ml-2 font-semibold language-text">United Kingdom</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-GB')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('spanish-GB')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/hu.svg" alt="Hungarian Flag">
|
||
<span class="ml-2 font-semibold language-text">Hungary</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('hung-HU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">HU</span>
|
||
<span onclick="changeLanguage('english-HU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ie.svg" alt="Irish Flag">
|
||
<span class="ml-2 font-semibold language-text">Ireland</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-IE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-IE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/in.svg" alt="Indian Flag">
|
||
<span class="ml-2 font-semibold language-text">India</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-IN')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-IN')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/kz.svg" alt="Kazakhstan Flag">
|
||
<span class="ml-2 font-semibold language-text">Kazakhstan</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('russian-KZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
<span onclick="changeLanguage('english-KZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/kg.svg" alt="Kyrgyzstan Flag">
|
||
<span class="ml-2 font-semibold language-text">Kyrgyzstan</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('russian-KG')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
<span onclick="changeLanguage('english-KG')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/lu.svg" alt="Luxembourgish Flag">
|
||
<span class="ml-2 font-semibold language-text">Luxembourg</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-LU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-LU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/my.svg" alt="Malaysian Flag">
|
||
<span class="ml-2 font-semibold language-text">Malaysia</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-MY')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('russian-MY')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/mx.svg" alt="Mexican Flag">
|
||
<span class="ml-2 font-semibold language-text">Mexico</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-MX')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-MX')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/me.svg" alt="Montenegrin Flag">
|
||
<span class="ml-2 font-semibold language-text">Montenegro</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('serbian-ME')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RS</span>
|
||
<span onclick="changeLanguage('english-ME')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/mz.svg" alt="Mozambican Flag">
|
||
<span class="ml-2 font-semibold language-text">Mozambique</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('port-MZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">PT</span>
|
||
<span onclick="changeLanguage('english-MZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/nz.svg" alt="New Zealander Flag">
|
||
<span class="ml-2 font-semibold language-text">New Zealand</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-NZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-NZ')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/pe.svg" alt="Peruvian Flag">
|
||
<span class="ml-2 font-semibold language-text">Peru</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-PE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-PE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ps.svg" alt="Palestinian Flag">
|
||
<span class="ml-2 font-semibold language-text">Palestine</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-PS')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('russian-PS')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/pt.svg" alt="Portuguese Flag">
|
||
<span class="ml-2 font-semibold language-text">Portugal</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('port-PT')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">PT</span>
|
||
<span onclick="changeLanguage('english-PT')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ro.svg" alt="Romanian Flag">
|
||
<span class="ml-2 font-semibold language-text">Romania</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-RO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('russian-RO')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ru.svg" alt="Russian Flag">
|
||
<span class="ml-2 font-semibold language-text">Russia</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('russian-RU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
<span onclick="changeLanguage('german-RU')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/rs.svg" alt="Serbian Flag">
|
||
<span class="ml-2 font-semibold language-text">Serbia</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('serbian-RS')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">SR</span>
|
||
<span onclick="changeLanguage('english-RS')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/sg.svg" alt="Singaporean Flag">
|
||
<span class="ml-2 font-semibold language-text">Singapore</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-SG')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('chinese-SG')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">CN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/tl.svg" alt="Timorese Flag">
|
||
<span class="ml-2 font-semibold language-text">East Timor</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('port-TL')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">PT</span>
|
||
<span onclick="changeLanguage('english-TL')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/za.svg" alt="South African Flag">
|
||
<span class="ml-2 font-semibold language-text">South Africa</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-ZA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-ZA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/es.svg" alt="Spanish Flag">
|
||
<span class="ml-2 font-semibold language-text">Spain</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-ES')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<span onclick="changeLanguage('english-ES')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ch.svg" alt="Swiss Flag">
|
||
<span class="ml-2 font-semibold language-text">Switzerland</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('german-CH')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
<span onclick="changeLanguage('english-CH')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ua.svg" alt="Ukrainian Flag">
|
||
<span class="ml-2 font-semibold language-text">Ukraine</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('russian-UA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">RU</span>
|
||
<span onclick="changeLanguage('english-UA')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/us.svg" alt="American Flag">
|
||
<span class="ml-2 font-semibold language-text">USA</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('english-US')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
<span onclick="changeLanguage('german-US')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">DE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ve.svg" alt="Venezuelan Flag">
|
||
<span class="ml-2 font-semibold language-text">Venezuela</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span onclick="changeLanguage('spanish-VE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">ES</span>
|
||
<!--<span onclick="changeLanguage('english-VE')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>-->
|
||
<span onclick="changeLanguage5('de')" class="cursor-pointer px-2 py-1 rounded hover:bg-gray-300 dark:hover:bg-gray-600">EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between ">
|
||
<div class="hidden mt-6 w-full xl:flex items-center justify-center text-gray-900 capitalize dark:text-white">
|
||
<a href="/publication/academy" class="mx-2 border-b-2 border-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:border-blue-500 sm:mx-6">Security Academy</a>
|
||
|
||
<a href="/publication/defense" class="mx-2 border-b-2 border-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:border-blue-500 sm:mx-6">Defense Whitepaper</a>
|
||
|
||
<a href="/publication/partner-program" class="mx-2 border-b-2 border-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:border-blue-500 sm:mx-6">Partnership Program</a>
|
||
|
||
<a href="/security-center" class="mx-2 border-b-2 border-transparent hover:text-gray-800 dark:hover:text-gray-200 hover:border-blue-500 sm:mx-6">Security Center</a>
|
||
|
||
<div class="flex relative" onclick="toggleLanguageOptions2()">
|
||
<div class="flex">
|
||
<img id="currentFlag2" class="h-6 w-6 hover:scale-105" src="/img/language/de.svg" alt="Language picker">
|
||
</div>
|
||
<div class="hidden bg-white dark:bg-gray-900 absolute top-10 right-0 w-64 min-w-min z-50 text-base shadow-md rounded-xl overflow-y-auto max-h-64" id="lang-popup2">
|
||
<div class="w-full">
|
||
<input type="text" id="languageSearch2" placeholder="Select Country" onkeyup="filterLanguages('languageSearch2', 'lang-popup2')" class="p-2 w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ao')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ao.svg" alt="Angolan Flag">
|
||
<span class="ml-2 font-semibold language-text">Angola</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ar')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ar.svg" alt="Argentine Flag">
|
||
<span class="ml-2 font-semibold language-text">Argentina</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('au')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/au.svg" alt="Australian Flag">
|
||
<span class="ml-2 font-semibold language-text">Australia</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('at')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/at.svg" alt="Austrian Flag">
|
||
<span class="ml-2 font-semibold language-text">Austria</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('by')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/by.svg" alt="Belarusian Flag">
|
||
<span class="ml-2 font-semibold language-text">Belarus</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('be')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/be.svg" alt="Belgian Flag">
|
||
<span class="ml-2 font-semibold language-text">Belgium</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ba')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ba.svg" alt="Bosnian Flag">
|
||
<span class="ml-2 font-semibold language-text">Bosnia and Herzegovina</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('br')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/br.svg" alt="Brazilian Flag">
|
||
<span class="ml-2 font-semibold language-text">Brazil</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ca')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ca.svg" alt="Canadian Flag">
|
||
<span class="ml-2 font-semibold language-text">Canada</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('cl')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cl.svg" alt="Chilean Flag">
|
||
<span class="ml-2 font-semibold language-text">Chile</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('cn')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cn.svg" alt="Chinese Flag">
|
||
<span class="ml-2 font-semibold language-text">China</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('co')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/co.svg" alt="Colombian Flag">
|
||
<span class="ml-2 font-semibold language-text">Colombia</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('cr')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cr.svg" alt="Costa Rican Flag">
|
||
<span class="ml-2 font-semibold language-text">Costa Rica</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('cu')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/cu.svg" alt="Cuban Flag">
|
||
<span class="ml-2 font-semibold language-text">Cuba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('de')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/de.svg" alt="German Flag">
|
||
<span class="ml-2 font-semibold language-text">Germany</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('gb')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/gb.svg" alt="British Flag">
|
||
<span class="ml-2 font-semibold language-text">United Kingdom</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('hu')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/hu.svg" alt="Hungarian Flag">
|
||
<span class="ml-2 font-semibold language-text">Hungary</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ie')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ie.svg" alt="Irish Flag">
|
||
<span class="ml-2 font-semibold language-text">Ireland</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('in')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/in.svg" alt="Indian Flag">
|
||
<span class="ml-2 font-semibold language-text">India</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('kz')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/kz.svg" alt="Kazakhstan Flag">
|
||
<span class="ml-2 font-semibold language-text">Kazakhstan</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('kg')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/kg.svg" alt="Kyrgyzstan Flag">
|
||
<span class="ml-2 font-semibold language-text">Kyrgyzstan</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('lu')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/lu.svg" alt="Luxembourgish Flag">
|
||
<span class="ml-2 font-semibold language-text">Luxembourg</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('my')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/my.svg" alt="Malaysian Flag">
|
||
<span class="ml-2 font-semibold language-text">Malaysia</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('mx')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/mx.svg" alt="Mexican Flag">
|
||
<span class="ml-2 font-semibold language-text">Mexico</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('me')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/me.svg" alt="Montenegrin Flag">
|
||
<span class="ml-2 font-semibold language-text">Montenegro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('mz')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/mz.svg" alt="Mozambican Flag">
|
||
<span class="ml-2 font-semibold language-text">Mozambique</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('nz')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/nz.svg" alt="New Zealander Flag">
|
||
<span class="ml-2 font-semibold language-text">New Zealand</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('pe')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/pe.svg" alt="Perusian Flag">
|
||
<span class="ml-2 font-semibold language-text">Peru</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ps')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ps.svg" alt="Palestinian Flag">
|
||
<span class="ml-2 font-semibold language-text">Palestine</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('pt')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/pt.svg" alt="Portuguese Flag">
|
||
<span class="ml-2 font-semibold language-text">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ro')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ro.svg" alt="Romanian Flag">
|
||
<span class="ml-2 font-semibold language-text">Romania</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ru')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ru.svg" alt="Russian Flag">
|
||
<span class="ml-2 font-semibold language-text">Russia</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('rs')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/rs.svg" alt="Serbian Flag">
|
||
<span class="ml-2 font-semibold language-text">Serbia</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('sg')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/sg.svg" alt="Singaporean Flag">
|
||
<span class="ml-2 font-semibold language-text">Singapore</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('tl')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/tl.svg" alt="Timorese Flag">
|
||
<span class="ml-2 font-semibold language-text">East Timor</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('za')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/za.svg" alt="South African Flag">
|
||
<span class="ml-2 font-semibold language-text">South Africa</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('es')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/es.svg" alt="Spanish Flag">
|
||
<span class="ml-2 font-semibold language-text">Spain</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ch')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ch.svg" alt="Swiss Flag">
|
||
<span class="ml-2 font-semibold language-text">Switzerland</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ua')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ua.svg" alt="Ukrainian Flag">
|
||
<span class="ml-2 font-semibold language-text">Ukraine</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('us')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/us.svg" alt="American Flag">
|
||
<span class="ml-2 font-semibold language-text">USA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3 rounded-b-2xl dark:hover:bg-gray-700 hover:bg-gray-200 focus:ring focus:ring-gray-300 focus:ring-opacity-80 language-item">
|
||
<div onclick="changeServer('ve')" class="flex items-center justify-between cursor">
|
||
<div class="flex items-center">
|
||
<img class="h-6 w-6" src="/img/language/ve.svg" alt="Venezuelan Flag">
|
||
<span class="ml-2 font-semibold language-text">Venezuela</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
|
||
function changeLanguage5(language) {
|
||
// Get the current URI from the browser
|
||
const currentUri = window.location.pathname + window.location.search;
|
||
|
||
// Make the POST request to the server
|
||
fetch('/change-language2', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: `language=${encodeURIComponent(language)}¤tUri=${encodeURIComponent(currentUri)}`,
|
||
credentials: 'include' // Include cookies in the request
|
||
})
|
||
.then(response => {
|
||
// Check if the response is a redirect
|
||
if (response.redirected) {
|
||
// Redirect to the target URL
|
||
window.location.href = response.url;
|
||
} else {
|
||
return response.text();
|
||
}
|
||
})
|
||
.then(data => {
|
||
console.log('Success:', data);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
function changeServer(server) {
|
||
const currentUri = window.location.pathname + window.location.search;
|
||
|
||
fetch('/change-server', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: `country=${encodeURIComponent(server)}¤tUri=${encodeURIComponent(currentUri)}`,
|
||
credentials: 'include'
|
||
})
|
||
.then(response => {
|
||
if (response.redirected) {
|
||
window.location.href = response.url;
|
||
} else {
|
||
return response.text();
|
||
}
|
||
})
|
||
.then(data => {
|
||
console.log('Success:', data);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
|
||
document.getElementById('languageSearch1').addEventListener('click', function(event) {
|
||
event.stopPropagation();
|
||
});
|
||
|
||
document.getElementById('languageSearch2').addEventListener('click', function(event) {
|
||
event.stopPropagation();
|
||
});
|
||
|
||
function filterLanguages(languageSearch, popupId) {
|
||
var input, filter, langPopup, items, txtValue;
|
||
input = document.getElementById(languageSearch);
|
||
filter = input.value.toUpperCase();
|
||
langPopup = document.getElementById(popupId);
|
||
items = langPopup.getElementsByClassName('language-item');
|
||
|
||
for (var i = 0; i < items.length; i++) {
|
||
txtValue = items[i].getElementsByClassName('language-text')[0].textContent || items[i].getElementsByClassName('language-text')[0].innerText;
|
||
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
||
items[i].style.display = "";
|
||
} else {
|
||
items[i].style.display = "none";
|
||
}
|
||
}
|
||
}
|
||
|
||
function toggleLanguageOptions1() {
|
||
var languageOptions = document.getElementById("lang-popup1");
|
||
languageOptions.classList.toggle("hidden");
|
||
}
|
||
|
||
function toggleLanguageOptions2() {
|
||
var languageOptions = document.getElementById("lang-popup2");
|
||
languageOptions.classList.toggle("hidden");
|
||
}
|
||
|
||
function changeLanguage(lang) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', '/change-lang?lang=' + lang, true);
|
||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||
xhr.onload = function () {
|
||
if (xhr.status === 200) {
|
||
channel.postMessage('reload');
|
||
location.reload();
|
||
}
|
||
};
|
||
xhr.send();
|
||
|
||
/* var currentSelection = document.getElementById("current");
|
||
var flagImg = currentSelection.querySelector("img");
|
||
var languageText = currentSelection.querySelector("span"); */
|
||
var currentFlag1 = document.getElementById("currentFlag1");
|
||
var currentFlag2 = document.getElementById("currentFlag2");
|
||
|
||
const countryCode = lang.split('-')[1].toLowerCase();
|
||
|
||
switch (countryCode) {
|
||
case 'ar':
|
||
currentFlag1.setAttribute("src", "/img/language/ar.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ar.svg");
|
||
break;
|
||
case 'at':
|
||
currentFlag1.setAttribute("src", "/img/language/at.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/at.svg");
|
||
break;
|
||
case 'br':
|
||
currentFlag1.setAttribute("src", "/img/language/br.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/br.svg");
|
||
break;
|
||
case 'by':
|
||
currentFlag1.setAttribute("src", "/img/language/by.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/by.svg");
|
||
break;
|
||
case 'ch':
|
||
currentFlag1.setAttribute("src", "/img/language/ch.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ch.svg");
|
||
break;
|
||
case 'cn':
|
||
currentFlag1.setAttribute("src", "/img/language/cn.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cn.svg");
|
||
break;
|
||
case 'co':
|
||
currentFlag1.setAttribute("src", "/img/language/co.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/co.svg");
|
||
break;
|
||
case 'de':
|
||
currentFlag1.setAttribute("src", "/img/language/de.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/de.svg");
|
||
break;
|
||
case 'es':
|
||
currentFlag1.setAttribute("src", "/img/language/es.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/es.svg");
|
||
break;
|
||
case 'gb':
|
||
currentFlag1.setAttribute("src", "/img/language/gb.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/gb.svg");
|
||
break;
|
||
case 'hu':
|
||
currentFlag1.setAttribute("src", "/img/language/hu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/hu.svg");
|
||
break;
|
||
case 'ie':
|
||
currentFlag1.setAttribute("src", "/img/language/ie.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ie.svg");
|
||
break;
|
||
case 'in':
|
||
currentFlag1.setAttribute("src", "/img/language/in.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/in.svg");
|
||
break;
|
||
case 'kg':
|
||
currentFlag1.setAttribute("src", "/img/language/kg.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/kg.svg");
|
||
break;
|
||
case 'kz':
|
||
currentFlag1.setAttribute("src", "/img/language/kz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/kz.svg");
|
||
break;
|
||
case 'mx':
|
||
currentFlag1.setAttribute("src", "/img/language/mx.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/mx.svg");
|
||
break;
|
||
case 'pe':
|
||
currentFlag1.setAttribute("src", "/img/language/pe.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/pe.svg");
|
||
break;
|
||
case 'pt':
|
||
currentFlag1.setAttribute("src", "/img/language/pt.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/pt.svg");
|
||
break;
|
||
case 'rs':
|
||
currentFlag1.setAttribute("src", "/img/language/rs.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/rs.svg");
|
||
break;
|
||
case 'ru':
|
||
currentFlag1.setAttribute("src", "/img/language/ru.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ru.svg");
|
||
break;
|
||
case 'us':
|
||
currentFlag1.setAttribute("src", "/img/language/us.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/us.svg");
|
||
break;
|
||
case 'ao':
|
||
currentFlag1.setAttribute("src", "/img/language/ao.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ao.svg");
|
||
break;
|
||
case 'au':
|
||
currentFlag1.setAttribute("src", "/img/language/au.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/au.svg");
|
||
break;
|
||
case 'be':
|
||
currentFlag1.setAttribute("src", "/img/language/be.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/be.svg");
|
||
break;
|
||
case 'ba':
|
||
currentFlag1.setAttribute("src", "/img/language/ba.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ba.svg");
|
||
break;
|
||
case 'ca':
|
||
currentFlag1.setAttribute("src", "/img/language/ca.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ca.svg");
|
||
break;
|
||
case 'cl':
|
||
currentFlag1.setAttribute("src", "/img/language/cl.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cl.svg");
|
||
break;
|
||
case 'cr':
|
||
currentFlag1.setAttribute("src", "/img/language/cr.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cr.svg");
|
||
break;
|
||
case 'cu':
|
||
currentFlag1.setAttribute("src", "/img/language/cu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cu.svg");
|
||
break;
|
||
case 'lu':
|
||
currentFlag1.setAttribute("src", "/img/language/lu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/lu.svg");
|
||
break;
|
||
case 'my':
|
||
currentFlag1.setAttribute("src", "/img/language/my.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/my.svg");
|
||
break;
|
||
case 'me':
|
||
currentFlag1.setAttribute("src", "/img/language/me.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/me.svg");
|
||
break;
|
||
case 'mz':
|
||
currentFlag1.setAttribute("src", "/img/language/mz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/mz.svg");
|
||
break;
|
||
case 'nz':
|
||
currentFlag1.setAttribute("src", "/img/language/nz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/nz.svg");
|
||
break;
|
||
case 'ps':
|
||
currentFlag1.setAttribute("src", "/img/language/ps.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ps.svg");
|
||
break;
|
||
case 'ro':
|
||
currentFlag1.setAttribute("src", "/img/language/ro.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ro.svg");
|
||
break;
|
||
case 'sg':
|
||
currentFlag1.setAttribute("src", "/img/language/sg.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/sg.svg");
|
||
break;
|
||
case 'tl':
|
||
currentFlag1.setAttribute("src", "/img/language/tl.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/tl.svg");
|
||
break;
|
||
case 'za':
|
||
currentFlag1.setAttribute("src", "/img/language/za.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/za.svg");
|
||
break;
|
||
case 'ua':
|
||
currentFlag1.setAttribute("src", "/img/language/ua.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ua.svg");
|
||
break;
|
||
case 've':
|
||
currentFlag1.setAttribute("src", "/img/language/ve.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ve.svg");
|
||
break;
|
||
default:
|
||
currentFlag1.setAttribute("src", "/img/language/gb.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/gb.svg");
|
||
break;
|
||
}
|
||
|
||
// TODO: !!!!!!!!!!
|
||
// var languageOptions = document.getElementById("lang-popup");
|
||
// languageOptions.classList.add("hidden");
|
||
}
|
||
|
||
window.addEventListener('load', function () {
|
||
// Function to retrieve the value of a cookie
|
||
function getCookie(name) {
|
||
var cookieArr = document.cookie.split(';');
|
||
for (var i = 0; i < cookieArr.length; i++) {
|
||
var cookiePair = cookieArr[i].split('=');
|
||
var cookieKey = cookiePair[0].trim();
|
||
if (cookieKey === name) {
|
||
return decodeURIComponent(cookiePair[1]);
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
var myLocaleCookie = getCookie('localeCookie');
|
||
var currentFlag1 = document.getElementById('currentFlag1');
|
||
var currentFlag2 = document.getElementById('currentFlag2');
|
||
// var languageText = document.getElementById('languageText');
|
||
|
||
if (myLocaleCookie == null) return;
|
||
|
||
const countryCode = myLocaleCookie.split('-')[1].toLowerCase();
|
||
|
||
switch (countryCode) {
|
||
case 'ar':
|
||
currentFlag1.setAttribute("src", "/img/language/ar.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ar.svg");
|
||
break;
|
||
case 'at':
|
||
currentFlag1.setAttribute("src", "/img/language/at.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/at.svg");
|
||
break;
|
||
case 'br':
|
||
currentFlag1.setAttribute("src", "/img/language/br.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/br.svg");
|
||
break;
|
||
case 'by':
|
||
currentFlag1.setAttribute("src", "/img/language/by.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/by.svg");
|
||
break;
|
||
case 'ch':
|
||
currentFlag1.setAttribute("src", "/img/language/ch.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ch.svg");
|
||
break;
|
||
case 'cn':
|
||
currentFlag1.setAttribute("src", "/img/language/cn.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cn.svg");
|
||
break;
|
||
case 'co':
|
||
currentFlag1.setAttribute("src", "/img/language/co.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/co.svg");
|
||
break;
|
||
case 'de':
|
||
currentFlag1.setAttribute("src", "/img/language/de.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/de.svg");
|
||
break;
|
||
case 'es':
|
||
currentFlag1.setAttribute("src", "/img/language/es.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/es.svg");
|
||
break;
|
||
case 'gb':
|
||
currentFlag1.setAttribute("src", "/img/language/gb.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/gb.svg");
|
||
break;
|
||
case 'hu':
|
||
currentFlag1.setAttribute("src", "/img/language/hu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/hu.svg");
|
||
break;
|
||
case 'ie':
|
||
currentFlag1.setAttribute("src", "/img/language/ie.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ie.svg");
|
||
break;
|
||
case 'in':
|
||
currentFlag1.setAttribute("src", "/img/language/in.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/in.svg");
|
||
break;
|
||
case 'kg':
|
||
currentFlag1.setAttribute("src", "/img/language/kg.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/kg.svg");
|
||
break;
|
||
case 'kz':
|
||
currentFlag1.setAttribute("src", "/img/language/kz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/kz.svg");
|
||
break;
|
||
case 'mx':
|
||
currentFlag1.setAttribute("src", "/img/language/mx.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/mx.svg");
|
||
break;
|
||
case 'pe':
|
||
currentFlag1.setAttribute("src", "/img/language/pe.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/pe.svg");
|
||
break;
|
||
case 'pt':
|
||
currentFlag1.setAttribute("src", "/img/language/pt.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/pt.svg");
|
||
break;
|
||
case 'rs':
|
||
currentFlag1.setAttribute("src", "/img/language/rs.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/rs.svg");
|
||
break;
|
||
case 'ru':
|
||
currentFlag1.setAttribute("src", "/img/language/ru.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ru.svg");
|
||
break;
|
||
case 'us':
|
||
currentFlag1.setAttribute("src", "/img/language/us.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/us.svg");
|
||
break;
|
||
case 'ao':
|
||
currentFlag1.setAttribute("src", "/img/language/ao.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ao.svg");
|
||
break;
|
||
case 'au':
|
||
currentFlag1.setAttribute("src", "/img/language/au.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/au.svg");
|
||
break;
|
||
case 'be':
|
||
currentFlag1.setAttribute("src", "/img/language/be.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/be.svg");
|
||
break;
|
||
case 'ba':
|
||
currentFlag1.setAttribute("src", "/img/language/ba.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ba.svg");
|
||
break;
|
||
case 'ca':
|
||
currentFlag1.setAttribute("src", "/img/language/ca.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ca.svg");
|
||
break;
|
||
case 'cl':
|
||
currentFlag1.setAttribute("src", "/img/language/cl.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cl.svg");
|
||
break;
|
||
case 'cr':
|
||
currentFlag1.setAttribute("src", "/img/language/cr.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cr.svg");
|
||
break;
|
||
case 'cu':
|
||
currentFlag1.setAttribute("src", "/img/language/cu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/cu.svg");
|
||
break;
|
||
case 'lu':
|
||
currentFlag1.setAttribute("src", "/img/language/lu.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/lu.svg");
|
||
break;
|
||
case 'my':
|
||
currentFlag1.setAttribute("src", "/img/language/my.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/my.svg");
|
||
break;
|
||
case 'me':
|
||
currentFlag1.setAttribute("src", "/img/language/me.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/me.svg");
|
||
break;
|
||
case 'mz':
|
||
currentFlag1.setAttribute("src", "/img/language/mz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/mz.svg");
|
||
break;
|
||
case 'nz':
|
||
currentFlag1.setAttribute("src", "/img/language/nz.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/nz.svg");
|
||
break;
|
||
case 'ps':
|
||
currentFlag1.setAttribute("src", "/img/language/ps.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ps.svg");
|
||
break;
|
||
case 'ro':
|
||
currentFlag1.setAttribute("src", "/img/language/ro.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ro.svg");
|
||
break;
|
||
case 'sg':
|
||
currentFlag1.setAttribute("src", "/img/language/sg.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/sg.svg");
|
||
break;
|
||
case 'tl':
|
||
currentFlag1.setAttribute("src", "/img/language/tl.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/tl.svg");
|
||
break;
|
||
case 'za':
|
||
currentFlag1.setAttribute("src", "/img/language/za.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/za.svg");
|
||
break;
|
||
case 'ua':
|
||
currentFlag1.setAttribute("src", "/img/language/ua.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ua.svg");
|
||
break;
|
||
case 've':
|
||
currentFlag1.setAttribute("src", "/img/language/ve.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/ve.svg");
|
||
break;
|
||
default:
|
||
currentFlag1.setAttribute("src", "/img/language/gb.svg");
|
||
currentFlag2.setAttribute("src", "/img/language/gb.svg");
|
||
break;
|
||
}
|
||
});
|
||
</script>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar flex hidden xl:hidden h-full justify-between absolute top-0 right-0 z-50 w-full bg-black dark:bg-gray-900">
|
||
<div class="ml-5 w-10/12 bg-black dark:bg-gray-900 text-white text-2xl mt-14">
|
||
<ul class="list-none sm:space-y-2 sm:ml-20 mr-20 w-full">
|
||
<li class="text-2xl px-2 py-3.5">
|
||
<div class="closing-button py-2">
|
||
<a href="#" class=" px-4 flex"> <svg xmlns="http://www.w3.org/2000/svg" class=" h-8 w-8 flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg> </a>
|
||
</div>
|
||
</li>
|
||
<li class="py-2 px-4 border-b">
|
||
<a href="/publication/academy">Security Academy</a>
|
||
</li>
|
||
<li class="py-2 px-4 border-b">
|
||
<a href="/publication/defense">Defense Whitepaper</a>
|
||
</li>
|
||
<li class="py-2 px-4 border-b">
|
||
<a href="/publication/partner-program">Partnership Program</a>
|
||
</li>
|
||
<li class="py-2 px-4 border-b">
|
||
<a href="/security-center">Security Center</a>
|
||
</li>
|
||
<li class="py-2 px-4 border-b">
|
||
<a href="mailto:contact@cypsec.de">Contact Us</a>
|
||
</li>
|
||
</ul>
|
||
<script>
|
||
const open = document.querySelector(".mobile-menu-button");
|
||
const close = document.querySelector(".closing-button");
|
||
const sidebar = document.querySelector(".sidebar");
|
||
|
||
open.addEventListener("click", () => {
|
||
sidebar.classList.toggle("hidden");
|
||
});
|
||
|
||
close.addEventListener("click", () => {
|
||
sidebar.classList.toggle("hidden");
|
||
});
|
||
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header></div>
|
||
<!-- Navigation Bar - CypSec Centered with Logo - Exact Size Match -->
|
||
|
||
<!-- Main Content -->
|
||
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<!-- URL Breadcrumb -->
|
||
<div class="mb-6">
|
||
<p class="text-xs text-gray-500 font-mono">
|
||
</div>
|
||
|
||
<section class="relative py-20 overflow-hidden">
|
||
<!-- GRID BACKGROUND -->
|
||
<div class="absolute inset-0 z-[-1] pointer-events-none">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-30 w-full h-full">
|
||
<defs>
|
||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1"></path>
|
||
</pattern>
|
||
</defs>
|
||
<rect width="100%" height="100%" fill="url(#grid)"></rect>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- MAIN CONTENT -->
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl lg:text-5xl font-semibold leading-tight">
|
||
CypSec Security Suite
|
||
</h1>
|
||
|
||
<p class="text-lg mt-6 max-w-2xl mx-auto">
|
||
An integrated ecosystem of sovereign cybersecurity applications engineered for critical infrastructure, enterprise compliance, and operational security.
|
||
</p>
|
||
|
||
<!-- UNDERLINE BARS (exact same style as Security Notice) -->
|
||
<div class="flex justify-center mx-auto mt-6">
|
||
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PURPLE/BLUE GLOW -->
|
||
<div class="absolute inset-0 z-[-1] opacity-20 pointer-events-none">
|
||
<div class="bg-gradient-to-r from-purple-500 to-blue-600
|
||
rounded-full w-96 h-96 blur-3xl mx-auto">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Section Title -->
|
||
<section class="mb-8">
|
||
<h2 class="text-2xl font-bold mb-3 text-white">A Holistic, Modular Security Ecosystem</h2>
|
||
<p class="text-sm text-gray-300 compact-text">
|
||
The CypSec Security Suite is made of interoperable components that can be deployed independently or integrated into a cohesive architecture. Organizations select the modules they need — and expand as they grow.
|
||
</p>
|
||
</section>
|
||
<!-- Included Capabilities Grid – cut-out middle slot for image -->
|
||
<section class="mb-8">
|
||
<h3 class="text-xl font-bold mb-4 text-white text-center">Included Capabilities</h3>
|
||
|
||
<!-- 3×3 grid with center cell replaced by image -->
|
||
<div class="grid md:grid-cols-3 gap-3 max-w-4xl mx-auto">
|
||
|
||
<!-- row 1 -->
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Secure Communication & Email</h4>
|
||
<p class="smaller-text text-gray-300">End-to-end encrypted messaging, file-sharing, secure vaults, protected communication channels for sensitive teams.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Vulnerability Management & Hardening</h4>
|
||
<p class="smaller-text text-gray-300">Automated scanning, continuous monitoring, secure-by-design architecture, and remediation support.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Deception & Active Defense</h4>
|
||
<p class="smaller-text text-gray-300">Honeypots, decoys, threat-interaction infrastructure, and behavioral monitoring to detect and contain advanced attacks.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- row 2 – left box -->
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Threat Intelligence & OSINT</h4>
|
||
<p class="smaller-text text-gray-300">Tailored intelligence feeds, targeted risk analysis, threat profiling, and scenario reports.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IMAGE SLOT (centre) -->
|
||
<div class="flex items-center justify-center">
|
||
<div class="relative w-[18.5rem] h-[10.5rem] rounded-xl overflow-hidden
|
||
border border-gray-700 shadow-md
|
||
before:absolute before:inset-0 before:rounded-xl
|
||
before:ring-1 before:ring-blue-400/20
|
||
hover:before:ring-blue-400/40 before:transition before:duration-300">
|
||
<img src="ideogram-v3.0_A_high-end_corporate-style_Cyber_Insurance_Risk_Readiness_dashboard_interface_di-0.jpg"
|
||
alt="Cyber Insurance Risk Readiness dashboard"
|
||
class="w-full h-full object-cover rounded-xl
|
||
transition-transform duration-300 ease-out
|
||
hover:scale-[1.015]">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right box -->
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Compliance & Governance Automation</h4>
|
||
<p class="smaller-text text-gray-300">Policy-as-code, audit trails, evidence collections, and guidance for regulatory frameworks (DSGVO/GDPR, NIS2, etc.).</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- row 3 -->
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Incident Response & Recovery</h4>
|
||
<p class="smaller-text text-gray-300">Rapid response teams, forensics, containment strategy, and post-incident strengthening.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Malware Analysis & Secure Lab Environments</h4>
|
||
<p class="smaller-text text-gray-300">Controlled sandboxing environments for analyzing suspicious files and payloads.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 card-hover tight-card">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-6 h-6 justify-center flex-shrink-0"></div>
|
||
<div>
|
||
<h4 class="text-sm font-semibold mb-1 text-white">Secure Development & Architecture</h4>
|
||
<p class="smaller-text text-gray-300">Design-phase threat modeling, secure architectures, and code review services.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<!-- Section Divider -->
|
||
<div class="section-divider"></div>
|
||
|
||
<!-- Who It Is Designed For - More compact -->
|
||
<section class="mb-8">
|
||
<h3 class="text-xl font-bold mb-3 text-white">Who It Is Designed For</h3>
|
||
<div class="grid md:grid-cols-2 gap-2">
|
||
<div class="flex items-start space-x-2">
|
||
<span class="cyber-blue text-sm">•</span>
|
||
<p class="smaller-text text-gray-300">Small and medium enterprises seeking affordable and sovereign security.</p>
|
||
</div>
|
||
<div class="flex items-start space-x-2">
|
||
<span class="cyber-blue text-sm">•</span>
|
||
<p class="smaller-text text-gray-300">Large organizations needing composable and scalable infrastructure.</p>
|
||
</div>
|
||
<div class="flex items-start space-x-2">
|
||
<span class="cyber-blue text-sm">•</span>
|
||
<p class="smaller-text text-gray-300">Critical infrastructure operators and public institutions.</p>
|
||
</div>
|
||
<div class="flex items-start space-x-2">
|
||
<span class="cyber-blue text-sm">•</span>
|
||
<p class="smaller-text text-gray-300">Journalists, activists, NGOs, and privacy-sensitive communities.</p>
|
||
</div>
|
||
<div class="flex items-start space-x-2">
|
||
<span class="cyber-blue text-sm">•</span>
|
||
<p class="smaller-text text-gray-300">Research institutions, innovation hubs, and defense-oriented teams.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Core Benefits - More compact -->
|
||
<section class="mb-8">
|
||
<h3 class="text-xl font-bold mb-3 text-white">Core Benefits</h3>
|
||
<div class="grid md:grid-cols-2 gap-2">
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 tight-card">
|
||
<h4 class="text-sm font-semibold text-white">Unified security posture with full visibility.</h4>
|
||
</div>
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 tight-card">
|
||
<h4 class="text-sm font-semibold text-white">Reduced operational risk and minimized attack surface.</h4>
|
||
</div>
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 tight-card">
|
||
<h4 class="text-sm font-semibold text-white">Compliance readiness and audit efficiency.</h4>
|
||
</div>
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 tight-card">
|
||
<h4 class="text-sm font-semibold text-white">Long-term resilience built on sovereign control.</h4>
|
||
</div>
|
||
<div class="bg-gray-900 rounded-lg p-3 border border-gray-800 tight-card">
|
||
<h4 class="text-sm font-semibold text-white">Modular architecture that fits any environment.</h4>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Philosophy Section - More compact -->
|
||
<section class="mb-8">
|
||
<h3 class="text-xl font-bold mb-3 text-white">A Philosophy of Security by Design</h3>
|
||
<div class="bg-gray-900 rounded-lg p-4 border border-gray-700 tight-card">
|
||
<p class="smaller-text text-gray-300 mb-3">
|
||
The Security Suite is not merely a collection of tools — it is an operational model.
|
||
We embed the principles of:
|
||
</p>
|
||
<div class="grid md:grid-cols-2 gap-2 mb-3">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="w-1 h-1 bg-cyber-blue rounded-full"></span>
|
||
<span class="smaller-text text-gray-300">continuous validation,</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="w-1 h-1 bg-cyber-blue rounded-full"></span>
|
||
<span class="smaller-text text-gray-300">minimal trust,</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="w-1 h-1 bg-cyber-blue rounded-full"></span>
|
||
<span class="smaller-text text-gray-300">human-centric awareness,</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="w-1 h-1 bg-cyber-blue rounded-full"></span>
|
||
<span class="smaller-text text-gray-300">active defense, and</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="w-1 h-1 bg-cyber-blue rounded-full"></span>
|
||
<span class="smaller-text text-gray-300">traceable governance.</span>
|
||
</div>
|
||
</div>
|
||
<p class="smaller-text text-gray-300">
|
||
Together, these create an environment where security is predictable, measurable, and adaptable.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-transparent pt-20">
|
||
<div class="container w-full max-w-8xl mx-auto px-6 pt-8 pb-2">
|
||
|
||
<!-- GRID LAYOUT -->
|
||
<div class="grid gap-8 mt-3 sm:grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 sm:mx-auto">
|
||
|
||
<div class="p-2 w-full sm:mx-auto">
|
||
<div>
|
||
<div class="flex items-center">
|
||
<a href="/" class="flex items-center">
|
||
<picture>
|
||
<source srcset="cypsec-logo-white-transparent.webp" media="(prefers-color-scheme: dark)">
|
||
<img class="h-10" src="cypsec-logo-white-transparent.webp" alt="CypSec">
|
||
</picture>
|
||
<span class="ml-3 text-2xl font-semibold text-gray-900 dark:text-white">CypSec</span>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="text-lg text-gray-900 dark:text-white leading-relaxed mt-5">
|
||
Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.
|
||
</p>
|
||
|
||
<p class="text-base text-gray-900 dark:text-white leading-snug mt-8">Contact</p>
|
||
|
||
<ul>
|
||
<li class="text-base text-gray-900 dark:text-white leading-snug mt-1">
|
||
<a href="mailto:contact@cypsec.de">contact@cypsec.de</a>
|
||
</li>
|
||
<li class="text-base text-gray-900 dark:text-white leading-snug">
|
||
<a href="https://linkedin.com/company/cypsec-group">LinkedIn</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONSULTING COLUMN -->
|
||
<div class="lg:ml-24 mt-4 sm:mx-auto">
|
||
<div class="text-xl font-bold text-black dark:text-white uppercase">Consulting</div>
|
||
|
||
<a href="/security-center/incident-handling" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Incident Handling</a>
|
||
|
||
<a href="/security-center/threat-modeling" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Threat Modeling</a>
|
||
|
||
<a href="/security-center/penetration-testing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Penetration Testing</a>
|
||
|
||
<a href="/security-center/red-teaming" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Red Teaming</a>
|
||
|
||
<a href="/security-center/secure-engineering" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Secure Engineering</a>
|
||
|
||
<a href="/security-center/forensic-analysis" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Forensic Analysis</a>
|
||
|
||
<a href="/security-center/secure-operations" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Secure Operations</a>
|
||
|
||
<a href="/security-center" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">More</a>
|
||
</div>
|
||
|
||
<!-- PRODUCTS COLUMN -->
|
||
<div class="lg:ml-24 mt-4 sm:mx-auto">
|
||
<div class="text-xl font-bold text-black dark:text-white uppercase">Products</div>
|
||
|
||
<a href="/security-center/vulnerability-management" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Vulnerability Mgmt.</a>
|
||
|
||
<a href="/security-center/fuzzing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Fuzzing as a Service</a>
|
||
|
||
<a href="/security-center/communication-software" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Communication</a>
|
||
|
||
<a href="/security-center/cyber-deception" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Cyber Deception</a>
|
||
|
||
<a href="/security-center/active-defense" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Active Defense</a>
|
||
|
||
<a href="/security-center/malware-scanner" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Malware Scanner</a>
|
||
|
||
<a href="/security-center/open-source-intelligence-platform" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">OSINT Platform</a>
|
||
|
||
<a href="/security-center" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">More</a>
|
||
</div>
|
||
|
||
<!-- PUBLICATION COLUMN -->
|
||
<div class="lg:ml-24 mt-4 sm:mx-auto">
|
||
<div class="text-xl font-bold text-black dark:text-white uppercase">Publication</div>
|
||
|
||
<a href="/publication/partner-program" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Partner Program</a>
|
||
|
||
<a href="/publication/defense" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Defense Whitepaper</a>
|
||
|
||
<a href="/publication/academy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Academy</a>
|
||
|
||
<a href="/publication/press" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Press Releases</a>
|
||
|
||
<a href="/publication/blog" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Blog</a>
|
||
|
||
<a href="/publication/security-hub" class="hidden block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Hub</a>
|
||
|
||
<a href="/publication/attestation" class="hidden block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Attestation</a>
|
||
|
||
<a href="/publication/applications" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Applications</a>
|
||
</div>
|
||
|
||
<!-- COMPANY COLUMN -->
|
||
<div class="lg:ml-24 mt-4 sm:mx-auto">
|
||
<div class="text-xl font-bold text-black dark:text-white uppercase">Company</div>
|
||
|
||
<a href="/company/career" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Career</a>
|
||
|
||
<a href="/company/pricing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Pricing</a>
|
||
|
||
<a href="/company/data-privacy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Data Privacy</a>
|
||
|
||
<a href="/company/terms-of-service" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Terms of Service</a>
|
||
|
||
<a href="/company/no-tracking-policy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">No Tracking</a>
|
||
|
||
<a href="/company/company-ethics" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Company Ethics</a>
|
||
|
||
<a href="/company/company-insights" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Company Insights</a>
|
||
|
||
<a href="/company/imprint" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Imprint</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- DIVIDER -->
|
||
<hr class="my-6 border-gray-200 dark:border-gray-700">
|
||
|
||
<!-- BOTTOM BAR -->
|
||
<div class="flex sm:flex-row justify-evenly mb-4">
|
||
<div class="hidden sm:flex justify-left mt-2">
|
||
<a href="/downloads" class="mx-2 text-sm text-gray-500 hover:text-gray-300 transition-colors duration-300">
|
||
<span class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">Downloads</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="flex justify-center items-center mt-2">
|
||
|
||
<p class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">© 2025 CypSec</p>
|
||
</div>
|
||
|
||
<div class="hidden sm:flex justify-left mt-2">
|
||
<a href="/security-notice" class="mx-2 text-sm text-gray-500 hover:text-gray-300 transition-colors duration-300">
|
||
<span class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">Security</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
</html> |