RSK World - Ruby Calculator Pro - Project Files Browser | RSK World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby Calculator Pro - Project Showcase</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        :root {
            --theme-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --theme-secondary: #4a5568;
            --theme-accent: #ed8936;
            --theme-success: #48bb78;
            --theme-danger: #e53e3e;
            --theme-warning: #ecc94b;
            --theme-info: #4299e1;
            --theme-background: #f7fafc;
            --theme-text: #2d3748;
            --theme-display: #2d3748;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--theme-background);
            color: var(--theme-text);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }

        .hero-section {
            background: var(--theme-primary);
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .hero-section p {
            font-size: 1.3rem;
            margin-bottom: 30px;
        }

        .calculator-preview {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            margin: 40px auto;
            max-width: 1200px;
        }

        .preview-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .preview-header h2 {
            color: var(--theme-text);
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .calculator-mockup {
            background: var(--theme-primary);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .display-mockup {
            background: var(--theme-display);
            color: white;
            border-radius: 15px;
            padding: 25px;
            font-size: 2.5em;
            text-align: right;
            margin-bottom: 20px;
            min-height: 100px;
            font-family: 'Courier New', monospace;
        }

        .buttons-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .btn-mockup {
            border-radius: 12px;
            font-weight: bold;
            padding: 15px;
            border: none;
            transition: all 0.3s ease;
            text-align: center;
            font-size: 1.1em;
        }

        .btn-number { background: var(--theme-secondary); color: white; }
        .btn-operator { background: var(--theme-accent); color: white; }
        .btn-scientific { background: var(--theme-info); color: white; }
        .btn-memory { background: var(--theme-success); color: white; }
        .btn-clear { background: var(--theme-danger); color: white; }
        .btn-equals { background: var(--theme-success); color: white; }

        .features-section {
            padding: 80px 0;
            background: white;
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

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

        .feature-icon {
            font-size: 3rem;
            color: var(--theme-accent);
            margin-bottom: 20px;
        }

        .installation-section {
            background: #f8f9fa;
            padding: 80px 0;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            margin: 20px 0;
            overflow-x: auto;
        }

        .file-structure {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin: 40px 0;
        }

        .file-item {
            padding: 10px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .file-item:last-child {
            border-bottom: none;
        }

        .file-name {
            font-weight: bold;
            color: var(--theme-info);
        }

        .file-description {
            color: var(--theme-secondary);
            margin-top: 5px;
        }

        .tech-stack {
            background: var(--theme-primary);
            color: white;
            padding: 60px 0;
            text-align: center;
        }

        .tech-icon {
            font-size: 4rem;
            margin: 20px;
            display: inline-block;
        }

        .footer {
            background: var(--theme-secondary);
            color: white;
            padding: 40px 0;
            text-align: center;
        }

        .api-section, .database-section, .examples-section, .performance-section, .troubleshooting-section, .deployment-section {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .api-section:nth-child(odd), .database-section:nth-child(odd), .examples-section:nth-child(odd), .performance-section:nth-child(odd), .troubleshooting-section:nth-child(odd), .deployment-section:nth-child(odd) {
            background: white;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            margin: 20px 0;
            overflow-x: auto;
            position: relative;
        }

        .code-block::before {
            content: '';
            position: absolute;
            top: 10px;
            right: 10px;
            width: 12px;
            height: 12px;
            background: #ff5f57;
            border-radius: 50%;
            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #28ca42;
        }

        .table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--theme-primary);
            color: white;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

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

        .navbar-nav .nav-link.active {
            color: var(--theme-accent) !important;
            font-weight: bold;
        }

        #backToTop {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        #backToTop:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

        .summary-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .card-header {
            border-radius: 15px 15px 0 0 !important;
        }

        .stats-card {
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }

        .badge-custom {
            background: var(--theme-accent);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8em;
            margin: 2px;
        }

        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.5rem;
            }

            .buttons-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 5px;
            }

            .btn-mockup {
                padding: 10px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="animate__animated animate__fadeInDown">
                        <i class="fas fa-gem"></i> Ruby Calculator Pro
                    </h1>
                    <p class="animate__animated animate__fadeInUp">
                        Advanced Calculator with Modern UI, Built with Ruby on Rails 7
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-3 animate__animated animate__fadeInUp">
                        <a href="#demo" class="btn btn-light btn-lg">
                            <i class="fas fa-play"></i> Try Demo
                        </a>
                        <a href="#installation" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-download"></i> Installation
                        </a>
                        <a href="#api" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-code"></i> API Docs
                        </a>
                        <a href="#examples" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-terminal"></i> Code Examples
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Navigation Menu -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: var(--theme-secondary);">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#demo"><i class="fas fa-eye"></i> Live Demo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features"><i class="fas fa-star"></i> Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tech-stack"><i class="fas fa-code"></i> Tech Stack</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#installation"><i class="fas fa-download"></i> Installation</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#api"><i class="fas fa-code"></i> API Docs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#database"><i class="fas fa-database"></i> Database</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#structure"><i class="fas fa-folder-tree"></i> Structure</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#examples"><i class="fas fa-terminal"></i> Examples</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#performance"><i class="fas fa-tachometer-alt"></i> Performance</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#troubleshooting"><i class="fas fa-tools"></i> Help</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#deployment"><i class="fas fa-rocket"></i> Deploy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Calculator Preview -->
    <section id="demo" class="calculator-preview">
        <div class="container">
            <div class="preview-header">
                <h2><i class="fas fa-eye"></i> Live Interactive Preview</h2>
                <p>Experience the calculator interface - click buttons to see real calculations!</p>
            </div>

            <div class="calculator-mockup animate__animated animate__fadeIn">
                <div class="display-mockup" id="demo-display">
                    0
                </div>

                <!-- Keyboard Shortcuts Info -->
                <div class="keyboard-hint mb-3">
                    <i class="fas fa-keyboard"></i> Try keyboard: Numbers (0-9), Operations (+,-,*,/), Enter (=), Escape (C)
                </div>

                <!-- Scientific Functions -->
                <div class="row mb-2">
                    <div class="col-3"><button class="btn btn-scientific btn-mockup w-100" onclick="demoScientific('sin')">sin</button></div>
                    <div class="col-3"><button class="btn btn-scientific btn-mockup w-100" onclick="demoScientific('cos')">cos</button></div>
                    <div class="col-3"><button class="btn btn-scientific btn-mockup w-100" onclick="demoScientific('tan')">tan</button></div>
                    <div class="col-3"><button class="btn btn-scientific btn-mockup w-100" onclick="demoScientific('sqrt')">√</button></div>
                </div>

                <!-- Memory Functions -->
                <div class="row mb-2">
                    <div class="col-3"><button class="btn btn-memory btn-mockup w-100" onclick="demoMemory('recall')">MR</button></div>
                    <div class="col-3"><button class="btn btn-memory btn-mockup w-100" onclick="demoMemory('add')">M+</button></div>
                    <div class="col-3"><button class="btn btn-memory btn-mockup w-100" onclick="demoMemory('subtract')">M-</button></div>
                    <div class="col-3"><button class="btn btn-memory btn-mockup w-100" onclick="demoMemory('clear')">MC</button></div>
                </div>

                <!-- Numbers and Operators -->
                <div class="row mb-2">
                    <div class="col-3"><button class="btn btn-clear btn-mockup w-100" onclick="demoClear()">C</button></div>
                    <div class="col-3"><button class="btn btn-operator btn-mockup w-100" onclick="demoAppend('/')">÷</button></div>
                    <div class="col-3"><button class="btn btn-operator btn-mockup w-100" onclick="demoAppend('*')">×</button></div>
                    <div class="col-3"><button class="btn btn-operator btn-mockup w-100" onclick="demoBackspace()">←</button></div>
                </div>

                <div class="row mb-2">
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('7')">7</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('8')">8</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('9')">9</button></div>
                    <div class="col-3"><button class="btn btn-operator btn-mockup w-100" onclick="demoAppend('-')">-</button></div>
                </div>

                <div class="row mb-2">
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('4')">4</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('5')">5</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('6')">6</button></div>
                    <div class="col-3"><button class="btn btn-operator btn-mockup w-100" onclick="demoAppend('+')">+</button></div>
                </div>

                <div class="row">
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('1')">1</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('2')">2</button></div>
                    <div class="col-3"><button class="btn btn-number btn-mockup w-100" onclick="demoAppend('3')">3</button></div>
                    <div class="col-6"><button class="btn btn-equals btn-mockup w-100" onclick="demoCalculate()" style="grid-column: span 2;">=</button></div>
                </div>

                <!-- Demo Result Display -->
                <div class="mt-3 p-2 bg-light rounded">
                    <small class="text-muted">Demo Result: <span id="demo-result">Try clicking buttons above!</span></small>
                </div>
            </div>

            <!-- Tabbed Interface Preview -->
            <div class="row mt-5">
                <div class="col-12">
                    <h4 class="text-center mb-4">Interface Tabs Preview</h4>
                    <ul class="nav nav-pills justify-content-center mb-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="pill" href="#demo-calculator">
                                <i class="fas fa-calculator"></i> Calculator
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#demo-converter">
                                <i class="fas fa-exchange-alt"></i> Converter
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#demo-favorites">
                                <i class="fas fa-star"></i> Favorites
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#demo-history">
                                <i class="fas fa-history"></i> History
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="demo-calculator">
                            <div class="p-4 bg-light rounded">
                                <h5>Basic Calculator Tab</h5>
                                <p>Standard arithmetic operations with scientific functions and memory operations.</p>
                                <div class="badge-custom me-2">Memory Functions</div>
                                <div class="badge-custom me-2">Scientific Functions</div>
                                <div class="badge-custom">Keyboard Shortcuts</div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="demo-converter">
                            <div class="p-4 bg-light rounded">
                                <h5>Currency & Unit Converter Tab</h5>
                                <p>Convert between currencies and various units (length, weight, temperature, volume).</p>
                                <div class="badge-custom me-2">Real-time Rates</div>
                                <div class="badge-custom me-2">Multiple Categories</div>
                                <div class="badge-custom">API Integration</div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="demo-favorites">
                            <div class="p-4 bg-light rounded">
                                <h5>Favorites Tab</h5>
                                <p>Save frequently used calculations and formulas for quick access.</p>
                                <div class="badge-custom me-2">Quick Access</div>
                                <div class="badge-custom me-2">Formula Storage</div>
                                <div class="badge-custom">Persistent Data</div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="demo-history">
                            <div class="p-4 bg-light rounded">
                                <h5>Calculation History Tab</h5>
                                <p>View and search through your calculation history with timestamps.</p>
                                <div class="badge-custom me-2">Searchable</div>
                                <div class="badge-custom me-2">Timestamped</div>
                                <div class="badge-custom">Export Ready</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-star"></i> Powerful Features</h2>
                <p>Everything you need for advanced calculations</p>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInLeft">
                        <div class="feature-icon">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <h4>Basic Calculator</h4>
                        <p>Addition, subtraction, multiplication, and division with memory functions and history tracking.</p>
                        <div class="badge-custom">Core Feature</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInUp">
                        <div class="feature-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <h4>Scientific Functions</h4>
                        <p>Sin, cos, tan, logarithms, square roots, factorials, and power functions.</p>
                        <div class="badge-custom">Advanced</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInRight">
                        <div class="feature-icon">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <h4>Converters</h4>
                        <p>Currency conversion, unit conversion (length, weight, temperature, volume).</p>
                        <div class="badge-custom">Utility</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInLeft">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4>Graphing Calculator</h4>
                        <p>Plot functions, find roots, calculate derivatives and integrals.</p>
                        <div class="badge-custom">Premium</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInUp">
                        <div class="feature-icon">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <h4>Health Calculator</h4>
                        <p>BMI, BMR, body fat percentage, and water intake calculators.</p>
                        <div class="badge-custom">Health</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="feature-card animate__animated animate__fadeInRight">
                        <div class="feature-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <h4>Financial Tools</h4>
                        <p>Loan calculator, compound interest, tip calculator.</p>
                        <div class="badge-custom">Finance</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tech Stack -->
    <section id="tech-stack" class="tech-stack">
        <div class="container">
            <h2><i class="fas fa-code"></i> Built With Modern Technologies</h2>
            <div class="row mt-4">
                <div class="col-md-3">
                    <i class="fab fa-ruby tech-icon text-danger"></i>
                    <h5>Ruby on Rails 7</h5>
                    <p>Backend Framework</p>
                </div>
                <div class="col-md-3">
                    <i class="fab fa-html5 tech-icon text-warning"></i>
                    <h5>HTML5 & CSS3</h5>
                    <p>Frontend Structure</p>
                </div>
                <div class="col-md-3">
                    <i class="fab fa-js-square tech-icon text-warning"></i>
                    <h5>JavaScript (ES6)</h5>
                    <p>Interactive Features</p>
                </div>
                <div class="col-md-3">
                    <i class="fas fa-database tech-icon text-primary"></i>
                    <h5>SQLite3</h5>
                    <p>Data Storage</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="installation-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-download"></i> Installation Guide</h2>
                <p>Get started with Ruby Calculator Pro in minutes</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4><i class="fas fa-list-check"></i> Prerequisites</h4>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            Ruby 3.1.0 or higher
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            Node.js 14+ and npm
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            SQLite3 database
                        </li>
                        <li class="list-group-item">
                            <i class="fas fa-check text-success me-2"></i>
                            Git (for cloning)
                        </li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <h4><i class="fas fa-terminal"></i> Quick Setup</h4>
                    <div class="code-block">
# Clone the repository
git clone https://github.com/your-username/ruby-calculator.git
cd ruby-calculator

# Install Ruby dependencies
bundle install

# Install JavaScript dependencies
npm install

# Build assets
npm run build
npm run build:css

# Setup database
rails db:create
rails db:migrate

# Start the server
rails server
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-12">
                    <h4><i class="fas fa-play-circle"></i> Alternative Start Commands</h4>
                    <div class="code-block">
# Development with auto-reload
rails server -p 3000

# Production mode
RAILS_ENV=production rails server

# With specific binding
rails server -b 0.0.0.0 -p 3000
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API Documentation -->
    <section id="api" class="api-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-code"></i> API Documentation</h2>
                <p>Complete API reference for all calculator endpoints</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4><i class="fas fa-calculator"></i> Calculator APIs</h4>

                    <div class="code-block">
POST /calculator/calculate
Content-Type: application/json

{
  "operation": "add",
  "first_number": 10,
  "second_number": 5
}

Response: { "result": 15 }
                    </div>

                    <div class="code-block">
POST /calculator/memory
Content-Type: application/json

{
  "memory_action": "add",
  "value": 10
}

Response: { "memory": 10 }
                    </div>

                    <h5 class="mt-4">Supported Operations:</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">add, subtract, multiply, divide</li>
                        <li class="list-group-item">power, sqrt, sin, cos, tan</li>
                        <li class="list-group-item">log, ln, factorial</li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <h4><i class="fas fa-exchange-alt"></i> Converter APIs</h4>

                    <div class="code-block">
POST /converter/convert_currency
Content-Type: application/json

{
  "amount": 100,
  "from_currency": "USD",
  "to_currency": "EUR"
}

Response: { "result": 85.50 }
                    </div>

                    <div class="code-block">
POST /converter/convert_unit
Content-Type: application/json

{
  "amount": 100,
  "from_unit": "meters",
  "to_unit": "feet",
  "category": "length"
}

Response: { "result": 328.08 }
                    </div>

                    <h5 class="mt-4">Unit Categories:</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">length, weight, temperature</li>
                        <li class="list-group-item">volume, area, speed</li>
                        <li class="list-group-item">data (storage)</li>
                    </ul>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4><i class="fas fa-chart-line"></i> Advanced Calculator APIs</h4>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="code-block">
POST /advanced/plot_function
{
  "equation": "x^2 + 2*x + 1",
  "x_min": -10,
  "x_max": 10,
  "points": 100
}
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="code-block">
POST /advanced/calculate_loan
{
  "principal": 100000,
  "rate": 5.5,
  "years": 30
}
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="code-block">
POST /advanced/calculate_bmi
{
  "weight_kg": 70,
  "height_cm": 175
}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Database Schema -->
    <section id="database" class="database-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-database"></i> Database Schema</h2>
                <p>Complete database structure and relationships</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4>calculation_histories</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Column</th>
                                <th>Type</th>
                                <th>Constraints</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>id</td><td>integer</td><td>PRIMARY KEY</td></tr>
                            <tr><td>expression</td><td>text</td><td>NOT NULL</td></tr>
                            <tr><td>result</td><td>float</td><td>NOT NULL</td></tr>
                            <tr><td>operation</td><td>string</td><td>NOT NULL</td></tr>
                            <tr><td>created_at</td><td>datetime</td><td>NOT NULL</td></tr>
                            <tr><td>updated_at</td><td>datetime</td><td>NOT NULL</td></tr>
                        </tbody>
                    </table>
                </div>

                <div class="col-md-6">
                    <h4>favorite_calculations</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Column</th>
                                <th>Type</th>
                                <th>Constraints</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td>id</td><td>integer</td><td>PRIMARY KEY</td></tr>
                            <tr><td>name</td><td>string</td><td>NOT NULL</td></tr>
                            <tr><td>expression</td><td>text</td><td>NOT NULL</td></tr>
                            <tr><td>result</td><td>float</td><td></td></tr>
                            <tr><td>category</td><td>string</td><td></td></tr>
                            <tr><td>created_at</td><td>datetime</td><td>NOT NULL</td></tr>
                            <tr><td>updated_at</td><td>datetime</td><td>NOT NULL</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4>Indexes & Constraints</h4>
                    <div class="code-block">
-- Calculation Histories
CREATE INDEX index_calculation_histories_on_operation ON calculation_histories(operation);
CREATE INDEX index_calculation_histories_on_created_at ON calculation_histories(created_at);

-- Favorite Calculations
CREATE INDEX index_favorite_calculations_on_category ON favorite_calculations(category);
CREATE INDEX index_favorite_calculations_on_created_at ON favorite_calculations(created_at);
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Project Structure -->
    <section id="structure" class="file-structure">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-folder-tree"></i> Project Structure</h2>
                <p>Complete overview of all files and directories</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4><i class="fas fa-cogs"></i> Backend (Ruby on Rails)</h4>

                    <div class="file-item">
                        <div class="file-name">app/controllers/</div>
                        <div class="file-description">Request handlers for calculator, converter, favorites, themes, and advanced features</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">app/models/</div>
                        <div class="file-description">Data models for calculations, history, favorites, and mathematical operations</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">app/views/</div>
                        <div class="file-description">ERB templates for all calculator interfaces and layouts</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">config/routes.rb</div>
                        <div class="file-description">URL routing configuration for all calculator endpoints</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">db/migrate/</div>
                        <div class="file-description">Database migration files for creating tables and relationships</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">Gemfile</div>
                        <div class="file-description">Ruby dependencies including Rails, HTTParty, JWT, and other gems</div>
                    </div>
                </div>

                <div class="col-md-6">
                    <h4><i class="fas fa-code"></i> Frontend (JavaScript/CSS)</h4>

                    <div class="file-item">
                        <div class="file-name">app/javascript/application.js</div>
                        <div class="file-description">Main JavaScript entry point importing Turbo and Stimulus controllers</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">app/javascript/controllers/</div>
                        <div class="file-description">Stimulus controllers for interactive calculator features</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">app/assets/stylesheets/</div>
                        <div class="file-description">SCSS/CSS files for calculator styling and responsive design</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">package.json</div>
                        <div class="file-description">Node.js dependencies and build scripts for JavaScript compilation</div>
                    </div>

                    <div class="file-item">
                        <div class="file-name">app/views/calculator/_enhanced_index.html.erb</div>
                        <div class="file-description">Main calculator interface with tabs for different features</div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4><i class="fas fa-file-alt"></i> Key Files Overview</h4>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="file-item">
                                <div class="file-name">config/application.rb</div>
                                <div class="file-description">Rails application configuration and settings</div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="file-item">
                                <div class="file-name">config/database.yml</div>
                                <div class="file-description">Database connection settings for different environments</div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="file-item">
                                <div class="file-name">Rakefile</div>
                                <div class="file-description">Rails tasks and commands for database operations</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Code Examples -->
    <section id="examples" class="examples-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-code"></i> Code Examples</h2>
                <p>Practical examples of how to use the calculator APIs</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4>Basic Calculation (JavaScript)</h4>
                    <div class="code-block">
// Basic arithmetic calculation
fetch('/calculator/calculate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    operation: 'add',
    first_number: 15,
    second_number: 27
  })
})
.then(response => response.json())
.then(data => console.log('Result:', data.result)); // Result: 42
                    </div>

                    <h4 class="mt-4">Memory Operations (JavaScript)</h4>
                    <div class="code-block">
// Memory operations
fetch('/calculator/memory', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    memory_action: 'add',
    value: 50
  })
})
.then(response => response.json())
.then(data => console.log('Memory:', data.memory));
                    </div>
                </div>

                <div class="col-md-6">
                    <h4>Currency Conversion (JavaScript)</h4>
                    <div class="code-block">
// Currency conversion
fetch('/converter/convert_currency', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    amount: 100,
    from_currency: 'USD',
    to_currency: 'EUR'
  })
})
.then(response => response.json())
.then(data => console.log('Converted:', data.result));
                    </div>

                    <h4 class="mt-4">Unit Conversion (JavaScript)</h4>
                    <div class="code-block">
// Unit conversion
fetch('/converter/convert_unit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    amount: 1000,
    from_unit: 'meters',
    to_unit: 'kilometers',
    category: 'length'
  })
})
.then(response => response.json())
.then(data => console.log('Converted:', data.result)); // Result: 1
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4>Ruby on Rails Controller Examples</h4>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="code-block">
# app/controllers/calculator_controller.rb
def calculate
  operation = params[:operation]
  first_number = params[:first_number].to_f
  second_number = params[:second_number].to_f

  result = case operation
           when 'add' then first_number + second_number
           when 'subtract' then first_number - second_number
           when 'multiply' then first_number * second_number
           when 'divide' then first_number / second_number
           end

  render json: { result: result }
end
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="code-block">
# app/models/calculation_history.rb
class CalculationHistory < ApplicationRecord
  validates :expression, presence: true
  validates :result, presence: true
  validates :operation, presence: true

  scope :recent, -> { order(created_at: :desc) }
  scope :by_operation, ->(operation) { where(operation: operation) }

  def self.operation_stats
    group(:operation).count
  end
end
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Performance & Metrics -->
    <section id="performance" class="performance-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-tachometer-alt"></i> Performance & Metrics</h2>
                <p>Technical specifications and performance benchmarks</p>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="stats-card">
                        <h3><i class="fas fa-code"></i></h3>
                        <h4>15+ Controllers</h4>
                        <p>Rails controllers handling requests</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="stats-card">
                        <h3><i class="fas fa-route"></i></h3>
                        <h4>25+ Routes</h4>
                        <p>API endpoints and web routes</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="stats-card">
                        <h3><i class="fas fa-database"></i></h3>
                        <h4>SQLite3</h4>
                        <p>Fast, reliable database</p>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <h4>Response Times</h4>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            Basic Calculation <span class="badge bg-success">~50ms</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Scientific Functions <span class="badge bg-success">~75ms</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Currency Conversion <span class="badge bg-warning">~200ms</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Graph Plotting <span class="badge bg-warning">~150ms</span>
                        </li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <h4>Bundle Sizes</h4>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            JavaScript Bundle <span class="badge bg-info">~236KB</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            CSS Bundle <span class="badge bg-info">~45KB</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Total Assets <span class="badge bg-info">~281KB</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            Gzipped <span class="badge bg-success">~85KB</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4>System Requirements</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-server fa-3x text-primary mb-3"></i>
                                    <h5>Server</h5>
                                    <ul class="list-unstyled">
                                        <li>Ruby 3.1+</li>
                                        <li>Rails 7.0+</li>
                                        <li>SQLite3</li>
                                        <li>512MB RAM</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-laptop fa-3x text-success mb-3"></i>
                                    <h5>Development</h5>
                                    <ul class="list-unstyled">
                                        <li>Node.js 14+</li>
                                        <li>npm/yarn</li>
                                        <li>Git</li>
                                        <li>2GB RAM</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="fas fa-globe fa-3x text-info mb-3"></i>
                                    <h5>Browser</h5>
                                    <ul class="list-unstyled">
                                        <li>Chrome 80+</li>
                                        <li>Firefox 75+</li>
                                        <li>Safari 13+</li>
                                        <li>Edge 80+</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Troubleshooting -->
    <section id="troubleshooting" class="troubleshooting-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-tools"></i> Troubleshooting</h2>
                <p>Common issues and their solutions</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4>Installation Issues</h4>

                    <div class="accordion" id="troubleshootingAccordion1">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#issue1">
                                    Ruby version not found
                                </button>
                            </h2>
                            <div id="issue1" class="accordion-collapse collapse show" data-bs-parent="#troubleshootingAccordion1">
                                <div class="accordion-body">
                                    <strong>Solution:</strong> Install Ruby 3.1+ using rbenv or rvm:<br>
                                    <code>curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-installer | bash</code><br>
                                    <code>rbenv install 3.1.0 && rbenv global 3.1.0</code>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#issue2">
                                    Bundle install fails
                                </button>
                            </h2>
                            <div id="issue2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion1">
                                <div class="accordion-body">
                                    <strong>Solution:</strong> Update bundler and clear cache:<br>
                                    <code>gem install bundler && bundle update</code><br>
                                    <code>bundle config set --local clean 'true'</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <h4>Runtime Issues</h4>

                    <div class="accordion" id="troubleshootingAccordion2">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#issue3">
                                    JavaScript build fails
                                </button>
                            </h2>
                            <div id="issue3" class="accordion-collapse collapse show" data-bs-parent="#troubleshootingAccordion2">
                                <div class="accordion-body">
                                    <strong>Solution:</strong> Clear node_modules and rebuild:<br>
                                    <code>rm -rf node_modules && npm install</code><br>
                                    <code>npm run build</code>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#issue4">
                                    Database connection error
                                </button>
                            </h2>
                            <div id="issue4" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion2">
                                <div class="accordion-body">
                                    <strong>Solution:</strong> Reset database:<br>
                                    <code>rails db:drop db:create db:migrate</code><br>
                                    <code>rails db:seed</code> (if applicable)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <h4>Getting Help</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="fab fa-github fa-2x text-dark mb-2"></i>
                                    <h6>GitHub Issues</h6>
                                    <p>Report bugs and request features</p>
                                    <a href="#" class="btn btn-outline-dark btn-sm">Create Issue</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="fas fa-envelope fa-2x text-primary mb-2"></i>
                                    <h6>Email Support</h6>
                                    <p>Get direct help from developers</p>
                                    <a href="mailto:help@rskworld.in" class="btn btn-outline-primary btn-sm">Email Us</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="fas fa-book fa-2x text-success mb-2"></i>
                                    <h6>Documentation</h6>
                                    <p>Read the full documentation</p>
                                    <a href="#api" class="btn btn-outline-success btn-sm">View Docs</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Deployment -->
    <section id="deployment" class="deployment-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-rocket"></i> Deployment Guide</h2>
                <p>Get your calculator running in production</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h4>Local Development</h4>
                    <div class="code-block">
# Start development server
rails server

# With custom port
rails server -p 3001

# With binding to all interfaces
rails server -b 0.0.0.0 -p 3000

# Production mode locally
RAILS_ENV=production rails server
                    </div>
                </div>

                <div class="col-md-6">
                    <h4>Production Deployment</h4>
                    <div class="code-block">
# Environment setup
export RAILS_ENV=production
export SECRET_KEY_BASE=$(rails secret)

# Precompile assets
rails assets:precompile

# Start production server
rails server -e production -p 3000

# Using Puma (recommended)
bundle exec puma -e production
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <h4>Heroku Deployment</h4>
                    <div class="code-block">
# Create Heroku app
heroku create your-calculator-app

# Set environment variables
heroku config:set RAILS_ENV=production

# Deploy
git push heroku main

# Run migrations
heroku run rails db:migrate

# Open app
heroku open
                    </div>
                </div>

                <div class="col-md-6">
                    <h4>Docker Deployment</h4>
                    <div class="code-block">
# Build image
docker build -t ruby-calculator .

# Run container
docker run -p 3000:3000 ruby-calculator

# With environment variables
docker run -e RAILS_ENV=production \
  -p 3000:3000 ruby-calculator

# Docker Compose
docker-compose up -d
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-card">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3">
                    <h3><i class="fas fa-code"></i></h3>
                    <h4>1000+ Lines</h4>
                    <p>Well-structured code</p>
                </div>
                <div class="col-md-3">
                    <h3><i class="fas fa-calculator"></i></h3>
                    <h4>15+ Features</h4>
                    <p>Calculator functions</p>
                </div>
                <div class="col-md-3">
                    <h3><i class="fas fa-users"></i></h3>
                    <h4>Modern UI</h4>
                    <p>Responsive design</p>
                </div>
                <div class="col-md-3">
                    <h3><i class="fas fa-star"></i></h3>
                    <h4>Production Ready</h4>
                    <p>Complete application</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Complete Project Summary -->
    <section class="summary-section py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2><i class="fas fa-clipboard-list"></i> Complete Project Overview</h2>
                <p>Everything included in Ruby Calculator Pro</p>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="text-center mb-4">
                        <div class="display-4 text-primary mb-3">📁</div>
                        <h5>25+ Files</h5>
                        <small class="text-muted">Organized structure</small>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center mb-4">
                        <div class="display-4 text-success mb-3">⚡</div>
                        <h5>15+ Features</h5>
                        <small class="text-muted">Calculator functions</small>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center mb-4">
                        <div class="display-4 text-info mb-3">🔌</div>
                        <h5>25+ API Endpoints</h5>
                        <small class="text-muted">RESTful APIs</small>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center mb-4">
                        <div class="display-4 text-warning mb-3">🎨</div>
                        <h5>Responsive UI</h5>
                        <small class="text-muted">Modern design</small>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="fas fa-check-circle"></i> What's Included</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <h6><i class="fas fa-calculator text-primary"></i> Calculator Features</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ Basic arithmetic operations</li>
                                        <li>✅ Scientific functions (sin, cos, tan, log, √)</li>
                                        <li>✅ Memory operations (MR, M+, M-, MC)</li>
                                        <li>✅ Keyboard shortcuts support</li>
                                        <li>✅ Calculation history tracking</li>
                                    </ul>
                                </div>

                                <div class="col-md-4">
                                    <h6><i class="fas fa-exchange-alt text-success"></i> Converters</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ Currency conversion (real-time)</li>
                                        <li>✅ Unit conversion (length, weight, etc.)</li>
                                        <li>✅ Temperature conversion</li>
                                        <li>✅ Volume and area conversion</li>
                                        <li>✅ Speed and data conversion</li>
                                    </ul>
                                </div>

                                <div class="col-md-4">
                                    <h6><i class="fas fa-chart-line text-info"></i> Advanced Features</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ Function graphing</li>
                                        <li>✅ Derivative calculation</li>
                                        <li>✅ Integral computation</li>
                                        <li>✅ Financial calculators</li>
                                        <li>✅ Health metrics (BMI, BMR)</li>
                                    </ul>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-4">
                                    <h6><i class="fas fa-code text-warning"></i> Technical Stack</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ Ruby on Rails 7.0.4</li>
                                        <li>✅ Ruby 3.1.0</li>
                                        <li>✅ SQLite3 database</li>
                                        <li>✅ JavaScript (ES6)</li>
                                        <li>✅ HTML5 & CSS3</li>
                                    </ul>
                                </div>

                                <div class="col-md-4">
                                    <h6><i class="fas fa-tools text-danger"></i> Development Tools</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ esbuild (JavaScript bundler)</li>
                                        <li>✅ Sass (CSS preprocessor)</li>
                                        <li>✅ Bootstrap 5 (UI framework)</li>
                                        <li>✅ Turbo & Stimulus (frontend)</li>
                                        <li>✅ Font Awesome icons</li>
                                    </ul>
                                </div>

                                <div class="col-md-4">
                                    <h6><i class="fas fa-database text-secondary"></i> Database & APIs</h6>
                                    <ul class="list-unstyled">
                                        <li>✅ RESTful API endpoints</li>
                                        <li>✅ JSON responses</li>
                                        <li>✅ Database migrations</li>
                                        <li>✅ Model relationships</li>
                                        <li>✅ Data validation</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h4><i class="fas fa-gem text-danger"></i> Ruby Calculator Pro</h4>
                    <p>Built with ❤️ by RSK World</p>
                    <p><strong>Authors:</strong> Molla Samser (Founder) | Rima Khatun (Designer & Tester)</p>
                    <p><strong>Contact:</strong> <a href="mailto:help@rskworld.in" class="text-white">help@rskworld.in</a> | +91 93305 39277</p>
                    <p><strong>Website:</strong> <a href="https://rskworld.in" target="_blank" class="text-white">https://rskworld.in</a></p>
                    <p class="mt-3">© 2026 RSK World. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button id="backToTop" class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; display: none; z-index: 1000;">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Interactive Calculator Demo
        let demoCurrentInput = '0';
        let demoShouldResetDisplay = false;
        let demoMemory = 0;

        function updateDemoDisplay() {
            document.getElementById('demo-display').textContent = demoCurrentInput;
        }

        function demoAppend(value) {
            if (demoShouldResetDisplay) {
                demoCurrentInput = '0';
                demoShouldResetDisplay = false;
            }

            if (demoCurrentInput === '0' && value !== '.') {
                demoCurrentInput = value;
            } else {
                demoCurrentInput += value;
            }
            updateDemoDisplay();
            updateDemoResult('Input: ' + demoCurrentInput);
        }

        function demoClear() {
            demoCurrentInput = '0';
            updateDemoDisplay();
            updateDemoResult('Display cleared');
        }

        function demoBackspace() {
            if (demoCurrentInput.length > 1) {
                demoCurrentInput = demoCurrentInput.slice(0, -1);
            } else {
                demoCurrentInput = '0';
            }
            updateDemoDisplay();
            updateDemoResult('Backspace pressed');
        }

        function demoCalculate() {
            try {
                const expression = demoCurrentInput.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-');
                const result = eval(expression);
                updateDemoResult(`Result: ${demoCurrentInput} = ${result}`);
                demoCurrentInput = result.toString();
                demoShouldResetDisplay = true;
                updateDemoDisplay();
            } catch (error) {
                updateDemoResult('Error: Invalid expression');
                demoCurrentInput = 'Error';
                demoShouldResetDisplay = true;
                updateDemoDisplay();
            }
        }

        function demoScientific(func) {
            const value = parseFloat(demoCurrentInput);
            let result;

            switch(func) {
                case 'sin': result = Math.sin(value * Math.PI / 180); break;
                case 'cos': result = Math.cos(value * Math.PI / 180); break;
                case 'tan': result = Math.tan(value * Math.PI / 180); break;
                case 'sqrt': result = Math.sqrt(Math.abs(value)); break;
            }

            demoCurrentInput = result.toString();
            demoShouldResetDisplay = true;
            updateDemoDisplay();
            updateDemoResult(`${func}(${value}) = ${result}`);
        }

        function demoMemory(action) {
            const value = parseFloat(demoCurrentInput) || 0;

            switch(action) {
                case 'clear':
                    demoMemory = 0;
                    updateDemoResult('Memory cleared');
                    break;
                case 'add':
                    demoMemory += value;
                    updateDemoResult(`Added ${value} to memory (Total: ${demoMemory})`);
                    break;
                case 'subtract':
                    demoMemory -= value;
                    updateDemoResult(`Subtracted ${value} from memory (Total: ${demoMemory})`);
                    break;
                case 'recall':
                    demoCurrentInput = demoMemory.toString();
                    updateDemoDisplay();
                    updateDemoResult(`Recalled ${demoMemory} from memory`);
                    break;
            }
        }

        function updateDemoResult(message) {
            document.getElementById('demo-result').textContent = message;
        }

        // Keyboard shortcuts for demo
        document.addEventListener('keydown', function(e) {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

            if (e.key >= '0' && e.key <= '9') demoAppend(e.key);
            else if (e.key === '.') demoAppend('.');
            else if (e.key === '+') demoAppend('+');
            else if (e.key === '-') demoAppend('-');
            else if (e.key === '*') demoAppend('*');
            else if (e.key === '/') demoAppend('/');
            else if (e.key === 'Enter') demoCalculate();
            else if (e.key === 'Escape') demoClear();
            else if (e.key === 'Backspace') demoBackspace();

            e.preventDefault();
        });

        // Initialize demo
        updateDemoDisplay();

        // Back to Top Button
        window.addEventListener('scroll', function() {
            const backToTop = document.getElementById('backToTop');
            if (window.pageYOffset > 300) {
                backToTop.style.display = 'block';
            } else {
                backToTop.style.display = 'none';
            }
        });

        document.getElementById('backToTop').addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Navigation active state
        const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
        const sections = document.querySelectorAll('section[id]');

        window.addEventListener('scroll', function() {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop - 60) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>

1,818 lines•71.6 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size