Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • nickgrifasi/cs_4624_project
1 result
Show changes
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
Showing
with 136 additions and 0 deletions
frontend.html 0 → 100644
View file @ f2aa40e0
<!DOCTYPE html>
<html>
<head>
<title>Tabbed Visualizations</title>
<style>
/* Tab Styles */
.tab {
overflow: hidden;
border-radius: 10px 10px 0 0;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
border-radius: 10px 10px 0 0;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
border-bottom-color: #f1f1f1;
}
/* Tab Content Styles */
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 10px 10px 10px;
background-color: white;
}
/* Side Pane Styles */
.side-pane {
position: fixed;
top: 0;
right: 0;
width: 25%;
height: 100%;
background-color: #f1f1f1;
overflow: auto;
padding: 20px;
border-radius: 0 10px 10px 0;
}
/* Header Styles */
.header {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
background-color: #333;
color: white;
font-size: 24px;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
</style>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>OpenDSA Visualizations</h1>
</div>
<!-- Tabs -->
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'Visualization1')">Visualization 1</button>
<button class="tablinks" onclick="openTab(event, 'Visualization2')">Visualization 2</button>
<button class="tablinks" onclick="openTab(event, 'Visualization3')">Visualization 3</button>
<button class="tablinks" onclick="openTab(event, 'Visualization4')">Visualization 4</button>
<button class="tablinks" onclick="openTab
<!-- Tab Content -->
<div id="Home" class="tabcontent" style="display:block">
<!-- Insert content for home page here -->
<p>Welcome to the Visualizations site for OpenDSA. Here you can analyze various log and user data collected on all exercises. Click any of the tabs to get started.</p>
</div>
<div id="Visualization1" class="tabcontent">
<!-- Insert PyScript Visualization 1 here -->
<h2>Student 56 Visualization</h2>
<p><img src ="56visual.png" alt="Student 56 visualization"width="1110"
height="500" /></p></div>
<div id="Visualization2" class="tabcontent">
<!-- Insert PyScript Visualization 1 here -->
<h2>Student 569 Visualization</h2>
<p><img src ="569visual.png" alt="Student 56 visualization"width="1110"
height="500" /></p></div>
<div id="Visualization3" class="tabcontent">
<!-- Insert PyScript Visualization 1 here -->
<h2>Student 824 Visualization</h2>
<p><img src ="824visual.png" alt="Student 824 visualization"width="1110"
height="500" /></p></div>
<div id="Visualization4" class="tabcontent">
<!-- Insert PyScript Visualization 1 here -->
<h2>Future works visualization</h2>
<p><img src ="futureworkvis.jpg" alt="Future works visualization"width="1110"
height="500" /></p></div>