uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

# feature: add dark/light theme support

Browse Source 
Realized by prefers-color-scheme media queries with Tailwind CSS
This commit is contained in:
austnv
2026-05-24 02:00:54 +03:00
parent 5edd56a31f
commit b89f92953d
8 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingSection.vue
+13 -13
View File
@@ -5,42 +5,42 @@
</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Тариф Месяц -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
<h3 class="text-xl font-semibold mb-2">Месяц</h3>
<p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
<ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Поддержка 24/7</li>
</ul>
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
Выбрать
</button>
</div>
<!-- Тариф Год (выделенный) -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
<span class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
<span class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
<h3 class="text-xl font-semibold mb-2">Год</h3>
<p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
<ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Приоритетная поддержка</li>
</ul>
<button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-xl font-bold">
<button class="w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition py-3 rounded-xl font-bold text-white">
Выбрать тариф
</button>
</div>
<!-- Тариф 2 года -->
<div class="bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-800 hover:border-blue-600 transition">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
<h3 class="text-xl font-semibold mb-2">2 года</h3>
<p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-400">/мес</span></p>
<ul class="text-gray-400 space-y-3 mb-8 flex-1">
<p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
<ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
<li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Максимальная экономия</li>
</ul>
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium">
<button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
Выбрать
</button>
</div>