From 7a03b0bc2e970dcd2acacbba704c93f702227663 Mon Sep 17 00:00:00 2001 From: smanylov Date: Sun, 18 Jan 2026 16:27:09 +0700 Subject: [PATCH] edit styles --- package.json | 2 +- src/app/[locale]/pages/refferals/page.tsx | 5 +- src/app/styles/global-styles.scss | 1 + src/app/styles/pages-styles.scss | 286 ++++++++++++++---- .../ui/referral-page/commission-levels.tsx | 48 ++- .../ui/referral-page/invitations-table.tsx | 5 +- src/app/ui/referral-page/referral-stats.tsx | 6 - src/i18n/messages/en.json | 3 +- src/i18n/messages/ru.json | 3 +- 9 files changed, 253 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index 6f66823..d4fab12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.18.0", + "version": "0.19.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/[locale]/pages/refferals/page.tsx b/src/app/[locale]/pages/refferals/page.tsx index 78bf347..2f30864 100644 --- a/src/app/[locale]/pages/refferals/page.tsx +++ b/src/app/[locale]/pages/refferals/page.tsx @@ -7,16 +7,17 @@ import CommissionLevels from '@/app/ui/referral-page/commission-levels'; import InvitationsTable from '@/app/ui/referral-page/invitations-table'; import IncomeAndPayments from '@/app/ui/referral-page/Income-and-payments'; import SettingReferralProgram from '@/app/ui/referral-page/setting-referral-program'; +import PageTitleColorFrame from '@/app/ui/page-title-color-frame'; export default function Page() { const t = useTranslations('Global'); return ( ...}> - + + - diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index d0b89cb..fd5a38c 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -408,6 +408,7 @@ border-radius: 0.375rem; box-shadow: 0 1px 2px 0 v.$shadow-1; transition: background-color 0.2s; + cursor: pointer; &:hover { background-color: #f9fafb; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 437b0c5..56d9772 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -840,39 +840,64 @@ .referral-stats-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 25px; - margin-bottom: 40px; + grid-template-columns: repeat(5, 1fr); + gap: 16px; + margin-bottom: 24px; .stat-card { background: white; - padding: 30px; - border-radius: 20px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - border: 1px solid v.$b-color-1; + padding: 18px; + border-radius: 16px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + text-align: center; + transition: all 0.3s ease; position: relative; overflow: hidden; - transition: all 0.3s ease; + border: 2px solid #e2e8f0; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent); + transition: left 0.5s ease; + } + + &:hover { + transform: translateY(-4px); + box-shadow: 0 12px 35px rgba(99, 102, 241, 0.15); + border-color: #667eea; + + &::before { + left: 100%; + } + } .icon { - font-size: 48px; - margin-bottom: 15px; + font-size: 2rem; + margin-bottom: 8px; display: inline-block; } .value { - font-size: 32px; + font-size: 1.5rem; font-weight: 700; - margin-bottom: 8px; - background: linear-gradient(135deg, #6366f1, #8b5cf6); + margin-bottom: 6px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .label { - font-size: 16px; - color: v.$text-s; - font-weight: 500; + font-size: 0.8rem; + color: #64748b; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; } } } @@ -888,30 +913,39 @@ .referral-link-input { display: flex; gap: 15px; - max-width: 600px; + max-width: 700px; margin: 20px auto; #referral-link { + display: flex; flex: 1; - padding: 10px 20px; - border: 2px solid v.$b-color-1; + padding: 10px; + border: 2px solid #e2e8f0; border-radius: 12px; font-size: 14px; - background: #f9fafb; - white-space: nowrap; - display: flex; + background: #f8f9fa; + color: #1e293b; + font-weight: 500; align-items: center; + justify-content: center; + white-space: nowrap; } .copy-btn { - padding: 10px 30px; - background: linear-gradient(135deg, #10b981, #059669); + padding: 14px 28px; + background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 12px; - font-weight: 600; + font-weight: 700; cursor: pointer; - transition: all 0.3s; + transition: all 0.3s ease; + white-space: nowrap; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); + } } } @@ -922,51 +956,86 @@ } .section-title { - font-size: 24px; + font-size: 1.5rem; font-weight: 700; - margin-bottom: 25px; - color: v.$text-p; + color: #1e293b; display: flex; align-items: center; - gap: 15px; + gap: 12px; + margin-bottom: 20px; + + &::before { + content: ''; + width: 8px; + height: 8px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 50%; + } } .commission-levels { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; .level-card { - padding: 20px; - border-radius: 15px; + background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); + border: 2px solid #e2e8f0; + border-radius: 16px; + padding: 18px; text-align: center; - border: 2px solid; + transition: all 0.3s ease; position: relative; - } - .level-bronze { - background: linear-gradient(135deg, #fef3c7, #fde68a); - border-color: #f59e0b; - color: #92400e; - } + &:hover { + transform: translateY(-4px); + border-color: #667eea; + box-shadow: 0 12px 30px rgba(102, 126, 234, 0.15); + } - .level-silver { - background: linear-gradient(135deg, #f3f4f6, #d1d5db); - border-color: v.$text-s; - color: v.$text-s; - } + &.active { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-color: #667eea; + color: white; - .level-gold { - background: linear-gradient(135deg, #fef3c7, #fcd34d); - border-color: #f59e0b; - color: #92400e; - } + .level-requirement { + color: rgba(255, 255, 255, 0.9); + } - .level-platinum { - background: linear-gradient(135deg, #ede9fe, #ddd6fe); - border-color: #8b5cf6; - color: #5b21b6; + .level-commission { + color: white; + background: none; + -webkit-text-fill-color: white; + } + } + + .level-number { + font-size: 1.5rem; + font-weight: 800; + margin-bottom: 6px; + } + + .level-commission { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 10px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + } + + .level-subscribe { + font-weight: 700; + color: #1e293b; + margin-bottom: 4px; + } + + .level-requirement { + font-size: 0.9rem; + color: #64748b; + margin-top: 8px; + } } &-footer { @@ -1001,22 +1070,26 @@ padding: 25px; border-radius: 15px; border: 1px solid #bae6fd; - text-align: center; &.success { - background: linear-gradient(135deg, #f0fdf4, #dcfce7); + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + color: white; border-color: #bbf7d0; - } - &.warning { - background: linear-gradient(135deg, #fffbeb, #fef3c7); - border-color: #fed7aa; + p { + color: white; + background: white; + background-clip: text; + } } p { - font-size: 24px; + font-size: 1.5rem; font-weight: 700; - margin: 10px 0; + margin: 12px 0; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background-clip: text; + -webkit-text-fill-color: transparent; } } } @@ -1056,14 +1129,16 @@ } .btn-success { - background: linear-gradient(135deg, #10b981, #059669); + padding: 14px 28px; + background: linear-gradient(135deg, #667eea, #764ba2); color: white; - padding: 12px 25px; border: none; - border-radius: 10px; - font-weight: 600; + border-radius: 12px; + font-weight: 700; cursor: pointer; - transition: all 0.3s; + transition: all 0.3s ease; + white-space: nowrap; + height: 48px; } } } @@ -1162,6 +1237,28 @@ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.4s ease; + } + + &:hover { + opacity: 1; + transform: translateY(0px); + transition: 0.5s; + + &::before { + opacity: 1; + } + } } .stat-type { @@ -1255,6 +1352,12 @@ border-radius: 14px; border: 1px solid #e2e8f0; transition: all 0.3s ease; + + &:hover { + background: white; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + transform: translateX(4px); + } } .file-icon { @@ -1318,6 +1421,11 @@ background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: 12px; transition: all 0.3s ease; + + &:hover { + background: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + } } .platform-name { @@ -1372,6 +1480,28 @@ position: relative; overflow: hidden; + &::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.274) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.4s ease; + } + + &:hover { + opacity: 1; + transform: translateY(0px); + transition: 0.5s; + + &::before { + opacity: 1; + } + } + .stat-type { font-size: 11px; font-weight: 700; @@ -1538,6 +1668,12 @@ align-items: center; gap: 12px; + &:hover { + background: white; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); + } + &::before { content: ''; position: absolute; @@ -1813,6 +1949,11 @@ align-items: center; justify-content: center; gap: 8px; + + &:hover { + background: #3b82f6; + color: white; + } } .violation-action { @@ -1830,6 +1971,11 @@ align-items: center; justify-content: center; gap: 8px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); + } } } @@ -1852,6 +1998,12 @@ border: 2px solid #f3f4f6; text-align: center; transition: all 0.3s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15); + border-color: #667eea; + } } &-stat-number { diff --git a/src/app/ui/referral-page/commission-levels.tsx b/src/app/ui/referral-page/commission-levels.tsx index 6f9f840..82183b7 100644 --- a/src/app/ui/referral-page/commission-levels.tsx +++ b/src/app/ui/referral-page/commission-levels.tsx @@ -2,38 +2,36 @@ export default function CommissionLevels() { return (

- πŸ† + Π£Ρ€ΠΎΠ²Π½ΠΈ комиссии

-
-

πŸ₯‰ BRONZE

-

15% комиссия

- 0-5 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ² +
+
πŸ₯‰
+
15%
+
BRONZE
+
0-5 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ²
-
-

πŸ₯ˆ SILVER

-

18% комиссия

- 6-15 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ² +
+
πŸ₯ˆ
+
18%
+
SILVER
+
6-15 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ²
-
-

πŸ₯‡ GOLD

-

22% комиссия

- 16-50 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ² -
-
-

πŸ’Ž PLATINUM

-

25% комиссия

- 50+ Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ² -
-
-
-

Π”ΠΎ уровня SILVER: 5 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ²

-
-
+
+
πŸ₯‡
+
22%
+
GOLD
+
16-50 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ²
+
+ +
+
πŸ’Ž
+
25%
+
PLATINUM
+
50+ Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ²
- 1 ΠΈΠ· 6 Ρ€Π΅Ρ„Π΅Ρ€Π°Π»ΠΎΠ² (16.7%)
) diff --git a/src/app/ui/referral-page/invitations-table.tsx b/src/app/ui/referral-page/invitations-table.tsx index 83a6d1d..c051c40 100644 --- a/src/app/ui/referral-page/invitations-table.tsx +++ b/src/app/ui/referral-page/invitations-table.tsx @@ -3,10 +3,9 @@ export default function InvitationsTable() { const t = useTranslations('Global'); return (
-
- πŸ“‹ +

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠΉ -

+
diff --git a/src/app/ui/referral-page/referral-stats.tsx b/src/app/ui/referral-page/referral-stats.tsx index 1a57554..1c48c7d 100644 --- a/src/app/ui/referral-page/referral-stats.tsx +++ b/src/app/ui/referral-page/referral-stats.tsx @@ -25,12 +25,6 @@ export default function ReferralStats() {
К Π²Ρ‹ΠΏΠ»Π°Ρ‚Π΅
-
-
πŸ“Š
-
14.3%
-
ΠšΠΎΠ½Π²Π΅Ρ€ΡΠΈΡ
-
-
πŸ†
BRONZE
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 6630b42..4a48e1a 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -172,7 +172,8 @@ "multi-layered-protection-for-your-videos": "Multi-layered video content protection with invisible watermarks", "my-content-description": "Managing protected files and copyright control", "monitoring-copyright-infringements": "Monitoring copyright infringements", - "monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online" + "monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online", + "referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded." }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 003a04d..3a1e461 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -172,7 +172,8 @@ "multi-layered-protection-for-your-videos": "Многослойная Π·Π°Ρ‰ΠΈΡ‚Π° Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ водяными Π·Π½Π°ΠΊΠ°ΠΌΠΈ", "my-content-description": "Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π΅ΠΌ авторских ΠΏΡ€Π°Π²", "monitoring-copyright-infringements": "ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΠΉ авторских ΠΏΡ€Π°Π²", - "monitoring-copyright-infringements-description": "ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡΠΌΠΈ авторских ΠΏΡ€Π°Π² Π½Π° ваш Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅" + "monitoring-copyright-infringements-description": "ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡΠΌΠΈ авторских ΠΏΡ€Π°Π² Π½Π° ваш Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅", + "referral-program-description": "ΠŸΡ€ΠΈΠ³Π»Π°ΡˆΠ°ΠΉΡ‚Π΅ Π΄Ρ€ΡƒΠ·Π΅ΠΉ ΠΈ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎ 25% комиссии с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΡ… ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ! Π”Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ссылкой, ΠΏΠΎΠ»ΡƒΡ‡Π°ΠΉΡ‚Π΅ Π²ΠΎΠ·Π½Π°Π³Ρ€Π°ΠΆΠ΄Π΅Π½ΠΈΠ΅." }, "Login-register-form": { "and": "ΠΈ",