Add change password template

templates/change_password.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block title %}Change Password - Raccoon Timekeeper{% endblock %}
+{% block tagline %}Update your password{% endblock %}
+
+{% block content %}
+<section class="card" style="max-width: 500px; margin: 0 auto;">
+    <div class="card-header">
+        <h2>Change Password</h2>
+    </div>
+
+    <form method="POST" class="auth-form" style="padding: 24px;">
+        <div class="form-group">
+            <label for="current_password">Current Password</label>
+            <input type="password" id="current_password" name="current_password" required
+                   placeholder="Enter your current password">
+        </div>
+
+        <div class="form-group">
+            <label for="new_password">New Password</label>
+            <input type="password" id="new_password" name="new_password" required
+                   placeholder="Min 8 characters" minlength="8">
+        </div>
+
+        <div class="form-group">
+            <label for="confirm_password">Confirm New Password</label>
+            <input type="password" id="confirm_password" name="confirm_password" required
+                   placeholder="Enter new password again" minlength="8">
+        </div>
+
+        <div class="form-actions" style="border-top: none; background: none; padding: 16px 0 0 0;">
+            <a href="{{ url_for('index') }}" class="btn btn-secondary">Cancel</a>
+            <button type="submit" class="btn btn-primary">Update Password</button>
+        </div>
+    </form>
+</section>
+
+<script>
+    document.querySelector('form').addEventListener('submit', function(e) {
+        const newPass = document.getElementById('new_password').value;
+        const confirm = document.getElementById('confirm_password').value;
+        
+        if (newPass !== confirm) {
+            e.preventDefault();
+            alert('New passwords do not match!');
+        }
+    });
+</script>
+{% endblock %}