feature: calendar

2026-02-24 16:15:59 +03:00
parent bca07d4eb8
commit 90069d9aa7
3 changed files with 206 additions and 4 deletions
@@ -76,8 +76,8 @@ H1 {

 .time-row {
  display: flex;
-  gap: 20px;
  justify-content: center;
+  gap: 20px;
 }

 #currentTime {
@@ -86,6 +86,91 @@ H1 {
 }


+.calendar-container {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.calendar-container .hblock {
+  display: flex;
+  flex-direction: column;
+}
+
+#currentDate {
+  font-size: 2em;
+  text-align: center;
+  margin-bottom: 20px;
+  color: #ffffff;
+  word-break: keep-all;
+}
+
+.calendar-table thead tr {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.calendar-table tbody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.calendar-table tbody tr {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.calendar-table th,
+.calendar-table td {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 45px;
+  padding: 0;
+  background-color: #2a2a2a;
+  border-radius: 5px;
+  font-size: 1em;
+  border: none;
+  box-sizing: border-box;
+}
+
+.calendar-table th {
+  background-color: #3a3a3a;
+  font-weight: 400;
+  color: #e0e0e0;
+}
+
+.calendar-table td {
+  background-color: #2a2a2a;
+}
+
+.calendar-table th.weekend-text {
+  color: #6b9ac0;
+}
+
+.calendar-table td.weekend-text {
+  color: #6b9ac0;
+  background-color: #2a2a2a;
+}
+
+.calendar-table td.today-text {
+  color: #d4a017;
+  background-color: #2a2a2a;
+  font-weight: 700;
+  border: 2px solid #d4a017;
+}
+
+.calendar-table td.other-month {
+  opacity: 0.4;
+  background-color: #232323;
+}
+
@media (max-width: 768px) {
  .time-blocks {
    gap: 10px;
@@ -95,4 +180,24 @@ H1 {
    padding: 8px 12px;
    min-width: 50px;
  }
+
+  .calendar-container {
+    padding: 0 8px;
+  }
+
+  .calendar-table th,
+  .calendar-table td {
+    width: 50px;
+    height: 38px;
+    font-size: 0.85em;
+  }
+
+  .calendar-table {
+    border-spacing: 4px;
+  }
+
+  .calendar-table thead tr,
+  .calendar-table tbody tr {
+    gap: 4px;
+  }
 }