first commit

12 files changed, 307 insertions, 0 deletions

diff --git a/apps/tools/__init__.py b/apps/tools/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/tools/__init__.py
diff --git a/apps/tools/admin.py b/apps/tools/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/apps/tools/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/apps/tools/apps.py b/apps/tools/apps.py
new file mode 100644
index 0000000..a6e23d6
--- /dev/null
+++ b/apps/tools/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ToolsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'apps.tools'
diff --git a/apps/tools/migrations/__init__.py b/apps/tools/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/tools/migrations/__init__.py
diff --git a/apps/tools/models.py b/apps/tools/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/apps/tools/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/apps/tools/static/tools/css/hangboard-timer.css b/apps/tools/static/tools/css/hangboard-timer.css
new file mode 100644
index 0000000..afee9bd
--- /dev/null
+++ b/apps/tools/static/tools/css/hangboard-timer.css
@@ -0,0 +1,115 @@
+:root {
+    --bg-action: #923737;
+    --bg-pause: #416e46;
+}
+
+body {
+    transition: background-color 0.3s ease;
+}
+
+main {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+    display: grid;
+    grid-template-rows: auto auto auto auto;
+    row-gap: 40px;
+    min-height: 100vh;
+    align-content: center;
+}
+
+h1 {
+    font-size: 2.5rem;
+    color: #e8e6e3;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+p {
+    font-size: 1.1rem;
+    color: #b0b0b0;
+}
+
+p a {
+    color: #4ecdc4;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+p a:hover {
+    color: #ff6b6b;
+}
+
+.timer-container {
+    display: grid;
+    grid-template-rows: 14vh 12vh 12vh auto;
+    gap: 4vh;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.timer-container #countdown {
+    height: 14vh;
+    font-size: 14vh;
+    font-weight: bold;
+    color: #e8e6e3;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.timer-container #exercise_state {
+    max-height: 12vh;
+    height: 12vh;
+    font-size: clamp(1rem, 6vw, 4.5rem);
+    color: #b0b0b0;
+    transition: color 0.3s ease;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.timer-container #exercise_name {
+    height: 12vh;
+    font-size: clamp(1rem, 6vw, 4.5rem);
+    line-height: 1;
+    white-space: nowrap;
+
+    color: #b0b0b0;
+    transition: color 0.3s ease;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.button-container #btn-start, .button-container #btn-reset {
+    font-size: 1.3rem;
+    padding: 0.8rem 2rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #4ecdc4;
+    color: #fff;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.button-container #btn-start:hover, .button-container #btn-reset:hover {
+    background-color: #45b7b0;
+    transform: translateY(-2px);
+}
+
+.button-container #btn-reset {
+    background-color: #ff6b6b;
+}
+
+.button-container #btn-reset:hover {
+    background-color: #e65b5b;
+}
+
diff --git a/apps/tools/static/tools/js/hangboard-timer.js b/apps/tools/static/tools/js/hangboard-timer.js
new file mode 100644
index 0000000..5949ab2
--- /dev/null
+++ b/apps/tools/static/tools/js/hangboard-timer.js
@@ -0,0 +1,126 @@
+let HangboardTimer = {
+    exercise_names: ["Half-Crimp", "3-Finger Drag", "Front 2-Finger Drag", "Middle 2-Finger Drag", "Front 2-Finger Crimp", "Middle 2-Finger Crimp"],
+    exercise_reps: [6, 6, 2, 2, 2, 2],
+    action_duration: 10,
+    pause_duration: 20,
+    start: function() {
+        this.el_body = document.body;
+        this.el_countdown = document.getElementById("countdown");
+        this.el_exercise_state = document.getElementById("exercise_state");
+        this.el_exercise_name = document.getElementById("exercise_name");
+        if (!this.el_body || !this.el_countdown || !this.el_exercise_state || !this.el_exercise_name || !this.exercise_names.length) {
+            console.error("Missing required elements or exercises");
+            return;
+        }
+        this.audioContext = this.audioContext || new (window.AudioContext || window.webkitAudioContext)();
+
+        this.reset();
+        this.show_state();
+
+        this.interval_id = setInterval(this.update.bind(this), 100);
+    },
+    reset: function() {
+        clearInterval(this.interval_id);
+        this.interval_id = 0;
+        this.exercise_index = 0;
+        this.exercise_rep = 1;
+        this.is_paused = true;
+        this.timer = this.pause_duration;
+        this.last_timestamp = performance.now();
+        this.el_body.style.backgroundColor = "var(--bg-default)";
+        this.el_countdown.textContent = "";
+        this.el_exercise_state.textContent = "";
+        this.el_exercise_name.textContent = "";
+    },
+    update: function() {
+        const current_timestamp = performance.now()
+        const elapsed = (current_timestamp - this.last_timestamp) / 1000;
+
+        this.last_timestamp = current_timestamp;
+        this.timer -= elapsed;
+
+        if (this.timer <= 3 && !this.beep_triggered) {
+            this.play_beeps();
+            this.beep_triggered = true;
+        }
+        if (this.timer <= 0) {
+            const phase_switched = this.switch_phase();
+            if (!phase_switched) {
+                this.finish();
+                return;
+            }
+        }
+
+        this.show_state();
+    },
+    switch_phase: function() {
+        if (this.is_paused) {
+            this.timer = this.action_duration;
+            this.is_paused = false;
+        }
+        else {
+            this.timer = this.pause_duration;
+            this.is_paused = true;
+            if (this.exercise_rep == this.exercise_reps[this.exercise_index]) {
+                this.exercise_index += 1;
+                this.exercise_rep = 1;
+                if (this.exercise_index >= this.exercise_names.length) {
+                    return false;
+                }
+            }
+            else {
+                this.exercise_rep += 1;
+            }
+        }
+        this.beep_triggered = false;
+        return true;
+    },
+    show_state: function() {
+        this.el_countdown.textContent = Math.ceil(this.timer);
+        if (this.is_paused) {
+            this.el_body.style.backgroundColor = "var(--bg-pause)";
+            this.el_exercise_state.textContent = "Upcoming:";
+        }
+        else {
+            this.el_body.style.backgroundColor = "var(--bg-action)";
+            this.el_exercise_state.textContent = "Currently:";
+        }
+        const name = this.exercise_names[this.exercise_index];
+        const rep = this.exercise_rep;
+        const reps = this.exercise_reps[this.exercise_index];
+        this.el_exercise_name.textContent = `${name} (${rep}/${reps})`;
+    },
+    play_beeps: function() {
+        const now = this.audioContext.currentTime;
+        const oscillator = this.audioContext.createOscillator();
+        const gain_node = this.audioContext.createGain();
+        oscillator.connect(gain_node);
+        gain_node.connect(this.audioContext.destination);
+
+        oscillator.type = 'sine';
+        oscillator.frequency.value = 400;
+        oscillator.frequency.setValueAtTime(500, now + 3.0);
+
+        oscillator.start(now);
+        gain_node.gain.setValueAtTime(0.5, now);
+        gain_node.gain.setValueAtTime(0, now + 0.5);
+        gain_node.gain.setValueAtTime(0.5, now + 1.0);
+        gain_node.gain.setValueAtTime(0, now + 1.5);
+        gain_node.gain.setValueAtTime(0.5, now + 2.0);
+        gain_node.gain.setValueAtTime(0, now + 2.5);
+        gain_node.gain.setValueAtTime(0.5, now + 3.0);
+        gain_node.gain.setValueAtTime(0, now + 3.5);
+        oscillator.stop(now + 3.5);
+    },
+    finish: function() {
+        this.el_exercise_state.textContent = "";
+        this.el_exercise_name.textContent = "";
+        this.el_countdown.textContent = "Done.";
+        this.el_body.style.backgroundColor = "var(--bg-default)";
+        clearInterval(this.interval_id);
+        this.interval_id = 0;
+    }
+}
+
+document.getElementById('btn-start').addEventListener('click', () => HangboardTimer.start());
+document.getElementById('btn-reset').addEventListener('click', () => HangboardTimer.reset());
diff --git a/apps/tools/templates/tools/hangboard-timer.html b/apps/tools/templates/tools/hangboard-timer.html
new file mode 100644
index 0000000..248db62
--- /dev/null
+++ b/apps/tools/templates/tools/hangboard-timer.html
@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+{% load static %}
+
+
+{% block title %}Hangboard-Timer - fsweb{% endblock %}
+
+
+{% block morelinks %}
+<link rel="stylesheet" type="text/css" href="{% static 'tools/css/hangboard-timer.css' %}">
+{% endblock %}
+
+
+{% block content %}
+<h1>Hangboard Timer</h1>
+<p>Increase your finger strength! Routine adopted from <a href="https://www.youtube.com/watch?v=3FNZdixeuZw">this</a> video.</p>
+
+<div class="timer-container">
+    <div id="countdown"></div>
+    <div id="exercise_state"></div>
+    <div id="exercise_name"></div>
+    <div class="button-container">
+        <button id="btn-start">Start</button>
+        <button id="btn-reset">Reset</button>
+    </div>
+</div>
+
+<script src="{% static 'tools/js/hangboard-timer.js' %}"></script>
+{% endblock %}
diff --git a/apps/tools/templates/tools/index.html b/apps/tools/templates/tools/index.html
new file mode 100644
index 0000000..45ed82f
--- /dev/null
+++ b/apps/tools/templates/tools/index.html
@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+
+{% block title %}Tools - fsweb{% endblock %}
+
+{% block content %}
+    <h1>Welcome to the Tools Page</h1>
+{% endblock %}
diff --git a/apps/tools/tests.py b/apps/tools/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/apps/tools/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/apps/tools/urls.py b/apps/tools/urls.py
new file mode 100644
index 0000000..93ccff8
--- /dev/null
+++ b/apps/tools/urls.py
@@ -0,0 +1,9 @@
+from django.urls import path
+
+from . import views
+
+app_name = 'tools'
+urlpatterns = [
+    path("", views.view_index, name="index"),
+    path("hangboard-timer/", views.view_hangboard_timer, name="hangboard_timer")
+]
diff --git a/apps/tools/views.py b/apps/tools/views.py
new file mode 100644
index 0000000..182600a
--- /dev/null
+++ b/apps/tools/views.py
@@ -0,0 +1,7 @@
+from django.shortcuts import render
+
+def view_index(request):
+    return render(request, 'tools/index.html')
+
+def view_hangboard_timer(request):
+    return render(request, 'tools/hangboard-timer.html')