initial commit

2026-03-11 21:40:32 +07:00
parent f060d464aa
commit cdca0a4e49
119 changed files with 8550 additions and 0 deletions
@@ -0,0 +1,46 @@
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+interface BurgerMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function BurgerMenu({ isOpen, onClose }: BurgerMenuProps) {
+  if (!isOpen) return null;
+  const { t } = useTranslation();
+  return (
+    <>
+      {/* затемнение только под хедером */}
+      <div
+        className="fixed inset-x-0 bottom-0 top-25 z-30 bg-black/20 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* меню */}
+      <div className="fixed left-0 top-25 z-60 h-[calc(100vh-4rem)] w-64 bg-card border-r p-6 shadow-xl animate-in slide-in-from-left">
+        <nav className="flex flex-col gap-6" onClick={onClose}>
+          <Link
+            to="/"
+            className="text-lg font-medium hover:text-primary transition-colors"
+          >
+            {t("home_label")}
+          </Link>
+
+          <Link
+            to="/settings"
+            className="text-lg font-medium hover:text-primary transition-colors"
+          >
+            {t("settings")}
+          </Link>
+
+          <Link
+            to="/about"
+            className="text-lg font-medium hover:text-primary transition-colors"
+          >
+            {t("about_title")}
+          </Link>
+        </nav>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Globe } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import ReactCountryFlag from "react-country-flag";
+import { cn } from "@/lib/utils";
+
+const countries = [
+  { code: "us", name: "United States" },
+  { code: "de", name: "Germany" },
+  { code: "jp", name: "Japan" },
+];
+
+export function CountrySelect() {
+  const { t } = useTranslation();
+  const [selectedCode, setSelectedCode] = useState<string>("");
+
+  const selectedCountry = countries.find((c) => c.code === selectedCode);
+
+  return (
+    <Select onValueChange={setSelectedCode} value={selectedCode}>
+      <SelectTrigger className="w-[280px] h-12 bg-white/5 backdrop-blur-lg border-white/10 hover:bg-white/10 transition-all rounded-xl shadow-lg ring-offset-0 focus:ring-0">
+        <div
+          className={cn(
+            "flex items-center gap-2 w-full px-3",
+            selectedCountry ? "justify-start" : "justify-center",
+          )}
+        >
+          <span className="truncate flex-1 text-left">
+            <SelectValue placeholder={t("select_location_placeholder")} />
+          </span>
+        </div>
+      </SelectTrigger>
+
+      <SelectContent
+        className="bg-white/10 backdrop-blur-2xl border-white/10 rounded-xl overflow-hidden"
+        style={{ width: "var(--radix-select-trigger-width)" }}
+      >
+        {countries.map((country) => (
+          <SelectItem
+            key={country.code}
+            value={country.code}
+            className="cursor-pointer hover:bg-white/10 focus:bg-white/20 transition-colors"
+          >
+            <div className="flex items-center gap-3">
+              <ReactCountryFlag
+                countryCode={country.code.toUpperCase()}
+                svg
+                className="size-5 rounded-sm"
+              />
+              <span className="font-medium text-foreground">
+                {country.name}
+              </span>
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
@@ -0,0 +1,31 @@
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "./ThemeToggle";
+
+export function Header({ onMenuClick }: { onMenuClick: () => void }) {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shadow-sm pt-[env(safe-area-inset-top)]">
+      {/* Используем grid для идеальной центровки */}
+      <div className="grid h-16 w-full grid-cols-[auto_1fr_auto] items-center px-4">
+        {/* Слева: Бургер (занимает место по контенту) */}
+        <div className="flex justify-start">
+          <Button variant="ghost" size="icon" onClick={onMenuClick}>
+            <Menu className="size-6" />
+          </Button>
+        </div>
+
+        {/* По центру: Лого (занимает всё свободное пространство и центрирует контент) */}
+        <div className="flex justify-center">
+          <h1 className="text-xl font-bold tracking-tighter">
+            Netrunner <span className="text-primary italic">VPN</span>
+          </h1>
+        </div>
+
+        {/* Справа: Тема (занимает место по контенту) */}
+        <div className="flex justify-end">
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,27 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useDarkMode } from "@/hooks/useDarkMode";
+
+export function ThemeToggle() {
+  const { isDark, toggleDark } = useDarkMode();
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleDark();
+      }}
+      className="rounded-full transition-all duration-300 hover:scale-105"
+    >
+      {isDark ? (
+        <Sun className="h-[1.2rem] w-[1.2rem]" />
+      ) : (
+        <Moon className="h-[1.2rem] w-[1.2rem]" />
+      )}
+      <span className="sr-only">Переключить тему</span>
+    </Button>
+  );
+}
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+
+export function LanguageToggle() {
+  const { i18n } = useTranslation();
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language === "en" ? "ru" : "en";
+    i18n.changeLanguage(newLang);
+    localStorage.setItem("lang", newLang); // Сохраняем выбор
+  };
+
+  return (
+    <Button variant="ghost" onClick={toggleLanguage}>
+      {i18n.language.toUpperCase()}
+    </Button>
+  );
+}
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Power } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+import { invoke } from "@tauri-apps/api/core";
+
+export function VpnControl() {
+  const [status, setStatus] = useState<"idle" | "connecting" | "connected">(
+    "idle",
+  );
+
+  const handleToggle = async () => {
+    try {
+      if (status === "idle") {
+        setStatus("connecting");
+        await invoke("start_vpn_android", {
+          remoteAddress: "62.60.244.156",
+        });
+
+        setStatus("connected");
+      } else {
+        setStatus("idle");
+      }
+    } catch (error) {
+      console.error("Ошибка VPN:", error);
+      setStatus("idle");
+    }
+  };
+
+  const { t } = useTranslation();
+
+  const isActive = status !== "idle";
+
+  const statusMap = {
+    idle: t("disconnected"),
+    connecting: t("connecting"),
+    connected: t("connected"),
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 p-10">
+      {/* Контейнер с эффектом жидкого стекла */}
+      <div className="relative flex size-64 items-center justify-center rounded-full bg-background/20 backdrop-blur-xl border border-white/10 shadow-2xl p-4">
+        <svg
+          className="absolute size-full rotate-90 pointer-events-none"
+          viewBox="-20 -20 300 300"
+        >
+          {/* Фоновая линия */}
+          <circle
+            cx="130"
+            cy="130"
+            r="140"
+            className="stroke-primary/20 fill-none"
+            strokeWidth="4"
+          />
+
+          {/* Правая половина (по часовой от 6 к 12) */}
+          <motion.circle
+            cx="130"
+            cy="130"
+            r="140"
+            className="stroke-primary/80 fill-none drop-shadow-[0_0_3px_var(--color-primary)]"
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeDasharray="800"
+            initial={{ pathLength: 0 }}
+            animate={{
+              pathLength: isActive ? 0.495 : 0,
+              opacity: isActive ? 1 : 0,
+            }}
+            transition={{ duration: 1.5, ease: "easeInOut" }}
+          />
+
+          {/* Левая половина (против часовой от 6 к 12) */}
+          <motion.circle
+            cx="130"
+            cy="130"
+            r="140"
+            className="stroke-primary/80 fill-none drop-shadow-[0_0_3px_var(--color-primary)]"
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeDasharray="800"
+            // Поворачиваем на 180 градусов относительно центра, чтобы рисовать в другую сторону
+            style={{ rotate: 180, originX: "140px", originY: "141px" }}
+            initial={{ pathLength: 0 }}
+            animate={{
+              pathLength: isActive ? 0.495 : 0,
+              opacity: isActive ? 1 : 0,
+            }}
+            transition={{ duration: 1.5, ease: "easeInOut" }}
+          />
+        </svg>
+        <button
+          onClick={handleToggle}
+          className={cn(
+            "relative size-40 rounded-full transition-all duration-700 flex items-center justify-center",
+            isActive
+              ? "bg-primary/20 shadow-[0_0_40px_var(--color-primary)]"
+              : "bg-muted shadow-inner",
+          )}
+        >
+          <Power
+            className={cn(
+              "size-16 transition-colors duration-500",
+              isActive ? "text-primary" : "text-muted-foreground",
+            )}
+          />
+        </button>
+      </div>
+
+      {/* Статус */}
+      <div className="text-center space-y-1">
+        <p className="text-sm uppercase tracking-widest text-muted-foreground font-semibold">
+          {t("status_label")}
+        </p>
+        <AnimatePresence mode="wait">
+          <motion.p
+            key={status}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className={cn(
+              "text-xl font-bold",
+              isActive ? "text-primary" : "text-foreground",
+            )}
+          >
+            {statusMap[status]}
+          </motion.p>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+interface VpnStatsProps {
+  received: string;
+  sent: string;
+  className?: string;
+}
+
+export function VpnStats({ received, sent, className }: VpnStatsProps) {
+  const { t } = useTranslation();
+  return (
+    <div
+      className={cn(
+        "w-full max-w-70",
+        "relative flex items-center justify-between px-8 py-4 rounded-2xl", // Увеличил отступы внутри
+        "bg-background/20 backdrop-blur-md border border-white/10",
+        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.4),0_8px_16px_rgba(0,0,0,0.1)]",
+        "backdrop-blur-md saturate-150 brightness-110",
+        className,
+      )}
+    >
+      {/* Теперь контент внутри растянется равномерно */}
+      <div className="flex flex-col items-center flex-1">
+        <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
+          {t("rx")}
+        </span>
+        <span className="text-sm font-mono text-foreground font-semibold tracking-tight">
+          {received}
+        </span>
+      </div>
+
+      <div className="h-8 w-px bg-border/50 mx-4" />
+
+      <div className="flex flex-col items-center flex-1">
+        <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
+          {t("tx")}
+        </span>
+        <span className="text-sm font-mono text-foreground font-semibold tracking-tight">
+          {sent}
+        </span>
+      </div>
+    </div>
+  );
+}