diff --git a/dashboard/index.html b/dashboard/index.html index b48e96b1124..fe651f8a139 100644 --- a/dashboard/index.html +++ b/dashboard/index.html @@ -4,7 +4,7 @@ - Frappe Cloud + OptiBizPro Cloud @@ -12,7 +12,7 @@ diff --git a/dashboard/public/favicon.png b/dashboard/public/favicon.png index b51db82f82b..7c0346a536a 100644 Binary files a/dashboard/public/favicon.png and b/dashboard/public/favicon.png differ diff --git a/dashboard/src/assets/amex.png b/dashboard/src/assets/amex.png new file mode 100644 index 00000000000..af3277e0769 Binary files /dev/null and b/dashboard/src/assets/amex.png differ diff --git a/dashboard/src/assets/card.css b/dashboard/src/assets/card.css new file mode 100644 index 00000000000..6d5781526e4 --- /dev/null +++ b/dashboard/src/assets/card.css @@ -0,0 +1,621 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap"); + body { + background: #ddeefc; + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; +} + * { + box-sizing: border-box; +} + *:focus { + outline: none; +} + .wrapper { + min-height: 100vh; + display: flex; + padding: 50px 15px; +} + @media screen and (max-width: 700px), (max-height: 500px) { + .wrapper { + flex-wrap: wrap; + flex-direction: column; + } +} + .card-form { + max-width: 570px; + margin: auto; + width: 100%; +} + @media screen and (max-width: 576px) { + .card-form { + margin: 0 auto; + } +} + .card-form__inner { + background: #fff; + /* // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2); + */ + box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4); + border-radius: 10px; + padding: 35px; + padding-top: 180px; +} + @media screen and (max-width: 480px) { + .card-form__inner { + padding: 25px; + padding-top: 165px; + } +} + @media screen and (max-width: 360px) { + .card-form__inner { + padding: 15px; + padding-top: 165px; + } +} + .card-form__row { + display: flex; + align-items: flex-start; +} + @media screen and (max-width: 480px) { + .card-form__row { + flex-wrap: wrap; + } +} + .card-form__col { + flex: auto; + margin-right: 35px; +} + .card-form__col:last-child { + margin-right: 0; +} + @media screen and (max-width: 480px) { + .card-form__col { + margin-right: 0; + flex: unset; + width: 100%; + margin-bottom: 20px; + } + .card-form__col:last-child { + margin-bottom: 0; + } +} + .card-form__col.-cvv { + max-width: 150px; +} + @media screen and (max-width: 480px) { + .card-form__col.-cvv { + max-width: initial; + } +} + .card-form__group { + display: flex; + align-items: flex-start; + flex-wrap: wrap; +} + .card-form__group .card-input__input { + flex: 1; + margin-right: 15px; +} + .card-form__group .card-input__input:last-child { + margin-right: 0; +} + .card-form__button { + width: 100%; + height: 55px; + background: #2364d2; + border: none; + border-radius: 5px; + font-size: 22px; + font-weight: 500; + font-family: "Source Sans Pro", sans-serif; + box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3); + color: #fff; + margin-top: 20px; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-form__button { + margin-top: 10px; + } +} + .card-item { + max-width: 430px; + height: 270px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 2; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item { + max-width: 310px; + height: 220px; + width: 90%; + } +} + @media screen and (max-width: 360px) { + .card-item { + height: 180px; + } +} + .card-item.-active .card-item__side.-front { + transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg); +} + .card-item.-active .card-item__side.-back { + transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg); + /* // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65); + */ +} + .card-item__focus { + position: absolute; + z-index: 3; + border-radius: 5px; + left: 0; + top: 0; + width: 100%; + height: 100%; + transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85); + opacity: 0; + pointer-events: none; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.65); +} + .card-item__focus:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + background: #08142f; + height: 100%; + border-radius: 5px; + filter: blur(25px); + opacity: 0.5; +} + .card-item__focus.-active { + opacity: 1; +} + .card-item__side { + border-radius: 15px; + overflow: hidden; + /* // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5); + */ + box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55); + transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85); + backface-visibility: hidden; + height: 100%; +} + .card-item__side.-back { + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg); + z-index: 2; + padding: 0; + /* // background-color: #2364d2; + // background-image: linear-gradient( // 43deg, // #4158d0 0%, // #8555c7 46%, // #2364d2 100% // ); + */ + height: 100%; +} + .card-item__side.-back .card-item__cover { + transform: rotateY(-180deg); +} + .card-item__bg { + max-width: 100%; + display: block; + max-height: 100%; + height: 100%; + width: 100%; + object-fit: cover; +} + .card-item__cover { + height: 100%; + background-color: #1c1d27; + position: absolute; + height: 100%; + background-color: #1c1d27; + left: 0; + top: 0; + width: 100%; + border-radius: 15px; + overflow: hidden; +} + .card-item__cover:after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(6, 2, 29, 0.45); +} + .card-item__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 40px; + padding: 0 10px; +} + @media screen and (max-width: 480px) { + .card-item__top { + margin-bottom: 25px; + } +} + @media screen and (max-width: 360px) { + .card-item__top { + margin-bottom: 15px; + } +} + .card-item__chip { + width: 60px; +} + @media screen and (max-width: 480px) { + .card-item__chip { + width: 50px; + } +} + @media screen and (max-width: 360px) { + .card-item__chip { + width: 40px; + } +} + .card-item__type { + height: 45px; + position: relative; + display: flex; + justify-content: flex-end; + max-width: 100px; + margin-left: auto; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item__type { + height: 40px; + max-width: 90px; + } +} + @media screen and (max-width: 360px) { + .card-item__type { + height: 30px; + } +} + .card-item__typeImg { + max-width: 100%; + object-fit: contain; + max-height: 100%; + object-position: top right; +} + .card-item__info { + color: #fff; + width: 100%; + max-width: calc(100% - 85px); + padding: 10px 15px; + font-weight: 500; + display: block; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__info { + padding: 10px; + } +} + .card-item__holder { + opacity: 0.7; + font-size: 13px; + margin-bottom: 6px; +} + @media screen and (max-width: 480px) { + .card-item__holder { + font-size: 12px; + margin-bottom: 5px; + } +} + .card-item__wrapper { + font-family: "Source Code Pro", monospace; + padding: 25px 15px; + position: relative; + z-index: 4; + height: 100%; + text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8); + user-select: none; +} + @media screen and (max-width: 480px) { + .card-item__wrapper { + padding: 20px 10px; + } +} + .card-item__name { + font-size: 18px; + line-height: 1; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; +} + @media screen and (max-width: 480px) { + .card-item__name { + font-size: 16px; + } +} + .card-item__nameItem { + display: inline-block; + min-width: 8px; + position: relative; +} + .card-item__number { + font-weight: 500; + line-height: 1; + color: #fff; + font-size: 27px; + margin-bottom: 35px; + display: inline-block; + padding: 10px 15px; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__number { + font-size: 21px; + margin-bottom: 15px; + padding: 10px 10px; + } +} + @media screen and (max-width: 360px) { + .card-item__number { + font-size: 19px; + margin-bottom: 10px; + padding: 10px 10px; + } +} + .card-item__numberItem { + width: 16px; + display: inline-block; +} + .card-item__numberItem.-active { + width: 30px; +} + @media screen and (max-width: 480px) { + .card-item__numberItem { + width: 13px; + } + .card-item__numberItem.-active { + width: 16px; + } +} + @media screen and (max-width: 360px) { + .card-item__numberItem { + width: 12px; + } + .card-item__numberItem.-active { + width: 8px; + } +} + .card-item__content { + color: #fff; + display: flex; + align-items: flex-start; +} + .card-item__date { + flex-wrap: wrap; + font-size: 18px; + margin-left: auto; + padding: 10px; + display: inline-flex; + width: 80px; + white-space: nowrap; + flex-shrink: 0; + cursor: pointer; +} + @media screen and (max-width: 480px) { + .card-item__date { + font-size: 16px; + } +} + .card-item__dateItem { + position: relative; +} + .card-item__dateItem span { + width: 22px; + display: inline-block; +} + .card-item__dateTitle { + opacity: 0.7; + font-size: 13px; + padding-bottom: 6px; + width: 100%; +} + @media screen and (max-width: 480px) { + .card-item__dateTitle { + font-size: 12px; + padding-bottom: 5px; + } +} + .card-item__band { + background: rgba(0, 0, 19, 0.8); + width: 100%; + height: 50px; + margin-top: 30px; + position: relative; + z-index: 2; +} + @media screen and (max-width: 480px) { + .card-item__band { + margin-top: 20px; + } +} + @media screen and (max-width: 360px) { + .card-item__band { + height: 40px; + margin-top: 10px; + } +} + .card-item__cvv { + text-align: right; + position: relative; + z-index: 2; + padding: 15px; +} + .card-item__cvv .card-item__type { + opacity: 0.7; +} + @media screen and (max-width: 360px) { + .card-item__cvv { + padding: 10px 15px; + } +} + .card-item__cvvTitle { + padding-right: 10px; + font-size: 15px; + font-weight: 500; + color: #fff; + margin-bottom: 5px; +} + .card-item__cvvBand { + height: 45px; + background: #fff; + margin-bottom: 30px; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 10px; + color: #1a3b5d; + font-size: 18px; + border-radius: 4px; + box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35); +} + @media screen and (max-width: 480px) { + .card-item__cvvBand { + height: 40px; + margin-bottom: 20px; + } +} + @media screen and (max-width: 360px) { + .card-item__cvvBand { + margin-bottom: 15px; + } +} + .card-list { + margin-bottom: -130px; +} + @media screen and (max-width: 480px) { + .card-list { + margin-bottom: -120px; + } +} + .card-input { + margin-bottom: 20px; +} + .card-input__label { + font-size: 14px; + margin-bottom: 5px; + font-weight: 500; + color: #1a3b5d; + width: 100%; + display: block; + user-select: none; +} + .card-input__input { + width: 100%; + height: 50px; + border-radius: 5px; + box-shadow: none; + border: 1px solid #ced6e0; + transition: all 0.3s ease-in-out; + font-size: 18px; + padding: 5px 15px; + background: none; + color: #1a3b5d; + font-family: "Source Sans Pro", sans-serif; +} + .card-input__input:hover, .card-input__input:focus { + border-color: #3d9cff; +} + .card-input__input:focus { + box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35); +} + .card-input__input.-select { + -webkit-appearance: none; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC'); + background-size: 12px; + background-position: 90% center; + background-repeat: no-repeat; + padding-right: 30px; +} + .slide-fade-up-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} + .slide-fade-up-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} + .slide-fade-up-enter { + opacity: 0; + transform: translateY(15px); + pointer-events: none; +} + .slide-fade-up-leave-to { + opacity: 0; + transform: translateY(-15px); + pointer-events: none; +} + .slide-fade-right-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} + .slide-fade-right-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} + .slide-fade-right-enter { + opacity: 0; + transform: translateX(10px) rotate(45deg); + pointer-events: none; +} + .slide-fade-right-leave-to { + opacity: 0; + transform: translateX(-10px) rotate(45deg); + pointer-events: none; +} + .github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + text-align: center; + transition: all 0.3s ease-in-out; +} + @media screen and (min-width: 500px) { + .github-btn:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + @media screen and (max-width: 700px) { + .github-btn { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + } + .github-btn:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } +} + \ No newline at end of file diff --git a/dashboard/src/assets/card.scss b/dashboard/src/assets/card.scss new file mode 100644 index 00000000000..cdbf6ba24f9 --- /dev/null +++ b/dashboard/src/assets/card.scss @@ -0,0 +1,631 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap"); + + +body { + background: #ddeefc; + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; +} +* { + box-sizing: border-box; + &:focus { + outline: none; + } +} +.wrapper { + min-height: 100vh; + display: flex; + padding: 50px 15px; + @media screen and (max-width: 700px), (max-height: 500px) { + flex-wrap: wrap; + flex-direction: column; + } +} + +.card-form { + max-width: 570px; + margin: auto; + width: 100%; + + @media screen and (max-width: 576px) { + margin: 0 auto; + } + + &__inner { + background: #fff; + // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2); + box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4); + border-radius: 10px; + padding: 35px; + padding-top: 180px; + + @media screen and (max-width: 480px) { + padding: 25px; + padding-top: 165px; + } + @media screen and (max-width: 360px) { + padding: 15px; + padding-top: 165px; + } + } + + &__row { + display: flex; + align-items: flex-start; + @media screen and (max-width: 480px) { + flex-wrap: wrap; + } + } + + &__col { + flex: auto; + margin-right: 35px; + + &:last-child { + margin-right: 0; + } + + @media screen and (max-width: 480px) { + margin-right: 0; + flex: unset; + width: 100%; + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + &.-cvv { + max-width: 150px; + @media screen and (max-width: 480px) { + max-width: initial; + } + } + } + + &__group { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + + .card-input__input { + flex: 1; + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + } + } + + &__button { + width: 100%; + height: 55px; + background: #2364d2; + border: none; + border-radius: 5px; + font-size: 22px; + font-weight: 500; + font-family: "Source Sans Pro", sans-serif; + box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3); + color: #fff; + margin-top: 20px; + cursor: pointer; + + @media screen and (max-width: 480px) { + margin-top: 10px; + } + } +} + +.card-item { + max-width: 430px; + height: 270px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 2; + width: 100%; + + @media screen and (max-width: 480px) { + max-width: 310px; + height: 220px; + width: 90%; + } + + @media screen and (max-width: 360px) { + height: 180px; + } + + &.-active { + .card-item__side { + &.-front { + transform: perspective(1000px) rotateY(180deg) rotateX(0deg) + rotateZ(0deg); + } + &.-back { + transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg); + // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65); + } + } + } + + &__focus { + position: absolute; + z-index: 3; + border-radius: 5px; + left: 0; + top: 0; + width: 100%; + height: 100%; + transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85); + opacity: 0; + pointer-events: none; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.65); + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + background: rgb(8, 20, 47); + height: 100%; + border-radius: 5px; + filter: blur(25px); + opacity: 0.5; + } + + &.-active { + opacity: 1; + } + } + + &__side { + border-radius: 15px; + overflow: hidden; + // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5); + box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55); + transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg); + transform-style: preserve-3d; + transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85); + backface-visibility: hidden; + height: 100%; + + &.-back { + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg); + z-index: 2; + padding: 0; + // background-color: #2364d2; + // background-image: linear-gradient( + // 43deg, + // #4158d0 0%, + // #8555c7 46%, + // #2364d2 100% + // ); + height: 100%; + + .card-item__cover { + transform: rotateY(-180deg) + } + } + } + &__bg { + max-width: 100%; + display: block; + max-height: 100%; + height: 100%; + width: 100%; + object-fit: cover; + } + &__cover { + height: 100%; + background-color: #1c1d27; + position: absolute; + height: 100%; + background-color: #1c1d27; + left: 0; + top: 0; + width: 100%; + border-radius: 15px; + overflow: hidden; + &:after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(6, 2, 29, 0.45); + } + } + + &__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 40px; + padding: 0 10px; + + @media screen and (max-width: 480px) { + margin-bottom: 25px; + } + @media screen and (max-width: 360px) { + margin-bottom: 15px; + } + } + + &__chip { + width: 60px; + @media screen and (max-width: 480px) { + width: 50px; + } + @media screen and (max-width: 360px) { + width: 40px; + } + } + + &__type { + height: 45px; + position: relative; + display: flex; + justify-content: flex-end; + max-width: 100px; + margin-left: auto; + width: 100%; + + @media screen and (max-width: 480px) { + height: 40px; + max-width: 90px; + } + @media screen and (max-width: 360px) { + height: 30px; + } + } + + &__typeImg { + max-width: 100%; + object-fit: contain; + max-height: 100%; + object-position: top right; + } + + &__info { + color: #fff; + width: 100%; + max-width: calc(100% - 85px); + padding: 10px 15px; + font-weight: 500; + display: block; + + cursor: pointer; + + @media screen and (max-width: 480px) { + padding: 10px; + } + } + + &__holder { + opacity: 0.7; + font-size: 13px; + margin-bottom: 6px; + @media screen and (max-width: 480px) { + font-size: 12px; + margin-bottom: 5px; + } + } + + &__wrapper { + font-family: "Source Code Pro", monospace; + padding: 25px 15px; + position: relative; + z-index: 4; + height: 100%; + text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8); + user-select: none; + @media screen and (max-width: 480px) { + padding: 20px 10px; + } + } + + &__name { + font-size: 18px; + line-height: 1; + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; + @media screen and (max-width: 480px) { + font-size: 16px; + } + } + &__nameItem { + display: inline-block; + min-width: 8px; + position: relative; + } + + &__number { + font-weight: 500; + line-height: 1; + color: #fff; + font-size: 27px; + margin-bottom: 35px; + display: inline-block; + padding: 10px 15px; + cursor: pointer; + + @media screen and (max-width: 480px) { + font-size: 21px; + margin-bottom: 15px; + padding: 10px 10px; + } + + @media screen and (max-width: 360px) { + font-size: 19px; + margin-bottom: 10px; + padding: 10px 10px; + } + } + + &__numberItem { + width: 16px; + display: inline-block; + &.-active { + width: 30px; + } + + @media screen and (max-width: 480px) { + width: 13px; + + &.-active { + width: 16px; + } + } + + @media screen and (max-width: 360px) { + width: 12px; + + &.-active { + width: 8px; + } + } + } + + &__content { + color: #fff; + display: flex; + align-items: flex-start; + } + + &__date { + flex-wrap: wrap; + font-size: 18px; + margin-left: auto; + padding: 10px; + display: inline-flex; + width: 80px; + white-space: nowrap; + flex-shrink: 0; + cursor: pointer; + + @media screen and (max-width: 480px) { + font-size: 16px; + } + } + + &__dateItem { + position: relative; + span { + width: 22px; + display: inline-block; + } + } + + &__dateTitle { + opacity: 0.7; + font-size: 13px; + padding-bottom: 6px; + width: 100%; + + @media screen and (max-width: 480px) { + font-size: 12px; + padding-bottom: 5px; + } + } + &__band { + background: rgba(0, 0, 19, 0.8); + width: 100%; + height: 50px; + margin-top: 30px; + position: relative; + z-index: 2; + @media screen and (max-width: 480px) { + margin-top: 20px; + } + @media screen and (max-width: 360px) { + height: 40px; + margin-top: 10px; + } + } + + &__cvv { + text-align: right; + position: relative; + z-index: 2; + padding: 15px; + .card-item__type { + opacity: 0.7; + } + + @media screen and (max-width: 360px) { + padding: 10px 15px; + } + } + &__cvvTitle { + padding-right: 10px; + font-size: 15px; + font-weight: 500; + color: #fff; + margin-bottom: 5px; + } + &__cvvBand { + height: 45px; + background: #fff; + margin-bottom: 30px; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 10px; + color: #1a3b5d; + font-size: 18px; + border-radius: 4px; + box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35); + + @media screen and (max-width: 480px) { + height: 40px; + margin-bottom: 20px; + } + + @media screen and (max-width: 360px) { + margin-bottom: 15px; + } + } +} + +.card-list { + margin-bottom: -130px; + + @media screen and (max-width: 480px) { + margin-bottom: -120px; + } +} + +.card-input { + margin-bottom: 20px; + &__label { + font-size: 14px; + margin-bottom: 5px; + font-weight: 500; + color: #1a3b5d; + width: 100%; + display: block; + user-select: none; + } + &__input { + width: 100%; + height: 50px; + border-radius: 5px; + box-shadow: none; + border: 1px solid #ced6e0; + transition: all 0.3s ease-in-out; + font-size: 18px; + padding: 5px 15px; + background: none; + color: #1a3b5d; + font-family: "Source Sans Pro", sans-serif; + + &:hover, + &:focus { + border-color: #3d9cff; + } + + &:focus { + box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35); + } + &.-select { + // -webkit-appearance: none; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC'); + background-size: 12px; + background-position: 90% center; + background-repeat: no-repeat; + padding-right: 30px; + } + } +} + +.slide-fade-up-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} +.slide-fade-up-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} +.slide-fade-up-enter { + opacity: 0; + transform: translateY(15px); + pointer-events: none; +} +.slide-fade-up-leave-to { + opacity: 0; + transform: translateY(-15px); + pointer-events: none; +} + +.slide-fade-right-enter-active { + transition: all 0.25s ease-in-out; + transition-delay: 0.1s; + position: relative; +} +.slide-fade-right-leave-active { + transition: all 0.25s ease-in-out; + position: absolute; +} +.slide-fade-right-enter { + opacity: 0; + transform: translateX(10px) rotate(45deg); + pointer-events: none; +} +.slide-fade-right-leave-to { + opacity: 0; + transform: translateX(-10px) rotate(45deg); + pointer-events: none; +} + + + +.github-btn { + position: absolute; + right: 40px; + bottom: 50px; + text-decoration: none; + padding: 15px 25px; + border-radius: 4px; + box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65); + background: #24292e; + color: #fff; + font-weight: bold; + letter-spacing: 1px; + font-size: 16px; + text-align: center; + transition: all .3s ease-in-out; + + @media screen and (min-width: 500px) { + &:hover { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } + + @media screen and (max-width: 700px) { + position: relative; + bottom: auto; + right: auto; + margin-top: 20px; + + &:active { + transform: scale(1.1); + box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36); + } + } +} \ No newline at end of file diff --git a/dashboard/src/assets/discover.png b/dashboard/src/assets/discover.png new file mode 100644 index 00000000000..56413f6eef9 Binary files /dev/null and b/dashboard/src/assets/discover.png differ diff --git a/dashboard/src/assets/frappe-cloud.svg b/dashboard/src/assets/frappe-cloud.svg index 63935c4d649..9ceae40582b 100644 --- a/dashboard/src/assets/frappe-cloud.svg +++ b/dashboard/src/assets/frappe-cloud.svg @@ -1,4 +1,68 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard/src/assets/jcb.png b/dashboard/src/assets/jcb.png new file mode 100644 index 00000000000..16e7978c7d6 Binary files /dev/null and b/dashboard/src/assets/jcb.png differ diff --git a/dashboard/src/assets/mastercard.png b/dashboard/src/assets/mastercard.png new file mode 100644 index 00000000000..90b2e75d027 Binary files /dev/null and b/dashboard/src/assets/mastercard.png differ diff --git a/dashboard/src/assets/midtrans_logo.svg b/dashboard/src/assets/midtrans_logo.svg new file mode 100644 index 00000000000..7543b40220e --- /dev/null +++ b/dashboard/src/assets/midtrans_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dashboard/src/assets/troy.png b/dashboard/src/assets/troy.png new file mode 100644 index 00000000000..68fe3fb7867 Binary files /dev/null and b/dashboard/src/assets/troy.png differ diff --git a/dashboard/src/assets/visa.png b/dashboard/src/assets/visa.png new file mode 100644 index 00000000000..912b8139e0c Binary files /dev/null and b/dashboard/src/assets/visa.png differ diff --git a/dashboard/src/components/BuyPrepaidCredits.vue b/dashboard/src/components/BuyPrepaidCredits.vue index 327c1904c47..946f5a2c943 100644 --- a/dashboard/src/components/BuyPrepaidCredits.vue +++ b/dashboard/src/components/BuyPrepaidCredits.vue @@ -33,7 +33,7 @@ :message="$resources.createPaymentIntent.error || errorMessage" />
- +
+
+ + + + + + +
+ +
+ +
+
+
-
@@ -90,10 +130,14 @@ export default { data() { return { paymentGateway: null, - creditsToBuy: 0 + creditsToBuy: 0, }; }, - mounted() { + async mounted() { + + let client_key = await this.$call( + 'optibizpro.utils.get_client_key' + ); const razorpayCheckoutJS = document.createElement('script'); razorpayCheckoutJS.setAttribute( 'src', @@ -102,11 +146,24 @@ export default { razorpayCheckoutJS.async = true; document.head.appendChild(razorpayCheckoutJS); + //get midtrans checkout + const midtransCheckoutJS = document.createElement('script'); + midtransCheckoutJS.setAttribute( + 'src', + 'https://app.sandbox.midtrans.com/snap/snap.js' + ); + midtransCheckoutJS.setAttribute( + 'data-client-key', + client_key + ); + midtransCheckoutJS.async = true; + document.head.appendChild(midtransCheckoutJS); + if ( this.$account.team.currency === 'USD' && - !this.$account.team.razorpay_enabled + !this.$account.team.razorpay_enabled && !this.$account.team.midtrans_enabled ) { - this.paymentGateway = 'stripe'; + this.paymentGateway = null; //default to null not stripe } }, props: { @@ -115,7 +172,7 @@ export default { }, minimumAmount: { type: Number, - default: 0 + default: 10 } }, emits: ['update:modelValue', 'success'], @@ -136,7 +193,7 @@ export default { } }; }, - handlePaymentSuccess() { + handlePaymentSuccess(response) { return { method: 'press.api.billing.handle_razorpay_payment_success', onSuccess() { @@ -151,12 +208,80 @@ export default { console.log('Payment Failed.'); } }; - } + }, + createMidTransToken(){ + return { + method: 'optibizpro.utils.create_midtrans_token', + params: { + amount: this.creditsToBuy, + customer_name : this.$account.user.full_name, + customer_email : this.$account.user.email + }, + onSuccess(data) { + this.processMidTransOrder(data); //this initializes the midtrans snap.js inline checkout + }, + validate() { + if (this.creditsToBuy < this.minimumAmount) { + return 'Amount less than minimum amount required'; + } + } + }; + }, + MidTransPaymentSuccess() { + return { + method: 'optibizpro.utils.handle_midtrans_payment_success', + + onSuccess() { + this.$emit('success'); + } + }; + }, + MidTransPaymentFailed() { + return { + method: 'optibizpro.utils.handle_midtrans_payment_failed', + onSuccess() { + console.log('Payment Failed.'); + } + }; + }, }, methods: { buyCreditsWithRazorpay() { this.$resources.createRazorpayOrder.submit(); }, + buyCreditsWithMidTrans(){ + this.$resources.createMidTransToken.submit(); + }, + processMidTransOrder(data){ + var transaction_token = data.token + window.snap.pay(transaction_token, { + onSuccess: (result) => { + /* You may add your own implementation here */ + + // alert("payment success!"); + result["team"] = this.$account.team.name + result["user"] = this.$account.user.full_name + result["email"] = this.$account.user.email + this.$resources.MidTransPaymentSuccess.submit({result}); + + }, + onPending: function(result){ + /* You may add your own implementation here */ + alert("awaiting payment!"); console.log(result); + }, + onError: function(result){ + /* You may add your own implementation here */ + result["team"] = this.$account.team.name + this.$resources.MidTransPaymentFailed.submit({result}); + + // alert("payment failed!"); console.log(result); + }, + onClose: function(){ + /* You may add your own implementation here */ + alert('you closed the popup without finishing the payment'); + } + }) + }, processOrder(data) { const options = { key: data.key_id, @@ -185,7 +310,18 @@ export default { handlePaymentFailed(response) { this.$resources.handlePaymentFailed.submit({ response }); - } + }, + + // MidTransPaymentSuccess_b(response) { + // console.log("respppppppppp",response) + // this.$resources.MidTransPaymentSuccess.submit(response); + // this.$emit('success'); + // }, + + // MidTransPaymentFailed(response) { + // this.$resources.MidTransPaymentFailed.submit({ response }); + // } + }, watch: { minimumAmount(amt) { diff --git a/dashboard/src/main.js b/dashboard/src/main.js index 114524cec97..c4e4dc27dc9 100644 --- a/dashboard/src/main.js +++ b/dashboard/src/main.js @@ -9,6 +9,7 @@ import posthog from 'posthog-js'; import { BrowserTracing } from '@sentry/tracing'; import router from './router/index'; import dayjs from 'dayjs'; +import VueCreditCardValidation from 'vue-credit-card-validation'; const app = createApp(App); @@ -16,7 +17,7 @@ registerPlugins(app); registerGlobalComponents(app); const { auth, account } = registerControllers(app); registerRouter(app, auth, account); - +app.use(VueCreditCardValidation); // sentry if (window.press_frontend_sentry_dsn.includes('https://')) { Sentry.init({ diff --git a/dashboard/src/views/auth/SetupAccount.vue b/dashboard/src/views/auth/SetupAccount.vue index f5d1020eb13..6f5d412861c 100644 --- a/dashboard/src/views/auth/SetupAccount.vue +++ b/dashboard/src/views/auth/SetupAccount.vue @@ -66,15 +66,15 @@ diff --git a/dashboard/src/views/billing/AccountBilling.vue b/dashboard/src/views/billing/AccountBilling.vue index bb3814fd941..a8e1db96c50 100644 --- a/dashboard/src/views/billing/AccountBilling.vue +++ b/dashboard/src/views/billing/AccountBilling.vue @@ -31,7 +31,7 @@ export default { name: 'AccountBilling', pageMeta() { return { - title: 'Billing - Frappe Cloud' + title: 'Billing - OptiBizPro Cloud' }; }, props: ['invoiceName'], diff --git a/dashboard/src/views/billing/AccountBillingCards.vue b/dashboard/src/views/billing/AccountBillingCards.vue index 3d819d43bbc..cdcd6e52aab 100644 --- a/dashboard/src/views/billing/AccountBillingCards.vue +++ b/dashboard/src/views/billing/AccountBillingCards.vue @@ -4,7 +4,7 @@