bert.hausmans/band-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit - Band Management application

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_course.html Normal file
View File

@@ -0,0 +1,338 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Academy - My Courses - App{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/plyr/plyr.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/plyr/plyr.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-academy.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-academy-course.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="app-academy">
<div class="card p-0 mb-6">
<div class="card-body d-flex flex-column flex-md-row justify-content-between p-0 pt-6">
<div class="app-academy-md-25 card-body py-0 pt-6 ps-12">
<img src="{% static 'img/illustrations/bulb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid app-academy-img-height scaleX-n1-rtl" alt="Bulb in hand" data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png" height="90" />
</div>
<div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-6 py-6">
<span class="card-title mb-4 lh-lg px-md-12 h4 text-heading">
Education, talents, and career<br />
opportunities. <span class="text-primary text-nowrap">All in one place</span>.
</span>
<p class="mb-4">
Grow your skill with the most reliable online courses and certifications in<br />
marketing, information technology, programming, and data science.
</p>
<div class="d-flex align-items-center justify-content-between app-academy-md-80">
<input type="search" placeholder="Find your course" class="form-control me-4" />
<button type="submit" class="btn btn-primary btn-icon"><i class="icon-base ti tabler-search icon-22px"></i></button>
</div>
</div>
<div class="app-academy-md-25 d-flex align-items-end justify-content-end">
<img src="{% static 'img/illustrations/pencil-rocket.png' %}" alt="pencil rocket" height="188" class="scaleX-n1-rtl" />
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header d-flex flex-wrap justify-content-between gap-4">
<div class="card-title mb-0 me-1">
<h5 class="mb-0">My Courses</h5>
<p class="mb-0">Total 6 course you have purchased</p>
</div>
<div class="d-flex justify-content-md-end align-items-center column-gap-6 flex-sm-row flex-column row-gap-4">
<select class="form-select">
<option value="">All Courses</option>
<option value="ui/ux">UI/UX</option>
<option value="seo">SEO</option>
<option value="web">Web</option>
<option value="music">Music</option>
<option value="painting">Painting</option>
</select>
<div class="form-check form-switch my-2 ms-2">
<input type="checkbox" class="form-check-input" id="CourseSwitch" />
<label class="form-check-label text-nowrap mb-0" for="CourseSwitch">Hide completed</label>
</div>
</div>
</div>
<div class="card-body">
<div class="row gy-6 mb-6">
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-1.png' %}" alt="tutor image 1" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-primary">Web</span>
<p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
4.4 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal">(1.23k)</span>
</p>
</div>
<a href="{% url 'app-academy-course-details' %}" class="h5">Basics of Angular</a>
<p class="mt-1">Introductory course for Angular and framework basics in web development.</p>
<p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
<a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle scaleX-n1-rtl me-2"></i><span>Start Over</span> </a>
<a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-2.png' %}" alt="tutor image 2" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4 pe-xl-4 pe-xxl-0">
<span class="badge bg-label-danger">UI/UX</span>
<p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
4.2 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (424)</span>
</p>
</div>
<a class="h5" href="{% url 'app-academy-course-details' %}">Figma & More</a>
<p class="mt-1">Introductory course for design and framework basics in web development.</p>
<p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
<a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
<a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-3.png' %}" alt="tutor image 3" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-success">SEO</span>
<p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
5 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (12)</span>
</p>
</div>
<a class="h5" href="{% url 'app-academy-course-details' %}">Keyword Research</a>
<p class="mt-1">Keyword suggestion tool provides comprehensive details & keyword suggestions.</p>
<p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>7 hours</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
<a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
<a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-4.png' %}" alt="tutor image 4" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-info">Music</span>
<p class="d-flex align-items-center justify-content-center gap-1 mb-0">
3.8 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (634)</span>
</p>
</div>
<a class="h5" href="{% url 'app-academy-course-details' %}">Basics to Advanced</a>
<p class="mt-1">20 more lessons like this about music production, writing, mixing, mastering</p>
<p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
<a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
<a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-5.png' %}" alt="tutor image 5" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-warning">Painting</span>
<p class="d-flex align-items-center justify-content-center gap-1 mb-0">
4.7 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (34)</span>
</p>
</div>
<a class="h5" href="{% url 'app-academy-course-details' %}">Art & Drawing</a>
<p class="mt-1">Easy-to-follow video & guides show you how to draw animals, people & more.</p>
<p class="d-flex align-items-center text-success mb-1"><i class="icon-base ti tabler-check me-1"></i>Completed</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<a class="w-100 btn btn-label-primary" href="{% url 'app-academy-course-details' %}"><i class="icon-base ti tabler-rotate-clockwise-2 icon-xs me-1_5"></i>Start Over</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card p-2 h-100 shadow-none border">
<div class="rounded-2 text-center mb-4">
<a href="{% url 'app-academy-course-details' %}"><img class="img-fluid" src="{% static 'img/pages/app-academy-tutor-6.png' %}" alt="tutor image 6" /></a>
</div>
<div class="card-body p-4 pt-2">
<div class="d-flex justify-content-between align-items-center mb-4">
<span class="badge bg-label-danger">UI/UX</span>
<p class="d-flex align-items-center justify-content-center gap-1 mb-0">
3.6 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (2.5k)</span>
</p>
</div>
<a class="h5" href="{% url 'app-academy-course-details' %}">Basics Fundamentals</a>
<p class="mt-1">This guide will help you develop a systematic approach user interface.</p>
<p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
<div class="progress mb-4" style="height: 8px">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
<a class="w-100 btn btn-label-secondary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
<a class="w-100 btn btn-label-primary d-flex align-items-center" href="{% url 'app-academy-course-details' %}"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
</div>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation" class="d-flex align-items-center justify-content-center">
<ul class="pagination mb-0 pagination-rounded">
<li class="page-item first disabled">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm scaleX-n1-rtl"></i></a>
</li>
<li class="page-item prev disabled">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm scaleX-n1-rtl"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">6</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-xs scaleX-n1-rtl"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm scaleX-n1-rtl"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row gy-6 mb-6">
<div class="col-lg-6">
<div class="card shadow-none bg-label-primary h-100">
<div class="card-body d-flex justify-content-between flex-wrap-reverse">
<div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
<div class="card-title">
<h5 class="text-primary mb-2">Earn a Certificate</h5>
<p class="text-body w-sm-80 app-academy-xl-100">Get the right professional certificate program for you.</p>
</div>
<div class="mb-0"><button class="btn btn-sm btn-primary">View Programs</button></div>
</div>
<div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
<img class="img-fluid scaleX-n1-rtl" src="{% static 'img/illustrations/boy-app-academy.png' %}" alt="boy illustration" />
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card shadow-none bg-label-danger h-100">
<div class="card-body d-flex justify-content-between flex-wrap-reverse">
<div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
<div class="card-title">
<h5 class="text-danger mb-2">Best Rated Courses</h5>
<p class="text-body app-academy-sm-60 app-academy-xl-100">Enroll now in the most popular and best rated courses.</p>
</div>
<div class="mb-0"><button class="btn btn-sm btn-danger">View Courses</button></div>
</div>
<div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
<img class="img-fluid scaleX-n1-rtl" src="{% static 'img/illustrations/girl-app-academy.png' %}" alt="girl illustration" />
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body row gy-6">
<div class="col-sm-12 col-lg-4 text-center pt-md-12 px-4">
<span class="badge bg-label-primary rounded mb-4 h-px-52 w-px-52 p-2"><i class="icon-base ti tabler-gift icon-36px"></i></span>
<h4 class="card-title mb-4">Today's Free Courses</h4>
<p class="card-text">We offers 284 Free Online courses from top tutors and companies to help you start or advance your career skills. Learn online for free and fast today!</p>
<button class="btn btn-primary">Get premium courses</button>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 shadow-none border">
<div class="p-2 pb-0">
<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player" playsinline controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
<div class="card-body">
<h5 class="card-title">Your First Singing Lesson</h5>
<p class="card-text">In the same way as any other artistic domain, singing lends itself perfectly to self-teaching.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 shadow-none border">
<div class="p-2 pb-0">
<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player-2" playsinline controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
<div class="card-body">
<h5 class="card-title">Guitar for Beginners</h5>
<p class="card-text">The Fender Acoustic Guitar is the best choice for both beginners and professionals offering a great sound.</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

277
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_course_details.html Normal file
View File

@@ -0,0 +1,277 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Academy - Course Details - App{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/plyr/plyr.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/plyr/plyr.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-academy-details.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-academy-course-details.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
<div class="me-1">
<h5 class="mb-0">UI/UX Basic Fundamentals</h5>
<p class="mb-0">Prof. <span class="fw-medium text-heading"> Devonne Wallbridge </span></p>
</div>
<div class="d-flex align-items-center">
<span class="badge bg-label-danger">UI/UX</span>
<i class="icon-base ti tabler-share icon-lg mx-4"></i>
<i class="icon-base ti tabler-bookmarks icon-lg"></i>
</div>
</div>
<div class="card academy-content shadow-none border">
<div class="p-2">
<div class="cursor-pointer">
<video class="w-100" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="plyr-video-player" playsinline controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
</div>
<div class="card-body pt-4">
<h5>About this course</h5>
<p class="mb-0">Learn web design in 1 hour with 25+ simple-to-use rules and guidelines — tons of amazing web design resources included!</p>
<hr class="my-6" />
<h5>By the numbers</h5>
<div class="d-flex flex-wrap row-gap-2">
<div class="me-12">
<p class="text-nowrap mb-2"><i class="icon-base ti tabler-check me-2 align-bottom"></i>Skill level: All Levels</p>
<p class="text-nowrap mb-2"><i class="icon-base ti tabler-users me-2 align-top"></i>Students: 38,815</p>
<p class="text-nowrap mb-2"><i class="icon-base ti tabler-world me-2 align-bottom"></i>Languages: English</p>
<p class="text-nowrap mb-0"><i class="icon-base ti tabler-file me-2 align-bottom"></i>Captions: Yes</p>
</div>
<div>
<p class="text-nowrap mb-2"><i class="icon-base ti tabler-video me-2 align-top ms-50"></i>Lectures: 19</p>
<p class="text-nowrap mb-0"><i class="icon-base ti tabler-clock me-2 align-top"></i>Video: 1.5 total hours</p>
</div>
</div>
<hr class="my-6" />
<h5>Description</h5>
<p class="mb-6">The material of this course is also covered in my other course about web design and development with HTML5 & CSS3. Scroll to the bottom of this page to check out that course, too! If you're already taking my other course, you already have all it takes to start designing beautiful websites today!</p>
<p class="mb-6">"Best web design course: If you're interested in web design, but want more than just a "how to use WordPress" course,I highly recommend this one." — Florian Giusti</p>
<p>"Very helpful to us left-brained people: I am familiar with HTML, CSS, JQuery, and Twitter Bootstrap, but I needed instruction in web design. This course gave me practical, impactful techniques for making websites more beautiful and engaging." — Susan Darlene Cain</p>
<hr class="my-6" />
<h5>Instructor</h5>
<div class="d-flex justify-content-start align-items-center user-name">
<div class="avatar-wrapper">
<div class="avatar me-4"><img src="{% static 'img/avatars/11.png' %}" alt="Avatar" class="rounded-circle" /></div>
</div>
<div class="d-flex flex-column">
<h6 class="mb-1">Devonne Wallbridge</h6>
<small>Web Developer, Designer, and Teacher</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="accordion stick-top accordion-custom-button" id="courseContent">
<div class="accordion-item active mb-0">
<div class="accordion-header" id="headingOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#chapterOne" aria-expanded="true" aria-controls="chapterOne">
<span class="d-flex flex-column">
<span class="h5 mb-0">Course Content</span>
<span class="text-body fw-normal">2 / 5 | 4.4 min</span>
</span>
</button>
</div>
<div id="chapterOne" class="accordion-collapse collapse show" data-bs-parent="#courseContent">
<div class="accordion-body py-4">
<div class="form-check mb-4">
<input class="form-check-input mt-3" type="checkbox" id="defaultCheck1" checked="" />
<label for="defaultCheck1" class="form-check-label ms-4">
<span class="mb-0 h6">1. Welcome to this course</span>
<small class="text-body d-block">2.4 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3" type="checkbox" id="defaultCheck2" checked="" />
<label for="defaultCheck2" class="form-check-label ms-4">
<span class="mb-0 h6">2. Watch before you start</span>
<small class="text-body d-block">4.8 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3" type="checkbox" id="defaultCheck3" />
<label for="defaultCheck3" class="form-check-label ms-4">
<span class="mb-0 h6">3. Basic design theory</span>
<small class="text-body d-block">5.9 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3" type="checkbox" id="defaultCheck4" />
<label for="defaultCheck4" class="form-check-label ms-4">
<span class="mb-0 h6">4. Basic fundamentals</span>
<small class="text-body d-block">3.6 min</small>
</label>
</div>
<div class="form-check mb-0">
<input class="form-check-input mt-3" type="checkbox" id="defaultCheck5" />
<label for="defaultCheck5" class="form-check-label ms-4">
<span class="mb-0 h6">5. What is ui/ux</span>
<small class="text-body d-block">10.6 min</small>
</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterTwo" aria-expanded="false" aria-controls="chapterTwo">
<span class="d-flex flex-column">
<span class="h5 mb-0">Web Design for Web Developers</span>
<span class="text-body fw-normal">1 / 4 | 4.4 min</span>
</span>
</button>
</div>
<div id="chapterTwo" class="accordion-collapse collapse" data-bs-parent="#courseContent">
<div class="accordion-body py-4">
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck1" checked="" />
<label for="defCheck1" class="form-check-label ms-4">
<span class="mb-0 h6">1. How to use Pages in Figma</span>
<small class="text-body d-block">8:31 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck2" />
<label for="defCheck2" class="form-check-label ms-4">
<span class="mb-0 h6">2. What is Lo Fi Wireframe</span>
<small class="text-body d-block">2 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck3" />
<label for="defCheck3" class="form-check-label ms-4">
<span class="mb-0 h6">3. How to use color in Figma</span>
<small class="text-body d-block">5.9 min</small>
</label>
</div>
<div class="form-check mb-0">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck4" />
<label for="defCheck4" class="form-check-label ms-4">
<span class="mb-0 h6">4. Frames vs Groups in Figma</span>
<small class="text-body d-block">3.6 min</small>
</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterThree" aria-expanded="false" aria-controls="chapterThree">
<span class="d-flex flex-column">
<span class="h5 mb-0">Build Beautiful Websites!</span>
<span class="text-body fw-normal">0 / 6 | 4.4 min</span>
</span>
</button>
</div>
<div id="chapterThree" class="accordion-collapse collapse" data-bs-parent="#courseContent">
<div class="accordion-body py-4">
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-01" />
<label for="defCheck-01" class="form-check-label ms-4">
<span class="mb-0 h6">1. Section & Div Block</span>
<small class="text-body d-block">8:31 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-02" />
<label for="defCheck-02" class="form-check-label ms-4">
<span class="mb-0 h6">2. Read-Only Version of Chat App</span>
<small class="text-body d-block">8 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-03" />
<label for="defCheck-03" class="form-check-label ms-4">
<span class="mb-0 h6">3. Webflow Autosave</span>
<small class="text-body d-block">2.9 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-04" />
<label for="defCheck-04" class="form-check-label ms-4">
<span class="mb-0 h6">4. Canvas Settings</span>
<small class="text-body d-block">7.6 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-05" />
<label for="defCheck-05" class="form-check-label ms-4">
<span class="mb-0 h6">5. HTML Tags</span>
<small class="text-body d-block">10 min</small>
</label>
</div>
<div class="form-check mb-0">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-06" />
<label for="defCheck-06" class="form-check-label ms-4">
<span class="mb-0 h6">6. Footer (Chat App)</span>
<small class="text-body d-block">9.10 min</small>
</label>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="headingFour">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterFour" aria-expanded="false" aria-controls="chapterFour">
<span class="d-flex flex-column">
<span class="h5 mb-0">Final Project</span>
<span class="text-body fw-normal">2 / 3 | 4.4 min</span>
</span>
</button>
</div>
<div id="chapterFour" class="accordion-collapse collapse" data-bs-parent="#courseContent">
<div class="accordion-body py-4">
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-101" checked="" />
<label for="defCheck-101" class="form-check-label ms-4">
<span class="mb-0 h6">1. Responsive Blog Site</span>
<small class="text-body d-block">10:0 min</small>
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-102" checked="" />
<label for="defCheck-102" class="form-check-label ms-4">
<span class="mb-0 h6">2. Responsive Portfolio</span>
<small class="text-body d-block">13:00 min</small>
</label>
</div>
<div class="form-check mb-0">
<input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-103" />
<label for="defCheck-103" class="form-check-label ms-4">
<span class="mb-0 h6">3. Responsive eCommerce Website</span>
<small class="text-body d-block">15 min</small>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

537
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/academy/templates/app_academy_dashboard.html Normal file
View File

@@ -0,0 +1,537 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Academy - Dashboard - App{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-academy-dashboard.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Hour chart -->
<div class="card bg-transparent shadow-none my-6 border-0">
<div class="card-body row p-0 pb-6 g-6">
<div class="col-12 col-lg-8 card-separator">
<h5 class="mb-2">Welcome back,<span class="h4"> Felecia 👋🏻</span></h5>
<div class="col-12 col-lg-5">
<p>Your progress this week is Awesome. let's keep it up and get a lot of points reward !</p>
</div>
<div class="d-flex justify-content-between flex-wrap gap-4 me-12">
<div class="d-flex align-items-center gap-4 me-6 me-sm-0">
<div class="avatar avatar-lg">
<div class="avatar-initial bg-label-primary rounded">
<div class="text-primary">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Laptop">
<path id="Vector" opacity="0.2" d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125H5.9375Z" fill="currentColor" />
<path
id="Vector_2"
d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125M21.375 13.0625H16.625M3.5625 26.125H34.4375V28.5C34.4375 29.1299 34.1873 29.734 33.7419 30.1794C33.2965 30.6248 32.6924 30.875 32.0625 30.875H5.9375C5.30761 30.875 4.70352 30.6248 4.25812 30.1794C3.81272 29.734 3.5625 29.1299 3.5625 28.5V26.125Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</svg>
</div>
</div>
</div>
<div class="content-right">
<p class="mb-0 fw-medium">Hours Spent</p>
<h4 class="text-primary mb-0">34h</h4>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar avatar-lg">
<div class="avatar-initial bg-label-info rounded">
<div class="text-info">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Lightbulb">
<path
id="Vector"
opacity="0.2"
d="M11.6822 24.7891C10.2684 23.6898 9.12342 22.2832 8.33388 20.6759C7.54435 19.0685 7.13099 17.3025 7.12513 15.5117C7.09544 9.06954 12.2759 3.71095 18.7181 3.56251C21.2113 3.50341 23.6599 4.23078 25.7166 5.64147C27.7732 7.05217 29.3335 9.07457 30.1761 11.4219C31.0188 13.7691 31.101 16.3221 30.4112 18.7188C29.7214 21.1154 28.2945 23.2341 26.3329 24.7742C25.8996 25.1092 25.5486 25.5388 25.3068 26.0301C25.065 26.5215 24.9387 27.0617 24.9376 27.6094V28.5C24.9376 28.815 24.8125 29.117 24.5898 29.3397C24.3671 29.5624 24.0651 29.6875 23.7501 29.6875H14.2501C13.9352 29.6875 13.6331 29.5624 13.4104 29.3397C13.1877 29.117 13.0626 28.815 13.0626 28.5V27.6094C13.0589 27.0658 12.9329 26.5301 12.6939 26.0418C12.4549 25.5536 12.1091 25.1255 11.6822 24.7891Z"
fill="currentColor" />
<path
id="Union"
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.1509 6.46609C23.2675 5.17419 21.0251 4.50807 18.7418 4.5622L18.7411 4.56221C18.4983 4.56781 18.2574 4.58151 18.0187 4.60305L18.6951 2.56275C21.398 2.49881 24.0526 3.28743 26.2822 4.8168C28.512 6.34629 30.2037 8.53899 31.1173 11.0839C32.031 13.6289 32.1201 16.3969 31.3722 18.9954C30.6243 21.5938 29.0772 23.8909 26.9505 25.5607L26.9445 25.5654L26.9445 25.5654C26.6318 25.8071 26.3785 26.1171 26.204 26.4717C26.0295 26.8263 25.9384 27.2161 25.9376 27.6113V28.5C25.9376 29.0801 25.7072 29.6365 25.2969 30.0468C24.8867 30.457 24.3303 30.6875 23.7501 30.6875H14.2501C13.67 30.6875 13.1136 30.457 12.7033 30.0468C12.2931 29.6365 12.0626 29.0801 12.0626 28.5V27.6131C12.0595 27.2206 11.9683 26.8339 11.7957 26.4815C11.6232 26.1289 11.3737 25.8196 11.0656 25.5764L11.7414 23.5378C11.9208 23.6976 12.1057 23.8517 12.296 23.9996L11.6821 24.7891L12.301 24.0035C12.8459 24.4328 13.2871 24.9792 13.5921 25.6022C13.8971 26.2252 14.0579 26.9089 14.0626 27.6025L14.0627 27.6094L14.0626 28.5C14.0626 28.5497 14.0824 28.5974 14.1175 28.6326C14.1527 28.6677 14.2004 28.6875 14.2501 28.6875H23.7501C23.7999 28.6875 23.8475 28.6677 23.8827 28.6326C23.9179 28.5974 23.9376 28.5497 23.9376 28.5V27.6094L23.9376 27.6074C23.939 26.9073 24.1004 26.2167 24.4096 25.5885C24.7181 24.9616 25.1657 24.4133 25.7181 23.9855C27.5131 22.5752 28.8188 20.6359 29.4502 18.4422C30.082 16.2473 30.0067 13.9093 29.235 11.7597C28.4633 9.61009 27.0344 7.75799 25.1509 6.46609ZM11.7414 23.5378L11.7414 23.5378L18.0187 4.60305L18.018 4.6031L18.6944 2.56276C11.7043 2.72418 6.09331 8.53234 6.12513 15.5156C6.13159 17.458 6.57998 19.3733 7.43632 21.1167C8.29225 22.8593 9.53332 24.3843 11.0656 25.5764L11.7414 23.5378ZM11.7414 23.5378C10.7009 22.6109 9.84781 21.4898 9.23145 20.235C8.50882 18.7638 8.13049 17.1475 8.12512 15.5084L8.12512 15.5071C8.09905 9.84987 12.4637 5.10456 18.018 4.6031L11.7414 23.5378ZM12.0627 34.4375C12.0627 33.8852 12.5104 33.4375 13.0627 33.4375H24.9377C25.49 33.4375 25.9377 33.8852 25.9377 34.4375C25.9377 34.9898 25.49 35.4375 24.9377 35.4375H13.0627C12.5104 35.4375 12.0627 34.9898 12.0627 34.4375ZM20.3697 7.44532C19.8252 7.35302 19.3089 7.71961 19.2166 8.26412C19.1243 8.80864 19.4909 9.32489 20.0354 9.41719C21.2827 9.62862 22.4336 10.222 23.3292 11.1154C24.2249 12.0087 24.8212 13.1581 25.0358 14.4048C25.1295 14.9491 25.6467 15.3144 26.191 15.2207C26.7353 15.127 27.1005 14.6098 27.0068 14.0655C26.722 12.4107 25.9305 10.8851 24.7417 9.69934C23.5528 8.51353 22.0252 7.72596 20.3697 7.44532Z"
fill="currentColor" />
</g>
</svg>
</div>
</div>
</div>
<div class="content-right">
<p class="mb-0 fw-medium">Test Results</p>
<h4 class="text-info mb-0">82%</h4>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar avatar-lg">
<div class="avatar-initial bg-label-warning rounded">
<div class="text-warning">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Check">
<path
id="Vector"
opacity="0.2"
d="M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23438 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65938 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23438 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65938 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
fill="currentColor" />
<path
id="Vector_2"
d="M25.5312 15.4375L16.818 23.75L12.4687 19.5937M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23437 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65937 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23437 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65937 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</svg>
</div>
</div>
</div>
<div class="content-right">
<p class="mb-0 fw-medium">Course Completed</p>
<h4 class="text-warning mb-0">14</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 ps-md-4 ps-lg-6">
<div class="d-flex justify-content-between align-items-center">
<div>
<div>
<h5 class="mb-1">Time Spendings</h5>
<p class="mb-9">Weekly report</p>
</div>
<div class="time-spending-chart">
<h4 class="mb-2">231<span class="text-body">h</span> 14<span class="text-body">m</span></h4>
<span class="badge bg-label-success">+18.4%</span>
</div>
</div>
<div id="leadsReportChart"></div>
</div>
</div>
</div>
</div>
<!-- Hour chart End -->
<!-- Topic and Instructors -->
<div class="row mb-6 g-6">
<div class="col-12 col-xl-8">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">Topic you are interested in</h5>
<div class="dropdown">
<button class="btn p-0" type="button" id="topic" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
<a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
<a class="dropdown-item" href="javascript:void(0);">See All</a>
</div>
</div>
</div>
<div class="card-body row g-3">
<div class="col-md-8">
<div id="horizontalBarChart"></div>
</div>
<div class="col-md-4 d-flex justify-content-around align-items-center">
<div>
<div class="d-flex align-items-baseline">
<span class="text-primary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">UI Design</p>
<h5>35%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-12">
<span class="text-success me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">Music</p>
<h5>14%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-danger me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">React</p>
<h5>10%</h5>
</div>
</div>
</div>
<div>
<div class="d-flex align-items-baseline">
<span class="text-info me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">UX Design</p>
<h5>20%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-12">
<span class="text-secondary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">Animation</p>
<h5>12%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-warning me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
<div>
<p class="mb-0">SEO</p>
<h5>9%</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Popular Instructors</h5>
</div>
<div class="dropdown">
<button class="btn text-body-secondary p-0" type="button" id="popularInstructors" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-22px"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularInstructors">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="px-5 py-4 border border-start-0 border-end-0">
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0 text-uppercase">Instructors</p>
<p class="mb-0 text-uppercase">courses</p>
</div>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-6">
<div class="d-flex align-items-center">
<div class="avatar avatar me-4">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<div>
<h6 class="mb-0 text-truncate">Maven Analytics</h6>
<small class="text-truncate text-body">Business Intelligence</small>
</div>
</div>
</div>
<div class="text-end">
<h6 class="mb-0">33</h6>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-6">
<div class="d-flex align-items-center">
<div class="avatar avatar me-4">
<img src="{% static 'img/avatars/2.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<div>
<h6 class="mb-0 text-truncate">Bentlee Emblin</h6>
<small class="text-truncate text-body">Digital Marketing</small>
</div>
</div>
</div>
<div class="text-end">
<h6 class="mb-0">52</h6>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-6">
<div class="d-flex align-items-center">
<div class="avatar avatar me-4">
<img src="{% static 'img/avatars/3.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<div>
<h6 class="mb-0 text-truncate">Benedetto Rossiter</h6>
<small class="text-truncate text-body">UI/UX Design</small>
</div>
</div>
</div>
<div class="text-end">
<h6 class="mb-0">12</h6>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="avatar avatar me-4">
<img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<div>
<h6 class="mb-0 text-truncate">Beverlie Krabbe</h6>
<small class="text-truncate text-body">React Native</small>
</div>
</div>
</div>
<div class="text-end">
<h6 class="mb-0">8</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">Top Courses</h5>
<div class="dropdown">
<button class="btn text-body-secondary p-0" type="button" id="topCourses" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="topCourses">
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">View All</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-video icon-lg"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
<h6 class="mb-0">Videography Basic Design Course</h6>
</div>
<div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
<div class="badge bg-label-secondary">1.2k Views</div>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-code icon-lg"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
<h6 class="mb-0">Basic Front-end Development Course</h6>
</div>
<div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
<div class="badge bg-label-secondary">834 Views</div>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-success"><i class="icon-base ti tabler-camera icon-lg"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
<h6 class="mb-0">Basic Fundamentals of Photography</h6>
</div>
<div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
<div class="badge bg-label-secondary">3.7k Views</div>
</div>
</div>
</li>
<li class="d-flex mb-6 align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-brand-dribbble icon-lg"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
<h6 class="mb-0">Advance Dribble Base Visual Design</h6>
</div>
<div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
<div class="badge bg-label-secondary">2.5k Views</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="avatar flex-shrink-0 me-4">
<span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-microphone-2 icon-lg"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
<h6 class="mb-0">Your First Singing Lesson</h6>
</div>
<div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
<div class="badge bg-label-secondary">948 Views</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 col-md-6">
<div class="card h-100">
<div class="card-body">
<div class="bg-label-primary rounded-3 text-center mb-4 pt-6">
<img class="img-fluid" src="{% static 'img/illustrations/girl-with-laptop.png' %}" alt="Card girl image" width="140" />
</div>
<h5 class="mb-2">Upcoming Webinar</h5>
<p class="small">Next Generation Frontend Architecture Using Layout Engine And React Native Web.</p>
<div class="row mb-4 g-3">
<div class="col-6">
<div class="d-flex align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-calendar-event icon-28px"></i></span>
</div>
<div>
<h6 class="mb-0 text-nowrap">17 Nov 23</h6>
<small>Date</small>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-clock icon-28px"></i></span>
</div>
<div>
<h6 class="mb-0 text-nowrap">32 minutes</h6>
<small>Duration</small>
</div>
</div>
</div>
</div>
<div class="col-12 text-center">
<a href="javascript:void(0);" class="btn btn-primary w-100 d-grid">Join the event</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">Assignment Progress</h5>
<div class="dropdown">
<button class="btn text-body-secondary p-0" type="button" id="assignmentProgress" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="assignmentProgress">
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">View All</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="p-0 m-0">
<li class="d-flex mb-4 pb-1">
<div class="chart-progress me-4" data-color="primary" data-series="72" data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-1">User experience Design</h6>
<p class="mb-0 small">120 Tasks</p>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-label-secondary">
<i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex mb-4 pb-1">
<div class="chart-progress me-4" data-color="success" data-series="48" data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-1">Basic fundamentals</h6>
<p class="mb-0 small">32 Tasks</p>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-label-secondary">
<i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex mb-4 pb-1">
<div class="chart-progress me-4" data-color="danger" data-series="15" data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-1">React native components</h6>
<p class="mb-0 small">182 Tasks</p>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-label-secondary">
<i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex">
<div class="chart-progress me-4" data-color="info" data-series="24" data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-1">Basic of music theory</h6>
<p class="mb-0 small">56 Tasks</p>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-label-secondary">
<i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Topic and Instructors End-->
<!-- Course datatable -->
<div class="card mb-6">
<div class="mb-4">
<table class="table datatables-academy-course">
<thead>
<tr>
<th></th>
<th></th>
<th>Course Name</th>
<th>Time</th>
<th class="w-25">Progress</th>
<th class="w-25">Status</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- Course datatable End -->
{% endblock %}