<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Span Color Test</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #FFFFFF;
            color: #09090B;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #E4E4E7;
            border-radius: 8px;
            background-color: #FAFAFA;
        }
        .color-palette {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        .color-swatch {
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            color: white;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .text-sample {
            background-color: #F5F7FB;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            line-height: 1.6;
        }
        .span-highlight {
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: 500;
        }
        .span-highlight.happy { background-color: #10b9814D; }
        .span-highlight.sad { background-color: #3b82f64D; }
        .span-highlight.angry { background-color: #dc26264D; }
        .span-highlight.surprised { background-color: #8b5cf64D; }
        .span-highlight.neutral { background-color: #71717a4D; }
        .span-highlight.low { background-color: #9ca3af4D; }
        .span-highlight.medium { background-color: #6b72804D; }
        .span-highlight.high { background-color: #3741514D; }

        .label-sample {
            display: inline-block;
            margin: 5px;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
        }
        .label-sample.happy { background-color: #10b98166; }
        .label-sample.sad { background-color: #3b82f666; }
        .label-sample.angry { background-color: #dc262666; }
        .label-sample.surprised { background-color: #8b5cf666; }
        .label-sample.neutral { background-color: #71717a66; }
    </style>
</head>
<body>
    <h1>🎨 Span Color System Test</h1>

    <div class="test-section">
        <h2>Color Palette</h2>
        <p>These are the colors that will be used for span annotations:</p>

        <h3>Emotion Colors</h3>
        <div class="color-palette">
            <div class="color-swatch" style="background-color: #10b981;">Happy<br>#10b981</div>
            <div class="color-swatch" style="background-color: #3b82f6;">Sad<br>#3b82f6</div>
            <div class="color-swatch" style="background-color: #dc2626;">Angry<br>#dc2626</div>
            <div class="color-swatch" style="background-color: #8b5cf6;">Surprised<br>#8b5cf6</div>
            <div class="color-swatch" style="background-color: #71717a;">Neutral<br>#71717a</div>
        </div>

        <h3>Intensity Colors</h3>
        <div class="color-palette">
            <div class="color-swatch" style="background-color: #9ca3af;">Low<br>#9ca3af</div>
            <div class="color-swatch" style="background-color: #6b7280;">Medium<br>#6b7280</div>
            <div class="color-swatch" style="background-color: #374151;">High<br>#374151</div>
        </div>
    </div>

    <div class="test-section">
        <h2>Label Samples (40% opacity)</h2>
        <p>These show how the labels will appear in the annotation interface:</p>
        <div>
            <span class="label-sample happy">Happy</span>
            <span class="label-sample sad">Sad</span>
            <span class="label-sample angry">Angry</span>
            <span class="label-sample surprised">Surprised</span>
            <span class="label-sample neutral">Neutral</span>
        </div>
    </div>

    <div class="test-section">
        <h2>Text Highlighting Samples (30% opacity)</h2>
        <p>These show how highlighted text will appear:</p>

        <div class="text-sample">
            <p>The new artificial intelligence model achieved <span class="span-highlight happy">remarkable results</span> in natural language processing tasks, outperforming previous benchmarks by a significant margin.</p>
        </div>

        <div class="text-sample">
            <p>I'm feeling <span class="span-highlight sad">incredibly sad today</span> because my beloved pet passed away unexpectedly. The house feels so empty without their cheerful presence.</p>
        </div>

        <div class="text-sample">
            <p>The political debate was <span class="span-highlight angry">heated and intense</span>, with candidates passionately arguing about healthcare reform and economic policies.</p>
        </div>

        <div class="text-sample">
            <p>When I heard the news, I was <span class="span-highlight surprised">completely shocked</span> and couldn't believe what had happened.</p>
        </div>

        <div class="text-sample">
            <p>The weather today is <span class="span-highlight neutral">quite ordinary</span> with no significant changes expected throughout the day.</p>
        </div>
    </div>

    <div class="test-section">
        <h2>API Test</h2>
        <p>Testing the color API endpoint:</p>
        <div id="api-result">Loading...</div>
    </div>

    <script>
        // Test the API endpoint
        fetch('/api/colors')
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('api-result');
                resultDiv.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            })
            .catch(error => {
                const resultDiv = document.getElementById('api-result');
                resultDiv.innerHTML = '<p style="color: red;">Error: ' + error.message + '</p>';
            });
    </script>
</body>
</html>