Skip to content

I've created an initial version of the website. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

I've created an initial version of the website. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 172 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
/* Basic styles */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background-color: #333;
color: #fff;
padding: 1rem 0;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
margin: 0;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
margin-left: 20px;
}

nav a {
color: #fff;
text-decoration: none;
}

#hero {
background-color: #f4f4f4;
padding: 4rem 0;
text-align: center;
}

#hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.btn {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}

#features {
padding: 4rem 0;
}

.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.feature {
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
}

#get-started {
background-color: #f4f4f4;
padding: 4rem 0;
}

.step {
margin-bottom: 2rem;
}

pre {
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
white-space: pre-wrap;
word-wrap: break-word;
}

#live-demo {
padding: 4rem 0;
}

#scanner-form {
display: flex;
margin-bottom: 2rem;
}

#scanner-input {
flex-grow: 1;
padding: 10px;
font-size: 1rem;
}

#scanner-results {
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
}

#pricing {
background-color: #f4f4f4;
padding: 4rem 0;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.pricing-plan {
background-color: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}

.price {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
}

.pricing-plan ul {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}

#contact {
padding: 4rem 0;
}

#contact-form {
display: grid;
gap: 20px;
}

#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
font-size: 1rem;
}

footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
147 changes: 147 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cybersecurity Framework</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Cybersecurity Framework</h1>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#get-started">Get Started</a></li>
<li><a href="#live-demo">Live Demo</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section id="hero">
<div class="container">
<h2>Intelligent Security Agents for the Modern Enterprise</h2>
<p>Build, deploy, and manage AI-powered cybersecurity agents with our comprehensive framework. Secure your infrastructure with cutting-edge technology.</p>
<a href="#get-started" class="btn">Get Started Now</a>
</div>
</section>

<section id="features">
<div class="container">
<h2>Key Features</h2>
<div class="feature-grid">
<div class="feature">
<h3>AI-Powered Security Agents</h3>
<p>Leverage intelligent agents for PKI management, vulnerability assessment, and security analysis.</p>
</div>
<div class="feature">
<h3>PKI Infrastructure</h3>
<p>A complete Public Key Infrastructure with certificate lifecycle management.</p>
</div>
<div class="feature">
<h3>MCP Integration</h3>
<p>Model Context Protocol server for seamless AI tool integration.</p>
</div>
<div class="feature">
<h3>Docker Deployment</h3>
<p>Containerized deployment with Docker Compose for easy setup and scaling.</p>
</div>
</div>
</div>
</section>

<section id="get-started">
<div class="container">
<h2>Get Started in 10 Minutes</h2>
<div class="step">
<h3>Step 1: Clone and Setup</h3>
<pre><code>git clone https://github.com/Mkp-dev-portefolio/cybersecurity-framework.git
cd cybersecurity-framework
python3 -m venv quickstart-env
source quickstart-env/bin/activate
pip install -r requirements-quickstart.txt</code></pre>
</div>
<div class="step">
<h3>Step 2: Create Your First Agent</h3>
<pre><code>python run_quickstart.py</code></pre>
</div>
</div>
</section>

<section id="live-demo">
<div class="container">
<h2>Live Demo: Network Scanner</h2>
<form id="scanner-form">
<input type="text" id="scanner-input" placeholder="Enter a hostname or IP address">
<button type="submit" class="btn">Scan</button>
</form>
<div id="scanner-results"></div>
</div>
</section>

<section id="pricing">
<div class="container">
<h2>Pricing Plans</h2>
<div class="pricing-grid">
<div class="pricing-plan">
<h3>Basic</h3>
<p class="price">$99/month</p>
<ul>
<li>10 Agents</li>
<li>PKI Management</li>
<li>Basic Support</li>
</ul>
<a href="#" class="btn">Choose Plan</a>
</div>
<div class="pricing-plan">
<h3>Pro</h3>
<p class="price">$299/month</p>
<ul>
<li>50 Agents</li>
<li>PKI Management</li>
<li>Vulnerability Scanning</li>
<li>Priority Support</li>
</ul>
<a href="#" class="btn">Choose Plan</a>
</div>
<div class="pricing-plan">
<h3>Enterprise</h3>
<p class="price">Contact Us</p>
<ul>
<li>Unlimited Agents</li>
<li>PKI Management</li>
<li>Vulnerability Scanning</li>
<li>Threat Intelligence</li>
<li>24/7 Support</li>
</ul>
<a href="#" class="btn">Contact Us</a>
</div>
</div>
</div>
</section>

<section id="contact">
<div class="container">
<h2>Contact Us</h2>
<form id="contact-form">
<input type="text" id="name" placeholder="Your Name" required>
<input type="email" id="email" placeholder="Your Email" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 Cybersecurity Framework</p>
</footer>

<script src="js/script.js"></script>
</body>
</html>
52 changes: 52 additions & 0 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
// JavaScript code will go here
console.log("Welcome to the Cybersecurity Framework website!");

const scannerForm = document.getElementById('scanner-form');
const scannerInput = document.getElementById('scanner-input');
const scannerResults = document.getElementById('scanner-results');

scannerForm.addEventListener('submit', (e) => {
e.preventDefault();
const target = scannerInput.value;
if (!target) {
return;
}

scannerResults.innerHTML = `<p>Scanning ${target}...</p>`;

// Simulate a backend API call
setTimeout(() => {
const dummyResult = {
host: target,
open_ports: [80, 443],
closed_ports: [21, 22, 23, 25, 53, 110, 143, 993, 995, 8080, 8443],
total_scanned: 13,
timestamp: new Date().toISOString()
};

scannerResults.innerHTML = `
<h3>Scan Results for ${dummyResult.host}</h3>
<p><strong>Open Ports:</strong> ${dummyResult.open_ports.join(', ')}</p>
<p><strong>Closed Ports:</strong> ${dummyResult.closed_ports.length}</p>
<p><strong>Total Scanned:</strong> ${dummyResult.total_scanned}</p>
<p><strong>Timestamp:</strong> ${dummyResult.timestamp}</p>
`;
}, 2000);
});

const contactForm = document.getElementById('contact-form');

contactForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

if (!name || !email || !message) {
return;
}

console.log('Contact form submitted:', { name, email, message });
alert('Thank you for your message! We will get back to you soon.');
contactForm.reset();
});
Loading