Modularize pumpkin.js so it's easy to adapt, make main fetch posts(no creation yet), add very coooool countdown to Halloween with pumpkin carving visualization

templates/countdown.jinja2

@@ -0,0 +1,92 @@
+{% extends "base.jinja2" %}
+
+{% block title %}Halloween Countdown{% endblock title %}
+
+{% block nav %}
+{% if logged_in %}
+<li class="nav-item">
+    <a class="nav-link" href="/">Home</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/profile">Profile</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/logout">Logout</a>
+</li>
+{% else %}
+<li class="nav-item">
+    <a class="nav-link" href="/login">Login</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/register">Register</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/logout">Logout</a>
+</li>
+{% endif %}
+{% endblock %}
+
+{% block body %}
+
+<div class="position-absolute top-50 start-50 translate-middle text-center">
+    <h1 id="halloween_countdown">Time to next Halloween: Loading...</h1>
+    <div class="mt-3"></div>
+    <h3>Carved Pumpkin Countdown Visualization (last 30 days to Halloween):</h3>
+    <canvas id="pumpkin_canvas" width="600" height="600"></canvas>
+</div>
+
+<script>
+const halloween_countdown = document.getElementById("halloween_countdown");
+const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 30, false);
+let colorable = 0;
+let last_days = -1;
+
+function update() {
+    const current_time = new Date();
+    let year = current_time.getFullYear();
+
+    const halloween_time = new Date(year, 9, 31);
+    const after_halloween = new Date(year, 10, 1);
+
+    if (current_time > halloween_time) {
+        if (current_time < after_halloween) {
+            halloween_countdown.textContent = "It's currently Loginween! :)";
+            return;
+        }
+        else {
+            halloween.setFullYear(year + 1);
+        }
+    }
+
+    const diff = halloween_time - current_time;
+
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+    const minutes = Math.floor((diff / (1000 * 60)) % 60);
+    const seconds = Math.floor((diff / 1000) % 60);
+    
+    if (days <= colorable && days != last_days) {
+        last_days = days;
+        clearCanvas(ctx, canvas, img, 30, []);
+        color_amount(ctx, canvas, 30, colorable - days);
+    }
+
+    halloween_countdown.textContent = `Time to next Halloween: ${days} day(s) ${hours} hour(s) ${minutes} minute(s) ${seconds} second(s)`
+}
+
+img.addEventListener('load', function() {
+    colorable = get_colorable(ctx, canvas, 30);
+    imageLoaded = true;
+    update();
+    setInterval(update, 1000);
+});
+
+</script>
+
+{% endblock body %}