`frontend/src/simple.html`

77 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Test - CyPresAwards</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
        .org-card { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; }
        .org-name { color: #333; margin: 0 0 10px 0; }
        .error { background: #fee; border: 1px solid #fcc; padding: 10px; margin: 10px 0; }
        .success { background: #efe; border: 1px solid #cfc; padding: 10px; margin: 10px 0; }
        .loading { text-align: center; padding: 20px; color: #666; }
    </style>
</head>
<body>
    <h1>CyPresAwards - Simple Test</h1>
    <div id="status" class="loading">Loading...</div>
    <div id="organizations"></div>

    <script>
        console.log('Script started');

        const API_URL = 'http://45.61.58.125:3010/api';
        const statusDiv = document.getElementById('status');
        const orgsDiv = document.getElementById('organizations');

        async function loadData() {
            try {
                console.log('Fetching from:', API_URL + '/organizations?limit=10&offset=0');

                const response = await fetch(API_URL + '/organizations?limit=10&offset=0');
                console.log('Response:', response);
                console.log('Status:', response.status);

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const json = await response.json();
                console.log('JSON data:', json);

                if (!json.success) {
                    throw new Error('API returned success=false');
                }

                const orgs = json.data;
                console.log('Organizations count:', orgs.length);

                statusDiv.innerHTML = `<div class="success">✅ Loaded ${orgs.length} organizations successfully!</div>`;

                orgsDiv.innerHTML = orgs.map(org => `
                    <div class="org-card">
                        <h3 class="org-name">${org.name}</h3>
                        <p><strong>Location:</strong> ${org.location_city || ''} ${org.location_state || ''} ${org.location_country || ''}</p>
                        <p><strong>Website:</strong> <a href="${org.website_url}" target="_blank" rel="noopener noreferrer">${org.website_url}</a></p>
                        ${org.cypres_page_url ? `<p><strong>Cy Pres:</strong> <a href="${org.cypres_page_url}" target="_blank" rel="noopener noreferrer">${org.cypres_page_url}</a></p>` : ''}
                        ${org.mission_statement ? `<p>${org.mission_statement.substring(0, 200)}...</p>` : ''}
                    </div>
                `).join('');

            } catch (error) {
                console.error('Error:', error);
                statusDiv.innerHTML = `<div class="error">❌ Error: ${error.message}<br><br>Check browser console for details.</div>`;
                console.error('Full error:', error);
            }
        }

        // Load data when page is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadData);
        } else {
            loadData();
        }
    </script>
</body>
</html>