From 94b1c1a9dea6b3b2bcf50b73edd5c70c3a2eb351 Mon Sep 17 00:00:00 2001
From: stone-24tch3r <100294019+stone-w4tch3r@users.noreply.github.com>
Date: Tue, 24 Sep 2024 21:20:20 +0500
Subject: [PATCH] main done (without modal)

---
 front/main.html  | 134 +++++++++++++++++++++++++----------------------
 front/styles.css |  13 +++--
 2 files changed, 79 insertions(+), 68 deletions(-)

diff --git a/front/main.html b/front/main.html
index f252b42..5fe4317 100644
--- a/front/main.html
+++ b/front/main.html
@@ -18,69 +18,77 @@
 </div>
 <div class="main-container">
     <h1 class="main-container-header">Certificate Management</h1>
-    <table class="certs-table">
-        <thead class="certs-table-header">
-        <tr>
-            <th>Cert Name</th>
-            <th>Status</th>
-            <th>Actions</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-            <td>Cert 1</td>
-            <td>Active</td>
-            <td class="actions-container-td">
-                <button class="action-button">Renew</button>
-                <button class="action-button">Revoke</button>
-                <button class="action-button">View</button>
-                <button class="action-button">Do smth else</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 2</td>
-            <td>Expired</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 3</td>
-            <td>Test</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 4</td>
-            <td>Test</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 5</td>
-            <td>Test</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 6</td>
-            <td>Test</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        <tr>
-            <td>Cert 7</td>
-            <td>Test</td>
-            <td class="actions-container-td">
-                <button class="action-button">Delete</button>
-            </td>
-        </tr>
-        </tbody>
-    </table>
+    <div class="certs-table-container">
+        <table class="certs-table">
+            <thead class="certs-table-header">
+            <tr>
+                <th>Cert Name</th>
+                <th>Status</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>Cert 1</td>
+                <td>Active</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Renew</button>
+                    <button class="action-button">Revoke</button>
+                    <button class="action-button">View</button>
+                    <button class="action-button">Do smth else</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 2</td>
+                <td>Expired</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                    <button class="action-button">Delete</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 3</td>
+                <td>Test</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                    <button class="action-button">Yes</button>
+                    <button class="action-button">No no no</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 5</td>
+                <td>Test</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 4</td>
+                <td>Test</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                    <button class="action-button">I</button>
+                    <button class="action-button">Love</button>
+                    <button class="action-button">You</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 6</td>
+                <td>Test</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Cert 7</td>
+                <td>Test</td>
+                <td class="actions-container-td">
+                    <button class="action-button">Delete</button>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
     <button id="generateCertBtn" class="generate-button">Generate New Certificate</button>
 </div>
 
diff --git a/front/styles.css b/front/styles.css
index b933dc4..f4fa854 100644
--- a/front/styles.css
+++ b/front/styles.css
@@ -35,7 +35,6 @@ body {
     }
 }
 
-
 .nav-button {
     background-color: #aa0000;
     color: white;
@@ -70,7 +69,7 @@ body {
     margin-top: 0;
 }
 
-.certs-table {
+.certs-table-container {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
@@ -79,6 +78,10 @@ body {
     padding: 10px;
 }
 
+.certs-table {
+    width: 100%;
+}
+
 th, td {
     border: 1px solid #ddd;
     padding: 8px;
@@ -104,13 +107,13 @@ th {
 }
 
 @media screen and (min-width: 451px) and (max-width: 600px) {
-    .actions-container-td:has(button:nth-child(3)) {
+    .actions-container-td {
         flex-direction: column;
         align-items: center;
     }
-    
+
     .actions-container-td button {
-        width: 70%; 
+        width: 70%;
     }
 }