first commit

frontend/src/app.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./app";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/app.tsx

@@ -0,0 +1,46 @@
+import "./assets/styles/main.scss";
+import ConformationPopup from "./components/templates/modals/conformationPopup";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+
+import Project from "./pages/project/project";
+import SignInSignUp from "./pages/signin/signInUp";
+import { useEffect, useState } from "react";
+
+import "./assets/styles/main.scss";
+import { ToastContainer } from "react-toastify";
+
+function App() {
+  const [isSignIn, setIsSignIn] = useState(true);
+
+  return (
+    <div className="App">
+      <ToastContainer position="bottom-left" />
+      <Router>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <SignInSignUp isSignIn={isSignIn} setIsSignIn={setIsSignIn} />
+            }
+          />
+          <Route
+            path="/signup"
+            element={
+              <SignInSignUp isSignIn={isSignIn} setIsSignIn={setIsSignIn} />
+            }
+          />
+          <Route path="/Project" element={<Project />} />
+          <Route path="*" element={<h1>No such page</h1>} />
+        </Routes>
+      </Router>
+    </div>
+  );
+
+}
+
+export default App;

frontend/src/assets/styles/abstracts/_functions.scss

@@ -0,0 +1,5 @@
+// get rem from pixels
+
+@function get_rem($px) {
+  @return calc($px / 16 * 1rem);
+}

frontend/src/assets/styles/abstracts/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

frontend/src/assets/styles/abstracts/_placeholders.scss

@@ -0,0 +1,6 @@
+// center a element
+%centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

frontend/src/assets/styles/abstracts/_variables.scss

@@ -0,0 +1,31 @@
+@use "functions";
+
+// colors
+$primary-color: hsl(0, 0%, 100%);
+$text-gray: #969BA7;
+$selected-text-gray: #828282;
+$button-action-color: #5c87df;
+$button-abort-color: #ffffff;
+$secondary-color: #5c87df;
+$accent-color: #5c87df;
+$lite-gray-40: #d9d9d9;
+$lite-gray-80: #828282;
+$border-color: #c1c1c1;
+$border-color-20: #c1c1c133;
+$highlight-light-color: #f0f0f0;
+$button-hover-color: #e7e7e8;
+
+// icon colors
+$icon-idle-color: #5D5F63;
+
+//font sizes
+$font-size-small: functions.get_rem(12);
+$font-size-default: functions.get_rem(14);
+$font-size-title: functions.get_rem(16);
+$font-size-header: functions.get_rem(24);
+
+$font-weight-semi: 400;
+$font-weight-regular: 500;
+
+// Shadow
+$shadow-main: 0px 2px 10px 0px #0000001c;

frontend/src/assets/styles/base/_base.scss

@@ -0,0 +1,81 @@
+@use "../abstracts/variables";
+
+[data-theme="light"] {
+  --primary-color: #{variables.$primary-color};
+  --text-gray: #{variables.$text-gray};
+  --selected-text-gray: #{variables.$selected-text-gray};
+  --button-action-color: #{variables.$button-action-color};
+  --button-abort-color: #{variables.$button-abort-color};
+  --secondary-color: #{variables.$secondary-color};
+  --accent-color: #{variables.$accent-color};
+  --lite-gray-40: #{variables.$lite-gray-40};
+  --lite-gray-80: #{variables.$lite-gray-80};
+  --border-color: #{variables.$border-color};
+  --border-color-20: #{variables.$border-color-20};
+  --highlight-light-color: #{variables.$highlight-light-color};
+  --button-hover-color: #{variables.$button-hover-color};
+
+  //shadow variables
+  --shadow-main: #{variables.$shadow-main};
+  
+  //icon colors
+  --icon-idle-color: #{variables.$icon-idle-color};
+  
+}
+
+[data-theme="dark"] {
+  --primary-color: #{variables.$primary-color};
+  --text-gray: #{variables.$text-gray};
+  --selected-text-gray: #{variables.$selected-text-gray};
+  --button-action-color: #{variables.$button-action-color};
+  --button-abort-color: #{variables.$button-abort-color};
+  --secondary-color: #{variables.$secondary-color};
+  --accent-color: #{variables.$accent-color};
+  --lite-gray-40: #{variables.$lite-gray-40};
+  --lite-gray-80: #{variables.$lite-gray-80};
+  --border-color: #{variables.$border-color};
+  --border-color-20: #{variables.$border-color-20};
+  --highlight-light-color: #{variables.$highlight-light-color};
+
+  //shadow variables
+  --shadow-main: #{variables.$shadow-main};
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+#root-over {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+}
+
+.selected,
+.select {
+  background-color: var(--secondary-color) !important;
+  color: var(--primary-color);
+  border-radius: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  padding: 4px;
+  
+  .key {
+    color: var(--primary-color);
+  }
+
+  &:hover {
+    outline: none;
+    border: none;
+    background-color: var(--secondary-color);
+  }
+}
+
+
+.active {
+  color: var(--secondary-color) !important;
+}

frontend/src/assets/styles/base/_reset.scss

@@ -0,0 +1,6 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+}

frontend/src/assets/styles/base/_typography.scss

@@ -0,0 +1,25 @@
+@use "../abstracts/variables";
+
+// local fonts imports and decleration
+
+@font-face {
+  font-family: "Inter";
+  src: url("../../fonts/inter/inter18ptRegular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../../fonts/poppins/poppinsRegular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("../../fonts/roboto/robotoRegular.ttf") format("truetype");
+}
+
+* {
+  font-family: "Inter", sans-serif;
+  font-weight: variables.$font-weight-regular;
+  font-size: variables.$font-size-default;
+  color: var(--text-gray);
+}

frontend/src/assets/styles/components/_toogleSwitch.scss

@@ -0,0 +1,128 @@
+// .content-container {
+//   height: calc(100vh - 82px);
+//   height: 100%;
+//   margin-top: 6px;
+// }
+
+.switches {
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  flex-direction: column;
+  align-items: baseline;
+  // position: fixed;
+  // top: 0;
+}
+
+.switch-tools {
+  position: absolute;
+  width: 100%;
+  gap: 20px;
+  padding: 20px;
+
+  .project_toolbar-left {
+    gap: 16px;
+  }
+}
+
+.toggle-container {
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+  user-select: none;
+}
+
+.toggle-switch {
+  // min-width: 80px;
+
+  height: 30px;
+  box-shadow: 0px 2px 10px 0px #0000001c;
+
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  // display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+  padding: 0;
+  transition: background-color 0.3s ease;
+  overflow: hidden;
+}
+
+.toggle-switch.am {
+  background-color: #ffffff;
+  /* AM - blue */
+  // margin: 0px 10px;
+
+  /* background:red; */
+}
+
+.toggle-switch.pm {
+  background-color: #ffffff;
+  /* PM - orange */
+}
+
+.am-label,
+.pm-label {
+  color: $selected-text-gray;
+  font-size: 12px;
+  width: 50%;
+  text-align: center;
+  position: relative;
+  z-index: 2;
+  padding: 5px 10px;
+  /* Ensure labels stay above the knob */
+}
+
+.toggle-knob {
+  width: 50%;
+  height: 100%;
+  background-color: $button-action-color;
+  border-radius: 8px;
+  position: absolute;
+  transition: transform 0.3s ease;
+  z-index: 1;
+  /* Ensure knob is under the labels */
+}
+
+.toggle-switch.pm .toggle-knob {
+  transform: translateX(100%);
+}
+
+.upload {
+  height: 30px;
+  background-color: $primary-color;
+  position: relative;
+  /* Necessary for absolute positioning */
+}
+
+.upload input[type="file"] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  /* Show a pointer cursor on hover */
+}
+
+.upload span {
+  z-index: 1;
+  /* Ensure the text is above the file input */
+}
+
+.upload .UploadIcon {
+  display: none;
+  /* Hide the UploadIcon component */
+}
+
+/* Optional: Additional styling for better appearance */
+.upload {
+  padding: 10px 20px;
+  border-radius: 8px;
+  /* Rounded corners */
+}
+
+.upload:hover {
+  background-color: #e0e0e0;
+  /* Change background color on hover */
+}

frontend/src/assets/styles/components/_undoRedo.scss

@@ -0,0 +1,51 @@
+.undoRedo {
+  background-color: var(--primary-color);
+  box-shadow: var(--shadow-main);
+  height: 30px;
+  border-radius: 10px;
+  position: relative;
+  justify-content: space-around;
+  pointer-events: all;
+  gap: 0 !important;
+  overflow: hidden;
+}
+
+.split {
+  height: 50%;
+  width: 2px;
+  background: var(--lite-gray-40);
+}
+
+.icon {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  padding: 6px;
+  
+
+  svg {
+    scale: 0.8;
+  }
+
+  &:hover {
+    background-color: var(--button-hover-color);
+
+    path {
+      fill: var(--secondary-color);
+      stroke: var(--secondary-color);
+      stroke-width: .5px;
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 20px;
+    left: calc(50% - 0.5px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

frontend/src/assets/styles/components/inputs/_button.scss

@@ -0,0 +1,23 @@
+// text buttons
+
+.button,
+button {
+  border: none;
+  outline: none;
+  background-color: var(--button-action-color);
+  color: var(--primary-color);
+  border-radius: 6px;
+  padding: 6px 15px;
+  box-shadow: var(--shadow-main);
+  cursor: pointer;
+}
+
+// icon buttons
+
+.tools {
+  width: 28.8px;
+  height: 28.8px;
+  border-radius: 7.01px;
+  background-color: var(--primary-color);
+  box-shadow: 0px 1.92px 9.6px 0px #0000001c;
+}

frontend/src/assets/styles/components/inputs/_dropDown.scss

@@ -0,0 +1,104 @@
+.dropdown-container {
+  width: 104px;
+  height: 30px;
+  position: relative;
+  box-shadow: var(--shadow-main);
+  background-color: var(--primary-color);
+  border-radius: 10px;
+  justify-content: space-between;
+  padding: 10px;
+  pointer-events: all;
+}
+
+.dropdown-toggle {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--selected-text-gray);
+  font-size: var(--font-size-small);
+}
+
+.dropdown-menu {
+  user-select: none;
+  width: 237px;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: var(--shadow-main);
+  border-radius: 4px;
+  z-index: 1000;
+  margin-top: 2px;
+  overflow-y: auto;
+  top: 110%;
+  left: 50%;
+  transform: translate(-21%, 0);
+  // padding: 10px 0;
+  // padding-top: 0;
+
+  .dropDown-header {
+    border-bottom: 1px solid var(--border-color-20);
+    height: 40px;
+    padding: 0 17px;
+  }
+
+  .dropdown-menu {
+    user-select: none;
+    width: 237px;
+    position: absolute;
+    background-color: #fff;
+    box-shadow: var(var(--shadow-main));
+    border-radius: 4px;
+    z-index: 1000;
+    margin-top: 2px;
+    overflow-y: auto;
+    top: 110%;
+    left: 50%;
+    transform: translate(-21%, 0);
+    // padding: 10px 0;
+    // padding-top: 0;
+
+    .dropDown-header {
+      border-bottom: 1px solid var(--border-color-20);
+      height: 40px;
+      padding: 0 17px;
+    }
+  }
+  .selected {
+    path{
+      stroke: var(--primary-color);
+      fill: transparent;
+      stroke-width: 2px;
+      &:last-child{
+        stroke-width: 1px;
+      }
+    }
+    .left {
+      color: var(--primary-color);
+      input[type=checkbox]{
+        
+      }
+    }
+  }
+  .dropdown-option {
+    padding: 10px 0;
+    cursor: pointer;
+    justify-content: flex-start;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 17px;
+
+    .right {
+      .icons {
+        width: 14px;
+        height: 14px;
+      }
+    }
+    &:hover {
+      background-color: var(--highlight-light-color);
+    }
+  }
+
+  li {
+    list-style: none;
+  }
+}

frontend/src/assets/styles/components/inputs/_inputs.scss

@@ -0,0 +1,35 @@
+input,
+textarea {
+  border: none;
+  outline: 1px solid var(--lite-gray-40);
+  border-radius: 4px;
+  padding: 2px 4px;
+  resize: none;
+
+  &:active,
+  &:focus {
+    outline: 1px solid var(--secondary-color);
+  }
+}
+
+
+input[type="checkbox"] {
+  border: none;
+  outline: none;
+  accent-color: var(--accent-color);
+}
+
+input[type="range"] {
+  border: none;
+  outline: none;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}

frontend/src/assets/styles/components/inputs/_popup.scss

@@ -0,0 +1,175 @@
+@use "../../abstracts/variables";
+
+.collaboration-settings-wrapper,
+.remove-user-popup-wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    // background: #1F1F1F4D;
+
+    background-color: #1F1F1F4D;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .collaboration-settings-container,
+    .remove-menu-container {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+        background-color: variables.$button-abort-color;
+        padding: 20px;
+        border-radius: 8px;
+
+        .menu-header-wrapper {
+            // display: flex;
+            width: 100%;
+            justify-content: space-between;
+
+            .menu-header {
+                h2 {
+                    color: variables.$secondary-color ;
+                    font-weight: 500;
+                    font-size: variables.$font-size-title;
+                }
+            }
+
+            .close-button {
+                width: 16px;
+                line-height: 15px;
+                border: 1px solid #635D5D;
+                border-radius: 50%;
+
+                font-size: 10px;
+                color: #635D5D;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                cursor: pointer;
+            }
+        }
+
+
+        .add-new-collab-user-wrapper {
+            position: relative;
+
+            border: 1px solid #DADADA;
+            width: 100%;
+            height: 40px;
+            background: #D9D9D903;
+            border-radius: 6px;
+
+            .searchInput {
+                width: 62%;
+                height: 100%;
+                background: transparent;
+                padding: 0 10px;
+                border: none;
+                outline: none;
+            }
+
+            .access-control-dropdown,
+            .addMember {
+                position: absolute;
+                top: 50%;
+                right: 100px;
+                transform: translate(0%, -50%);
+                cursor: pointer;
+            }
+
+            .addMember {
+                border: none;
+                outline: none;
+                background: transparent;
+                padding: 0;
+                right: 5px;
+            }
+        }
+
+
+        .list-users-in-collab-project-wrapper {
+
+            width: 100%;
+            border-top: 1px solid #F2F2F2;
+            border-bottom: 1px solid #F2F2F2;
+            padding: 20px 0;
+
+            .list-users-in-collab-project {
+                width: 100%;
+
+                .collab-users {
+
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column-reverse;
+                    gap: 10px;
+
+                    .users {
+                        width: 100%;
+                        display: flex;
+                        justify-content: space-between;
+
+                        .users-wrapper {
+
+                            display: flex;
+                            align-items: center;
+                            gap: 8px;
+
+                            .collab-user-profile {
+                                width: 20px;
+                                height: 20px;
+
+                                background: #5C87DF4D;
+                                color: #5C87DF;
+
+                                border: 1px solid #DADADA;
+                                border-radius: 50%;
+
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                text-transform: uppercase;
+
+                                padding: 0;
+                                margin: 0;
+                            }
+                        }
+
+                        .edit-remove {
+                            display: flex;
+                            align-items: center;
+                            gap: 20px;
+
+                            .edit-button,
+                            .remove-button {
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+
+
+
+        // confirm popup
+        .menu-header-wrapper {}
+
+        .menu-conformation-wrapper {
+            display: flex;
+            justify-content: flex-end;
+            gap: 20px;
+
+            input[type="button"] {
+                padding: 5px 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}

frontend/src/assets/styles/components/sideBar/_basic.scss

@@ -0,0 +1,251 @@
+@use "../../abstracts/variables";
+
+.object-header {
+    width: 100%;
+
+    .head {
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    .active {
+        border-bottom: 1px solid variables.$secondary-color;
+    }
+}
+
+
+.object-wrapper {
+    .basic-properties {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        width: 100%;
+
+        .transform,
+        .easing-container,
+        .time-management,
+        .state-management,
+        .basic-properties {
+            width: 100%;
+            border-bottom: 1px solid variables.$border-color-20;
+            padding-bottom: 18px;
+
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+
+            .icons {
+                cursor: pointer;
+            }
+        }
+
+        // Time Management & Global Properties
+        .time-management,
+        .global-properties {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+
+            .icons {
+                transition: transform 0.3s ease;
+            }
+
+            .icons.rotate {
+                transform: rotate(90deg);
+            }
+
+            .data-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+
+                .data {
+                    display: flex;
+
+                    .left {
+                        width: 100px;
+
+                        input {
+                            width: 100%;
+                            text-align: center;
+                        }
+                    }
+                }
+
+
+            }
+
+
+
+            // .format-section {
+            //     .data-wrapper {
+            //         .data {
+            //             display: flex;
+            //             flex-direction: column;
+            //             align-items: flex-start;
+
+            //             .header {
+            //                 border: none;
+            //             }
+
+            //             .input-wrapper {
+            //                 display: flex;
+            //                 gap: 5px;
+
+            //                 .input-group {
+            //                     display: flex;
+            //                     align-items: center;
+
+            //                     .data {
+            //                         flex-direction: row;
+            //                         align-items: center;
+
+            //                         .left {
+            //                             height: 26px;
+            //                             position: relative;
+            //                             width: 51px;
+            //                             border: 1px solid $highlight-light-color;
+            //                             border-radius: 6px;
+
+            //                             input {
+            //                                 width: 100%;
+            //                                 height: 100%;
+            //                                 position: absolute;
+            //                             }
+
+            //                             .icon {
+            //                                 position: relative;
+            //                                 z-index: 100;
+
+            //                                 &:hover {
+            //                                     background: none;
+            //                                 }
+            //                             }
+            //                         }
+            //                     }
+            //                 }
+            //             }
+            //         }
+            //     }
+            // }
+        }
+
+
+        .easing-container {
+            .easing-header {
+                width: 100%;
+            }
+
+            .left {
+
+                width: 100%;
+            }
+        }
+
+
+        .state-management-content {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .data-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                .data {
+                    padding: 4px;
+                }
+
+                .selected {
+                    background-color: #E5ECFA !important;
+
+                    .key {
+                        color: #5C87DF;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .header {
+            border: none;
+        }
+
+        .icons {
+
+            transition: all linear 0.2s;
+        }
+
+        .rotate {
+            transform: rotate(90deg);
+        }
+    }
+}
+
+
+
+
+
+
+
+
+// Dropdown Styles
+.regularDropdown-container {
+    width: 104px;
+    height: 22px;
+    border: 1px solid variables.$border-color; // Ensure $border-color is defined
+    border-radius: 6px;
+    position: relative;
+    cursor: pointer;
+
+    .dropdown-header {
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        padding: 5px;
+        border: 1px solid variables.$highlight-light-color;
+        border-radius: 6px;
+        background-color: variables.$primary-color;
+
+        .icon {
+            position: absolute;
+            right: 0;
+            padding: 3px;
+        }
+    }
+
+    .dropdown-options {
+        position: absolute; // Ensure dropdown options position correctly
+        width: 100%; // Ensure options width matches the header
+        background-color: variables.$primary-color; // Optional: Background color
+        border: 1px solid #ccc; // Optional: Border styling
+        border-radius: 4px; // Optional: Border radius
+        z-index: 10; // Ensure dropdown appears above other elements
+        max-height: 200px; // Optional: Limit height
+        overflow-y: auto; // Optional: Enable scrolling if content exceeds height
+
+        .option {
+            padding: 5px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: variables.$highlight-light-color; // Optional: Hover effect
+            }
+        }
+    }
+
+    .icon {
+        height: auto;
+    }
+}
+
+
+
+.icon {
+    cursor: pointer;
+}

frontend/src/assets/styles/components/sideBar/_basicGlobal.scss

@@ -0,0 +1,147 @@
+@use "../../abstracts/variables";
+
+// Time Management & Global Properties
+.global-properties {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .icons {
+        cursor: pointer;
+    }
+
+    .section {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        border-bottom: 1px solid variables.$border-color;
+        padding-bottom: 16px;
+    }
+
+    .icons {
+        transition: transform 0.3s ease;
+    }
+
+    .icons.rotate {
+        transform: rotate(90deg);
+    }
+
+    .data-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .data {
+            .header {
+                padding: 0;
+                padding-bottom: 8px;
+                border: none;
+            }
+
+            .input-wrapper {
+                display: flex;
+                gap: 20px;
+
+                .input-group {
+                    .data {
+                        .header {
+                            background-color: red;
+                            padding-bottom: 6px;
+                        }
+
+                        .left {
+                            position: relative;
+
+                            width: 51px;
+
+                            .icon {
+                                position: absolute;
+                                // left: 0;
+
+                                &:last-child {
+                                    right: 0;
+                                }
+                            }
+                        }
+                    }
+
+                    display: flex;
+
+                    .data {
+                        justify-content: flex-start;
+                    }
+                }
+            }
+
+            .left {
+                width: 100px;
+
+                input {
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+
+
+
+
+// Transform Section
+.transform {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 18px;
+
+    .icons {
+        cursor: pointer;
+        transition: all linear 0.2s;
+    }
+
+    .rotate {
+        transform: rotate(90deg);
+    }
+
+    .objectInput-wrapper {
+        border: none;
+        padding-top: 0px;
+        padding-bottom: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+        gap: 15px;
+        border: none;
+
+        .objectInputcontent-wrapper {
+
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .label {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .objectInputs {
+            .object-input {
+                gap: 6px;
+                display: flex;
+                .value {
+                    width: 36px;
+
+                    input {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+}

frontend/src/assets/styles/components/sideBar/_data.scss

@@ -0,0 +1,144 @@
+.dataSideBar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .sideBarHeader {
+        color: #5c87df;
+        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 6px;
+    }
+
+    .selectedMain-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 10px;
+    }
+
+    .selectedMain {
+        display: flex;
+        // gap: 2px;
+        align-items: center;
+
+        .icon {
+            padding: 0;
+        }
+
+        button {
+            background-color: transparent;
+            box-shadow: none;
+            color: #5273eb;
+            padding: 6px;
+            font-size: 18px;
+        }
+
+        &:first-child {
+            gap: 4px;
+        }
+
+        // padding-bottom: 10px;
+        //   border-bottom: 1px solid var(--border-color);
+        .bulletPoint {
+            color: #5273eb;
+            font-size: 16px;
+        }
+
+        main {
+            width: 35%;
+            white-space: nowrap;
+            /* Prevent wrapping */
+        }
+
+        .regularDropdown-container {
+            width: 100%;
+        }
+    }
+
+    .child {
+        padding-left: 13%;
+        width: 100%;
+        gap: 6px;
+    }
+
+    .horizontalLine {
+        width: 100%;
+        border-top: 1px solid #d1d1d1;
+        /* Horizontal line */
+        margin-top: 10px;
+    }
+
+    .dropdown {
+        padding: 8px;
+        font-size: 14px;
+        border: 1px solid #d1d1d1;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+    }
+
+    .infoBox {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        color: #444;
+        border-radius: 6px;
+        font-size: 14px;
+
+        .infoIcon {
+            padding: 0px 5px;
+            border-radius: 50%;
+            border: 1px solid gray;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+}
+
+
+
+
+.design {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 0px;
+    font-size: 14px;
+    color: #4a4a4a;
+}
+
+.reviewChart {
+    width: 100%;
+    height: 150px;
+    background: #f0f0f0;
+    border-radius: 8px;
+}
+
+.optionsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+
+    .regularDropdown-container {
+        width: 160px;
+    }
+
+    span {
+        min-width: 100px;
+    }
+
+
+}

frontend/src/assets/styles/components/sideBar/_material.scss

@@ -0,0 +1,196 @@
+.material-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 8px;
+  .materialName {
+    text-align: left;
+    padding-bottom: 6px;
+  }
+
+  .canvas {
+    width: 100%;
+    height: 106px;
+    border-radius: 10px;
+    box-shadow: var(--shadow-main);
+  }
+
+  .materialSettings {
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 20px 0;
+    gap: 15px;
+
+    .material {
+      width: 100%;
+      .flex-sb{
+        span{
+
+          width: 20px;
+          text-align: center;
+        }
+      }
+      .data{
+        width: 100%;
+        .left {
+          position: relative;
+          right: -10px;
+          width: 100px;
+          input{
+            width: 50%;
+          }
+        }
+      }
+      .flex {
+
+        // width: 60%;
+        span {
+          width: 50px;
+        }
+      }
+    }
+  }
+}
+
+.wrapper {
+  margin: 4rem;
+}
+
+.input-rangeslider {
+  position: relative;
+  width: 100%;
+}
+
+.input-rangeslider:before,
+.input-rangeslider:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+}
+
+.input-rangeslider:before {
+  background: #6b6f7c;
+}
+
+.input-rangeslider:after {
+  content: attr(data-value);
+  font-size: 0.78rem;
+  line-height: 56px;
+  text-align: left;
+  background: #30343f;
+  left: inherit;
+  transition: color 0.25s ease-in-out;
+  color: transparent;
+  white-space: nowrap;
+  text-indent: -1.25rem;
+}
+
+.input-rangeslider.show-output:after {
+  color: white;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 80px;
+  height: 14px;
+  background: none;
+  cursor: pointer;
+  border: none;
+  color: transparent;
+  // position: absolute;
+  z-index: 2;
+  // top: 50%;
+  // transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  appearance: none;
+  width: 100%;
+  height: 14px;
+  background: none;
+  cursor: pointer;
+  border: none;
+  color: transparent;
+}
+
+input[type="range"]::-moz-range-track {
+  appearance: none;
+  width: 100%;
+  height: 14px;
+  background: none;
+  cursor: pointer;
+  border: none;
+  color: transparent;
+}
+
+input[type="range"]::-ms-track {
+  appearance: none;
+  width: 100%;
+  height: 14px;
+  background: none;
+  cursor: pointer;
+  border: none;
+  color: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 7px;
+  background: #b7b7b7;
+  position: relative;
+  border: 3px solid #5d5d5db2;
+  cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+  appearance: none;
+  // box-shadow: 0 0 10px rgba(black, .15);
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 7px;
+  background: white;
+  cursor: pointer;
+}
+
+/* Continuing Material.css */
+
+input[type="range"]::-ms-thumb {
+  appearance: none;
+  // box-shadow: 0 0 10px rgba(black, .15);
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 7px;
+  background: white;
+  cursor: pointer;
+}
+
+input[type="range"]::-ms-fill-lower,
+input[type="range"]::-ms-fill-upper,
+input[type="range"]::-ms-tooltip {
+  display: none;
+}
+
+input[type="color"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  height: 22px;
+  padding: 0;
+  width: 20px;
+  border-radius: 20px;
+}

frontend/src/assets/styles/components/sideBar/_object.scss

@@ -0,0 +1,174 @@
+.object-wrapper {
+  width: 100%;
+  // padding-top: 8px;
+  flex-direction: column;
+  gap: 10px;
+
+  .sub-header {
+    width: 100%;
+  }
+
+
+  .objectInput-wrapper,
+  .checkBox,
+  .editData {
+    border-bottom: 1px solid var(--border-color-20);
+  }
+
+  .head {
+    font-size: var(--font-size-title);
+    color: var(--lite-gray-80);
+  }
+
+
+
+
+
+
+  .userDatas {
+    width: 100%;
+    // padding-bottom: 15px;
+
+    .sub-header {
+      padding-bottom: 16px;
+
+      .add {
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+
+    .data-wrapper {
+      flex-direction: column;
+      width: 100%;
+      gap: 10px;
+
+      .data {
+        width: 100%;
+      }
+
+      .left {
+        gap: 10px;
+
+        input {
+          width: 110px;
+          height: 18px;
+          border: 1px solid var(--highlight-light-color);
+        }
+
+        .close-button {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .editData {
+    width: 100%;
+    border: 1px solid var(--highlight-light-color);
+    border-radius: 6px;
+    padding: 10px;
+
+    .sub-header {
+      padding-bottom: 10px;
+    }
+
+    .editData-wrapper {
+      flex-direction: column;
+      align-items: start;
+      gap: 10px;
+      .edit-data-list {
+        width: 100%;
+      }
+
+      .minMax {
+        gap: 6px;
+        input {
+          width: 58px;
+        }
+      }
+      table {
+        width: 100%;
+        border-spacing: 0 10px;
+      }
+
+      .key {
+        text-align: left;
+        padding: 0 8px;
+      }
+
+      input.full-width {
+        width: 100px;
+        box-sizing: border-box;
+      }
+
+      input.max-width {
+        width: 58px;
+      }
+    }
+
+    .btn-container {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      gap: 20px;
+      padding-top: 20px;
+
+      button {
+        padding: 5px 19px;
+      }
+      .cancel {
+        background-color: var(--button-abort-color);
+        color: var(--primary-color);
+      }
+    }
+  }
+}
+
+
+// Position,Scale,Rotation style
+
+
+.checkBox,
+.objectInput-wrapper {
+  padding-top: 0px;
+  padding-bottom: 15px;
+  // border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  gap: 15px;
+
+  .objectInput-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .label {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .objectInputs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .object-input {
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .value {
+        width: 36px;
+
+        input {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

frontend/src/assets/styles/components/sideBar/_overView.scss

@@ -0,0 +1,65 @@
+.overlay-layout {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.layout {
+    width: 100%;
+    flex-direction: column;
+
+    .layout-header {
+        width: 100%;
+        padding: 6px 0px;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+    }
+
+    .layout-header:hover {
+        background-color: #f0f0f0;
+    }
+
+
+
+    .icons {
+        display: flex;
+        gap: 7.5px;
+        align-items: center;
+    }
+}
+
+.items-container {
+    width: 100%;
+    padding: 5px 0;
+}
+
+.items-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0px;
+    padding-left: 10px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.items-wrapper:hover {
+    background-color: #f9f9f9;
+}
+
+.items-wrapper.selected {
+    background-color: #e0dfff;
+
+    /* Selected item background */
+    div {
+        color: #ffffff;
+    }
+}
+
+.icons {
+    display: flex;
+    gap: 7.5px;
+    align-items: center;
+}

frontend/src/assets/styles/components/sideBar/_widgets.scss

@@ -0,0 +1,24 @@
+.widgets-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    // padding: 12px 0;
+    overflow: visible;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .chart {
+        width: 100%;
+        height: 160px;
+        border-radius: 8px;
+        background: #FFFFFF;
+        border: 1.23px solid #F7F7F7;
+        box-shadow: 0px 4.91px 4.91px 0px #0000001C;
+        flex-shrink: 0;
+        padding: 5px 0;
+    }
+}

frontend/src/assets/styles/components/toogleSwitch/_toogleSwitch.scss

@@ -0,0 +1,121 @@
+@use "../../abstracts/variables";
+
+.content-container {
+  // height: calc(100vh - 73px);
+  height: 100%;
+  height: calc(100vh - 97px);
+}
+
+.switches {
+  width: 100%;
+  height: 100%;
+  min-width: 250px;
+  position: relative;
+  flex-grow: 1;
+  .canvas{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+  .switch-tools {
+    position: absolute;
+    width: 100%;
+    gap: 16px;
+    padding: 16px;
+    pointer-events: none;
+
+    .top {
+      gap: 16px;
+    }
+
+    .upload {
+      height: 32px;
+      background-color: var(--primary-color);
+      position: relative;
+      padding: 4px 20px;
+      border-radius: 8px;
+      pointer-events: all;
+
+      input[type="file"] {
+        display: none;
+
+        span {
+          z-index: 1;
+        }
+      }
+
+      .UploadIcon {
+        display: none;
+      }
+
+      &:hover {
+
+        span,
+        path {
+          fill: var(--secondary-color);
+          color: var(--secondary-color);
+        }
+
+        box-shadow: variables.$shadow-main;
+        outline: 1px solid var(--secondary-color);
+      }
+    }
+
+    .toggle-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      user-select: none;
+
+      .toggle-switch {
+        width: 80px;
+        height: 30px;
+        box-shadow: var(--shadow-main);
+        border-radius: 10px;
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0;
+        transition: background-color 0.3s ease;
+        overflow: hidden;
+        pointer-events: all;
+      }
+
+      .toggle-switch.am {
+        background-color: var(--primary-color);
+      }
+
+      .toggle-switch.pm {
+        background-color: var(--primary-color);
+      }
+
+      .am-label,
+      .pm-label {
+        color: var(--selected-text-gray);
+        font-size: 12px;
+        width: 50%;
+        text-align: center;
+        position: relative;
+        z-index: 2;
+      }
+
+      .toggle-knob {
+        width: 50%;
+        height: 100%;
+        background-color: var(--secondary-color);
+        border-radius: 8px;
+        position: absolute;
+        transition: transform 0.3s ease;
+        z-index: 1;
+      }
+
+      .toggle-switch.pm .toggle-knob {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

frontend/src/assets/styles/components/toolBar/_toolBar.scss

@@ -0,0 +1,48 @@
+.toolbar-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 255px;
+  transform: translate(0, -50%);
+  flex-direction: column;
+  padding-left: 16px;
+  pointer-events: none;
+  .tool-button {
+    position: relative;
+    pointer-events: all;
+    background-color: var(--primary-color);
+    border-radius: 8px;
+    height: 30px;
+    width: 30px;
+    box-shadow: var(--shadow-main);
+    cursor: pointer;
+    .tool-tip {
+      display: none;
+      position: absolute;
+      left: 40px;
+      white-space: nowrap;
+      background-color: var(--primary-color);
+      border-radius: 6px;
+      min-width: 70px;
+      text-align: center;
+      padding: 4px 0;
+      box-sizing: var(--shadow-main);
+      &::before {
+        content: "";
+        background-color: var(--primary-color);
+        position: absolute;
+        height: 6px;
+        width: 6px;
+        left: -5px;
+        top: 50%;
+        transform: translate(0, -50%);
+        clip-path: path("M0 4L7 8V0L0 4Z");
+      }
+    }
+    &:hover {
+      outline: 2px solid var(--secondary-color);
+      .tool-tip {
+        display: block;
+      }
+    }
+  }
+}

frontend/src/assets/styles/layout/_aside.scss

@@ -0,0 +1,431 @@
+@use "../abstracts/variables";
+
+.sideBar-wrapper,
+.sideBar-layout2-wrapper {
+  width: 255px;
+  min-width: 255px;
+  height: 100%;
+  box-shadow: var(--shadow-main);
+  background-color: var(--primary-color);
+  padding: 12px;
+  gap: 6px;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-top: 3px;
+  position: relative;
+  z-index: 10;
+
+  .header {
+    width: 100%;
+    justify-content: space-around;
+    border-bottom: 1px solid var(--border-color);
+    padding: 10px 0;
+
+    .head {
+      padding: 4px;
+      width: 100%;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  .subHeader {
+    gap: 10px;
+
+    .filter {
+      width: 30px;
+    }
+  }
+
+  .searchHistory {
+    width: 100%;
+    height: 26px;
+    border: 1px solid var(--border-color-20);
+    border-radius: 6px;
+    position: relative;
+
+    input {
+      width: 100%;
+      height: 100%;
+      padding-left: 6px;
+      padding-right: 30px;
+      border-radius: 6px;
+
+      &::placeholder {
+        font-size: var(--font-size-small);
+        color: var(--border-color-20);
+      }
+    }
+
+    .searchIcon {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+  }
+
+  .groups-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 10px;
+    user-select: none;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .group-item {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      gap: 10px;
+    }
+
+    .group-header {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+
+      .header-content {
+        display: flex;
+        align-items: center;
+
+        .header-title {
+          color: variables.$lite-gray-80;
+          font-size: var(--font-size-default);
+        }
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+
+    .children-container {
+      width: 90%;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    .child-item {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 6px;
+
+      .icons {
+        width: 14px;
+      }
+
+      .child-content {
+        flex: 1;
+      }
+
+      .child-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+  }
+
+  .assets-container {
+    flex-wrap: wrap;
+    padding: 10px 5px;
+    padding-right: 1px;
+    gap: 15px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 0;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: var(--secondary-color);
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #35579c;
+    }
+
+    .asset-item {
+      width: 99.97px;
+      height: 100.6px;
+      border-radius: 5.06px;
+      box-shadow: var(--shadow-main);
+      flex-direction: column;
+      padding: 6px;
+      user-select: none;
+
+      &:hover {
+        outline: 2px solid var(--secondary-color);
+        cursor: grab;
+      }
+
+      img {
+        width: 79.62px;
+        height: 60.7px;
+        object-fit: cover;
+      }
+
+      .head {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+
+  .sideBar-header {
+    .regularDropdown-container {
+      width: 60px;
+      border: none;
+      outline: none;
+
+      .dropdown-header {
+        border: none;
+
+      }
+    }
+  }
+}
+
+.sideBar-layout2-wrapper {
+  flex-direction: row-reverse;
+  min-width: 0px;
+  padding: 0;
+  align-items: flex-start;
+
+  .side-flow-header {
+    height: 100%;
+    min-width: 32px;
+    width: 32px;
+    border-left: 2px solid var(--highlight-light-color);
+
+    .sidebar-header-list {
+      height: 32px;
+      width: 32px;
+      cursor: pointer;
+    }
+
+    .selected {
+      border-radius: 2px 0 0 2px;
+      outline: 1px solid var(--secondary-color);
+      cursor: default;
+
+      &:hover {
+        outline: 1px solid var(--secondary-color);
+      }
+    }
+  }
+
+  .object-wrapper {
+    padding: 8px;
+    width: calc(100% - 44px);
+  }
+
+  .world-settings-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    padding: 8px;
+
+    .world-settings-container {
+      height: 100%;
+      width: 100%;
+
+      .split-h {
+        height: 2px;
+        width: 100%;
+        background-color: var(--highlight-light-color);
+        margin: 8px 0;
+      }
+
+      .world-setting-content-container {
+        .input-container {
+          margin: 8px 0;
+
+          .input-label {
+            min-width: 60px;
+            max-width: 120px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          input[type="checkbox"] {
+            margin-right: 12px;
+          }
+
+          input[type="button"] {
+            cursor: pointer;
+            min-width: 100px;
+
+            &:hover {
+              outline: 1px solid var(--secondary-color);
+            }
+
+            &:active,
+            &:focus {
+              outline: 1px solid var(--lite-gray-40);
+            }
+          }
+
+          input[type="number"] {
+            width: 38px;
+            border: none;
+            outline: none;
+
+            &:active,
+            &:focus {
+              outline: 1px solid var(--secondary-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.canvas-tools-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.canvas-tools {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 240px;
+  height: 240px;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.icons-wrapper {
+  position: absolute;
+  width: 32.94px;
+  height: 32.94px;
+  animation: rotateIcon 1s forwards;
+  box-shadow: var(--shadow-main);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotate(calc(var(--final-rotation) * 1deg));
+  cursor: pointer;
+
+  .icons {
+    transform: rotate(calc(var(--final-rotation) * 3));
+  }
+}
+
+@keyframes rotateIcon {
+  from {
+    transform: rotate(0) translateY(0);
+  }
+
+  to {
+    transform: rotate(var(--final-rotation)) translateY(-100px);
+  }
+}
+
+/* Adjust the following based on how many icons you have */
+.icons-wrapper:nth-child(1) {
+  --final-rotation: 90deg;
+}
+
+.icons-wrapper:nth-child(2) {
+  --final-rotation: 60deg;
+}
+
+.icons-wrapper:nth-child(3) {
+  --final-rotation: 30deg;
+}
+
+.icons-wrapper:nth-child(4) {
+  --final-rotation: 0deg;
+}
+
+.icons-wrapper:nth-child(5) {
+  --final-rotation: -30deg;
+}
+
+.icons-wrapper:nth-child(6) {
+  --final-rotation: -60deg;
+}
+
+.icons-wrapper:nth-child(7) {
+  --final-rotation: -90deg;
+}
+
+.contextMenu {
+  width: 148px;
+  color: var(--primary-color);
+  box-shadow: var(--shadow-main);
+  padding: 8px 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-radius: 10px;
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .context-menu-list {
+    justify-content: flex-start;
+    gap: 10px;
+    cursor: pointer;
+    padding: 0 12px;
+    height: 22px;
+    border-radius: 4px;
+
+    &:hover {
+      color: var(--primary-color);
+      background-color: var(--secondary-color);
+
+      .icons {
+        filter: invert(1);
+      }
+    }
+
+    .icons {
+      scale: 0.75;
+      width: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      pointer-events: none;
+    }
+  }
+}

frontend/src/assets/styles/layout/_footer.scss

@@ -0,0 +1,215 @@
+.footer-wrapper {
+    width: 100%;
+    height: 24px;
+    // position: absolute;
+    // bottom: 0;
+    // right: 0;
+    // position: relative;
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+    justify-content: flex-start;
+    gap: 60px;
+    padding: 0 10px;
+    background-color: var(--primary-color);
+    border: none;
+
+    // border-left: 1px solid var(--lite-gray-40);
+    // border-right: 1px solid var(--lite-gray-40);
+    // .content-container {
+    //     gap: 10px;
+    //     height: calc(100vh - 73px);
+    // }
+
+    .footer-animation-wrapper {
+        // width: 237px;
+        height: 355px;
+    }
+
+    .node-simulation-wrapper {
+        width: 237px;
+        height: 100%;
+        // box-shadow: 5px 0px 9.42px 0px #0000001C;
+        border-right: 1px solid #EDEDED;
+        padding: 10px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .footer-nav {
+            padding: 0 10px;
+
+            .nav {
+                padding: 5px 15px;
+                cursor: pointer;
+            }
+        }
+
+        .simulation-wrapper {
+            .simulation {
+                padding: 10px 0px;
+                border-top: 1px solid #F2F2F2;
+
+                &:last-child {
+                    border-bottom: 1px solid #F2F2F2;
+                }
+
+                .icon-wrapper {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                }
+            }
+        }
+
+        .filtered-assets {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            overflow: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+                /* Hide scrollbar */
+            }
+
+            .filtered-assets-wrapper {
+                .asset-item {
+                    p {
+
+                        color: var(--text-gray);
+                    }
+
+                    .icon-wrapper {
+                        width: 26px;
+                        height: 26px;
+                        border-radius: 6px;
+                        background-color: #FFFFFF;
+                        box-shadow: 0px 2px 10px 0px #0000001C;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+
+
+    .NodeProperties {
+        width: 237px;
+        height: 100%;
+        box-shadow: 5px 0px 9.42px 0px #0000001C;
+        padding: 10px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        border: 1px solid #EDEDED;
+
+        .header {}
+
+        .nodepropertiesWrapper,
+        .additionalPropertiesWrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .property {
+                gap: 10px;
+
+                .key,
+                .value {
+
+                    font-size: 11px;
+                    color: var(--text-gray);
+                    font-size: 500;
+                }
+
+                input {
+
+                    font-size: 11px;
+                    color: #5D5D5DB2;
+                    width: 140px;
+
+                    text-align: center;
+                }
+            }
+        }
+    }
+
+    .add-simulation {
+        height: 31px;
+        justify-content: flex-start;
+        gap: 0;
+
+        .add {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            cursor: pointer;
+            font-size: 18px;
+        }
+
+        .added-simulation-wrapper {
+            overflow: scroll;
+            gap: 10px;
+
+            &::-webkit-scrollbar {
+                display: none;
+                /* Hide scrollbar */
+            }
+        }
+
+        .simulation {
+            width: 165.5px;
+            height: 100%;
+            font-size: 12px;
+            font-weight: 600;
+            gap: 10px;
+
+            .name {
+                color: inherit;
+            }
+        }
+    }
+}
+
+.subHeader {
+    gap: 10px;
+
+    .filter {
+        width: 30px;
+    }
+}
+
+.searchHistory {
+    width: 100%;
+    height: 26px;
+    border: 1px solid var(--border-color-20);
+    border-radius: 6px;
+    position: relative;
+
+    input {
+        width: 100%;
+        height: 100%;
+        padding-left: 6px;
+        padding-right: 30px;
+        border-radius: 6px;
+
+        &::placeholder {
+            font-size: var(--font-size-small);
+            color: var(--border-color-20);
+        }
+    }
+
+    .searchIcon {
+        position: absolute;
+        right: 6px;
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+}

frontend/src/assets/styles/layout/_grid.scss

@@ -0,0 +1,11 @@
+@use "../abstracts/mixins";
+
+.flex {
+  @include mixins.flex-center;
+  gap: 14px;
+}
+.flex-sb {
+  top: 0;
+  @include mixins.flex-space-between;
+  gap: 4px;
+}

frontend/src/assets/styles/layout/_header.scss

@@ -0,0 +1,78 @@
+@use "../abstracts/variables";
+
+.header-wrapper {
+  box-shadow: var(--shadow-main);
+  padding: 3px 20px;
+  padding-bottom: 0%;
+  position: relative;
+  background-color: var(--primary-color);
+  z-index: 49;
+
+  .menu-wrapper {
+    .menu-header {
+      justify-content: start;
+      font-size: variables.$font-size-default;
+      gap: 8px;
+      .logo {
+        color: var(--secondary-color);
+        font-size: 20px;
+      }
+    }
+
+    .menu-container {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .menu {
+      padding: 12px 8px;
+      position: relative;
+      cursor: pointer;
+      border-bottom: 1px solid transparent;
+
+      &:first-child {
+        padding-left: 5px;
+      }
+    }
+
+    .active {
+      border-bottom: 1px solid variables.$secondary-color;
+    }
+  }
+
+  .project-wrapper {
+    .project-name {
+      font-size: variables.$font-size-title;
+    }
+  }
+
+  .organization-wrapper {
+    gap: 16px;
+
+    .user-images {
+      gap: 0;
+
+      .images,
+      .more-users {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28.37px;
+        height: 28.37px;
+        border-radius: 50%;
+        border: 1px solid variables.$selected-text-gray;
+      }
+    }
+
+    .organization {
+      gap: 8px;
+
+      img {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid #828282;
+      }
+    }
+  }
+}

frontend/src/assets/styles/main.scss

@@ -0,0 +1,38 @@
+// abstracts
+@use 'abstracts/variables';
+@use 'abstracts/mixins';
+@use 'abstracts/placeholders';
+@use 'abstracts/functions';
+
+// base
+@use 'base/reset';
+@use 'base/typography';
+@use 'base/base';
+
+// components
+@use 'components/inputs/button';
+@use 'components/inputs/dropDown';
+@use 'components/inputs/inputs';
+@use 'components/inputs/popup';
+@use 'components/card';
+@use 'components/toogleSwitch/toogleSwitch';
+@use 'components/undoRedo';
+@use 'components/toolBar/toolBar';
+@use 'components/sideBar/object';
+@use 'components/sideBar/material';
+@use 'components/sideBar/basic';
+@use 'components/sideBar/basicGlobal';
+@use 'components/sideBar/overView';
+@use 'components/sideBar/widgets';
+@use 'components/sideBar/data';
+
+// layout
+@use 'layout/grid';
+@use 'layout/header';
+@use 'layout/aside';
+@use 'layout/footer';
+
+// pages
+@use 'pages/home';
+@use 'pages/signIn';
+@use 'pages/realTimeViz';

frontend/src/assets/styles/pages/_realTimeViz.scss

@@ -0,0 +1,436 @@
+// RealTimeVisualization.module.scss
+@use "../abstracts/variables" as var;
+
+.realTime-viz {
+    .icon {
+        &:hover {
+            background-color: transparent;
+            // color: white;
+            fill: none;
+        }
+    }
+
+    .content-container {
+        display: flex;
+        height: 100vh;
+    }
+
+    .sideBar-header,
+    .search-main-container {
+        width: 100%;
+    }
+
+    .chart-container {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        overflow-y: auto;
+        padding-bottom: 40px;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .main-container {
+        position: relative;
+        flex: 1;
+        height: 600px;
+        background-color: rgb(235, 235, 235);
+        margin: 0 30px;
+    }
+
+    // + button
+    // .side-button {
+    //     position: absolute;
+    //     cursor: pointer;
+    //     transition: 0.3s;
+    //     padding: 6px 11px;
+
+    //     &:hover {
+    //         background: #4a90e2;
+    //         color: white;
+    //     }
+
+    //     &.top {
+    //         top: -35px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //     }
+
+    //     &.right {
+    //         right: -35px;
+    //         top: 50%;
+    //         transform: translateY(-50%);
+    //     }
+
+    //     &.bottom {
+    //         bottom: -35px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //     }
+
+    //     &.left {
+    //         left: -35px;
+    //         top: 50%;
+    //         transform: translateY(-50%);
+    //     }
+    // }
+
+    .panel {
+        position: absolute;
+        background: white;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        border-radius: 6px;
+        overflow: visible !important;
+
+        .panel-content {
+            overflow: visible !important;
+
+        }
+
+        &.top-panel {
+            top: 0;
+            left: 0;
+            right: 0;
+
+            .panel-content {
+                display: flex;
+
+                .chart-container {
+                    height: 100%;
+                    width: 230px;
+                    // margin-right: 10px;
+
+                }
+            }
+        }
+
+        &.bottom-panel {
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            .panel-content {
+                display: flex;
+
+                .chart-container {
+                    height: 100%;
+                    width: 200px;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        &.left-panel {
+            left: 0;
+            top: 0;
+            bottom: 0;
+
+            .chart-container {
+                width: 100%;
+                height: 200px;
+            }
+        }
+
+        &.right-panel {
+            right: 0;
+            top: 0;
+            bottom: 0;
+        }
+
+
+
+        .panel-content {
+            position: relative;
+            height: 100%;
+            padding: 10px;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .chart-container {
+                width: 100%;
+                height: 200px;
+                max-height: 100%;
+                border: 1px dotted #a9a9a9;
+                border-radius: 8px;
+                box-shadow: 0px 2px 6px 0px #3C3C431A;
+                padding: 0;
+                background-color: white;
+                padding: 6px 0;
+            }
+
+            .close-btn {
+                position: absolute;
+                top: 5px;
+                right: 5px;
+                background: none;
+                border: none;
+                cursor: pointer;
+                color: #4a90e2;
+            }
+        }
+    }
+
+    .search-main-container {
+        padding-bottom: 6px;
+        padding-top: 3px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        border-bottom: 1px solid var(--border-color);
+
+        .search-container {
+            .search-wrapper {
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                input {
+                    width: 100%;
+                    padding: 3px 4px;
+                    padding-left: 26px;
+
+                    &:focus {
+                        border-color: #8257e5;
+                        box-shadow: 0 0 5px rgba(130, 87, 229, 0.3);
+                    }
+                }
+
+                .icon {
+                    position: absolute;
+                    top: 0%;
+                    left: 12px;
+                    transform: translate(-50%, 0%);
+                }
+            }
+        }
+
+        .ui-wrapper {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .options {
+                display: flex;
+                gap: 12px;
+
+                .option {
+                    padding: 5px 10px;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    transition: background 0.3s, color 0.3s;
+                    color: #555;
+
+                    &.active {
+                        background-color: #5c87df;
+                        color: hsl(0, 0%, 100%) !important;
+                    }
+                }
+            }
+
+            .theme-switch {
+                .theme-button {
+                    width: 45px;
+                    height: 25px;
+                    border: none;
+                    border-radius: 50px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 4px;
+                    cursor: pointer;
+                    background-color: transparent;
+                    box-shadow: none;
+                    border: 1.23px solid var(--Grays-Gray-5, #e5e5ea);
+                    color: hsl(0, 0%, 100%) !important;
+                    padding: 0;
+                }
+            }
+        }
+
+    }
+}
+
+.top-panel,
+.bottom-panel {
+    .panel-content {
+        display: flex;
+        flex-direction: row !important;
+    }
+
+    .chart-container {
+        height: 100%;
+        width: 230px;
+        // margin-right: 10px;
+    }
+}
+
+// drag and drop DraggableWidget in side-panel
+
+
+
+.theme-container {
+    width: 250px;
+    padding: 12px;
+    box-shadow: 1px -3px 4px 0px #0000001C;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    top: 20px;
+    right: -100%;
+    transform: translate(-0%, 0);
+
+    .theme-preset-wrapper {
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
+
+        .theme-preset {
+            display: flex;
+            gap: 2px;
+            margin-bottom: 10px;
+            border: 1px solid #E0DFFF;
+            padding: 5px 10px;
+            border-radius: 4px;
+
+            .color {
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;
+            }
+        }
+
+        .active {
+            border: 1px solid #6F42C1;
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 1px;
+                left: 1px;
+                width: 10px;
+                height: 10px;
+                background-color: #6F42C1;
+                border-radius: 50%;
+            }
+        }
+    }
+
+    .custom-color {
+        display: flex;
+        justify-content: space-between;
+
+        .color-displayer {
+            display: flex;
+            gap: 5px;
+            align-items: center;
+            border: 1px solid #E0DFFF;
+            border-radius: 4px;
+            padding: 0px 5px;
+
+            input {
+                border: none;
+                outline: none;
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+.theme-container h2 {
+    font-size: 12px;
+    margin-bottom: 8px;
+    color: #2B3344;
+
+}
+
+
+
+
+
+
+
+.side-button-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #FCFDFD;
+    padding: 5px;
+    border-radius: 4px;
+}
+
+.side-button {
+
+    // position: absolute;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 6px 11px;
+}
+
+.side-button:hover {
+    background-color: #4a90e2;
+    color: white;
+}
+
+.extra-buttons {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    align-items: center;
+}
+
+.icon {
+    // width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.top.side-button-container {
+    top: -42px;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+
+    .extra-buttons {
+        display: flex;
+        flex-direction: row;
+    }
+
+}
+
+.right.side-button-container {
+    right: -42px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.bottom.side-button-container {
+    bottom: -42px;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+
+    .extra-buttons {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+.left.side-button-container {
+    left: -42px;
+    top: 50%;
+    transform: translateY(-50%);
+}