glpshchn
/
nakama
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update files

This commit is contained in:
glpshchn 2025-12-07 05:27:23 +03:00
parent daed73c30f
commit 4a3ebaaaaa
2 changed files with 102 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
frontend/src/pages/MonthlyLadder.css
View File

@ -1,12 +1,12 @@
.ladder-page { .ladder-page {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); background: var(--bg-primary);
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 80px; padding-bottom: 80px;
} }
/* Новогодние снежинки */ /* Новогодние снежинки - тонкие, не навязчивые */
.new-year-decorations { .new-year-decorations {
position: fixed; position: fixed;
top: 0; top: 0;
@ -15,56 +15,57 @@
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
opacity: 0.3;
} }
.snowflake { .snowflake {
position: absolute; position: absolute;
color: rgba(255, 255, 255, 0.8); color: var(--text-secondary);
font-size: 20px; font-size: 16px;
animation: fall linear infinite; animation: fall linear infinite;
animation-duration: 10s; animation-duration: 15s;
} }
.snowflake:nth-child(1) { .snowflake:nth-child(1) {
left: 10%; left: 10%;
animation-delay: 0s; animation-delay: 0s;
animation-duration: 8s; animation-duration: 12s;
} }
.snowflake:nth-child(2) { .snowflake:nth-child(2) {
left: 30%; left: 30%;
animation-delay: 2s; animation-delay: 2s;
animation-duration: 12s; animation-duration: 18s;
} }
.snowflake:nth-child(3) { .snowflake:nth-child(3) {
left: 50%; left: 50%;
animation-delay: 4s; animation-delay: 4s;
animation-duration: 10s; animation-duration: 14s;
} }
.snowflake:nth-child(4) { .snowflake:nth-child(4) {
left: 70%; left: 70%;
animation-delay: 1s; animation-delay: 1s;
animation-duration: 9s; animation-duration: 16s;
} }
.snowflake:nth-child(5) { .snowflake:nth-child(5) {
left: 85%; left: 85%;
animation-delay: 3s; animation-delay: 3s;
animation-duration: 11s; animation-duration: 17s;
} }
.snowflake:nth-child(6) { .snowflake:nth-child(6) {
left: 20%; left: 20%;
animation-delay: 5s; animation-delay: 5s;
animation-duration: 13s; animation-duration: 20s;
} }
@keyframes fall { @keyframes fall {
0% { 0% {
transform: translateY(-100vh) rotate(0deg); transform: translateY(-100vh) rotate(0deg);
opacity: 1; opacity: 0.3;
} }
100% { 100% {
transform: translateY(100vh) rotate(360deg); transform: translateY(100vh) rotate(360deg);
@ -75,31 +76,27 @@
.ladder-header { .ladder-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(26, 26, 46, 0.95); background: var(--bg-secondary);
backdrop-filter: blur(10px);
padding: 16px; padding: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--divider-color);
z-index: 10; z-index: 10;
} }
.ladder-header h1 { .ladder-header h1 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, #FFD700, #FFA500, #FF6347); color: var(--text-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.back-btn { .back-btn {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.1); background: transparent;
color: #fff; color: var(--text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -107,34 +104,21 @@
cursor: pointer; cursor: pointer;
} }
/* Карточка отсчета */ /* Карточка отсчета - в стиле Nakama с новогодними акцентами */
.countdown-card { .countdown-card {
margin: 16px; margin: 16px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.15)); background: var(--bg-secondary);
border: 2px solid rgba(255, 215, 0, 0.3); border-radius: 16px;
backdrop-filter: blur(10px); padding: 20px;
box-shadow: 0 2px 8px var(--shadow-md);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} border: 2px solid transparent;
background-image:
.countdown-card::before { linear-gradient(var(--bg-secondary), var(--bg-secondary)),
content: ''; linear-gradient(135deg, #FFD700, #FFA500);
position: absolute; background-origin: border-box;
top: -50%; background-clip: padding-box, border-box;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
} }
.countdown-title { .countdown-title {
@ -149,8 +133,7 @@
.countdown-title h2 { .countdown-title h2 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #FFD700; color: var(--text-primary);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
} }
.gift-icon { .gift-icon {
@ -163,7 +146,7 @@
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-10px); transform: translateY(-5px);
} }
} }
@ -188,14 +171,13 @@
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #FFD700; color: #FFD700;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
min-width: 60px; min-width: 60px;
text-align: center; text-align: center;
} }
.countdown-label { .countdown-label {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.7); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
} }
@ -208,7 +190,7 @@
.countdown-slogan { .countdown-slogan {
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.9); color: var(--text-secondary);
font-size: 14px; font-size: 14px;
font-style: italic; font-style: italic;
margin-top: 16px; margin-top: 16px;
@ -216,12 +198,13 @@
z-index: 1; z-index: 1;
} }
/* Топ пользователей */ /* Топ пользователей - в стиле Nakama */
.ladder-top { .ladder-top {
margin: 16px; margin: 16px;
background: rgba(255, 255, 255, 0.05); background: var(--bg-secondary);
backdrop-filter: blur(10px); border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1); padding: 16px;
box-shadow: 0 2px 8px var(--shadow-md);
} }
.ladder-top-header { .ladder-top-header {
@ -234,10 +217,7 @@
.ladder-top-header h2 { .ladder-top-header h2 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, #FFD700, #FFA500); color: var(--text-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.info-btn { .info-btn {
@ -245,18 +225,22 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 8px 12px; padding: 8px 12px;
background: rgba(255, 215, 0, 0.2); background: var(--bg-primary);
border: 1px solid rgba(255, 215, 0, 0.3); border: 1px solid var(--border-color);
border-radius: 20px; border-radius: 20px;
color: #FFD700; color: var(--text-primary);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.2s;
} }
.info-btn:active { .info-btn:active {
transform: scale(0.95); transform: scale(0.95);
background: rgba(255, 215, 0, 0.3); background: var(--divider-color);
}
.info-btn svg {
color: #FFD700;
} }
.top-users-list { .top-users-list {
@ -270,16 +254,14 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.05); background: var(--bg-primary);
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s;
transition: all 0.3s;
} }
.top-user-item.current-user { .top-user-item.current-user {
background: rgba(255, 215, 0, 0.15); background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.4); border: 1px solid rgba(255, 215, 0, 0.3);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
} }
.user-rank { .user-rank {
@ -292,7 +274,7 @@
} }
.rank-icon { .rank-icon {
filter: drop-shadow(0 0 8px currentColor); filter: drop-shadow(0 0 4px currentColor);
} }
.rank-icon.gold { .rank-icon.gold {
@ -310,7 +292,7 @@
.rank-number { .rank-number {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: rgba(255, 255, 255, 0.8); color: var(--text-primary);
} }
.user-avatar { .user-avatar {
@ -318,13 +300,12 @@
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
border: 2px solid rgba(255, 215, 0, 0.3); border: 2px solid var(--border-color);
flex-shrink: 0; flex-shrink: 0;
} }
.top-user-item.current-user .user-avatar { .top-user-item.current-user .user-avatar {
border-color: #FFD700; border-color: #FFD700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
} }
.user-info { .user-info {
@ -335,7 +316,7 @@
.user-name { .user-name {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #fff; color: var(--text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@ -366,14 +347,16 @@
/* Карточка текущего пользователя */ /* Карточка текущего пользователя */
.current-user-card { .current-user-card {
margin: 16px; margin: 16px;
background: rgba(255, 215, 0, 0.1); background: var(--bg-secondary);
border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 16px;
padding: 16px;
box-shadow: 0 2px 8px var(--shadow-md);
} }
.current-user-card h3 { .current-user-card h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #FFD700; color: var(--text-primary);
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -382,7 +365,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.05); background: var(--bg-primary);
border-radius: 12px; border-radius: 12px;
} }
@ -393,7 +376,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -406,8 +389,9 @@
max-width: 500px; max-width: 500px;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
background: linear-gradient(135deg, #1a1a2e, #16213e); background: var(--bg-secondary);
border: 2px solid rgba(255, 215, 0, 0.3); border-radius: 16px;
box-shadow: 0 4px 20px var(--shadow-lg);
position: relative; position: relative;
} }
@ -416,26 +400,25 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--divider-color);
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(26, 26, 46, 0.95); background: var(--bg-secondary);
backdrop-filter: blur(10px);
z-index: 10; z-index: 10;
} }
.info-modal-header h2 { .info-modal-header h2 {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #FFD700; color: var(--text-primary);
} }
.close-btn { .close-btn {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.1); background: var(--bg-primary);
color: #fff; color: var(--text-primary);
border: none; border: none;
font-size: 24px; font-size: 24px;
display: flex; display: flex;
@ -452,7 +435,7 @@
.info-section { .info-section {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--divider-color);
} }
.info-section:last-child { .info-section:last-child {
@ -464,28 +447,28 @@
.info-section h3 { .info-section h3 {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #FFD700; color: var(--text-primary);
margin-bottom: 8px; margin-bottom: 8px;
} }
.info-section p { .info-section p {
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.9); color: var(--text-primary);
line-height: 1.6; line-height: 1.6;
margin-bottom: 4px; margin-bottom: 4px;
} }
.info-limit { .info-limit {
color: rgba(255, 255, 255, 0.6); color: var(--text-secondary);
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
} }
.info-section.anti-fraud { .info-section.anti-fraud {
background: rgba(255, 69, 0, 0.1); background: var(--bg-primary);
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 69, 0, 0.3); border: 1px solid var(--border-color);
} }
.info-section.anti-fraud h3 { .info-section.anti-fraud h3 {
@ -502,7 +485,7 @@
.spinner { .spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 4px solid rgba(255, 215, 0, 0.2); border: 3px solid var(--divider-color);
border-top-color: #FFD700; border-top-color: #FFD700;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@ -514,8 +497,26 @@
} }
} }
/* Темная тема - дополнительные стили */ /* Темная тема */
[data-theme="dark"] .ladder-page { [data-theme="dark"] .countdown-card {
background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%); background-image:
linear-gradient(var(--bg-secondary), var(--bg-secondary)),
linear-gradient(135deg, #FFD700, #FFA500);
} }
[data-theme="dark"] .snowflake {
color: var(--text-secondary);
opacity: 0.2;
}
[data-theme="dark"] .countdown-value {
color: #FFD700;
}
[data-theme="dark"] .countdown-separator {
color: #FFD700;
}
[data-theme="dark"] .user-tickets {
color: #FFD700;
}

6
frontend/src/pages/MonthlyLadder.jsx
View File

@ -106,7 +106,7 @@ export default function MonthlyLadder({ user }) {
</div> </div>
{/* Отсчет до нового года */} {/* Отсчет до нового года */}
<div className="countdown-card card"> <div className="countdown-card">
<div className="countdown-title"> <div className="countdown-title">
<Gift size={24} className="gift-icon" /> <Gift size={24} className="gift-icon" />
<h2>До Нового Года</h2> <h2>До Нового Года</h2>
@ -136,7 +136,7 @@ export default function MonthlyLadder({ user }) {
</div> </div>
{/* Топ 5 пользователей */} {/* Топ 5 пользователей */}
<div className="ladder-top card"> <div className="ladder-top">
<div className="ladder-top-header"> <div className="ladder-top-header">
<h2>Топ 5</h2> <h2>Топ 5</h2>
<button <button
@ -190,7 +190,7 @@ export default function MonthlyLadder({ user }) {
{/* Текущий пользователь (если не в топе) */} {/* Текущий пользователь (если не в топе) */}
{currentUser && currentUserRank > 5 && ( {currentUser && currentUserRank > 5 && (
<div className="current-user-card card"> <div className="current-user-card">
<h3>Ваша позиция</h3> <h3>Ваша позиция</h3>
<div className="current-user-item"> <div className="current-user-item">
<div className="user-rank"> <div className="user-rank">