feat: add tie screen and Android app download functionality
- Add tie screen showing eliminated players before tiebreaker - Excluded eliminated players from tiebreaker voting - Add Android app download button (web only) - Add version checking system for native app - Add update notification for outdated app versions - Add translations for new features (ES/EN)
This commit is contained in:
@@ -538,6 +538,146 @@ button:disabled {
|
||||
box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 78, 122, 0.3);
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
display: inline-block;
|
||||
padding: 14px 22px;
|
||||
font-size: 0.95em;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
|
||||
border: 3px solid var(--accent-success);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: var(--shadow-harsh), 0 0 20px rgba(46, 204, 113, 0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-download:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0px var(--bg-secondary), 0 0 30px rgba(46, 204, 113, 0.5);
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.btn-download:active {
|
||||
transform: translate(0, 0);
|
||||
box-shadow: 3px 3px 0px var(--bg-secondary), 0 0 15px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
/* Hide download button in native app */
|
||||
.native-app .btn-download {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
UPDATE NOTIFICATION
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
||||
|
||||
.update-notification-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
animation: overlayFadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes overlayFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.update-notification {
|
||||
background: var(--surface-card);
|
||||
border: 3px solid var(--accent-warning);
|
||||
border-radius: 0;
|
||||
padding: 30px;
|
||||
max-width: 400px;
|
||||
margin: 20px;
|
||||
box-shadow: var(--shadow-harsh), 0 0 40px rgba(230, 167, 60, 0.5);
|
||||
animation: notificationSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@keyframes notificationSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.update-notification h2 {
|
||||
margin: 0 0 15px 0;
|
||||
font-family: 'Bebas Neue', 'Crimson Text', Georgia, serif;
|
||||
font-size: 1.8em;
|
||||
letter-spacing: 3px;
|
||||
color: var(--accent-warning);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.update-notification p {
|
||||
margin: 0 0 25px 0;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.update-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-update,
|
||||
.btn-later {
|
||||
padding: 12px 24px;
|
||||
font-size: 0.9em;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
background: var(--surface-hover);
|
||||
border: 3px solid var(--border-medium);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-update {
|
||||
background: linear-gradient(135deg, var(--accent-success) 0%, #1e7a3e 100%);
|
||||
border-color: var(--accent-success);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-update:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 4px 4px 0px var(--bg-secondary), 0 0 20px rgba(46, 204, 113, 0.5);
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.btn-later:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 4px 4px 0px var(--bg-secondary);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
WELCOME SCREEN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
||||
@@ -1379,6 +1519,64 @@ button:disabled {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
TIE SCREEN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
||||
|
||||
#tie-screen h1 {
|
||||
font-size: 2.5em;
|
||||
color: var(--accent-warning);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
animation: tieFlash 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes tieFlash {
|
||||
0% {
|
||||
text-shadow: 0 0 10px var(--accent-warning);
|
||||
}
|
||||
100% {
|
||||
text-shadow: 0 0 20px var(--accent-warning), 0 0 30px var(--accent-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.tie-info {
|
||||
background: var(--surface-card);
|
||||
border: 2px solid var(--border-medium);
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.tie-info .info-text {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.eliminated-players {
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
color: var(--accent-danger);
|
||||
margin-top: 10px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#tie-screen button {
|
||||
margin-top: 20px;
|
||||
font-size: 1.1em;
|
||||
padding: 15px 30px;
|
||||
background: var(--accent-warning);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#tie-screen button:hover {
|
||||
background: var(--accent-warning);
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
POOL SELECTION
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
||||
|
||||
Reference in New Issue
Block a user