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

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