-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'demo' of https://github.com/juliusbrehme/AlgoVerse into…
… demo
- Loading branch information
Showing
6 changed files
with
331 additions
and
331 deletions.
There are no files selected for viewing
28 changes: 14 additions & 14 deletions
28
...components/infoContainer/applications.css → ...components/infoContainer/Applications.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
.applicationsContainer { | ||
background-color: #2C98F0; /* Light blue background */ | ||
color: white; /* White text */ | ||
width: 90%; /* Full width */ | ||
height: fit-content; | ||
padding: 20px; /* Some padding around the text */ | ||
box-sizing: border-box; /* Ensure padding doesn't increase the size */ | ||
margin-top: 10px; /* Space above the container */ | ||
margin-bottom: 20px; | ||
white-space: normal; /* Keep nodes in a single line */ | ||
} | ||
|
||
.applicationsContainer h3 { | ||
margin-top: 0; /* Remove top margin of the heading */ | ||
.applicationsContainer { | ||
background-color: #2C98F0; /* Light blue background */ | ||
color: white; /* White text */ | ||
width: 90%; /* Full width */ | ||
height: fit-content; | ||
padding: 20px; /* Some padding around the text */ | ||
box-sizing: border-box; /* Ensure padding doesn't increase the size */ | ||
margin-top: 10px; /* Space above the container */ | ||
margin-bottom: 20px; | ||
white-space: normal; /* Keep nodes in a single line */ | ||
} | ||
|
||
.applicationsContainer h3 { | ||
margin-top: 0; /* Remove top margin of the heading */ | ||
} |
50 changes: 25 additions & 25 deletions
50
.../components/infoContainer/applications.js → .../components/infoContainer/Applications.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,25 @@ | ||
import React from "react"; | ||
import "./Applications.css"; | ||
import { useSearchParams } from "react-router-dom"; | ||
import algorithmApplicationsTexts from "./applicationsText.json"; | ||
|
||
function Applications() { | ||
const [searchParams] = useSearchParams(); | ||
const algorithm = searchParams.get("algorithm"); | ||
|
||
let applicationsText = | ||
algorithmApplicationsTexts[algorithm]?.applications || "Default"; | ||
|
||
return ( | ||
<> | ||
<div className="applicationsContainer"> | ||
<h1> Useful Applications </h1> | ||
{applicationsText.map((step, index) => ( | ||
<p key={index}>{step}</p> | ||
))} | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default Applications; | ||
import React from "react"; | ||
import "./Applications.css"; | ||
import { useSearchParams } from "react-router-dom"; | ||
import algorithmApplicationsTexts from "./applicationsText.json"; | ||
|
||
function Applications() { | ||
const [searchParams] = useSearchParams(); | ||
const algorithm = searchParams.get("algorithm"); | ||
|
||
let applicationsText = | ||
algorithmApplicationsTexts[algorithm]?.applications || "Default"; | ||
|
||
return ( | ||
<> | ||
<div className="applicationsContainer"> | ||
<h1> Useful Applications </h1> | ||
{applicationsText.map((step, index) => ( | ||
<p key={index}>{step}</p> | ||
))} | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default Applications; |
142 changes: 71 additions & 71 deletions
142
...c/components/infoContainer/pseudoCode.css → ...c/components/infoContainer/PseudoCode.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,72 +1,72 @@ | ||
.pseudoCodeContainer { | ||
background-color: #2C98F0; /* Light blue background */ | ||
color: white; /* White text */ | ||
width: 90%; /* Full width */ | ||
height: fit-content; | ||
padding: 20px; /* Some padding around the text */ | ||
box-sizing: border-box; /* Ensure padding doesn't increase the size */ | ||
margin-top: 10px; /* Space above the container */ | ||
margin-bottom: 20px; | ||
white-space: normal; /* Keep nodes in a single line */ | ||
} | ||
|
||
.pseudoCodeContainer h3 { | ||
margin-top: 0; /* Remove top margin of the heading */ | ||
} | ||
|
||
/* Base styling for all nested lists */ | ||
.nestedList { | ||
list-style-type: none; /* Removes bullet points */ | ||
font-family: 'Courier New', monospace; /* Monospaced font */ | ||
color: #ffffff; /* Default text color */ | ||
padding-left: 20px; /* Adjust as needed */ | ||
margin: 0; /* Removes default margin */ | ||
line-height: 1.5; /* Increased line spacing */ | ||
} | ||
|
||
/* Styling for each list item */ | ||
.nestedList li { | ||
margin-bottom: 5px; /* Adjust as needed */ | ||
padding-left: 20px; /* Indentation for each level */ | ||
position: relative; /* For positioning the line number or border */ | ||
} | ||
|
||
/* Hover effect for each list item */ | ||
.nestedList li:hover { | ||
background-color: #857e7e; /* Hover effect */ | ||
} | ||
|
||
/* Line number styling */ | ||
.nestedList li::before { | ||
content: counter(item) " "; /* Add line numbers */ | ||
counter-increment: item; /* Increment line numbers */ | ||
color: #777; /* Line number color */ | ||
position: absolute; /* Position line number */ | ||
left: -20px; /* Align to the left */ | ||
} | ||
|
||
/* Reset the counter for nested lists */ | ||
.nestedList ul { | ||
counter-reset: item; | ||
list-style-type: none; /* Ensures no bullets on nested lists */ | ||
padding-left: 20px; /* Additional indentation for nested items */ | ||
} | ||
|
||
/* Remove bullet points and margin for all levels of nested lists */ | ||
.nestedList ul { | ||
list-style-type: none; /* Removes bullet points */ | ||
margin: 0; /* Removes default margin */ | ||
} | ||
|
||
.nestedListItem { | ||
list-style-type: none; /* Removes bullet points */ | ||
margin-bottom: 10px; /* Spacing between items */ | ||
position: relative; /* For positioning the line number or border */ | ||
font-family: 'Courier New', monospace; /* Monospaced font */ | ||
font-weight: bold; | ||
/* Add any other styles you wish to include here */ | ||
} | ||
|
||
.nestedListItem:hover { | ||
background-color: #857e7e; /* Hover effect */ | ||
.pseudoCodeContainer { | ||
background-color: #2C98F0; /* Light blue background */ | ||
color: white; /* White text */ | ||
width: 90%; /* Full width */ | ||
height: fit-content; | ||
padding: 20px; /* Some padding around the text */ | ||
box-sizing: border-box; /* Ensure padding doesn't increase the size */ | ||
margin-top: 10px; /* Space above the container */ | ||
margin-bottom: 20px; | ||
white-space: normal; /* Keep nodes in a single line */ | ||
} | ||
|
||
.pseudoCodeContainer h3 { | ||
margin-top: 0; /* Remove top margin of the heading */ | ||
} | ||
|
||
/* Base styling for all nested lists */ | ||
.nestedList { | ||
list-style-type: none; /* Removes bullet points */ | ||
font-family: 'Courier New', monospace; /* Monospaced font */ | ||
color: #ffffff; /* Default text color */ | ||
padding-left: 20px; /* Adjust as needed */ | ||
margin: 0; /* Removes default margin */ | ||
line-height: 1.5; /* Increased line spacing */ | ||
} | ||
|
||
/* Styling for each list item */ | ||
.nestedList li { | ||
margin-bottom: 5px; /* Adjust as needed */ | ||
padding-left: 20px; /* Indentation for each level */ | ||
position: relative; /* For positioning the line number or border */ | ||
} | ||
|
||
/* Hover effect for each list item */ | ||
.nestedList li:hover { | ||
background-color: #857e7e; /* Hover effect */ | ||
} | ||
|
||
/* Line number styling */ | ||
.nestedList li::before { | ||
content: counter(item) " "; /* Add line numbers */ | ||
counter-increment: item; /* Increment line numbers */ | ||
color: #777; /* Line number color */ | ||
position: absolute; /* Position line number */ | ||
left: -20px; /* Align to the left */ | ||
} | ||
|
||
/* Reset the counter for nested lists */ | ||
.nestedList ul { | ||
counter-reset: item; | ||
list-style-type: none; /* Ensures no bullets on nested lists */ | ||
padding-left: 20px; /* Additional indentation for nested items */ | ||
} | ||
|
||
/* Remove bullet points and margin for all levels of nested lists */ | ||
.nestedList ul { | ||
list-style-type: none; /* Removes bullet points */ | ||
margin: 0; /* Removes default margin */ | ||
} | ||
|
||
.nestedListItem { | ||
list-style-type: none; /* Removes bullet points */ | ||
margin-bottom: 10px; /* Spacing between items */ | ||
position: relative; /* For positioning the line number or border */ | ||
font-family: 'Courier New', monospace; /* Monospaced font */ | ||
font-weight: bold; | ||
/* Add any other styles you wish to include here */ | ||
} | ||
|
||
.nestedListItem:hover { | ||
background-color: #857e7e; /* Hover effect */ | ||
} |
86 changes: 43 additions & 43 deletions
86
...rc/components/infoContainer/pseudoCode.js → ...rc/components/infoContainer/PseudoCode.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,43 @@ | ||
import React from "react"; | ||
import "./PseudoCode.css"; | ||
import { useSearchParams } from "react-router-dom"; | ||
import pseudoCodeTexts from "./pseudoCodeText.json"; | ||
|
||
function PseudoCode() { | ||
const [searchParams] = useSearchParams(); | ||
const algorithm = searchParams.get("algorithm"); | ||
|
||
let pseudoCodeSteps = pseudoCodeTexts[algorithm]?.steps || "Default"; | ||
|
||
function renderStep(step, level = 0) { | ||
// Check if the step is an array | ||
if (Array.isArray(step)) { | ||
return ( | ||
<ul key={level} className="nestedList"> | ||
{step.map((subStep, index) => renderStep(subStep, level + 1))} | ||
</ul> | ||
); | ||
} else { | ||
return ( | ||
<li | ||
key={level} | ||
className="nestedListItem" | ||
style={{ marginLeft: `${level * 20}px` }} | ||
> | ||
{step} | ||
</li> | ||
); | ||
} | ||
} | ||
|
||
return ( | ||
<> | ||
<div className="pseudoCodeContainer"> | ||
<h1> PseudoCode </h1> | ||
<ul>{pseudoCodeSteps.map((step, index) => renderStep(step, 0))}</ul> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default PseudoCode; | ||
import React from "react"; | ||
import "./PseudoCode.css"; | ||
import { useSearchParams } from "react-router-dom"; | ||
import pseudoCodeTexts from "./pseudoCodeText.json"; | ||
|
||
function PseudoCode() { | ||
const [searchParams] = useSearchParams(); | ||
const algorithm = searchParams.get("algorithm"); | ||
|
||
let pseudoCodeSteps = pseudoCodeTexts[algorithm]?.steps || "Default"; | ||
|
||
function renderStep(step, level = 0) { | ||
// Check if the step is an array | ||
if (Array.isArray(step)) { | ||
return ( | ||
<ul key={level} className="nestedList"> | ||
{step.map((subStep, index) => renderStep(subStep, level + 1))} | ||
</ul> | ||
); | ||
} else { | ||
return ( | ||
<li | ||
key={level} | ||
className="nestedListItem" | ||
style={{ marginLeft: `${level * 20}px` }} | ||
> | ||
{step} | ||
</li> | ||
); | ||
} | ||
} | ||
|
||
return ( | ||
<> | ||
<div className="pseudoCodeContainer"> | ||
<h1> PseudoCode </h1> | ||
<ul>{pseudoCodeSteps.map((step, index) => renderStep(step, 0))}</ul> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default PseudoCode; |
Oops, something went wrong.