Skip to content

Instantly share code, notes, and snippets.

@Preciousomonze

Preciousomonze/css.css

Last active October 20, 2024 21:05
Show Gist options
  • Save Preciousomonze/495dab0d90b24289d8cd14432964b857 to your computer and use it in GitHub Desktop.
Save Preciousomonze/495dab0d90b24289d8cd14432964b857 to your computer and use it in GitHub Desktop.
Download ZIP
onboarding
Raw
css.css
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
.teamsynerg-getting-started-guide {
position: absolute;
display: block;
top: 0;
z-index: 99999999;
width: 100%;
height: 100%;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.3);
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container {
position: relative;
max-width: 990px;
margin: 50px auto;
width: 100%;
height: 100%;
display: flex;
gap: 30px;
color: #111111;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-user-photos {
background-color: #F8EED2;
padding: 25px;
border-radius: 15px;
height: max-content;
align-items: center;
width: 30%;
max-width: 300px;
display: grid;
grid-template-columns: max-content 1fr;
position: fixed;
min-height: 160px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-user-photos img {
border-radius: 50%;
position: absolute;
left: -55px;
border: 4px solid #ffffff;
height: 110px;
width: 110px;
object-fit: cover;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-user-photos .user-details {
padding-left: 55px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-user-photos .user-details p {
font-size: 20px;
margin: 0;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-user-photos .user-details p.department {
font-size: 11px;
text-transform: uppercase;
color: #111111;
margin-top: 10px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines {
background-color: #ffffff;
border-radius: 25px;
width: 100%;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines {
padding: 20px;
width: 100%;
max-width: 670px;
margin: auto;
height: max-content;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .heading h2 {
font-size: 20px;
font-weight: normal;
margin: 0;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .heading {
min-height: 72px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .heading p {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
color: #8D8D8D;
margin: 0;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul {
padding-left: 0;
list-style: none;
margin: 10px 0 0;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li {
border: 1px solid #E2E2E2;
border-radius: 14px;
position: relative;
cursor: pointer;
padding: 24px 24px 24px 24px;
margin-bottom: 10px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .title {
padding-left: 40px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li:before {
content: "";
border: 2px solid #DCDCDC;
height: 22px;
width: 22px;
border-radius: 50%;
display: block;
position: absolute;
left: 30px;
top: 23px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li.completed:before {
background-color: #a0cf4f;
border-color: #a0cf4f;
content: '✔';
color: black;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 22px;
display: flex;
justify-content: center;
align-items: center;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li:hover:before,
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li.active:before {
border-color: #78BB04;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items .submit-container {
margin-top: 38px;
display: flex;
justify-content: center;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items .submit-container button[type="submit"] {
padding: 10px 35px;
font-size: 14px;
color: #000000;
border-color: transparent;
border-radius: 6px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li p {
margin: 0;
font-size: 14px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .arrow {
position: absolute;
right: 32px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .arrow svg {
transition: all 0.3s ease-in-out;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .actions {
display: none;
transition: all 0.3s ease-in-out;
padding: 20px 0;
overflow: hidden;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li.active .actions {
display: block;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li.active .arrow svg {
transform: rotate(-90deg);
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li.active .arrow svg path {
stroke: #111111;
}
body.tgsg-loaded {
overflow: hidden;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .submit-button:disabled{
background-color: #d1cfcf;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .submit-button{
background-color: #a0cf4f;
cursor: pointer;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .progress-container-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .progress-ring-border {
/*width: 50px;
height: 50px;*/
width:auto ;
height:auto ;
border-radius: 50%;
background: conic-gradient(
#DCDCDC 0%,
#DCDCDC 100%
);
padding: 2px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .progress-ring-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
clip-path: circle(30px at center);
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup label {
display: block;
margin-bottom: 0;
font-weight: bold;
color: #555;
font-size: 15px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup a {
font-size: 14px;
text-decoration: underline;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup input[type="text"],
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup input[type="file"],
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup select,
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup input[type="file"] {
padding: 3px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup textarea {
resize: vertical;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card {
background-color: #f8edf6;
width: 250px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 10px;
text-align: center;
margin: 10px;
transition: transform 0.3s ease;
text-decoration: none;
display: block;
}
/*.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card:nth-child(1) {
margin-left: 0px;
}*/
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card:nth-child(1) {
margin-left: 10px !important;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card:hover {
transform: scale(1.05);
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card:link, .card:visited {
text-decoration: none;
color: inherit;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .title {
margin-top: 10px;
color: #4b3240;
font-size: 12px;
font-weight: bold;
}
.profile-details-setup {
margin: 24px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .profile-details-setup .title{
padding-left:0;
}
.video-wrapper {
position: relative;
width: auto; /* Adjust the width as needed */
height: 360px; /* Adjust the height as needed */
border-radius: 15px; /* To match the rounded corners in your image */
overflow: hidden;
margin:24px;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3); /* Optional overlay effect */
}
.overlay-image {
width: 100%;
height: 360px;
object-fit: cover;
}
.play-icon {
position: absolute;
font-size: 20px;
color: #000;
background-color: #fff;
padding: 15px 18px 15px 20px;
border-radius: 50%;
}
.video-wrapper .video-container iframe:not(.wp-embedded-content){
position:relative !important;
height:360px !important;
}
.video-container {
width: 100%;
height: 100%;
}
.youtube-video {
width: 100%;
height: 100%;
border-radius: 15px;
}
.close-button {
position: absolute;
top: -2px;
right: 0px;
font-size: 24px;
color: #000;
background-color: #fff;
padding: 5px 10px;
cursor: pointer;
border-radius: 50%;
z-index: 1000;
}
.w-g-top-text-line {
margin-bottom: 20px !important;
}
p.w-g-top-text-line {
font-family: 'Montserrat';
font-weight: 400;
font-size: 16px !important;
}
.weekly-goal-option > ul {
margin: 0 !important;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.w-g-opt-toggle-btn input:checked + label:after {
right: 2px;
left: auto;
background: #A0CF4F;
}
.weekly-goal-option > ul li input:checked + label {
border: 1px solid #78BB04;
box-shadow: 0px 0px 12px 0px #0000001A;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li{
padding:0 !important;
}
.content-items ul li.active .main-header {
padding: 24px 24px 0 24px;
}
.main-header {
padding: 24px;
margin-top: -3px;
}
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .teamsynerg-getting-started-guide-lines .content-items ul li .actions{
padding:0 !important;
/*margin:24px;*/
}
.weekly-goal-option > ul li {
display: inline-block;
padding: 0 !important;
border-radius: 10px !important;
position: relative !important;
width: calc(33.33% - 14px);
border: none !important;
margin-bottom: 0 !important;
}
.weekly-goal-option > ul li::before{
display:none !important;
}
.weekly-goal-option > ul li input {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
z-index: 0;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
display: inline-block;
}
.weekly-goal-option > ul li label {
position: relative;
z-index: 1;
padding: 25px 25px 25px;
border: 1px solid #D8D8D8;
display: inline-block;
border-radius: 10px;
width: 100%;
margin-bottom: 0px;
height: 155px;
}
.weekly-goal-option > ul li label img {
width: 30px;
margin: 0px auto 25px auto;
display: block;
height: 30px;
}
.w-g-opt-text-line {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: center;
color: #7D7D7D;
}
.w-g-opt-title {
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
width: 100%;
display: block;
margin-bottom: 10px;
color: #111;
}
.learning-goal {
margin: 24px 60px;
}
.weekly-goal-option > ul li label .w-g-opt-text-line {
display: block;
width: 100%;
}
.w-g-opt-toggle-btn {
display: flex;
align-items: center;
gap: 5px;
margin-top: 20px;
}
.w-g-opt-toggle-btn input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
display: none;
}
.w-g-opt-toggle-btn label {
margin: 0;
}
.w-g-opt-toggle-btn label {
cursor: pointer;
text-indent: -9999px;
width: 40px;
height: 20px;
background: #F0F0F0;
display: block;
border-radius: 100px;
position: relative;
box-shadow: 0px 0px 5px 0px #00000024 inset;
}
.w-g-opt-toggle-btn label:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #c5c5c5;
border-radius: 90px;
transition: 0.3s;
}
.w-g-opt-toggle-btn span {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
}
.bottom-email-reminder {
margin-top: 25px;
min-width: 100%;
justify-content: center;
background: #A0CF4F;
padding: 20px 60px;
display: flex;
align-items: start;
gap: 10px;
font-size: 13px;
border-radius: 0 0 14px 14px;
}
.bottom-email-reminder img {
position: relative;
top: 5px;
height: auto;
max-width: 100%;
border: none;
border-radius: 0;
box-shadow: none;
}
.bottom-email-reminder p {
line-height: normal;
margin: 0;
}
@media screen and (max-width:640px){
.weekly-goal-option > ul li{
width:100% !important;
}
}
@media screen and (max-width:480px){
.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .actions .account-setup .profile-details-setup .card{
width:100% !important;
}
.account-setup-div {
flex-wrap: wrap;
}
}
Raw
html.html
<form method="post" enctype="multipart/form-data" class="content-items" id="bioptrics-onboarding-steps" data-nonce="d64cddff3e">
<ul>
<li class="onboarding-list-item next completed" data-click-time="0">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Welcome</p>
</div>
<div class="actions">
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe data-src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" class=" lazyloaded" data-load-mode="1" name="fitvid0"></iframe></div>
</div>
</li>
<li class="onboarding-list-item next completed" data-click-time="Sun Oct 20 2024 21:18:53 GMT+0100 (West Africa Standard Time)">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Account Setup</p>
</div>
<div class="actions">
<div class="account-setup">
<div class="profile-details-setup">
<div style="display: flex;" class="account-setup-div">
<a href="https://wordpress-453887-4935616.cloudwaysapps.com/my-teams/audrey/profile/edit/" title="Set up Profile Details" class="profiles-update-items card" target="_blank">
<img data-src="https://wordpress-453887-4935616.cloudwaysapps.com/wp-content/plugins/teamsynerg-getting-started/assets/img/list.svg" class="attachment-full size-full lazyloaded" alt="" src="https://wordpress-453887-4935616.cloudwaysapps.com/wp-content/plugins/teamsynerg-getting-started/assets/img/list.svg"><noscript><img src="https://wordpress-453887-4935616.cloudwaysapps.com/wp-content/plugins/teamsynerg-getting-started/assets/img/list.svg" class="attachment-full size-full" alt="" /></noscript>
<p class="title">Update Profile Information</p>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="onboarding-list-item next completed" data-click-time="Sun Oct 20 2024 21:19:09 GMT+0100 (West Africa Standard Time)">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Set a Weekly Learning Goal</p>
</div>
<div class="actions">
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe data-src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" class=" lazyloaded" data-load-mode="1" name="fitvid1"></iframe></div>
</div>
</li>
<li class="onboarding-list-item next completed" data-click-time="Sun Oct 20 2024 21:19:10 GMT+0100 (West Africa Standard Time)">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Gamification</p>
</div>
<div class="actions">
</div>
</li>
<li class="onboarding-list-item next completed" data-click-time="Sun Oct 20 2024 21:19:13 GMT+0100 (West Africa Standard Time)">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Cybesecurity Training</p>
</div>
<div class="actions">
</div>
</li>
<li class="onboarding-list-item next active" data-click-time="Sun Oct 20 2024 21:19:15 GMT+0100 (West Africa Standard Time)">
<div class="main-header">
<div class="arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path stroke="#A4A4A4" stroke-linecap="round" stroke-linejoin="round" d="m1 1 6 6 6-6"></path></svg>
</div>
<p class="title">Onboarding Completion</p>
</div>
<div class="actions">
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe data-src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" src="https://www.youtube.com/embed/jn6VDQBmjqQ?si=-UCDuI2BcXIMU4za" class=" lazyloaded" data-load-mode="1" name="fitvid2"></iframe></div>
</div>
</li>
</ul>
<div class="submit-container">
<button type="submit" class="submit-button" id="submit-on-boarding">Submit</button>
</div>
</form>
Raw
js.js
(function($) {
"use strict";
let tgsg = {}
tgsg.toggle_dropdown = function (event) {
event.preventDefault();
let _this = $(this);
if($(_this)[0].previousElementSibling){
if($($(_this)[0].previousElementSibling).hasClass('completed')){
$('.teamsynerg-getting-started-guide-lines ul li.onboarding-list-item').not(_this).removeClass('active');
$(_this).toggleClass('active');
$(_this).data('click-time', new Date())
}else{
// check the clicked actions and time spent
let previousAction = $($(_this)[0].previousElementSibling).find('.actions');
let needAttention = $(_this).parent().find('li.onboarding-list-item').filter(':not(.completed)').first().find('.title').text();
if (previousAction.length > 0) {
let $video = previousAction.find('video')[0];
let $iframe = previousAction.find('iframe');
let $images = previousAction.find('p img');
let expectedTimeSpentOnAction;
if ($video) {
expectedTimeSpentOnAction = $video.duration / 2; //atleast half the video duration
} else if ($iframe.length > 0) {
console.log('Embedded video found');
expectedTimeSpentOnAction = 2;
console.log({expectedTimeSpentOnAction});
} else if ($images.length > 0) {
expectedTimeSpentOnAction = 2; //10 seconds for images
} else {
// let textContent = previousAction.text();
// let wordCount = textContent.trim().split(/\s+/).length;
// expectedTimeSpentOnAction = Math.round(wordCount / 6) // at least 6 words per seconds
expectedTimeSpentOnAction = 2;
}
// let actualTimeSpentInSeconds = (new Date() - $($(_this)[0].previousElementSibling).data('click-time')) / 1000;
let actualTimeSpentInSeconds = 3;
if ( $($(_this)[0].previousElementSibling).attr('data-click-time') !== 0 && actualTimeSpentInSeconds >= expectedTimeSpentOnAction){
// if(needAttention.toLowerCase() == 'account setup'){
// let accountSetup = $(_this).parent().find('li').filter(':not(.completed)').first().find('.account-setup');
// let firstName = accountSetup.find('#first-name').val();
// let lastName = accountSetup.find('#last-name').val();
// let dp = accountSetup.find('#profile-picture').val();
// let position = accountSetup.find('#position').val();
// let department = accountSetup.find('#department').val();
// let interests = accountSetup.find('#interests').val();
// if(firstName == '' || lastName == '' || dp == '' || position == '' || department == '' || interests == ''){
// alert('Kindly complete the ' + needAttention + ' form before attempting to move to the next section.');
// return;
// }
// }
$($(_this)[0].previousElementSibling).addClass('completed');
$('.teamsynerg-getting-started-guide-lines ul li.onboarding-list-item').not(_this).removeClass('active');
$(_this).toggleClass('active');
if($(_this).next()) $(_this).next().addClass('next');
$(_this).attr('data-click-time', new Date());
}else{
let message = 'Kindly go though and complete the ' + needAttention + ' section before attempting to move to the next.';
if ( $(_this).parent().find('li.onboarding-list-item').filter(':not(.completed)').first().hasClass('active')){
message = 'Kindly complete the ' + needAttention + ' section before attempting to move to the next.';
}
alert(message);
}
}
}
}else{
$('.teamsynerg-getting-started-guide-lines ul li.onboarding-list-item').not(_this).removeClass('active');
$(_this).toggleClass('active');
$(_this).data('click-time', new Date());
if($(_this).next()) $(_this).next().addClass('next');
}
}
tgsg.submit_onboarding = function (event) {
event.preventDefault();
if(!confirm('Are you sure you want to submit')) return;
let _this = $(this);
const nonce = $(_this).data('nonce');
let parent_el = $(_this).parents('#bioptrics-onboarding-steps');
let formData = new FormData(this);
formData.append('action', 'bioptrics_onboarding_starting_guide');
formData.append('nonce', nonce);
$.ajax({
type: 'POST',
url: ajax_object.ajax_url,
processData: false,
contentType: false,
data: formData,
enctype: 'multipart/form-data',
success: function (response) {
console.log(response);
if(response.status) window.location.href = response.data.url;
console.log("success");
console.log(response.data.url);
// window.location.href = response.data.url;
},
failed: function (xhr, status, error) {
console.log(xhr.responseText);
}
});
}
$(window).on('load', function() {
$('body').addClass('tgsg-loaded');
$(document).on('click', '.teamsynerg-getting-started-guide-lines ul li.onboarding-list-item.next', tgsg.toggle_dropdown)
$('.teamsynerg-getting-started-guide-lines ul li.onboarding-list-item .actions').on('click', function(event) {
event.stopPropagation();
});
$(document).on('submit', 'form#bioptrics-onboarding-steps', tgsg.submit_onboarding);
setProgress();
});
function setProgress() {
const totalSteps = $('.teamsynerg-getting-started-guide-lines ul').find('li.onboarding-list-item').length;
const completedSteps = $('.teamsynerg-getting-started-guide-lines ul').find('li.completed').length;
const percentComplete = (completedSteps / totalSteps) * 100
const circle = document.querySelector('.progress-ring-circle');
const circleBorder = document.querySelector('.progress-ring-border');
circle.style.background = `conic-gradient(
#a0cf4f 0%,
#a0cf4f ${percentComplete}%,
white ${percentComplete}% 100%
)`;
circleBorder.style.background = `conic-gradient(
#a0cf4f 0%,
#a0cf4f ${percentComplete}%,
#dcdcdc ${percentComplete}% 100%
)`;
const progressText = document.querySelector('.progress-text');
progressText.textContent = `${completedSteps} of ${totalSteps} steps completed`;
const percentCompleteToRemoveDisableFromBtn = totalSteps - 1;
if(completedSteps >= percentCompleteToRemoveDisableFromBtn){
$('.teamsynerg-getting-started-guide .teamsynerg-getting-started-guide-container .submit-button').removeAttr('disabled')
}
}
function observeClassChanges(element) {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
setProgress(mutation.target);
}
});
});
observer.observe(element, {
attributes: true,
attributeFilter: ['class'],
});
}
$('.teamsynerg-getting-started-guide-lines ul li').each(function() {
observeClassChanges(this);
});
// Trigger on list item click
var $onboardingItems = $(".onboarding-list-item");
var $submitButton = $("#submit-on-boarding");
var $videoIframe = $("iframe[name='fitvid0']");
var timerStarted = false;
var timeSpentWatching = 0;
var timer;
// Function to start the timer once iframe is clicked
function startVideoTimer() {
if (!timerStarted) {
timerStarted = true;
timer = setInterval(function () {
timeSpentWatching++;
console.log("Time spent watching: " + timeSpentWatching + " seconds");
if (timeSpentWatching >= 20) { // 60 seconds (1 minute)
clearInterval(timer);
$submitButton.removeAttr("disabled");
console.log("1 minute watched. Submit button enabled.");
}
}, 1000);
}
}
// Add click event to iframe to start the timer
if ($videoIframe.length) {
$videoIframe.on("click", startVideoTimer);
}
// Optional: Add listener for when the form is submitted
var $form = $("#bioptrics-onboarding-steps");
$form.on("submit", function(e) {
// Additional validation before submission
if ($submitButton.is(":disabled")) {
e.preventDefault();
alert("Please spend at least 1 minute on the video before proceeding.");
}
});
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment