
<!DOCTYPE html>
<html>
<head>
    <title>Dream Reader</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        function updateCharCounter() {
            const dreamText = document.getElementById('dream-text');
            const charCounter = document.getElementById('char-counter');
            const currentLength = dreamText.value.length;
            
            charCounter.textContent = `${currentLength} / 1000`;
            charCounter.classList.toggle('limit-reached', currentLength >= 1000);
        }

        function resetForm() {
            const dreamText = document.getElementById('dream-text');
            const resultDiv = document.getElementById('analysis-result');
            const button = document.querySelector('button');
            const charCounter = document.getElementById('char-counter');
            
            dreamText.value = '';
            resultDiv.style.display = 'none';
            button.onclick = testFunction;
            button.textContent = 'Analyze Dream';
            charCounter.textContent = '0 / 1000 characters';
            charCounter.classList.remove('limit-reached');
        }

        function testFunction() {
            const dreamText = document.getElementById('dream-text').value;
            const resultDiv = document.getElementById('analysis-result');
            const button = document.querySelector('button');
            
            if (!dreamText) {
                alert('Please enter your dream first');
                return;
            }

            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="analysis-header">Processing...</div>';

            resultDiv.innerHTML =
                '<div class="analysis-header">Dream Analysis</div>' +
                '<div class="analysis-content"><span class="loading-dots">Analyzing your dream</span></div>';
            const contentDiv = resultDiv.querySelector('.analysis-content');
            let streamStarted = false;
            let fullText = '';

            const loadingMessages = [
                'Analyzing your dream',
                'Exploring dream symbols',
                'Interpreting hidden meanings',
                'Connecting dream patterns',
                'Preparing your analysis'
            ];
            let msgIndex = 0;
            const loadingInterval = setInterval(() => {
                if (streamStarted) { clearInterval(loadingInterval); return; }
                msgIndex = (msgIndex + 1) % loadingMessages.length;
                contentDiv.innerHTML = '<span class="loading-dots">' + loadingMessages[msgIndex] + '</span>';
            }, 4000);

            fetch('/analyze', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ dreamText })
            })
            .then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                function read() {
                    return reader.read().then(({ done, value }) => {
                        if (done) {
                            button.textContent = 'New Dream';
                            button.onclick = resetForm;
                            return;
                        }
                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop();
                        for (const line of lines) {
                            if (line.startsWith('data: ') && line !== 'data: [DONE]') {
                                try {
                                    const json = JSON.parse(line.slice(6));
                                    const token = json.choices?.[0]?.delta?.content || json.response || '';
                                    if (token) {
                                        if (!streamStarted) {
                                            streamStarted = true;
                                            clearInterval(loadingInterval);
                                        }
                                        fullText += token;
                                        contentDiv.innerHTML = marked.parse(fullText);
                                    }
                                } catch (e) {}
                            }
                        }
                        return read();
                    });
                }
                return read();
            })
            .catch(error => {
                clearInterval(loadingInterval);
                resultDiv.innerHTML =
                    '<div class="analysis-header">Error</div>' +
                    '<div class="analysis-content">Failed to analyze dream: ' + error.message + '</div>';
            });
        }

        // Initialize event listeners
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('dream-text').addEventListener('input', updateCharCounter);
            updateCharCounter(); // Initialize counter
        });
    </script>
    <style>
        :root {
            --primary-color: #D4AF37;    /* Metallic Gold */
            --text-color: #fcffea;       /* Light cream */
            --secondary-text: #fcffea;    /* Same light cream */
            --background-color: #1a1a1a;
            --card-background: rgba(30, 30, 30, 0.8);
            --shadow: 0 14px 12px rgba(0, 0, 0, 0.3);
            --input-background: #2d2d2d;
            --input-border: #3d3d3d;
            --button-hover: #BFA730;      /* Darker Metallic Gold */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--background-color); /* Fallback color */
            background-image: url('image/dreamer-bg-clock.jpg');
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            color: var(--text-color);
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -0.022em;
            min-height: 100vh;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.2); /* Dark overlay */
            z-index: 0;
        }

        .container {
            position: relative;
            z-index: 1;
            max-width: 980px;
            margin: 0 auto;
            padding: 120px 20px;
        }

        h1 {
            font-size: 56px;
            line-height: 1.07143;
            font-weight: 600;
            letter-spacing: -0.005em;
            margin-bottom: 8px;
            text-align: center;
            color: var(--text-color);
	    text-shadow: 0 0 20px #000000
        }

        .subtitle {
            font-size: 28px;
            line-height: 1.10722;
            font-weight: 400;
            letter-spacing: .004em;
            color: var(--text-color);
            text-align: center;
            margin-bottom: 48px;
	    text-shadow: 0 0 20px #000000
        }

        .dream-form {
            max-width: 680px;
            margin: 0 auto;
            background: var(--card-background);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 18px;
            padding: 32px;
            box-shadow: var(--shadow);
            border: 1px solid var(--input-border);
        }

        textarea {
            width: 100%;
            height: 200px;
            padding: 16px;
            border: 1px solid var(--input-border);
            border-radius: 12px;
            font-family: inherit;
            font-size: 17px;
            line-height: 1.47059;
            color: var(--text-color);
            background: var(--input-background);
            transition: border-color 0.2s ease;
            resize: vertical;
            margin-bottom: 24px;
        }

        textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        textarea::placeholder {
            color: #666;
        }

        button {
            display: block;
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
            padding: 12px 24px;
            font-size: 17px;
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -0.022em;
            background-color: var(--primary-color);
            color: #000;  /* Black text on gold button */
            border: none;
            border-radius: 980px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        button:hover {
            background-color: var(--button-hover);
            transform: translateY(-2px);
        }

        button:active {
            transform: scale(0.98);
        }

        #analysis-result {
            max-width: 680px;
            margin: 32px auto 0;
            padding: 32px;
            background: var(--card-background);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 18px;
            box-shadow: var(--shadow);
            display: none;
            border: 1px solid var(--input-border);
        }

        .analysis-header {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--text-color);
        }

        .analysis-content {
            font-size: 17px;
            line-height: 1.47059;
            color: var(--text-color);
        }

        .analysis-content h1, .analysis-content h2, .analysis-content h3 {
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .analysis-content p {
            margin-bottom: 8px;
        }

        .analysis-content ul, .analysis-content ol {
            margin-bottom: 8px;
            padding-left: 24px;
        }

        .analysis-content li {
            margin-bottom: 4px;
        }

        .analysis-content strong {
            color: var(--primary-color);
        }

        .char-counter {
            font-size: 14px;
            color: var(--text-color);
            text-align: right;
            margin-top: -20px;
            margin-bottom: 20px;
            opacity: 0.8;
        }

        .char-counter.limit-reached {
            color: #ff4444;
        }

        .loading-dots::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

        @keyframes dots {
            0% { content: ''; }
            25% { content: '.'; }
            50% { content: '..'; }
            75% { content: '...'; }
        }

        @media (max-width: 734px) {
            .container {
                padding: 64px 20px;
            }

            h1 {
                font-size: 40px;
            }

            .subtitle {
                font-size: 21px;
                margin-bottom: 32px;
            }

            .dream-form {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dream Reader</h1>
        <p class="subtitle">Discover the meaning behind your dreams</p>
        
        <div class="dream-form">
            <textarea id="dream-text" placeholder="Describe your dream in detail..." maxlength="1000"></textarea>
            <div id="char-counter" class="char-counter">0 / 1000</div>
            <button onclick="testFunction()">Analyze Dream</button>
        </div>
        
        <div id="analysis-result"></div>
    </div>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0af6c88bd8d49b7',t:'MTc4MTMzNjE4Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
