diff --git a/assets/css/custom.css b/assets/css/custom.css index d486c8e..d47e8b4 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -157,13 +157,14 @@ h2 { position: relative; max-width: 1200px; margin: 0 auto; + counter-reset: timeline-counter; } .timeline::after { content: ''; position: absolute; width: 6px; - background-color: #8B5CF6; + background-color: #E5E7EB; /* Lighter line color */ top: 0; bottom: 0; left: 50%; @@ -175,6 +176,7 @@ h2 { position: relative; background-color: inherit; width: 50%; + counter-increment: timeline-counter; } .timeline-item.left { @@ -186,20 +188,26 @@ h2 { } .timeline-item::after { - content: ''; + content: counter(timeline-counter); position: absolute; - width: 25px; - height: 25px; - right: -17px; - background-color: white; - border: 4px solid #8B5CF6; - top: 15px; + width: 60px; + height: 60px; + right: -30px; + background-color: #8B5CF6; + color: white; + border: 4px solid #F9FAFB; + top: 50%; + transform: translateY(-50%); border-radius: 50%; z-index: 1; + font-size: 1.8rem; + font-weight: bold; + text-align: center; + line-height: 52px; } .timeline-item.right::after { - left: -16px; + left: -30px; } .timeline-content { diff --git a/assets/js/main.js b/assets/js/main.js index 855189d..ecf744f 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -7,4 +7,64 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { behavior: 'smooth' }); }); +}); + +// Three.js 3D Visual +document.addEventListener('DOMContentLoaded', () => { + const container = document.getElementById('3d-canvas-container'); + if (container) { + let scene, camera, renderer, cube; + + function init() { + // Scene + scene = new THREE.Scene(); + + // Camera + camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); + camera.position.z = 5; + + // Renderer + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); + renderer.setSize(container.clientWidth, container.clientHeight); + container.appendChild(renderer.domElement); + + // Cube + const geometry = new THREE.BoxGeometry(2, 2, 2); + const material = new THREE.MeshStandardMaterial({ color: 0x8B5CF6, roughness: 0.5, metalness: 0.5 }); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + // Lights + const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); + scene.add(ambientLight); + + const pointLight = new THREE.PointLight(0xffffff, 0.8); + pointLight.position.set(5, 5, 5); + scene.add(pointLight); + + // Animation + animate(); + } + + function animate() { + requestAnimationFrame(animate); + + cube.rotation.x += 0.005; + cube.rotation.y += 0.005; + + renderer.render(scene, camera); + } + + function onWindowResize() { + if (container.clientWidth > 0 && container.clientHeight > 0) { + camera.aspect = container.clientWidth / container.clientHeight; + camera.updateProjectionMatrix(); + renderer.setSize(container.clientWidth, container.clientHeight); + } + } + + window.addEventListener('resize', onWindowResize, false); + + init(); + } }); \ No newline at end of file diff --git a/index.php b/index.php index 51d5453..b36bc05 100644 --- a/index.php +++ b/index.php @@ -56,6 +56,11 @@ + +
+
+
+
@@ -97,48 +102,48 @@
-
1. Integration
 -

Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.

-
-
-
-
-
2. Log In & Workspace Overview
 -

The user signs in securely via Single Sign-On (SSO) (Azure AD / Okta). Lands on the Organization Dashboard with a clear compliance score, open gaps, and quick actions.

-

🎯 Purpose: Give instant clarity — what’s secure, what’s risky, what needs action.

-
-
-
-
-
3. Upload Evidence
 +
Upload Evidence

Click Upload Evidence → Choose File. Vision Copilot automatically uploads, analyzes, and tags the evidence, making it machine-readable.

🔍 Purpose: Replace tedious evidence collection with instant, machine-readable proof.

-
4. Automatic Gap Detection
 +
Log In & Workspace Overview
 +

The user signs in securely via Single Sign-On (SSO) (Azure AD / Okta). Lands on the Organization Dashboard with a clear compliance score, open gaps, and quick actions.

+

🎯 Purpose: Give instant clarity — what’s secure, what’s risky, what needs action.

+
+
+
+
+
Integration
 +

Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.

+
+
+
+
+
Automatic Gap Detection

The Gap Engine compares evidence to baseline rules, automatically generates findings, and maps them to relevant frameworks (NIS2, DORA, ISO 27001).

⚡ Purpose: Let the system find what’s missing before the auditor does.

-
5. Review & Assign Tasks
 -

Navigate to the Tasks View to see all gaps with linked evidence, regulation references, and suggested remediation. Assign owners and set due dates to turn findings into trackable workflows.

-

🧩 Purpose: Turn findings into workflows — trackable, accountable, visible.

-
-
-
-
-
6. Cross-Framework Mapping
 +
Cross-Framework Mapping

Open the Control Explorer to see how controls overlap across multiple frameworks. Evidence uploaded once gives you compliance credit everywhere.

♻️ Purpose: One control = multiple compliances. Stop duplicating effort.

+
+
+
Review & Assign Tasks
 +

Navigate to the Tasks View to see all gaps with linked evidence, regulation references, and suggested remediation. Assign owners and set due dates to turn findings into trackable workflows.

+

🧩 Purpose: Turn findings into workflows — trackable, accountable, visible.

+
+
-
7. AI Copilot Q&A
 +
AI Copilot Q&A

Open Ask Copilot to get instant answers to your compliance questions, with responses trained on real regulation text.

@@ -301,6 +306,7 @@ + \ No newline at end of file