Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Vishnu
2025-03-25 11:47:41 +05:30
commit 61b3c4ee2c
211 changed files with 36430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/styles/abstracts/functions.scss Normal file
View File

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

11
app/src/styles/abstracts/mixins.scss Normal file
View File

@@ -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;
}

6
app/src/styles/abstracts/placeholders.scss Normal file
View File

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

115
app/src/styles/abstracts/variables.scss Normal file
View File

@@ -0,0 +1,115 @@
/* ========================================================================
Global SCSS Variables
========================================================================
This file contains the global variables used across the project for
colors, typography, spacing, shadows, and other design tokens.
======================================================================== */
@use "functions";
// ========================================================================
// Font Imports
// ========================================================================
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
// ========================================================================
// Colors
// ========================================================================
// Text colors
$text-color: #2b3344; // Primary text color
$text-disabled: #b7b7c6; // Disabled text color
$input-text-color: #595965; // Input field text color
$text-color-dark: #f3f3fd; // Primary text color for dark mode
$text-disabled-dark: #6f6f7a; // Disabled text color for dark mode
$input-text-color-dark: #b5b5c8; // Input field text color for dark mode
// Accent colors
$accent-color: #6f42c1; // Primary accent color
$accent-color-dark: #b392f0; // Primary accent color for dark mode
$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
// Background colors
$background-color: #fcfdfd; // Main background color
$background-color-dark: #19191d; // Main background color for dark mode
$background-color-secondary: #e1e0ff80; // Secondary background color
$background-color-secondary-dark: #39394f99; // Secondary background color for dark mode
$background-color-gray: #f3f3f3; // Main background color
$background-color-gray-dark: #232323; // Main background color for dark mode
// Border colors
$border-color: #e0dfff; // Default border color
$border-color-dark: #403e6a; // Border color for dark mode
// Shadow color
$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
// Gradients
$acent-gradient-dark: linear-gradient(
90deg,
#b392f0 0%,
#a676ff 100%
); // Dark mode accent gradient
$acent-gradient: linear-gradient(
90deg,
#6f42c1 0%,
#925df3 100%
); // Light mode accent gradient
// ========================================================================
// Typography
// ========================================================================
// Font Family Variables
$font-inter: "Inter", sans-serif; // Inter font
$font-josefin-sans: "Josefin Sans", sans-serif; // Josefin Sans font
$font-poppins: "Poppins", sans-serif; // Poppins font
$font-roboto: "Roboto", sans-serif; // Roboto font
// Font sizes (converted to rem using a utility function)
$tiny: 0.625rem; // Extra small text (10px)
$small: 0.75rem; // Small text (12px)
$regular: 0.875rem; // Default text size (14px)
$large: 1rem; // Large text size (16px)
$xlarge: 1.125rem; // Extra large text size (18px)
$xxlarge: 1.5rem; // Double extra large text size (24px)
$xxxlarge: 2rem; // Triple extra large text size (32px)
// Font weights
$thin-weight: 300; // Regular font weight
$regular-weight: 400; // Regular font weight
$medium-weight: 500; // Medium font weight
$bold-weight: 600; // Bold font weight
// ========================================================================
// Z-Index Levels
// ========================================================================
// Z-index variables for layering
$z-index-drei-html: 1; // For drei's Html components
$z-index-ui-base: 10; // Base UI elements
$z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
$z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements
$z-index-ui-highest: 50; // Highest priority elements (e.g., notifications, loading screens)
// ========================================================================
// Shadows
// ========================================================================
// Box shadow variables
$box-shadow-light: 0px 2px 4px $shadow-color; // Light shadow
$box-shadow-medium: 0px 4px 8px $shadow-color; // Medium shadow
$box-shadow-heavy: 0px 8px 16px $shadow-color; // Heavy shadow
// ========================================================================
// Border Radius
// ========================================================================
// Border radius variables
$border-radius-small: 4px; // Small rounded corners
$border-radius-medium: 6px; // Medium rounded corners
$border-radius-large: 12px; // Large rounded corners
$border-radius-circle: 50%; // Fully circular
$border-radius-extra-large: 20px; // Extra-large rounded corners

128
app/src/styles/base/base.scss Normal file
View File

@@ -0,0 +1,128 @@
@use "../abstracts/variables" as *; // abstracts/variables.scss
// Light theme styles
[data-theme="light"] {
// Text and Input colors
--text-color: #{$text-color}; // Main text color for light theme
--text-disabled: #{$text-disabled}; // Disabled text color
--input-text-color: #{$input-text-color}; // Input field text color
// Accent and Highlight colors
--primary-color: #{$background-color}; // Primary color for light theme
--accent-color: #{$accent-color}; // Primary accent color for light theme
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
// Background colors
--background-color: #{$background-color}; // Main background color
--background-color-secondary: #{$background-color-secondary}; // Secondary background color
--background-color-gray: #{$background-color-gray}; // Secondary background color
// Border colors
--border-color: #{$border-color}; // Border color for light theme
// Shadow variables
--shadow-main-light: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
}
// Dark theme styles
[data-theme="dark"] {
// Text and Input colors
--text-color: #{$text-color-dark}; // Main text color for dark theme
--text-disabled: #{$text-disabled-dark}; // Disabled text color
--input-text-color: #{$input-text-color-dark}; // Input field text color
// Accent and Highlight colors
--primary-color: #{$highlight-accent-color-dark};
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
// Background colors
--background-color: #{$background-color-dark}; // Main background color
--background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
--background-color-gray: #{$background-color-gray-dark}; // Secondary background color
// Border colors
--border-color: #{$border-color-dark}; // Border color for dark theme
// Shadow variables
--shadow-main-dark: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
}
// Root container styles
#root {
height: 100vh; // Full viewport height
width: 100vw; // Full viewport width
overflow: hidden; // Prevent scrollbars
}
// Root overlay styles
#root-over {
position: fixed; // Fix overlay to the viewport
top: 0; // Align to the top
left: 0; // Align to the left
z-index: 99; // Ensure high stacking order
}
body {
background: var(--background-color);
/* Font Sizes */
--font-size-tiny: #{$tiny}; // Extra small text
--font-size-small: #{$small}; // Small text
--font-size-regular: #{$regular}; // Default text size
--font-size-large: #{$large}; // Large text size
--font-size-xlarge: #{$xlarge}; // Extra large text size
--font-size-xxlarge: #{$xxlarge}; // Double extra large text size
--font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size
/* Font Weights */
--font-weight-regular: #{$regular-weight}; // Regular font weight
--font-weight-medium: #{$medium-weight}; // Medium font weight
--font-weight-bold: #{$bold-weight}; // Bold font weight
}
/* Apply custom scrollbar styles globally */
::-webkit-scrollbar {
width: 8px; /* Width of the scrollbar */
height: 8px; /* Height for horizontal scrollbars */
}
::-webkit-scrollbar-track {
background: transparent; /* Background of the scrollbar track */
border-radius: 4px; /* Rounded corners */
}
::-webkit-scrollbar-thumb {
background: var(--accent-color); /* Scrollbar handle color */
border-radius: 4px; /* Rounded corners */
border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color); /* Handle color on hover */
}
::-webkit-scrollbar-corner {
background: transparent; /* Remove corner styling for scrollable containers */
}

7
app/src/styles/base/reset.scss Normal file
View File

@@ -0,0 +1,7 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-size: var(--font-size-regular);
}

8
app/src/styles/base/typography.scss Normal file
View File

@@ -0,0 +1,8 @@
// Global Typography Styles
* {
// Setting default font family
font-family: var(--font-inter), sans-serif;
font-weight: var(--font-weight-regular); // Default font weight
font-size: var(--font-size-regular); // Default font size
color: var(--text-color); // Default text color
}

0
app/src/styles/components/button.scss Normal file
View File

0
app/src/styles/components/form.scss Normal file
View File

607
app/src/styles/components/input.scss Normal file
View File

@@ -0,0 +1,607 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
font-weight: var(--font-weight-regular);
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rename-input {
width: 100%;
color: var(--input-text-color);
font-size: var(--font-size-regular);
font-weight: var(--font-weight-regular);
border: 1px solid var(--accent-color);
outline: none;
border-radius: #{$border-radius-small};
line-height: 26px;
padding: 0 8px;
}
.toggle-header-container {
@include flex-center;
padding: 6px 12px;
.toggle-header-item {
width: 100%;
text-align: center;
padding: 4px 12px;
border-radius: #{$border-radius-large};
}
.active {
background-color: var(--accent-color);
color: var(--primary-color);
}
}
.search-wrapper {
position: sticky;
top: 0;
padding: 8px 10px;
background: var(--background-color);
z-index: 1;
.search-container {
@include flex-center;
width: 100%;
border-radius: #{$border-radius-small};
background-color: var(--background-color);
padding: 6px 2px;
position: relative;
border: 1px solid var(--border-color);
.icon-container {
@include flex-center;
padding: 0 8px;
position: absolute;
width: fit-content;
left: 0;
}
.search-input {
width: 100%;
color: var(--input-text-color);
font-size: var(--font-size-regular);
font-weight: var(--font-weight-regular);
border: none;
outline: none;
background-color: transparent;
padding-left: 36px;
}
.clear-button {
@include flex-center;
position: absolute;
right: 4px;
width: 24px;
height: 24px;
border: none;
cursor: pointer;
background-color: transparent;
&:hover {
background-color: var(--highlight-accent-color);
}
}
}
.active {
border: 1px solid var(--accent-color);
}
}
.kebab-menu-container {
position: relative;
@include flex-center;
.kebab-icon {
@include flex-center;
}
.menu-list {
position: absolute;
left: 10px;
top: 12px;
background-color: var(--background-color);
border-radius: #{$border-radius-small};
box-shadow: var(--box-shadow-medium);
z-index: 1;
padding: 8px 4px;
width: 170px;
.menu-item {
margin: 2px 0;
padding: 2px 4px;
cursor: pointer;
border-radius: #{$border-radius-small};
display: flex;
gap: 2px;
&:hover {
background-color: var(--background-color-secondary);
}
.icon-container {
@include flex-center;
height: 18px;
width: 18px;
path {
stroke: var(--accent-color);
}
}
}
.selected {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
&:hover {
background-color: var(--highlight-accent-color);
}
}
input {
display: none;
}
}
}
.project-dropdowm-container {
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
}
}
.regularDropdown-container {
width: 100%;
min-width: 80px;
padding: 2px 4px;
border: 1px solid var(--border-color);
border-radius: 6px;
position: relative;
cursor: pointer;
.dropdown-header {
height: 100%;
display: flex;
justify-content: space-between;
cursor: pointer;
border: 1px solid var(--primary-color);
border-radius: 6px;
background-color: var(--background-color);
}
.dropdown-options {
position: absolute;
width: 100%;
background-color: var(--primary-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-small};
z-index: 10;
max-height: 200px;
overflow-y: auto;
left: 0;
top: 110%;
padding: 4px;
.dropdown-search {
margin-bottom: 4px;
}
.option {
padding: 2px 4px;
cursor: pointer;
flex-direction: row !important;
border-radius: #{$border-radius-small};
&:hover {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
}
}
}
.icon {
height: auto;
}
}
.input.default {
width: 100%;
position: relative;
.dropdown {
top: 3px;
right: 3px;
position: absolute;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
padding: 1px 4px;
.active-option {
color: var(--accent-color);
font-size: var(--font-size-small);
}
}
}
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
&:focus,
&:active {
border: 1px solid var(--accent-color);
}
}
.eye-dropper-input-container {
display: flex;
align-items: center;
.label {
width: 40%;
}
.input-container {
width: 60%;
position: relative;
@include flex-center;
gap: 4px;
.eye-picker-button {
height: 24px;
min-width: 24px;
@include flex-center;
border-radius: #{$border-radius-small};
background: var(--background-color-secondary);
cursor: pointer;
}
.active {
background: var(--accent-color);
}
}
}
.multi-level-dropdown {
position: relative;
display: inline-block;
.dropdown-button {
width: 100%;
background-color: var(--background-color) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
// font-size: 12px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
&:hover {
background-color: #333333;
}
&.open {
background-color: #333333;
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 200px;
overflow: auto;
max-height: 600px;
.dropdown-content {
display: flex;
flex-direction: column;
gap: 6px;
.nested-dropdown {
// &:first-child{
margin-left: 0;
// }
}
padding: 10px;
}
.dropdown-item {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #000000;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #f0f0f0;
}
}
.nested-dropdown {
margin-left: 20px;
.dropdown-trigger {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
color: #000000;
transition: background-color 0.3s ease;
&:hover {
background-color: #f0f0f0;
}
&.open {
background-color: #e0e0e0;
}
.icon {
font-size: 12px;
margin-left: 5px;
}
}
.submenu {
margin-top: 5px;
padding-left: 20px;
border-left: 2px solid #cccccc;
display: flex;
flex-direction: column;
gap: 6px;
}
}
}
}
.input-toggle-container {
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
.label {
white-space: nowrap;
}
.check-box {
height: 22px;
width: 44px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
.check-box-style {
position: absolute;
height: 18px;
width: 18px;
top: 2px;
left: 2px;
background: var(--accent-color);
border-radius: #{$border-radius-circle};
transition: left 0.3s ease;
}
input {
display: none;
}
}
}
.input-range-container {
@include flex-center;
padding: 6px 12px;
.label {
width: 45%;
white-space: nowrap;
}
.input-container {
@include flex-center;
width: 100%;
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
outline: none;
margin: 12px 8px;
cursor: pointer;
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--primary-color);
border-radius: #{$border-radius-circle};
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.2s ease;
outline: 3px solid var(--accent-color);
outline-offset: -3px;
transform: translateY(-5px);
&:hover {
transform: scale(1.1) translateY(-5px);
}
}
&::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent-color);
border: none;
border-radius: #{$border-radius-circle};
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.2);
}
}
&::-ms-thumb {
width: 16px;
height: 16px;
background: var(--accent-color);
border: none;
border-radius: #{$border-radius-circle};
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.2);
}
}
&::-webkit-slider-runnable-track {
height: 6px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
}
&::-moz-range-track {
height: 6px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
}
&::-ms-track {
height: 6px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
border: none;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
}
&:disabled {
background: var(--text-disabled);
cursor: not-allowed;
&::-webkit-slider-thumb {
background: var(--primary-color);
box-shadow: none;
outline: 4px solid var(--text-disabled);
outline: -4px;
}
&::-moz-range-thumb {
background: var(--primary-color);
box-shadow: none;
}
&::-ms-thumb {
background: var(--primary-color);
box-shadow: none;
}
&::-webkit-slider-runnable-track,
&::-moz-range-track,
&::-ms-track,
&::-ms-fill-lower,
&::-ms-fill-upper {
background: var(--text-disabled);
}
}
}
.input-value {
width: 40px;
text-align: center;
}
}
}
.labeled-button-container {
@include flex-space-between;
padding: 6px 12px;
button {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-disabled);
background: var(--accent-color);
transition: all 0.2s;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
}
}
.value-field-container {
margin-bottom: 6px;
padding: 6px 12px;
@include flex-space-between;
.label {
width: 40%;
}
.regularDropdown-container {
width: 60%;
}
.default {
width: 60%;
}
}
.multi-email-invite-input-container {
@include flex-space-between;
gap: 20px;
.multi-email-invite-input {
width: 100%;
display: flex;
border: 1px solid var(--border-color);
padding: 2px 8px;
border-radius: #{$border-radius-large};
flex-wrap: wrap;
max-height: 180px;
overflow: auto;
input {
border: none;
&::placeholder {
color: var(--text-disabled);
}
}
.entered-emails{
@include flex-center;
gap: 2px;
background: var(--background-color-gray);
padding: 0 4px;
border-radius: #{$border-radius-large};
span{
height: 14px;
width: 14px;
line-height: 12px;
text-align: center;
border-radius: #{$border-radius-small};
&:hover{
background: var(--accent-color);
color: var(--primary-color);
}
}
}
}
.invite-button{
padding: 4px 12px;
border-radius: #{$border-radius-large};
background: var(--accent-color);
color: var(--primary-color);
}
.multi-email-invite-input.active {
border: 1px solid var(--accent-color);
}
}

0
app/src/styles/components/layouts.scss Normal file
View File

55
app/src/styles/components/lists.scss Normal file
View File

@@ -0,0 +1,55 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.dropdown-list-container {
border-bottom: 1px solid var(--border-color);
&:last-child {
border: none;
}
.head {
@include flex-space-between;
padding: 6px 12px;
.options {
@include flex-center;
gap: 6px;
.option {
@include flex-center;
cursor: pointer;
transition: all 0.2s;
}
}
}
}
.list-wrapper {
.no-item {
padding: 12px;
}
.list-container {
padding: 2px;
.list-item {
@include flex-space-between;
width: 100%;
text-align: center;
padding: 4px 12px;
border-radius: #{$border-radius-large};
.value {
width: 100%;
text-align: start;
max-width: 180px;
}
.options-container {
@include flex-center;
gap: 6px;
.option {
@include flex-center;
cursor: pointer;
}
}
}
.active {
background-color: var(--highlight-accent-color);
color: var(--primary-color);
}
}
}

62
app/src/styles/components/moduleToggle.scss Normal file
View File

@@ -0,0 +1,62 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.module-toggle-container {
display: flex;
justify-content: space-between;
width: fit-content;
gap: 8px;
position: fixed;
left: 50%;
top: 32px;
transform: translateX(-50%);
.module-list {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: #{$border-radius-extra-large};
box-shadow: var(--box-shadow-medium);
background-color: var(--background-color);
cursor: pointer;
overflow: hidden;
position: relative;
.module {
font-size: var(--font-size-small);
z-index: 1;
}
.icon{
@include flex-center;
z-index: 1;
}
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--highlight-accent-color);
transition: width 0.2s;
border-radius: #{$border-radius-extra-large};
}
&:hover{
&::after {
width: 100%;
}
}
}
.active {
cursor: default;
background-color: var(--accent-color);
&::after{
display: none;
}
&:hover {
background-color: var(--accent-color);
}
.module {
color: var(--highlight-accent-color);
}
}
}

0
app/src/styles/components/templates.scss Normal file
View File

146
app/src/styles/components/tools.scss Normal file
View File

@@ -0,0 +1,146 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.tools-container {
@include flex-center;
position: fixed;
bottom: 32px;
left: 50%;
transform: translate(-50%, 0);
padding: 8px;
gap: 10px;
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
background-color: var(--background-color);
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
}
.draw-tools,
.general-options,
.activeDropicon {
@include flex-center;
gap: 8px;
interpolate-size: allow-keywords;
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
.tool-button {
@include flex-center;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
}
.active {
background-color: var(--accent-color);
&:hover {
background-color: var(--accent-color);
}
}
}
.activeDropicon {
gap: 2px;
.drop-down-option-button {
@include flex-center;
height: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
position: relative;
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
.drop-down-container {
position: absolute;
bottom: 40px;
left: 0;
box-shadow: #{$box-shadow-medium};
padding: 8px;
border-radius: #{$border-radius-large};
.option-list {
margin: 4px 0;
display: flex;
align-items: center;
white-space: nowrap;
border-radius: #{$border-radius-medium};
gap: 6px;
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
}
}
.active-option {
height: 12px;
width: 12px;
@include flex-center;
}
.option {
color: inherit;
}
}
}
}
}
.toggle-threed-button {
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background-color: var(--highlight-accent-color);
gap: 2px;
position: relative;
.toggle-option {
font-size: var(--font-size-small);
padding: 2px;
z-index: 1;
transition: all 0.2s;
}
&::after {
content: "";
position: absolute;
background-color: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
width: 18px;
border-radius: #{$border-radius-small};
transition: all 0.2s;
}
.active {
color: var(--highlight-accent-color);
}
}
.toggled {
&::after {
left: 24px;
}
}
}
@keyframes expandWidth {
from {
width: 0;
opacity: 0;
}
to {
width: fit-content;
opacity: 1;
}
}

494
app/src/styles/components/visualization/floating/common.scss Normal file
View File

@@ -0,0 +1,494 @@
@use '../../../abstracts/variables.scss' as *;
@use '../../../abstracts/mixins.scss' as *;
.throughput-wrapper,
.card {
background-color: var(--background-color);
box-shadow: var(--box-shadow-heavy);
@include flex-center;
flex-direction: column;
gap: 6px;
border-radius: 17.22px;
max-width: 341px;
padding: 14px;
.header {
@include flex-center;
align-items: start;
font-weight: $medium-weight;
font-size: $large;
}
.display-value {
@include flex-center;
.left {
@include flex-center;
gap: 6px;
.icon {
width: 27px !important;
height: 27px !important;
background: var(--background-color);
border-radius: 50%;
@include flex-center;
}
.value-container {
display: flex;
flex-direction: column;
.value-wrapper {
display: flex;
gap: 6px;
.value {
font-size: $small;
color: var(--accent-color);
font-weight: $bold-weight;
}
}
.total-sales {
display: flex;
gap: 6px;
}
}
}
.right {
.percent-increase {
width: 80px;
height: 24px;
border-radius: 7.75px;
background: var(--background-color);
color: #34C759;
@include flex-center;
}
}
}
.footer {
text-align: center;
}
}
.returnOfInvestment {
gap: 10px;
.charts {
height: 200px;
}
.returns-wrapper {
display: flex;
gap: 4px;
align-items: center;
.value {
font-size: 30px;
color: var(--accent-color);
}
}
.footer {
text-align: start;
span {
font-weight: $bold-weight;
}
}
}
.productionCapacity-wrapper {
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
width: 313px;
padding: 4.5px;
border-radius: 9.74px;
.headeproductionCapacityr-wrapper,
.bar-chart {
padding: 14px;
background-color: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
border-radius: 5.2px;
.header {
font-size: $small;
text-align: start;
justify-content: start;
}
.production-capacity {
display: flex;
gap: 6px;
.current,
.target {
display: flex;
gap: 6px;
align-items: center;
.key,
.value {
font-size: $tiny;
}
}
.current {
.value {
background: var(--background-color-secondary);
color: #5783F2;
border-radius: 12.99px;
padding: 3px 4px;
}
}
.target {
.value {
background: var(--background-color-secondary);
color: #9641A7;
border-radius: 12.99px;
padding: 3px 4px;
}
}
}
}
}
.stateWorking-wrapper {
min-width: 445px;
font-size: 12px;
backdrop-filter: blur(40px);
background: var(--background-color-secondary);
border-radius: 20px;
color: var(--text-color);
background: #252525CC;
.header-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
.header {
display: flex;
flex-direction: column;
span {
font-size: 27px;
&:first-child {
color: #FCFDFD;
}
&:last-child {
color: #34C759;
}
}
}
.img {
border-radius: 4px;
img {
border-radius: 4px;
}
}
}
.data-wrapper {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
.data-table {
display: flex;
justify-content: space-between;
padding: 5px;
border-bottom: 1px dotted #ccc;
.data {
color: #FCFDFD;
font-weight: bold;
}
.key {
color: #FCFDFD;
text-align: right;
}
}
}
}
.total-card {
min-height: auto !important;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px !important;
.header-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
.header {
color: #A0AEC0;
}
.data-values {
display: flex;
align-items: center;
gap: 6px;
.value {
color: var(--text-color);
}
.per {
color: #01B574;
}
}
}
.icon {
width: 45px;
height: 45px;
background-color: var(--accent-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
}
.warehouseThroughput {
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-color);
padding: 14px;
.header {
p {
span {
color: var(--accent-color);
}
}
h2 {
color: var(--text-color);
}
}
}
.productivity-dashboard {
width: 100%;
background-color: var(--background-color);
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
header {
@include flex-space-between;
margin-bottom: 20px;
h2 {
font-size: $regular;
margin: 0;
font-weight: 600;
}
.options {
background-color: #343b47;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #49505a;
}
}
}
main {
display: flex;
gap: 20px;
.metrics {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
.metric {
background-color: #2c3e50;
padding: 15px;
border-radius: 4px;
.label {
font-size: 0.9rem;
margin: 0;
opacity: 0.7;
}
.value {
font-size: 1.2rem;
font-weight: bold;
margin: 0;
}
}
}
.chart-section {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.progress-circle {
transform: rotate(-90deg);
/* Adjust rotation for SVG */
width: 150px;
height: 150px;
circle {
transition: stroke-dashoffset 0.5s ease-in-out; // Smooth animation
}
}
.chart-details {
position: absolute;
text-align: center;
.title {
font-size: 1rem;
margin: 0;
opacity: 0.7;
}
.time {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
}
.subtitle {
font-size: 0.8rem;
margin: 0;
opacity: 0.7;
}
}
}
}
}
/* FleetEfficiency.module.css */
.fleetEfficiency {
width: 100%;
padding: 20px;
background: var(--background-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
width: 240px;
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
.progressContainer {
position: relative;
width: 100%;
height: 120px;
overflow: auto !important;
.progress {
width: 100%;
height: 100%;
.barOverflow {
width: 100%;
}
}
}
}
.scaleLabels {
background-color: var(--background-color);
box-shadow: var(--box-shadow-heavy);
display: flex;
justify-content: space-between;
color: #718096;
font-size: 12px;
padding: 18px 10px;
position: relative;
z-index: 100;
top: -32px;
}
.barOverflow {
position: relative;
overflow: hidden;
width: 100%;
height: 100px;
margin-bottom: -14px;
}
.bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
border-radius: 50%;
box-sizing: border-box;
border: 25px solid #eee;
border-bottom-color: var(--accent-color);
border-right-color: var(--accent-color);
transition: transform 0.5s ease;
}
// progress should be progress {progress}

110
app/src/styles/components/visualization/floating/energyConsumed.scss Normal file
View File

@@ -0,0 +1,110 @@
@use "../../../abstracts/variables" as *;
@use "../../../abstracts/mixins" as *;
.floatingWidgets-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
padding: 6px;
.floating {
min-height: 170px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 18px;
}
.working-state {
display: flex;
flex-direction: column;
gap: 6px;
.state-working-top {
display: flex;
}
}
}
.floatingWidgets-wrapper {
font-family: Arial, sans-serif;
color: #333;
}
.floating.working-state {
width: 100%;
height: 283px;
background: #f5f5f5;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
.state-working-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
// flex-direction: column;
}
.state {
font-size: 24px;
font-weight: bold;
}
.working-status {
display: flex;
align-items: center;
gap: 8px;
}
.working {
font-size: 20px;
color: #4CAF50;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background: #4CAF50;
border-radius: 50%;
}
.img img {
width: 150px;
height: 100px;
border-radius: 4px;
object-fit: cover;
}
.state-working-data {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.data-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
padding: 4px 0;
}
.data-key {
color: #666;
}
.data-value {
font-weight: bold;
color: #333;
}

52
app/src/styles/components/visualization/ui/styledWidgets.scss Normal file
View File

@@ -0,0 +1,52 @@
@use "../../../abstracts/variables" as *;
@use "../../../abstracts/mixins" as *;
.progressBar {
height: auto !important;
padding: 12px 10px 41px 10px;
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
min-width: 250px;
.header {
display: flex;
justify-content: center;
align-items: center;
border-bottom: none;
}
.stock {
padding: 13px 5px;
border-radius: 6.33px;
display: flex;
justify-content: space-between;
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
font-size: 16px;
align-items: center;
}
.stock-item {
.stockValues {
display: flex;
gap: 3px;
.value {
color: var(--accent-color);
}
.stock-description {
font-size: 12px;
}
}
}
.icon {
width: 16.95305824279785px;
height: 16.95305824279785px;
background-color: var(--accent-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
}

82
app/src/styles/layout/loading.scss Normal file
View File

@@ -0,0 +1,82 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.loading-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color);
.loading-container {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 28px;
z-index: 5;
&::after {
content: "";
position: absolute;
background: radial-gradient(
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
height: 50vh;
width: 50vw;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(200px);
z-index: -1;
}
.project-name {
font-size: var(--font-size-regular);
}
.loading-hero-container {
.logo {
@include flex-center;
width: 100%;
margin-bottom: 35px;
circle {
fill: transparent;
}
}
.content {
font-family: #{$font-josefin-sans};
font-size: #{$xxlarge};
font-weight: #{$thin-weight};
max-width: 250px;
text-align: center;
line-height: 2rem;
}
}
.progress-container {
.progress-value {
font-family: #{$font-josefin-sans};
font-weight: #{$thin-weight};
font-size: 96px;
margin-bottom: 22px;
text-align: center;
}
.progress-indicator-container {
height: 6px;
width: 60vw;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
position: relative;
.progress-bar {
height: 6px;
background: var(--accent-color);
border-radius: #{$border-radius-small};
transition: width 0.2 ease;
}
}
}
}
}

112
app/src/styles/layout/popup.scss Normal file
View File

@@ -0,0 +1,112 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.collaboration-popup-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color-secondary);
backdrop-filter: blur(2px);
@include flex-center;
.collaboration-popup-container {
max-width: 50vw;
width: 460px;
background-color: var(--background-color);
border-radius: #{$border-radius-large};
.split {
width: 100%;
height: 1px;
background: var(--highlight-accent-color);
}
.header {
@include flex-space-between;
padding: 12px;
border-bottom: 1px solid var(--border-color);
.content {
@include flex-center;
.copy-link-button {
font-size: var(--font-size-small);
&:hover {
color: var(--accent-color);
text-decoration: underline;
}
}
.close-button {
@include flex-center;
height: 20px;
width: 20px;
border-radius: #{$border-radius-small};
&:hover {
background: var(--background-color-secondary);
}
svg {
scale: 1.5;
}
}
}
}
.invite-input-container {
padding: 12px;
}
.access-and-user-control-container {
padding: 12px;
.user-header {
margin-bottom: 12px;
}
.general-access-container,
.users-list-container {
.user-list-container,
.team-container,
.you-container {
@include flex-space-between;
padding: 8px 12px;
.user-details {
@include flex-center;
gap: 8px;
.profile-image {
height: 24px;
width: 24px;
line-height: 24px;
text-align: center;
border-radius: #{$border-radius-circle};
overflow: hidden;
color: var(--primary-color);
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.no-profile-container {
font-size: var(--font-size-small);
color: inherit;
}
}
.user-name {
font-size: var(--font-size-regulaar);
}
}
.project-name,
.your-name {
color: var(--accent-color);
}
.number-of-peoples-have-access {
padding: 4px 12px;
border-radius: #{$border-radius-small};
}
.indicater {
padding: 2px 12px;
line-height: 22px;
border-radius: #{$border-radius-extra-large};
background: var(--highlight-accent-color);
color: var(--accent-color);
outline: 1px dashed var(--accent-color);
outline-offset: -1px;
}
}
.team-container,
.you-container {
border-top: 1px solid var(--border-color);
}
}
}
}
}

843
app/src/styles/layout/sidebar.scss Normal file
View File

@@ -0,0 +1,843 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.sidebar-left-wrapper {
width: 270px;
position: fixed;
top: 32px;
left: 8px;
background-color: var(--background-color);
border-radius: #{$border-radius-extra-large};
box-shadow: #{$box-shadow-medium};
.header-container {
@include flex-space-between;
padding: 10px;
width: 100%;
.header-content {
@include flex-center;
width: calc(100% - 34px);
.logo-container {
@include flex-center;
}
.header-title {
padding: 0 8px;
width: 100%;
max-width: calc(100% - 32px);
.input-value {
color: var(--accent-color);
}
}
}
.toggle-sidebar-ui-button {
@include flex-center;
cursor: pointer;
height: 32px;
width: 32px;
min-height: 32px;
min-width: 32px;
border-radius: #{$border-radius-small};
&:hover {
background-color: var(--background-color-secondary);
}
}
.active {
background-color: var(--background-color-secondary);
outline: 1px solid var(--accent-color);
outline-offset: -1px;
}
}
.sidebar-left-container {
min-height: 50vh;
padding-bottom: 12px;
position: relative;
display: flex;
flex-direction: column;
.sidebar-left-content-container {
border-bottom: 1px solid var(--border-color);
// flex: 1;
height: calc(100% - 36px);
position: relative;
overflow: auto;
.widget-left-sideBar {
min-height: 50vh;
max-height: 60vh;
.widget2D {
overflow: auto;
.chart-container {
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px;
flex-wrap: nowrap;
overflow: auto;
.chart {
min-height: 170px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 12px 6px;
}
.progressBar {
height: auto !important;
padding: 12px 10px 41px 10px;
display: flex;
flex-direction: column;
gap: 16px;
.header {
display: flex;
justify-content: start;
align-items: center;
border-bottom: none;
}
.stock {
padding: 13px 5px;
background-color: var(--background-color-secondary);
border-radius: 6.33px;
display: flex;
justify-content: space-between;
.stock-item {
.stockValues {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
gap: 3px;
.value {
color: var(--accent-color);
font-size: 16px;
}
}
.stock-description {
font-size: 12px;
}
}
}
}
}
}
.widget3D {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
.widget-item {
height: 170px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 12px 6px;
.widget-image {
width: 100%;
height: 90%;
object-fit: contain;
}
}
}
}
}
.outline-container {
height: 100%;
.outline-content-container {
position: relative;
height: 100%;
overflow: auto;
max-height: 60vh;
}
}
}
}
.sidebar-right-wrapper {
width: 320px;
position: fixed;
top: 32px;
right: 8px;
background-color: var(--background-color);
border-radius: #{$border-radius-extra-large};
box-shadow: #{$box-shadow-medium};
.header-container {
@include flex-space-between;
padding: 10px;
width: 100%;
gap: 12px;
height: 52px;
.options-container {
@include flex-center;
gap: 8px;
.share-button {
padding: 4px 12px;
color: var(--primary-color);
background-color: var(--accent-color);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
cursor: pointer;
}
.app-docker-button {
@include flex-center;
}
}
.split {
height: 20px;
width: 2px;
background: var(--background-color-secondary);
}
.users-container {
width: 100%;
@include flex-space-between;
.user-profile {
@include flex-center;
height: 26px;
width: 26px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: white;
}
.guest-users-container {
display: flex;
.other-guest {
@include flex-center;
height: 26px;
width: 26px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
background: var(--highlight-accent-color);
font-weight: var(--font-weight-bold);
color: var(--accent-color);
outline: 1px solid var(--accent-color);
outline-offset: -1px;
}
}
.user-profile-container {
display: flex;
.user-organization {
height: 100%;
max-width: 52px;
border-radius: 20px;
overflow: hidden;
margin-left: 2px;
img {
height: 100%;
width: 100%;
object-fit: cover;
vertical-align: top;
}
}
}
}
}
.sidebar-actions-container {
position: absolute;
left: -40px;
.sidebar-action-list {
margin-bottom: 12px;
@include flex-center;
height: 34px;
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--primary-color);
box-shadow: #{$box-shadow-medium};
}
.active {
background: var(--accent-color);
}
}
.sidebar-right-container {
min-height: 50vh;
padding-bottom: 12px;
position: relative;
display: flex;
flex-direction: column;
.sidebar-right-content-container {
border-bottom: 1px solid var(--border-color);
// flex: 1;
height: calc(100% - 36px);
position: relative;
overflow: auto;
}
}
.visualization-right-sideBar {
min-height: 50vh;
max-height: 60vh;
.sidebar-right-content-container {
.dataSideBar {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px 12px;
.datas {
display: flex;
align-items: center;
justify-content: space-between;
.datas__class {
display: flex;
align-items: center;
.multi-level-dropdown {
min-width: 170px;
.dropdown-button {
display: flex;
justify-content: space-between;
gap: 6px;
}
}
}
.datas__class {
display: flex;
gap: 12px;
// .datas__separator {
// }
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
}
}
}
.sideBarHeader {
color: var(--accent-color);
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
}
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
.selectedMain-container {
display: flex;
flex-direction: column;
gap: 6px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
.selectedMain {
display: flex;
align-items: center;
gap: 6px;
main {
width: 35%;
white-space: nowrap;
/* Prevent wrapping */
}
.icon {
padding: 0;
cursor: pointer;
}
button {
background-color: transparent;
box-shadow: none;
color: #5273eb;
padding: 6px;
font-size: 18px;
}
.bulletPoint {
color: #5273eb;
font-size: 16px;
}
.regularDropdown-container {
width: 100%;
}
&:first-child {
gap: 4px;
}
}
}
.child {
width: 100%;
gap: 6px;
}
.infoBox {
display: flex;
align-items: flex-start;
gap: 6px;
color: #444;
border-radius: 6px;
font-size: 14px;
.infoIcon {
padding: 0px 7px;
border-radius: 50%;
border: 1px solid gray;
}
p {
margin: 0;
}
}
}
.design {
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
padding: 0;
font-size: 14px;
color: #4a4a4a;
.selectedWidget {
padding: 6px 12px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
}
.reviewChart {
width: 100%;
height: 150px;
background: #f0f0f0;
// border-radius: 8px;
}
.optionsContainer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 12px;
.option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
.regularDropdown-container {
width: 160px;
}
&:last-child {
flex-direction: column;
.header {
width: 100%;
display: flex;
justify-content: space-between;
}
.colorDisplayer {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
input[type="color"] {
border: none;
outline: none;
background: none;
width: 24px;
height: 26px;
border-radius: 3.2px;
}
}
}
span {
min-width: 100px;
}
}
}
}
}
.machine-mechanics-container {
.machine-mechanics-header {
padding: 8px 12px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
color: var(--accent-color);
}
.process-list-container {
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
border-bottom: 1px solid var(--border-color);
.label {
margin-right: 8px;
}
.add-new-process {
@include flex-center;
height: 24px;
min-width: 24px;
cursor: pointer;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium};
path {
stroke: var(--accent-color);
stroke-width: 1.5px;
}
&:hover {
background: var(--accent-color);
path {
stroke: var(--highlight-accent-color);
}
}
}
}
}
.machine-mechanics-content-container,
.simulations-container {
max-height: calc(60vh - (47px - 35px));
overflow: auto;
overflow-y: scroll;
.header {
@include flex-space-between;
padding: 6px 12px;
padding-right: 6px;
.add-button {
@include flex-center;
padding: 2px 4px;
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-small};
cursor: pointer;
path {
stroke: var(--primary-color);
}
}
}
.lists-main-container {
margin: 2px 8px;
width: calc(100% - 12px);
margin-right: 4px;
background: var(--background-color-gray);
border-radius: #{$border-radius-small};
min-height: 120px;
.list-container {
padding: 4px;
height: calc(100% - 16px);
overflow-y: scroll;
.list-item {
@include flex-space-between;
padding: 2px 12px;
width: 100%;
margin: 2px 0;
border-radius: #{$border-radius-small};
}
.value {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 80%;
gap: 6px;
input {
width: fit-content;
accent-color: var(--accent-color);
}
}
.active {
background: var(--highlight-accent-color);
.value .input-value {
color: var(--accent-color);
}
path {
stroke: var(--accent-color);
}
}
.remove-button {
@include flex-center;
height: 18px;
width: 18px;
cursor: pointer;
border-radius: #{$border-radius-small};
transform: translateX(4px);
&:hover {
background-color: var(--accent-color);
path {
stroke: var(--primary-color);
}
}
}
}
.resize-icon {
@include flex-center;
padding: 4px;
cursor: grab;
&:active {
cursor: grabbing;
}
}
}
.selected-properties-container {
padding: 12px;
.properties-header {
color: var(--accent-color);
font-weight: var(--font-weight-regular);
padding: 8px 0;
}
.value-field-container {
margin-bottom: 6px;
padding: 0;
@include flex-space-between;
.label {
width: 40%;
}
.regularDropdown-container {
width: 60%;
}
.default {
width: 60%;
}
}
}
.simulation-process {
.collapse-header-container {
@include flex-space-between;
padding-right: 12px;
}
.process-container {
.value {
.arrow-container {
}
.active {
}
}
.children-drop {
.value {
}
}
}
}
.footer {
@include flex-center;
justify-content: flex-start;
gap: 4px;
padding: 12px;
font-size: var(--font-size-tiny);
}
.compare-simulations-container {
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
.compare-simulations-header {
font-weight: var(--font-weight-medium);
}
.content {
padding: 12px 0;
font-size: var(--font-size-small);
span {
font-size: inherit;
color: var(--accent-color);
}
}
.input {
display: flex;
flex-direction: row-reverse;
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
cursor: pointer;
}
}
}
}
.global-properties-container,
.analysis-main-container,
.asset-properties-container {
.header {
padding: 8px 12px;
border-top: 1px solid var(--highlight-accent-color);
border-bottom: 1px solid var(--highlight-accent-color);
color: var(--accent-color);
}
.input-container {
@include flex-center;
.remove-button {
@include flex-center;
height: 18px;
width: 18px;
margin-bottom: 6px;
border-radius: 8px 0 0 8px;
&:hover {
background-color: var(--accent-color);
path {
stroke: var(--primary-color);
}
}
}
}
.optimize-button,
.generate-report-button {
@include flex-center;
background-color: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-large};
padding: 2px;
gap: 4px;
margin: 4px 12px;
cursor: pointer;
font-size: var(--font-size-small);
margin-bottom: 8px;
}
.split {
height: 1px;
background: var(--highlight-accent-color);
margin: 8px;
}
.custom-input-container {
.header {
border: none;
}
.inputs-container {
@include flex-space-between;
padding-bottom: 8px;
.input-container {
padding: 0 12px;
margin-top: 6px;
gap: 6px;
}
}
.custom-input-label {
white-space: nowrap;
}
}
.analysis-content-container {
min-height: 50vh;
max-height: 60vh;
overflow-y: auto;
.dropdown-header-container,
.dropdown-content-container {
padding: 6px 12px;
border-top: 1px solid var(--highlight-accent-color);
}
.input-range-container {
.input-container {
width: 75%;
}
}
}
.buttons-container {
@include flex-space-between;
padding: 12px;
gap: 12px;
input {
border: none;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--accent-color);
}
}
.cancel {
background: transparent;
color: var(--accent-color);
}
.submit {
background: var(--accent-color);
color: var(--highlight-accent-color);
}
}
.create-custom-analysis-container {
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
.custom-analysis-header {
font-weight: var(--font-weight-medium);
}
.content {
padding: 12px 0;
font-size: var(--font-size-small);
span {
font-size: inherit;
color: var(--accent-color);
}
}
.input {
display: flex;
flex-direction: row-reverse;
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
cursor: pointer;
}
}
}
}
}

83
app/src/styles/layout/toast.scss Normal file
View File

@@ -0,0 +1,83 @@
.toast-container {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast-container.bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.toast-container.bottom-left {
bottom: 20px;
left: 20px;
}
.toast-container.bottom-right {
bottom: 20px;
right: 20px;
}
.toast-container.top-center {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.toast-container.top-left {
top: 20px;
left: 20px;
}
.toast-container.top-right {
top: 20px;
right: 20px;
}
.toast {
padding: 10px 20px;
border-radius: 5px;
color: var(--primary-color);
cursor: pointer;
animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
}
.toast.success {
background-color: #4caf50;
}
.toast.error {
background-color: #f44336;
}
.toast.info {
background-color: #2196f3;
}
.toast.warning {
background-color: #ff9800;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

34
app/src/styles/main.scss Normal file
View File

@@ -0,0 +1,34 @@
// 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/button';
@use 'components/form';
@use 'components/input';
@use 'components/layouts';
@use 'components/lists';
@use 'components/moduleToggle';
@use 'components/templates';
@use 'components/tools';
@use 'components/visualization/floating/energyConsumed';
@use 'components/visualization/ui/styledWidgets';
@use './components/visualization/floating/common';
// layout
@use 'layout/loading';
@use 'layout/sidebar';
@use 'layout/popup';
@use 'layout/toast';
// pages
@use 'pages/home';
@use 'pages/realTimeViz';
@use 'pages/userAuth';

44
app/src/styles/pages/home.scss Normal file
View File

@@ -0,0 +1,44 @@
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: var(--primary-color);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: 282c34;
}
.App-link {
color: var(--button-action-color);
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navbar{
position: absolute;
top: 0;
width: 100%;
padding: 32px 60px;
li{
display: block;
}
}

390
app/src/styles/pages/realTimeViz.scss Normal file
View File

@@ -0,0 +1,390 @@
@use "../abstracts/variables.scss" as *;
// Main Container
.realTime-viz {
background-color: var(--background-color);
border-radius: 20px;
box-shadow: $box-shadow-medium;
width: calc(100% - (320px + 270px + 90px));
height: calc(100% - (200px + 80px));
position: absolute;
top: 50%;
left: calc(270px + 45px);
transform: translate(0, -50%);
.icon {
display: flex;
align-items: center;
position: relative;
}
.icons-container {
.icon {
&:first-child {
&::after {
display: none;
}
}
}
}
.zoon-wrapper {
display: flex;
background-color: var(--background-color);
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
gap: 6px;
padding: 4px;
border-radius: 8px;
max-width: 80%;
overflow: auto;
max-width: calc(100% - 450px);
&::-webkit-scrollbar {
display: none;
}
.zone {
width: auto;
background-color: var(--background-color);
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
font-size: $small;
}
.active {
background-color: var(--accent-color);
color: var(--background-color);
// color: #FCFDFD !important;
}
}
.zoon-wrapper.bottom {
bottom: 210px;
}
@media (max-width: 1024px) {
width: 80%; // Increase width to take more space on smaller screens
height: 500px; // Reduce height to fit smaller screens
left: 50%; // Center horizontally
.main-container {
margin: 0 15px; // Reduce margin for better spacing
}
.zoon-wrapper {
bottom: 5px; // Adjust position for smaller screens
&.bottom {
bottom: 150px; // Adjust for bottom placement
}
}
}
.content-container {
display: flex;
height: 100vh;
transition: all 0.3s ease;
}
.main-container {
position: relative;
flex: 1;
height: 600px;
background-color: rgb(235, 235, 235);
margin: 0 30px;
transition: height 0.3s ease, margin 0.3s ease;
.zoon-wrapper {
display: flex;
background-color: rgba(224, 223, 255, 0.5);
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
gap: 6px;
padding: 4px;
border-radius: 8px;
max-width: 80%;
overflow: auto;
transition: transform 0.3s ease;
&::-webkit-scrollbar {
display: none;
}
.zone {
width: auto;
background-color: $background-color;
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.3s ease;
&.active {
background-color: var(--primary-color);
color: var(--accent-color);
}
}
&.bottom {
bottom: 210px;
}
}
}
.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 {
position: relative;
height: 100%;
padding: 10px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 10px;
background-color: var(--background-color);
&::-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 rgba(60, 60, 67, 0.1);
padding: 6px 0;
background-color: white;
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
cursor: pointer;
color: var(--primary-color);
}
}
&.top-panel,
&.bottom-panel {
left: 0;
right: 0;
.fullScreen {
background-color: red;
}
.panel-content {
display: flex;
flex-direction: row;
.chart-container {
height: 100%;
width: 200px;
}
}
}
&.top-panel {
top: 0;
}
&.bottom-panel {
bottom: 0;
}
&.left-panel {
left: 0;
top: 0;
bottom: 0;
.chart-container {
width: 100%;
height: 180px;
}
}
&.right-panel {
right: 0;
top: 0;
bottom: 0;
}
}
}
// Side Buttons
.side-button-container {
position: absolute;
display: flex;
background-color: var(--background-color);
padding: 5px;
border-radius: 8px;
transition: transform 0.3s ease;
.extra-Bs {
display: flex;
align-items: center;
gap: 12px;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
}
.active {
background-color: var(--accent-color);
}
&:hover {
cursor: pointer;
}
}
.side-button {
cursor: pointer;
transition: background-color 0.3s ease;
width: 18px;
height: 18px;
display: flex;
justify-content: center;
// align-items: center;
background-color: var(--accent-color);
border: none;
color: var(--background-color);
border-radius: 4px;
}
&.top {
top: -30px;
left: 50%;
transform: translateX(-50%);
flex-direction: row;
gap: 6px;
}
&.right {
right: -30px;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
gap: 6px;
}
&.bottom {
bottom: -30px;
left: 50%;
transform: translateX(-50%);
flex-direction: row;
gap: 6px;
}
&.left {
left: -30px;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
gap: 6px;
}
}
.right.side-button-container {
.extra-Bs {
flex-direction: column;
}
}
.left.side-button-container {
.extra-Bs {
flex-direction: column;
}
}
// Theme Container
.theme-container {
width: 250px;
padding: 12px;
box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
background-color: white;
position: absolute;
top: 20px;
right: -100%;
transform: translate(-0%, 0);
h2 {
font-size: 12px;
margin-bottom: 8px;
color: #2b3344;
}
.theme-preset-wrapper {
display: flex;
gap: 5px;
flex-wrap: wrap;
.theme-preset {
display: flex;
gap: 2px;
margin-bottom: 10px;
border: 1px solid $border-color;
padding: 5px 10px;
border-radius: 4px;
transition: border 0.3s ease;
&.active {
border: 1px solid var(--primary-color);
&::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 10px;
height: 10px;
background-color: var(--primary-color);
border-radius: 50%;
}
}
}
}
.custom-color {
display: flex;
justify-content: space-between;
.color-displayer {
display: flex;
gap: 5px;
align-items: center;
border: 1px solid var(--accent-color);
border-radius: 4px;
padding: 0 5px;
input {
border: none;
outline: none;
border-radius: 50%;
}
}
}
}

190
app/src/styles/pages/userAuth.scss Normal file
View File

@@ -0,0 +1,190 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.auth-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--text-color);
height: 100vh;
background-color: var(--background-color);
background-color: #fcfdfd;
position: relative;
z-index: 1;
.logo-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
@include flex-center;
}
h1 {
color: var(--text-color);
font-size: 24px;
margin-bottom: 10px;
font-weight: var(--font-weight-medium);
}
p {
font-size: 14px;
color: var(--text-color);
margin-bottom: 20px;
.link {
color: var(--accent-color);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.google-login {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 350px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid var(--accent-color);
border-radius: #{$border-radius-extra-large};
background: transparent;
color: var(--accent-color);
font-size: 14px;
outline: none;
cursor: pointer;
.google-icon {
color: var(--accent-color);
font-weight: bold;
font-size: 16px;
margin-right: 10px;
}
&:hover {
background: var(--background-color);
}
}
.error-message {
color: #ff4d4f;
font-size: 12px;
margin-bottom: 10px;
}
.auth-form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 350px;
input {
width: 100%;
padding: 10px 18px;
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: #{$border-radius-extra-large};
background: var(--background-color);
font-size: 14px;
color: #333;
&:focus {
border-color: var(--accent-color);
outline: none;
}
}
.password-container {
position: relative;
width: 100%;
.toggle-password {
@include flex-center;
position: absolute;
top: 20px;
right: 10px;
height: 22px;
width: 22px;
transform: translateY(-50%);
background: none;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
}
}
.continue-button {
width: 100%;
padding: 10px;
background: var(--accent-gradient-color);
color: var(--background-color);
font-size: 14px;
border: none;
outline: none;
border-radius: #{$border-radius-extra-large};
cursor: pointer;
&:hover {
opacity: 0.9;
}
}
}
.policy-checkbox {
@include flex-center;
gap: 6px;
margin: 18px 0;
margin-top: 8px;
justify-content: flex-start;
width: 100%;
padding: 0 6px;
input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--accent-color);
}
}
.policy {
font-size: 12px;
margin-top: 20px;
text-align: center;
line-height: 1.5;
width: 320px;
text-align: center;
.link {
color: var(--accent-color);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&::after {
content: "";
position: absolute;
background: radial-gradient(
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
height: 50vh;
width: 50vw;
top: 0;
left: 0;
top: 50%;
left: 50%;
opacity: 0.5;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(200px);
z-index: -1;
}
}
}