help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
python-pattern-generator
/
templates
RSK World
python-pattern-generator
Python Number Pattern Generator - 22 Pattern Types + Fractals + Mathematical Algorithms + GUI & Web Interface + REST API + Educational Design
templates
  • index.html9 KB
index.html
templates/index.html
Raw Download
Find: Go to:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Number Pattern Generator - Web Interface</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://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-magic"></i> 🔢 Python Number Pattern Generator
            </a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text">
                    Developed by <strong>Molla Samser</strong> (RSK World) |
                    Designed by <strong>Rima Khatun</strong>
                </span>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <div class="row">
            <!-- Control Panel -->
            <div class="col-md-4">
                <div class="card shadow">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cogs"></i> Pattern Controls
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Pattern Selection -->
                        <div class="mb-3">
                            <label for="patternSelect" class="form-label">
                                <i class="fas fa-th-large"></i> Pattern Type
                            </label>
                            <select class="form-select" id="patternSelect">
                                {% for key, value in patterns.items() %}
                                <option value="{{ key }}">{{ value }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Search -->
                        <div class="mb-3">
                            <label for="patternSearch" class="form-label">
                                <i class="fas fa-search"></i> Search Patterns
                            </label>
                            <input type="text" class="form-control" id="patternSearch"
                                   placeholder="Type to filter patterns...">
                        </div>

                        <!-- Parameters -->
                        <div class="mb-3">
                            <label for="sizeInput" class="form-label">
                                <i class="fas fa-expand-arrows-alt"></i> Size (1-50)
                            </label>
                            <input type="number" class="form-control" id="sizeInput"
                                   value="5" min="1" max="50">
                        </div>

                        <div class="mb-3" id="startNumGroup">
                            <label for="startNumInput" class="form-label">
                                <i class="fas fa-play"></i> Start Number (0-1000)
                            </label>
                            <input type="number" class="form-control" id="startNumInput"
                                   value="1" min="0" max="1000">
                        </div>

                        <!-- Buttons -->
                        <div class="d-grid gap-2">
                            <button class="btn btn-success btn-lg" id="generateBtn">
                                <i class="fas fa-play"></i> Generate Pattern
                            </button>
                            <button class="btn btn-info" id="analyzeBtn">
                                <i class="fas fa-chart-bar"></i> Analyze Pattern
                            </button>
                            <button class="btn btn-warning" id="exportTxtBtn">
                                <i class="fas fa-download"></i> Export as Text
                            </button>
                            <button class="btn btn-secondary" id="exportJsonBtn">
                                <i class="fas fa-code"></i> Export as JSON
                            </button>
                        </div>

                        <!-- Statistics -->
                        <div class="mt-4" id="statsPanel" style="display: none;">
                            <h6 class="text-info">
                                <i class="fas fa-chart-pie"></i> Pattern Statistics
                            </h6>
                            <div class="small text-muted">
                                <div id="statsContent"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- API Information -->
                <div class="card shadow mt-3">
                    <div class="card-header bg-secondary text-white">
                        <h6 class="card-title mb-0">
                            <i class="fas fa-code"></i> REST API
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="small mb-2">Access patterns programmatically:</p>
                        <code class="small d-block bg-light p-2 rounded">
GET /api/generate/{pattern_type}?size=5&start_num=1
                        </code>
                        <p class="small mt-2 mb-0">
                            <a href="/api/patterns" target="_blank" class="text-decoration-none">
                                <i class="fas fa-external-link-alt"></i> View API documentation
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Output Panel -->
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-terminal"></i> Pattern Output
                        </h5>
                        <div>
                            <button class="btn btn-sm btn-outline-light" id="copyBtn">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                            <button class="btn btn-sm btn-outline-light" id="clearBtn">
                                <i class="fas fa-trash"></i> Clear
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <pre id="patternOutput" class="pattern-display">
<div class="text-center text-muted py-5">
    <i class="fas fa-magic fa-3x mb-3"></i>
    <h4>Welcome to Pattern Generator!</h4>
    <p>Select a pattern type and click "Generate Pattern" to get started.</p>
</div>
                        </pre>
                    </div>
                </div>

                <!-- Loading Indicator -->
                <div class="text-center mt-3" id="loadingIndicator" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Generating...</span>
                    </div>
                    <p class="mt-2 text-muted">Generating pattern...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white mt-5 py-4">
        <div class="container text-center">
            <p class="mb-2">
                <strong>© {{ current_year }} RSK World. All rights reserved.</strong>
            </p>
            <p class="mb-2">
                Developed with <i class="fas fa-heart text-danger"></i> for educational purposes
            </p>
            <p class="mb-0">
                <a href="https://rskworld.in" class="text-white text-decoration-none me-3" target="_blank">
                    <i class="fas fa-globe"></i> rskworld.in
                </a>
                <a href="mailto:hello@rskworld.in" class="text-white text-decoration-none me-3">
                    <i class="fas fa-envelope"></i> Contact
                </a>
                <a href="https://github.com/rskworld" class="text-white text-decoration-none" target="_blank">
                    <i class="fab fa-github"></i> GitHub
                </a>
            </p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
191 lines•9 KB
markup

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer