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

styles.css setup.py style.css index.html

static/css/style.css

/*
Code Assistant Bot Styles
Author: RSK World (https://rskworld.in)
Founder: Molla Samser
Designer & Tester: Rima Khatun
Contact: help@rskworld.in, +91 93305 39277
Year: 2026
*/

/* Global Styles */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --rsk-blue: #0066cc;
    --rsk-green: #28a745;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
header {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
    font-weight: 600;
}

header .text-muted {
    font-size: 0.9rem;
}

/* Main Content */
main {
    flex: 1;
}

/* Card Styles */
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.card-header {
    font-weight: 600;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

/* Form Controls */
.form-control {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-select {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

/* Button Styles */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

/* Code Input and Output Areas */
.font-monospace {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
}

#codeInput {
    resize: vertical;
    min-height: 200px;
}

#outputContent {
    max-height: 500px;
    overflow-y: auto;
}

#outputCode {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* GitHub Results */
.github-result-card {
    border: 1px solid #e1e4e8;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: white;
    transition: all 0.2s ease-in-out;
}

.github-result-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.github-result-card h6 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.github-result-card .badge {
    font-size: 0.75rem;
}

.github-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.github-stats small {
    color: var(--secondary-color);
}

/* Welcome Message */
#welcomeMessage {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

#welcomeMessage h5 {
    color: white;
}

#welcomeMessage .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.feature-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    background: white;
    transition: all 0.3s ease-in-out;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.feature-card i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

.feature-card:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Footer */
footer {
    margin-top: auto;
    background: linear-gradient(135deg, #343a40 0%, #212529 100%);
}

footer h6 {
    color: white;
    font-weight: 600;
}

footer a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

footer a:hover {
    color: var(--primary-color);
}

/* Toast Notifications */
.toast {
    background-color: white;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast-header {
    background-color: var(--light-color);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Syntax Highlighting Overrides */
pre[class*="language-"] {
    margin: 0;
    padding: 1rem;
    background-color: #2d2d2d;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

code[class*="language-"] {
    color: #f8f8f2;
    text-shadow: 0 1px rgba(0,0,0,0.3);
    font-family: 'Courier New', Courier, monospace;
}

/* Character Counter */
.form-text {
    font-size: 0.875rem;
    color: var(--secondary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .github-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    header .text-md-end {
        text-align: left !important;
        margin-top: 1rem;
    }
    
    footer .text-md-end {
        text-align: left !important;
        margin-top: 1rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Code Line Numbers */
.line-numbers .line-numbers-rows {
    border-right: 1px solid #999;
}

.line-numbers-rows > span:before {
    color: #999;
}

/* Error Highlighting */
.error-highlight {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--danger-color);
    padding-left: 0.5rem;
}

/* Success Highlighting */
.success-highlight {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 4px solid var(--success-color);
    padding-left: 0.5rem;
}

/* Warning Highlighting */
.warning-highlight {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 4px solid var(--warning-color);
    padding-left: 0.5rem;
}

/* Loading States */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0.375rem;
}

/* Copy Button Animation */
.copy-success {
    animation: copySuccess 1s ease-in-out;
}

@keyframes copySuccess {
    0% { background-color: var(--success-color); }
    100% { background-color: var(--primary-color); }
}

/* GitHub Language Colors */
.language-python { color: #3572A5; }
.language-javascript { color: #f1e05a; }
.language-typescript { color: #2b7489; }
.language-java { color: #b07219; }
.language-cpp { color: #f34b7d; }
.language-c { color: #555555; }
.language-csharp { color: #239120; }
.language-php { color: #4F5D95; }
.language-ruby { color: #701516; }
.language-go { color: #00ADD8; }
.language-rust { color: #dea584; }
.language-html { color: #e34c26; }
.language-css { color: #563d7c; }

/* New Feature Colors */
.text-purple { color: #6f42c1; }

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    header,
    footer,
    .btn,
    #githubSearchInput,
    #githubSearchBtn,
    #clearGithubBtn {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    body {
        background-color: white;
    }
}

477 lines•9 KB

css

templates/index.html

Raw Download

<!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