Files
blackcanyontickets/test-calendar-deployment.html
dzinesco dbf4b11e81 fix: Implement comprehensive edit event button functionality and resolve authentication issues
Major fixes and improvements:
- Fixed edit event button functionality with proper event handlers and DOM ready state checking
- Added status column to tickets table via Supabase migration to resolve 500 API errors
- Updated stats API to correctly calculate revenue from decimal price values
- Resolved authentication redirect loops by fixing cookie configuration for Docker environment
- Fixed Permissions-Policy header syntax errors
- Added comprehensive debugging and error handling for event management
- Implemented modal-based event editing with form validation and API integration
- Enhanced event data loading with proper error handling and user feedback

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-14 18:49:49 -06:00

193 lines
7.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Test - Simulating Fresh Browser</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
.test-container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.test-header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 800px;
border: none;
}
.controls {
padding: 20px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.info {
margin: 10px 0;
padding: 10px;
background: #e7f3ff;
border-left: 4px solid #007bff;
}
</style>
</head>
<body>
<div class="test-container">
<div class="test-header">
<h1>Black Canyon Tickets Calendar - Deployment Test</h1>
<p>Testing what a fresh Chrome Canary browser would see</p>
</div>
<div class="controls">
<button onclick="reloadCalendar()">🔄 Fresh Load (Clear Cache)</button>
<button onclick="toggleTheme()">🌙 Test Theme Toggle</button>
<button onclick="openDevTools()">🔍 Open DevTools</button>
<button onclick="testResponsive()">📱 Test Mobile View</button>
<div class="info">
<strong>Test Status:</strong>
<span id="test-status">Ready to test</span>
</div>
</div>
<iframe id="calendar-frame" src="http://localhost:4321/calendar"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
</iframe>
</div>
<script>
let frameDoc;
// Wait for iframe to load
document.getElementById('calendar-frame').onload = function() {
frameDoc = this.contentDocument || this.contentWindow.document;
checkPageStatus();
};
function updateStatus(message) {
document.getElementById('test-status').textContent = message;
}
function reloadCalendar() {
updateStatus('Reloading with fresh cache...');
const frame = document.getElementById('calendar-frame');
// Simulate fresh browser load by adding cache busting parameter
const url = new URL(frame.src);
url.searchParams.set('_t', Date.now());
frame.src = url.toString();
}
function toggleTheme() {
updateStatus('Testing theme toggle...');
try {
if (frameDoc) {
// Try to find and click the theme toggle button
const themeToggle = frameDoc.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.click();
updateStatus('Theme toggle clicked');
} else {
updateStatus('Theme toggle button not found!');
}
}
} catch (e) {
updateStatus('Error accessing iframe: ' + e.message);
}
}
function openDevTools() {
updateStatus('Open browser DevTools to inspect the iframe');
// Focus the iframe for easier inspection
document.getElementById('calendar-frame').focus();
}
function testResponsive() {
updateStatus('Testing mobile view...');
const frame = document.getElementById('calendar-frame');
if (frame.style.width === '375px') {
frame.style.width = '100%';
frame.style.height = '800px';
updateStatus('Desktop view restored');
} else {
frame.style.width = '375px';
frame.style.height = '667px';
updateStatus('Mobile view (iPhone SE)');
}
}
function checkPageStatus() {
updateStatus('Checking page elements...');
setTimeout(() => {
try {
if (!frameDoc) {
updateStatus('❌ Cannot access iframe content (CORS/security)');
return;
}
const results = [];
// Check for theme attribute
const html = frameDoc.documentElement;
const theme = html.getAttribute('data-theme');
results.push(`Theme: ${theme || 'NOT SET'}`);
// Check for hero section
const heroSection = frameDoc.getElementById('hero-section');
if (heroSection) {
const heroStyle = window.getComputedStyle(heroSection);
const bgValue = heroStyle.background;
results.push(`Hero BG: ${bgValue.includes('var(') ? 'CSS Variable' : 'Direct Value'}`);
} else {
results.push('❌ Hero section not found');
}
// Check for theme toggle
const themeToggle = frameDoc.getElementById('theme-toggle');
results.push(`Theme Toggle: ${themeToggle ? '✅ Found' : '❌ Missing'}`);
// Check for calendar grid
const calendarGrid = frameDoc.getElementById('calendar-grid');
results.push(`Calendar: ${calendarGrid ? '✅ Found' : '❌ Missing'}`);
// Check for loading state
const loadingState = frameDoc.getElementById('loading-state');
if (loadingState) {
const isHidden = loadingState.classList.contains('hidden');
results.push(`Loading: ${isHidden ? 'Hidden' : 'Visible'}`);
}
updateStatus(results.join(' | '));
} catch (e) {
updateStatus('❌ Error checking page: ' + e.message);
}
}, 2000); // Wait 2 seconds for page to fully load
}
</script>
</body>
</html>