Initial
This commit is contained in:
@@ -0,0 +1,678 @@
|
||||
::-moz-selection {
|
||||
background: #ebfafa;
|
||||
color: #0010f7;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #ebfafa;
|
||||
color: #0010f7;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #2d3436;
|
||||
font-size: 14px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
line-height: 1.5715;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #f0f3f5;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Buy Now Button */
|
||||
.hp-buy-now-btn {
|
||||
bottom: 6%;
|
||||
right: 85px;
|
||||
}
|
||||
|
||||
/* Img */
|
||||
img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hp-img-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hp-img-position-left {
|
||||
-o-object-position: left;
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
.hp-img-position-right {
|
||||
-o-object-position: right;
|
||||
object-position: right;
|
||||
}
|
||||
|
||||
.hp-img-position-top {
|
||||
-o-object-position: top;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
.hp-img-position-bottom {
|
||||
-o-object-position: bottom;
|
||||
object-position: bottom;
|
||||
}
|
||||
|
||||
/* Line Height */
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
/* Bg */
|
||||
.hp-bg-none {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.hp-scrollbar-y-hidden::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.hp-scrollbar-x-hidden::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.hp-main-layout {
|
||||
max-width: calc(100% - 316px);
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 calc(100% - 316px);
|
||||
flex: 0 0 calc(100% - 316px);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-main-layout-content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 100%;
|
||||
flex: 1 0 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.hp-main-layout-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 90%;
|
||||
flex: 1 0 90%;
|
||||
max-width: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1600px) {
|
||||
.hp-main-layout-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 70%;
|
||||
flex: 1 0 70%;
|
||||
max-width: 70%;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-main-layout-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-main-layout {
|
||||
max-width: 100vw !important;
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Boxed Layout */
|
||||
@media only screen and (min-width: 768px) {
|
||||
body.content-width-boxed .hp-main-layout-content {
|
||||
max-width: 936px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Vertical & Horizontal Layout */
|
||||
.hp-main-layout-horizontal {
|
||||
max-width: 100%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.hp-vertical-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hp-horizontal-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.vertical-active .hp-vertical-block {
|
||||
display: block !important;
|
||||
}
|
||||
body.vertical-active .hp-vertical-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.horizontal-active .hp-horizontal-block {
|
||||
display: block !important;
|
||||
}
|
||||
body.horizontal-active .hp-horizontal-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* App Layout */
|
||||
body.app-layout-bg {
|
||||
position: relative;
|
||||
}
|
||||
body.app-layout-bg:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 270px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* Dropdown Fade */
|
||||
.hover-dropdown-fade .dropdown-fade {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hover-dropdown-fade:hover .dropdown-fade {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Overflow Control */
|
||||
.hp-overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.hp-overflow-x-auto::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.hp-overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* List Style */
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hp-list-disc li {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
/* Placeholder Image */
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: calc(1.475rem + 2.7vw);
|
||||
}
|
||||
}
|
||||
/* Text Overflow */
|
||||
.hp-text-overflow-ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Flex */
|
||||
.hp-flex-none {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: none !important;
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-flex-sm-100 {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
/* Cursor */
|
||||
.hp-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.hp-transition {
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.hljs-container {
|
||||
display: none;
|
||||
}
|
||||
.hljs-container pre {
|
||||
display: grid;
|
||||
background: #eaeef3;
|
||||
}
|
||||
.hljs-container .hljs {
|
||||
padding: 4px;
|
||||
border-radius: 0px;
|
||||
margin: 0 1px;
|
||||
font-size: 14px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Scroll to Top */
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
bottom: 6%;
|
||||
right: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: opacity 0.2s linear 0s, visibility;
|
||||
transition: opacity 0.2s linear 0s, visibility;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.scroll-to-top.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Wish Button */
|
||||
.hp-wish-button svg {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-wish-button:hover svg {
|
||||
-webkit-transform: scale(1.15);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
/* Shadow */
|
||||
.hp-primary-shadow {
|
||||
-webkit-box-shadow: 0px 0px 25px rgba(0, 16, 247, 0.7);
|
||||
box-shadow: 0px 0px 25px rgba(0, 16, 247, 0.7);
|
||||
}
|
||||
|
||||
.hp-elevatior {
|
||||
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.hp-elevatior-2 {
|
||||
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* CategoryOfTheWeek */
|
||||
.hp-categoriesOfTheWeek .hp-img-container {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Credit Card */
|
||||
.hp-credit-card[type=primary] {
|
||||
background: #0010f7;
|
||||
}
|
||||
.hp-credit-card[type=danger] {
|
||||
background: #ff0022;
|
||||
}
|
||||
.hp-credit-card[type=dark] {
|
||||
background: #111314;
|
||||
}
|
||||
.hp-credit-card[type=warning] {
|
||||
background: #ffc212;
|
||||
}
|
||||
.hp-credit-card .progress {
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
.hp-credit-card .progress .progress-bar {
|
||||
background: #ffffff;
|
||||
}
|
||||
.hp-credit-card-circle {
|
||||
min-width: 158px;
|
||||
height: 158px;
|
||||
-webkit-transform: translate(2px, -18px);
|
||||
transform: translate(2px, -18px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* eCommerceCardOne */
|
||||
.hp-eCommerceCardOne img {
|
||||
max-height: 200px;
|
||||
}
|
||||
.hp-eCommerceCardOne-text-overlay {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* BestSellingCategories */
|
||||
.hp-bestSellingCategories .hp-img-container {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* WelcomeCardOne */
|
||||
.hp-welcomeCard {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.hp-welcomeCard .hp-dot-1 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
top: -58%;
|
||||
left: -41%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-welcomeCard .hp-dot-1 {
|
||||
left: -20%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-dot-1 {
|
||||
left: -40%;
|
||||
}
|
||||
}
|
||||
.hp-welcomeCard .hp-img-1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(30%, -50%);
|
||||
transform: translate(30%, -50%);
|
||||
right: 0;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-img-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-welcomeCard .hp-img-2 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(30%, -50%);
|
||||
transform: translate(30%, -50%);
|
||||
right: 0;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-img-2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-welcomeCard .hp-img-3 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(30%, -50%);
|
||||
transform: translate(30%, -50%);
|
||||
right: 0;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-img-3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-welcomeCard .hp-img-4 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: -14%;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-welcomeCard .hp-img-4 {
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-img-4 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-welcomeCard .hp-img-5 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: -14%;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-welcomeCard .hp-img-5 {
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-welcomeCard .hp-img-5 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* UpgradePlanCardOne */
|
||||
.hp-upgradePlanCardOne {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-upgradePlanCardOne-bg {
|
||||
background-position: 90% center !important;
|
||||
}
|
||||
.hp-upgradePlanCardOne .col {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
.hp-upgradePlanCardOne .hp-dot-1 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: -10%;
|
||||
left: -15%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-upgradePlanCardOne .hp-dot-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-upgradePlanCardOne .hp-dot-2 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
bottom: -90%;
|
||||
right: -17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hp-upgradePlanCardOne .hp-dot-3 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0%;
|
||||
right: -25%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.hp-upgradePlanCardOne .hp-dot-3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social Media */
|
||||
.hp-social-media-logo-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
}
|
||||
.hp-social-media-logo-wrapper .hp-social-media-logo {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.hp-project-table-card.hp-analytics-project-table-card .table tbody > tr > td {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.hp-project-table-card .hp-img-container {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.hp-project-table-card .table thead > tr > th {
|
||||
background: none !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
.hp-project-table-card .table tbody > tr > td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Project Ecommerce Table */
|
||||
.hp-project-ecommerce-table-card .table thead > tr > th {
|
||||
background: none !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table thead > tr > th:before {
|
||||
visibility: hidden;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table thead > tr > th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table tbody > tr > td {
|
||||
border-bottom: none;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table tbody > tr > td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table tbody > tr:first-child > td {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.hp-project-ecommerce-table-card .table tbody > tr:last-child > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Order Table */
|
||||
.hp-order-table-card .table thead tr th {
|
||||
background: none !important;
|
||||
border: none;
|
||||
}
|
||||
.hp-order-table-card .table tbody tr td {
|
||||
border: none;
|
||||
padding: 7px 16px;
|
||||
}
|
||||
.hp-order-table-card .table tbody tr td .hp-img-container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Cards Control */
|
||||
.hp-card-1 {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.hp-card-2 {
|
||||
min-height: 202px;
|
||||
}
|
||||
|
||||
.hp-card-3 {
|
||||
min-height: 272px;
|
||||
}
|
||||
|
||||
.hp-card-4 {
|
||||
min-height: 342px;
|
||||
}
|
||||
|
||||
.hp-card-5 {
|
||||
min-height: 352px;
|
||||
}
|
||||
|
||||
.hp-card-6 {
|
||||
min-height: 424px;
|
||||
}
|
||||
|
||||
.hp-card-7 {
|
||||
min-height: 576px;
|
||||
}
|
||||
|
||||
.hp-card-8 {
|
||||
min-height: 656px;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/* Typography */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: #2d3436;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
line-height: 48px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 42px !important;
|
||||
line-height: 48px !important;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.h1 {
|
||||
font-size: 24px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 28px !important;
|
||||
line-height: 42px !important;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 24px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 20px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.hp-caption {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hp-p1-body {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #636e72;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hp-p2-body {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #636e72;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.hp-button {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #636e72;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hp-placeholder {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #636e72;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hp-input-description {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: #636e72;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hp-input-label {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #636e72;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hp-badge-text {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: #636e72;
|
||||
font-weight: 500;
|
||||
}
|
||||
Vendored
+28556
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,112 @@
|
||||
.hp-dir-block {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.direction-end {
|
||||
/* Theme Dark */
|
||||
/* Apex */
|
||||
/* Customise */
|
||||
/* Dashboard Ecommerce */
|
||||
/* Authentication */
|
||||
/* Accordion */
|
||||
/* Popover */
|
||||
/* Tooltip */
|
||||
}
|
||||
body.direction-end .hp-dir-none {
|
||||
display: none;
|
||||
}
|
||||
body.direction-end .hp-dir-block {
|
||||
display: block;
|
||||
}
|
||||
body.direction-end .hp-dir-block.hp-dark-block {
|
||||
display: none;
|
||||
}
|
||||
body.direction-end .hp-dir-scale-x-n1 {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
body.direction-end.dark .hp-dir-block.hp-dark-none {
|
||||
display: none;
|
||||
}
|
||||
body.direction-end.dark .hp-dir-block.hp-dark-block {
|
||||
display: block;
|
||||
}
|
||||
body.direction-end.dark .hp-dir-none.hp-dark-block {
|
||||
display: none;
|
||||
}
|
||||
body.direction-end .apexcharts-legend-marker {
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
body.direction-end .hp-theme-customizer-button {
|
||||
-webkit-transform: translate(96%, 0%) scale(-1, 1);
|
||||
transform: translate(96%, 0%) scale(-1, 1);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
body.direction-end .hp-theme-customizer-button {
|
||||
-webkit-transform: translate(186%, 0px) scale(-0.9, 0.9);
|
||||
transform: translate(186%, 0px) scale(-0.9, 0.9);
|
||||
}
|
||||
}
|
||||
body.direction-end .hp-ecommerce-detail-card img {
|
||||
-webkit-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
body.direction-end .hp-authentication-page .hp-other-links a + a {
|
||||
padding-right: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
body.direction-end .hp-authentication-page .hp-other-links a + a:last-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
body.direction-end .hp-authentication-page .hp-other-links a + a:before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
body.direction-end .accordion-button::after {
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
body.direction-end .accordion-button:not(.collapsed)::after {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
body.direction-end .bs-popover-start > .popover-arrow,
|
||||
body.direction-end .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
|
||||
left: -0.5rem;
|
||||
right: auto;
|
||||
}
|
||||
body.direction-end .bs-popover-end > .popover-arrow,
|
||||
body.direction-end .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
|
||||
right: -0.5rem;
|
||||
left: auto;
|
||||
}
|
||||
body.direction-end .bs-tooltip-end .tooltip-inner,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=right] .tooltip-inner {
|
||||
-webkit-box-shadow: 6px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 6px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
body.direction-end .bs-tooltip-start .tooltip-inner,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=left] .tooltip-inner {
|
||||
-webkit-box-shadow: -6px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: -6px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
body.direction-end .bs-tooltip-end .tooltip-arrow,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
body.direction-end .bs-tooltip-end .tooltip-arrow::before,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
|
||||
right: 2px;
|
||||
}
|
||||
body.direction-end .bs-tooltip-start .tooltip-arrow,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
body.direction-end .bs-tooltip-start .tooltip-arrow::before,
|
||||
body.direction-end .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
|
||||
left: 2px;
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
/* Customise */
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 69, 94, 0.7);
|
||||
box-shadow: 0 0 0 0 rgba(255, 69, 94, 0.7);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-box-shadow: 0 0 0 6px rgba(255, 69, 94, 0);
|
||||
box-shadow: 0 0 0 6px rgba(255, 69, 94, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 69, 94, 0);
|
||||
box-shadow: 0 0 0 0 rgba(255, 69, 94, 0);
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 69, 94, 0.7);
|
||||
box-shadow: 0 0 0 0 rgba(255, 69, 94, 0.7);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-box-shadow: 0 0 0 6px rgba(255, 69, 94, 0);
|
||||
box-shadow: 0 0 0 6px rgba(255, 69, 94, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
-webkit-box-shadow: 0 0 0 0 rgba(255, 69, 94, 0);
|
||||
box-shadow: 0 0 0 0 rgba(255, 69, 94, 0);
|
||||
}
|
||||
}
|
||||
.hp-theme-customizer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
z-index: 4;
|
||||
-webkit-transform: translate(100%, 0);
|
||||
transform: translate(100%, 0);
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-theme-customizer.active {
|
||||
-webkit-transform: translate(0%, 0) !important;
|
||||
transform: translate(0%, 0) !important;
|
||||
-webkit-box-shadow: -13px 0px 20px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: -13px 0px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.hp-theme-customizer.active .hp-theme-customizer-button-bg svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.hp-theme-customizer.active .hp-theme-customizer-button-icon svg path {
|
||||
fill: #0010f7;
|
||||
}
|
||||
.hp-theme-customizer-button {
|
||||
height: 120px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
-webkit-transform: translate(-100%, 0);
|
||||
transform: translate(-100%, 0);
|
||||
cursor: pointer;
|
||||
}
|
||||
.hp-theme-customizer-button-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.hp-theme-customizer-button-bg svg path {
|
||||
fill: #0010f7;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-theme-customizer-button-icon {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
right: 14px;
|
||||
}
|
||||
.hp-theme-customizer-button-icon svg path {
|
||||
fill: #ffffff;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-theme-customizer-button-icon > span {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -6px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
background: #ff0022;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-box-shadow: 0 0 0 0 rgb(255, 69, 94);
|
||||
box-shadow: 0 0 0 0 rgb(255, 69, 94);
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.hp-theme-customizer-container {
|
||||
width: 396px;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hp-theme-customizer-container-header button {
|
||||
margin-right: -24px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.hp-theme-customizer-container-body {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.hp-theme-customizer-container-body::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item + .hp-theme-customizer-container-body-item {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px dashed #dfe6e9;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg {
|
||||
position: relative;
|
||||
height: 101px;
|
||||
border: 2px solid #dfe6e9;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-check {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 0;
|
||||
-webkit-transform: translate(50%, -50%) scale(0);
|
||||
transform: translate(50%, -50%) scale(0);
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-check svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-other {
|
||||
cursor: pointer;
|
||||
border: 2px solid #dfe6e9;
|
||||
height: 33px;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-other svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-other.active {
|
||||
border-color: #2d3436;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg.active {
|
||||
border-color: #2d3436;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg.active .hp-theme-customizer-container-body-item-svg-check {
|
||||
-webkit-transform: translate(40%, -30%) scale(1);
|
||||
transform: translate(40%, -30%) scale(1);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-theme-customizer-container {
|
||||
width: 270px;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg {
|
||||
height: 138px;
|
||||
}
|
||||
.hp-theme-customizer-container-body-item-svg-other {
|
||||
height: 45px;
|
||||
}
|
||||
.hp-theme-customizer-button {
|
||||
-webkit-transform: translate(-100%, -50%) scale(0.9);
|
||||
transform: translate(-100%, -50%) scale(0.9);
|
||||
-webkit-transform-origin: right;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Header Logo */
|
||||
.hp-header-logo-icon {
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
body.header-full .hp-main-layout header {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 0;
|
||||
margin-bottom: 32px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hp-main-layout {
|
||||
/* Basket */
|
||||
}
|
||||
.hp-main-layout > header {
|
||||
background: none;
|
||||
padding: 16px 32px 32px;
|
||||
border-radius: 7px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
height: 112px;
|
||||
}
|
||||
.hp-main-layout > header > .row {
|
||||
height: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-main-layout > header > .row > .col {
|
||||
border-radius: 7px;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-start-text-item {
|
||||
line-height: 32px;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-start-text-item .remix-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-search {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate(-30px, 0);
|
||||
transform: translate(-30px, 0);
|
||||
}
|
||||
.hp-main-layout > header .hp-header-search.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout > header .hp-header-search {
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: -6px;
|
||||
right: -25px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: auto;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
.hp-main-layout > header .hp-mobile-sidebar-button {
|
||||
display: none;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-profile-menu {
|
||||
right: -10px;
|
||||
}
|
||||
.hp-main-layout > header .hp-notification-menu {
|
||||
width: 380px;
|
||||
right: -10px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout > header .hp-notification-menu {
|
||||
width: 290px;
|
||||
}
|
||||
}
|
||||
.hp-main-layout > header .hp-notification-circle {
|
||||
left: 62%;
|
||||
}
|
||||
@media screen and (max-width: 1380px) {
|
||||
.hp-main-layout > header .hp-header-start-text-item {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-main-layout > header .hp-mobile-sidebar-button {
|
||||
display: block;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-start-text {
|
||||
display: none !important;
|
||||
}
|
||||
.hp-main-layout > header .hp-header-logo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout > header {
|
||||
padding: 16px 16px 32px;
|
||||
}
|
||||
.hp-main-layout > header.hp-header-full {
|
||||
padding: 0 6px 16px;
|
||||
}
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown-button:hover .hp-basket-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
padding: 44px 24px 18px;
|
||||
top: 40px;
|
||||
right: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown.remove-cart {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown-list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 300px;
|
||||
padding: 0 10px;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown-list::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout .hp-basket-dropdown-list-item-price {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.hp-main-layout .hp-basket-dropdown > div {
|
||||
position: relative;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-main-layout .hp-basket-dropdown {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
-webkit-transform: translate(25.5%, 0px);
|
||||
transform: translate(25.5%, 0px);
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.autocomplete-suggestions {
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 200px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.autocomplete-suggestions::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.autocomplete-suggestions .autocomplete-suggestion {
|
||||
padding: 10px 16px;
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
.autocomplete-suggestions .autocomplete-suggestion strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
.autocomplete-suggestions .autocomplete-suggestion:hover {
|
||||
background: #ebfafa;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.autocomplete-suggestions {
|
||||
top: 45px;
|
||||
border-radius: 16px;
|
||||
-webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/* Horizontal Menu */
|
||||
body.horizontal-active .hp-horizontal-menu.search-active {
|
||||
display: none !important;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.horizontal-active .hp-horizontal-menu {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-horizontal-menu ul li a {
|
||||
color: #636e72;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li > a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li > a > i {
|
||||
color: #b2bec3;
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li > a:hover, .hp-horizontal-menu > ul > li > a:focus {
|
||||
background: #f7fafc;
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li > a.active {
|
||||
background: #f7fafc;
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul {
|
||||
min-width: 200px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a > span {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a > span > i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a > span .submenu-item-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a .dropdown-menu-arrow {
|
||||
margin-left: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E") transparent no-repeat 50%/contain;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a:hover, .hp-horizontal-menu > ul > li ul li a:focus {
|
||||
background: none;
|
||||
color: #0010f7;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a.dropdown-item.active {
|
||||
background: none !important;
|
||||
}
|
||||
.hp-horizontal-menu > ul > li ul li a.active {
|
||||
background: #ffffff;
|
||||
color: #0010f7;
|
||||
}
|
||||
.hp-horizontal-menu ul > li {
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
.hp-horizontal-menu ul > li > ul > li ul {
|
||||
-webkit-transform: translate(0px, 0) !important;
|
||||
transform: translate(0px, 0) !important;
|
||||
left: 100% !important;
|
||||
top: 0 !important;
|
||||
margin: 0 -5px !important;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.hp-horizontal-menu ul > li > ul > li:hover > ul,
|
||||
.hp-horizontal-menu ul > li > ul > li > ul > li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
.hp-horizontal-menu ul > li ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
background: #f0f3f5;
|
||||
border-radius: 7px;
|
||||
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.01), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.01), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
z-index: -1;
|
||||
}
|
||||
.hp-horizontal-menu ul > li ul ul:before {
|
||||
right: 0;
|
||||
}
|
||||
.hp-horizontal-menu ul > li ul li a {
|
||||
padding: 12px 14px 12px 10px;
|
||||
margin: 4px 10px 4px 0;
|
||||
width: auto;
|
||||
}
|
||||
.hp-horizontal-menu ul > li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
.hp-horizontal-menu ul > li > ul {
|
||||
left: 12px !important;
|
||||
-webkit-transform: translate(0px, 0px) !important;
|
||||
transform: translate(0px, 0px) !important;
|
||||
top: 95% !important;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-horizontal-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* Page Content */
|
||||
.hp-page-content .breadcrumb-item.breadcrumb-link a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.hp-page-content .breadcrumb-item.breadcrumb-link a:hover {
|
||||
color: #0063f7;
|
||||
}
|
||||
@@ -0,0 +1,486 @@
|
||||
/* Sider */
|
||||
.hp-logo {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
body.collapsed-active .hp-main-layout {
|
||||
max-width: calc(100% - 80px);
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 calc(100% - 80px);
|
||||
flex: 0 0 calc(100% - 80px);
|
||||
}
|
||||
body.collapsed-active .hp-sidebar-visible {
|
||||
display: block !important;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar-visible.hp-dark-block {
|
||||
display: none !important;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 80px;
|
||||
flex: 0 0 80px;
|
||||
min-width: 80px;
|
||||
padding: 0;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > .row {
|
||||
margin: 24px 0 0 !important;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center !important;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu .hp-header-logo {
|
||||
margin-top: 12px;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul {
|
||||
padding: 5px 0 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul li {
|
||||
text-align: center;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul li .badge {
|
||||
display: none;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul li .menu-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0 auto 12px;
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul > li > ul li a {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 0 -24px;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul > li > ul li a .menu-arrow {
|
||||
display: none;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul > li > ul li a i {
|
||||
margin: 0;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul > li > ul li a .submenu-item-icon {
|
||||
margin: 0;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-header-menu > ul > li > ul li a > span > span:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-footer {
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
body.collapsed-active .hp-sidebar .hp-sidebar-footer > .col > .row {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.collapse-btn-none .hp-sidebar-collapse-button,
|
||||
body.collapse-btn-none.collapsed-active .hp-sidebar-collapse-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-tooltip {
|
||||
left: 75px !important;
|
||||
}
|
||||
.sidebar-tooltip .arrow {
|
||||
left: 0;
|
||||
-webkit-transform: scale(-1);
|
||||
transform: scale(-1);
|
||||
}
|
||||
|
||||
.hp-sidebar {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 316px;
|
||||
flex: 0 0 316px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 20px 32px 42px 42px;
|
||||
}
|
||||
.hp-sidebar-visible {
|
||||
display: none;
|
||||
}
|
||||
.hp-sidebar-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding-top: 5px;
|
||||
padding-left: 14px;
|
||||
margin-top: -5px;
|
||||
margin-left: -14px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu ul {
|
||||
margin-left: -14px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul {
|
||||
margin-top: 40px;
|
||||
margin-left: -14px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 14px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li + li {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul li .menu-title {
|
||||
color: #0063f7;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0 14px 14px;
|
||||
border-radius: 7px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
right: 5px;
|
||||
width: 2px;
|
||||
background: #2d3436;
|
||||
height: 0%;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a .tooltip-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a .tooltip-item.in-active {
|
||||
pointer-events: none;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span > span {
|
||||
display: block;
|
||||
color: #636e72;
|
||||
font-size: 14px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span > i {
|
||||
color: #2d3436;
|
||||
margin-right: 16px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span > .submenu-item-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span > .submenu-item-icon svg path {
|
||||
fill: rgba(255, 255, 255, 0);
|
||||
stroke: #2d3436;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a .menu-arrow {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a .menu-arrow:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E") transparent no-repeat 50%/contain;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active {
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active:not(.submenu-item) {
|
||||
background: #ffffff;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active:not(.submenu-item):before {
|
||||
height: 70%;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active:not(.submenu-item) .submenu-item-icon svg path {
|
||||
fill: #111314 !important;
|
||||
stroke: #ffffff !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active i {
|
||||
color: #2d3436 !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active .submenu-item-icon svg path {
|
||||
stroke: #111314 !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active > span > span {
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.arrow-active .menu-arrow {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover {
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover i {
|
||||
color: #2d3436 !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover .submenu-item-icon svg path {
|
||||
stroke: #111314 !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover > span {
|
||||
color: #2d3436 !important;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover > span > span {
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .collapse {
|
||||
padding: 0 12px;
|
||||
margin: 0 -12px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children {
|
||||
margin-left: 44px;
|
||||
display: none;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children .submenu-children {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a {
|
||||
border-radius: 7px;
|
||||
padding: 16px 13px;
|
||||
margin: 0 0 0 -12px;
|
||||
position: relative;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a > span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #636e72;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a.active > span {
|
||||
color: #2d3436;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a.active:not(.submenu-item) {
|
||||
background: #ffffff;
|
||||
}
|
||||
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a.active:not(.submenu-item):before {
|
||||
height: 70%;
|
||||
}
|
||||
.hp-sidebar .sider-children {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Sider Mobile */
|
||||
.hp-main-layout > header .hp-mobile-sidebar .hp-header-logo {
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.hp-mobile-sidebar .hp-sidebar {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
padding: 0 4px 18px;
|
||||
border: none !important;
|
||||
}
|
||||
.hp-mobile-sidebar .hp-sidebar .hp-sidebar-container .hp-sidebar-header-menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
.hp-mobile-sidebar .hp-sidebar .hp-sidebar-container .hp-sidebar-header-menu > .row {
|
||||
display: none;
|
||||
}
|
||||
.hp-mobile-sidebar .hp-sidebar .hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a {
|
||||
padding-right: 4px;
|
||||
}
|
||||
.hp-mobile-sidebar .hp-sidebar .hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a .menu-arrow {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.hp-mobile-sidebar .hp-sidebar .hp-sidebar-container .hp-sidebar-footer {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* Sider Collapse Dropdown */
|
||||
.hp-sidebar-dropdown-container {
|
||||
z-index: 99;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul {
|
||||
min-width: 160px;
|
||||
margin: 0;
|
||||
border-radius: 7px;
|
||||
padding: 0 4px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
bottom: 0;
|
||||
border-radius: 7px;
|
||||
background: #f0f3f5;
|
||||
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a {
|
||||
font-size: 14px;
|
||||
color: #636e72;
|
||||
padding: 13px 12px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin: 4px 0;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a > span {
|
||||
position: relative;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ebfafa;
|
||||
opacity: 0;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a:hover {
|
||||
color: #0010f7;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a.active {
|
||||
color: #0010f7;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a.active:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a .menu-arrow {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: -7px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li a .menu-arrow:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: translate(0, -50%) rotate(-90deg);
|
||||
transform: translate(0, -50%) rotate(-90deg);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95'/%3E%3C/svg%3E") transparent no-repeat 50%/contain;
|
||||
}
|
||||
.hp-sidebar-dropdown-container ul li .submenu-children {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-mobile-sidebar .hp-sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hp-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* App Contact Detail */
|
||||
.hp-contact-detail-content-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span {
|
||||
display: block;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span:nth-child(1) {
|
||||
min-width: 200px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-contact-detail-content-list ul li {
|
||||
display: block;
|
||||
}
|
||||
.hp-contact-detail-content-list ul li span:nth-child(1) {
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-contact-detail-sidebar {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
.hp-contact-detail-sidebar .hp-footer-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* App Contact */
|
||||
.hp-contact-card .table > thead > tr > th {
|
||||
background: none;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hp-contact-card .table > thead > tr > th:nth-child(2), .hp-contact-card .table > thead > tr > th:nth-child(6) {
|
||||
min-width: 200px;
|
||||
}
|
||||
.hp-contact-card .table > thead > tr > th,
|
||||
.hp-contact-card .table > tbody > tr > td {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* App Ecommerce */
|
||||
.hp-ecommerce-app {
|
||||
/* Shop Sidebar */
|
||||
/* Shop Header */
|
||||
/* Shop Content */
|
||||
/* Detail */
|
||||
/* Checkout */
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile {
|
||||
display: none;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile-btn {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-ecommerce-app-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile {
|
||||
width: 255px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile .hp-ecommerce-app-sidebar {
|
||||
display: block;
|
||||
}
|
||||
.hp-ecommerce-app-sidebar-mobile-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-header .nav .btn.active svg > path {
|
||||
fill: #0010f7;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-header-search {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
.hp-ecommerce-app-header-select {
|
||||
-webkit-box-flex: 1 !important;
|
||||
-ms-flex: 1 0 0px !important;
|
||||
flex: 1 0 0 !important;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-content .hp-eCommerceCardOne img {
|
||||
max-height: auto;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider img {
|
||||
max-height: 600px;
|
||||
padding: 10px;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 .hp-slide-item > div {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
.hp-ecommerce-app-detail-slider-2 .swiper-slide-active .hp-slide-item > div {
|
||||
border-color: #636e72 !important;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-detail-slider-2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-item-img {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-item-text {
|
||||
-webkit-box-flex: 0 !important;
|
||||
-ms-flex: 0 0 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
.hp-ecommerce-app-checkout-title-table {
|
||||
padding-left: 190px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-app-checkout-title-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/* Authentication */
|
||||
.hp-authentication-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-authentication-page .hp-auth-header-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hp-authentication-page .hp-logo-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.hp-authentication-page .hp-bg-item {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.hp-authentication-page .hp-text-item {
|
||||
margin-top: -250px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-authentication-page .hp-text-item {
|
||||
margin-top: -80px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hp-authentication-page .hp-or-line {
|
||||
position: relative;
|
||||
}
|
||||
.hp-authentication-page .hp-or-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
background-color: #dfe6e9;
|
||||
z-index: -1;
|
||||
}
|
||||
.hp-authentication-page .hp-other-links a + a {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.hp-authentication-page .hp-other-links a + a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 100%;
|
||||
background-color: #636e72;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* Dashboard analytics */
|
||||
.hp-analytics-col-2 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-analytics-col-2 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.content-width-boxed .hp-dashboard-line {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.content-width-boxed .hp-dashboard-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-feature-card .hp-dashboard-feature-card-icon svg {
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-dashboard-feature-card:hover .hp-dashboard-feature-card-icon svg {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* Dashboard Ecommerce */
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 80%;
|
||||
}
|
||||
@media screen and (max-width: 1599px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
body.horizontal-active .hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-ecommerce-detail-card img {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: -70px;
|
||||
max-width: 90%;
|
||||
}
|
||||
@media screen and (max-width: 1599px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-ecommerce-detail-card img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-dashboard-ecommerce-product-slider .slick-slider {
|
||||
width: 100%;
|
||||
}
|
||||
.hp-dashboard-ecommerce-product-slider-button {
|
||||
position: absolute;
|
||||
top: -56px;
|
||||
right: 16px;
|
||||
}
|
||||
.hp-dashboard-ecommerce-product-slider-button.prev-button {
|
||||
right: 64px;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* Components */
|
||||
.hp-components-menu .swiper-slide {
|
||||
width: auto;
|
||||
}
|
||||
.hp-components-menu .nav {
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.hp-components-menu .nav-link.active {
|
||||
color: #fff !important;
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
.hp-components-item {
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.hp-components-item-title {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-components-item-img img {
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hp-components-item:hover {
|
||||
-webkit-box-shadow: 0px 16px 32px rgba(0, 16, 247, 0.04);
|
||||
box-shadow: 0px 16px 32px rgba(0, 16, 247, 0.04);
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.hp-components-item:hover .hp-components-item-img img {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.hp-components-item:hover .hp-components-item-title {
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/* Error */
|
||||
.hp-error-content {
|
||||
min-height: calc(100vh - 189px);
|
||||
}
|
||||
.hp-error-content-title {
|
||||
font-size: 22vw;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-error-content-title {
|
||||
font-size: 32vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-error-content-title {
|
||||
font-size: 45vw;
|
||||
}
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 200px;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 100px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 16vw;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 8vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-error-content .hp-comingsoon-timer-item {
|
||||
min-width: 18vw;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(1) {
|
||||
font-size: 11vw;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
.hp-error-content .hp-comingsoon-timer-item span:nth-child(2) {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* FAQ */
|
||||
.hp-collapse-arrow {
|
||||
display: inline-block;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.collapsed .hp-collapse-arrow {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-faq-tabs .nav-item {
|
||||
min-width: 190px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.hp-faq-tabs .nav-link i {
|
||||
-webkit-transition: 0.15s ease-in-out;
|
||||
transition: 0.15s ease-in-out;
|
||||
}
|
||||
.hp-faq-tabs .nav-link.active i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.hp-faq-tabs .nav-link.active:hover i {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.hp-faq-tabs .nav-link:hover i {
|
||||
color: #0063f7 !important;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* Invoice */
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-invoice-table-desc {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-invoice-table-th {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-invoice-card p {
|
||||
margin: 0;
|
||||
color: #636e72;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hp-sidebar,
|
||||
header,
|
||||
footer,
|
||||
.hp-print-none,
|
||||
.hp-exchange-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hp-invoice-card {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* Knowledge Base */
|
||||
.hp-knowledge-basic-card {
|
||||
min-height: 200px;
|
||||
-ms-flex-line-pack: justify;
|
||||
align-content: space-between;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,426 @@
|
||||
.hp-landing-container {
|
||||
max-width: 1184px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
.hp-landing header .hp-landing-header-mobile-button {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing header .hp-landing-header-menu {
|
||||
display: none !important;
|
||||
}
|
||||
.hp-landing header .hp-landing-header-buttons {
|
||||
display: none;
|
||||
}
|
||||
.hp-landing header .hp-landing-header-mobile-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hp-landing-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hp-landing-hero-title {
|
||||
max-width: 790px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
position: relative;
|
||||
max-width: 1100px;
|
||||
height: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hp-landing-hero-img-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: translate(0px, 10px);
|
||||
transform: translate(0px, 10px);
|
||||
}
|
||||
.hp-landing-hero-img-item {
|
||||
background-size: contain;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
-webkit-filter: drop-shadow(2px 4px 46px rgba(0, 0, 0, 0.1));
|
||||
filter: drop-shadow(2px 4px 46px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
.hp-landing-hero-img-left {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 6%;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
font-size: 40px;
|
||||
-webkit-transform: rotate(28deg);
|
||||
transform: rotate(28deg);
|
||||
margin-bottom: 80px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(2) {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
font-size: 40px;
|
||||
-webkit-transform: rotate(28deg);
|
||||
transform: rotate(28deg);
|
||||
margin-bottom: 20px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 6%;
|
||||
text-align: center;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(2) {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-bottom: 30px;
|
||||
margin-left: -220px;
|
||||
}
|
||||
.hp-landing-hero-rectangle {
|
||||
border-radius: 50px;
|
||||
-webkit-transform: rotate(-22deg);
|
||||
transform: rotate(-22deg);
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 0;
|
||||
}
|
||||
.hp-landing-hero-circle {
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -40px;
|
||||
}
|
||||
@media screen and (max-width: 1450px) {
|
||||
.hp-landing-hero-img-left {
|
||||
left: 30px;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-hero-img {
|
||||
max-width: 80vw;
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-hero-title {
|
||||
max-width: 580px;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
max-width: 100%;
|
||||
height: 42vw;
|
||||
}
|
||||
.hp-landing-hero-img-left, .hp-landing-hero-img-right {
|
||||
-webkit-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
-webkit-transform-origin: bottom;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
.hp-landing-hero-img-left {
|
||||
left: 0;
|
||||
}
|
||||
.hp-landing-hero-img-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-hero-rectangle {
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.hp-landing-hero-circle {
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
right: 10px;
|
||||
top: -30px;
|
||||
}
|
||||
.hp-landing-hero-title {
|
||||
max-width: 100%;
|
||||
}
|
||||
.hp-landing-hero-title p {
|
||||
font-size: 18px;
|
||||
}
|
||||
.hp-landing-hero-img {
|
||||
max-width: 100%;
|
||||
height: 42vw;
|
||||
}
|
||||
.hp-landing-hero-img-left, .hp-landing-hero-img-right {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
bottom: 10px;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hp-landing-hero-img-left .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(1) {
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.hp-landing-hero-img-right .hp-landing-hero-img-emoji:nth-child(3) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 230px;
|
||||
}
|
||||
.hp-landing-features-slide:before, .hp-landing-features-slide:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 180px;
|
||||
background: -webkit-gradient(linear, right top, left top, from(#ffffff), to(rgba(255, 255, 255, 0)));
|
||||
background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-features-slide:before, .hp-landing-features-slide:after {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
.hp-landing-features-slide:before {
|
||||
left: 0;
|
||||
right: auto;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.hp-landing-features-slide:after {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
@media screen and (max-width: 1370px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 150px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-features-slide {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-1 {
|
||||
padding-top: 160px;
|
||||
}
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 75vw;
|
||||
}
|
||||
.hp-landing-content-1-circle {
|
||||
width: 612px;
|
||||
height: 612px;
|
||||
border-radius: 100%;
|
||||
margin-left: auto;
|
||||
}
|
||||
.hp-landing-content-1-img {
|
||||
position: absolute;
|
||||
right: -152px;
|
||||
top: 58%;
|
||||
-webkit-transform: translate(0px, -50%);
|
||||
transform: translate(0px, -50%);
|
||||
}
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 880px;
|
||||
}
|
||||
@media screen and (max-width: 1450px) {
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 83vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-content-1 .hp-landing-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.hp-landing-content-1 .hp-landing-container > .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.hp-landing-content-1-circle {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.hp-landing-content-1-img {
|
||||
right: -40px;
|
||||
text-align: right;
|
||||
}
|
||||
.hp-landing-content-1-img img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-content-1-circle {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.hp-landing-content-1 h3 {
|
||||
font-size: 18px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-2 {
|
||||
padding-top: 160px;
|
||||
}
|
||||
.hp-landing-content-2-circle {
|
||||
width: 504px;
|
||||
height: 504px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 770px;
|
||||
top: 56%;
|
||||
left: 63%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-2-circle {
|
||||
width: 304px;
|
||||
height: 304px;
|
||||
margin: 0 auto 200px;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 600px;
|
||||
top: 56%;
|
||||
left: 63%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-content-2-circle {
|
||||
margin: 0 auto 130px;
|
||||
}
|
||||
.hp-landing-content-2-circle img {
|
||||
max-width: 140%;
|
||||
left: 55%;
|
||||
}
|
||||
}
|
||||
.hp-landing-content-2-list {
|
||||
max-width: 360px;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-landing-content-2 .hp-landing-container > .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
.hp-landing-people-circle {
|
||||
width: 542px;
|
||||
height: 542px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-transform: translate(50%, -60%);
|
||||
transform: translate(50%, -60%);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-people-circle {
|
||||
width: 342px;
|
||||
height: 342px;
|
||||
}
|
||||
}
|
||||
.hp-landing-people-item {
|
||||
min-height: 200px;
|
||||
}
|
||||
.hp-landing-people-item-twitter {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
}
|
||||
.hp-landing-people-item-img {
|
||||
margin-left: -10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-landing-people-item-title {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
.hp-landing-pricing-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
min-height: 450px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-pricing-item {
|
||||
min-height: initial;
|
||||
}
|
||||
}
|
||||
.hp-landing-footer-circle {
|
||||
width: 255px;
|
||||
height: 255px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-landing-footer-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.hp-landing-footer-copyright {
|
||||
text-align: center;
|
||||
}
|
||||
.hp-landing-footer-copyright > .col {
|
||||
-webkit-box-flex: 100% !important;
|
||||
-ms-flex: 100% !important;
|
||||
flex: 100% !important;
|
||||
}
|
||||
.hp-landing-footer-copyright > .col .row {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* Lock Screen */
|
||||
.hp-lock-screen {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 150px 30px;
|
||||
}
|
||||
.hp-lock-screen .hp-screen-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.hp-lock-screen-row {
|
||||
max-width: 390px;
|
||||
background: rgba(0, 16, 247, 0.3);
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-lock-screen-row {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-lock-screen {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* Pricing */
|
||||
.hp-pricing-billed-text.active {
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 19%;
|
||||
flex: 0 0 19%;
|
||||
max-width: 210px;
|
||||
}
|
||||
.hp-pricing-item-best-button {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
white-space: initial;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.hp-pricing-item-special {
|
||||
background-color: #0010f7;
|
||||
border-color: #0010f7 !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-title, .hp-pricing-item-special .hp-pricing-item-price {
|
||||
color: #ebfafa;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-subtitle {
|
||||
color: #00f7bf !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-billed, .hp-pricing-item-special .hp-pricing-item-list {
|
||||
color: #55b1f3 !important;
|
||||
}
|
||||
.hp-pricing-item-special .hp-pricing-item-list svg path {
|
||||
fill: #ebfafa;
|
||||
}
|
||||
.hp-pricing-item-special button.btn {
|
||||
color: #0010f7 !important;
|
||||
background-color: #ebfafa !important;
|
||||
}
|
||||
.hp-pricing-item-special button.btn:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 40%;
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-item-align: normal;
|
||||
align-self: normal;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-pricing-item {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
/* Profile */
|
||||
.hp-profile-menu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid #dfe6e9;
|
||||
min-height: 930px;
|
||||
}
|
||||
.hp-profile-menu-header .badge {
|
||||
bottom: -16px;
|
||||
right: -5px;
|
||||
top: auto;
|
||||
padding: 0px 4px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
z-index: 1;
|
||||
-webkit-transform: translate(0px, 0px);
|
||||
transform: translate(0px, 0px);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item {
|
||||
overflow: initial;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
right: -7px;
|
||||
bottom: -7px;
|
||||
background: conic-gradient(#0010f7, rgba(255, 255, 255, 0));
|
||||
border-radius: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
background: #ffffff;
|
||||
border-radius: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hp-profile-menu-header .avatar-item img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.hp-profile-menu-body .active {
|
||||
background: #ebfafa;
|
||||
color: #0010f7 !important;
|
||||
}
|
||||
.hp-profile-menu-body .active .hp-menu-item-line {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-profile-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-content-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-profile-content-list ul li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hp-profile-content-list ul li span {
|
||||
display: block;
|
||||
}
|
||||
.hp-profile-content-list ul li span:nth-child(1) {
|
||||
min-width: 200px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-content-list ul li {
|
||||
display: block;
|
||||
}
|
||||
.hp-profile-content-list ul li span:nth-child(1) {
|
||||
min-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-notifications {
|
||||
max-width: 424px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-action-btn {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.hp-profile-action-btn button {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-connect-btn {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 360px;
|
||||
flex: 0 0 360px;
|
||||
}
|
||||
.hp-profile-connect-btn svg {
|
||||
min-width: 14px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hp-profile-connect-btn {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-mobile-menu-btn {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hp-profile-mobile-menu-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.hp-profile-mobile-menu {
|
||||
min-width: 256px;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.hp-profile-mobile-menu .hp-profile-menu {
|
||||
padding: 0 0 35px !important;
|
||||
display: block;
|
||||
min-height: initial;
|
||||
border: none;
|
||||
}
|
||||
.hp-profile-mobile-menu .hp-profile-menu .hp-menu-header-btn, .hp-profile-mobile-menu .hp-profile-menu-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hp-profile-activity .table-responsive::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.hp-select-box-item > input:checked ~ label .card {
|
||||
border-color: #0010f7 !important;
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
|
||||
box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
|
||||
}
|
||||
.hp-select-box-item ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* Apex Charts */
|
||||
.apexcharts-canvas {
|
||||
/* Tooltip Color */
|
||||
/* Toolbar Download Option Color */
|
||||
/* Text font family */
|
||||
}
|
||||
.apexcharts-canvas .apexcharts-tooltip {
|
||||
color: #636e72;
|
||||
}
|
||||
.apexcharts-canvas .apexcharts-toolbar .apexcharts-menu .apexcharts-menu-item {
|
||||
color: #636e72;
|
||||
background-color: #0010f7;
|
||||
}
|
||||
.apexcharts-canvas .apexcharts-xaxistooltip-text {
|
||||
font-family: "Manrope", sans-serif !important;
|
||||
color: #636e72 !important;
|
||||
}
|
||||
.apexcharts-canvas .apexcharts-text,
|
||||
.apexcharts-canvas .apexcharts-datalabel {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
}
|
||||
.apexcharts-canvas .apexcharts-tooltip-text {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
}
|
||||
.apexcharts-canvas .hp-donut-chart .apexcharts-tooltip {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.hp-chart-text-color .apexcharts-text {
|
||||
fill: #b2bec3 !important;
|
||||
}
|
||||
|
||||
/* apex charts tooltip */
|
||||
.apexcharts-xaxistooltip {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Toolbar Z-index */
|
||||
.apexcharts-toolbar {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Analytics Visiters Chart */
|
||||
.hp-analytics-visiters-chart {
|
||||
height: 402px;
|
||||
}
|
||||
.hp-analytics-visiters-chart .apexcharts-text {
|
||||
fill: #b2bec3 !important;
|
||||
}
|
||||
|
||||
#analytics-visiters-chart .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Heatmap Chart */
|
||||
.hp-heatmap-chart .apexcharts-legend.position-bottom.apexcharts-align-center,
|
||||
.hp-heatmap-chart .apexcharts-legend.position-top.apexcharts-align-center {
|
||||
-webkit-box-pack: justify !important;
|
||||
-ms-flex-pack: justify !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0px 50px;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
.hljs{display:block;overflow-x:auto;padding:.5em;background:#eaeef3;color:#00193a}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title{font-weight:700}.hljs-comment{color:#738191}.hljs-addition,.hljs-built_in,.hljs-literal,.hljs-name,.hljs-quote,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-tag,.hljs-title,.hljs-type{color:#0048ab}.hljs-attribute,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-meta,.hljs-regexp,.hljs-subst,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#4c81c9}.hljs-emphasis{font-style:italic}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,16 @@
|
||||
// Notification
|
||||
$(".toast-btn").click(function () {
|
||||
let btnItem = $(this),
|
||||
btnId = btnItem.data("id");
|
||||
|
||||
$(".toast").each(function () {
|
||||
let eachItem = $(this),
|
||||
eachItemId = eachItem.data("id");
|
||||
|
||||
if (eachItemId) {
|
||||
if (btnId === eachItemId) {
|
||||
new bootstrap.Toast($(this)).show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,191 @@
|
||||
// Sider
|
||||
$(function () {
|
||||
// Menu Link
|
||||
$(".hp-sidebar-container li a").each(function () {
|
||||
if (window.location.pathname.split("/")[window.location.pathname.split("/").length - 1] == $(this).attr("href")) {
|
||||
$(this).addClass("active")
|
||||
|
||||
$(this).parents(".submenu-children").slideDown()
|
||||
$(this).parents(".submenu-children").addClass("active")
|
||||
$(this).parents(".submenu-children").prev("a").addClass("active arrow-active")
|
||||
}
|
||||
});
|
||||
|
||||
// Menu Dropdown
|
||||
$(".hp-sidebar-container li a").click(function () {
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$(this).toggleClass("arrow-active")
|
||||
$(this).next(".submenu-children").slideToggle(300)
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Button
|
||||
$(".hp-mobile-sidebar-button").click(function () {
|
||||
$("body").removeClass("collapsed-active collapse-btn-none")
|
||||
});
|
||||
|
||||
// Collapsed
|
||||
$(".hp-sidebar .hp-sidebar-collapse-button").click(function () {
|
||||
$("body").toggleClass("collapsed-active")
|
||||
$(".hp-sidebar .submenu-children").slideUp()
|
||||
$(".hp-sidebar li a").removeClass("arrow-active")
|
||||
$(".hp-sidebar .tooltip-item").toggleClass("in-active")
|
||||
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
$(".hp-sidebar .submenu-children").addClass("d-none")
|
||||
} else {
|
||||
$(".hp-sidebar .submenu-children").removeClass("d-none")
|
||||
$(".hp-sidebar .submenu-children").css("display", "none")
|
||||
}
|
||||
});
|
||||
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
$(".hp-sidebar .submenu-children").addClass("d-none")
|
||||
$(".hp-sidebar .tooltip-item").removeClass("in-active")
|
||||
}
|
||||
|
||||
// Collapsed Menu Dropdown
|
||||
let position = "left";
|
||||
let sidebarWidth;
|
||||
|
||||
if ($("html").attr("dir") === "rtl") {
|
||||
position = "right";
|
||||
}
|
||||
|
||||
$(".hp-sidebar-container li a").mouseenter(function () {
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
sidebarWidth = parseInt($(this).parents(".hp-sidebar").width()) + 38;
|
||||
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$("body").append(
|
||||
`
|
||||
<div class="hp-sidebar-dropdown-container position-absolute">
|
||||
<ul>` +
|
||||
$(this).next(".submenu-children").html() +
|
||||
`</ul>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
if ($(this).offset().top + $(".hp-sidebar-dropdown-container").height() > $(window).height()) {
|
||||
$(".hp-sidebar-dropdown-container > ul").css({
|
||||
maxHeight: "calc(100vh - " + ($(window).height() - $(this).offset().top) + "px)",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
"top", $(this).offset().top - $(".hp-sidebar-dropdown-container").height() + 50 + "px"
|
||||
);
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, (sidebarWidth - 38) + "px"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + sidebarWidth + "px)"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container > ul").css({
|
||||
maxHeight: "none",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
"top", $(this).offset().top + "px"
|
||||
);
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, (sidebarWidth - 38) + "px"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + sidebarWidth + "px)"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//--
|
||||
|
||||
let levelNumber;
|
||||
$(".hp-sidebar-dropdown-container li a").mouseenter(function () {
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$(this).css("pointer-events", "none");
|
||||
|
||||
levelNumber = $(this)
|
||||
.next(".collapse")
|
||||
.find(".submenu-children")
|
||||
.data("level");
|
||||
|
||||
$("body").append(
|
||||
`
|
||||
<div class="hp-sidebar-dropdown-container position-absolute" data-level="` +
|
||||
levelNumber +
|
||||
`">
|
||||
<ul>` +
|
||||
$(this).next(".submenu-children").html() +
|
||||
`</ul>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
if ($(this).offset().top + $(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").height() > $(window).height()) {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "] > ul").css({
|
||||
maxHeight: "calc(100vh - " + ($(window).height() - $(this).offset().top) + "px)",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
"top", $(this).offset().top - $(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").height() + 50 + "px"
|
||||
);
|
||||
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + ($(this).width() + sidebarWidth - 38 + 27) + "px)"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + (sidebarWidth - 37) * parseInt(levelNumber) + "px)"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "] > ul").css({
|
||||
maxHeight: "none",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css("top", $(this).offset().top + "px");
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + ($(this).width() + sidebarWidth - 38 + 27) + "px)"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + (sidebarWidth - 37) * parseInt(levelNumber) + "px)"
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container li a").css("pointer-events", "all");
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).mousemove(function (e) {
|
||||
let menuItem = $(".hp-sidebar-container li a");
|
||||
let dropdownContainer = $(".hp-sidebar-dropdown-container");
|
||||
|
||||
if (
|
||||
!menuItem.is(event.target) &&
|
||||
!menuItem.has(event.target).length &&
|
||||
!dropdownContainer.is(event.target) &&
|
||||
!dropdownContainer.has(event.target).length
|
||||
) {
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
$(".hp-sidebar-dropdown-container li a").css("pointer-events", "all");
|
||||
}
|
||||
});
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
const basicNotification='\n<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small>11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n</div>\n\n',live='\n<button type="button" class="btn btn-primary toast-btn" data-id="liveToast" id="liveToastBtn">Show live toast</button>\n\n<div class="position-fixed bottom-0 end-0 p-16" style="z-index: 99">\n <div data-id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small>11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n </div>\n</div>\n\n',translucent='\n<div class="hp-bg-black-100 hp-bg-dark-0 rounded p-32">\n <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n </div>\n</div>\n\n',stacking='\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-1">Toast 1</button>\n\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-2">Toast 2</button>\n\n<div class="position-fixed top-0 end-0 p-16" style="z-index: 99">\n <div class="toast-container">\n <div data-id="stacking-1" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">just now</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n See? Just like this.\n </div>\n </div>\n\n <div data-id="stacking-2" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">2 seconds ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Heads up, toasts will stack automatically\n </div>\n </div>\n </div>\n</div>\n\n';$("pre code").each((function(){"notification"===$(this).data("component")&&($(this).text($.trim($(this).data("code"))),"basic"===$(this).data("code")&&$(this).text(basicNotification),"live"===$(this).data("code")&&$(this).text(live),"translucent"===$(this).data("code")&&$(this).text(translucent),"stacking"===$(this).data("code")&&$(this).text(stacking))}));
|
||||
@@ -0,0 +1 @@
|
||||
$(".show-code-btn").click((function(){$(this).parent().nextAll(".hljs-container").fadeToggle(300)}));
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 386 B |
Binary file not shown.
|
After Width: | Height: | Size: 400 B |
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
Binary file not shown.
|
After Width: | Height: | Size: 388 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,264 @@
|
||||
const sdk = require('matrix-js-sdk');
|
||||
const fs = require('fs');
|
||||
// const { ipcRenderer } = require('electron');
|
||||
|
||||
function saveScreenshot(dataUrl) {
|
||||
// Obtener el contenido base64 de la imagen
|
||||
const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');
|
||||
|
||||
// Especificar la ruta donde se guardará la captura de pantalla
|
||||
const filePath = 'screenshot.png';
|
||||
|
||||
// Escribir la imagen en el disco
|
||||
fs.writeFile(filePath, base64Data, 'base64', (error) => {
|
||||
if (error) {
|
||||
console.error('Error saving screenshot:', error);
|
||||
} else {
|
||||
console.log('Screenshot saved successfully:', filePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#helpdesk').on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
$('#loader').css('display', 'flex');
|
||||
var description = $('#description').val();
|
||||
|
||||
try {
|
||||
|
||||
const client = sdk.createClient({
|
||||
baseUrl: "https://matrixadm.mind.brm.co",
|
||||
accessToken: "syt_YnJhamFuLmFsZGFuYQ_GsGDJXWtpWkuTayxUIff_4OAXsg",
|
||||
userId: "@brajan.aldana:matrixadm.mind.brm.co"
|
||||
});
|
||||
|
||||
client.on("sync", (state, prevState, res) => {
|
||||
if (state === "SYNCING" && prevState === "SYNCING") {
|
||||
// La sincronización está en progreso
|
||||
} else if (state === "SYNCING" && prevState !== "SYNCING") {
|
||||
// La sincronización acaba de comenzar
|
||||
} else if (state === "PREPARED" && prevState === "SYNCING") {
|
||||
// La sincronización ha terminado, ahora puedes detener el cliente
|
||||
client.stopClient();
|
||||
}
|
||||
});
|
||||
|
||||
var roomid = "!EKItKhtVBxGSvkbPtx:matrixadm.mind.brm.co";
|
||||
|
||||
client.startClient();
|
||||
|
||||
const info_msg = {
|
||||
"body": "Status: **success**<br/> Build: by xoxys",
|
||||
"msgtype": "m.notice",
|
||||
"format": "org.matrix.custom.html",
|
||||
"formatted_body": "<h4>Solicitud HelpDesk</h4><p>Usuario: <strong>EC9596Q</strong><br/>Cedula: <strong>1022969596</strong><br/>" + description + "</p>\n",
|
||||
};
|
||||
|
||||
client.sendMessage(roomid, info_msg);
|
||||
|
||||
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
const filename = "C:/RpaClaro/video.webm";
|
||||
|
||||
const contentBuffer = fs.readFileSync(filename);
|
||||
const blob = new Blob([contentBuffer], { type: "video/webm" });
|
||||
|
||||
client.uploadContent(blob, {
|
||||
name: "video.webm",
|
||||
type: "video/webm"
|
||||
}).then(function (url) {
|
||||
var content = {
|
||||
msgtype: "m.video",
|
||||
body: filename,
|
||||
info: {
|
||||
mimetype: "video/webm"
|
||||
},
|
||||
url: url.content_uri
|
||||
};
|
||||
client.sendMessage(roomid, content);
|
||||
});
|
||||
console.log('envio video');
|
||||
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
const filename = "C:/RpaClaro/logs.txt";
|
||||
|
||||
const contentBuffer = fs.readFileSync(filename);
|
||||
const blob = new Blob([contentBuffer], { type: "text/plain" });
|
||||
|
||||
client.uploadContent(blob, {
|
||||
name: "logs.txt",
|
||||
type: "text/plain"
|
||||
}).then(function (url) {
|
||||
var content = {
|
||||
msgtype: "m.file",
|
||||
body: filename,
|
||||
info: {
|
||||
mimetype: "text/plain"
|
||||
},
|
||||
url: url.content_uri
|
||||
};
|
||||
client.sendMessage(roomid, content);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
client.stopClient();
|
||||
console.log('termino');
|
||||
|
||||
}, 5000);
|
||||
console.log('envio txt');
|
||||
|
||||
}, 2000);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
client.stopClient();
|
||||
console.log('termino');
|
||||
$('#loader').css('display', 'none');
|
||||
$('#description').val('');
|
||||
$('#close_drawer').trigger('click');
|
||||
$('#description').attr('disabled', 'disabled');
|
||||
$('#send').attr('disabled', 'disabled');
|
||||
$('#record').css('display', 'block');
|
||||
}, 5000);
|
||||
} catch (e) {
|
||||
console.error('Problema al enviar info Element', e);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#screenshot').on('click', function (event) {
|
||||
console.log('screenshot');
|
||||
ipcRenderer.send('screenshot');
|
||||
ipcRenderer.once('screenshot-response', (event, response) => {
|
||||
console.log('Respuesta del proceso principal:', response);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
function handleStream(stream) {
|
||||
const video = document.querySelector('video')
|
||||
video.srcObject = stream
|
||||
video.onloadedmetadata = (e) => video.play()
|
||||
}
|
||||
|
||||
function handleError(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
$('#record').on('click', function (event) {
|
||||
console.log('record');
|
||||
$('#record').css('display', 'none');
|
||||
$('#close_drawer').trigger('click');
|
||||
ipcRenderer.send('newNotification', { 'title': 'Recopilando evidencias', 'body': 'Grabando pantalla...' });
|
||||
ipcRenderer.send('newLog', {window:'main', log: '-----------------------', msg: '-----------------------', splash: false});
|
||||
ipcRenderer.send('newLog', {window:'main', log: 'SOLICITUD HELPDESK', msg: 'SOLICITUD HELPDESK', splash: false});
|
||||
ipcRenderer.send('newLog', {window:'main', log: '-----------------------', msg: '-----------------------', splash: false});
|
||||
ipcRenderer.send('newLog', {window:'main', log: 'Recopilando evidencias', msg: 'Recopilando evidencias', splash: false});
|
||||
ipcRenderer.send('record');
|
||||
ipcRenderer.once('record-response', async (event, response) => {
|
||||
console.log('devolvio ventana');
|
||||
ipcRenderer.send('newLog', {window:'main', log: 'Respuesta del proceso principal: '+ response, 'msg': 'Respuesta del proceso principal', splash: false});
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: false,
|
||||
video: {
|
||||
mandatory: {
|
||||
chromeMediaSource: 'desktop',
|
||||
chromeMediaSourceId: response,
|
||||
minWidth: 1280,
|
||||
maxWidth: 1280,
|
||||
minHeight: 720,
|
||||
maxHeight: 720,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const mediaRecorder = new MediaRecorder(stream);
|
||||
const chunks = [];
|
||||
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
chunks.push(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
const blob = new Blob(chunks, { type: 'video/webm' });
|
||||
blob.arrayBuffer().then((buffer) => {
|
||||
ipcRenderer.send('save-video', buffer);
|
||||
ipcRenderer.send('newLog', {window:'main', log:'Termino recopilacion', msg: 'Termino recopilacion', splash: false});
|
||||
|
||||
$('#open_drawer').text('Solicitar HelpDesk');
|
||||
$('#open_drawer').trigger('click');
|
||||
$('#description').removeAttr('disabled');
|
||||
$('#send').removeAttr('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
mediaRecorder.start();
|
||||
|
||||
// Después de un tiempo (por ejemplo, 5000 ms), detener la grabación
|
||||
setTimeout(async () => {
|
||||
mediaRecorder.stop();
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
}, 22000);
|
||||
} catch (e) {
|
||||
console.error('Error:', e);
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
ipcRenderer.once('send-video', async (event, response) => {
|
||||
ipcRenderer.send('newLog', {window:'splash', log:'Enviando video', msg: 'Enviando video', splash: true});
|
||||
|
||||
const client = sdk.createClient({
|
||||
baseUrl: "https://matrixadm.mind.brm.co",
|
||||
accessToken: "syt_YnJhamFuLmFsZGFuYQ_GsGDJXWtpWkuTayxUIff_4OAXsg",
|
||||
userId: "@brajan.aldana:matrixadm.mind.brm.co"
|
||||
});
|
||||
|
||||
client.startClient();
|
||||
|
||||
client.once('sync', function (state, prevState, res) {
|
||||
console.log(state);
|
||||
});
|
||||
|
||||
var roomid = "!EKItKhtVBxGSvkbPtx:matrixadm.mind.brm.co";
|
||||
|
||||
const filename = "C:/Users/LENOVO/Desktop/REPOS/rpa-claro/video.webm";
|
||||
|
||||
const contentBuffer = fs.readFileSync(filename);
|
||||
const blob = new Blob([contentBuffer], { type: "video/webm" });
|
||||
|
||||
client.uploadContent(blob, {
|
||||
name: "video.webm",
|
||||
type: "video/webm"
|
||||
}).then(function (url) {
|
||||
var content = {
|
||||
msgtype: "m.video",
|
||||
body: filename,
|
||||
info: {
|
||||
mimetype: "video/webm"
|
||||
},
|
||||
url: url.content_uri
|
||||
};
|
||||
client.sendMessage(roomid, content);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
client.stopClient();
|
||||
console.log('termino');
|
||||
}, 2000);
|
||||
ipcRenderer.send('newLog', { 'log': 'Envio video', 'msg': '' });
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
const $ = require('jquery');
|
||||
const axios = require('axios');
|
||||
const os = require('os');
|
||||
|
||||
$('#loader').css('display', 'flex');
|
||||
|
||||
$(document).on("click", ".app_click", function () {
|
||||
ipcRenderer.send('newNotification', { 'title': 'Abriendo aplicativo', 'body': $(this).attr('name_app') });
|
||||
if ($(this).attr('integrado') == 'true') {
|
||||
data_code = $(this).attr('code')
|
||||
console.log(data_code);
|
||||
ipcRenderer.send('openNewWindow', data_code);
|
||||
} else {
|
||||
error_window = {
|
||||
title: 'Error de aplicativo',
|
||||
content: 'No tienes habilitado este aplicativo, informa al coordinador'
|
||||
}
|
||||
ipcRenderer.send('error_window', error_window);
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-input').on('input', function () {
|
||||
var textoBusqueda = $(this).val().toUpperCase();
|
||||
$('.shortcut').each(function () {
|
||||
var textoElemento = $(this).find('h5').text().toUpperCase();
|
||||
var elemento = $(this);
|
||||
elemento.toggle(textoElemento.includes(textoBusqueda));
|
||||
});
|
||||
});
|
||||
|
||||
function updateButtonCounts() {
|
||||
const totalCount = $('.shortcut').length;
|
||||
const activeCount = $('.shortcut[integrado="true"]').length;
|
||||
const inactiveCount = $('.shortcut[integrado="false"]').length;
|
||||
|
||||
$('#all_apps span').text(`Todos (${totalCount})`);
|
||||
$('#active_apps span').text(`Activos (${activeCount})`);
|
||||
$('#inactive_apps span').text(`Inactivos (${inactiveCount})`);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$('#active_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="true"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#inactive_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="false"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#all_apps').on('click', function () {
|
||||
$('.shortcut').show();
|
||||
});
|
||||
|
||||
$('#search-input').on('input', function () {
|
||||
var textoBusqueda = $(this).val().toUpperCase();
|
||||
$('.shortcut').each(function () {
|
||||
var textoElemento = $(this).find('h5').text().toUpperCase();
|
||||
var elemento = $(this);
|
||||
elemento.toggle(textoElemento.includes(textoBusqueda));
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,236 @@
|
||||
const $ = require('jquery');
|
||||
const axios = require('axios');
|
||||
const os = require('os');
|
||||
// const remote = require('electron').remote;
|
||||
|
||||
|
||||
// const FindInPage = require('electron-find').FindInPage;
|
||||
|
||||
// let findInPage = new FindInPage(remote.getCurrentWebContents());
|
||||
|
||||
// ipcRenderer.on('on-find', (e, args) => {
|
||||
// findInPage.openFindWindow();
|
||||
// });
|
||||
|
||||
$('#loader').css('display', 'flex');
|
||||
async function index() {
|
||||
try {
|
||||
const urlOkan = "https://io.okan.tools/api/auth/electron";
|
||||
const token = 'HrZTvmBNyQaM6jPI7sHo5ywN35ht/cplIBFeE+4Ufx8=';
|
||||
const urlGetProfile = 'https://io.okan.tools/api/auth/users/electron';
|
||||
let documento;
|
||||
let profile;
|
||||
try {
|
||||
const responseOkan = await axios.post(urlOkan, { user: process.env.USUARIO }, { headers: { 'Authorization': token } });
|
||||
if (responseOkan.data.cod == '0') {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Token obtenido: ' + responseOkan.data.data, msg: 'Información del documento encontrado...', splash: true });
|
||||
console.log('Token: ' + responseOkan.data.data);
|
||||
const token_okan = 'Bearer ' + responseOkan.data.data;
|
||||
console.log(token_okan);
|
||||
try {
|
||||
const responseGetProfile = await axios.get(urlGetProfile, { headers: { 'Authorization': token_okan } });
|
||||
if (responseGetProfile.data.cod == '0') {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Perfil obtenido: ' + responseGetProfile.data.data.profile, msg: 'Información del documento encontrado...', splash: true });
|
||||
console.log('Profile: ' + JSON.stringify(responseGetProfile.data.data));
|
||||
documento = responseGetProfile.data.data.document_number;
|
||||
profile = responseGetProfile.data.data.profile.id;
|
||||
} else {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Ha ocurrido un error: ' + responseGetProfile.data.message, msg: 'Ha ocurrido un error', splash: true });
|
||||
}
|
||||
} catch (e) {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error al obtener el perfil: ' + e, msg: 'Error al obtener el perfil: '+e, splash: true });
|
||||
}
|
||||
} else {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Ha ocurrido un error: ' + responseGetProfile.data.message, msg: 'Ha ocurrido un error', splash: true });
|
||||
}
|
||||
} catch (error) {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error al obtener el token: ' + error, msg: 'Error al obtener el token: '+error, splash: true });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const foundElement = datos.find(item => item.nickname === nicknameToFind);
|
||||
|
||||
// if (foundElement) {
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Usuario encontrado: ' + nicknameToFind, msg: 'Información del usuario encontrada...', splash: true });
|
||||
// if (foundElement.document_number) {
|
||||
// documento = foundElement.document_number;
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Documento encontrado: ' + documento, msg: 'Información del documento encontrado...', splash: true });
|
||||
// } else {
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Documento no encontrado', msg: 'No se pudo encontrar el documento del usuario...', splash: true });
|
||||
// }
|
||||
// } else {
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Usuario no encontrado', msg: 'No se pudo obtener el usuario...', splash: true });
|
||||
// }
|
||||
|
||||
// const urlProfile = `https://io.okan.tools/api/auth/user/${documento}`;
|
||||
// const responseProfile = await axios.get(urlProfile, { headers: { "Accept": "*/*", "Content-Type": "application/json" } });
|
||||
// if (responseProfile.data['cod'] == '0') {
|
||||
// profile = responseProfile.data['data'];
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Perfil encontrado: ' + profile.profile.id, msg: 'Información del perfil encontrado...', splash: true });
|
||||
// }
|
||||
|
||||
const urlAplicativos = `https://adm.okan.tools/wp-json/okanapiwp/v1/aplicativos/${documento}/${profile}`;
|
||||
const responseAplicativos = await axios.get(urlAplicativos, { headers: { "Accept": "*/*", "Content-Type": "application/json" } });
|
||||
|
||||
var apps_okan = [];
|
||||
var type_app;
|
||||
var url_service;
|
||||
var code_app;
|
||||
if (responseAplicativos.data['cod'] == '0') {
|
||||
const promises = responseAplicativos.data['data'].map(async element => {
|
||||
if (element['rpa'] == "true") {
|
||||
if (element['url'].includes('RpaClaro://?code=')) {
|
||||
|
||||
var code_temp = element['url'];
|
||||
code_app = code_temp.slice(code_temp.indexOf("=") + 1);
|
||||
if(code_app != 'IRR123' && code_app != 'ACC098' && code_app != 'XLT001' && code_app != 'CTB002' && code_app != 'AVY003'){
|
||||
url_service = "https://rpa.mind.brm.co/app";
|
||||
type_app = 'apps';
|
||||
} else {
|
||||
url_service = "https://rpa.mind.brm.co/desk";
|
||||
type_app = 'desk';
|
||||
}
|
||||
|
||||
apps_okan.push(
|
||||
{
|
||||
'code_app': code_app,
|
||||
'name': element['nombre_app'],
|
||||
'type_app': type_app,
|
||||
'url_service': url_service,
|
||||
'url_logo': element['logo']
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var status_integrado;
|
||||
var status;
|
||||
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Aplicativos obtenidos: ' + apps_okan.length, msg: 'Obteniendo aplicaciones...', splash: true });
|
||||
|
||||
|
||||
const promises = [];
|
||||
|
||||
async function makeRequest(element) {
|
||||
try {
|
||||
|
||||
const bodyContent = {
|
||||
code: element.code_app,
|
||||
user: process.env.USUARIO,
|
||||
};
|
||||
|
||||
console.log('_____________________________');
|
||||
|
||||
await axios.post(element.url_service, bodyContent, { headers: { "Accept": "*/*", "Content-Type": "application/json" } })
|
||||
.then(response => {
|
||||
console.log(response.data); // Access the response data here
|
||||
status = response.data == 'Invalid parameter' ? false : true;
|
||||
console.log(status);
|
||||
status_integrado = status ? 'integrado' : 'no_integrado';
|
||||
console.log(status_integrado);
|
||||
|
||||
console.log('App: ' + element.code_app + ' - ' + status + ' - ' + element.name);
|
||||
$('#aplicativos').append(`<div class="col-3 col-md-3 col-xl-3 shortcut app_click ${status_integrado}" name_app="${element.name}" type_app="${element.type_app}" integrado="${status}" code="${element.code_app}"><div class="card border-none text-center"><div class="card-body hp-knowledge-basic-card"><img src="${element.url_logo}" class="logo"><h5>${element.name}</h5></div></div></div>`);
|
||||
})
|
||||
.catch(error => {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error al consultar aplicación', msg: 'Error al consultar aplicación...', splash: true });
|
||||
status = false;
|
||||
status_integrado = 'no_integrado';
|
||||
console.log('App: ' + element.code_app + ' - ' + status + ' - ' + element.name);
|
||||
$('#aplicativos').append(`<div class="col-3 col-md-3 col-xl-3 shortcut app_click ${status_integrado}" name_app="${element.name}" type_app="${element.type_app}" integrado="${status}" code="${element.code_app}"><div class="card border-none text-center"><div class="card-body hp-knowledge-basic-card"><img src="${element.url_logo}" class="logo"><h5>${element.name}</h5></div></div></div>`);
|
||||
});
|
||||
console.log('_____________________________');
|
||||
|
||||
} catch (e) {
|
||||
// ipcRenderer.send('newLog', { window: 'splash', log: 'Error al consultar aplicación', msg: 'Error al consultar aplicación...', splash: true });
|
||||
// status = false;
|
||||
// status_integrado = 'no_integrado';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function processApps() {
|
||||
for (const element of apps_okan) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
// await makeRequest(element);
|
||||
}
|
||||
|
||||
// Lógica de ordenación
|
||||
var divs = $('.shortcut').sort(function (a, b) {
|
||||
var textoA = $(a).find('h5').text().toUpperCase();
|
||||
var textoB = $(b).find('h5').text().toUpperCase();
|
||||
return (textoA < textoB) ? -1 : (textoA > textoB) ? 1 : 0;
|
||||
});
|
||||
|
||||
// Limpia el contenedor original
|
||||
$('.shortcut').remove();
|
||||
|
||||
// Agrega los divs ordenados de nuevo al contenedor
|
||||
divs.appendTo('#aplicativos');
|
||||
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Termino de ordenar', msg: 'Estamos terminando...', splash: true });
|
||||
|
||||
// Esperar un poco antes de emitir el evento 'ordeno'
|
||||
setTimeout(function () {
|
||||
console.log('ordeno apps');
|
||||
ipcRenderer.send('ordeno');
|
||||
$('#loader').css('display', 'none');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
processApps();
|
||||
} catch (error) {
|
||||
console.log("Error en la ejecución: " + error);
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error en la ejecución', msg: 'Ha ocurrido un error: ' + error, splash: true });
|
||||
}
|
||||
}
|
||||
index();
|
||||
|
||||
$(document).on("click", ".app_click", function () {
|
||||
ipcRenderer.send('newNotification', { 'title': 'Abriendo aplicativo', 'body': $(this).attr('name_app') });
|
||||
console.log('click');
|
||||
console.log($(this).attr('integrado'));
|
||||
if ($(this).attr('integrado') == 'true') {
|
||||
data_code = $(this).attr('code')
|
||||
console.log(data_code);
|
||||
ipcRenderer.send('openNewWindow', data_code);
|
||||
} else {
|
||||
error_window = {
|
||||
title: 'Error de aplicativo',
|
||||
content: 'No tienes habilitado este aplicativo, informa al coordinador'
|
||||
}
|
||||
ipcRenderer.send('error_window', error_window);
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-input').on('input', function () {
|
||||
var textoBusqueda = $(this).val().toUpperCase();
|
||||
$('.shortcut').each(function () {
|
||||
var textoElemento = $(this).find('h5').text().toUpperCase();
|
||||
var elemento = $(this);
|
||||
elemento.toggle(textoElemento.includes(textoBusqueda));
|
||||
});
|
||||
});
|
||||
|
||||
$('#active_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="true"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#inactive_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="false"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#all_apps').on('click', function () {
|
||||
$('.shortcut').show();
|
||||
});
|
||||
@@ -0,0 +1,190 @@
|
||||
const $ = require('jquery');
|
||||
const axios = require('axios');
|
||||
const os = require('os');
|
||||
|
||||
let data_apps_user = []; // Initialize as an empty array
|
||||
|
||||
ipcRenderer.on('data-apps', (event, data_apps) => {
|
||||
data_apps_user = data_apps;
|
||||
});
|
||||
|
||||
$('#loader').css('display', 'flex');
|
||||
async function index() {
|
||||
try {
|
||||
const urlOkan = "https://io.okan.tools/api/auth/electron";
|
||||
const token = 'HrZTvmBNyQaM6jPI7sHo5ywN35ht/cplIBFeE+4Ufx8=';
|
||||
const urlGetProfile = 'https://io.okan.tools/api/auth/users/electron';
|
||||
let documento;
|
||||
let profile;
|
||||
try {
|
||||
const responseOkan = await axios.post(urlOkan, { user: process.env.USUARIO }, { headers: { 'Authorization': token } });
|
||||
if (responseOkan.data.cod == '0') {
|
||||
const token_okan = 'Bearer ' + responseOkan.data.data;
|
||||
try {
|
||||
const responseGetProfile = await axios.get(urlGetProfile, { headers: { 'Authorization': token_okan } });
|
||||
if (responseGetProfile.data.cod == '0') {
|
||||
documento = responseGetProfile.data.data.document_number;
|
||||
profile = responseGetProfile.data.data.profile.id;
|
||||
} else {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Ha ocurrido un error: ' + responseGetProfile.data.message, msg: 'Ha ocurrido un error', splash: true });
|
||||
}
|
||||
} catch (e) {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error al obtener el perfil: ' + e, msg: 'Error al obtener el perfil: ' + e, splash: true });
|
||||
}
|
||||
} else {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Ha ocurrido un error: ' + responseGetProfile.data.message, msg: 'Ha ocurrido un error', splash: true });
|
||||
}
|
||||
} catch (error) {
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error al obtener el token: ' + error, msg: 'Error al obtener el token: ' + error, splash: true });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const urlAplicativos = `https://adm.okan.tools/wp-json/okanapiwp/v1/aplicativos/${documento}/${profile}`;
|
||||
const responseAplicativos = await axios.get(urlAplicativos, { headers: { "Accept": "*/*", "Content-Type": "application/json" } });
|
||||
|
||||
var apps_okan = [];
|
||||
var type_app;
|
||||
var url_service;
|
||||
var code_app;
|
||||
let new_apps = [];
|
||||
if (responseAplicativos.data['cod'] == '0') {
|
||||
console.log('_________________');
|
||||
console.log('Aplicativos:');
|
||||
console.log(responseAplicativos.data['data']);
|
||||
console.log('_________________');
|
||||
|
||||
console.log('data_apps:', data_apps_user);
|
||||
|
||||
// Filter RPA apps and extract codes in one pass
|
||||
const new_apps = responseAplicativos.data['data'].filter(element =>
|
||||
element['url'].includes('RpaClaro://?code=')
|
||||
);
|
||||
|
||||
console.log(new_apps);
|
||||
|
||||
// Process each app from new_apps
|
||||
for (const app of new_apps) {
|
||||
// Check if app code exists in data_apps_user
|
||||
const appExists = data_apps_user.web?.some(webApp => webApp.code === app.url.split('=')[1]) ||
|
||||
data_apps_user.desk?.some(deskApp => deskApp.code === app.url.split('=')[1]);
|
||||
|
||||
// Extract app information
|
||||
const appInfo = {
|
||||
nombre_app: app.nombre_app,
|
||||
// type_app: app.tipo,
|
||||
code_app: app.url.split('=')[1],
|
||||
logo: app.logo,
|
||||
status: appExists,
|
||||
status_integrado: appExists ? 'integrado' : 'no_integrado',
|
||||
};
|
||||
|
||||
// Add to apps_okan array
|
||||
apps_okan.push(appInfo);
|
||||
|
||||
// Add HTML element for the app
|
||||
$('#aplicativos').append(`
|
||||
<div class="col-3 col-md-3 col-xl-3 shortcut app_click ${appInfo.status_integrado}"
|
||||
name_app="${appInfo.nombre_app}"
|
||||
integrado="${appInfo.status}"
|
||||
code="${appInfo.code_app}">
|
||||
<div class="card border-none text-center">
|
||||
<div class="card-body hp-knowledge-basic-card">
|
||||
<img src="${appInfo.logo}" class="logo">
|
||||
<h5>${appInfo.nombre_app}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
console.log(apps_okan);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function processApps() {
|
||||
for (const element of apps_okan) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
// await makeRequest(element);
|
||||
}
|
||||
|
||||
// Lógica de ordenación
|
||||
var divs = $('.shortcut').sort(function (a, b) {
|
||||
var textoA = $(a).find('h5').text().toUpperCase();
|
||||
var textoB = $(b).find('h5').text().toUpperCase();
|
||||
return (textoA < textoB) ? -1 : (textoA > textoB) ? 1 : 0;
|
||||
});
|
||||
|
||||
// Limpia el contenedor original
|
||||
$('.shortcut').remove();
|
||||
|
||||
// Agrega los divs ordenados de nuevo al contenedor
|
||||
divs.appendTo('#aplicativos');
|
||||
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Termino de ordenar', msg: 'Estamos terminando...', splash: true });
|
||||
|
||||
// Esperar un poco antes de emitir el evento 'ordeno'
|
||||
setTimeout(function () {
|
||||
console.log('ordeno apps');
|
||||
ipcRenderer.send('ordeno');
|
||||
$('#loader').css('display', 'none');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
processApps();
|
||||
} catch (error) {
|
||||
console.log("Error en la ejecución: " + error);
|
||||
ipcRenderer.send('newLog', { window: 'splash', log: 'Error en la ejecución', msg: 'Ha ocurrido un error: ' + error, splash: true });
|
||||
}
|
||||
}
|
||||
index();
|
||||
|
||||
$(document).on("click", ".app_click", function () {
|
||||
ipcRenderer.send('newNotification', { 'title': 'Abriendo aplicativo', 'body': $(this).attr('name_app') });
|
||||
console.log('click');
|
||||
console.log($(this).attr('integrado'));
|
||||
if ($(this).attr('integrado') == 'true') {
|
||||
data_code = $(this).attr('code')
|
||||
console.log(data_code);
|
||||
ipcRenderer.send('openNewWindow', data_code);
|
||||
} else {
|
||||
error_window = {
|
||||
title: 'Error de aplicativo',
|
||||
content: 'No tienes habilitado este aplicativo, informa al coordinador'
|
||||
}
|
||||
ipcRenderer.send('error_window', error_window);
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-input').on('input', function () {
|
||||
var textoBusqueda = $(this).val().toUpperCase();
|
||||
$('.shortcut').each(function () {
|
||||
var textoElemento = $(this).find('h5').text().toUpperCase();
|
||||
var elemento = $(this);
|
||||
elemento.toggle(textoElemento.includes(textoBusqueda));
|
||||
});
|
||||
});
|
||||
|
||||
$('#active_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="true"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#inactive_apps').on('click', function () {
|
||||
var elementosFiltrados = $('.shortcut[integrado="false"]');
|
||||
$('.shortcut').hide();
|
||||
elementosFiltrados.show();
|
||||
});
|
||||
|
||||
$('#all_apps').on('click', function () {
|
||||
$('.shortcut').show();
|
||||
});
|
||||
Binary file not shown.
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
|
||||
<!-- Mirrored from yoda.hypeople.studio/yoda-admin-template/html/ltr/horizontal/auth-register.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2023 17:52:04 GMT -->
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/icons/iconly/index.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/icons/remix-icon/index.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
|
||||
|
||||
<!-- Base -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">
|
||||
|
||||
<!-- Theme -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">
|
||||
|
||||
<!-- Layouts -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
|
||||
<!-- Customizer -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">
|
||||
|
||||
<!-- Pages -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/pages/authentication.css">
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
|
||||
|
||||
<title>Solicitud HelpDesk</title>
|
||||
<style>
|
||||
.form-switch .form-check-input:checked~.form-check-label:before {
|
||||
background: #ed1b24 !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary:hover {
|
||||
background: #e9484f !important;
|
||||
border-color: #e9484f !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff !important;
|
||||
background-color: #ed1b24 !important;
|
||||
border-color: #ed1b24 !important;
|
||||
}
|
||||
|
||||
#loader {
|
||||
background-color: #ffffffd9;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="loader">
|
||||
<div class="col hp-flex-none w-auto">
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row hp-authentication-page">
|
||||
<div class="hp-bg-black-20 hp-bg-color-dark-90 col-lg-4 col-4">
|
||||
<div class="row hp-image-row h-100">
|
||||
<div class="col-12 px-0">
|
||||
<div class="row h-100 w-100 mx-0 align-items-center justify-content-center">
|
||||
<div class="col-12">
|
||||
<h4 class="hp-text-color-black-100 hp-text-color-dark-0 mx-16 mx-lg-0 mb-16">Solicitud
|
||||
HelpDesk</h4>
|
||||
<p class="h5 mb-0 fw-normal hp-text-color-black-80 hp-text-color-dark-20">Utiliza este
|
||||
formulario para solicitar soporte. Recuerda incluir la mayor cantidad de detalles.</p>
|
||||
<br><br>
|
||||
<img class="m-auto w-100" src="../assets/img/helpdesk.png" alt="Background Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-8 col-lg-8 py-lg-0">
|
||||
<div class="row align-items-center justify-content-center h-100 mx-4 mx-sm-n32">
|
||||
<div class="col-10 px-8 px-sm-0 pt-24 pb-48">
|
||||
<form id="helpdesk" class="mt-16">
|
||||
<div class="mb-16">
|
||||
<label for="description" class="form-label">Descripción de la solicitud:</label>
|
||||
<textarea name="description" id="description" class="form-control" required></textarea>
|
||||
</div>
|
||||
<p style="font-size: 12px;line-height: 15px;">Para que el soporte sea efectivo, vamos a recopilar información técnica, para ello debes realizar el proceso con el aplicativo que este presentando falla. Cuando estés preparado da click en recopilar información y accede al aplicativo, luego cuando en pantalla se visualice el error o la falla da de nuevo click en detener recopilación y se te habilitara el botón de enviar</p>
|
||||
<button type="submit" class="btn btn-primary w-100" disabled>
|
||||
Enviar Solicitud
|
||||
</button>
|
||||
</form>
|
||||
<!-- <button id="screenshot" class="btn btn-primary w-100">
|
||||
Screenshot
|
||||
</button> -->
|
||||
<button id="record" class="btn btn-primary w-100">
|
||||
Recopilar información
|
||||
</button>
|
||||
<video src="" width="100%" height="auto"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/js/helpdesk.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<meta name="author" content="Hypeople">
|
||||
<meta name="description" content="Responsive, Highly Customizable Dashboard Template" />
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
|
||||
|
||||
<!-- Base -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">
|
||||
|
||||
<!-- Theme -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">
|
||||
|
||||
<!-- Layouts -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
|
||||
<!-- Customizer -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">
|
||||
|
||||
<!-- Pages -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/pages/page-error.css">
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" type="text/css" href="../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row text-center overflow-hidden">
|
||||
<div class="position-absolute w-100 h-100" style="top: 0px; left: 0px; z-index: -1;">
|
||||
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="hp-stroke-color-dark-90">
|
||||
<path
|
||||
d="M3574 1540L907.175 -134.641L1053.03 429.011L387.731 -53.7583L937.881 929.474L32.0529 297.577L254.672 889.032L-2135.09 -460"
|
||||
stroke="#F7FAFC" stroke-width="100" stroke-linejoin="bevel"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center border-bottom hp-border-color-dark-60 py-16 col-12">
|
||||
<div class="hp-header-logo d-flex align-items-center">
|
||||
<a class="position-relative">
|
||||
<img class="hp-logo hp-sidebar-visible hp-dark-none" src="../assets/img/logo-claro.png"
|
||||
style="display: block;" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hp-error-content py-32 col-12">
|
||||
<div class="row h-100 align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
|
||||
<h2 class="h1 mb-16">Iniciando...</h2>
|
||||
|
||||
<p class="mb-32 hp-p1-body hp-text-color-black-100 hp-text-color-dark-0"> En unos momentos estaremos
|
||||
listos </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
|
||||
ipcRenderer.on('set-version-splash', (event, version) => {
|
||||
console.log('set-version-splash:', version);
|
||||
document.getElementById('app-version').textContent = version;
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<meta name="author" content="Hypeople">
|
||||
<meta name="description" content="Responsive, Highly Customizable Dashboard Template" />
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
|
||||
|
||||
<!-- Base -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">
|
||||
|
||||
<!-- Theme -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">
|
||||
|
||||
<!-- Layouts -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
|
||||
|
||||
<!-- Customizer -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">
|
||||
|
||||
<!-- Pages -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/pages/page-knowledge-base.css">
|
||||
|
||||
<!-- Horizontal -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/horizontal-menu.css">
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" type="text/css" href="../assets/css/style.css">
|
||||
|
||||
<title>RPA CLARO</title>
|
||||
<style>
|
||||
.icono-menu {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.submenu-item-icon {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
p.texto-menu span {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p.texto-menu {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
line-height: 1em;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
span.submenu-item-icon:has(span) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hp-horizontal-menu ul>li ul li a {
|
||||
padding: 10px 14px 8px 10px !important;
|
||||
}
|
||||
|
||||
.circle_app {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.no_integrado {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.integrado {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: auto !important;
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hp-knowledge-basic-card {
|
||||
min-height: 160px !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 14px 11px !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary:hover {
|
||||
background: #e9484f !important;
|
||||
border-color: #e9484f !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff !important;
|
||||
background-color: #ed1b24 !important;
|
||||
border-color: #ed1b24 !important;
|
||||
}
|
||||
|
||||
.hp-buy-now-btn {
|
||||
bottom: 6%;
|
||||
right: 32px !important;
|
||||
}
|
||||
|
||||
.offcanvas.show {
|
||||
background: #f0f3f5 !important;
|
||||
}
|
||||
|
||||
#loader {
|
||||
background-color: #ffffffd9;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.py-sm-64 {
|
||||
padding-top: 20px !important;
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hp-main-layout>header .hp-header-logo {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
body.horizontal-active .hp-horizontal-menu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="horizontal-active">
|
||||
<div id="loader">
|
||||
<div class="col hp-flex-none w-auto">
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="hp-bg-color-dark-90 d-flex min-vh-100">
|
||||
<div class="hp-main-layout hp-main-layout-horizontal">
|
||||
|
||||
<header>
|
||||
<div class="row w-100 m-0">
|
||||
<div class="col px-0">
|
||||
<div class="row w-100 align-items-center justify-content-between position-relative">
|
||||
<div
|
||||
class="hp-header-text-info col col-lg-14 col-xl-16 hp-header-start-text d-flex align-items-center hp-horizontal-none">
|
||||
<div class="d-flex overflow-hidden rounded-4 hp-bg-color-black-0 hp-bg-color-dark-100"
|
||||
style="min-width: 45px; width: 45px; height: 45px;">
|
||||
<img src="https://yoda.hypeople.studio/yoda-admin-template/app-assets/img/memoji/newspaper.svg"
|
||||
alt="Newspaper" height="80%" style="margin-top: auto; margin-left: auto;">
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="hp-header-start-text-item hp-input-label fw-normal hp-text-color-black-100 hp-text-color-dark-0 ms-12 mb-0 lh-1 d-flex align-items-center">
|
||||
Do you know the latest update of 2022?
|
||||
<span class="hp-text-color-primary-1">Our roadmap is alive for future
|
||||
updates.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="hp-horizontal-logo-menu d-flex align-items-center w-auto">
|
||||
<div class="col hp-flex-none w-auto hp-horizontal-block">
|
||||
<div class="hp-header-logo d-flex align-items-center">
|
||||
<a class="position-relative">
|
||||
|
||||
<img class="hp-logo hp-sidebar-visible hp-dark-none"
|
||||
src="../assets/img/logo-claro.png" style="display: block;" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col hp-flex-none w-auto hp-horizontal-block hp-horizontal-menu ps-24">
|
||||
<ul class="d-flex flex-wrap align-items-center">
|
||||
<li class="px-24">
|
||||
<a href="javascript:;" id="reload-app">
|
||||
<span style="display:flex;">
|
||||
<span class="submenu-item-icon">
|
||||
<i
|
||||
class="icono-menu hp-text-color-dark-0 ri-2x ri-restart-line"></i>
|
||||
</span>
|
||||
|
||||
<p class="texto-menu">Recargar <span>(CTRL + SHFT + R)</span></p>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="px-24">
|
||||
<a href="javascript:;" id="show-dev">
|
||||
<span style="display:flex;">
|
||||
<span class="submenu-item-icon">
|
||||
<i
|
||||
class="icono-menu hp-text-color-dark-0 ri-2x ri-tools-fill"></i>
|
||||
</span>
|
||||
|
||||
<p class="texto-menu">Mostrar DevTools <span>(CTRL + SHFT +
|
||||
L)</span></p>
|
||||
</span>
|
||||
</a>
|
||||
</li> -->
|
||||
<!-- <li class="px-24">
|
||||
|
||||
<a href="javascript:;" id="show-tutorial">
|
||||
<span style="display:flex;">
|
||||
<span class="submenu-item-icon">
|
||||
<i
|
||||
class="icono-menu hp-text-color-dark-0 ri-2x ri-question-line"></i>
|
||||
</span>
|
||||
|
||||
<p class="texto-menu">Tutorial</p>
|
||||
</span>
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="px-24">
|
||||
<a href="javascript:;" id="close-app">
|
||||
<span style="display:flex;">
|
||||
<span class="submenu-item-icon">
|
||||
<i
|
||||
class="icono-menu hp-text-color-dark-0 ri-2x ri-logout-circle-r-line"></i>
|
||||
</span>
|
||||
|
||||
<p class="texto-menu">Salir/Cerrar</p>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="px-24">
|
||||
|
||||
<a href="javascript:;" id="show-help">
|
||||
<span style="display:flex;">
|
||||
<span class="submenu-item-icon">
|
||||
<i
|
||||
class="icono-menu hp-text-color-dark-0 ri-2x ri-question-line"></i>
|
||||
</span>
|
||||
|
||||
<p class="texto-menu">Acerca</p>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hp-header-search d-none col">
|
||||
<input type="text" class="form-control" placeholder="Search..." id="header-search"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hp-main-layout-content">
|
||||
|
||||
<div class="row mb-32 gy-32">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="hp-bg-black-bg py-32 py-sm-64 px-24 px-sm-48 px-md-50 position-relative overflow-hidden hp-page-content"
|
||||
style="border-radius: 13px;">
|
||||
<svg width="358" height="336" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="position-absolute hp-rtl-scale-x-n1" style="bottom: 0px; right: 0px;">
|
||||
<path
|
||||
d="M730.404 135.471 369.675-6.641l88.802 164.001-243.179-98.8 246.364 263.281-329.128-126.619 114.698 166.726-241.68-62.446"
|
||||
stroke="url(#a)" stroke-width="40" stroke-linejoin="bevel"></path>
|
||||
<defs>
|
||||
<linearGradient id="a" x1="315.467" y1="6.875" x2="397.957" y2="337.724"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fff"></stop>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-12">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="mb-0 hp-text-color-black-0"> Bienvenido: <span
|
||||
id="user_pc"></span></h1>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p class="h5 mb-0 mt-24 hp-text-color-black-0"> Lista de aplicativos
|
||||
disponibles </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6 col-xl-6 col-xxxl-6">
|
||||
<div class="row g-16">
|
||||
<div class="col hp-flex-none w-auto">
|
||||
<button id="all_apps" type="button"
|
||||
class="btn btn-primary"><span>Todos</span></button>
|
||||
</div>
|
||||
<div class="col hp-flex-none w-auto">
|
||||
<button id="active_apps" type="button"
|
||||
class="btn btn-primary"><span>Activos</span></button>
|
||||
</div>
|
||||
<div class="col hp-flex-none w-auto">
|
||||
<button id="inactive_apps" type="button"
|
||||
class="btn btn-primary"><span>Inactivos</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xl-6 col-xxxl-6">
|
||||
<div class="input-group input-group-md">
|
||||
<input type="text" id="search-input" class="form-control"
|
||||
placeholder="Buscar aplicativo" aria-describedby="search-input-button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row g-32" id="aplicativos">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="hp-badge-text fw-semibold mb-0 text-center text-sm-start hp-text-color-dark-30">
|
||||
<strong>VERSIÓN <span id="app-version"></span></strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- <a class="hp-buy-now-btn position-fixed">
|
||||
<button id="open_drawer" type="button" class="btn btn-primary" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><span>Solicitar HelpDesk</span></button>
|
||||
</a> -->
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h4 id="offcanvasRightLabel">Solicitud Helpdesk</h4>
|
||||
<button type="button" id="close_drawer"
|
||||
class="btn-close text-reset hp-bg-none d-flex align-items-center justify-content-center"
|
||||
data-bs-dismiss="offcanvas" aria-label="Close">
|
||||
<i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<div class="row hp-authentication-page">
|
||||
<div class="hp-bg-black-20 hp-bg-color-dark-90 col-12">
|
||||
<div class="row hp-image-row h-100 px-8 px-sm-16 px-md-0 pb-32 pb-sm-0 pt-32 pt-md-0">
|
||||
<div class="col-12 px-0">
|
||||
<div class="row h-100 w-100 mx-0 align-items-center justify-content-center">
|
||||
<div class="col-xl-9 col-12">
|
||||
<p class="h5 mb-0 fw-normal hp-text-color-black-80 hp-text-color-dark-20">
|
||||
Utiliza
|
||||
este
|
||||
formulario para solicitar soporte. Recuerda incluir la mayor cantidad de
|
||||
detalles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 py-lg-0">
|
||||
<div class="row align-items-center justify-content-center mx-4 mx-sm-n32">
|
||||
<div class="col-10 px-8 px-sm-0 pt-24 pb-48">
|
||||
<p style="font-size: 12px;line-height: 15px;">Para que el soporte sea efectivo, vamos a
|
||||
recopilar información técnica, para ello debes realizar el proceso con el aplicativo
|
||||
que
|
||||
este presentando falla. Cuando estés preparado da click en recopilar información y
|
||||
accede al aplicativo, luego cuando en pantalla se visualice el error o la falla da
|
||||
de
|
||||
nuevo click en detener recopilación y se te habilitara el botón de enviar</p>
|
||||
<button id="record" class="btn btn-primary w-100">
|
||||
Recopilar información
|
||||
</button>
|
||||
<form id="helpdesk" class="mt-16">
|
||||
<div class="mb-16">
|
||||
<label for="description" class="form-label" disabled>Descripción de la
|
||||
solicitud:</label>
|
||||
<textarea name="description" id="description" class="form-control" required
|
||||
disabled></textarea>
|
||||
</div>
|
||||
<button id="send" type="submit" class="btn btn-primary w-100" disabled>
|
||||
Enviar Solicitud
|
||||
</button>
|
||||
</form>
|
||||
<video src="" width="100%" height="auto"></video>
|
||||
</div>
|
||||
</div>
|
||||
<img class="m-auto w-100" src="../assets/img/helpdesk.png" alt="Background Image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-to-top">
|
||||
<button type="button" class="btn btn-primary btn-icon-only rounded-circle hp-primary-shadow">
|
||||
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="16px"
|
||||
width="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span id="param1"></span>
|
||||
<span id="param2"></span>
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
|
||||
|
||||
|
||||
document.getElementById('reload-app').addEventListener('click', () => {
|
||||
console.log('reload-app');
|
||||
ipcRenderer.send('reload-app');
|
||||
});
|
||||
|
||||
document.getElementById('close-app').addEventListener('click', () => {
|
||||
console.log('close-app');
|
||||
ipcRenderer.send('close-app');
|
||||
});
|
||||
|
||||
document.getElementById('show-help').addEventListener('click', () => {
|
||||
console.log('show-help');
|
||||
ipcRenderer.send('show-help');
|
||||
});
|
||||
|
||||
// document.getElementById('show-tutorial').addEventListener('click', () => {
|
||||
// console.log('show-tutorial');
|
||||
// ipcRenderer.send('show-tutorial');
|
||||
// });
|
||||
|
||||
ipcRenderer.on('params', (event, url) => {
|
||||
console.log('params:', url);
|
||||
document.querySelector('#param1').textContent = url;
|
||||
// document.querySelector('#param2').textContent = params.param2;
|
||||
});
|
||||
|
||||
ipcRenderer.on('set-version', (event, version) => {
|
||||
console.log('set-version:', version);
|
||||
document.getElementById('app-version').textContent = version;
|
||||
});
|
||||
|
||||
ipcRenderer.on('set-userpc', (event, user_pc) => {
|
||||
console.log('set-userpc:', user_pc);
|
||||
document.getElementById('user_pc').textContent = user_pc;
|
||||
});
|
||||
|
||||
ipcRenderer.on('data-apps', (event, data_apps) => {
|
||||
$('#aplicativos').append(data_apps);
|
||||
$('#loader').css('display', 'none');
|
||||
updateButtonCounts();
|
||||
});
|
||||
|
||||
const shortcutDivs = document.querySelectorAll('.shortcut');
|
||||
console.log(shortcutDivs);
|
||||
|
||||
shortcutDivs.forEach((div) => {
|
||||
div.addEventListener('click', () => {
|
||||
const code = div.getAttribute('code');
|
||||
data_service = { "code": code }
|
||||
ipcRenderer.send('openNewWindow', data_service);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Custom -->
|
||||
<script src="../assets/js/index.js"></script>
|
||||
<script src="../assets/js/helpdesk.js"></script>
|
||||
|
||||
<script src="../app-assets/js/plugin/bootstrap.bundle.min.js"></script>
|
||||
<script src="../app-assets/js/layouts/sider.js"></script>
|
||||
<script src="../app-assets/js/show-code/component-notification.min.js"></script>
|
||||
<script src="../app-assets/js/show-code/show-code-btn.min.js"></script>
|
||||
<script src="../app-assets/js/show-code/component-drawer.min.js"></script>
|
||||
|
||||
<!-- Components -->
|
||||
<script src="../app-assets/js/plugin/highlight.min.js"></script>
|
||||
<script src="../app-assets/js/components/notification.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: url('../app-assets/img/soft/splash.jpg') no-repeat center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 5px solid rgba(18, 65, 145, 255);
|
||||
border-radius: 50%;
|
||||
border-top: 5px solid #ffffff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
-webkit-animation: spin 1s linear infinite;
|
||||
/* Safari */
|
||||
animation: spin 1s linear infinite;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Safari */
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
border: none !important;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<meta name="author" content="Hypeople">
|
||||
<meta name="description" content="Responsive, Highly Customizable Dashboard Template" />
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
|
||||
|
||||
<!-- Base -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">
|
||||
|
||||
<!-- Theme -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">
|
||||
|
||||
<!-- Layouts -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
|
||||
<!-- Customizer -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">
|
||||
|
||||
<!-- Pages -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/pages/page-error.css">
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" type="text/css" href="../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row text-center overflow-hidden">
|
||||
<div class="position-absolute w-100 h-100" style="top: 0px; left: 0px; z-index: -1;">
|
||||
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="hp-stroke-color-dark-90">
|
||||
<path
|
||||
d="M3574 1540L907.175 -134.641L1053.03 429.011L387.731 -53.7583L937.881 929.474L32.0529 297.577L254.672 889.032L-2135.09 -460"
|
||||
stroke="#F7FAFC" stroke-width="100" stroke-linejoin="bevel"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center border-bottom hp-border-color-dark-60 py-16 col-12">
|
||||
<div class="hp-header-logo d-flex align-items-center">
|
||||
<a class="position-relative">
|
||||
<img class="hp-logo hp-sidebar-visible hp-dark-none" src="../assets/img/logo-claro.png"
|
||||
style="display: block;" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hp-error-content py-32 col-12">
|
||||
<div class="row h-100 align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
|
||||
<h2 class="h1 mb-16">Iniciando...</h2>
|
||||
|
||||
<p class="mb-32 hp-p1-body hp-text-color-black-100 hp-text-color-dark-0"> En un momento estaremos
|
||||
listos </p>
|
||||
<br>
|
||||
<p class="hp-p1-body hp-text-color-black-100 hp-text-color-dark-0" style="font-weight:bold;" id="message">...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const { ipcRenderer } = require('electron');
|
||||
console.log('test');
|
||||
|
||||
// ipcRenderer.on('set-version-splash', (event, version) => {
|
||||
// console.log('set-version-splash:', version);
|
||||
// document.getElementById('app-version').textContent = version;
|
||||
// });
|
||||
ipcRenderer.on('new-message', (event, message) => {
|
||||
if (message['msg']) {
|
||||
console.log('new-message:', message['log']);
|
||||
document.getElementById('message').innerText = message['msg']
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<meta name="author" content="Hypeople">
|
||||
<meta name="description" content="Responsive, Highly Customizable Dashboard Template" />
|
||||
|
||||
<!-- Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet" />
|
||||
|
||||
<!-- Plugin -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
|
||||
|
||||
<!-- Base -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">
|
||||
|
||||
<!-- Theme -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">
|
||||
|
||||
<!-- Layouts -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
|
||||
<!-- Customizer -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">
|
||||
|
||||
<!-- Pages -->
|
||||
<link rel="stylesheet" type="text/css" href="../app-assets/css/pages/page-error.css">
|
||||
|
||||
<!-- Custom -->
|
||||
<link rel="stylesheet" type="text/css" href="../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="row text-center overflow-hidden">
|
||||
<div class="position-absolute w-100 h-100" style="top: 0px; left: 0px; z-index: -1;">
|
||||
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||
class="hp-stroke-color-dark-90">
|
||||
<path
|
||||
d="M3574 1540L907.175 -134.641L1053.03 429.011L387.731 -53.7583L937.881 929.474L32.0529 297.577L254.672 889.032L-2135.09 -460"
|
||||
stroke="#F7FAFC" stroke-width="100" stroke-linejoin="bevel"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center border-bottom hp-border-color-dark-60 py-16 col-12">
|
||||
<div class="hp-header-logo d-flex align-items-center">
|
||||
<a class="position-relative">
|
||||
<img class="hp-logo hp-sidebar-visible hp-dark-none" src="../assets/img/logo-claro.png"
|
||||
style="display: block;" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hp-error-content py-32 col-12">
|
||||
<div class="row h-100 align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<h4 class="h3 mb-16">Bienvenido a la nueva forma de acceder a tus aplicativos</h4>
|
||||
<p class="mb-32 hp-p1-body hp-text-color-black-100 hp-text-color-dark-0"> Lorem ipsum dolor asem,
|
||||
ipsum dolor asem, lorem ipsum dolor asem, ipsum dolor asem, lorem ipsum dolor asem, ipsum dolor
|
||||
asem </p>
|
||||
<video controls width="60%" height="450">
|
||||
<source src="../assets/video/tutorial.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user