Update index.html

public/index.html

@@ -196,6 +196,84 @@ body {
     border-radius: 5px;
     transition: width 0.5s ease;
 }
+
+/* Анимация */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes progress {
+    from {
+        width: 0;
+    }
+}
+
+/* Анимация для всех элементов */
+* {
+    animation: fadeIn 1s;
+}
+
+/* Анимация для прогресс-баров */
+.progress-bar-inner {
+    animation: progress 1s;
+}
+
+/* Медиа-запросы */
+@media (max-width: 600px) {
+    .container {
+        padding: 10px;
+    }
+
+    .section {
+        margin-bottom: 10px;
+    }
+
+    .section h2 {
+        font-size: 18px;
+    }
+
+    .section p {
+        font-size: 14px;
+    }
+
+    .section span {
+        font-size: 14px;
+    }
+
+    .button {
+        font-size: 14px;
+    }
+
+    .profile-section {
+        flex-direction: column;
+    }
+
+    .progress-circle {
+        margin-bottom: 10px;
+    }
+
+    .circle-container {
+        width: 80px;
+        height: 80px;
+    }
+
+    .circle-text {
+        font-size: 16px;
+    }
+
+    .fire-stats {
+        grid-template-columns: 1fr;
+    }
+
+    .fire-stats .stat {
+        text-align: left;
+    }
+}
 </style>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
 </head>