관리-도구

편집 파일: template_a.9rh4c1696852494.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="fa fa-chevron-circle-left" id="sidebarCollapse"></i>
          </div>
        </div>
        <div class="sidebar-header">
          <div class="user-pic">
            <img class="img-responsive rounded-circle dynamic-image" src="@@qfnl_install_url@@/@@folder@@asset/img/img-a/{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;" onclick="openTab(event, 'home-tab')" id="defaultOpen">
                <i class="fa fa-shopping-cart"></i>
                <span>My Courses</span>
                <span class="badge badge-pill">2</span>
              </a>
            </li>
            <li>
              <a class="dropdown-btn" style="cursor: pointer;" onclick="openTab(event,'profile-tab')">
                <i class="fa fa-user"></i>
                <span>My Profile</span>
              </a>
            </li>
            <li>
              <a class="dropdown-btn" 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">
                  <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>{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 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="@@qfnl_install_url@@/@@folder@@asset/img/img-a/{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">
                          <div class="text-end">
                            <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">
                              <button class="btn btn-primary" type="submit">
                                <i class="fas fa-user-check"></i> Update Password</button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

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>