Додан моніторінг застосунку

Додани веб компоненти карточок територій та повідомлень

web/lib/pages/home/style.css

@@ -102,123 +102,6 @@
     overflow-y: auto;
     align-items: flex-start;
     transition: .3s ease;
-}
-
-.page-home .card {
-    position: relative;
-    width: 300px;
-    height: 200px;
-    background-color: var(--ColorThemes2);
-    margin: 10px;
-    overflow: hidden;
-    cursor: pointer;
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-@media (max-width: 2300px) {
-    .page-home .card {
-        width: calc((100% / 5) - 30px);
-    }
-}
-
-@media (max-width: 1960px) {
-    .page-home .card {
-        width: calc((100% / 4) - 30px);
-    }
-}
-
-@media (max-width: 1640px) {
-    .page-home .card {
-        width: calc((100% / 3) - 30px);
-    }
-}
-
-@media (max-width: 1280px) {
-    .page-home .card {
-        width: calc((100% / 2) - 30px);
-    }
-}
-
-@media (max-width: 650px) {
-    .page-home .card {
-        width: 100%;
-    }
-}
-
-@media(hover: hover) {
-    .page-home .card:hover {
-        opacity: 0.8;
-    }
-}
-
-.page-home .card>i {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    filter: blur(2px);
-    /* background-repeat: round; */
-    background-size: cover;
-    background-position: center;
-    background-color: var(--PrimaryColor);
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-.page-home .card>a {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-}
-
-.page-home .contents {
-    position: absolute;
-    z-index: 2;
-    background: rgb(64 64 64 / 0.7);
-    width: 100%;
-    height: 100%;
-    font-size: 40px;
-    font-weight: 500;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-.page-home .info {
-    margin: 10px;
-}
-
-.page-home .info>div {
-    width: 100%;
-    height: 35px;
-    display: flex;
-    background: var(--ColorThemes0);
-    align-items: center;
-    justify-content: center;
-    font-size: var(--FontSize1);
-    color: var(--ColorThemes3);
-    border-radius: calc(var(--border-radius) - 5px - 4px);
-    position: relative;
-    overflow: hidden;
-}
-
-.page-home .info>div>span {
-    color: var(--ColorThemes3);
-    font-size: var(--FontSize3);
-    font-weight: 300;
-    z-index: 2;
-}
-
-.page-home .info>div>p {
-    color: var(--ColorThemes3);
-    font-size: var(--FontSize3);
-    font-weight: 400;
+    gap: 20px;
     padding: 10px;
-    z-index: 2;
-    width: 100%;
-    text-align: center;
 }