Skip to content
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

Jump to bottom

Revamped Mainindex Page #90

Merged
merged 1 commit into from
Oct 9, 2024
Merged

Revamped Mainindex Page #90

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
45 changes: 23 additions & 22 deletions src/app/components/main-index/main-index.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ body {
margin-left: 1rem;
}
body {
font-family: 'Open Sans', sans-serif;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
Expand All @@ -125,17 +125,17 @@ body {
}

.div-new {
display: flex;
align-items: center;
margin-left: auto;
margin-right: 1rem;
display: flex;
align-items: center;
margin-left: auto;
margin-right: 1rem;
}

.div-new a {
margin-left: 1rem;
padding-right: 20px;
color: #fff;
text-decoration: none;
margin-left: 1rem;
padding-right: 20px;
color: #fff;
text-decoration: none;
}

.profile-dropdown {
Expand Down Expand Up @@ -188,24 +188,24 @@ body {
}

.content-box ul {
margin: 0rem ; /* Reduce the gap between the list and other elements */
margin: 0rem; /* Reduce the gap between the list and other elements */
padding-left: 1.2rem;
padding-right: 0rem;
}

.btn {
text-decoration: none;
color: #fff;
padding: 0.5rem 1.5rem;
margin-top: 1rem;
background-color: #444;
border-radius: 5px;
display: inline-block;
transition: background-color 0.3s;
text-decoration: none;
color: #fff;
padding: 0.5rem 1.5rem;
margin-top: 1rem;
background-color: #444;
border-radius: 5px;
display: inline-block;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #555;
background-color: #555;
}

body {
Expand Down Expand Up @@ -234,7 +234,8 @@ body {
z-index: 1;
border-radius: 5px;
}
.dropdown-content p, .dropdown-content a {
.dropdown-content p,
.dropdown-content a {
margin: 10px;
padding: 5px 10px;
color: black;
Expand All @@ -251,7 +252,7 @@ body {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.dfs-box {
background-image: url('/assets/images/dfs-background.jpg'); /* Replace with your DFS image path */
background-image: url("/assets/images/dfs-background.jpg"); /* Replace with your DFS image path */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
Expand All @@ -262,7 +263,7 @@ body {
width: 45%;
}
.bfs-box {
background-image: url('/assets/images/bfs-background.jpg'); /* Replace with your BFS image path */
background-image: url("/assets/images/bfs-background.jpg"); /* Replace with your BFS image path */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
Expand Down
182 changes: 103 additions & 79 deletions src/app/components/main-index/main-index.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Graph Traversal Home</title>
<link rel="stylesheet" href="main-index.component.css" />

</head>
<body>
<div class="navbar">
<div class="nav-left">
<p>GRAPH-TRAVERSAL</p>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Graph Traversal Home</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.hero-section {
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-box {
border: 2px solid #333;
}

.logout-btn {
background-color: #ff4757;
color: #fff;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.logout-btn:hover {
background-color: #ff6b81;
transform: scale(1.05);
}

.logout-btn:focus {
outline: none;
box-shadow: 0 0 5px rgba(255, 71, 87, 0.5);
}
</style>
</head>

<body class="bg-light text-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">GRAPH-TRAVERSAL</a>
<div class="d-flex">
<a href="/dfsPage" class="btn btn-dark me-3">DFS</a>
<a href="/bfsPage" class="btn btn-dark me-3">BFS</a>
<button class="btn logout-btn">Logout</button>
</div>
<div class="div-new">
<a href="/dfsPage" class="btn">DFS</a>
<a href="/bfsPage" class="btn">BFS</a>
</div>
</nav>

<div class="container my-5 d-flex flex-column">
<div class="hero-section bg-white text-center p-5 mb-4">
<h1>Explore Graph Traversal Algorithms</h1>
<p class="lead">Dive into the fascinating world of graph traversal with our interactive learning platform.
Understand the intricacies of Depth-First Search (DFS) and Breadth-First Search (BFS) algorithms through
comprehensive explanations and visual examples.</p>
<a href="#learn-more" class="btn btn-dark">Learn More</a>
</div>

<div class="row g-4">
<div class="col-md-6">
<div class="content-box bg-white p-4 shadow" style="width: 100%;">
<h2>Depth-First Search (DFS)</h2>
<p>Depth-First Search (DFS) is a graph traversal algorithm that explores as far as possible along each branch
before backtracking. It's like exploring a maze by following each path to its end before returning to try a
different route.</p>
<h3>Key Characteristics:</h3>
<ul>
<li>Uses a stack (or recursion) to keep track of nodes</li>
<li>Memory-efficient for certain types of problems</li>
<li>Can be used to detect cycles in a graph</li>
<li>Useful for topological sorting and solving puzzles</li>
</ul>
<a href="/dfsPage" class="btn btn-dark">Explore DFS</a>
</div>
</div>
<div class="profile-dropdown">
<img src="https://as1.ftcdn.net/v2/jpg/07/77/92/08/1000_F_777920887_JNV7hglZmyROgiZjGb6x9DP4Qfu5gyg0.jpg"
alt="Profile"
class="profile-img"
onclick="toggleDropdown()">
<div id="dropdown-menu" class="dropdown-content">
<a href="#">My Profile</a>
<a href="#">Logout</a>
<div class="col-md-6">
<div class="content-box bg-white p-4 shadow" style="width: 100%;">
<h2>Breadth-First Search (BFS)</h2>
<p>Breadth-First Search (BFS) is a graph traversal algorithm that explores all the vertices of a graph at the
present depth prior to moving on to the vertices at the next depth level. It's like exploring a maze by
examining all paths of a certain length before moving to longer paths.</p>
<h3>Key Characteristics:</h3>
<ul>
<li>Uses a queue to keep track of nodes</li>
<li>Guarantees the shortest path in unweighted graphs</li>
<li>Useful for finding the shortest path and in peer-to-peer networks</li>
<li>Effective for searching in social networks</li>
</ul>
<a href="/bfsPage" class="btn btn-dark">Explore BFS</a>
</div>
</div>
<button (click)="onLogout()" class="btn logout-btn">Logout</button>
</div>

<div class="container">
<div class="content-box">
<h2>Depth-First Search (DFS)</h2>
<p>
Depth-First Search (DFS) is a graph traversal algorithm used to explore the nodes and edges of a graph. Unlike Breadth-First Search (BFS), which explores nodes level by level, DFS goes as deep as possible into the graph, exploring one branch fully before backtracking. This technique is analogous to exploring a maze by going as deep as possible until hitting a dead-end, and then backtracking to explore another path.
</p>
<h3>Depth-First Search (DFS) Algorithm Steps</h3>
<p>
1. Start from the root node (or any starting node)<br>
2. Mark the node as visited.<br>
3. For each neighbor of the current node:<br>
&nbsp;&nbsp;a. If the neighbor has not been visited, recursively visit that neighbor.<br>
4. Repeat the process until all nodes are visited.<br>
5. Backtrack when there are no more unvisited neighbors to explore.<br>
</p>
<a href="/dfsPage" class="btn">DFS</a>
</div>
<div class="content-box">
<h2>Breadth-First Search (BFS)</h2>
<p>
Breadth-First Search (BFS) is a fundamental algorithm used for traversing or searching through data structures like trees or graphs. It explores all the vertices or nodes of a graph level by level before moving to the next level.
</p>
<h3>Breadth-First Search (BFS) Algorithm Steps</h3>
<p>
1. Start from the root node (or any starting node).<br>
2. Mark the node as visited and enqueue it.<br>
3. While the queue is not empty:<br>
&nbsp;&nbsp;a. Dequeue a node from the front of the queue.<br>
&nbsp;&nbsp;b. For each neighbor of the dequeued node:<br>
&nbsp;&nbsp;&nbsp;&nbsp;i. If the neighbor has not been visited,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A. Mark it as visited.<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B. Enqueue the neighbor.<br>
4. Repeat the process until the queue is empty.<br>
</p>
<a href="/bfsPage" class="btn">BFS</a>
</div>
<div class="additional-info bg-white p-4 mt-5 shadow">
<h2>Why Learn Graph Traversal Algorithms?</h2>
<p>Understanding graph traversal algorithms is crucial for anyone interested in computer science, data structures,
and algorithms. These techniques are fundamental to solving a wide range of problems, including:</p>
<ul>
<li>Pathfinding in navigation systems</li>
<li>Web crawling and indexing</li>
<li>Social network analysis</li>
<li>Solving puzzles and games</li>
<li>Network broadcast and garbage collection</li>
</ul>
<p>By mastering DFS and BFS, you'll gain powerful tools for tackling complex computational problems and improving
your problem-solving skills.</p>
<a href="#" class="btn btn-dark">Start Learning</a>
</div>
</div>

<script>
function toggleDropdown() {
const dropdown = document.getElementById("dropdown-menu");
// Toggle the display of the dropdown menu
dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
}
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.profile-img')) {
const dropdowns = document.getElementsByClassName("dropdown-content");
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.style.display === "block") {
openDropdown.style.display = "none";
}
}
}
}
</script>
</body>
</html>
</html>