GuidoSchenone/SECURE-EMAILS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hello

Browse Source
This commit is contained in:
GuidoSchenone
2025-12-09 18:18:06 -03:00
parent 6e90a4e571
commit 24c3aa97f3
1 changed files with 87 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
secure-emails.html
View File

@@ -178,15 +178,24 @@
</div> </div>
</section> </section>
<!-- 1. CENTRED NAV (unchanged) -->
<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>
<!-- Problem Roulette --> <!-- 2. CENTRED TITLE + ROULETTE -->
<section class="mb-8" x-data="wheelData()"> <section class="mb-8" x-data="wheelData()">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center "> <h2 class="text-2xl font-bold mb-6 text-white flex items-center ">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span> <span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
The Problem with Standard Email The Problem with Standard Email
</h2> </h2>
<!-- Alpine CDN (load once in <head> if you prefer) --> <!-- Alpine CDN (once in <head> is fine) -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div class="relative max-w-md mx-auto"> <div class="relative max-w-md mx-auto">
@@ -195,21 +204,20 @@
<div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-red-500"></div> <div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-red-500"></div>
</div> </div>
<!-- wheel --> <!-- wheel (same code as before) -->
<div class="w-80 h-80 mx-auto rounded-full bg-gradient-to-br from-slate-800 to-black p-3 shadow-2xl relative overflow-hidden"> <div class="w-80 h-80 mx-auto rounded-full bg-gradient-to-br from-slate-900 to-black p-3 shadow-2xl relative overflow-hidden">
<div class="w-full h-full rounded-full grid grid-cols-2 grid-rows-3" <div class="absolute inset-4 rounded-full border-4 border-blue-500/30"></div>
<div class="w-full h-full rounded-full grid grid-cols-2 grid-rows-3 overflow-hidden"
:style="'transform: rotate(' + rotation + 'deg); transition: transform .7s ease-out'"> :style="'transform: rotate(' + rotation + 'deg); transition: transform .7s ease-out'">
<!-- slices --> <!-- slices -->
<div @click="pick(0)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-red-500/20 to-orange-500/20">🎣</div> <div @click="pick(0)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">🎣</div>
<div @click="pick(60)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-yellow-500/20 to-orange-500/20">👻</div> <div @click="pick(60)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">👻</div>
<div @click="pick(120)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-purple-500/20 to-pink-500/20">📎</div> <div @click="pick(120)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">📎</div>
<div @click="pick(180)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-green-500/20 to-teal-500/20">💥</div> <div @click="pick(180)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">💥</div>
<div @click="pick(240)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20">🔓</div> <div @click="pick(240)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">🔓</div>
<div @click="pick(300)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-gray-500/20 to-slate-500/20">⚠</div> <div @click="pick(300)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-4xl bg-gradient-to-br from-slate-800 to-blue-900/20">⚠</div>
</div> </div>
<div class="absolute inset-16 rounded-full overflow-hidden neo-card glow-border">
<!-- centre image + explanation -->
<div class="absolute inset-12 rounded-full overflow-hidden neo-card glow-border">
<img src="emailsecurity3.jpg.webp" alt="Email security" class="w-full h-full object-cover"> <img src="emailsecurity3.jpg.webp" alt="Email security" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center p-4 transition-opacity duration-500" <div class="absolute inset-0 bg-black/60 flex items-center justify-center p-4 transition-opacity duration-500"
:class="showText ? 'opacity-100' : 'opacity-0'"> :class="showText ? 'opacity-100' : 'opacity-0'">
@@ -234,9 +242,9 @@
showText: false, showText: false,
current: topics[0], current: topics[0],
pick(angle) { pick(angle) {
this.rotation = -angle; // spin to slice this.rotation = -angle;
this.showText = false; this.showText = false;
setTimeout(() => { // after spin setTimeout(() => {
this.current = topics[angle / 60]; this.current = topics[angle / 60];
this.showText = true; this.showText = true;
}, 350); }, 350);
@@ -245,6 +253,69 @@
} }
</script> </script>
</section> </section>
<!-- 3. FULL-WIDTH SINGLE-FRAME LIST -->
<section class="mb-8">
<div class="px-4 sm:px-6 lg:px-8">
<div class="neo-card rounded-2xl p-6 glow-border">
<div class="grid md:grid-cols-3 gap-6">
<!-- 1 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">🎣</span>
<div>
<h4 class="text-sm font-semibold text-white">Phishing and business-email-compromise (BEC)</h4>
<p class="smaller-text text-gray-300">Credential theft via spoofed emails.</p>
</div>
</div>
<!-- 2 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">👻</span>
<div>
<h4 class="text-sm font-semibold text-white">Spoofing and impersonation</h4>
<p class="smaller-text text-gray-300">Fake domains and identity fraud.</p>
</div>
</div>
<!-- 3 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">📎</span>
<div>
<h4 class="text-sm font-semibold text-white">Malware embedded in attachments</h4>
<p class="smaller-text text-gray-300">Files weaponised to deliver payloads.</p>
</div>
</div>
<!-- 4 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">💥</span>
<div>
<h4 class="text-sm font-semibold text-white">Accidental or malicious data leaks</h4>
<p class="smaller-text text-gray-300">Sensitive data sent to wrong recipients.</p>
</div>
</div>
<!-- 5 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">🔓</span>
<div>
<h4 class="text-sm font-semibold text-white">Lack of encryption across providers</h4>
<p class="smaller-text text-gray-300">Messages in clear text outside your domain.</p>
</div>
</div>
<!-- 6 -->
<div class="flex items-start space-x-3">
<span class="text-2xl">⚠</span>
<div>
<h4 class="text-sm font-semibold text-white">Absence of role-based governance</h4>
<p class="smaller-text text-gray-300">No enforced policies or audit trails.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Capabilities (image breaks the grid) --> <!-- Capabilities (image breaks the grid) -->
<section class="mb-8"> <section class="mb-8">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center "> <h2 class="text-2xl font-bold mb-6 text-white flex items-center ">