overview.html

  <style>
  .content {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    background-color: #f0f0f0;  

}

.list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  text-align: center;

}

.list li {
    background-color: #ffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 15px;
    min-width: 200px;
    height: 100px;
    font-size: x-large;
    align-content: center;
}
.list li a{
  text-decoration: none;
  color: black;
}
</style> 
</head>
<!-- Script JavaScript pour la fonction de recherche -->

{% extends 'container.html' %} {% block content %}

<div class="content">
  <main>

 
<ul class="list">
  {% for image in images %}
  <li><a href="{{ url_for('overview')}}/{{ image[0] }}">{{ image[0] }}</a> : {{image[1]}}</li>
  {% endfor %}
</ul>

</main>



  
  {% endblock %}