Upload index.html

index.html

@@ -5,10 +5,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ReferatAI — Telegram-бот для генерации рефератов</title>
   <style>
+    :root {
+      --bg-dark: #0b0c10;
+      --bg-gradient: linear-gradient(160deg, #111217, #1a1c23);
+      --text-color: #e5e7eb;
+      --text-muted: #9ca3af;
+      --accent: #229ED9;
+    }
+
     body {
       font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: linear-gradient(135deg, #eef2ff, #faf5ff);
-      color: #1e1e2f;
+      background: var(--bg-gradient);
+      color: var(--text-color);
       margin: 0;
       padding: 0;
       display: flex;
@@ -17,39 +25,48 @@
       justify-content: center;
       min-height: 100vh;
       text-align: center;
+      transition: background 0.5s ease;
     }
 
     img {
       width: 180px;
       height: 180px;
-      border-radius: 20px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-      margin-bottom: 20px;
+      border-radius: 24px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+      margin-bottom: 25px;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    img:hover {
+      transform: scale(1.05);
+      box-shadow: 0 12px 40px rgba(34, 158, 217, 0.4);
     }
 
     h1 {
-      font-size: 2.2rem;
+      font-size: 2.4rem;
       margin-bottom: 10px;
+      letter-spacing: 0.5px;
     }
 
     p {
       font-size: 1.1rem;
-      max-width: 500px;
-      margin: 0 auto 30px;
-      color: #444;
+      max-width: 520px;
+      margin: 0 auto 32px;
+      color: var(--text-muted);
+      line-height: 1.6;
     }
 
     a.button {
       display: inline-block;
-      padding: 14px 28px;
-      background-color: #229ED9;
+      padding: 14px 32px;
+      background-color: var(--accent);
       color: white;
       font-weight: 600;
       font-size: 1.1rem;
       border-radius: 50px;
       text-decoration: none;
-      transition: background 0.25s, transform 0.15s;
-      box-shadow: 0 4px 14px rgba(34, 158, 217, 0.3);
+      transition: background 0.3s, transform 0.15s;
+      box-shadow: 0 4px 20px rgba(34, 158, 217, 0.4);
     }
 
     a.button:hover {
@@ -58,9 +75,18 @@
     }
 
     footer {
-      margin-top: 50px;
+      margin-top: 60px;
       font-size: 0.9rem;
-      color: #777;
+      color: var(--text-muted);
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    body > * {
+      animation: fadeIn 0.7s ease forwards;
     }
   </style>
 </head>