tentanto implementar uma modal

gestaoRaul/templates/static/products/css/products.css

@@ -0,0 +1,77 @@
+/* style.css */
+
+.modal {
+  display: none; /* Oculta o modal por padrão */
+  position: fixed; /* Posiciona o modal fixo na tela */
+  z-index: 1; /* Garante que o modal fique acima de outros elementos */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* Permite rolagem se o conteúdo for muito grande */
+  background-color: rgba(0,0,0,0.4); /* Fundo escurecido */
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    max-width: 1100px; /* Define a largura máxima do grid */
+    margin: 0 auto; /* Centraliza o grid na página */
+  }
+
+.card {
+    width: 100%;
+    height: 80px;
+    background-color: #f2f2f2;
+    border-radius: 15px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    line-height: 120px; /* Centraliza o texto verticalmente */
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    transition: transform 0.2s;
+  }
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
+  }
+
+
+  dialog::backdrop {
+    background-color: rgb(0 0 0 / .5);
+  }
+
+  dialog {
+    border: none;
+    border-radius: .5rem;
+    box-shadow: 0 0 1em rgb(0 0 0 / .3);
+    width: 80%;
+  }
+

gestaoRaul/templates/static/products/js/products.js

@@ -0,0 +1,2 @@
+
+