🎨 Flask + Bootstrap: estilos, imágenes y videos

# ============================================================
# controlador.py - Aplicacion Flask con CRUD sobre JSON
# ============================================================
# Este archivo actua como el CONTROLADOR en el patron MVC.
# Gestiona las peticiones HTTP, orquesta la logica de negocio
# (usando el modelo Persona) y renderiza las vistas (templates).
# ============================================================

from flask import Flask, redirect, request, render_template
from models import Persona  # Importamos el modelo para acceder a los datos

app = Flask(__name__)  # Instancia de la aplicacion Flask


# ============================================================
# RUTA PRINCIPAL (READ - Listar todos los contactos)
# ============================================================
@app.route('/', methods=['GET'])
def inicio():
    """
    Pagina de inicio de la aplicacion.
    - Metodo: GET
    - Funcion: Obtiene todas las personas almacenadas en la base de datos JSON
      mediante el metodo leer_contacto('id', 'all') del modelo.
    - Renderiza: index.html pasando el diccionario 'Todos' con todas las personas
      y 'index_ver=0' para que por defecto se muestre la primera persona.
    """
    Todos = Persona.leer_contacto('id', 'all')
    return render_template('index.html', Todos=Todos, index_ver=0)


# ============================================================
# RUTA VER (READ - Mostrar un contacto especifico)
# ============================================================
@app.route('/ver/<int:index>', methods=['GET'])
def ver(index):
    """
    Muestra los detalles completos de una persona en particular.
    - Metodo: GET
    - Parametro URL: index (entero) -> posicion de la persona en el diccionario.
    - Funcion: Recarga la misma vista index.html pero con 'index_ver' igual al
      indice recibido, lo que activa el condicional en la plantilla para mostrar
      solo esa persona.
    """
    Todos = Persona.leer_contacto('id', 'all')
    return render_template('index.html', Todos=Todos, index_ver=index)


# ============================================================
# RUTA EDITAR (UPDATE - Modificar un contacto)
# ============================================================
@app.route('/editar/<int:index>', methods=['GET', 'POST'])
def editar(index):
    """
    Permite modificar los datos de una persona existente.
    - Metodos: GET y POST
    - Parametro URL: index (entero) -> posicion de la persona a editar.
    - GET: Muestra el formulario con los datos actuales de la persona.
    - POST: Recibe los datos del formulario, actualiza el registro en la base de
      datos JSON mediante el modelo, y redirige a la misma vista para reflejar
      los cambios.
    """
    Todos = Persona.leer_contacto('id', 'all')
    if request.method == 'POST':
        # Obtenemos los datos enviados desde el formulario HTML
        id = int(request.form['id'])          # ID oculto de la persona
        Nombre = request.form['Nombre']
        Apellido = request.form['Apellido']
        Apodo = request.form['Apodo']
        Telefono = request.form['Telefono']
        Direccion = request.form['Direccion']

        # Llamamos al modelo para actualizar cada atributo
        Persona.actualizar_contacto(id, 'nombre', Nombre)
        Persona.actualizar_contacto(id, 'apellido', Apellido)
        Persona.actualizar_contacto(id, 'apodo', Apodo)
        Persona.actualizar_contacto(id, 'telefono', Telefono)
        Persona.actualizar_contacto(id, 'direccion', Direccion)
        # Podriamos redirigir a la misma pagina de edicion para mostrar los cambios
        # return redirect(f'/editar/{index}')
    else:
        # Si es GET, solo mostramos el formulario sin procesar nada
        pass

    return render_template('editar_contacto.html', Todos=Todos, index_ver=index)


# ============================================================
# RUTA AGREGAR (CREATE - Crear un nuevo contacto)
# ============================================================
@app.route('/agregar', methods=['GET', 'POST'])
def agregar():
    """
    Permite anadir una nueva persona a la base de datos.
    - Metodos: GET y POST
    - GET: Muestra un formulario vacio para que el usuario ingrese los datos.
    - POST: Recibe los datos del formulario, crea una nueva instancia de Persona
      con esos valores y llama a crear_contacto() para guardarla en el JSON.
      Luego redirige a la misma URL (GET) para recargar la pagina y mostrar la
      lista actualizada con el nuevo contacto.
    """
    Todos = Persona.leer_contacto('id', 'all')
    if request.method == 'POST':
        # Obtenemos los datos del formulario
        Nombre = request.form['Nombre']
        Apellido = request.form['Apellido']
        Apodo = request.form['Apodo']
        Telefono = request.form['Telefono']
        Direccion = request.form['Direccion']

        # Creamos un objeto Persona y lo persistimos
        nuevo_contacto = Persona(Nombre, Apellido, Apodo, Telefono, Direccion)
        nuevo_contacto.crear_contacto()

        # Redirigimos a la misma pagina para que se recargue con la lista actualizada
        return redirect('agregar')
    else:
        pass

    return render_template('agregar_contacto.html', Todos=Todos)


# ============================================================
# RUTA ELIMINAR (DELETE - Borrar un contacto)
# ============================================================
@app.route('/eliminar/<int:id>', methods=['GET'])
def eliminar(id):
    """
    Elimina una persona de la base de datos mediante su ID.
    - Metodo: GET (por simplicidad, aunque lo correcto seria DELETE)
    - Parametro URL: id (entero) -> identificador unico de la persona.
    - Funcion: Llama al metodo eliminar_contacto(id) del modelo y redirige a la
      pagina principal para que se actualice la lista de contactos.
    """
    Persona.eliminar_contacto(id)
    return redirect('/')


# ============================================================
# NUEVA RUTA: GALERIA DE IMAGENES
# ============================================================
@app.route('/galeria')
def galeria():
    """
    Muestra una galeria de imagenes con cards de Bootstrap.
    - Metodo: GET
    - Funcion: Carga una lista de diccionarios con los datos de las imagenes
      y los pasa a la plantilla galeria.html para que Jinja2 genere las cards.
    """
    imagenes = [
        {'titulo': 'Python', 'archivo': 'python-logo.png', 'descripcion': 'El lenguaje mas versatil'},
        {'titulo': 'Flask', 'archivo': 'flask-logo.png', 'descripcion': 'Microframework minimalista'},
        {'titulo': 'Bootstrap', 'archivo': 'bootstrap-logo.png', 'descripcion': 'Framework CSS profesional'},
        {'titulo': 'Jinja2', 'archivo': 'jinja2-logo.png', 'descripcion': 'Motor de plantillas para Flask'},
    ]
    return render_template('galeria.html', imagenes=imagenes)


# ============================================================
# RUTA DE AGRADECIMIENTO (Ejemplo adicional)
# ============================================================
@app.route('/agradecimiento', methods=['GET'])
def agradecer():
    return 'Gracias pythones.net!'


# ============================================================
# INICIO DE LA APLICACION
# ============================================================
if __name__ == '__main__':
    app.run('127.0.0.1', 5000, debug=True)

# ============================================================
# models.py - Modelo de datos para la aplicacion Flask
# ============================================================
# Este archivo actua como el MODELO en el patron MVC.
# Contiene la logica de negocio y el acceso a la base de datos
# (en este caso, un archivo JSON que funciona como almacenamiento persistente).
# ============================================================

import os
import json

# ============================================================
# CONFIGURACION DE LA RUTA DEL ARCHIVO JSON
# ============================================================

# Obtenemos la ruta absoluta del directorio donde se encuentra este script
THIS_FOLDER = os.path.dirname(os.path.abspath(__file__))
# Construimos la ruta al archivo base_de_datos.json dentro de la carpeta /DB/
my_file = os.path.join(THIS_FOLDER + '/DB/' 'base_de_datos.json')


# ============================================================
# FUNCIONES DE ACCESO A DATOS (Persistencia)
# ============================================================

def leer_json():
    """
    Lee el archivo JSON y devuelve su contenido como un diccionario de Python.
    - Abre el archivo en modo lectura ('r').
    - Carga los datos con json.load().
    - Cierra el archivo automaticamente.
    - Retorna el diccionario 'datos'.
    """
    with open(my_file, "r") as f:
        datos = json.load(f)
        f.close()
        return datos

# Cargamos los datos al iniciar el modulo (se ejecuta una sola vez)
datos = leer_json()


def modificar_json():
    """
    Guarda el diccionario 'datos' actualizado en el archivo JSON.
    - Abre el archivo en modo escritura ('w').
    - Escribe los datos con formato indentado (4 espacios) para legibilidad.
    - Cierra el archivo.
    - Esta funcion se llama despues de cada operacion que modifica los datos.
    """
    with open(my_file, "w") as modid:
        json.dump(datos, modid, indent=4)
        modid.close()


# ============================================================
# CLASE PERSONA - REPRESENTA UNA ENTIDAD DEL DOMINIO
# ============================================================

class Persona(object):
    """
    Clase que modela a una persona (contacto) en el directorio telefonico.
    - Atributos: id, nombre, apellido, apodo, telefono, direccion.
    - Proporciona metodos CRUD para gestionar instancias en la base de datos JSON.
    - El 'id' es autoincremental y se gestiona mediante 'contador_id'.
    """

    # Variable de clase que almacena el ultimo ID asignado (se sincroniza con el JSON)
    contador_id = datos["Configuraciones"][0]["contador_id_db"]

    def __init__(self, nombre, apellido, apodo, telefono, direccion):
        """
        Constructor de la clase Persona.
        - Asigna un ID unico tomado de contador_id.
        - Almacena los demas atributos proporcionados.
        - Imprime en consola el ID asignado (util para depuracion).
        """
        print("El contador esta en: ", Persona.contador_id)
        self.id = Persona.contador_id          # ID unico autoincremental
        self.nombre = nombre
        self.apellido = apellido
        self.apodo = apodo
        self.telefono = telefono
        self.direccion = direccion

    # ============================================================
    # METODO CREATE - Crear un nuevo contacto
    # ============================================================

    def crear_contacto(self):
        """
        Guarda la instancia actual como un nuevo registro en la base de datos JSON.
        - Incrementa el contador de IDs en el archivo JSON y en la variable de clase.
        - Convierte la instancia a diccionario (__dict__) y la anade a la lista 'Personas'.
        - Persiste los cambios llamando a modificar_json().
        - Imprime el nuevo valor del contador (para depuracion).
        """
        # Actualizamos el contador en la base de datos
        datos["Configuraciones"][0]["contador_id_db"] += 1
        modificar_json()
        print("El contador esta ahora en: ", datos["Configuraciones"][0]["contador_id_db"])
        Persona.contador_id += 1  # Sincronizamos la variable de clase

        # Creamos una nueva instancia (esto es necesario para que __init__ asigne el ID correcto)
        # Pero aqui reutilizamos la instancia actual: convertimos self a diccionario
        nueva_persona = Persona(
            self.nombre,
            self.apellido,
            self.apodo,
            self.telefono,
            self.direccion
        ).__dict__

        # Anadimos el diccionario a la lista de personas
        datos['Personas'].append(nueva_persona)
        modificar_json()  # Guardamos los cambios

    # ============================================================
    # METODO READ - Leer contactos (busqueda)
    # ============================================================

    def leer_contacto(atr, valor):
        """
        Busca personas segun un atributo y un valor dado.
        - Si valor == 'all': devuelve todas las personas con su indice como clave.
        - Si valor != 'all': busca personas donde el atributo 'atr' sea igual a 'valor'.
        - Retorna un diccionario {indice: persona_diccionario} con los resultados.
        - Este metodo es de clase (@staticmethod de facto) porque no necesita una instancia.
        """
        if valor == 'all':
            # Devuelve todas las personas con su indice como clave
            todas = {}
            for i, persona in enumerate(datos["Personas"]):
                todas[i] = persona
            return todas
        else:
            # Busqueda por atributo especifico
            encontradas = {}
            for persona in datos["Personas"]:
                if persona[atr] == valor:
                    indice = datos["Personas"].index(persona)
                    encontradas[indice] = persona
            return encontradas

    # ============================================================
    # METODO UPDATE - Actualizar un contacto existente
    # ============================================================

    def actualizar_contacto(id, atr, nuevo_valor):
        """
        Actualiza un atributo especifico de una persona identificada por su ID.
        - Itera sobre la lista de personas hasta encontrar el ID.
        - Una vez encontrado, obtiene su indice y modifica el atributo indicado.
        - Persiste los cambios llamando a modificar_json().
        - No retorna nada (la actualizacion se hace in-place).
        """
        for persona in datos["Personas"]:
            if persona["id"] == id:
                print(persona)  # Mostramos el estado anterior (depuracion)
                indice = datos["Personas"].index(persona)
                datos["Personas"][indice][atr] = nuevo_valor
                print(datos["Personas"][indice][atr])  # Mostramos el nuevo valor (depuracion)
                modificar_json()
                break  # Salimos del bucle tras encontrar y actualizar

    # ============================================================
    # METODO DELETE - Eliminar un contacto
    # ============================================================

    def eliminar_contacto(id):
        """
        Elimina la persona con el ID especificado de la base de datos.
        - Itera sobre la lista de personas hasta encontrar el ID.
        - Una vez encontrado, obtiene su indice y lo elimina con pop().
        - Persiste los cambios llamando a modificar_json().
        - Muestra un mensaje en consola con la persona eliminada (depuracion).
        """
        for persona in datos["Personas"]:
            if persona["id"] == id:
                print("Se va a borrar: ", persona)
                indice = datos["Personas"].index(persona)
                datos["Personas"].pop(indice)
                modificar_json()
                break  # Salimos tras eliminar

{
  "Configuraciones": [
    {
      "contador_id_db": 2
    }
  ],
  "Personas": [
    {
      "id": 0,
      "nombre": "Juan",
      "apellido": "Pérez",
      "apodo": "juanpe",
      "telefono": "123456789",
      "direccion": "Calle Falsa 123"
    },
    {
      "id": 1,
      "nombre": "María",
      "apellido": "Gómez",
      "apodo": "mary",
      "telefono": "987654321",
      "direccion": "Avenida Siempreviva 456"
    }
  ]
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Directorio Telefónico{% endblock %}</title>
    
    <!-- Bootstrap CSS (CDN) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
          crossorigin="anonymous">

    <!-- CSS PERSONALIZADO (se carga DESPUES de Bootstrap para sobrescribir) -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    {% include 'header.html' %}  <!-- Barra de navegacion comun -->

    <main class="container mt-4">
        {% block content %}{% endblock %}  <!-- Contenido especifico de cada pagina -->
    </main>

    {% include 'footer.html' %}  <!-- Pie de pagina comun -->

    <!-- Bootstrap JS (jQuery, Popper, Bootstrap) -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
            crossorigin="anonymous"></script>
</body>
</html>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ url_for('inicio') }}">
        <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo" height="40" class="d-inline-block align-top">
        Directorio Online
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item {% if request.endpoint == 'inicio' %}active{% endif %}">
                <a class="nav-link" href="{{ url_for('inicio') }}">Inicio</a>
            </li>
            <li class="nav-item {% if request.endpoint == 'agregar' %}active{% endif %}">
                <a class="nav-link" href="{{ url_for('agregar') }}">Agregar</a>
            </li>
            <li class="nav-item {% if request.endpoint == 'galeria' %}active{% endif %}">
                <a class="nav-link" href="{{ url_for('galeria') }}">Galería</a>
            </li>
            <li class="nav-item {% if request.endpoint == 'soporte' %}active{% endif %}">
                <a class="nav-link" href="#">Soporte</a>
            </li>
        </ul>
    </div>
</nav>

<footer class="text-center py-3 mt-4 border-top">
    <p class="mb-0">&copy; 2026 - Directorio Telefónico con Flask </p>
</footer>

/* ============================================================
   ESTILOS PERSONALIZADOS - Pythones Flask App
   ============================================================ */

/* ---- Barra de navegacion ---- */
.navbar {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navbar .navbar-brand {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: -0.5px;
}

.navbar .navbar-brand:hover {
    color: #27ae60;
}

.navbar .navbar-nav .nav-link {
    color: #555;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 0.5rem 1rem;
}

.navbar .navbar-nav .nav-link:hover {
    color: #27ae60;
}

/* Elemento activo del menu */
.navbar .navbar-nav .nav-item.active .nav-link {
    color: #27ae60;
    font-weight: 600;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 0.3rem;
}

/* ---- Pie de pagina ---- */
footer {
    background-color: #f8f9fa;
    color: #7f8c8d;
    border-top: 1px solid #e0e0e0;
    padding: 20px 0;
    margin-top: 40px;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- Mejoras generales ---- */
body {
    background-color: #fcfcfc;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Tablas con un poco mas de estilo */
.table {
    background-color: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.table thead th {
    background-color: #f1f2f6;
    border-bottom: 2px solid #dcdde1;
    font-weight: 600;
    color: #2c3e50;
}

/* Botones mejorados */
.btn {
    border-radius: 20px;
    padding: 6px 18px;
    font-weight: 500;
    font-size: 0.85rem;
}

.btn-success {
    background-color: #27ae60;
    border-color: #27ae60;
}

.btn-success:hover {
    background-color: #219a52;
    border-color: #219a52;
}

.btn-warning {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #fff;
}

.btn-warning:hover {
    background-color: #d68910;
    border-color: #d68910;
}

.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
}

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

/* Titulos */
h1, h2, h3, h4 {
    color: #2c3e50;
}

h1 {
    font-weight: 700;
    letter-spacing: -1px;
}

h2 {
    font-weight: 600;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Cards con efecto hover */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Alertas y mensajes */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

{% extends "base.html" %}

{% block title %}Inicio - Directorio Telefónico{% endblock %}

{% block content %}

<h1 style="text-align:center;">Directorio Telefónico - Mi primera aplicación en Flask</h1>

<div class="row mt-4">
    <div class="col-md-6">
        <h2>Datos completos de la persona</h2>
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Apodo</th>
                    <th>Teléfono</th>
                    <th>Dirección</th>
                </tr>
            </thead>
            <tbody>
                {% for (index, persona) in Todos.items() %}
                {% if index == index_ver %}
                <tr>
                    <td>{{persona.nombre}}</td>
                    <td>{{persona.apellido}}</td>
                    <td>{{persona.apodo}}</td>
                    <td>{{persona.telefono}}</td>
                    <td>{{persona.direccion}}</td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="col-md-6">
        <h2>Personas</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for (index, persona) in Todos.items() %}
                <tr>
                    <td>{{persona.nombre}}, {{persona.apellido}}</td>
                    <td>
                        <a href="{{url_for('ver', index = index)}}" class="btn btn-sm btn-info">Ver</a>
                        <a href="{{url_for('editar', index = index)}}" class="btn btn-sm btn-warning">Editar</a>
                        <a href="{{url_for('eliminar', id = persona.id)}}" class="btn btn-sm btn-danger">Eliminar</a>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td colspan="2">
                        <a href="{{url_for('agregar')}}" class="btn btn-success btn-block">➕ Agregar contacto</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% extends "base.html" %}

{% block title %}Editar Contacto{% endblock %}

{% block content %}

<div class="row mt-4">
    <div class="col-md-6">
        <h2>Datos completos de la persona</h2>
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Apodo</th>
                    <th>Teléfono</th>
                    <th>Dirección</th>
                </tr>
            </thead>
            <tbody>
                {% for (index, persona) in Todos.items() %}
                {% if index == index_ver %}
                <tr>
                    <td>{{persona.nombre}}</td>
                    <td>{{persona.apellido}}</td>
                    <td>{{persona.apodo}}</td>
                    <td>{{persona.telefono}}</td>
                    <td>{{persona.direccion}}</td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="col-md-6">
        <h2>Personas</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for (index, persona) in Todos.items() %}
                <tr>
                    <td>{{persona.nombre}}, {{persona.apellido}}</td>
                    <td>
                        <a href="{{url_for('ver', index = index)}}" class="btn btn-sm btn-info">Ver</a>
                        <a href="{{url_for('editar', index = index)}}" class="btn btn-sm btn-warning">Editar</a>
                        <a href="{{url_for('eliminar', id = persona.id)}}" class="btn btn-sm btn-danger">Eliminar</a>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td colspan="2">
                        <a href="{{url_for('agregar')}}" class="btn btn-success btn-block">➕ Agregar contacto</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- SECCION DE EDICION (formulario) -->
<div class="row mt-4">
    <div class="col-12">
        <h2>Modificar Persona</h2>
        <h4>Base de datos JSON (Index = {{index_ver}} ID = {{Todos[index_ver].id}})</h4>
        <form action="{{url_for('editar', index = index_ver)}}" method="post">
            <div class="form-row">
                <input type="hidden" name="id" value="{{Todos[index_ver].id}}">
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="Nombre" value="{{Todos[index_ver].nombre}}">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="Apellido" value="{{Todos[index_ver].apellido}}">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="Apodo" value="{{Todos[index_ver].apodo}}">
                </div>
                <div class="form-group col-md-2">
                    <input type="tel" class="form-control" name="Telefono" value="{{Todos[index_ver].telefono}}">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="Direccion" value="{{Todos[index_ver].direccion}}">
                </div>
                <div class="form-group col-md-2">
                    <button type="submit" class="btn btn-primary btn-block">Modificar</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% extends "base.html" %}

{% block title %}Agregar Contacto{% endblock %}

{% block content %}

<div class="row mt-4">
    <div class="col-md-6">
        <h2>Agregar Persona</h2>
        <form action="{{url_for('agregar')}}" method="post">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="text" class="form-control" name="Nombre" placeholder="Nombre">
                </div>
                <div class="form-group col-md-6">
                    <input type="text" class="form-control" name="Apellido" placeholder="Apellido">
                </div>
                <div class="form-group col-md-6">
                    <input type="text" class="form-control" name="Apodo" placeholder="Apodo">
                </div>
                <div class="form-group col-md-6">
                    <input type="tel" class="form-control" name="Telefono" placeholder="Teléfono">
                </div>
                <div class="form-group col-md-12">
                    <input type="text" class="form-control" name="Direccion" placeholder="Dirección">
                </div>
                <div class="form-group col-md-12">
                    <button type="submit" class="btn btn-success btn-block">➕ Agregar contacto</button>
                </div>
            </div>
        </form>
    </div>

    <div class="col-md-6">
        <h2>Personas</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for (index, persona) in Todos.items() %}
                <tr>
                    <td>{{persona.nombre}}, {{persona.apellido}}</td>
                    <td>
                        <a href="{{url_for('ver', index = index)}}" class="btn btn-sm btn-info">Ver</a>
                        <a href="{{url_for('editar', index = index)}}" class="btn btn-sm btn-warning">Editar</a>
                        <a href="{{url_for('eliminar', id = persona.id)}}" class="btn btn-sm btn-danger">Eliminar</a>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td colspan="2">
                        <a href="{{url_for('agregar')}}" class="btn btn-success btn-block">➕ Agregar contacto</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% extends "base.html" %}

{% block title %}Galería de Imágenes{% endblock %}

{% block content %}

<h1 class="text-center my-4">🖼️ Galería de Tecnologías</h1>

<div class="row">
    {% for imagen in imagenes %}
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100 shadow-sm">
            <img src="{{ url_for('static', filename='img/' + imagen.archivo) }}" 
                 class="card-img-top" 
                 alt="{{ imagen.titulo }}"
                 style="height: 200px; object-fit: contain; background: #f8f9fa; padding: 15px;">
            <div class="card-body">
                <h5 class="card-title">{{ imagen.titulo }}</h5>
                <p class="card-text">{{ imagen.descripcion }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Ejemplo de video insertado con autoplay (presentación del logo) -->
<div style="text-align: center; margin: 30px 0;">
    <video autoplay muted loop width="100%" style="max-width: 600px; border-radius: 8px; display: block; margin: 0 auto; background: #000;">
        <source src="{{ url_for('static', filename='video/presentacion.mp4') }}" type="video/mp4">
        Tu navegador no soporta la reproducción de videos.
    </video>
    <p style="font-size: 0.85rem; color: #888; margin-top: 6px;">Presentación del logo (video estático)</p>
</div>

<div class="text-center mt-4">
    <a href="{{ url_for('inicio') }}" class="btn btn-primary">Volver al directorio</a>
</div>

{% endblock %}