Added a dashboard to the main page

Author: Visual-Vincent

GuiStack/Pages/Index.cshtml

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  * 
- * Copyright © Vincent Bengtsson & Contributors 2022
+ * Copyright © Vincent Bengtsson & Contributors 2022-2024
  * https://github.com/Visual-Vincent/GuiStack
  *@
 
@@ -13,4 +13,19 @@
     ViewData["Title"] = "";
 }
 
-<h1>Welcome to GuiStack!</h1>
+<h1>Welcome to GuiStack!</h1>
+
+<div class="gs-dashboard">
+    <a href="/S3" class="gs-dashboard-item">
+        <i class="bi bi-bucket image"></i>
+        <p class="title">S3 Buckets</p>
+    </a>
+    <a href="/SQS" class="gs-dashboard-item">
+        <i class="fa-solid fa-database gs-rotate-270 image"></i>
+        <p class="title">SQS Queues</p>
+    </a>
+    <a href="/SNS" class="gs-dashboard-item">
+        <i class="fa-solid fa-square-envelope image"></i>
+        <p class="title">SNS Topics</p>
+    </a>
+</div>

GuiStack/wwwroot/css/site.css

@@ -240,6 +240,62 @@ a.gs-button:active { background: #005577; }
     background: #4d5054;
 }
 
+.gs-dashboard
+{
+    display: grid;
+    grid-auto-rows: 120px;
+    grid-template-columns: repeat(auto-fit, 120px);
+    grid-gap: 16px;
+}
+
+.gs-dashboard-item
+{
+    display: flex;
+    padding: 8px;
+    background: #404040;
+    box-shadow: #000000 0px 0px 4px 0px;
+    border: 1px solid #585858;
+    border-radius: 16px;
+    text-align: center;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.gs-dashboard-item,
+a.gs-dashboard-item,
+a.gs-dashboard-item:hover,
+a.gs-dashboard-item:active,
+a.gs-dashboard-item:visited
+{
+    color: #FFAA00;
+}
+
+.gs-dashboard-item:hover
+{
+    background: #606060;
+    border: 1px solid #787878;
+}
+
+.gs-dashboard-item > *
+{
+    flex: 1 1 100%;
+}
+
+.gs-dashboard-item > .image
+{
+    display: block;
+    height: 32px;
+    font-size: 32px;
+}
+
+.gs-dashboard-item > p.title
+{
+    margin-bottom: 0px;
+    font-weight: bold;
+}
+
 table.layout-fixed
 {
     table-layout: fixed;