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

first commit

Browse Source
This commit is contained in:
Vishnu
2025-06-10 15:28:23 +05:30
commit e22a2dc275
699 changed files with 100382 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

589
app/src/styles/layout/compareLayout.scss Normal file
View File

@@ -0,0 +1,589 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.initial-selectLayout-wrapper {
position: fixed;
top: 100px;
right: 40px;
z-index: 10;
.regularDropdown-container {
background: var(--background-color);
}
}
.selectLayout-wrapper {
position: fixed;
left: 40px;
top: 100px;
z-index: 10;
.regularDropdown-container {
background: var(--background-color);
}
}
.compareLayOut-wrapper {
position: fixed;
top: 0;
right: 0;
z-index: 2;
height: 100vh;
background: var(--background-color);
backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
animation: slideInFromRight 0.4s ease-out forwards;
user-select: none;
border-left: 2px solid var(--border-color);
.resizer {
width: 32px;
height: 32px;
@include flex-center;
padding: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
background: var(--background-color);
backdrop-filter: blur(20px);
box-shadow: $box-shadow-heavy;
border-radius: 50%;
cursor: ew-resize;
transition: transform 0.1s ease;
z-index: 100;
}
.chooseLayout-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
.compare-layout-canvas-container {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
right: 0;
}
.chooseLayout-wrapper {
background: var(--background-color);
backdrop-filter: blur(20px);
padding: 20px;
border-radius: 8px;
box-shadow: $box-shadow-medium;
max-width: 80%;
text-align: center;
position: relative;
.icon {
width: 100%;
margin-bottom: 15px;
text-align: center;
svg {
width: 100%;
}
}
.value {
margin-bottom: 15px;
font-size: var(--font-size-small);
font-weight: 500;
color: var(--text-primary);
}
button {
display: block;
margin: 0 auto;
padding: 8px 16px;
background: var(--background-color-button);
color: var(--icon-default-color-active);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: translateY(-1px);
}
}
.displayLayouts-container {
max-width: 170px;
height: auto;
background: var(--background-color);
backdrop-filter: blur(20px);
padding: 6px;
border-radius: 8px;
box-shadow: $box-shadow-medium;
position: absolute;
right: 0;
top: 100%;
transform: translate(50%, -10px);
display: flex;
flex-direction: column;
gap: 6px;
.header {
text-align: left;
padding-top: 6px;
padding-left: 6px;
}
.search-wrapper {
padding: 6px 0;
.search-container {
padding: 0;
border-radius: 6px;
}
}
.layouts-container {
.layout {
padding: 6px 0;
}
.layout-wrapper {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 0 10px;
background: none;
width: 100%;
&:hover {
background-color: var(--highlight-text-color) !important;
border-radius: 4px;
.layout {
color: var(--text-button-color) !important;
}
svg {
path {
fill: var(--text-button-color) !important;
}
}
}
}
}
}
}
}
}
.compare-result-container {
display: flex;
flex-direction: column;
gap: 6px;
position: fixed;
bottom: 40px;
width: 100%;
min-height: 200px;
z-index: 10;
background: var(--background-color-secondary);
backdrop-filter: blur(20px);
padding: 18px 8px;
.header {
width: fit-content;
background-color: var(--background-color-solid);
color: var(--background-color-accent);
padding: 6px 10px;
border-radius: 6px;
}
.compare-result-wrapper {
display: flex;
gap: 12px;
.comparisionCard {
position: relative;
flex: 1;
width: auto;
max-height: 200px;
background: var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
border-radius: 12px;
padding: 8px 12px;
overflow: hidden;
}
.performanceResult-wrapper {
min-width: 328px;
flex: 0;
position: relative;
padding-right: 65px;
.header {
display: flex;
gap: 12px;
align-items: center;
}
.metrics-container {
display: flex;
gap: 12px;
height: 100%;
.metrics-left {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
.metric {
.metric-label {
display: flex;
align-items: center;
gap: 6px;
span {
display: flex;
}
}
.metric-value {
padding-top: 6px;
font-size: var(--font-size-xlarge);
color: var(--background-color-accent);
font-weight: 600;
}
}
.label {
padding-bottom: 68px;
}
}
.metrics-right {
height: fit-content;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 2px;
overflow: visible;
margin: auto 0;
.metric-wrapper {
position: relative;
width: 64px;
height: 50px;
overflow: visible; // allow content like labels to overflow
&:nth-child(1) {
.metric-label {
top: -57%;
left: 220%;
}
&::after {
content: "";
position: absolute;
top: -100%;
left: 50%;
width: 100%; // Required for visible shape
height: 40px;
background-color: #b7b7c6;
// Custom polygon shape (adjust if needed)
clip-path: polygon(96% 52%,
96% 54%,
45% 53%,
3% 100%,
0 100%,
42% 52%);
z-index: 0; // Behind any inner content
}
}
// Optional: content above the shape
>* {
position: relative;
z-index: 1;
}
&:nth-child(2) {
grid-column-start: 1;
grid-row-start: 2;
.metric-label {
white-space: normal;
width: 50px;
left: 230%;
}
}
&:nth-child(3) {
grid-row: span 2 / span 2;
grid-column-start: 2;
grid-row-start: 1;
margin-top: 40%;
left: -16px;
position: relative;
}
}
.metric-label {
position: absolute;
top: 0px;
left: 0%;
white-space: nowrap;
transform: translate(-50%, -50%);
font-size: 10px;
z-index: 1;
}
.metric {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background-color, wheat);
clip-path: polygon(25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%,
0% 50%);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
z-index: 0;
}
// Content stays above the shape
>* {
position: relative;
z-index: 1;
}
}
}
}
.simulation-tag {
background: var(--background-color-button);
color: var(--icon-default-color-active);
position: absolute;
bottom: 0;
right: 0;
padding: 10px 5px;
border-radius: 12px 0 0 0;
}
}
}
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.energy-usage {
position: relative;
.energy-usage-wrapper {
h4 {
font-weight: 600;
}
.value {
padding-top: 25px;
font-size: var(--font-size-xxxlarge);
color: var(--background-color-accent);
}
}
.simulation-details {
position: absolute;
bottom: 12px;
right: 12px;
.simulation-wrapper {
display: flex;
align-items: center;
gap: 6px;
.icon {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--background-color-accent);
}
}
}
.chart {
width: 90%;
position: absolute;
top: 10px;
left: 0;
}
}
.throughPutCard-container {
.layers-wrapper {
padding: 20px 10px;
height: 100%;
width: 100%;
display: flex;
justify-content: space-between;
.layer-wrapper {
display: flex;
flex-direction: column;
&:last-child {
justify-content: end;
}
}
}
.chart {
width: 80%;
height: 90%;
position: absolute;
bottom: 0;
left: 0;
}
}
.cycle-time-container {
.cycle-main {
display: flex;
justify-content: space-between;
height: 100%;
.layers-wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.layers {
display: flex;
flex-direction: column;
gap: 4px;
.layer-name {
color: var(--background-color-accent);
}
.layer-time {
font-size: var(--font-size-large);
}
.layer-profit {
color: #14ca44;
text-align: end;
span {
color: #14ca44;
}
}
}
}
}
}
.overallDowntime-container {
.totalDownTime-wrapper {
display: flex;
.totalDownTime {
width: 70%;
background: var(--background-color-secondary);
backdrop-filter: blur(20px);
border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 8px 10px;
margin: 44px 0;
.totalDownTime-right {
display: flex;
flex-direction: column;
gap: 6px;
}
.totalDownTime-left {
display: flex;
align-items: center;
gap: 6px;
.value {
font-size: var(--font-size-xlarge);
color: var(--background-color-button);
}
}
}
.chart {
width: 30%;
position: relative;
}
}
}
.overallScrapRate {
.overallScrapRate-wrapper {
display: flex;
.overallScrapRate-value {
width: 50%;
display: flex;
flex-direction: column;
gap: 6px;
margin: 40px 0;
.overallScrapRate-key {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.chart {
width: 50%;
position: relative;
}
}
}

265
app/src/styles/layout/compareLayoutPopUp.scss Normal file
View File

@@ -0,0 +1,265 @@
.compare-container {
width: 100vw;
height: 100vh;
background: var(--background-color-secondary);
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
.compare-wrapper {
min-width: 312px;
min-height: 363px;
background: var(--background-color);
padding: 20px;
border-radius: 24px;
display: flex;
flex-direction: column;
gap: 12px;
backdrop-filter: blur(50px);
outline: 1px solid var(--border-color);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
position: relative;
.grid-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
border-radius: 20px;
position: relative;
background-size: 52px 52px;
background-repeat: repeat;
>* {
position: relative;
z-index: 2;
}
.header {
text-align: center;
font-size: var(--font-size-small);
margin-bottom: 8px;
}
.cards-container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
.card {
background: var(--background-color);
backdrop-filter: blur(20px);
width: 100px;
height: 100px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: absolute;
}
}
.card-layout-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: 20px;
outline: 1px solid var(--border-color);
}
.card-layout-container {
width: 130px;
height: 130px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
border-radius: 12px;
background: var(--background-color);
.tab-header {
display: flex;
justify-content: space-between;
width: 100%;
.label-tab {
font-size: var(--font-size-small);
}
.status {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #5a33a3;
}
}
.skeleton-wrapper {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
align-items: center;
.skeleton {
height: 2.662480115890503px;
&:nth-child(1) {
width: 40%;
}
&:nth-child(2) {
width: 70%;
}
&:nth-child(3) {
width: 40%;
}
}
}
}
.button-wrapper {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
.button-group {
display: flex;
gap: 8px;
.btn {
padding: 10px 16px;
font-size: var(--font-size-small);
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
.save {
background-color: #6f42c1;
color: white;
box-shadow: 0px 2px 8px rgba(111, 66, 193, 0.4);
&:hover {
background-color: #5a33a3;
}
}
.replace {
border: 1px solid #6f42c1;
color: #6f42c1;
background: transparent;
&:hover {
background-color: rgba(111, 66, 193, 0.08);
}
}
}
.cancel {
color: red;
font-size: var(--font-size-small);
cursor: pointer;
}
}
}
.footer {
font-size: var(--font-size-small);
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
}
}
.cards-container {
margin-top: 30px;
position: relative;
width: 100%;
height: 150px;
.card {
position: absolute;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1;
&:nth-child(1) {
left: -10px;
transform: scale(0.8);
}
&:nth-child(2) {
right: -10px;
transform: scale(0.8);
}
&:nth-child(4) {
left: 20px;
transform: scale(1);
}
&:nth-child(5) {
right: 20px;
transform: scale(1);
}
}
.card-layout-wrapper {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: 20px;
outline: 1px solid var(--border-color);
}
}

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

@@ -0,0 +1,102 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.loading-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color-solid);
&.comparisionLoading {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 50vw;
}
.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: var(--faint-gradient-color);
height: 50vh;
width: 50vw;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: #{$border-radius-circle};
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 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.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: 60%;
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;
}
}
}
}
}

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

@@ -0,0 +1,150 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.collaboration-popup-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color-secondary);
@include flex-center;
.collaboration-popup-container {
max-width: 50vw;
width: 520px;
background: var(--background-color);
border-radius: #{$border-radius-large};
backdrop-filter: blur(15px);
outline: 1px solid var(--border-color);
padding: 6px;
section{
margin: 0;
}
.header {
@include flex-space-between;
padding: 12px;
.content {
@include flex-center;
gap: 8px;
.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;
max-height: 50vh;
overflow: auto;
.user-header {
margin-bottom: 12px;
}
.general-access-container,
.users-list-container {
.user-list-container,
.team-container,
.you-container {
@include flex-space-between;
padding: 8px;
.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 {
@include flex-center;
gap: 6px;
color: var(--text-color);
.user-profile{
height: 24px;
width: 24px;
text-align: center;
line-height: 25px;
background: var(--background-color-accent);
color: var(--text-color);
border-radius: #{$border-radius-circle};
}
}
.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;
}
}
}
}
}
}
.collab-user-live-container{
@include flex-center;
flex-direction: column;
gap: 6px;
transform: translateY(15px);
.user-image-container{
height: 30px;
width: 30px;
border-radius: #{$border-radius-circle};
overflow: hidden;
.user-image{
height: 100%;
width: 100%;
object-fit: cover;
vertical-align: top;
pointer-events: none;
}
}
.user-name{
padding: 4px 6px;
border-radius: #{$border-radius-small};
color: white;
font-size: var(--font-size-regulaar);
font-weight: var(--font-size-regulaar);
text-transform: capitalize;
white-space: nowrap;
}
}

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

File diff suppressed because it is too large Load Diff

90
app/src/styles/layout/skeleton.scss vendored Normal file
View File

@@ -0,0 +1,90 @@
.skeleton-wrapper {
margin: 0 auto;
width: 100%;
.skeleton {
background: var(--background-color-gray);
border-radius: 8px;
position: relative;
overflow: hidden;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.39) 60%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%);
animation: shimmer 1.5s infinite;
}
}
.skeleton-header {
margin-bottom: 20px;
.skeleton-title {
width: 100%;
height: 25px;
margin-bottom: 12px;
}
.skeleton-subtitle {
width: 100%;
height: 4px;
}
}
.skeleton-content {
display: flex;
flex-direction: column;
gap: 16px;
.skeleton-card {
width: 100%;
height: 15px;
}
}
}
.asset-category-title{
width: 60%;
height: 12px;
margin-bottom: 12px;
margin-top: 4px;
}
.skeleton-content-asset{
display: flex;
height: calc(95px * 2 + 10px);
gap: 10px;
flex-wrap: wrap;
.skeleton-content {
gap: 8px;
flex-direction: column;
min-width: 122px;
min-height: 95px;
.asset-name {
width: 40%;
height: 10px;
}
.asset {
flex: 1;
width: 100%;
height: 100%;
}
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}

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

@@ -0,0 +1,89 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.toast-container {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
z-index: #{$z-index-ui-highest};
}
.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: #{$border-radius-medium};
color: var(--primary-color);
cursor: pointer;
animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
}
.toast.success {
background: #4caf50;
}
.toast.error {
background: #f44336;
}
.toast.info {
background: #2196f3;
}
.toast.warning {
background: #ff9800;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}