Update index.html

index.html

@@ -6,7 +6,553 @@
     <title>Trading Affirmations App</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        :root {
+            --primary: #2c3e50;
+            --secondary: #3498db;
+            --accent: #e74c3c;
+            --light: #ecf0f1;
+            --dark: #2c3e50;
+            --success: #2ecc71;
+            --warning: #f39c12;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f5f7fa;
+            color: #333;
+            overflow-x: hidden;
+        }
+        
+        .navbar {
+            background-color: var(--primary);
+            color: white;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        
+        .ticker-container {
+            background-color: #1d2630;
+            color: white;
+            overflow: hidden;
+            white-space: nowrap;
+            padding: 8px 0;
+            position: relative;
+        }
+        
+        .ticker-content {
+            display: inline-block;
+            animation: ticker 30s linear infinite;
+        }
+        
+        @keyframes ticker {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
+        }
+        
+        .ticker-item {
+            display: inline-block;
+            padding: 0 20px;
+        }
+        
+        .ticker-item.up {
+            color: #2ecc71;
+        }
+        
+        .ticker-item.down {
+            color: #e74c3c;
+        }
+        
+        .section {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            margin-bottom: 20px;
+            padding: 20px;
+        }
+        
+        .section-title {
+            color: var(--primary);
+            border-bottom: 2px solid var(--secondary);
+            padding-bottom: 8px;
+            margin-bottom: 16px;
+            font-weight: 600;
+        }
+        
+        .btn-primary {
+            background-color: var(--secondary);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .btn-primary:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        
+        .btn-danger {
+            background-color: var(--accent);
+            color: white;
+        }
+        
+        .btn-danger:hover {
+            background-color: #c0392b;
+        }
+        
+        .card {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            margin-bottom: 16px;
+            transition: all 0.3s;
+        }
+        
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        
+        .tab-container {
+            display: flex;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 16px;
+        }
+        
+        .tab {
+            padding: 10px 16px;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
+        }
+        
+        .tab.active {
+            border-bottom: 3px solid var(--secondary);
+            color: var(--secondary);
+            font-weight: bold;
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        .badge {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .badge-success {
+            background-color: var(--success);
+            color: white;
+        }
+        
+        .badge-warning {
+            background-color: var(--warning);
+            color: white;
+        }
+        
+        .badge-danger {
+            background-color: var(--accent);
+            color: white;
+        }
+        
+        .form-group {
+            margin-bottom: 16px;
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            transition: border 0.3s;
+        }
+        
+        .form-control:focus {
+            border-color: var(--secondary);
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+        }
+        
+        .select-control {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: white;
+        }
+        
+        .session-card {
+            background: linear-gradient(145deg, #2c3e50, #34495e);
+            color: white;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 16px;
+        }
+        
+        .session-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        
+        .session-time {
+            font-size: 14px;
+            opacity: 0.8;
+        }
+        
+        .session-status {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            margin-top: 8px;
+        }
+        
+        .widget {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            margin-bottom: 16px;
+            padding: 16px;
+        }
+        
+        .widget-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: var(--primary);
+        }
+        
+        .event-item {
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .event-time {
+            font-size: 12px;
+            color: #777;
+        }
+        
+        .event-name {
+            font-weight: 500;
+        }
+        
+        .event-impact {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 4px;
+        }
+        
+        .event-impact.high {
+            background-color: var(--accent);
+        }
+        
+        .event-impact.medium {
+            background-color: var(--warning);
+        }
+        
+        .event-impact.low {
+            background-color: var(--success);
+        }
+        
+        .market-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .market-name {
+            font-weight: 500;
+        }
+        
+        .market-value.up {
+            color: var(--success);
+        }
+        
+        .market-value.down {
+            color: var(--accent);
+        }
+        
+        .intermarket-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+        }
+        
+        .correlation-matrix {
+            background: white;
+            border-radius: 8px;
+            padding: 16px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        }
+        
+        .matrix-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: var(--primary);
+        }
+        
+        .matrix-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .matrix-table th, .matrix-table td {
+            padding: 8px;
+            text-align: center;
+            border: 1px solid #eee;
+        }
+        
+        .matrix-table th {
+            background-color: #f5f7fa;
+            font-weight: 600;
+        }
+        
+        .correlation-positive {
+            background-color: rgba(46, 204, 113, 0.2);
+        }
+        
+        .correlation-negative {
+            background-color: rgba(231, 76, 60, 0.2);
+        }
+        
+        .correlation-neutral {
+            background-color: rgba(241, 196, 15, 0.1);
+        }
+        
+        .affirmation-card {
+            background: linear-gradient(145deg, #3498db, #2980b9);
+            color: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+        
+        .affirmation-text {
+            font-size: 18px;
+            line-height: 1.6;
+            font-style: italic;
+            margin-bottom: 16px;
+        }
+        
+        .affirmation-category {
+            font-size: 14px;
+            opacity: 0.8;
+            text-align: right;
+        }
+        
+        .trade-item {
+            background: white;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 16px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            position: relative;
+        }
+        
+        .trade-symbol {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+        
+        .trade-details {
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: #666;
+        }
+        
+        .trade-pnl {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            font-weight: 600;
+        }
+        
+        .trade-pnl.profit {
+            color: var(--success);
+        }
+        
+        .trade-pnl.loss {
+            color: var(--accent);
+        }
+        
+        .trade-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+            margin-top: 8px;
+        }
+        
+        .chat-popup {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 350px;
+            background: white;
+            border-radius: 8px 8px 0 0;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+            z-index: 1000;
+            transition: all 0.3s;
+        }
+        
+        .chat-header {
+            background: var(--primary);
+            color: white;
+            padding: 10px 16px;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+        }
+        
+        .chat-body {
+            padding: 16px;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        
+        .chat-message {
+            margin-bottom: 16px;
+        }
+        
+        .chat-message.user {
+            text-align: right;
+        }
+        
+        .chat-message.user .message-content {
+            background-color: var(--secondary);
+            color: white;
+            border-radius: 18px 18px 0 18px;
+            padding: 8px 16px;
+            display: inline-block;
+            max-width: 80%;
+        }
+        
+        .chat-message.ai .message-content {
+            background-color: #f1f1f1;
+            color: #333;
+            border-radius: 18px 18px 18px 0;
+            padding: 8px 16px;
+            display: inline-block;
+            max-width: 80%;
+        }
+        
+        .chat-footer {
+            padding: 10px 16px;
+            border-top: 1px solid #eee;
+            display: flex;
+            gap: 8px;
+        }
+        
+        .chat-input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
+            outline: none;
+        }
+        
+        .minimized {
+            height: 46px;
+            overflow: hidden;
+        }
+        
+        .gemini-badge {
+            background: linear-gradient(135deg, #1a73e8, #8e24aa);
+            color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 12px;
+            margin-left: 8px;
+        }
+        
+        .api-key-container {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .api-key-input {
+            background-color: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+            width: 160px;
+        }
+        
+        .api-key-input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+        
+        .api-status {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #e74c3c;
+            margin-right: 4px;
+        }
+        
+        .api-status.connected {
+            background-color: #2ecc71;
+        }
+        
+        .loading-spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top: 3px solid #ffffff;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            animation: spin 1s linear infinite;
+            margin-left: 5px;
+            display: none;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .intermarket-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .chat-popup {
+                width: 100%;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: 0;
+            }
+            
+            .chat-header {
+                border-radius: 0;
+            }
+        }
+    </style>
 </head>
 <body>
     <!-- Header and Navigation -->
@@ -310,7 +856,7 @@
                     
                     <div class="widget mt-4">
                         <div class="widget-title">Session-Zeiten</div>
-                      <table class="w-full text-sm">
+                        <table class="w-full text-sm">
                             <tr>
                                 <td>London (GMT):</td>
                                 <td class="font-medium">08:00 - 16:30</td>
@@ -1029,6 +1575,784 @@
         </div>
     </div>
     
-    <script src="/static/js/main.js"></script>
+    <script>
+        // Global variables
+        let apiKey = '';
+        let apiConnected = false;
+        let affirmationTimerInterval;
+        let affirmationTimeLeft = 300; // 5 minutes in seconds
+        let affirmationTimerRunning = false;
+        
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', function() {
+            initTabs();
+            updateDateTime();
+            updateTicker();
+            checkStoredApiKey();
+            
+            // Set interval updates
+            setInterval(updateDateTime, 1000);
+            setInterval(updateTicker, 10000);
+            setInterval(updateActiveTrades, 5000);
+            
+            // Initialize tooltips, if needed
+            // initTooltips();
+        });
+        
+        // Tab navigation
+        function initTabs() {
+            const tabs = document.querySelectorAll('.tab');
+            
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    // Remove active class from all tabs and contents
+                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+                    
+                    // Add active class to clicked tab
+                    this.classList.add('active');
+                    
+                    // Show corresponding content
+                    const tabId = this.getAttribute('data-tab');
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+        }
+        
+        // API key functions
+        function saveApiKey() {
+            const keyInput = document.getElementById('geminiApiKey');
+            if (keyInput.value.trim()) {
+                apiKey = keyInput.value.trim();
+                localStorage.setItem('geminiApiKey', apiKey);
+                // Visual confirmation that key was saved
+                keyInput.style.borderColor = '#2ecc71';
+                setTimeout(() => {
+                    keyInput.style.borderColor = '';
+                }, 2000);
+            }
+        }
+        
+        function checkStoredApiKey() {
+            const storedKey = localStorage.getItem('geminiApiKey');
+            if (storedKey) {
+                apiKey = storedKey;
+                document.getElementById('geminiApiKey').value = storedKey;
+                // Optional: Auto-connect with stored key
+                // connectApi();
+            }
+        }
+        
+        function connectApi() {
+            if (!apiKey) {
+                alert('Bitte gib einen API-Schlüssel ein.');
+                return;
+            }
+            
+            const connectText = document.getElementById('connectText');
+            const apiSpinner = document.getElementById('apiSpinner');
+            const apiStatus = document.getElementById('apiStatus');
+            
+            // Show spinner, change button text
+            connectText.textContent = 'Verbinde...';
+            apiSpinner.style.display = 'inline-block';
+            
+            // Simulate API connection (replace with actual API call in production)
+            setTimeout(() => {
+                // Connection successful
+                apiConnected = true;
+                connectText.textContent = 'Verbunden';
+                apiSpinner.style.display = 'none';
+                apiStatus.classList.add('connected');
+                
+                // Add success class to button
+                const connectButton = document.querySelector('button[onclick="connectApi()"]');
+                connectButton.style.backgroundColor = '#2ecc71';
+                connectButton.disabled = true;
+                
+                // Show a welcome message in chat
+                addChatMessage('ai', 'API-Verbindung hergestellt! Ich bin jetzt bereit, dir mit KI-gestützten Trading-Analysen zu helfen. Frag mich etwas zu Märkten, Trading-Strategien oder deinen aktuellen Trades.');
+            }, 2000);
+        }
+        
+        // Update date and time
+        function updateDateTime() {
+            const now = new Date();
+            
+            // Update trading session status
+            updateSessionStatus(now);
+            
+            // Update any countdown timers
+            updateCountdowns(now);
+        }
+        
+        function updateSessionStatus(now) {
+            const hour = now.getUTCHours();
+            const isWeekend = now.getUTCDay() === 0 || now.getUTCDay() === 6;
+            
+            // This is a simplified version - a real implementation would be more nuanced
+            if (!isWeekend) {
+                // Asia session (roughly 00:00-09:00 CET / 23:00-08:00 UTC)
+                if (hour >= 23 || hour < 8) {
+                    updateSessionElement('asia', 'active');
+                    updateSessionElement('europe', 'upcoming');
+                    updateSessionElement('us', 'closed');
+                }
+                // Europe session (roughly 08:00-16:30 CET / 07:00-15:30 UTC)
+                else if (hour >= 8 && hour < 16) {
+                    updateSessionElement('asia', 'closed');
+                    updateSessionElement('europe', 'active');
+                    updateSessionElement('us', 'upcoming');
+                }
+                // US session (roughly 14:30-21:00 CET / 13:30-20:00 UTC)
+                else if (hour >= 16 && hour < 20) {
+                    updateSessionElement('asia', 'upcoming');
+                    updateSessionElement('europe', 'closed');
+                    updateSessionElement('us', 'active');
+                }
+                // Overlap or non-active period
+                else {
+                    updateSessionElement('asia', 'upcoming');
+                    updateSessionElement('europe', 'closed');
+                    updateSessionElement('us', 'closed');
+                }
+            } else {
+                // Weekend - all markets closed
+                updateSessionElement('asia', 'closed');
+                updateSessionElement('europe', 'closed');
+                updateSessionElement('us', 'closed');
+            }
+        }
+        
+        function updateSessionElement(session, status) {
+            // This is a placeholder - would need to be implemented with actual elements
+            // console.log(`Session ${session} is now ${status}`);
+        }
+        
+        function updateCountdowns(now) {
+            // Update any countdown timers in the UI
+            // This is a placeholder for actual countdown logic
+        }
+        
+        // Ticker update function
+        function updateTicker() {
+            const tickerItems = document.querySelectorAll('.ticker-item');
+            
+            tickerItems.forEach(item => {
+                // Simulate price change (replace with actual API data in production)
+                const randomChange = (Math.random() * 0.2 - 0.1).toFixed(2);
+                const currentValue = parseFloat(item.querySelector('span').textContent);
+                const newValue = (currentValue * (1 + randomChange / 100)).toFixed(2);
+                
+                item.querySelector('span').textContent = newValue;
+                
+                // Update direction indicator
+                if (randomChange > 0) {
+                    item.classList.remove('down');
+                    item.classList.add('up');
+                    item.querySelector('i').className = 'fas fa-caret-up';
+                } else {
+                    item.classList.remove('up');
+                    item.classList.add('down');
+                    item.querySelector('i').className = 'fas fa-caret-down';
+                }
+                
+                // Update percentage
+                const percentEl = item.querySelector('i').nextSibling;
+                percentEl.textContent = ` ${Math.abs(randomChange)}%`;
+            });
+        }
+        
+        // Affirmation functions
+        function updateAffirmation() {
+            const status = document.getElementById('traderStatus').value;
+            let affirmationText = '';
+            let categoryText = '';
+            
+            switch (status) {
+                case 'preparing':
+                    affirmationText = 'Ich bereite mich gründlich vor und analysiere den Markt mit Klarheit und Fokus. Ich warte geduldig auf hochwertige Setups und halte mich an meine Handelsstrategie.';
+                    categoryText = 'Geduld und Vorbereitung';
+                    break;
+                case 'active':
+                    affirmationText = 'Ich bleibe ruhig und diszipliniert während mein Trade läuft. Ich halte mich an meinen Plan und lasse keine Emotionen meine Entscheidungen beeinflussen.';
+                    categoryText = 'Emotionale Kontrolle';
+                    break;
+                case 'developing':
+                    affirmationText = 'Ich entwickle meine Strategie mit Klarheit und Weisheit. Ich ziehe Lehren aus vergangenen Trades und verbessere kontinuierlich meine Fähigkeiten.';
+                    categoryText = 'Strategische Entwicklung';
+                    break;
+                case 'break':
+                    affirmationText = 'Ich nehme mir bewusst Zeit für Erholung und Reflexion. Diese Pause stärkt meine Handelsleistung und schärft meinen Fokus.';
+                    categoryText = 'Erholung und Reflexion';
+                    break;
+            }
+            
+            document.getElementById('currentAffirmation').textContent = affirmationText;
+            document.getElementById('affirmationCategory').textContent = categoryText;
+        }
+        
+        function updateAffirmationTab() {
+            const status = document.getElementById('affirmationTraderStatus').value;
+            const category = document.getElementById('affirmationCategory').value;
+            
+            // Map of affirmations based on status and category
+            const affirmations = {
+                discipline: {
+                    preparing: 'Ich bin ein disziplinierter und geduldiger Trader, der seinem Handelsplan mit unerschütterlichem Engagement folgt. Ich vertraue auf die Wirksamkeit meiner Strategien und warte geduldig auf Setups mit hoher Wahrscheinlichkeit. Ich habe die Selbstkontrolle, mich an meine etablierten Regeln zu halten und impulsive Handlungen zu vermeiden.',
+                    active: 'Während mein Trade aktiv ist, bleibe ich diszipliniert und geduldig. Ich folge meinem Plan und erlaube keiner Emotion, meine Strategie zu untergraben. Ich bin ruhig und kontrolliert, selbst wenn der Markt volatil wird.',
+                    developing: 'Beim Entwickeln meiner Strategie wende ich Disziplin und Geduld an. Ich nehme mir die Zeit, jedes Detail zu durchdenken und teste gründlich, bevor ich handele. Qualität geht vor Schnelligkeit.',
+                    break: 'In dieser Pause pflege ich meine Disziplin und Geduld, indem ich reflektiere und lerne. Ich verstehe, dass Ruhezeiten wesentlich für nachhaltigen Trading-Erfolg sind.'
+                },
+                abundance: {
+                    preparing: 'Ich ziehe reichlich Handelsmöglichkeiten an, die mit meiner Strategie übereinstimmen. Der Markt bietet einen endlosen Strom von Gelegenheiten, und ich bin bereit, sie zu nutzen.',
+                    active: 'Mein aktueller Trade ist eine von vielen Gelegenheiten für Wohlstand. Ich denke in Fülle und weiß, dass unabhängig vom Ausgang dieses Trades weitere profitable Chancen folgen werden.',
+                    developing: 'Ich entwickle meine Strategie mit einer Überfluss-Denkweise. Ich erkenne die unbegrenzten Möglichkeiten des Marktes an und erschaffe einen Ansatz, der diesen Reichtum anzieht.',
+                    break: 'Während dieser Pause ziehe ich neue Erkenntnisse und Möglichkeiten an. Ich nutze diese Zeit, um meine Überfluss-Denkweise zu stärken und mich auf neue Handelschancen vorzubereiten.'
+                }
+                // Additional categories would be added here
+            };
+            
+            // Get the appropriate affirmation or default
+            let affirmationText = 'Ich handle mit Klarheit, Disziplin und Vertrauen.';
+            if (affirmations[category] && affirmations[category][status]) {
+                affirmationText = affirmations[category][status];
+            }
+            
+            // Update the display
+            document.getElementById('detailedAffirmation').querySelector('.affirmation-text').textContent = affirmationText;
+            
+            // Update the category display
+            let categoryDisplayText = '';
+            switch (category) {
+                case 'discipline': categoryDisplayText = 'Disziplin und Geduld entwickeln'; break;
+                case 'abundance': categoryDisplayText = 'Überflussdenken fördern'; break;
+                case 'selection': categoryDisplayText = 'Handelsauswahl verbessern'; break;
+                case 'burnout': categoryDisplayText = 'Burnout und Erschöpfung überwinden'; break;
+                case 'bias': categoryDisplayText = 'Bestätigungsfehler überwinden'; break;
+                case 'paralysis': categoryDisplayText = 'Entscheidungslähmung überwinden'; break;
+                case 'fomo': categoryDisplayText = 'FOMO überwinden'; break;
+                case 'losses': categoryDisplayText = 'Verluste schnell akzeptieren'; break;
+                case 'emotional': categoryDisplayText = 'Emotionale Bindung an Trades lösen'; break;
+                case 'overtrading': categoryDisplayText = 'Überhandel widerstehen'; break;
+                case 'patience': categoryDisplayText = 'Geduld bei langsamen Märkten bewahren'; break;
+                default: categoryDisplayText = 'Allgemeine Trading-Affirmation';
+            }
+            
+            document.getElementById('detailedAffirmation').querySelector('.affirmation-category').textContent = categoryDisplayText;
+        }
+        
+        // Affirmation Timer functions
+        function startAffirmationTimer() {
+            if (affirmationTimerRunning) return;
+            
+            document.getElementById('startTimerBtn').disabled = true;
+            document.getElementById('pauseTimerBtn').disabled = false;
+            
+            affirmationTimerRunning = true;
+            
+            affirmationTimerInterval = setInterval(() => {
+                affirmationTimeLeft--;
+                
+                const minutes = Math.floor(affirmationTimeLeft / 60);
+                const seconds = affirmationTimeLeft % 60;
+                
+                document.getElementById('affirmationTimer').textContent = 
+                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                
+                if (affirmationTimeLeft <= 0) {
+                    clearInterval(affirmationTimerInterval);
+                    affirmationTimerRunning = false;
+                    document.getElementById('startTimerBtn').disabled = false;
+                    document.getElementById('pauseTimerBtn').disabled = true;
+                    document.getElementById('affirmationTimer').textContent = "00:00";
+                    // Play sound or notification
+                    // playTimerEndSound();
+                }
+            }, 1000);
+        }
+        
+        function pauseAffirmationTimer() {
+            clearInterval(affirmationTimerInterval);
+            affirmationTimerRunning = false;
+            document.getElementById('startTimerBtn').disabled = false;
+            document.getElementById('pauseTimerBtn').disabled = true;
+        }
+        
+        function resetAffirmationTimer() {
+            clearInterval(affirmationTimerInterval);
+            affirmationTimerRunning = false;
+            affirmationTimeLeft = 300; // Reset to 5 minutes
+            document.getElementById('affirmationTimer').textContent = "05:00";
+            document.getElementById('startTimerBtn').disabled = false;
+            document.getElementById('pauseTimerBtn').disabled = true;
+        }
+        
+        function saveCurrentAffirmation() {
+            const affirmationText = document.getElementById('detailedAffirmation').querySelector('.affirmation-text').textContent;
+            const categoryText = document.getElementById('detailedAffirmation').querySelector('.affirmation-category').textContent;
+            
+            // Create a shortened version
+            const shortAffirmation = affirmationText.substring(0, 60) + (affirmationText.length > 60 ? '...' : '');
+            
+            // Create new element
+            const newSavedAffirmation = document.createElement('div');
+            newSavedAffirmation.className = 'event-item';
+            newSavedAffirmation.innerHTML = `
+                <div class="font-medium">${shortAffirmation}</div>
+                <div class="text-sm text-gray-600">Kategorie: ${categoryText}</div>
+            `;
+            
+            // Add to saved affirmations
+            const savedAffirmationsContainer = document.getElementById('savedAffirmations');
+            savedAffirmationsContainer.prepend(newSavedAffirmation);
+            
+            // Show success message
+            alert('Affirmation gespeichert!');
+        }
+        
+        // Trading opportunity functions
+        function generateOpportunity() {
+            const symbol = document.getElementById('opportunitySymbol').value;
+            
+            if (!symbol) {
+                alert('Bitte wähle ein Symbol aus.');
+                return;
+            }
+            
+            if (!apiConnected) {
+                alert('Bitte verbinde zuerst die Gemini API.');
+                return;
+            }
+            
+            // Get other parameters
+            const timeframe = document.getElementById('opportunityTimeframe').value;
+            const style = document.getElementById('opportunityStyle').value;
+            const instructions = document.getElementById('opportunityInstructions').value;
+            
+            // Show loading state
+            document.getElementById('analyzeText').textContent = 'Analysiere...';
+            document.getElementById('opportunitySpinner').style.display = 'inline-block';
+            
+            // Simulate API call (replace with actual API call in production)
+            setTimeout(() => {
+                // Reset button
+                document.getElementById('analyzeText').textContent = 'Trading Opportunity analysieren';
+                document.getElementById('opportunitySpinner').style.display = 'none';
+                
+                // Generate result
+                const result = generateOpportunityResult(symbol, timeframe, style, instructions);
+                
+                // Display result
+                document.getElementById('opportunityResults').innerHTML = result;
+            }, 3000);
+        }
+        
+        function generateOpportunityResult(symbol, timeframe, style, instructions) {
+            // This is a simulation - in production this would come from the Gemini API
+            
+            // Extract symbol name
+            const symbolName = symbol.split(':')[1];
+            
+            // Determine direction (random for demo)
+            const isLong = Math.random() > 0.5;
+            
+            // Generate fictional analysis
+            let analysis = '';
+            let technicalInsights = '';
+            let fundamentalInsights = '';
+            let tradeSetup = '';
+            
+            // Technical insights
+            if (style === 'technical' || style === 'combined') {
+                const patterns = ['Double Bottom', 'Bull Flag', 'Cup and Handle', 'Descending Triangle', 'Head and Shoulders'];
+                const indicators = ['RSI', 'MACD', 'Moving Average', 'Bollinger Bands', 'Fibonacci Retracement'];
+                
+                const pattern = patterns[Math.floor(Math.random() * patterns.length)];
+                const indicator1 = indicators[Math.floor(Math.random() * indicators.length)];
+                const indicator2 = indicators[Math.floor(Math.random() * indicators.length)];
+                
+                technicalInsights = `<p class="mb-3"><strong>Technische Analyse:</strong> ${symbolName} zeigt ein ${pattern}-Muster, das auf eine potenzielle ${isLong ? 'Aufwärts' : 'Abwärts'}bewegung hindeutet. Der ${indicator1} ist ${isLong ? 'überverkauft' : 'überkauft'}, während der ${indicator2} ein ${isLong ? 'bullisches' : 'bärisches'} Signal gibt.</p>`;
+            }
+            
+            // Fundamental insights
+            if (style === 'fundamental' || style === 'combined') {
+                fundamentalInsights = `<p class="mb-3"><strong>Fundamentale Analyse:</strong> ${symbolName} ${isLong ? 'profitiert von positiven Branchentrends und zeigt starkes Gewinnwachstum' : 'steht vor Herausforderungen durch Branchendruck und Margenschwäche'}. Bevorstehende Ereignisse könnten ${isLong ? 'positive' : 'negative'} Auswirkungen auf den Kurs haben.</p>`;
+            }
+            
+            // Trade setup
+            const currentPrice = Math.random() * 1000;
+            const stopLoss = isLong ? currentPrice * 0.95 : currentPrice * 1.05;
+            const takeProfit = isLong ? currentPrice * 1.1 : currentPrice * 0.9;
+            
+            tradeSetup = `
+                <div class="p-3 bg-gray-50 rounded-lg mt-4">
+                    <h4 class="font-semibold mb-2">Trade Setup</h4>
+                    <div class="grid grid-cols-2 gap-3 text-sm">
+                        <div>
+                            <div class="text-gray-600">Richtung:</div>
+                            <div class="font-medium">${isLong ? 'Long (Kaufen)' : 'Short (Verkaufen)'}</div>
+                        </div>
+                        <div>
+                            <div class="text-gray-600">Einstieg:</div>
+                            <div class="font-medium">${currentPrice.toFixed(2)}</div>
+                        </div>
+                        <div>
+                            <div class="text-gray-600">Stop-Loss:</div>
+                            <div class="font-medium">${stopLoss.toFixed(2)}</div>
+                        </div>
+                        <div>
+                            <div class="text-gray-600">Take-Profit:</div>
+                            <div class="font-medium">${takeProfit.toFixed(2)}</div>
+                        </div>
+                        <div>
+                            <div class="text-gray-600">Risk/Reward:</div>
+                            <div class="font-medium">1:${isLong ? '2' : '3'}</div>
+                        </div>
+                        <div>
+                            <div class="text-gray-600">Zeitrahmen:</div>
+                            <div class="font-medium">${timeframe === 'shortTerm' ? 'Kurzfristig (1-3 Tage)' : timeframe === 'mediumTerm' ? 'Mittelfristig (1-2 Wochen)' : 'Langfristig (1+ Monate)'}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Build the full analysis
+            analysis = `
+                <div>
+                    <div class="mb-4 flex justify-between items-start">
+                        <div>
+                            <h3 class="font-semibold text-lg">${symbol}</h3>
+                            <div class="text-sm text-gray-600">${new Date().toLocaleString()}</div>
+                        </div>
+                        <div class="badge ${isLong ? 'badge-success' : 'badge-danger'}">${isLong ? 'Long' : 'Short'}</div>
+                    </div>
+                    
+                    ${technicalInsights}
+                    ${fundamentalInsights}
+                    
+                    <p class="mb-4">
+                        <strong>Analyse:</strong> Basierend auf ${style === 'technical' ? 'technischer Analyse' : style === 'fundamental' ? 'fundamentaler Analyse' : 'technischer und fundamentaler Analyse'} 
+                        erscheint ${symbolName} als ${isLong ? 'attraktive Long-Opportunity' : 'potentielle Short-Position'} für den ${timeframe === 'shortTerm' ? 'kurzfristigen' : timeframe === 'mediumTerm' ? 'mittelfristigen' : 'langfristigen'} Handel.
+                    </p>
+                    
+                    ${tradeSetup}
+                    
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button class="btn-primary text-sm" onclick="saveOpportunity()">Speichern</button>
+                        <button class="btn-primary text-sm" onclick="createTradeFromOpportunity()">Trade erstellen</button>
+                    </div>
+                </div>
+            `;
+            
+            return analysis;
+        }
+        
+        function saveOpportunity() {
+            alert('Trading Opportunity gespeichert!');
+        }
+        
+        function createTradeFromOpportunity() {
+            alert('Trade aus dieser Opportunity wird erstellt. Bitte bestätige die Details im "Meine Trades" Bereich.');
+            
+            // Switch to the My Trades tab
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            
+            document.querySelector('[data-tab="mytrades"]').classList.add('active');
+            document.getElementById('mytrades').classList.add('active');
+        }
+        
+        // Trade functions
+        function addNewTrade() {
+            const symbol = document.getElementById('newTradeSymbol').value;
+            if (!symbol) {
+                alert('Bitte wähle ein Symbol aus.');
+                return;
+            }
+            
+            const entry = document.getElementById('newTradeEntry').value;
+            if (!entry) {
+                alert('Bitte gib einen Einstiegspreis ein.');
+                return;
+            }
+            
+            const direction = document.getElementById('newTradeDirection').value;
+            const stop = document.getElementById('newTradeStop').value;
+            const target = document.getElementById('newTradeTarget').value;
+            const position = document.getElementById('newTradePosition').value;
+            const notes = document.getElementById('newTradeNotes').value;
+            
+            // Create trade element
+            const tradeElement = document.createElement('div');
+            tradeElement.className = 'trade-item';
+            
+            // Random P&L for demo
+            const pnl = ((Math.random() * 2) - 0.5).toFixed(2);
+            const isProfitable = parseFloat(pnl) > 0;
+            
+            tradeElement.innerHTML = `
+                <div class="trade-symbol">${symbol}</div>
+                <div class="trade-details">${direction === 'long' ? 'Long' : 'Short'} @ ${entry} • Stop: ${stop} • Target: ${target}</div>
+                <div class="trade-pnl ${isProfitable ? 'profit' : 'loss'}">${pnl > 0 ? '+' : ''}${pnl}%</div>
+                <div class="text-sm text-gray-500 mt-2">Eröffnet: ${new Date().toLocaleString()}</div>
+                ${notes ? `
+                <div class="mt-3 text-sm">
+                    <div class="font-medium">Notizen:</div>
+                    <p class="text-gray-600">${notes}</p>
+                </div>
+                ` : ''}
+                <div class="trade-actions">
+                    <button class="btn-primary text-xs py-1">Bearbeiten</button>
+                    <button class="btn-danger text-xs py-1" onclick="removeTrade(this)">Entfernen</button>
+                </div>
+            `;
+            
+            // Add to trades list
+            document.getElementById('tradesList').prepend(tradeElement);
+            
+            // Clear form
+            document.getElementById('newTradeSymbol').value = '';
+            document.getElementById('newTradeEntry').value = '';
+            document.getElementById('newTradeStop').value = '';
+            document.getElementById('newTradeTarget').value = '';
+            document.getElementById('newTradePosition').value = '';
+            document.getElementById('newTradeNotes').value = '';
+            
+            // Update trade count and statistics
+            updateTradeStatistics();
+            
+            // Show notification
+            alert('Trade erfolgreich hinzugefügt!');
+        }
+        
+        function removeTrade(button) {
+            // Find the parent trade item and remove it
+            const tradeItem = button.closest('.trade-item');
+            tradeItem.style.opacity = '0.5';
+            
+            // Simulate a delay before removal
+            setTimeout(() => {
+                tradeItem.remove();
+                // Update statistics
+                updateTradeStatistics();
+                // Show notification
+                alert('Trade entfernt!');
+            }, 500);
+        }
+        
+        function updateTradeStatistics() {
+            // This would calculate real statistics in production
+            // For demo, we'll just update the count
+            const tradeCount = document.querySelectorAll('.trade-item').length;
+            // Update the trade count in the statistics
+            // This assumes there's an element to update
+        }
+        
+        function updateActiveTrades() {
+            // This would update real trade data in production
+            // For demo, we'll randomly update P&L
+            
+            const tradeItems = document.querySelectorAll('.trade-item');
+            
+            tradeItems.forEach(item => {
+                const pnlElement = item.querySelector('.trade-pnl');
+                if (pnlElement) {
+                    // Get current value
+                    const currentValue = parseFloat(pnlElement.textContent.replace('%', '').replace('+', ''));
+                    
+                    // Small random change
+                    const change = (Math.random() * 0.2) - 0.1;
+                    const newValue = (currentValue + change).toFixed(2);
+                    
+                    // Update display
+                    const isProfit = parseFloat(newValue) > 0;
+                    pnlElement.className = `trade-pnl ${isProfit ? 'profit' : 'loss'}`;
+                    pnlElement.textContent = `${isProfit ? '+' : ''}${newValue}%`;
+                }
+            });
+        }
+        
+        function sortTrades() {
+            const sortOption = document.getElementById('tradeSortOption').value;
+            const tradesList = document.getElementById('tradesList');
+            const trades = Array.from(tradesList.querySelectorAll('.trade-item'));
+            
+            // Clear the container
+            tradesList.innerHTML = '';
+            
+            // Sort trades based on option
+            switch (sortOption) {
+                case 'newest':
+                    // Just reverse the current order for demo
+                    trades.reverse();
+                    break;
+                case 'oldest':
+                    // Keep current order for demo
+                    break;
+                case 'profit':
+                    trades.sort((a, b) => {
+                        const aPnl = parseFloat(a.querySelector('.trade-pnl').textContent.replace('%', '').replace('+', ''));
+                        const bPnl = parseFloat(b.querySelector('.trade-pnl').textContent.replace('%', '').replace('+', ''));
+                        return bPnl - aPnl; // Descending
+                    });
+                    break;
+                case 'loss':
+                    trades.sort((a, b) => {
+                        const aPnl = parseFloat(a.querySelector('.trade-pnl').textContent.replace('%', '').replace('+', ''));
+                        const bPnl = parseFloat(b.querySelector('.trade-pnl').textContent.replace('%', '').replace('+', ''));
+                        return aPnl - bPnl; // Ascending
+                    });
+                    break;
+            }
+            
+            // Add sorted trades back to container
+            trades.forEach(trade => tradesList.appendChild(trade));
+        }
+        
+        function refreshTrades() {
+            updateActiveTrades();
+            alert('Trades aktualisiert!');
+        }
+        
+        // Intermarket Analysis
+        function updateIntermarketAnalysis() {
+            const stockIndex = document.getElementById('stockIndex').value;
+            const bondIndex = document.getElementById('bondIndex').value;
+            const commodityIndex = document.getElementById('commodityIndex').value;
+            const currencyIndex = document.getElementById('currencyIndex').value;
+            
+            // In a real app, this would fetch data and update the charts/analysis
+            alert(`Intermarket-Analyse wird aktualisiert mit: ${stockIndex}, ${bondIndex}, ${commodityIndex}, ${currencyIndex}`);
+        }
+        
+        // Chat functions
+        function toggleChat() {
+            const chatPopup = document.getElementById('chatPopup');
+            const chevron = document.getElementById('chatChevron');
+            
+            if (chatPopup.classList.contains('minimized')) {
+                chatPopup.classList.remove('minimized');
+                chevron.className = 'fas fa-chevron-down';
+            } else {
+                chatPopup.classList.add('minimized');
+                chevron.className = 'fas fa-chevron-up';
+            }
+        }
+        
+        function sendChatMessage() {
+            const chatInput = document.getElementById('chatInput');
+            const message = chatInput.value.trim();
+            
+            if (!message) return;
+            
+            // Add user message
+            addChatMessage('user', message);
+            
+            // Clear input
+            chatInput.value = '';
+            
+            // Check API connection
+            if (!apiConnected) {
+                addChatMessage('ai', 'Bitte verbinde zuerst die Gemini API, um mit dem Chat zu interagieren.');
+                return;
+            }
+            
+            // Show typing indicator
+            showTypingIndicator();
+            
+            // Simulate AI response (replace with actual API call in production)
+            setTimeout(() => {
+                // Remove typing indicator
+                removeTypingIndicator();
+                
+                // Generate response
+                const response = generateChatResponse(message);
+                
+                // Add AI message
+                addChatMessage('ai', response);
+                
+                // Scroll to bottom
+                scrollChatToBottom();
+            }, 1500);
+        }
+        
+        function handleChatKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendChatMessage();
+            }
+        }
+        
+        function addChatMessage(sender, text) {
+            const chatBody = document.getElementById('chatBody');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${sender}`;
+            
+            messageDiv.innerHTML = `
+                <div class="message-content">${text}</div>
+            `;
+            
+            chatBody.appendChild(messageDiv);
+            
+            // Expand chat if minimized
+            if (document.getElementById('chatPopup').classList.contains('minimized')) {
+                toggleChat();
+            }
+            
+            // Scroll to bottom
+            scrollChatToBottom();
+        }
+        
+        function scrollChatToBottom() {
+            const chatBody = document.getElementById('chatBody');
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+        
+        function showTypingIndicator() {
+            const chatBody = document.getElementById('chatBody');
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'chat-message ai';
+            typingDiv.id = 'typingIndicator';
+            
+            typingDiv.innerHTML = `
+                <div class="message-content">
+                    <div class="typing-indicator">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </div>
+            `;
+            
+            chatBody.appendChild(typingDiv);
+            scrollChatToBottom();
+        }
+        
+        function removeTypingIndicator() {
+            const typingIndicator = document.getElementById('typingIndicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+        }
+        
+        function generateChatResponse(message) {
+            // This is a simulation - in production this would come from the Gemini API
+            
+            // Simple pattern matching for demo
+            if (message.toLowerCase().includes('hallo') || message.toLowerCase().includes('hi')) {
+                return 'Hallo! Wie kann ich dir bei deinem Trading heute helfen?';
+            } else if (message.toLowerCase().includes('market') || message.toLowerCase().includes('markt')) {
+                return 'Die Märkte zeigen heute gemischte Signale. US-Indizes sind leicht im Plus, während europäische Märkte sich seitwärts bewegen. Gold steigt aufgrund geopolitischer Spannungen.';
+            } else if (message.toLowerCase().includes('affirmation')) {
+                return 'Affirmationen können deine Trading-Psychologie stark verbessern. Ich empfehle dir, täglich 5 Minuten für Affirmationen einzuplanen, besonders vor Handelssessions oder nach Verlusten.';
+            } else if (message.toLowerCase().includes('verlust') || message.toLowerCase().includes('loss')) {
+                return 'Verluste sind ein normaler Teil des Tradings. Das Wichtigste ist, wie du darauf reagierst. Halte dich an dein Risikomanagement und betrachte jeden Verlust als Lernchance.';
+            } else if (message.toLowerCase().includes('strategie') || message.toLowerCase().includes('strategy')) {
+                return 'Eine erfolgreiche Trading-Strategie sollte klare Ein- und Ausstiegskriterien, Risikomanagement und ein positives Erwartungswert haben. Möchtest du Hilfe bei einem bestimmten Aspekt deiner Strategie?';
+            } else {
+                return 'Danke für deine Nachricht. Ich kann dir bei Trading-Analysen, Affirmationen, Marktinformationen und Handelsstrategien helfen. Was interessiert dich am meisten?';
+            }
+        }
+    </script>
 </body>
-</html>
+</html>