Add debug page for trip objects

Add /trip/<start>/debug endpoint that displays the complete trip object
data in pretty-printed JSON format with syntax highlighting. Includes
both raw data and computed properties for debugging purposes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

templates/trip_debug.html

@@ -0,0 +1,128 @@
+{% extends "base.html" %}
+
+{% block title %}Debug: {{ trip.title }} ({{ trip.start }}) - Edward Betts{% endblock %}
+
+{% block style %}
+<style>
+.json-display {
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    overflow-x: auto;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.debug-header {
+    background-color: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.debug-header h1 {
+    color: #856404;
+    margin-bottom: 0.5rem;
+}
+
+.debug-header p {
+    color: #856404;
+    margin-bottom: 0.5rem;
+}
+
+.debug-header .btn {
+    margin-right: 0.5rem;
+}
+
+/* Basic JSON syntax highlighting using CSS */
+.json-display .json-key {
+    color: #d73a49;
+    font-weight: bold;
+}
+
+.json-display .json-string {
+    color: #032f62;
+}
+
+.json-display .json-number {
+    color: #005cc5;
+}
+
+.json-display .json-boolean {
+    color: #e36209;
+    font-weight: bold;
+}
+
+.json-display .json-null {
+    color: #6f42c1;
+    font-weight: bold;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container-fluid">
+    <div class="debug-header">
+        <h1>🐛 Trip Debug Information</h1>
+        <p>Raw trip object data for: <strong>{{ trip.title }}</strong></p>
+        <a href="{{ url_for('trip_page', start=start) }}" class="btn btn-primary">← Back to Trip Page</a>
+        <button onclick="copyToClipboard()" class="btn btn-secondary">📋 Copy JSON</button>
+    </div>
+    
+    <div class="row">
+        <div class="col-12">
+            <h3>Trip Object (JSON)</h3>
+            <div class="json-display" id="jsonDisplay">{{ trip_json }}</div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function copyToClipboard() {
+    const jsonText = document.getElementById('jsonDisplay').textContent;
+    navigator.clipboard.writeText(jsonText).then(function() {
+        // Show a temporary notification
+        const btn = event.target;
+        const originalText = btn.textContent;
+        btn.textContent = '✅ Copied!';
+        btn.classList.remove('btn-secondary');
+        btn.classList.add('btn-success');
+        
+        setTimeout(function() {
+            btn.textContent = originalText;
+            btn.classList.remove('btn-success');
+            btn.classList.add('btn-secondary');
+        }, 2000);
+    }).catch(function(err) {
+        console.error('Failed to copy: ', err);
+        alert('Failed to copy to clipboard');
+    });
+}
+
+// Simple JSON syntax highlighting
+function highlightJSON() {
+    const display = document.getElementById('jsonDisplay');
+    let content = display.textContent;
+    
+    // Highlight different JSON elements
+    content = content.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
+    content = content.replace(/"([^"]*)"(?=\s*[,\]\}])/g, '<span class="json-string">"$1"</span>');
+    content = content.replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>');
+    content = content.replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>');
+    content = content.replace(/\bnull\b/g, '<span class="json-null">null</span>');
+    
+    display.innerHTML = content;
+}
+
+// Apply highlighting when page loads
+document.addEventListener('DOMContentLoaded', highlightJSON);
+</script>
+{% endblock %}