diff --git a/frontend.html b/frontend.html
new file mode 100644
index 0000000000000000000000000000000000000000..bc9521fd6aa4f6a956865853b7c89cd845c76043
--- /dev/null
+++ b/frontend.html
@@ -0,0 +1,136 @@
+<!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>