RSK World - Code Assistant Bot - Project Files Browser | RSK World

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    Code Assistant Bot - AI-powered coding assistant
    Author: RSK World (https://rskworld.in)
    Founder: Molla Samser
    Designer & Tester: Rima Khatun
    Contact: help@rskworld.in, +91 93305 39277
    Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Assistant Bot - AI-Powered Coding Assistant | RSK World</title>
    <meta name="description" content="AI-powered coding assistant for code generation, debugging, and explanations. Perfect for developers and programmers.">
    <meta name="keywords" content="code assistant, AI coding, code generation, debugging, programming help, RSK World">
    <meta name="author" content="RSK World - Molla Samser">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Code Assistant Bot - AI-Powered Coding Assistant">
    <meta property="og:description" content="AI-powered coding assistant for code generation, debugging, and explanations">
    <meta property="og:url" content="https://rskworld.in/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="RSK World">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Code Assistant Bot - AI-Powered Coding Assistant">
    <meta name="twitter:description" content="AI-powered coding assistant for code generation, debugging, and explanations">
    
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
</head>
<body>
    <!-- Header -->
    <header class="bg-dark text-white py-3">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h3 mb-0">
                        <i class="fas fa-code me-2"></i>
                        Code Assistant Bot
                    </h1>
                    <p class="mb-0 text-muted">AI-Powered Coding Assistant</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <small class="text-muted">
                        Developed by <a href="https://rskworld.in" target="_blank" class="text-white">RSK World</a>
                        <br>
                        © 2026 Molla Samser | Designed by Rima Khatun
                    </small>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container my-4">
        <div class="row">
            <!-- Left Panel - Input -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-edit me-2"></i>
                            Input Panel
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Action Selection -->
                        <div class="mb-3">
                            <label for="actionSelect" class="form-label">Select Action:</label>
                            <select class="form-select" id="actionSelect">
                                <option value="generate">Generate Code</option>
                                <option value="debug">Debug Code</option>
                                <option value="explain">Explain Code</option>
                                <option value="syntax">Check Syntax</option>
                                <option value="analyze">Analyze Code</option>
                                <option value="optimize">Optimize Code</option>
                                <option value="convert">Convert Code</option>
                                <option value="test">Test Code</option>
                                <option value="format">Format Code</option>
                                <option value="document">Generate Documentation</option>
                                <option value="review">Code Review</option>
                                <option value="compare">Compare Code</option>
                            </select>
                        </div>

                        <!-- Language Selection -->
                        <div class="mb-3">
                            <label for="languageSelect" class="form-label">Programming Language:</label>
                            <select class="form-select" id="languageSelect">
                                <option value="python">Python</option>
                                <option value="javascript">JavaScript</option>
                                <option value="typescript">TypeScript</option>
                                <option value="java">Java</option>
                                <option value="cpp">C++</option>
                                <option value="c">C</option>
                                <option value="csharp">C#</option>
                                <option value="php">PHP</option>
                                <option value="ruby">Ruby</option>
                                <option value="go">Go</option>
                                <option value="rust">Rust</option>
                                <option value="html">HTML</option>
                                <option value="css">CSS</option>
                                <option value="sql">SQL</option>
                                <option value="swift">Swift</option>
                                <option value="kotlin">Kotlin</option>
                            </select>
                        </div>

                        <!-- Code Input -->
                        <div class="mb-3">
                            <label for="codeInput" class="form-label">
                                <span id="codeInputLabel">Code / Prompt:</span>
                            </label>
                            <textarea 
                                class="form-control font-monospace" 
                                id="codeInput" 
                                rows="12" 
                                placeholder="Enter your code or prompt here..."
                                spellcheck="false"
                            ></textarea>
                            <div class="form-text">
                                <span id="charCount">0</span> characters
                            </div>
                        </div>

                        <!-- Error Message Input (for debugging) -->
                        <div class="mb-3" id="errorMessageContainer" style="display: none;">
                            <label for="errorMessage" class="form-label">Error Message (Optional):</label>
                            <textarea 
                                class="form-control font-monospace" 
                                id="errorMessage" 
                                rows="3" 
                                placeholder="Paste any error messages here..."
                                spellcheck="false"
                            ></textarea>
                        </div>

                        <!-- Code Conversion Options -->
                        <div class="mb-3" id="conversionOptionsContainer" style="display: none;">
                            <label for="targetLanguageSelect" class="form-label">Target Language:</label>
                            <select class="form-select" id="targetLanguageSelect">
                                <option value="">Select target language...</option>
                                <option value="python">Python</option>
                                <option value="javascript">JavaScript</option>
                                <option value="typescript">TypeScript</option>
                                <option value="java">Java</option>
                                <option value="cpp">C++</option>
                                <option value="c">C</option>
                                <option value="csharp">C#</option>
                                <option value="php">PHP</option>
                                <option value="ruby">Ruby</option>
                                <option value="go">Go</option>
                                <option value="rust">Rust</option>
                            </select>
                        </div>

                        <!-- Code Comparison Options -->
                        <div class="mb-3" id="comparisonOptionsContainer" style="display: none;">
                            <label for="code2Input" class="form-label">Second Code Snippet:</label>
                            <textarea 
                                class="form-control font-monospace" 
                                id="code2Input" 
                                rows="8" 
                                placeholder="Enter second code snippet to compare..."
                                spellcheck="false"
                            ></textarea>
                        </div>

                        <!-- Formatting Options -->
                        <div class="mb-3" id="formattingOptionsContainer" style="display: none;">
                            <label for="formatStyleSelect" class="form-label">Format Style:</label>
                            <select class="form-select" id="formatStyleSelect">
                                <option value="standard">Standard</option>
                                <option value="compact">Compact</option>
                                <option value="expanded">Expanded</option>
                            </select>
                        </div>

                        <!-- Documentation Options -->
                        <div class="mb-3" id="documentationOptionsContainer" style="display: none;">
                            <label for="docStyleSelect" class="form-label">Documentation Style:</label>
                            <select class="form-select" id="docStyleSelect">
                                <option value="standard">Standard</option>
                                <option value="detailed">Detailed</option>
                                <option value="minimal">Minimal</option>
                            </select>
                        </div>

                        <!-- Testing Options -->
                        <div class="mb-3" id="testingOptionsContainer" style="display: none;">
                            <label for="testTypeSelect" class="form-label">Test Type:</label>
                            <select class="form-select" id="testTypeSelect">
                                <option value="syntax">Syntax Check</option>
                                <option value="unit">Unit Tests</option>
                                <option value="integration">Integration Tests</option>
                                <option value="performance">Performance Test</option>
                                <option value="security">Security Test</option>
                            </select>
                        </div>

                        <!-- Optimization Options -->
                        <div class="mb-3" id="optimizationOptionsContainer" style="display: none;">
                            <label class="form-label">Optimization Types:</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="performance" id="optPerformance" checked>
                                <label class="form-check-label" for="optPerformance">
                                    Performance
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="memory" id="optMemory">
                                <label class="form-check-label" for="optMemory">
                                    Memory Usage
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="readability" id="optReadability" checked>
                                <label class="form-check-label" for="optReadability">
                                    Readability
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="security" id="optSecurity">
                                <label class="form-check-label" for="optSecurity">
                                    Security
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="best_practices" id="optBestPractices" checked>
                                <label class="form-check-label" for="optBestPractices">
                                    Best Practices
                                </label>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary" id="processBtn">
                                <i class="fas fa-play me-2"></i>
                                <span id="processBtnText">Generate Code</span>
                            </button>
                            <button class="btn btn-outline-secondary" id="clearBtn">
                                <i class="fas fa-eraser me-2"></i>
                                Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Panel - Output -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-terminal me-2"></i>
                            Output Panel
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Loading Indicator -->
                        <div id="loadingIndicator" class="text-center py-4" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Processing...</span>
                            </div>
                            <p class="mt-2 mb-0">Processing your request...</p>
                        </div>

                        <!-- Output Display -->
                        <div id="outputContainer" style="display: none;">
                            <!-- Output Header -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="mb-0">Result:</h6>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary" id="copyBtn">
                                        <i class="fas fa-copy me-1"></i>
                                        Copy
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary" id="downloadBtn">
                                        <i class="fas fa-download me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>

                            <!-- Output Content -->
                            <div id="outputContent" class="border rounded p-3 bg-light">
                                <pre><code id="outputCode" class="language-none"></code></pre>
                            </div>

                            <!-- Metadata -->
                            <div class="mt-3">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    <span id="outputMetadata"></span>
                                </small>
                            </div>
                        </div>

                        <!-- Error Display -->
                        <div id="errorContainer" class="alert alert-danger" style="display: none;">
                            <h6 class="alert-heading">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                Error
                            </h6>
                            <p id="errorMessageDisplay" class="mb-0"></p>
                        </div>

                        <!-- Welcome Message -->
                        <div id="welcomeMessage" class="text-center py-5">
                            <i class="fas fa-robot fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Welcome to Code Assistant Bot</h5>
                            <p class="text-muted">
                                Enter your code or prompt in the input panel and select an action to get started.
                            </p>
                            <div class="row mt-4">
                                <div class="col-md-4 mb-3">
                                    <div class="text-center">
                                        <i class="fas fa-code fa-2x text-primary mb-2"></i>
                                        <h6>Generate Code</h6>
                                        <small class="text-muted">Create code from descriptions</small>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="text-center">
                                        <i class="fas fa-bug fa-2x text-warning mb-2"></i>
                                        <h6>Debug Code</h6>
                                        <small class="text-muted">Find and fix errors</small>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="text-center">
                                        <i class="fas fa-lightbulb fa-2x text-info mb-2"></i>
                                        <h6>Explain Code</h6>
                                        <small class="text-muted">Understand how code works</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- GitHub Search Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fab fa-github me-2"></i>
                            GitHub Repository Search
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        id="githubSearchInput" 
                                        placeholder="Search GitHub repositories..."
                                    >
                                    <select class="form-select" id="githubLanguageFilter" style="max-width: 150px;">
                                        <option value="">All Languages</option>
                                        <option value="python">Python</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="typescript">TypeScript</option>
                                        <option value="java">Java</option>
                                        <option value="cpp">C++</option>
                                    </select>
                                    <button class="btn btn-info" id="githubSearchBtn">
                                        <i class="fas fa-search me-1"></i>
                                        Search
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4 text-md-end mt-2 mt-md-0">
                                <button class="btn btn-outline-info" id="clearGithubBtn">
                                    <i class="fas fa-times me-1"></i>
                                    Clear Results
                                </button>
                            </div>
                        </div>
                        
                        <!-- GitHub Results -->
                        <div id="githubResults" class="mt-3" style="display: none;">
                            <div class="row" id="githubResultsContainer">
                                <!-- Results will be populated here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-star me-2"></i>
                            Features
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-code fa-3x text-primary mb-3"></i>
                                    <h6>Code Generation</h6>
                                    <p class="small text-muted">Generate code from natural language descriptions</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-bug fa-3x text-warning mb-3"></i>
                                    <h6>Debugging Assistance</h6>
                                    <p class="small text-muted">Find bugs and get suggestions for fixes</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-book fa-3x text-info mb-3"></i>
                                    <h6>Code Explanations</h6>
                                    <p class="small text-muted">Understand complex code with detailed explanations</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                                    <h6>Syntax Checking</h6>
                                    <p class="small text-muted">Validate syntax across multiple programming languages</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-rocket fa-3x text-warning mb-3"></i>
                                    <h6>Code Optimization</h6>
                                    <p class="small text-muted">Improve performance and code quality</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-exchange-alt fa-3x text-info mb-3"></i>
                                    <h6>Code Conversion</h6>
                                    <p class="small text-muted">Convert between programming languages</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-vial fa-3x text-danger mb-3"></i>
                                    <h6>Code Testing</h6>
                                    <p class="small text-muted">Run tests and validate your code</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-magic fa-3x text-purple mb-3"></i>
                                    <h6>Code Formatting</h6>
                                    <p class="small text-muted">Beautify and format your code</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-file-alt fa-3x text-info mb-3"></i>
                                    <h6>Documentation</h6>
                                    <p class="small text-muted">Auto-generate code documentation</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-search fa-3x text-warning mb-3"></i>
                                    <h6>Code Review</h6>
                                    <p class="small text-muted">Get code review suggestions</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="text-center">
                                    <i class="fas fa-code-branch fa-3x text-success mb-3"></i>
                                    <h6>Code Comparison</h6>
                                    <p class="small text-muted">Compare and diff code snippets</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h6>Code Assistant Bot</h6>
                    <p class="small mb-0">
                        AI-powered coding assistant for developers
                    </p>
                    <p class="small mb-0">
                        Part of <a href="https://rskworld.in" target="_blank" class="text-white">RSK World</a> - Free Programming Resources
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <h6>Contact</h6>
                    <p class="small mb-0">
                        <i class="fas fa-envelope me-2"></i>help@rskworld.in
                    </p>
                    <p class="small mb-0">
                        <i class="fas fa-phone me-2"></i>+91 93305 39277
                    </p>
                    <p class="small mb-0">
                        <i class="fas fa-map-marker-alt me-2"></i>Nutanhat, Mongolkote, Purba Burdwan, West Bengal
                    </p>
                    <hr class="my-2">
                    <p class="small mb-0">
                        © 2026 RSK World. All rights reserved. | 
                        Founder: Molla Samser | 
                        Designer & Tester: Rima Khatun
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Toast Notification -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="notificationToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i class="fas fa-info-circle text-primary me-2"></i>
                <strong class="me-auto">Notification</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toastMessage">
                Message here
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csharp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

572 lines•31.8 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size