overview_img.html

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

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

}
button{
      padding: 12px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(145deg, #4caf50, #66bb6a);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
.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: 200px;
    font-size: x-large;
    align-content: center;
}
.list li a{
  text-decoration: none;
  color: black;
}</style>
  <div class="content">
    <h1>{{dirname}}</h1>
      {% if data_label["message"] == True %}
        <a href="{{ url_for('download_label',projet_name=dirname)}}">
          <button>datasets download</button>
        </a>
      {% endif %}
      




      <ul class="list">
        {% for image in images %}
        <li><a href="{{ url_for('labelling',pathname=path,dirname=dirname, filename=image, model=model) }}" style="display: flex;flex-direction: column;"> 
                         <img src=" {{ url_for('get_image_thumbnail',pathname=path,dirname=dirname, filename=image) }}" style="height: 90%;"></img>{{image}}</a></li>
        {% endfor %}
      </ul>

    {% endblock %}