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

merged realTimeVisulaization with main

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-26 09:49:28 +05:30
parent eff143790f 7099f1b423
commit 1d91d9c4a2
199 changed files with 39247 additions and 16548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
app/src/styles/abstracts/variables.scss
View File

@@ -1,119 +1,119 @@
/* ========================================================================
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.8rem; // 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-default: 1; // For drei's Html components
$z-index-marketplace: 2; // For drei's Html components
$z-index-tools: 3; // For drei's Html components
$z-index-negative: -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
/* ========================================================================
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.8rem; // 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-default: 1; // For drei's Html components
$z-index-marketplace: 2; // For drei's Html components
$z-index-tools: 3; // For drei's Html components
$z-index-negative: -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

256
app/src/styles/base/base.scss
View File

@@ -1,128 +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 */
}
@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 */
}

14
app/src/styles/base/reset.scss
View File

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

16
app/src/styles/base/typography.scss
View File

@@ -1,8 +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
}
// 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
}

218
app/src/styles/components/visualization/floating/energyConsumed.scss
View File

@@ -1,110 +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;
@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;
}