Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history 
Signed-off-by: Raydo Matthee <[email protected]>
  • Loading branch information
@burnt-exe
burnt-exe authored May 19, 2024
1 parent 120d56b commit 39f6ac4
Showing 1 changed file with 84 additions and 100 deletions.
184 changes: 84 additions & 100 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skunkworks Academy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css">
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<style>
<link rel="stylesheet" href="css/main.css">
<style>
/* Additional styles for sidebar */
#sidebar {
transform: translateX(-100%);
Expand All @@ -16,6 +18,7 @@
#sidebar.open {
transform: translateX(0);
}

/* Dropdown menu style */
.dropdown-content {
display: none;
Expand All @@ -26,124 +29,105 @@
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body class="font-roboto flex flex-col min-h-screen bg-light-blue text-gray-900">
<!-- Menu Bar -->
<header class="bg-blue-800 text-white p-4">
<nav class="container mx-auto flex justify-between items-center">
<a href="https://github.skunkworks.africa/" class="text-xl font-bold">Skunkworks Academy</a>
<div class="flex justify-center space-x-4">
<!-- Navigation links with dropdowns -->
<div class="dropdown">
<a href="https://github.skunkworks.africa/Courses" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Courses</a>
<div class="dropdown-content">
<!-- Dropdown menu -->
<div class="absolute hidden group-hover:block bg-white text-gray-900">
<a href="https://github.skunkworks.africa/Courses/course1">Course 1</a>
<a href="https://github.skunkworks.africa/Courses/course2">Course 2</a>
<a href="https://github.skunkworks.africa/Courses/course3">Course 3</a>
</div>
</div>
<header class="bx--header">
<a class="bx--header__name" href="index.html">Skunkworks Academy</a>
<nav class="bx--header__nav">
<ul class="bx--header__menu-bar">
<li class="bx--header__menu-item dropdown">
<a class="bx--header__menu-item" href="courses.html">Courses</a>
<div class="dropdown-content">
<a href="course1.html">Course 1</a>
<a href="course2.html">Course 2</a>
<a href="course3.html">Course 3</a>
</div>
<a href="https://github.skunkworks.africa/Services" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Services</a>
<a href="https://github.skunkworks.africa/About" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">About</a>
<a href="https://github.skunkworks.africa/Contact" class="text-white hover:underline px-4 py-2 rounded-md hover:bg-blue-700">Contact</a>
</nav>
</div>
</li>
<li class="bx--header__menu-item">
<a class="bx--header__menu-item" href="services.html">Services</a>
</li>
<li class="bx--header__menu-item">
<a class="bx--header__menu-item" href="about.html">About</a>
</li>
<li class="bx--header__menu-item">
<a class="bx--header__menu-item" href="contact.html">Contact</a>
</li>
<li class="bx--header__menu-item">
<a class="bx--header__menu-item" href="docs/index.html">Documentation</a>
</li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="flex-grow container mx-auto flex flex-col items-center justify-center p-4">
<div class="w-full max-w-3xl text-center mb-4">
<h1 class="text-2xl mb-4">How can I help you today?</h1>
<!-- Buttons to guide the user to different services -->
<button onclick="explainService('popcorn')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your own learning path</button>
<button onclick="explainService('optionsTrading')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Search for a Course</button>
<button onclick="explainService('dishRecommendation')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your professional profile</button>
<button onclick="explainService('edgeCases')" class="bg-blue-600 text-white rounded px-4 py-2 m-2 hover:bg-blue-700">Create your SaaS Architecural Structure</button>
</div>
</main>
<main class="flex-grow container mx-auto p-4">
<div id="chat-container" class="bg-white rounded-lg p-4 flex flex-col space-y-4">
<!-- Chat messages will go here -->
</div>
</main>
<!-- Body: Search/Chat/Query Prompt -->
<main class="flex-grow container mx-auto flex items-center justify-center p-4">
<div class="w-full max-w-md">
<input type="text" placeholder="Search courses, ask a question..." class="w-full p-4 rounded border border-gray-300 focus:border-blue-500 focus:outline-none" autofocus>
</div>
<div class="mt-4">
<input type="text" id="chat-input" placeholder="Type your message..." class="border border-gray-300 p-2 rounded w-full" onkeydown="if(event.key === 'Enter'){ sendMessage(); }">
<button onclick="sendMessage()" class="bg-blue-600 text-white rounded px-4 py-2 mt-2 hover:bg-blue-700">Send</button>
<main class="bx--content">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col-lg-12 bx--col-md-8 text-center">
<h1 class="bx--type-expressive-heading-04 mb-4">How can I help you today?</h1>
<button class="bx--btn bx--btn--primary" onclick="explainService('learning-path')">Create your own learning path</button>
<button class="bx--btn bx--btn--primary" onclick="explainService('search-course')">Search for a Course</button>
<button class="bx--btn bx--btn--primary" onclick="explainService('professional-profile')">Create your professional profile</button>
<button class="bx--btn bx--btn--primary" onclick="explainService('saas-architecture')">Create your SaaS Architectural Structure</button>
</div>
</div>
<div class="bx--row">
<div class="bx--col-lg-12 bx--col-md-8">
<div id="chat-container" class="bg-white rounded-lg p-4 flex flex-col space-y-4">
<!-- Chat messages will go here -->
</div>
</div>
</div>
<div class="bx--row">
<div class="bx--col-lg-12 bx--col-md-8 flex items-center justify-center">
<div class="w-full max-w-md">
<input type="text" placeholder="Search courses, ask a question..." class="w-full p-4 rounded border border-gray-300 focus:border-blue-500 focus:outline-none" autofocus>
<div class="mt-4 flex">
<input type="text" id="chat-input" placeholder="Type your message..." class="border border-gray-300 p-2 rounded w-full" onkeydown="if(event.key === 'Enter'){ sendMessage(); }">
<button onclick="sendMessage()" class="bx--btn bx--btn--primary ml-2">Send</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Left Sidebar (Placeholder for actual sliding functionality) -->
<aside class="fixed top-0 left-0 w-64 h-full bg-blue-900 text-white p-4 transform -translate-x-full transition-transform duration-300">
<!-- Left Sidebar -->
<aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-blue-900 text-white p-4">
<p class="mb-4">Left Sidebar Content</p>
<button class="bg-blue-500 rounded px-4 py-2 m-2 hover:bg-blue-600">Close</button>
<button class="bx--btn bx--btn--secondary" onclick="toggleSidebar()">Close</button>
</aside>
<!-- Footer -->
<footer class="bg-blue-800 text-white p-4 text-center">
<p>© 2024 Skunkworks Academy. All rights reserved.</p>
<footer class="bx--footer">
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col-lg-12 bx--col-md-8">
<p class="bx--type-body-long-01">© 2024 Skunkworks Academy. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="js/script.js"></script>
<script>
function explainService(service)
{
// Placeholder function - Implement logic to display service explanations or navigate to service pages
alert(`This would lead to the ${service} service page or display an explanation about the service.`);
function explainService(service) {
alert(`This would lead to the ${service} service page or display an explanation about the service.`);
}
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skunkworks Academy LMS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<style>
/* Additional styles for sidebar */
#sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
function sendMessage() {
const input = document.getElementById('chat-input');
if (input.value.trim() !== '') {
// Implement the logic to send the message
alert(`Sending message: ${input.value}`);
input.value = '';
}
}

#sidebar.open {
transform: translateX(0);
}
/* Dropdown menu style */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('open');
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body class="font-roboto flex flex-col min-h-screen bg-light-blue text-gray-900">
</header>




</footer>



</script>
</body>
</html>

0 comments on commit 39f6ac4

Please sign in to comment.