You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
11 KiB
161 lines
11 KiB
{% load i18n %}
|
|
{% load unfold %}
|
|
{% load course_tags %}
|
|
|
|
{% component "unfold/components/container.html" %}
|
|
<!-- Header with Analytics Button -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
{% component "unfold/components/title.html" with class="text-2xl font-bold text-gray-800" %}
|
|
{% trans "Course Overview" %}
|
|
{% endcomponent %}
|
|
{% component "unfold/components/text.html" with class="text-sm text-gray-600" %}
|
|
{% trans "Key metrics and statistics for this course" %}
|
|
{% endcomponent %}
|
|
</div>
|
|
<div>
|
|
<a href="#course-analytics" class="group inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-sm font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 group-hover:animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
{% trans "View Detailed Analytics" %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards with Improved Design -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
|
<!-- Course Lessons Count -->
|
|
{% component "unfold/components/card.html" with class="bg-gradient-to-br from-blue-50 to-blue-100 border-none shadow-md hover:shadow-lg transition-all duration-300" %}
|
|
<div class="flex items-center p-2">
|
|
<div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-4 mr-5 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
{% component "unfold/components/title.html" with class="text-4xl font-bold text-blue-700 m-0" %}
|
|
{{ original.lessons.count }}
|
|
{% endcomponent %}
|
|
{% component "unfold/components/text.html" with class="text-sm font-medium text-blue-800 mt-1 opacity-80" %}
|
|
{% trans "Total Lessons" %}
|
|
{% endcomponent %}
|
|
</div>
|
|
</div>
|
|
{% endcomponent %}
|
|
|
|
<!-- Course Quizzes Count -->
|
|
{% component "unfold/components/card.html" with class="bg-gradient-to-br from-purple-50 to-purple-100 border-none shadow-md hover:shadow-lg transition-all duration-300" %}
|
|
<div class="flex items-center p-2">
|
|
<div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl p-4 mr-5 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
{% component "unfold/components/title.html" with class="text-4xl font-bold text-purple-700 m-0" %}
|
|
{% get_course_quizzes_count original as quiz_count %}
|
|
{{ quiz_count }}
|
|
{% endcomponent %}
|
|
{% component "unfold/components/text.html" with class="text-sm font-medium text-purple-800 mt-1 opacity-80" %}
|
|
{% trans "Total Quizzes" %}
|
|
{% endcomponent %}
|
|
</div>
|
|
</div>
|
|
{% endcomponent %}
|
|
|
|
<!-- Course Participants Count -->
|
|
{% component "unfold/components/card.html" with class="bg-gradient-to-br from-green-50 to-green-100 border-none shadow-md hover:shadow-lg transition-all duration-300" %}
|
|
<div class="flex items-center p-2">
|
|
<div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-xl p-4 mr-5 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
{% component "unfold/components/title.html" with class="text-4xl font-bold text-green-700 m-0" %}
|
|
{{ original.participants.count }}
|
|
{% endcomponent %}
|
|
{% component "unfold/components/text.html" with class="text-sm font-medium text-green-800 mt-1 opacity-80" %}
|
|
{% trans "Active Participants" %}
|
|
{% endcomponent %}
|
|
</div>
|
|
</div>
|
|
{% endcomponent %}
|
|
</div>
|
|
|
|
<!-- Quick Summary Card -->
|
|
<div class="mb-10">
|
|
{% component "unfold/components/card.html" with class="border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300" %}
|
|
<div class="p-4">
|
|
{% component "unfold/components/title.html" with class="text-xl font-bold mb-4 text-gray-800" %}
|
|
{% trans "Course Summary" %}
|
|
{% endcomponent %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-blue-100 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-sm font-medium text-gray-900">{% trans "Course Status" %}</h3>
|
|
<p class="mt-1 text-sm text-gray-600">{{ original.get_status_display }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-purple-100 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-sm font-medium text-gray-900">{% trans "Duration" %}</h3>
|
|
<p class="mt-1 text-sm text-gray-600">{{ original.duration }} {% trans "hours" %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-green-100 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-sm font-medium text-gray-900">{% trans "Level" %}</h3>
|
|
<p class="mt-1 text-sm text-gray-600">{{ original.get_level_display }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-md bg-yellow-100 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-sm font-medium text-gray-900">{% trans "Price" %}</h3>
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
{% if original.is_free %}
|
|
<span class="text-green-600 font-medium">{% trans "Free" %}</span>
|
|
{% else %}
|
|
{{ original.final_price }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endcomponent %}
|
|
</div>
|
|
|
|
<!-- Detailed Analytics Section -->
|
|
<div id="course-analytics" class="mt-12 pt-8 border-t border-gray-200">
|
|
{% include "course/course_analytics.html" %}
|
|
</div>
|
|
{% endcomponent %}
|