{% extends 'doc/es/base.html' %} {% load static %} {% block content %}

Blitz Work provee tres plantillas base, una para trabajo en línea y dos para trabajo sin conexión.

Las plantillas que ofrece Blitz Work utilizan las siguientes bibliotecas y frameworks:

  1. Plantilla con conexión.
    {% verbatim %}
                
    <!DOCTYPE html>
    <html lang="{% block language %}en{% endblock language %}">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
            <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
            <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/blitz.css' %}">
            <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <script src="{% static 'js/blitz.js' %}"></script>
            {% block extra_assets %}{% endblock %}
            <title>
                {% block title %}{% endblock %}
            </title>
        </head>
        
        <body>
            {% block main %}{% block content %}{% endblock %}{% endblock %}
        </body>
    </html>
                
            
    {% endverbatim %}
  2. Plantilla sin conexión 1.
        
        {% verbatim %}
    <!DOCTYPE html>
    <html lang="{% block language %}en{% endblock language %}">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/select2.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/blitz.css' %}">
            <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
            <script src="{% static 'js/popper.min.js' %}"></script>
            <script src="{% static 'js/bootstrap.min.js' %}"></script>
            <script src="{% static 'js/select2.min.js' %}"></script>
            <script src="{% static 'js/blitz.js' %}"></script>
            {% block extra_assets %}{% endblock %}
            <title>
                {% block title %}{% endblock %}
            </title>
        </head>
    
        <body>
            {% block main %}{% block content %}{% endblock %}{% endblock %}
        </body>
    </html>
        {% endverbatim %}
        
    
  3. Plantilla sin conexión 2. Esta platilla incluye el modo oscuro.

    Para alternar entre modo oscuro y el modo normal solo es necesario cambiar el class del body. Los valores posibles son ("bootstrap" y "bootstrap-dark").

    Es posible usar también el switch por defecto de Blitz Work incluyendo la plantilla de switch.

        
        {% verbatim %}
    <!DOCTYPE html>
    <html lang="{% block language %}en{% endblock language %}">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="{% static 'css/toggle-bootstrap.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/toggle-bootstrap-dark.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/select2.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/select2-bootstrap-dark.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/blitz.css' %}">
            <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
            <script src="{% static 'js/popper.min.js' %}"></script>
            <script src="{% static 'js/bootstrap.min.js' %}"></script>
            <script src="{% static 'js/select2.min.js' %}"></script>
            <script src="{% static 'js/blitz.js' %}"></script>
            {% block extra_assets %}{% endblock %}
            <title>
                {% block title %}{% endblock %}
            </title>
        </head>
    
        <body class="{% block theme %}bootstrap{% endblock theme %}">
            {% block main %}{% block content %}{% endblock %}{% endblock %}
        </body>
    </html>
        {% endverbatim %}
        
    

    Incluir el switch.

    
    {% verbatim  %}
    {% include 'dark_mode_switch.html' %}
    {% endverbatim  %}
    

Heredar de estas plantillas.

  1. Plantilla con conexión.
    
    {% verbatim %}
    {% extends 'blitz_base.html' %}
    {% endverbatim %}
    
  2. Plantilla sin conexión 1.
    
    {% verbatim %}
    {% extends 'blitz_base_offline.html' %}
    {% endverbatim %}
    
  3. Plantilla sin conexión 2.
    
    {% verbatim %}
    {% extends 'blitz_base_light_dark.html' %}
    {% endverbatim %}
    
{% endblock content %}