Slavasil/ruby-sea-battle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

populate the UI kit page

Browse Source
This commit is contained in:
Slavasil
2026-10-13 16:14:08 +03:00
parent e5ec2e012b
commit 582ecb7c74
8 changed files with 520 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+96 -8
View File
@@ -3,12 +3,28 @@
--bg-accent: #e3eff8;
--primary: #2f80ed;
--primary-dark: #1d6bd8;
--primary-darker: #134c9c;
--primary-soft: #dbeafe;
--primary-light: #82b3f4;
--text: #1e3a5f;
--text-soft: #5b7a9d;
--danger: #e0483e;
--ship: #1d3a5f;
--fire-fg: #f0564a;
--fire-bg: #ffbba8;
--radius: 14px;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 16pt;
}
@font-face {
font-family: 'Comfortaa';
src: url('./assets/fonts/Comfortaa-VariableFont_wght.ttf');
}
@font-face {
font-family: 'Nunito';
src: url('./assets/fonts/Nunito-VariableFont_wght.ttf');
}
* {
@@ -25,6 +41,10 @@ body {
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Comfortaa';
}
.page {
min-height: 100vh;
display: flex;
@@ -58,14 +78,19 @@ body {
}
.btn {
font-family: 'Comfortaa';
border: none;
border-radius: var(--radius);
cursor: pointer;
font-family: inherit;
font-weight: 700;
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:disabled {
cursor: default;
background: var(--primary-light);
}
.btn-big {
padding: 18px 28px;
font-size: 22px;
@@ -74,12 +99,12 @@ body {
box-shadow: 0 6px 0 rgba(29, 107, 216, 0.35), 0 10px 20px rgba(47, 128, 237, 0.25);
}
.btn-big:hover {
.btn-big:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 0 rgba(29, 107, 216, 0.35), 0 14px 24px rgba(47, 128, 237, 0.3);
}
.btn-big:active {
.btn-big:active:not(:disabled) {
transform: translateY(2px);
box-shadow: 0 3px 0 rgba(29, 107, 216, 0.35);
}
@@ -91,13 +116,12 @@ body {
background: var(--primary);
}
.btn-primary:hover {
.btn-primary:hover:not(:disabled) {
background: var(--primary-dark);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: default;
.btn-primary:active:not(:disabled) {
background: var(--primary-darker);
}
.join-section {
@@ -125,6 +149,18 @@ body {
gap: 10px;
}
input {
font-size: 32px;
font-weight: 700;
color: var(--text);
background: #fff;
border: 2px solid #c9dcee;
border-radius: 12px;
outline: none;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
caret-color: var(--primary);
}
.code-cell {
width: 58px;
height: 68px;
@@ -331,6 +367,58 @@ body {
font-size: 14px;
}
.sea-grid {
padding: 3px;
display: inline-grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 3px;
background-color: var(--primary-soft);
}
.sea-cell {
width: 30px;
height: 30px;
background: var(--bg);
display: table-cell;
vertical-align: center;
text-align: center;
}
.miss-cell {
position: relative;
}
.miss-cell::before {
display: block;
content: ' ';
width: 8px;
height: 8px;
position: relative;
left: calc(50% - 4px);
top: calc(50% - 4px);
border-radius: 50%;
background-color: var(--primary-light);
}
.ship-cell, .damaged-ship-cell {
background-color: var(--ship);
}
.damaged-ship-cell {
color: var(--fire-fg);
}
.damaged-ship-cell::before, .destroyed-ship-cell::before {
display: block;
content: 'X';
}
.destroyed-ship-cell {
background-color: var(--fire-bg);
color: var(--fire-fg);
}
@media (max-width: 480px) {
.code-cell {
width: 48px;