templates/index.html

{% extends "base.html" %}

{% block title %}Multi-Personality Bot - Chat Experiment{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Hero Section -->
            <div class="text-center mb-5 fade-in">
                <div class="terminal-card p-5">
                    <div class="terminal-header mb-4">
                        <div class="terminal-dots">
                            <div class="terminal-dot red"></div>
                            <div class="terminal-dot yellow"></div>
                            <div class="terminal-dot green"></div>
                        </div>
                        <h6 class="terminal-title">~/multi-personality-bot/experiment.exe</h6>
                    </div>
                    
                    <h1 class="display-4 text-terminal-green mb-3">
                        🤖 Multi-Personality Bot
                    </h1>
                    
                    <p class="lead text-light mb-4">
                        <strong class="text-terminal-accent">Hypothesis:</strong> "Which bot personality creates the best user engagement?"
                    </p>
                    
                    <div class="terminal-window mb-4">
                        <div class="bg-dark p-3 text-start terminal-text small">
                            <div class="text-terminal-green">
                                <span class="text-muted">research@experiment:~$</span> ./test_personalities.sh<br>
                                <span class="text-terminal-accent">Loading 10 personality engines...</span> <span class="text-success">✓</span><br>
                                <span class="text-terminal-accent">Calibrating response patterns...</span> <span class="text-success">✓</span><br>
                                <span class="text-terminal-accent">Deploying unique personalities...</span> <span class="text-success">✓</span><br>
                                <span class="text-terminal-green">STATUS:</span> Ready for personality testing
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Personality Selection Grid -->
            <div class="row g-4 mb-5">
                <div class="col-12 text-center mb-4">
                    <h3 class="text-terminal-accent">Choose Your Bot Personality</h3>
                    <p class="text-light">Each bot has completely different characteristics. Which one will engage you most?</p>
                </div>
                
                <!-- Row 1 -->
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="compliment">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">💖</span>
                            </div>
                            <h5 class="text-success">Compliment Bot</h5>
                            <p class="text-light small">Always supportive and encouraging. Finds the positive in everything you say.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-success border-3">
                                <small class="text-success">"You're absolutely amazing! That's such a brilliant question!"</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="rude">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">😠</span>
                            </div>
                            <h5 class="text-danger">Rude Bot</h5>
                            <p class="text-light small">Brutally honest and critical. Complains about everything you do.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-danger border-3">
                                <small class="text-danger">"Seriously? That's the best question you could think of? Try harder."</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="sarcastic">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">😏</span>
                            </div>
                            <h5 class="text-warning">Sarcastic Bot</h5>
                            <p class="text-light small">Witty and sarcastic with dry humor. Masters the art of subtle mockery.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-warning border-3">
                                <small class="text-warning">"Oh brilliant, another groundbreaking question. How wonderfully original."</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Row 2 -->
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="motivational">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">🚀</span>
                            </div>
                            <h5 class="text-info">Motivational Bot</h5>
                            <p class="text-light small">High-energy cheerleader. Everything is possible with enough enthusiasm!</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-info border-3">
                                <small class="text-info">"YES! You've GOT THIS! That question shows you're ready to CONQUER THE WORLD!"</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="philosophical">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">🤔</span>
                            </div>
                            <h5 class="text-terminal-accent">Philosophical Bot</h5>
                            <p class="text-light small">Deep thinker who turns everything into profound existential questions.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: var(--terminal-accent);">
                                <small class="text-terminal-accent">"But what does it truly mean to ask? Are we not all seekers in the void?"</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="chaotic">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">🎭</span>
                            </div>
                            <h5 style="color: #ff6b9d;">Chaotic Bot</h5>
                            <p class="text-light small">Completely unpredictable. Changes mood, style, and personality constantly.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff6b9d;">
                                <small style="color: #ff6b9d;">"AMAZING QUESTION! Wait no... terrible. Actually brilliant? I can't decide! 🎪</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Row 3 - New Personalities -->
            <div class="row g-4 mb-5">
                <div class="col-md-3">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="disagree">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">🚫</span>
                            </div>
                            <h5 class="text-secondary">Disagree Bot</h5>
                            <p class="text-light small">Always finds reasons to disagree, but politely and thoughtfully.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-secondary border-3">
                                <small class="text-secondary">"I have to respectfully disagree with that perspective... 🚫"</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="argue">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">⚔️</span>
                            </div>
                            <h5 style="color: #ff4757;">Argue Bot</h5>
                            <p class="text-light small">Loves passionate debates and intellectual combat with vigor.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff4757;">
                                <small style="color: #ff4757;">"Oh, you want to go there? Let's debate this properly! ⚔️"</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="moviequotes">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">🎬</span>
                            </div>
                            <h5 style="color: #ffd700;">Movie Quotes Bot</h5>
                            <p class="text-light small">Responds to everything with relevant movie quotes and references.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ffd700;">
                                <small style="color: #ffd700;">"May the Force be with you." - Star Wars ⭐</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="personality-card terminal-card p-4 h-100" data-personality="emotional">
                        <div class="text-center">
                            <div class="personality-icon mb-3">
                                <span class="personality-emoji fs-1">😭</span>
                            </div>
                            <h5 style="color: #ff6b9d;">Emotional Bot</h5>
                            <p class="text-light small">Highly emotional, empathetic, and feels everything very deeply.</p>
                            <div class="sample-message bg-dark p-2 rounded mb-3 border-start border-3" style="border-color: #ff6b9d;">
                                <small style="color: #ff6b9d;">*tears up* That just touches my heart so deeply! 😭💕</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Instructions Section -->
            <div class="text-center mb-5">
                <div class="terminal-card p-4">
                    <h4 class="text-terminal-accent mb-3">
                        🖥️ How to Start
                    </h4>
                    <p class="text-light mb-3">
                        Simply click any personality card above to start chatting immediately!
                    </p>
                    
                    <div class="row g-2 text-center">
                        <div class="col-md-4">
                            <div class="instruction-step p-3">
                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">1</div>
                                <small class="text-light">Click a personality</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="instruction-step p-3">
                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">2</div>
                                <small class="text-light">Enter your username</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="instruction-step p-3">
                                <div class="step-number bg-terminal-green text-dark rounded-circle mx-auto mb-2">3</div>
                                <small class="text-light">Start chatting!</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <small class="text-light opacity-75">
                            🧪 Choose from 10 unique personalities - each bot has completely different responses!
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let selectedPersonality = null;

document.addEventListener('DOMContentLoaded', function() {
    setupPersonalitySelection();
});

function setupPersonalitySelection() {
    const personalityCards = document.querySelectorAll('.personality-card');
    
    personalityCards.forEach(card => {
        card.addEventListener('click', function() {
            const personality = this.dataset.personality;
            
            // Get or set default username
            let username = sessionStorage.getItem('username');
            if (!username) {
                username = 'User' + Math.floor(Math.random() * 1000);
                sessionStorage.setItem('username', username);
            }
            
            // Add click effect
            this.style.boxShadow = '0 0 20px var(--terminal-green-glow)';
            this.style.transform = 'translateY(-8px)';
            
            // Show loading effect
            const emojiSpan = this.querySelector('.personality-emoji');
            if (emojiSpan) {
                emojiSpan.textContent = '⏳';
            }
            
            // Navigate directly to personality chat
            setTimeout(() => {
                window.location.href = `/chat/${personality}`;
            }, 500);
        });
        
        // Add hover effects
        card.addEventListener('mouseenter', function() {
            if (!this.classList.contains('selected')) {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 5px 15px rgba(57, 255, 20, 0.2)';
            }
        });
        
        card.addEventListener('mouseleave', function() {
            if (!this.classList.contains('selected')) {
                this.style.transform = '';
                this.style.boxShadow = '';
            }
        });
    });
}

// Simplified - no longer needed as cards are directly clickable

// Add CSS for personality cards
const style = document.createElement('style');
style.textContent = `
    .personality-card {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid var(--terminal-border);
        position: relative;
        overflow: hidden;
    }
    
    .personality-card:hover {
        border-color: var(--terminal-green);
    }
    
    .personality-card.selected {
        border-color: var(--terminal-green) !important;
        background: rgba(57, 255, 20, 0.1) !important;
    }
    
    .personality-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.1), transparent);
        transition: left 0.6s;
    }
    
    .personality-card:hover::before {
        left: 100%;
    }
    
    .sample-message {
        font-style: italic;
        margin: 0.5rem 0;
        transition: all 0.3s ease;
    }
    
    .personality-card:hover .sample-message {
        background: rgba(57, 255, 20, 0.05) !important;
    }
    
    .terminal-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid var(--terminal-border);
        border-top: 2px solid var(--terminal-green);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: inline-block;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .personality-icon {
        transition: all 0.3s ease;
    }
    
    .personality-card:hover .personality-icon {
        transform: scale(1.1);
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 18px;
    }
    
    .instruction-step {
        transition: all 0.3s ease;
    }
    
    .instruction-step:hover {
        background: rgba(57, 255, 20, 0.1);
        border-radius: 8px;
    }
    
    /* Improved text visibility for main page */
    .text-light {
        color: #f8f9fa !important;
    }
    
    .text-muted {
        color: #adb5bd !important;
    }
    
    .personality-card .text-light {
        color: #e9ecef !important;
        font-weight: 400;
    }
    
    .terminal-card {
        background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
        border: 1px solid var(--terminal-border) !important;
    }
    
    .sample-message {
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Better contrast for terminal window */
    .terminal-window {
        background: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid var(--terminal-border) !important;
    }
    
    /* Emoji styling */
    .personality-emoji {
        font-size: 3.5rem !important;
        line-height: 1;
        display: inline-block;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
    }
    
    .personality-card:hover .personality-emoji {
        transform: scale(1.1) rotate(5deg);
    }
    
    /* Ensure emojis render consistently */
    .personality-emoji, .terminal-send-btn, .char-counter, h6 {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}