⚙️ Page: Настройка - первый вход и создание аккаунта
This commit is contained in:
Umbrix Dev
215
app/setup/page.tsx
Normal file
215
app/setup/page.tsx
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { ChevronLeft, Smartphone, Download, QrCode, Copy, ExternalLink } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function SetupPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const subscriptionUrl = 'https://umbrix2.3to3.sbs/sub/Vm9kb3JvZF8sMTc2OTczMDU2NQtUnJh9gxkj/';
|
||||||
|
|
||||||
|
const copyToClipboard = async (text: string) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to copy:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[var(--bg-app)] text-white">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-[var(--bg-card)] border-b border-slate-700 sticky top-0 z-10 backdrop-blur-sm">
|
||||||
|
<div className="max-w-2xl mx-auto p-4 flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="p-2 hover:bg-slate-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
<h1 className="text-xl font-bold">Настроить Umbrix</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="max-w-2xl mx-auto p-4 space-y-6">
|
||||||
|
{/* Step 1: Download App */}
|
||||||
|
<div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Скачайте приложение Umbrix</h2>
|
||||||
|
<p className="text-slate-400 text-sm mb-4">
|
||||||
|
Umbrix — это безопасное VPN приложение для защиты вашего интернет-соединения
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Android */}
|
||||||
|
<a
|
||||||
|
href="https://play.google.com/store/apps/details?id=com.umbrix.app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Smartphone className="h-6 w-6 text-green-500" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium">Android</p>
|
||||||
|
<p className="text-xs text-slate-400">Google Play Store</p>
|
||||||
|
</div>
|
||||||
|
<ExternalLink className="h-5 w-5 text-slate-400" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* iOS */}
|
||||||
|
<a
|
||||||
|
href="https://apps.apple.com/app/umbrix/id123456789"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Smartphone className="h-6 w-6 text-blue-500" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium">iOS</p>
|
||||||
|
<p className="text-xs text-slate-400">App Store</p>
|
||||||
|
</div>
|
||||||
|
<ExternalLink className="h-5 w-5 text-slate-400" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Windows */}
|
||||||
|
<a
|
||||||
|
href="https://umbrix.app/download/windows"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Download className="h-6 w-6 text-cyan-500" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium">Windows</p>
|
||||||
|
<p className="text-xs text-slate-400">Скачать .exe</p>
|
||||||
|
</div>
|
||||||
|
<ExternalLink className="h-5 w-5 text-slate-400" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* macOS */}
|
||||||
|
<a
|
||||||
|
href="https://umbrix.app/download/macos"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Download className="h-6 w-6 text-slate-400" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium">macOS</p>
|
||||||
|
<p className="text-xs text-slate-400">Скачать .dmg</p>
|
||||||
|
</div>
|
||||||
|
<ExternalLink className="h-5 w-5 text-slate-400" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2: Add Subscription */}
|
||||||
|
<div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Добавьте подписку</h2>
|
||||||
|
<p className="text-slate-400 text-sm mb-4">
|
||||||
|
После покупки вы получите ссылку на подписку. Добавьте её в приложение одним из способов:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Alert: Desktop users */}
|
||||||
|
<div className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg mb-4">
|
||||||
|
<p className="text-xs text-blue-400">
|
||||||
|
💡 <strong>Важно:</strong> Кнопка "Открыть в Umbrix" работает только если приложение уже установлено. Если приложения нет - вы будете перенаправлены на эту страницу для установки.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Method 1: Copy Link */}
|
||||||
|
<div className="space-y-3 mb-4">
|
||||||
|
<div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Copy className="h-4 w-4 text-[var(--primary)]" />
|
||||||
|
<p className="font-medium text-sm">Способ 1: Скопировать ссылку</p>
|
||||||
|
</div>
|
||||||
|
<ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
|
||||||
|
<li>Скопируйте ссылку подписки</li>
|
||||||
|
<li>Откройте приложение Umbrix</li>
|
||||||
|
<li>Нажмите "+" или "Добавить подписку"</li>
|
||||||
|
<li>Вставьте скопированную ссылку</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Method 2: QR Code */}
|
||||||
|
<div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<QrCode className="h-4 w-4 text-[var(--primary)]" />
|
||||||
|
<p className="font-medium text-sm">Способ 2: QR код</p>
|
||||||
|
</div>
|
||||||
|
<ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
|
||||||
|
<li>Откройте QR код подписки</li>
|
||||||
|
<li>В приложении Umbrix нажмите "Сканировать QR"</li>
|
||||||
|
<li>Наведите камеру на QR код</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3: Connect */}
|
||||||
|
<div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Подключитесь к VPN</h2>
|
||||||
|
<p className="text-slate-400 text-sm mb-4">
|
||||||
|
После добавления подписки просто нажмите кнопку "Подключить" в приложении
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
|
||||||
|
<p className="text-sm text-green-400">
|
||||||
|
✅ Готово! Ваше соединение защищено и зашифровано
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Help Section */}
|
||||||
|
<div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
|
||||||
|
<h3 className="font-semibold mb-3">💬 Нужна помощь?</h3>
|
||||||
|
<p className="text-sm text-slate-400 mb-4">
|
||||||
|
Если возникли вопросы при настройке, свяжитесь с нашей поддержкой
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://telegram.me/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--primary)] hover:bg-[var(--primary)]/80 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
Написать в поддержку
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Back Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => router.push('/')}
|
||||||
|
className="w-full p-4 bg-slate-800/50 hover:bg-slate-700/50 rounded-lg transition-colors text-slate-300"
|
||||||
|
>
|
||||||
|
Вернуться на главную
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user