54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
{% extends 'layouts/main.html' %}
|
|
|
|
{% block content %}
|
|
<h1>Hello World!</h1>
|
|
<h3>{{ utc_dt }}</h3>
|
|
|
|
|
|
<div class="heatmap" id="heatmap"></div>
|
|
|
|
<script>
|
|
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
|
|
const activityData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
|
|
|
|
// Funktion zum Erstellen der Heatmap
|
|
function createHeatmap(data) {
|
|
const heatmapContainer = document.getElementById('heatmap');
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
|
|
const dayElement = document.createElement('div');
|
|
dayElement.classList.add('day');
|
|
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
|
|
heatmapContainer.appendChild(dayElement);
|
|
}
|
|
}
|
|
|
|
// Erstelle die Heatmap mit den simulierten Daten
|
|
createHeatmap(activityData);
|
|
</script>
|
|
|
|
<div class="row">
|
|
<div class="col-md-5">eins</div>
|
|
<div class="col-md-4">zwei
|
|
<h2>Task List</h2>
|
|
<ul class="task-list">
|
|
<li class="task-item">
|
|
<input type="checkbox" class="task-checkbox">
|
|
<span class="task-text">Task 1</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<input type="checkbox" class="task-checkbox">
|
|
<span class="task-text">Task 2</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<input type="checkbox" class="task-checkbox">
|
|
<span class="task-text">Task 3</span>
|
|
</li>
|
|
<!-- Add more tasks as needed -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %} |