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

Merge branch 'main' into rtViz

Browse Source
This commit is contained in:
Gomathi
2025-03-27 18:10:13 +05:30
parent 2591de38da 2e7fd39979
commit 40589b2fd8
51 changed files with 2815 additions and 14707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/src/styles/components/input.scss
View File

@@ -280,28 +280,24 @@ input {
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #ffffff;
border: 1px solid #cccccc;
top: 110%;
right: -16px;
background-color: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-shadow: #{$box-shadow-medium};
z-index: 1000;
min-width: 200px;
overflow: auto;
max-height: 600px;
max-height: 400px;
.dropdown-content {
display: flex;
flex-direction: column;
gap: 6px;
.nested-dropdown {
// &:first-child{
margin-left: 0;
// }
}
padding: 10px;
}
@@ -309,13 +305,13 @@ input {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #000000;
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #f0f0f0;
background-color: var(--background-color);
}
}
@@ -329,15 +325,20 @@ input {
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
color: #000000;
color: var(--text-color);
transition: background-color 0.3s ease;
border-radius: #{$border-radius-small};
.arrow-container{
@include flex-center;
}
&:hover {
background-color: #f0f0f0;
background-color: var(--background-color);
}
&.open {
background-color: #e0e0e0;
color: var(--accent-color);
background-color: var(--highlight-accent-color);
}
.icon {
@@ -349,7 +350,7 @@ input {
.submenu {
margin-top: 5px;
padding-left: 20px;
border-left: 2px solid #cccccc;
border-left: 2px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 6px;
@@ -576,26 +577,26 @@ input {
color: var(--text-disabled);
}
}
.entered-emails{
.entered-emails {
@include flex-center;
gap: 2px;
background: var(--background-color-gray);
padding: 0 4px;
border-radius: #{$border-radius-large};
span{
span {
height: 14px;
width: 14px;
line-height: 12px;
text-align: center;
border-radius: #{$border-radius-small};
&:hover{
&:hover {
background: var(--accent-color);
color: var(--primary-color);
}
}
}
}
.invite-button{
.invite-button {
padding: 4px 12px;
border-radius: #{$border-radius-large};
background: var(--accent-color);

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

@@ -2,186 +2,356 @@
@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: 100px 50px;
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 100px 50px;
padding-bottom: 32px;
backdrop-filter: blur(6px);
.marketplace-container {
padding: 20px 2px;
height: calc(100vh - 120px);
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
.marketplace-container {
position: relative;
padding: 20px 2px;
height: 100%;
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
}
.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: 12px;
.search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large;
.search-container {
border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large;
input {
border: none !important;
outline: none;
}
}
}
.regularDropdown-container {
max-width: 159px;
}
.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;
}
}
}
.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;
.cards-container-container {
padding: 0px 20px;
display: flex;
flex-direction: column;
gap: 6px;
.filter-search-container {
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
}
.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);
}
.image-container {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
}
.search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large ;
.assets-container {
display: flex;
justify-content: space-between;
.search-container {
border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large ;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
input {
border: none !important;
outline: none;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular;
}
}
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.regularDropdown-container {
max-width: 159px;
}
.details {
display: flex;
align-items: center;
gap: 10px;
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
}
.rating-container {
.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;
}
.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);
}
.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 {
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%;
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);
}
.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 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-description {
margin-bottom: 20px;
color: #666;
}
.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;
}
}
// Button Container and Button Styles
.button-container {
display: flex;
gap: 10px;
}
.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);
}
}

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

2
app/src/styles/components/visualization/ui/styledWidgets.scss
View File

@@ -8,7 +8,7 @@
flex-direction: column;
gap: 6px;
width: 100%;
min-width: 250px;
// min-width: 1450px;
.header {
display: flex;
justify-content: center;