0.9
This commit is contained in:
Flatlogic Bot
parent
f9e1d57725
commit
e48893c5f7
@ -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 {
|
||||
|
||||
@ -8,3 +8,63 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
54
index.php
54
index.php
@ -56,6 +56,11 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 3D Visual Section -->
|
||||
<section id="3d-visual" class="section-3d" style="height: 400px; overflow: hidden; position: relative; background-color: #f8f9fa;">
|
||||
<div id="3d-canvas-container" style="width: 100%; height: 100%;"></div>
|
||||
</section>
|
||||
|
||||
<!-- The Problem Section -->
|
||||
<section id="problem" class="section">
|
||||
<div class="container text-center">
|
||||
@ -97,48 +102,48 @@
|
||||
<div class="timeline">
|
||||
<div class="timeline-item left">
|
||||
<div class="timeline-content">
|
||||
<a href="features/integration.php" style="text-decoration: none; color: inherit;"><h5>1. Integration</h5></a>
|
||||
<p class="text-start">Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item right">
|
||||
<div class="timeline-content">
|
||||
<a href="features/login-and-workspace-overview.php" style="text-decoration: none; color: inherit;"><h5>2. Log In & Workspace Overview</h5></a>
|
||||
<p class="text-start">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.</p>
|
||||
<p class="text-start">🎯 <strong>Purpose:</strong> Give instant clarity — what’s secure, what’s risky, what needs action.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item left">
|
||||
<div class="timeline-content">
|
||||
<a href="features/upload-evidence.php" style="text-decoration: none; color: inherit;"><h5>3. Upload Evidence</h5></a>
|
||||
<a href="features/upload-evidence.php" style="text-decoration: none; color: inherit;"><h5>Upload Evidence</h5></a>
|
||||
<p class="text-start">Click Upload Evidence → Choose File. Vision Copilot automatically uploads, analyzes, and tags the evidence, making it machine-readable.</p>
|
||||
<p class="text-start">🔍 <strong>Purpose:</strong> Replace tedious evidence collection with instant, machine-readable proof.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item right">
|
||||
<div class="timeline-content">
|
||||
<a href="features/automatic-gap-detection.php" style="text-decoration: none; color: inherit;"><h5>4. Automatic Gap Detection</h5></a>
|
||||
<a href="features/login-and-workspace-overview.php" style="text-decoration: none; color: inherit;"><h5>Log In & Workspace Overview</h5></a>
|
||||
<p class="text-start">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.</p>
|
||||
<p class="text-start">🎯 <strong>Purpose:</strong> Give instant clarity — what’s secure, what’s risky, what needs action.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item left">
|
||||
<div class="timeline-content">
|
||||
<a href="features/integration.php" style="text-decoration: none; color: inherit;"><h5>Integration</h5></a>
|
||||
<p class="text-start">Integration of all your related tools such as Asset management, risk management Jira , Vulnerability management tool.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item right">
|
||||
<div class="timeline-content">
|
||||
<a href="features/automatic-gap-detection.php" style="text-decoration: none; color: inherit;"><h5>Automatic Gap Detection</h5></a>
|
||||
<p class="text-start">The Gap Engine compares evidence to baseline rules, automatically generates findings, and maps them to relevant frameworks (NIS2, DORA, ISO 27001).</p>
|
||||
<p class="text-start">⚡ <strong>Purpose:</strong> Let the system find what’s missing before the auditor does.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item left">
|
||||
<div class="timeline-content">
|
||||
<a href="features/review-and-assign-tasks.php" style="text-decoration: none; color: inherit;"><h5>5. Review & Assign Tasks</h5></a>
|
||||
<p class="text-start">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.</p>
|
||||
<p class="text-start">🧩 <strong>Purpose:</strong> Turn findings into workflows — trackable, accountable, visible.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item right">
|
||||
<div class="timeline-content">
|
||||
<a href="features/cross-framework-mapping.php" style="text-decoration: none; color: inherit;"><h5>6. Cross-Framework Mapping</h5></a>
|
||||
<a href="features/cross-framework-mapping.php" style="text-decoration: none; color: inherit;"><h5>Cross-Framework Mapping</h5></a>
|
||||
<p class="text-start">Open the Control Explorer to see how controls overlap across multiple frameworks. Evidence uploaded once gives you compliance credit everywhere.</p>
|
||||
<p class="text-start">♻️ <strong>Purpose:</strong> One control = multiple compliances. Stop duplicating effort.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item right">
|
||||
<div class="timeline-content">
|
||||
<a href="features/review-and-assign-tasks.php" style="text-decoration: none; color: inherit;"><h5>Review & Assign Tasks</h5></a>
|
||||
<p class="text-start">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.</p>
|
||||
<p class="text-start">🧩 <strong>Purpose:</strong> Turn findings into workflows — trackable, accountable, visible.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item left">
|
||||
<div class="timeline-content">
|
||||
<a href="features/ai-copilot-qa.php" style="text-decoration: none; color: inherit;"><h5>7. AI Copilot Q&A</h5></a>
|
||||
<a href="features/ai-copilot-qa.php" style="text-decoration: none; color: inherit;"><h5>AI Copilot Q&A</h5></a>
|
||||
<p class="text-start">Open Ask Copilot to get instant answers to your compliance questions, with responses trained on real regulation text.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -301,6 +306,7 @@
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/132/three.min.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user