관리-도구

편집 파일: template_a.3hipe1693650208.html

<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
    <i class="fas fa-bars"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-brand">
        <img class="img-responsive img-thumbnail" src="@@qfnl_install_url@@/@@folder@@asset/img/img-a/brand-logo.png">
        <div id="close-sidebar" data-bs-toggle="tooltip" data-placement="right" title="Hide Sidebar">
          <i class="fas fa-chevron-circle-left"></i>
        </div>
      </div>
      <div class="sidebar-header">
        <div class="user-pic">
          <img class="img-responsive rounded-circle dynamic-image" data-src="@@qfnl_install_url@@/@@folder@@asset/img/img-a/user.jpg"
            src="@@install_url@@/assets/img/profile/{student_image}" alt="User picture" width="50" height="50">
        </div>
        <div class="user-info">
          <span class="user-name">Hi! <strong>{first_name}</strong> </span>
          <span class="user-role">Welcome</span>
          <span class="user-status">
            <i class="fa fa-circle"></i>
            <span>Online</span>
          </span>
        </div>
      </div>
      <div class="sidebar-menu">
        <ul id="myDiv">
          <li class="tablinks btn1">
            <a class="dropdown-btn active" style="cursor: pointer;" href="#home-tab"
              onclick="openTab(event, 'home-tab')" id="defaultOpen">
              <i class="fa fa-shopping-cart"></i>
              <span>My Courses</span>
            </a>
          </li>
          <li>
            <a class="dropdown-btn my_profile" style="cursor: pointer;" href="#profile-tab"
              onclick="openTab(event,'profile-tab')">
              <i class="fa fa-user"></i>
              <span>My Profile</span>
            </a>
          </li>
          <li class="tablinks btn1" style="cursor:pointer">
            <a class="dropdown-btn" onclick="openTab(event,'aboutus')" style="cursor: pointer;" href="#aboutus">
              <i class="fa fa-exclamation-circle"></i>
              <span>About Us</span>
            </a>
          </li>
          <li>
            <a class="dropdown-btn" class="my_profile" href="{logout_url}">
              <i class="fa fa-power-off"></i>
              <span>Logout</span>
            </a>
          </li>

</ul>
      </div>
    </div>

<div class="sidebar-footer">
      <a href="{logout_url}" data-bs-toggle="tooltip" data-placement="top" title="Logout">
        <i class="fa fa-power-off"></i>
      </a>
    </div>
  </nav>
  <main class="page-content">
    <div class="container-fluid tab-content" id="myTabContent">
      <div id="home-tab" class="tabContent">
        <h3 class="headline text-center mx-auto">My Courses</h3>
        <hr>
        <div class="cf--course-templ">
          <div class="course-tile row">
            {courses}
            <div class="col-md-6 mx-auto">
              <div class="card cf--course-card">
                <input type="hidden" class="cf--course-video" data-course-video="{course.demo_video_url}"
                  data-course-image="{course.image_url}">
                <div class="cf--course-show-video" style="height:286px">{course.demo_video}</div>
                <div class="cf-course-uimage" style="height: 286px">
                  <div>
                    <div class="cf--course-show-image">
                      {course.image}
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <h6 data-el-type="h6" cf-element-data-html="{course.title}" cf-element-data-backup="Course%20Name">
                    {course.title} </h6>
                  <div class="d-flex justify-content-center align-items-center">
                    <div class="viewbuttondiv py-3">
                      <a class="btn btn-md  viewbutton" href="{course.show_url}">Start Course <i class="fa fa-play"
                          aria-hidden="true"></i>
                      </a>
                    </div>
                    <div class="px-2s"><span class="text-muted"></span></div>
                  </div>
                  <div class="all-text-content cf--course-text-content  position-relative px-1 px-0 py-1 pb-2 ">
                    <div data-el-type="div" cf-element-data-html="{course.description}"
                      cf-element-data-backup="Course%20Description"
                      class="text-content-des mb-4 cfcourse-text-content-des cf-course-assign-ada-ans-h text-center text-sm-left inner-text-content">
                      {course.description}
                    </div>
                    <a href="javascript:void(0)" style="display: none;" data-read="readmore"
                      class="d-inline-block   cf-course-assign-ada-btn">Read More</a>
                  </div>
                </div>
              </div>
            </div>
            {/courses}
          </div>
        </div>
      </div>

<div id="profile-tab" class="tabContent">
        <h3 class="headline">Profile</h3>
        <hr>
        <div class="container">
          <div class="row gutters">
            <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
              <div class="card h-100">
                <div class="card-body">
                  <div class="account-settings">
                    <div class="user-profile">
                      <div class="user-avatar">
                        <img class="dynamic-image" id="upload-image" src="@@install_url@@/assets/img/profile/{student_image}"
                          alt="{name}">
                      </div>
                      <h5 class="user-name">{name}</h5>
                      <h6 class="user-email">{email}</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
              <div class="card h-100">
                <div class="card-body">
                  <form action="" method="post">
                    <input type="hidden" name="memberupdate">
                    <div class="row gutters">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <h6 class="mb-2 text-primary" style="cursor: pointer;">Personal Details</h6>
                      </div>
                      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="mb-3">
                          <label for="fullName">Name*</label>
                          <input type="text" class="form-control" id="fullName" value="{name}" name="name"
                            placeholder="Enter full name">
                        </div>
                      </div>
                      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="mb-3">
                          <label for="eMail">Email*</label>
                          <input type="email" class="form-control" id="eMail" value="{email}" name="email"
                            placeholder="Enter email ID">
                        </div>
                      </div>
                    </div>
                    <div class="row gutters">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <p class="validationerr">{validation_error}</p>
                      </div>
                    </div>
                    <div class="row gutters">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="text-right">
                          <button type="submit" name="submit" class="btn btn-primary">Save</button>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div class="card p-0">

<div class="card-header">
                      <h6 data-bs-toggle="collapse" style="cursor: pointer;" href="#collapseOne"
                        class="text-primary collapsed" aria-expanded="false">
                        Change Password </h6>
                    </div>
                    <div id="collapseOne" data-parent="#accordion" class="hide collapse card-body p-0">
                      <div class="card-body">
                        <form action="" method="post">
                          <input type="hidden" name="passwordupdate" value="update" />
                          <div class="mb-3">
                            <label>Current Password</label>
                            <input type="password" name="oldpassword" id="oldpassword"
                              placeholder="Enter Older Password" class="form-control">
                          </div>
                          <div class="mb-3">
                            <label>Enter New Password</label>
                            <input type="password" name="password" id="password" placeholder="Enter New Password"
                              class="form-control">
                          </div>
                          <div class="mb-3">
                            <label>Re-enter New Password</label>
                            <input type="password" name="cpassword" id="repassword" placeholder="Re-rnter new password"
                              class="form-control">
                          </div>
                          <div class="mb-3">
                            <p class="validationerr">{validation_error}</p>
                          </div>
                          <div class="mb-3">
                            <button class="btn btn-primary" type="submit">
                              <i class="fas fa-user-check"></i>&nbsp;Update Password</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="aboutus" class="tabContent" style="display: none;">
        <h3 class="headline">About Us</h3>
        <hr>
      </div>
    </div>
  </main>
</div>
<script>
  openDefaultTab();
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("dropdown-btn");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  // document.getElementById("defaultOpen").click();
  function openDefaultTab() {
    let dn = window.location.hash;
    if (dn != "") {
      tabcontent = document.getElementsByClassName("tabContent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      dn = dn.replace("#", "");
      document.getElementById(`${dn}`).style.display = "block";
    } else {
      document.getElementById("defaultOpen").click();
    }
  }
  const imageElement = document.getElementById("upload-image");
  imageElement.addEventListener("click", function () {
    const form = document.createElement("form");
    form.id = "myForm";
    form.method = "POST";
    form.action = "";
    form.enctype = "multipart/form-data";

const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.name = "memberImage";

fileInput.click();

fileInput.addEventListener("change", function (event) {
      const fileList = event.target.files;

if (fileList.length > 0) {
        const file = fileList[0];
        const fileReader = new FileReader();

if (file.type.startsWith("image/")) {
          fileReader.readAsDataURL(file);
          fileReader.onload = function (e) {
            const fileData = e.target.result;
            const hiddenInput = document.createElement("input");
            hiddenInput.type = "hidden";
            hiddenInput.name = "imageData";
            hiddenInput.value = fileData;

form.appendChild(hiddenInput);            
            document.body.appendChild(form);
            form.submit();
          };
        } else {
          alert("Please select an image file.");
        }
      }
    });
  });
</script>
<script>
  jQuery(function ($) {
    $(".sidebar-dropdown > a").click(function () {
      $(".sidebar-submenu").slideUp(200);

if (
        $(this)
          .parent()

.hasClass("active")
      ) {
        $(".sidebar-dropdown").removeClass("active");

$(this)
          .parent()

.removeClass("active");
      } else {
        $(".sidebar-dropdown").removeClass("active");

$(this)
          .next(".sidebar-submenu")

.slideDown(200);

$(this)
          .parent()

.addClass("active");
      }
    });

$("#close-sidebar").click(function () {
      $(".page-wrapper").removeClass("toggled");
    });

$("#show-sidebar").click(function () {
      $(".page-wrapper").addClass("toggled");
    });
  });

jQuery(document).ready(function () {
    jQuery('[data-bs-toggle="tooltip"]').tooltip();
  });

// Counter test

$(".count").each(function () {
    $(this)
      .prop("Counter", 0)
      .animate(
        {
          Counter: $(this).text(),
        },
        {
          duration: 4000,

easing: "swing",

step: function (now) {
            $(this).text(Math.ceil(now));
          },
        }
      );
  });

var dropdown = document.getElementsByClassName("dropdown-btn");

var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function () {
      this.classList.toggle("active");

var dropdownContent = this.nextElementSibling;

if (dropdownContent.style.display === "block") {
        dropdownContent.style.display = "none";
      } else {
        dropdownContent.style.display = "block";
      }
    });
  }

</script>