🎨 Layout: Глобальные стили, favicon, корневой layout

2026-02-04 05:03:33 +03:00
parent 55cc3c022a
commit 2b611c2abe
3 changed files with 96 additions and 0 deletions
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Hiddify Colors */
+  --primary: #2fbea5;
+  --primary-dark: #005048;
+  --primary-light: #7df8dd;
+
+  --bg-app: #191f23;
+  --bg-card: #263238;
+  --bg-elevated: #37474f;
+
+  --text-primary: #e1e2e6;
+  --text-white: #ffffff;
+
+  --border: #37474f;
+  --outline: #4caf50;
+
+  --success: #44a334;
+  --idle: #4a4d8b;
+  --error: #f44336;
+}
+
+body {
+  background: var(--bg-app);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Бегущая строка */
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,52 @@
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false, // Отключаем зум для mini app
+  themeColor: '#191f23', // Цвет темы Umbrix
+};
+
+export const metadata: Metadata = {
+  title: 'Umbrix VPN',
+  description: 'Быстрый и безопасный VPN сервис',
+  openGraph: {
+    title: 'Umbrix VPN',
+    description: 'Быстрый и безопасный VPN сервис',
+    images: [
+      {
+        url: 'https://bolt.new/static/og_default.png',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Umbrix VPN',
+    description: 'Быстрый и безопасный VPN сервис',
+    images: [
+      {
+        url: 'https://bolt.new/static/og_default.png',
+      },
+    ],
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <script src="https://telegram.org/js/telegram-web-app.js" async></script>
+      </head>
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}