Skip to content
Snippets Groups Projects
Commit ebad68b7 authored by nickgrifasi's avatar nickgrifasi
Browse files

front end

parent 15aaa61d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 136 additions and 0 deletions
frontend.html 0 → 100644
+ 136
− 0
View file @ ebad68b7
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment