misfinanzas/templates/base.html

<!DOCTYPE html>
<html lang="es">

{% include "_cabecera.html" %}

<body>

    {% include "_menu.html" %}

    {%block interface %}
    <section id="interface">
        <div class="navigation">
            <div class="n1">
                <div>
                <i id="menu-btn" class="bi bi-list""></i>               
                </div>
                <div class="search">
                <i class="bi bi-search"></i>              
                    <input type="text" placeholder="Buscar...">
                </div>
            </div>

            <div class="profile">
                <i class="bi bi-bell"></i>            
                <img src="static/images/auster.jpg" alt="">
            </div>
        </div>

        <h3 class="i-name">
            Panel principal
        </h3>

        <div class="values">
            <div class="val-box">
                <i class="bi bi-people-fill"></i>         
                <div>
                <h3>Usuarios</h3>
                <span>Los usuarios</span>
                </div>
            </div>

            <div class="val-box">
                <i class="bi bi-calendar-event-fill"></i>            
                <div>
                <h3>Pozos</h3>
                <span>Los pozos</span>
                </div>
            </div>

            <div class="val-box">
                <i class="bi bi-bookmark-plus-fill"></i>            
                <div>
                <h3>Reservas</h3>
                <span>Los reservas</span>
                </div>
            </div>

            <div class="val-box">
                <i class="bi bi-camera-fill"></i>
                <div>
                <h3>Fiestas</h3>
                <span>Los fiestas</span>
                </div>
            </div>
        </div>

        <div class="board">
            <table width="100%">
                <thead>
                <tr>
                    <td>Nombre</td>
                    <td>Descripción</td>
                    <td>Estado</td>
                    <td>Puesto</td>
                    <td></td>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td class="people"> 
                        <img src="static/images/cercas.jpg" alt="">
                        <div class="people-de">
                            <h5>Cercas</h5>
                            <p>creylopez@yahoo.es</p>
                        </div>
                    </td>
                    <td class="people-des">
                        <h5>Admin</h5>
                        <p>Gestor</p>
                    </td>
                    <td class="active">
                        <p>Activo</p>
                    </td>
                    <td class="role">
                        <p>Administrador</p>
                    </td>
                    <td class="edit"><a href="#">Edit</td>
                </tr>
                <tr>
                    <td class="people"> 
                        <img src="static/images/auster.jpg" alt="">
                        <div class="people-de">
                            <h5>Auster</h5>
                            <p>creylopez@yahoo.es</p>
                        </td>
                    <td class="people-des">
                        <h5>Admin</h5>
                        <p>Gestor</p>
                    </td>
                    <td class="active">
                        <p>Activo</p>
                    </td>
                    <td class="role">
                        <p>Administrador</p>
                    </td>
                    <td class="edit"><a href="#">Edit</td>
                </tr>               
                <tr>
                    <td class="people"> 
                        <img src="static/images/bruce.jpg" alt="">
                        <div class="people-de">
                            <h5>Bruce</h5>
                            <p>creylopez@yahoo.es</p>
                        </td>
                    <td class="people-des">
                        <h5>Admin</h5>
                        <p>Gestor</p>
                    </td>
                    <td class="active">
                        <p>Activo</p>
                    </td>
                    <td class="role">
                        <p>Administrador</p>
                    </td>
                    <td class="edit"><a href="#">Edit</td>
                </tr>               
                <tr>
                    <td class="people"> 
                        <img src="static/images/gravatar-tino.jpeg" alt="">
                        <div class="people-de">
                            <h5>Reymota</h5>
                            <p>creylopez@yahoo.es</p>
                        </td>
                    <td class="people-des">
                        <h5>Admin</h5>
                        <p>Gestor</p>
                    </td>
                    <td class="active">
                        <p>Activo</p>
                    </td>
                    <td class="role">
                        <p>Administrador</p>
                    </td>
                    <td class="edit"><a href="#">Edit</td>
                </tr>               
                <tr>
                    <td class="people"> 
                        <img src="static/images/Imagen generada.jpeg" alt="">
                        <div class="people-de">
                            <h5>Oldman</h5>
                            <p>creylopez@yahoo.es</p>
                        </td>
                    <td class="people-des">
                        <h5>Admin</h5>
                        <p>Gestor</p>
                    </td>
                    <td class="active">
                        <p>Activo</p>
                    </td>
                    <td class="role">
                        <p>Administrador</p>
                    </td>
                    <td class="edit"><a href="#">Edit</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
   {% endblock %}

   <script>
      $('#menu-btn').click(function() {
         $('#menu').toggleClass('active');
         $('#interface').toggleClass('active');
      });
   </script>
</body>

</html>