@chipstcp/upyog-css 1.0.0

package/src/pages/citizen/citizenNewLogin.scss

@@ -0,0 +1,352 @@
+/* Main Container - Full height viewport */
+.login-page-cover {
+  width: 100%;
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  /* Removed overflow: hidden to prevent scrolling issues */
+}
+
+/* Container - Full height split layout */
+.login-container {
+  width: 100%;
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
+  max-width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+/* Left Panel - Hero Section takes full height */
+.login-hero-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #5b68f0 0%, #7b5fc7 100%);
+  color: white;
+  padding: 60px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.hero-content {
+  max-width: 500px;
+  text-align: center;
+}
+
+.hero-icon-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  backdrop-filter: blur(10px);
+}
+
+.hero-icon-circle svg {
+  width: 50px;
+  height: 50px;
+  color: white;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  margin-bottom: 50px;
+  opacity: 0.95;
+}
+
+.hero-features {
+  display: flex;
+  justify-content: space-around;
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.feature-icon {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.feature-icon:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-5px);
+}
+
+.feature-icon svg {
+  color: white;
+}
+
+.feature-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Login Wrapper - Matches reference image design */
+.login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+.login-form-header {
+  margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 4px;
+    position: relative;
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0b0c0c;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 0.95rem;
+  color: #686677;
+  margin: 0;
+}
+
+/* Form Elements */
+.label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 25px;
+  color: #686677;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.label span {
+  color: #ff1515;
+}
+
+.language-wrapper,
+.location-wrapper,
+.input-wrapper {
+  width: 100%;
+}
+
+.location-wrapper .select {
+  display: flex;
+  align-items: center;
+  border: 1px solid #b4b4b4 !important;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  border-radius: 8px;
+}
+
+.location-wrapper .select-active {
+  border-radius: 8px !important;
+}
+
+.input-wrapper .submit-bar,
+.input-wrapper .submit-bar-disabled {
+  width: 100%;
+}
+
+.input-wrapper .card-label {
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: 25px !important;
+  color: #686677 !important;
+}
+
+.input-wrapper.hide-submit-buttons + .submit-bar,
+.input-wrapper.hide-submit-buttons + .submit-bar-disabled {
+  display: none !important;
+}
+
+/* Account Link */
+.account-link {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  margin-top: 24px;
+  color: #0b0c0c;
+}
+
+.link {
+  color: #5b68f0;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: #7b5fc7;
+  text-decoration: underline;
+}
+
+/* OTP Section */
+.resendIn {
+  font-size: 16px;
+  font-weight: 500;
+  color: #686677;
+  text-align: right;
+}
+
+.resendIn span {
+  color: #5b68f0;
+}
+
+.resend {
+  text-align: right;
+  cursor: pointer;
+  font-weight: 700;
+  color: #5b68f0;
+}
+
+/* Register Login Wrapper - For registration page with same left panel */
+.register-login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+  min-height: calc(100vh - 56px);
+}
+
+/* Responsive Design - Hide left panel on tablets and mobile */
+@media (max-width: 1024px) {
+  .login-hero-panel {
+    display: none;
+  }
+
+  .login-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .login-form-panel {
+    background: transparent;
+  }
+
+  .login-wrapper,
+  .register-login-wrapper {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@media (max-width: 768px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 30px 24px;
+    max-width: 95%;
+  }
+
+  .login-title {
+    font-size: 1.75rem;
+  }
+
+  .login-subtitle {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 24px 20px;
+  }
+
+  .login-title {
+    font-size: 1.5rem;
+  }
+
+  .login-form-header {
+    margin-bottom: 24px;
+  }
+
+
+  .label,
+  .account-link {
+    font-size: 14px;
+  }
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 100%;
+    }
+    .register-login-wrapper{
+         width: 100%;
+    }
+}
+@media (min-width: 769px) and (max-width : 1024px) {
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}

package/src/pages/citizen/container.scss

@@ -0,0 +1,33 @@
+.citizen-home-footer {
+  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
+  img {
+    @apply ml-sm;
+  }
+}
+
+.employee .citizen-home-footer {
+  @apply fixed bottom-0;
+}
+.fill-path-primary-main {
+  path {
+    fill: #1359C8;
+  }
+}
+
+.obps-search {
+  margin: 8px;
+}
+.font-Weigth-bold {
+  font-weight: 600 !important;
+      margin-top: 20px !important;
+}
+
+.obps-citizen-search-header{
+  background:#ffffff;
+  padding: 20px 0px;
+  color: #00000099;
+  padding: 10px;
+}
+.obps-citizen-card-paragraph{
+  text-align: center;
+}

package/src/pages/citizen/loaderMessage.scss

@@ -0,0 +1,342 @@
+/* ============================================
+   SPACESHIP LOADER - Centered & Responsive
+   ============================================ */
+
+.loader-message {
+   overflow: hidden;
+   position: fixed;
+   top: 0;
+   left: 0;
+   height: 100vh;
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+   font-weight: 600;
+   font-size: 14px;
+   color: #000;
+   background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 50%, #dbeafe 100%);
+   z-index: 9999;
+}
+
+.loader-message .body {
+   position: relative;
+   animation: speeder .4s linear infinite;
+}
+
+.loader-message .body > span {
+   height: 5px;
+   width: 35px;
+   background: #0d43a7;
+   position: absolute;
+   top: -19px;
+   left: -40px;
+   border-radius: 2px 10px 1px 0;
+}
+
+.loader-message .base span {
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 6px solid transparent;
+   border-right: 100px solid #1e3a5f;
+   border-bottom: 6px solid transparent;
+}
+
+.loader-message .base span::before {
+   content: "";
+   height: 22px;
+   width: 22px;
+   border-radius: 50%;
+   background: #0d43a7;
+   position: absolute;
+   right: -110px;
+   top: -16px;
+}
+
+.loader-message .base span::after {
+   content: "";
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 0 solid transparent;
+   border-right: 55px solid #1e3a5f;
+   border-bottom: 16px solid transparent;
+   top: -16px;
+   right: -98px;
+}
+
+.loader-message .face {
+   position: absolute;
+   height: 12px;
+   width: 20px;
+   background: #0d43a7;
+   border-radius: 20px 20px 0 0;
+   transform: rotate(-40deg);
+   right: -125px;
+   top: -15px;
+}
+
+.loader-message .face::after {
+   content: "";
+   height: 12px;
+   width: 12px;
+   background: #0d43a7;
+   right: 4px;
+   top: 7px;
+   position: absolute;
+   transform: rotate(40deg);
+   transform-origin: 50% 50%;
+   border-radius: 0 0 0 2px;
+}
+
+.loader-message .body > span > span {
+   width: 30px;
+   height: 1px;
+   background: #0d43a7;
+   position: absolute;
+}
+
+.loader-message .body > span > span:nth-child(1) {
+   top: 0;
+   animation: fazer1 .2s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(2) {
+   top: 3px;
+   animation: fazer2 .4s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(3) {
+   top: 1px;
+   animation: fazer3 .4s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .body > span > span:nth-child(4) {
+   top: 4px;
+   animation: fazer4 1s linear infinite;
+   animation-delay: -1s;
+}
+
+@keyframes fazer1 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -80px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer2 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -100px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer3 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -50px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer4 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -150px;
+      opacity: 0;
+   }
+}
+
+@keyframes speeder {
+   0% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   10% {
+      transform: translate(-1px, -3px) rotate(-1deg);
+   }
+   20% {
+      transform: translate(-2px, 0px) rotate(1deg);
+   }
+   30% {
+      transform: translate(1px, 2px) rotate(0deg);
+   }
+   40% {
+      transform: translate(1px, -1px) rotate(1deg);
+   }
+   50% {
+      transform: translate(-1px, 3px) rotate(-1deg);
+   }
+   60% {
+      transform: translate(-1px, 1px) rotate(0deg);
+   }
+   70% {
+      transform: translate(3px, 1px) rotate(-1deg);
+   }
+   80% {
+      transform: translate(-2px, -1px) rotate(1deg);
+   }
+   90% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   100% {
+      transform: translate(1px, -2px) rotate(-1deg);
+   }
+}
+
+.loader-message .longfazers {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   top: 0;
+   left: 0;
+   pointer-events: none;
+}
+
+.loader-message .longfazers span {
+   position: absolute;
+   height: 2px;
+   width: 20%;
+   background: linear-gradient(90deg, transparent, #0d43a7, transparent);
+}
+
+.loader-message .longfazers span:nth-child(1) {
+   top: 20%;
+   animation: lf .6s linear infinite;
+   animation-delay: -5s;
+}
+
+.loader-message .longfazers span:nth-child(2) {
+   top: 40%;
+   animation: lf2 .8s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .longfazers span:nth-child(3) {
+   top: 60%;
+   animation: lf3 .6s linear infinite;
+}
+
+.loader-message .longfazers span:nth-child(4) {
+   top: 80%;
+   animation: lf4 .5s linear infinite;
+   animation-delay: -3s;
+}
+
+.loader-message .message {
+   position: absolute;
+   font-family: 'Roboto', 'Open Sans', sans-serif;
+   font-weight: 600;
+   font-size: 16px;
+   text-transform: uppercase;
+   letter-spacing: 2px;
+   bottom: 35%;
+   left: 50%;
+   transform: translateX(-50%);
+   color: #0d43a7;
+   text-align: center;
+   white-space: nowrap;
+}
+
+@keyframes lf {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf2 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf3 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf4 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+/* ============================================
+   RESPONSIVE STYLES
+   ============================================ */
+
+/* Tablet */
+@media screen and (max-width: 768px) {
+   .loader-message .body {
+      transform: scale(0.85);
+   }
+   
+   .loader-message .message {
+      font-size: 14px;
+      letter-spacing: 1.5px;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1.5px;
+   }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+   .loader-message .body {
+      transform: scale(0.7);
+   }
+   
+   .loader-message .message {
+      font-size: 12px;
+      letter-spacing: 1px;
+      bottom: 38%;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1px;
+      width: 25%;
+   }
+}
+
+/* Small Mobile */
+@media screen and (max-width: 320px) {
+   .loader-message .body {
+      transform: scale(0.6);
+   }
+   
+   .loader-message .message {
+      font-size: 10px;
+      letter-spacing: 0.5px;
+      bottom: 40%;
+   }
+}

package/src/pages/citizen/payment/payment-type.scss

@@ -0,0 +1,3 @@
+.payment-amount-info{
+    @apply flex justify-between;
+}