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

added dublicate widget function and added missed drag and drop

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-27 12:24:36 +05:30
parent f1a72e4afb 1bbb210786
commit 7e44ba94ca
23 changed files with 901 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,14 @@
* {
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);
}
input[type="password"]::-ms-reveal, /* For Microsoft Edge */
input[type="password"]::-ms-clear, /* For Edge clear button */
input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button */
input[type="password"]::-webkit-inner-spin-button { /* Just in case */
display: none;
}

646
app/src/styles/components/marketPlace/marketPlace.scss
View File

@@ -2,383 +2,371 @@
@use "../../abstracts/mixins.scss" as *;
.marketplace-wrapper {
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 95px 8px;
padding-bottom: 32px;
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 95px 8px;
padding-bottom: 32px;
.marketplace-container {
padding: 20px 2px;
// height: calc(100vh - 120px);
height: 100%;
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
position: relative;
.marketplace-container {
padding: 20px 2px;
// height: calc(100vh - 120px);
height: 100%;
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
position: relative;
}
}
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
left: calc(120px / 2);
top: 100px;
padding: 14px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
left: calc(120px / 2);
top: 100px;
padding: 14px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
.filter-search-container {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
.filter-search-container {
width: 100%;
.asset-search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large;
.search-wrapper {
padding: 0 12px;
.search-container {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
border: none !important;
border-radius: $border-radius-large;
overflow: hidden;
padding: 6px 12px;
outline: 1px solid var(--border-color);
.asset-search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large ;
.search-container {
display: flex;
align-items: center;
width: 100%;
border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large;
overflow: hidden;
padding: 4px 12px;
input {
border: none !important;
outline: none;
}
}
input {
border: none !important;
outline: none;
}
}
}
}
.regularDropdown-container {
max-width: 159px;
height: 100%;
.regularDropdown-container {
max-width: 159px;
max-height: 30px;
height: 100%;
.dropdown-header {
align-items: center;
}
}
.dropdown-header {
align-items: center;
}
}
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
color: var(--accent-color);
}
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
.rating-container {
display: flex;
align-items: center;
gap: 6px;
.stars {
display: flex;
align-items: center;
}
}
}
.cards-container-container {
padding: 0px 20px;
display: flex;
flex-direction: column;
gap: 6px;
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
margin: 10px 0;
}
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
.card-container {
width: calc(25% - 23px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
border: 1px solid var(--background-accent-transparent, #e0dfff80);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
.icon {
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
cursor: pointer;
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
}
.assets-container {
display: flex;
justify-content: space-between;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular;
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.rating-container {
.details {
display: flex;
align-items: center;
gap: 10px;
.content {
display: flex;
align-items: center;
gap: 6px;
.stars {
display: flex;
align-items: center;
}
}
}
}
}
.cards-container-container {
padding: 0px 20px;
.vendor-icon {
font-weight: #{$bold-weight};
font-size: $regular;
}
.stars-container {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: space-between;
}
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
margin: 10px 0;
}
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
.card-container {
width: calc(25% - 23px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000D;
border: 1px solid var(--background-accent-transparent, #E0DFFF80);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
.icon {
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
cursor: pointer;
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
}
.assets-container {
display: flex;
justify-content: space-between;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular ;
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.details {
display: flex;
align-items: center;
gap: 10px;
.content {
display: flex;
align-items: center;
gap: 6px;
}
}
}
.vendor-icon {
display: flex;
align-items: center;
gap: 4px;
font-weight: #{$bold-weight};
font-size: $regular ;
}
.stars-container {
display: flex;
justify-content: space-between;
}
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
border-radius: $border-radius-extra-large ;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
&:hover {
cursor: pointer;
}
}
}
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
border-radius: $border-radius-extra-large;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
&:hover {
cursor: pointer;
}
}
}
}
}
}
}
.assetPreview-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
.assetPreview {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--background-color);
display: flex;
gap: 12px;
z-index: 100;
border-radius: 20px;
}
.assetPreview {
width: 100%;
height: 100%;
background-color: var(--background-color);
display: flex;
gap: 12px;
z-index: 100;
border-radius: 20px;
// Image Preview Section
.image-preview {
width: 50%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
// Asset Details Section
.asset-details-preview {
width: 50%;
padding: 50px 20px;
overflow-y: auto;
}
// Organization Section (Top part with image and details)
.organization {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 10px;
.image {
@include flex-center;
height: 30px;
width: 30px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
}
// Image Preview Section
.image-preview {
width: 50%;
height: 100%;
.organization-details {
display: flex;
flex-direction: column;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.organization-name {
font-weight: bold;
margin-bottom: 5px;
font-weight: #{$bold-weight};
font-size: $regular;
}
.follow {
color: var(--accent-color);
cursor: pointer;
}
}
}
// Asset Details
.asset-details {
margin-top: 20px;
.asset-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
font-weight: #{$bold-weight};
font-size: $large;
}
// Asset Details Section
.asset-details-preview {
width: 50%;
padding: 50px 20px;
overflow-y: auto;
.asset-description {
margin-bottom: 20px;
color: #666;
}
// Organization Section (Top part with image and details)
.organization {
.asset-review {
width: fit-content;
padding: 5px 10px;
display: flex;
align-items: center;
margin-bottom: 20px;
outline: 1px solid #909090cc;
border-radius: 6px;
.asset-rating {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 10px;
gap: 4px;
margin-right: 10px;
font-weight: bold;
position: relative;
.image {
@include flex-center;
height: 30px;
width: 30px;
min-height: 26px;
min-width: 26px;
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
font-weight: #{$bold-weight};
font-size: $regular;
&::after {
margin-left: 5px;
content: "";
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
}
}
.organization-details {
display: flex;
flex-direction: column;
.organization-name {
font-weight: bold;
margin-bottom: 5px;
font-weight: #{$bold-weight};
font-size: $regular ;
}
.follow {
color: var(--accent-color);
cursor: pointer;
}
}
.asset-view {
font-weight: #{$bold-weight};
font-size: $regular;
}
}
// Asset Details
.asset-details {
margin-top: 20px;
.asset-price {
font-size: $xxlarge;
font-weight: bold;
margin-bottom: 20px;
}
}
.asset-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
font-weight: #{$bold-weight};
font-size: $large;
}
// Button Container and Button Styles
.button-container {
display: flex;
gap: 10px;
}
.asset-description {
margin-bottom: 20px;
color: #666;
}
.button {
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
.asset-review {
width: fit-content;
padding: 5px 10px;
display: flex;
align-items: center;
margin-bottom: 20px;
outline: 1px solid #909090CC;
border-radius: 6px;
.asset-rating {
display: flex;
align-items: center;
gap: 4px;
margin-right: 10px;
font-weight: bold;
position: relative;
font-weight: #{$bold-weight};
font-size: $regular ;
&::after {
margin-left: 5px;
content: "";
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
}
}
.asset-view {
font-weight: #{$bold-weight};
font-size: $regular ;
}
}
.asset-price {
font-size: $xxlarge;
font-weight: bold;
margin-bottom: 20px;
}
&:first-child {
outline: 1px solid var(--accent-color);
color: var(--accent-color);
}
// Button Container and Button Styles
.button-container {
display: flex;
gap: 10px;
&:last-child {
background-color: var(--accent-color);
color: var(--background-color);
}
}
.button {
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
&:first-child {
outline: 1px solid var(--accent-color);
color: var(--accent-color);
}
&:last-child {
background-color: var(--accent-color);
color: var(--background-color);
}
}
.closeButton {
color: var(--accent-color);
position: absolute;
top: 18px;
left: 18px;
@include flex-center;
cursor: pointer;
font-size: var(--font-size-large);
}
}
.closeButton {
color: var(--accent-color);
position: absolute;
top: 18px;
left: 18px;
@include flex-center;
cursor: pointer;
font-size: var(--font-size-large);
}
}

114
app/src/styles/components/simulation/simulation.scss Normal file
View File

@@ -0,0 +1,114 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.simulation-player-wrapper {
position: fixed;
bottom: 32px;
left: 50%;
z-index: 2;
transform: translate(-50%, 0);
.simulation-player-container {
.controls-container {
@include flex-center;
gap: 12px;
margin-bottom: 4px;
.simulation-button-container {
@include flex-center;
gap: 2px;
padding: 6px 8px;
min-width: 64px;
background-color: var(--background-color);
border-radius: #{$border-radius-small};
cursor: pointer;
&:hover {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
}
}
}
}
.speed-control-container {
@include flex-center;
gap: 18px;
padding: 5px 16px;
background: var(--background-color);
border-radius: #{$border-radius-medium};
box-sizing: #{$box-shadow-medium};
.min-value,
.max-value {
font-weight: var(--font-weight-bold);
}
.slider-container {
width: 580px;
max-width: 80vw;
height: 28px;
background: var(--background-color-gray);
border-radius: #{$border-radius-small};
position: relative;
padding: 4px 26px;
.custom-slider {
height: 100%;
width: 100%;
position: relative;
.slider-input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 3;
cursor: pointer;
}
.slider-handle {
position: absolute;
width: 42px;
line-height: 20px;
text-align: center;
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-small};
transform: translateX(-50%);
cursor: pointer;
z-index: 2;
}
}
.marker{
position: absolute;
background-color: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;
top: 8px;
}
.marker.marker-10{
left: 10%;
}
.marker.marker-20{
left: 20%;
}
.marker.marker-30{
left: 30%;
}
.marker.marker-40{
left: 40%;
}
.marker.marker-50{
left: 50%;
}
.marker.marker-60{
left: 60%;
}
.marker.marker-70{
left: 70%;
}
.marker.marker-80{
left: 80%;
}
.marker.marker-90{
left: 90%;
}
}
}
}
}

38
app/src/styles/components/tools.scss
View File

@@ -161,25 +161,49 @@
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--accent-color);
background-color: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
bottom: 60px;
left: 50%;
transform: translate(-50%, 0);
transition: background-color 0.3s, transform 0.3s;
color: var(--background-color);
// transform: none;
color: var(--accent-color);
z-index: 100;
isolation: isolate;
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;
}
}
&::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
background: var(--background-color-secondary);
border-radius: #{$border-radius-circle};
z-index: -1;
}
}
@keyframes pulse {
0%{
opacity: 0;
scale: .5;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
scale: 2;
}
}
@keyframes expandWidth {
from {

5
app/src/styles/main.scss
View File

@@ -20,8 +20,9 @@
@use 'components/tools';
@use 'components/visualization/floating/energyConsumed';
@use 'components/visualization/ui/styledWidgets';
@use './components/visualization/floating/common';
@use './components/marketPlace/marketPlace.scss';
@use 'components/visualization/floating/common';
@use 'components/marketPlace/marketPlace';
@use 'components/simulation/simulation';
// layout
@use 'layout/loading';

74
app/src/styles/pages/realTimeViz.scss
View File

@@ -1,5 +1,5 @@
@use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins.scss" as *;
@use "../abstracts/mixins" as *;
// Main Container
.realTime-viz {
@@ -36,7 +36,7 @@
}
}
.zoon-wrapper {
.zone-wrapper {
display: flex;
background-color: var(--background-color);
position: absolute;
@@ -55,11 +55,16 @@
}
.arrow {
background-color: var(--accent-color);
background-color: var(--highlight-accent-color);
color: var(--background-color);
}
.zones-wrapper {
padding: 6px;
display: flex;
gap: 6px;
border-radius: #{$border-radius-medium};
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
@@ -82,28 +87,10 @@
}
}
.zoon-wrapper.bottom {
.zone-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;
@@ -118,7 +105,7 @@
margin: 0 30px;
transition: height 0.3s ease, margin 0.3s ease;
.zoon-wrapper {
.zone-wrapper {
display: flex;
background-color: rgba(224, 223, 255, 0.5);
position: absolute;
@@ -162,7 +149,6 @@
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-radius: 6px;
overflow: visible !important;
z-index: $z-index-tools;
@@ -176,6 +162,7 @@
flex-direction: column;
gap: 10px;
background-color: var(--background-color);
border-radius: #{$border-radius-small};
&::-webkit-scrollbar {
display: none;
@@ -276,8 +263,6 @@
left: 0;
right: 0;
.panel-content {
display: flex;
flex-direction: row;
@@ -319,8 +304,8 @@
}
.playingFlase {
.zoon-wrapper {
bottom: 300px !important;
.zone-wrapper.bottom {
bottom: 300px;
}
}
@@ -329,9 +314,11 @@
position: absolute;
display: flex;
background-color: var(--background-color);
padding: 5px;
border-radius: 8px;
padding: 2px;
border-radius: 2px;
transition: transform 0.3s ease;
box-shadow: #{$box-shadow-medium};
// outline: 1px solid var(--border-color);
.extra-Bs {
display: flex;
@@ -361,13 +348,29 @@
transition: background-color 0.3s ease;
width: 18px;
height: 18px;
display: flex;
justify-content: center;
// align-items: center;
@include flex-center;
background-color: var(--accent-color);
border: none;
color: var(--background-color);
border-radius: 4px;
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
stroke: var(--primary-color);
stroke-width: 2;
}
}
.active {
background: #ffe3e0;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
stroke-width: 2;
}
}
}
&.top {
@@ -493,13 +496,10 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
cursor: pointer;
font-size: 20px;
padding: 6px;
z-index: 10;
height: 100%;
}
.left-arrow {