RSK World - Ruby Todo List - Project Files Browser | RSK World - Free Programming Resources & Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby To-Do List Application - Complete Task Management System</title>
    <meta name="description" content="A comprehensive Ruby on Rails to-do list application with task management, categories, file attachments, API, and email notifications.">
    <meta name="keywords" content="Ruby on Rails, To-Do List, Task Management, PostgreSQL, API, Bootstrap">
    <meta name="author" content="Molla Samser">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --info-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --danger-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }

        .hero-section {
            background: var(--primary-gradient);
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: none;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .feature-icon.primary { background: var(--primary-gradient); color: white; }
        .feature-icon.secondary { background: var(--secondary-gradient); color: white; }
        .feature-icon.success { background: var(--success-gradient); color: white; }
        .feature-icon.info { background: var(--info-gradient); color: white; }
        .feature-icon.warning { background: var(--warning-gradient); color: black; }
        .feature-icon.danger { background: var(--danger-gradient); color: black; }

        .tech-stack {
            background: white;
            border-radius: 15px;
            padding: 3rem;
            margin: 3rem 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .tech-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            border-radius: 25px;
            font-size: 0.875rem;
            font-weight: 500;
            background: var(--primary-gradient);
            color: white;
        }

        .file-tree {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .file-tree ul {
            margin: 0;
            padding-left: 1rem;
        }

        .file-tree li {
            margin: 0.25rem 0;
        }

        .file-tree .folder { color: #007bff; font-weight: 600; }
        .file-tree .file { color: #6c757d; }
        .file-tree .config { color: #28a745; }
        .file-tree .view { color: #e83e8c; }
        .file-tree .controller { color: #fd7e14; }
        .file-tree .model { color: #6f42c1; }

        .demo-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
            margin: 3rem 0;
        }

        .screenshot {
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }

        .screenshot:hover {
            transform: scale(1.05);
        }

        .api-endpoint {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 5px 5px 0;
        }

        .method {
            font-weight: 600;
            color: #007bff;
        }

        .endpoint {
            font-family: 'Courier New', monospace;
            color: #495057;
        }

        .stats-counter {
            font-size: 2.5rem;
            font-weight: 700;
            color: #007bff;
            margin-bottom: 0.5rem;
        }

        .watermark {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.875rem;
            color: #6c757d;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .floating-action {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .floating-action:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

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

            .hero-subtitle {
                font-size: 1rem;
            }

            .watermark {
                position: static;
                margin: 2rem auto;
                display: block;
                text-align: center;
            }

            .floating-action {
                bottom: 20px;
                right: 20px;
                left: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: var(--primary-gradient);">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#home">
                <i class="fas fa-tasks me-2"></i>Ruby To-Do List
            </a>
            <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 ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#technologies">Tech Stack</a></li>
                    <li class="nav-item"><a class="nav-link" href="#files">Files</a></li>
                    <li class="nav-item"><a class="nav-link" href="#demo">Demo</a></li>
                    <li class="nav-item"><a class="nav-link" href="#api">API</a></li>
                    <li class="nav-item"><a class="nav-link" href="#installation">Install</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h1 class="hero-title">Ruby To-Do List</h1>
                    <p class="hero-subtitle">A complete task management application built with Ruby on Rails featuring advanced functionality, modern UI/UX, and comprehensive API support.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="#demo" class="btn btn-light btn-lg px-4">
                            <i class="fas fa-eye me-2"></i>View Demo
                        </a>
                        <a href="#installation" class="btn btn-outline-light btn-lg px-4">
                            <i class="fas fa-download me-2"></i>Get Started
                        </a>
                        <a href="https://github.com" class="btn btn-outline-light btn-lg px-4">
                            <i class="fab fa-github me-2"></i>Source Code
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 text-center mt-4 mt-lg-0">
                    <div class="feature-icon primary mx-auto mb-3" style="width: 120px; height: 120px; font-size: 3rem;">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <div class="stats-counter">2026</div>
                    <p class="mb-0">Latest Version</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Powerful Features</h2>
                <p class="text-muted lead">Everything you need for efficient task management</p>
            </div>

            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon primary">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                        <h5 class="fw-bold">Task Management</h5>
                        <p>Create, edit, delete, and organize tasks with ease. Full CRUD operations with intuitive interfaces.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Create/Edit/Delete Tasks</li>
                            <li><i class="fas fa-check text-success me-1"></i> Priority Levels (Low/Medium/High)</li>
                            <li><i class="fas fa-check text-success me-1"></i> Due Date Scheduling</li>
                            <li><i class="fas fa-check text-success me-1"></i> Completion Tracking</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon secondary">
                            <i class="fas fa-search"></i>
                        </div>
                        <h5 class="fw-bold">Advanced Search</h5>
                        <p>Find tasks instantly with PostgreSQL full-text search. Filter by title, description, and metadata.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Real-time Search</li>
                            <li><i class="fas fa-check text-success me-1"></i> PostgreSQL Full-text</li>
                            <li><i class="fas fa-check text-success me-1"></i> Debounced Input</li>
                            <li><i class="fas fa-check text-success me-1"></i> Prefix Matching</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon success">
                            <i class="fas fa-tags"></i>
                        </div>
                        <h5 class="fw-bold">Smart Categories</h5>
                        <p>Organize tasks with custom categories and color coding. Default categories included.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Custom Categories</li>
                            <li><i class="fas fa-check text-success me-1"></i> Color Coding</li>
                            <li><i class="fas fa-check text-success me-1"></i> Task Statistics</li>
                            <li><i class="fas fa-check text-success me-1"></i> Default Categories</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon info">
                            <i class="fas fa-paperclip"></i>
                        </div>
                        <h5 class="fw-bold">File Attachments</h5>
                        <p>Attach files, images, and documents to tasks. Secure file storage with Active Storage.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Multiple File Types</li>
                            <li><i class="fas fa-check text-success me-1"></i> Secure Storage</li>
                            <li><i class="fas fa-check text-success me-1"></i> Download Links</li>
                            <li><i class="fas fa-check text-success me-1"></i> File Validation</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon warning">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h5 class="fw-bold">Email Notifications</h5>
                        <p>Automated email reminders for due and overdue tasks. Background job processing.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Due Date Reminders</li>
                            <li><i class="fas fa-check text-success me-1"></i> Overdue Alerts</li>
                            <li><i class="fas fa-check text-success me-1"></i> Background Jobs</li>
                            <li><i class="fas fa-check text-success me-1"></i> HTML/Text Templates</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon danger">
                            <i class="fas fa-code"></i>
                        </div>
                        <h5 class="fw-bold">REST API</h5>
                        <p>Complete JSON API for mobile app integration. All CRUD operations available.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Full REST API</li>
                            <li><i class="fas fa-check text-success me-1"></i> JSON Responses</li>
                            <li><i class="fas fa-check text-success me-1"></i> Authentication</li>
                            <li><i class="fas fa-check text-success me-1"></i> Mobile Integration</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technologies Section -->
    <section id="technologies" class="tech-stack">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Technology Stack</h2>
                <p class="text-muted lead">Built with modern technologies and best practices</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Backend</h4>
                    <div>
                        <span class="tech-badge">Ruby 3.3.10</span>
                        <span class="tech-badge">Rails 7.1.3</span>
                        <span class="tech-badge">PostgreSQL</span>
                        <span class="tech-badge">Devise</span>
                        <span class="tech-badge">pg_search</span>
                        <span class="tech-badge">Active Storage</span>
                        <span class="tech-badge">Sidekiq</span>
                        <span class="tech-badge">Redis</span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Frontend</h4>
                    <div>
                        <span class="tech-badge">Bootstrap 5</span>
                        <span class="tech-badge">JavaScript</span>
                        <span class="tech-badge">jQuery</span>
                        <span class="tech-badge">SCSS</span>
                        <span class="tech-badge">Font Awesome</span>
                        <span class="tech-badge">Google Fonts</span>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Deployment</h4>
                    <div>
                        <span class="tech-badge">Docker</span>
                        <span class="tech-badge">Docker Compose</span>
                        <span class="tech-badge">Heroku</span>
                        <span class="tech-badge">Puma</span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Development</h4>
                    <div>
                        <span class="tech-badge">RSpec</span>
                        <span class="tech-badge">Capybara</span>
                        <span class="tech-badge">Factory Bot</span>
                        <span class="tech-badge">Shoulda Matchers</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- File Structure Section -->
    <section id="files" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Project Structure</h2>
                <p class="text-muted lead">Complete file organization with 200+ files</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="file-tree">
                        <div class="folder">ruby-todo-list/</div>
                        <ul>
                            <li class="folder">app/</li>
                            <ul>
                                <li class="folder">assets/</li>
                                <ul>
                                    <li class="folder">stylesheets/ <span class="text-muted">- SCSS styles</span></li>
                                    <li class="folder">javascripts/ <span class="text-muted">- JavaScript enhancements</span></li>
                                    <li class="config">config/manifest.js <span class="text-muted">- Asset manifest</span></li>
                                </ul>
                                <li class="folder">controllers/ <span class="text-muted">- MVC controllers</span></li>
                                <ul>
                                    <li class="folder">api/v1/ <span class="text-muted">- REST API endpoints</span></li>
                                    <li class="controller">tasks_controller.rb</li>
                                    <li class="controller">categories_controller.rb</li>
                                    <li class="controller">application_controller.rb</li>
                                </ul>
                                <li class="folder">helpers/ <span class="text-muted">- View helpers</span></li>
                                <ul>
                                    <li>application_helper.rb</li>
                                    <li>tasks_helper.rb</li>
                                    <li>categories_helper.rb</li>
                                </ul>
                                <li class="folder">jobs/ <span class="text-muted">- Background jobs</span></li>
                                <ul>
                                    <li>task_notification_job.rb</li>
                                </ul>
                                <li class="folder">mailers/ <span class="text-muted">- Email functionality</span></li>
                                <ul>
                                    <li>task_mailer.rb</li>
                                    <li>application_mailer.rb</li>
                                </ul>
                                <li class="folder">models/ <span class="text-muted">- Data models</span></li>
                                <ul>
                                    <li class="model">user.rb</li>
                                    <li class="model">task.rb</li>
                                    <li class="model">category.rb</li>
                                </ul>
                                <li class="folder">views/ <span class="text-muted">- Templates</span></li>
                                <ul>
                                    <li class="folder">layouts/ <span class="view">- Application layout</span></li>
                                    <li class="folder">tasks/ <span class="view">- Task views</span></li>
                                    <li class="folder">categories/ <span class="view">- Category views</span></li>
                                    <li class="folder">devise/ <span class="view">- Authentication views</span></li>
                                    <li class="folder">task_mailer/ <span class="view">- Email templates</span></li>
                                </ul>
                            </ul>
                            <li class="folder">config/ <span class="text-muted">- Configuration files</span></li>
                            <ul>
                                <li class="config">application.rb</li>
                                <li class="config">database.yml</li>
                                <li class="config">routes.rb</li>
                                <li class="config">puma.rb</li>
                                <li class="folder">environments/</li>
                                <li class="folder">initializers/</li>
                                <li class="folder">locales/</li>
                            </ul>
                            <li class="folder">db/ <span class="text-muted">- Database files</span></li>
                            <ul>
                                <li class="folder">migrate/ <span class="text-muted">- Database migrations</span></li>
                                <li>schema.rb</li>
                            </ul>
                            <li class="folder">lib/ <span class="text-muted">- Library code</span></li>
                            <ul>
                                <li class="folder">tasks/ <span class="text-muted">- Rake tasks</span></li>
                            </ul>
                            <li class="folder">test/ <span class="text-muted">- Test suite</span></li>
                            <li class="folder">public/ <span class="text-muted">- Static assets</span></li>
                            <li class="folder">tmp/ <span class="text-muted">- Temporary files</span></li>
                            <li class="folder">vendor/ <span class="text-muted">- Third-party code</span></li>
                            <li>Gemfile & Gemfile.lock</li>
                            <li>README.md</li>
                            <li class="config">Dockerfile</li>
                            <li class="config">docker-compose.yml</li>
                            <li class="config">Procfile</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">200+</div>
                        <p class="text-muted">Total Files</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">15+</div>
                        <p class="text-muted">Models & Controllers</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">25+</div>
                        <p class="text-muted">Views & Templates</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Demo Section -->
    <section id="demo" class="demo-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Live Demo</h2>
                <p class="lead">Experience the application in action</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <div class="screenshot mb-4">
                        <img src="https://via.placeholder.com/800x500/667eea/white?text=Ruby+To-Do+List+Dashboard" alt="Dashboard Screenshot" class="img-fluid rounded">
                    </div>
                    <p class="text-white-50 mb-4">Modern dashboard with task statistics, search functionality, and intuitive navigation</p>

                    <div class="d-flex gap-3 justify-content-center flex-wrap">
                        <a href="./ruby-todo-list/" class="btn btn-light btn-lg px-4" target="_blank">
                            <i class="fas fa-external-link-alt me-2"></i>Live Demo
                        </a>
                        <a href="https://github.com" class="btn btn-outline-light btn-lg px-4" target="_blank">
                            <i class="fab fa-github me-2"></i>View Source
                        </a>
                        <a href="./ruby-todo-list/ruby-todo-list.zip" class="btn btn-outline-light btn-lg px-4" download>
                            <i class="fas fa-download me-2"></i>Download
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API Section -->
    <section id="api" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">REST API</h2>
                <p class="text-muted lead">Complete JSON API for mobile and third-party integrations</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Tasks API</h4>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/tasks</span>
                        <p class="mb-0 small text-muted">List all user tasks</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">POST</span>
                        <span class="endpoint">/api/v1/tasks</span>
                        <p class="mb-0 small text-muted">Create new task</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">PATCH</span>
                        <span class="endpoint">/api/v1/tasks/:id</span>
                        <p class="mb-0 small text-muted">Update task</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">DELETE</span>
                        <span class="endpoint">/api/v1/tasks/:id</span>
                        <p class="mb-0 small text-muted">Delete task</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Categories API</h4>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/categories</span>
                        <p class="mb-0 small text-muted">List all categories</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/categories/:id</span>
                        <p class="mb-0 small text-muted">Get category details</p>
                    </div>
                    <h5 class="fw-bold mt-4 mb-3">Authentication</h5>
                    <p class="text-muted">All API endpoints require user authentication via Devise tokens.</p>
                    <code class="d-block p-2 bg-light rounded">Authorization: Bearer &lt;user_token&gt;</code>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Quick Start</h2>
                <p class="text-muted lead">Get the application running in minutes</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Docker Installation</h4>
                    <div class="bg-white p-4 rounded shadow-sm">
                        <pre class="mb-0"><code># Clone and navigate
git clone &lt;repository-url&gt;
cd ruby-todo-list

# Start with Docker Compose
docker-compose up --build

# Setup database
docker-compose exec app rails db:migrate

# Visit http://localhost:3000</code></pre>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Manual Installation</h4>
                    <div class="bg-white p-4 rounded shadow-sm">
                        <pre class="mb-0"><code># Install dependencies
bundle install
npm install

# Setup database
rails db:create
rails db:migrate

# Start the server
rails server

# Visit http://localhost:3000</code></pre>
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <a href="./README.md" class="btn btn-primary btn-lg">
                    <i class="fas fa-book me-2"></i>Full Documentation
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">
                        <i class="fas fa-tasks me-2"></i>Ruby To-Do List
                    </h5>
                    <p class="text-muted">A complete task management application built with Ruby on Rails, featuring modern UI/UX, comprehensive API, and enterprise-level functionality.</p>
                    <div class="d-flex gap-2">
                        <a href="https://github.com" class="btn btn-outline-light btn-sm">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="./ruby-todo-list/ruby-todo-list.zip" class="btn btn-outline-light btn-sm" download>
                            <i class="fas fa-download"></i>
                        </a>
                        <a href="./README.md" class="btn btn-outline-light btn-sm">
                            <i class="fas fa-book"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">Features</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Task Management</li>
                        <li><i class="fas fa-check text-success me-2"></i>Priority Levels</li>
                        <li><i class="fas fa-check text-success me-2"></i>Search & Categories</li>
                        <li><i class="fas fa-check text-success me-2"></i>File Attachments</li>
                        <li><i class="fas fa-check text-success me-2"></i>Email Notifications</li>
                        <li><i class="fas fa-check text-success me-2"></i>REST API</li>
                    </ul>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">Technologies</h5>
                    <div class="d-flex flex-wrap gap-1">
                        <span class="badge bg-primary">Ruby 3.3.10</span>
                        <span class="badge bg-primary">Rails 7.1.3</span>
                        <span class="badge bg-success">PostgreSQL</span>
                        <span class="badge bg-info">Bootstrap 5</span>
                        <span class="badge bg-warning">Docker</span>
                        <span class="badge bg-danger">API Ready</span>
                    </div>
                    <h6 class="fw-bold mt-3 mb-2">Author</h6>
                    <p class="mb-1"><strong>Molla Samser</strong></p>
                    <p class="small text-muted mb-1">
                        <i class="fas fa-envelope me-1"></i>help@rskworld.in<br>
                        <i class="fas fa-phone me-1"></i>+91 93305 39277
                    </p>
                    <p class="small text-muted">
                        <i class="fas fa-map-marker-alt me-1"></i>Nutanhat, Mongolkote<br>
                        Purba Burdwan, West Bengal, India, 713147
                    </p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p class="mb-0">&copy; 2026 Ruby To-Do List Application. All rights reserved.</p>
                <p class="small text-muted mt-1">Created with ❤️ by Molla Samser</p>
            </div>
        </div>
    </footer>

    <!-- Watermark -->
    <div class="watermark">
        <i class="fas fa-code me-1"></i>rskworld.in
    </div>

    <!-- Floating Action Button -->
    <button class="floating-action" onclick="scrollToTop()">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Scroll to top function
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // Navbar background change on scroll
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.style.background = 'rgba(102, 126, 234, 0.95)';
                navbar.style.backdropFilter = 'blur(10px)';
            } else {
                navbar.style.background = 'var(--primary-gradient)';
                navbar.style.backdropFilter = 'none';
            }
        });

        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe feature cards
        document.querySelectorAll('.feature-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });

        // Stats counter animation
        function animateCounters() {
            const counters = document.querySelectorAll('.stats-counter');
            counters.forEach(counter => {
                const target = parseInt(counter.textContent);
                let current = 0;
                const increment = target / 100;
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        counter.textContent = target;
                        clearInterval(timer);
                    } else {
                        counter.textContent = Math.floor(current);
                    }
                }, 20);
            });
        }

        // Trigger counter animation when stats section is visible
        const statsSection = document.getElementById('files');
        if (statsSection) {
            const statsObserver = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        animateCounters();
                        statsObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });
            statsObserver.observe(statsSection);
        }
    </script>
</body>
</html>

883 lines•39.4 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size