Добавление главной страницы о общей статистикой

library_service/static/styles.css

@@ -19,7 +19,6 @@ nav ul li a {
     font-size: large;
 }
 
-/* Custom checkbox styles */
 .custom-checkbox {
     display: inline-block;
     position: relative;
@@ -40,7 +39,7 @@ nav ul li a {
     height: 18px;
     width: 18px;
     background-color: #fff;
-    border: 2px solid #d1d5db; /* gray-300 */
+    border: 2px solid #d1d5db;
     border-radius: 4px;
     transition: all 0.2s ease;
     display: inline-block;
@@ -48,11 +47,11 @@ nav ul li a {
 }
 
 .custom-checkbox:hover input ~ .checkmark {
-    border-color: #6b7280; /* gray-500 */
+    border-color: #6b7280;
 }
 
 .custom-checkbox input:checked ~ .checkmark {
-    background-color: #6b7280; /* gray-500 */
+    background-color: #6b7280;
     border-color: #6b7280;
 }
 
@@ -114,12 +113,29 @@ button:disabled {
 }
 
 @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
-    20%, 40%, 60%, 80% { transform: translateX(5px); }
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-5px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(5px);
+    }
 }
 
-#req-length, #req-upper, #req-lower, #req-digit {
+#req-length,
+#req-upper,
+#req-lower,
+#req-digit {
     transition: color 0.2s ease;
 }
 
@@ -145,7 +161,8 @@ button:disabled {
     }
 }
 
-#login-tab, #register-tab {
+#login-tab,
+#register-tab {
     font-family: "Dited", sans-serif;
     letter-spacing: 1.5px;
     cursor: pointer;
@@ -156,10 +173,73 @@ button:disabled {
 }
 
 @keyframes dropdownFade {
-    from { opacity: 0; transform: translateY(-5px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 #user-arrow.rotate-180 {
     transform: rotate(180deg);
-}
+}
+
+.stat-number {
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-card {
+    min-width: 140px;
+}
+
+@keyframes pulse-soft {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+.animate-pulse-soft {
+    animation: pulse-soft 2s ease-in-out infinite;
+}
+
+#bookSvg {
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.5s ease-out forwards;
+}
+
+.stat-card:hover svg {
+    transform: scale(1.1);
+    transition: transform 0.3s ease;
+}
+
+.stat-card svg {
+    transition: transform 0.3s ease;
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}