{% extends 'base.html' %}
{% load static %}

{% block head %}
  <link href="{% static 'css/home/home.css' %}" rel="stylesheet">
{% endblock head %}

{% block content %}
  
<div class="mainContent">

  <div class="content">

      <!-- icono -->
    <img src="{% static 'img/inicio-on.png' %}" alt="Medición" class="iconContent">

    <!-- Título -->
    <p class="title"> BIENVENIDO/A </p>

    <div class="cards">

      <div class="row">
        <div class="card purple">
          <img class ="icon" src="{% static 'img/medition-on.png' %}" alt="Medición" class="iconContent">
          <h1 class="action white">Hacer Experimento</h1>
          <h1 class="description white">Medición de la interfaz de un ensayo de sedimentación</h1>
          <a href="{% url 'medition' %}" class="buttonDesign white">Click acá</a>
        </div>
        <div class="card">
          <img class ="icon" src="{% static 'img/historico-off.png' %}" alt="Medición" class="iconContent">
          <h1 class="action purple">Ver Historial</h1>
          <h1 class="description purple">Registro de los experimentos realizados</h1>
          <a  href="{% url 'historic' %}" class="buttonDesign purple">Click acá</a>
        </div>
      </div>
      
      <div class="row">
        <div class="card">
          <img class ="icon" src="{% static 'img/monitoreo-off.svg' %}" alt="Medición" class="iconContent">
          <h1 class="action purple">Monitoreo</h1>
          <h1 class="description purple">Funciones avanzadas de monitoreo y control del equipo</h1>
          <a href="{% url 'support' %}" class="buttonDesign purple">Click acá</a>
        </div>
        <div class="card">
          <img class ="icon" src="{% static 'img/ayuda-off.png' %}" alt="Medición" class="iconContent">
          <h1 class="action purple">Ayuda</h1>
          <h1 class="description purple">Información de ayuda para el uso de la plataforma</h1>
          <a href="{% url 'help' %}" class="buttonDesign purple">Click acá</a>
        </div>
      </div>
      

    </div>

  </div>

</div>


{% endblock content %}