|
|
|
@ -49,11 +49,13 @@
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="flex justify-end items-center gap-2">
|
|
|
|
|
<button
|
|
|
|
|
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300" id="startPointButton">
|
|
|
|
|
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300"
|
|
|
|
|
id="startPointButton">
|
|
|
|
|
<i class="fa fa-play"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300" id="pausePointButton">
|
|
|
|
|
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300"
|
|
|
|
|
id="pausePointButton">
|
|
|
|
|
<i class="fa fa-pause"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
@ -78,42 +80,11 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full">
|
|
|
|
|
<p class="text-gray-500 text-sm">Total Time: <span class="font-semibold pointTotalTime text-red-500">0min</span></p>
|
|
|
|
|
<p class="text-gray-500 text-sm">Total Time: <span
|
|
|
|
|
class="font-semibold pointTotalTime text-red-500">0min</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function setTextColor(color) {
|
|
|
|
|
document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
|
|
|
|
|
document.querySelector('.pointTotalTime').classList.add(color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById('startPointButton').addEventListener('click', function() {
|
|
|
|
|
// Hide the play button
|
|
|
|
|
document.getElementById('startPointButton').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
// Display the pause button
|
|
|
|
|
document.getElementById('pausePointButton').style.display = 'block';
|
|
|
|
|
|
|
|
|
|
// Set the text color to green
|
|
|
|
|
setTextColor('text-green-700');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('pausePointButton').addEventListener('click', function() {
|
|
|
|
|
// Hide the pause button
|
|
|
|
|
document.getElementById('pausePointButton').style.display = 'none';
|
|
|
|
|
|
|
|
|
|
// Display the play button
|
|
|
|
|
document.getElementById('startPointButton').style.display = 'block';
|
|
|
|
|
|
|
|
|
|
// Set the text color to red
|
|
|
|
|
setTextColor('text-red-500');
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{% if point.status == 'Completed' %}
|
|
|
|
@ -156,6 +127,10 @@
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src='{% static "js/points.js" %}'></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|