Spaces:

DeepRat
/

TrueEye_Reports

Paused

App Files Files Community

DeepRat commited on Jun 27, 2025

Commit

c47b328

verified ·

1 Parent(s): 3adac07

Upload index.html

Browse files

Files changed (1) hide show

static/index.html +221 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,221 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TrueEye - Intelligent Media Literacy System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#f6ae2d',
+                        secondary: '#4a2040',
+                        dark: '#1a1a1a',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .markdown-content a {
+            color: #f6ae2d;
+            text-decoration: underline;
+        }
+        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+            color: #f6ae2d;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+        }
+        .markdown-content p {
+            margin-bottom: 1rem;
+        }
+        .markdown-content ul, .markdown-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .markdown-content code {
+            background-color: rgba(246, 174, 45, 0.2);
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+        }
+        .markdown-content pre {
+            background-color: rgba(246, 174, 45, 0.1);
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin-bottom: 1rem;
+        }
+        .markdown-content blockquote {
+            border-left: 4px solid #f6ae2d;
+            padding-left: 1rem;
+            margin-left: 0;
+            color: #777;
+            margin-bottom: 1rem;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-dark min-h-screen transition-colors duration-300">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-4xl font-bold text-secondary dark:text-primary">TrueEye</h1>
+                <p class="text-lg text-gray-600 dark:text-gray-300">Intelligent Media Literacy System</p>
+            </div>
+            <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
+                <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+                <svg id="theme-icon-light" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+            </button>
+        </header>
+        <main>
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 transition-colors duration-300">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input
+                        id="input-url"
+                        type="url"
+                        placeholder="Enter URL to analyze..."
+                        class="flex-grow px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white"
+                    >
+                    <button
+                        id="analyze-btn"
+                        class="px-6 py-3 bg-primary hover:bg-yellow-500 text-secondary font-semibold rounded-lg transition-colors duration-300 flex items-center justify-center gap-2"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                        </svg>
+                        Analyze
+                    </button>
+                </div>
+                <div id="error-message" class="mt-2 text-red-500 hidden"></div>
+            </div>
+            <div id="loading" class="hidden flex justify-center items-center py-8">
+                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+            </div>
+            <div id="result-container" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-colors duration-300">
+                <h2 class="text-2xl font-semibold text-secondary dark:text-primary mb-4">Analysis Result</h2>
+                <div id="result" class="markdown-content text-gray-700 dark:text-gray-300"></div>
+            </div>
+        </main>
+        <footer class="mt-12 text-center text-gray-500 dark:text-gray-400">
+            <p>© 2023 TrueEye. All rights reserved.</p>
+        </footer>
+    </div>
+    <script>
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIconDark = document.getElementById('theme-icon-dark');
+        const themeIconLight = document.getElementById('theme-icon-light');
+        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+            themeIconLight.classList.remove('hidden');
+            themeIconDark.classList.add('hidden');
+        } else {
+            document.documentElement.classList.remove('dark');
+            themeIconLight.classList.add('hidden');
+            themeIconDark.classList.remove('hidden');
+        }
+        themeToggle.addEventListener('click', () => {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+                themeIconLight.classList.add('hidden');
+                themeIconDark.classList.remove('hidden');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+                themeIconLight.classList.remove('hidden');
+                themeIconDark.classList.add('hidden');
+            }
+        });
+        // Analyze functionality
+        const analyzeBtn = document.getElementById('analyze-btn');
+        const inputUrl = document.getElementById('input-url');
+        const resultContainer = document.getElementById('result-container');
+        const resultDiv = document.getElementById('result');
+        const loadingDiv = document.getElementById('loading');
+        const errorMessage = document.getElementById('error-message');
+        analyzeBtn.addEventListener('click', async () => {
+            const url = inputUrl.value.trim();
+            if (!url) {
+                showError('Please enter a URL');
+                return;
+            }
+            if (!isValidUrl(url)) {
+                showError('Please enter a valid URL (include http:// or https://)');
+                return;
+            }
+            clearError();
+            loadingDiv.classList.remove('hidden');
+            resultContainer.classList.add('hidden');
+            try {
+                const response = await fetch('/analyze', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ url })
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}`);
+                }
+                const data = await response.json();
+                resultDiv.innerHTML = marked.parse(data.result);
+                resultContainer.classList.remove('hidden');
+            } catch (error) {
+                showError('Failed to analyze URL. Please try again later.');
+                console.error('Error:', error);
+            } finally {
+                loadingDiv.classList.add('hidden');
+            }
+        });
+        function isValidUrl(string) {
+            try {
+                new URL(string);
+                return true;
+            } catch (_) {
+                return false;
+            }
+        }
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.classList.remove('hidden');
+        }
+        function clearError() {
+            errorMessage.textContent = '';
+            errorMessage.classList.add('hidden');
+        }
+        // Allow pressing Enter in the input field
+        inputUrl.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                analyzeBtn.click();
+            }
+        });
+    </script>
+</body>
+</html>