<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KovalskyAI - Your Local AI Assistant</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --text-primary: #ffffff;
        --text-secondary: #888888;
        --border: #333333;
        --border-light: #444444;
      }

      body {
        font-family: "Inter", sans-serif;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.5;
        overflow-x: hidden;
        font-size: 14px;
      }

      /* Background Text */
      .background-text {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(10rem, 30vw, 30rem);
        font-weight: 300;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
        z-index: -1;
        pointer-events: none;
        user-select: none;
        font-family: "JetBrains Mono", monospace;
        letter-spacing: -0.05em;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
      }

      /* Navigation */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
      }

      .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.8rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo-text {
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--text-primary);
        font-family: "JetBrains Mono", monospace;
        letter-spacing: -0.5px;
      }

      .nav-links {
        display: flex;
        gap: 1.5rem;
      }

      .nav-link {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 400;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
        text-transform: uppercase;
      }

      .nav-link:hover {
        color: var(--text-primary);
      }

      .try-button {
        background: transparent;
        color: var(--text-primary);
        padding: 0.4rem 1rem;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
        border: 1px solid var(--border-light);
        text-transform: uppercase;
      }

      .try-button:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      /* Hero Section */
      .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 2rem;
        position: relative;
      }

      .hero-content {
        max-width: 800px;
        z-index: 1;
      }

      .hero-title {
        font-size: 2.5rem;
        font-weight: 400;
        margin-bottom: 1rem;
        color: var(--text-primary);
        font-family: "JetBrains Mono", monospace;
      }

      .hero-subtitle {
        font-size: 1.2rem;
        font-weight: 300;
        margin-bottom: 1.5rem;
        color: var(--text-secondary);
      }

      .hero-description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        color: var(--text-secondary);
      }

      .highlight {
        color: var(--text-primary);
        font-weight: 500;
      }

      .self-hosted-badge {
        display: inline-block;
        padding: 0.5rem 1.5rem;
        background: transparent;
        border: 1px solid var(--border-light);
        border-radius: 4px;
        margin-top: 1.5rem;
      }

      .badge-text {
        font-weight: 400;
        font-size: 0.9rem;
        letter-spacing: 1px;
        color: var(--text-primary);
      }

      /* Sections */
      .section {
        padding: 4rem 0;
        position: relative;
      }

      .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 2rem;
      }

      .section-title {
        font-size: 1.5rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 3rem;
        color: var(--text-primary);
        font-family: "JetBrains Mono", monospace;
      }

      /* Features Grid */
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
      }

      .feature-card {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.2s ease;
      }

      .feature-card:hover {
        border-color: var(--border-light);
        background: rgba(255, 255, 255, 0.02);
      }

      .feature-icon {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
      }

      .feature-card h3 {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0.8rem;
        color: var(--text-primary);
      }

      .feature-card p {
        color: var(--text-secondary);
        line-height: 1.5;
        font-size: 0.85rem;
      }

      /* Chat Demo */
      .demo-section {
        background: var(--bg-secondary);
        padding: 4rem 0;
      }

      .chat-demo {
        max-width: 700px;
        margin: 0 auto;
      }

      .chat-container {
        background: transparent;
        border-radius: 4px;
        overflow: hidden;
      }

      .chat-messages {
        padding: 1.5rem;
        min-height: 300px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.85rem;
        line-height: 1.6;
      }

      .message {
        margin-bottom: 1.5rem;
        opacity: 0;
      }

      .message.user {
        color: var(--text-secondary);
      }

      .message.ai {
        color: var(--text-primary);
      }

      .message-prefix {
        font-weight: 500;
        margin-right: 0.5rem;
      }

      .user .message-prefix {
        color: var(--text-secondary);
      }

      .ai .message-prefix {
        color: var(--text-primary);
      }

      .typing-cursor {
        display: inline-block;
        width: 2px;
        height: 1em;
        background: var(--text-primary);
        animation: blink 1s infinite;
        margin-left: 2px;
        vertical-align: middle;
      }

      @keyframes blink {
        0%,
        50% {
          opacity: 1;
        }
        51%,
        100% {
          opacity: 0;
        }
      }

      /* How It Works */
      .how-it-works {
        background: var(--bg-secondary);
        padding: 4rem 0;
      }

      .workflow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
      }

      .workflow-step {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 1.5rem;
        text-align: center;
        min-width: 200px;
        transition: all 0.2s ease;
      }

      .workflow-step:hover {
        border-color: var(--border-light);
        background: rgba(255, 255, 255, 0.02);
      }

      .step-number {
        width: 30px;
        height: 30px;
        background: var(--border);
        color: var(--text-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 500;
        margin: 0 auto 0.8rem;
      }

      .workflow-arrow {
        font-size: 1.2rem;
        color: var(--text-secondary);
        font-weight: 300;
      }

      .step-content h3 {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
      }

      .step-content p {
        color: var(--text-secondary);
        line-height: 1.5;
        font-size: 0.85rem;
      }

      /* Roadmap */
      .roadmap-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
      }

      .roadmap-item {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.2s ease;
      }

      .roadmap-item:hover {
        border-color: var(--border-light);
        background: rgba(255, 255, 255, 0.02);
      }

      .roadmap-icon {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
      }

      .roadmap-item h3 {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 0.8rem;
        color: var(--text-primary);
      }

      .roadmap-item p {
        color: var(--text-secondary);
        line-height: 1.5;
        font-size: 0.85rem;
      }

      /* Installation */
      .install-card {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 2rem;
        text-align: center;
        max-width: 500px;
        margin: 0 auto;
      }

      .install-content h3 {
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 1rem;
        color: var(--text-primary);
      }

      .install-content p {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
      }

      .install-steps {
        text-align: left;
        margin-bottom: 1.5rem;
      }

      .install-step {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 0.8rem;
        color: var(--text-secondary);
        font-size: 0.85rem;
      }

      .step-num {
        color: var(--text-primary);
        font-weight: 500;
        min-width: 15px;
      }

      .install-button {
        background: transparent;
        color: var(--text-primary);
        padding: 0.4rem 1rem;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.8rem;
        transition: all 0.2s ease;
        display: inline-block;
        border: 1px solid var(--border-light);
      }

      .install-button:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      /* Contributing */
      .contributing-content {
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
      }

      .contributing-content p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 2rem;
        line-height: 1.6;
      }

      .contribute-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      .contribute-btn {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-primary);
        padding: 0.4rem 1rem;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.8rem;
        transition: all 0.2s ease;
      }

      .contribute-btn:hover {
        border-color: var(--border-light);
        background: rgba(255, 255, 255, 0.05);
      }

      /* Footer */
      .footer {
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        padding: 2rem 0;
      }

      .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
      }

      .footer-left p {
        color: var(--text-secondary);
        margin-top: 0.3rem;
        font-size: 0.8rem;
      }

      .footer-link {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 400;
        font-size: 0.8rem;
        transition: all 0.2s ease;
      }

      .footer-link:hover {
        color: var(--text-primary);
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .nav-container {
          padding: 0.8rem 1rem;
          flex-direction: column;
          gap: 0.8rem;
        }

        .nav-links {
          gap: 1rem;
        }

        .workflow {
          flex-direction: column;
        }

        .workflow-arrow {
          transform: rotate(90deg);
        }

        .contribute-actions {
          flex-direction: column;
          align-items: center;
        }

        .footer-content {
          flex-direction: column;
          text-align: center;
        }
      }

      /* Smooth scrolling */
      html {
        scroll-behavior: smooth;
      }

      /* Custom scrollbar */
      ::-webkit-scrollbar {
        width: 6px;
      }

      ::-webkit-scrollbar-track {
        background: var(--bg-primary);
      }

      ::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--border-light);
      }

      .typing-cursor {
        display: inline-block;
        width: 2px;
        background: white;
        animation: blink 1s steps(2, start) infinite;
        margin-left: 2px;
    }

@keyframes blink {
  to {
    visibility: hidden;
  }
}

    </style>
</head>
<body>
    <!-- Background Text -->
    <div class="background-text">Kovalsky</div>
    
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <span class="logo-text">KovalskyAI</span>
            </div>
            <div class="nav-links">
                <a href="#features" class="nav-link">Features</a>
                <a href="#installation" class="nav-link">Installation</a>
                <a href="#roadmap" class="nav-link">Roadmap</a>
                <a href="#contributing" class="nav-link">Contributing</a>
            </div>
            <a href="https://github.com/maxadov/KovalskyAI#%EF%B8%8F-installation" class="try-button" target="_blank">
                Try Kovalsky
            </a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">KovalskyAI</h1>
            <p class="hero-subtitle">Your Local AI Assistant</p>
            <p class="hero-description">
                A fully self-hosted, blazing-fast AI chat interface built for privacy, speed, and simplicity.<br>
                <span class="highlight">No external APIs. No cloud. No monthly fees.</span><br>
                Just you and your model — on your own terms.
            </p>
            <div class="self-hosted-badge">
                <span class="badge-text">FULLY SELF-HOSTED</span>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="section">
        <div class="container">
            <h2 class="section-title">Features</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Real-time Streaming</h3>
                    <p>Responses stream instantly like ChatGPT</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>Elegant Interface</h3>
                    <p>Minimalist, dark-themed with GSAP animations</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🧱</div>
                    <h3>Self-Hosted Backend</h3>
                    <p>Works offline, no cloud dependencies</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🖥️</div>
                    <h3>Cross-Platform</h3>
                    <p>Supports laptops & desktops</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔁</div>
                    <h3>GPU Acceleration</h3>
                    <p>CPU & GPU support via koboldcpp</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💬</div>
                    <h3>Memory-Aware</h3>
                    <p>Chat history retains conversation context</p>
                </div>
            </div>
        </div>
    </section>


    <!-- Roadmap Section -->
    <section id="roadmap" class="section">
        <div class="container">
            <h2 class="section-title">Roadmap & Planned Features</h2>
            <div class="roadmap-grid">
                <div class="roadmap-item">
                    <div class="roadmap-icon">🔍</div>
                    <h3>Web Search</h3>
                    <p>Search the web inside chat</p>
                </div>
                <div class="roadmap-item">
                    <div class="roadmap-icon">📎</div>
                    <h3>Document Attachments</h3>
                    <p>Attach .txt, .pdf, .docx files</p>
                </div>
                <div class="roadmap-item">
                    <div class="roadmap-icon">🧠</div>
                    <h3>Context-Aware Uploads</h3>
                    <p>AI reads and references attached files</p>
                </div>
                <div class="roadmap-item">
                    <div class="roadmap-icon">💾</div>
                    <h3>Session Management</h3>
                    <p>Save/load chat sessions locally</p>
                </div>
                <div class="roadmap-item">
                    <div class="roadmap-icon">🌐</div>
                    <h3>Multi-Language</h3>
                    <p>Multi-language interface support</p>
                </div>
                <div class="roadmap-item">
                    <div class="roadmap-icon">🗂️</div>
                    <h3>Prompt Templates</h3>
                    <p>Templates and personalities (creative, coder, assistant)</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="section">
        <div class="container">
            <h2 class="section-title">Installation</h2>
            <div class="install-card">
                <div class="install-content">
                    <h3>Quick Start</h3>
                    <p>Get KovalskyAI running on your machine in minutes</p>
                    <div class="install-steps">
                        <div class="install-step">
                            <span class="step-num">1.</span>
                            <span>Clone the repository</span>
                        </div>
                        <div class="install-step">
                            <span class="step-num">2.</span>
                            <span>Install dependencies</span>
                        </div>
                        <div class="install-step">
                            <span class="step-num">3.</span>
                            <span>Configure your local model</span>
                        </div>
                        <div class="install-step">
                            <span class="step-num">4.</span>
                            <span>Launch KovalskyAI</span>
                        </div>
                    </div>
                    <a href="https://github.com/maxadov/KovalskyAI#%EF%B8%8F-installation" class="install-button" target="_blank">
                        View Installation Guide
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contributing Section -->
    <section id="contributing" class="section">
        <div class="container">
            <h2 class="section-title">Contributing</h2>
            <div class="contributing-content">
                <p>We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help makes KovalskyAI better for everyone.</p>
                <div class="contribute-actions">
                    <a href="https://github.com/maxadov/KovalskyAI/issues" class="contribute-btn" target="_blank">
                        Create Issues
                    </a>
                    <a href="https://github.com/maxadov/KovalskyAI/fork" class="contribute-btn" target="_blank">
                        Fork Repository
                    </a>
                    <a href="https://github.com/maxadov/KovalskyAI/pulls" class="contribute-btn" target="_blank">
                        Submit PRs
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <span class="logo-text">KovalskyAI</span>
                    <p>Your Local AI Assistant</p>
                </div>
                <div class="footer-right">
                    <a href="https://github.com/maxadov/KovalskyAI" target="_blank" class="footer-link">
                        GitHub Repository
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="./script.js"></script>
</body>
</html>