chg: usr: refactor and redesign the gfx on front-end #4
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,6 +4,7 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
nohup.out
|
nohup.out
|
||||||
/public/build/
|
/public/build/
|
||||||
|
/config/reference.php
|
||||||
###< system7 - jotunheimr ###
|
###< system7 - jotunheimr ###
|
||||||
|
|
||||||
###> symfony/framework-bundle ###
|
###> symfony/framework-bundle ###
|
||||||
|
|||||||
@@ -1,181 +1,592 @@
|
|||||||
|
// ── Reset ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
* {
|
* {
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html {
|
||||||
background: #ffffff;
|
// Grid lives on html so it tiles across all pages including content pages
|
||||||
display: block;
|
background-color: #07090d;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px);
|
||||||
|
background-size: 46px 46px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Hero ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: #d1e8ff;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 950px;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Minesweeper grid texture
|
||||||
|
background-color: #07090d;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px);
|
||||||
|
background-size: 46px 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header section {
|
// Deep radial vignette – grid fades toward the centre
|
||||||
|
header::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
ellipse 85% 75% at 50% 50%,
|
||||||
|
#07090d 10%,
|
||||||
|
transparent 75%
|
||||||
|
);
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smoke at the bottom so header bleeds into body
|
||||||
|
header::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
background: linear-gradient(to bottom, transparent, #07090d);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Hero section ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 80px 40px 160px;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Decorative glow blobs in opposite corners
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -60px;
|
||||||
|
left: -60px;
|
||||||
|
width: 420px;
|
||||||
|
height: 420px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(173, 10, 5, 0.09) 0%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100px;
|
||||||
|
right: -60px;
|
||||||
|
width: 380px;
|
||||||
|
height: 380px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(35, 111, 135, 0.1) 0%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logo
|
||||||
|
.hero-logo {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 72px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
animation: appear 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-logo img {
|
||||||
|
width: 400px;
|
||||||
|
max-width: 82vw;
|
||||||
|
filter:
|
||||||
|
drop-shadow(0 0 40px rgba(35, 111, 135, 0.35))
|
||||||
|
drop-shadow(0 6px 20px rgba(0, 0, 0, 0.8));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Body text block
|
||||||
|
.hero-body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-sub {
|
||||||
|
font: 300 17px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(149, 207, 245, 0.9);
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
animation: rise 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-sub strong {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #95cff5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(149, 207, 245, 0.25);
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font: 800 58px 'Rajdhani', sans-serif;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 56px;
|
||||||
|
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
|
||||||
|
animation: rise 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── CTA button ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font: 800 28px 'Rajdhani', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 22px 100px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(246, 125, 82, 0.25);
|
||||||
|
|
||||||
|
background: linear-gradient(to bottom, #b30c06 0%, #d63d15 50%, #f67d52 100%);
|
||||||
|
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1px rgba(173, 10, 5, 0.2),
|
||||||
|
0 0 30px rgba(173, 10, 5, 0.35),
|
||||||
|
0 6px 24px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||||
|
|
||||||
|
transition: transform 220ms ease, box-shadow 220ms ease, letter-spacing 220ms ease;
|
||||||
|
animation: rise 0.8s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Outer glow layer (blurred duplicate, always visible)
|
||||||
|
.hero-cta::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -4px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(to bottom, #ad0a05, #f67d52);
|
||||||
|
filter: blur(18px);
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: -1;
|
||||||
|
transition: opacity 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
letter-spacing: 8px;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1px rgba(246, 125, 82, 0.3),
|
||||||
|
0 0 50px rgba(173, 10, 5, 0.65),
|
||||||
|
0 10px 32px rgba(0, 0, 0, 0.45),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta:hover::before {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Version / copyright line
|
||||||
|
.hero-meta {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
font: 400 12px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-top: 58px;
|
||||||
|
animation: rise 0.8s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta a {
|
||||||
|
color: rgba(149, 207, 245, 0.65);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 180ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta a:hover {
|
||||||
|
color: #95cff5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Compact hero (sub-pages) ─────────────────────────────────────────────────
|
||||||
|
|
||||||
|
.hero--compact {
|
||||||
|
min-height: unset;
|
||||||
|
padding: 36px 60px 48px;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: left;
|
||||||
|
gap: 52px;
|
||||||
|
|
||||||
|
&::before, &::after { display: none; }
|
||||||
|
|
||||||
|
.hero-logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
img { width: 180px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-body {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-sub {
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
padding: 12px 52px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also shrink the bottom fade on sub-pages
|
||||||
|
header:has(.hero--compact)::after {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Animations ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
@keyframes appear {
|
||||||
|
from { opacity: 0; transform: scale(0.94); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rise {
|
||||||
|
from { opacity: 0; transform: translateY(16px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Content pages (terms, privacy, contact) ──────────────────────────────────
|
||||||
|
|
||||||
|
main div.txt {
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 60px 40px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main div.txt h2 {
|
||||||
|
font: bold 28px 'Rajdhani', sans-serif;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main div.txt h3 {
|
||||||
|
font: bold 17px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(149, 207, 245, 0.9);
|
||||||
|
margin: 28px 0 10px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main div.txt p,
|
||||||
|
main div.txt li {
|
||||||
|
font: 400 15px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(255, 255, 255, 0.72);
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
main div.txt a {
|
||||||
|
color: #95cff5;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 180ms;
|
||||||
|
|
||||||
|
&:hover { color: #c5e8ff; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Technologies strip ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
main {
|
||||||
|
background: #07090d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-section {
|
||||||
|
padding: 48px 20px 72px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-label {
|
||||||
|
font: 600 11px 'Rajdhani', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
color: rgba(255, 255, 255, 0.14);
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-logos img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin: 8px 24px;
|
||||||
|
// Force all logos to white, then tint with the game's blue
|
||||||
|
filter: brightness(0) invert(1) opacity(0.35);
|
||||||
|
transition: filter 220ms ease, transform 220ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-logos img:hover {
|
||||||
|
// Bright white → blue-tinted on hover
|
||||||
|
filter:
|
||||||
|
brightness(0) invert(1)
|
||||||
|
sepia(1) saturate(3) hue-rotate(175deg) brightness(1.1)
|
||||||
|
opacity(0.9);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Footer ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: #040608;
|
||||||
|
border-top: 1px solid rgba(35, 111, 135, 0.12);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
max-width: 1100px;
|
||||||
max-width: 1300px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 60px 60px 52px;
|
||||||
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.logo img {
|
// Left: brand block
|
||||||
width: 350px;
|
.footer-brand {
|
||||||
margin: 50px 0;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.logo a {
|
.footer-logo {
|
||||||
display: block;
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
opacity: 0.55;
|
||||||
|
filter:
|
||||||
|
drop-shadow(0 0 12px rgba(35, 111, 135, 0.4))
|
||||||
|
brightness(1.1);
|
||||||
|
transition: opacity 250ms ease, filter 250ms ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
filter:
|
||||||
|
drop-shadow(0 0 20px rgba(35, 111, 135, 0.65))
|
||||||
|
brightness(1.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header section > img {
|
.footer-name {
|
||||||
position: absolute;
|
font: 700 22px 'Rajdhani', sans-serif;
|
||||||
width: 1300px;
|
color: rgba(255, 255, 255, 0.75);
|
||||||
height: 1300px;
|
letter-spacing: 2px;
|
||||||
right: -20%;
|
|
||||||
top: -10%;
|
|
||||||
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section > div {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section h1 {
|
|
||||||
font: bold 40px 'Rajdhani', sans-serif;
|
|
||||||
color: #434242;
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section h2 {
|
|
||||||
font: normal 32px 'Rajdhani', sans-serif;
|
|
||||||
color: #434242;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section h3 {
|
|
||||||
display: block;
|
|
||||||
font: bold 16px 'Rajdhani', sans-serif;
|
|
||||||
color: #434242;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section h3 img {
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section div.buttons > a {
|
|
||||||
background: #69788e;
|
|
||||||
display: table;
|
|
||||||
font: bold 32px 'Rajdhani', sans-serif;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-tagline {
|
||||||
|
font: 400 13px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(149, 207, 245, 0.7);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
max-width: 240px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Right: navigation
|
||||||
|
.footer-nav-label {
|
||||||
|
font: 700 11px 'Rajdhani', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
margin-bottom: 18px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav ul li a {
|
||||||
|
display: block;
|
||||||
|
font: 500 15px 'Rajdhani', sans-serif;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 5px solid #57667b;
|
text-transform: uppercase;
|
||||||
color: #FFFFFF;
|
letter-spacing: 1.5px;
|
||||||
padding: 25px 150px;
|
white-space: nowrap;
|
||||||
margin-bottom: 20px;
|
padding: 6px 0;
|
||||||
|
transition: color 180ms ease, letter-spacing 180ms ease;
|
||||||
|
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
&:hover {
|
||||||
border-radius: 20px;
|
color: #95cff5;
|
||||||
transition: all 250ms ease-in-out;
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.buttons > a:hover {
|
// Bottom copyright bar
|
||||||
background: #57667b;
|
.footer-copy {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
padding: 16px 60px;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
-webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
p {
|
||||||
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
font: 400 11px 'Rajdhani', sans-serif;
|
||||||
-webkit-transition: all 250ms ease-in-out;
|
color: rgba(255, 255, 255, 0.45);
|
||||||
-moz-transition: all 250ms ease-in-out;
|
letter-spacing: 0.5px;
|
||||||
-o-transition: all 250ms ease-in-out;
|
|
||||||
transition: all 250ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section div.buttons > a.small {
|
|
||||||
background: #83aed9;
|
|
||||||
display: inline-block;
|
|
||||||
font: bold 22px 'Rajdhani', sans-serif;
|
|
||||||
border: 1px solid #6890ba;
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
-webkit-transition: all 250ms ease-in-out;
|
|
||||||
-moz-transition: all 250ms ease-in-out;
|
|
||||||
-o-transition: all 250ms ease-in-out;
|
|
||||||
transition: all 250ms ease-in-out;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
header section div.buttons > a.small:hover {
|
|
||||||
background: #86b5e1;
|
|
||||||
border: 1px solid #658fb8;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
-webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
-webkit-transition: all 250ms ease-in-out;
|
|
||||||
-moz-transition: all 250ms ease-in-out;
|
|
||||||
-o-transition: all 250ms ease-in-out;
|
|
||||||
transition: all 250ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1100px) {
|
|
||||||
header section {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.buttons > a {
|
a {
|
||||||
margin: 0 auto 20px auto;
|
color: rgba(149, 207, 245, 0.6);
|
||||||
}
|
text-decoration: none;
|
||||||
|
transition: color 180ms;
|
||||||
|
|
||||||
header section h1 {
|
&:hover { color: #95cff5; }
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section div.logo img {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header section > img {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
// ── Responsive ───────────────────────────────────────────────────────────────
|
||||||
/*header {*/
|
|
||||||
/*min-height: 100%;*/
|
|
||||||
/*height: auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
header section {
|
@media screen and (max-width: 768px) {
|
||||||
width: auto;
|
.hero--compact {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: 36px 24px 44px;
|
||||||
|
gap: 28px;
|
||||||
|
|
||||||
|
.hero-body { align-items: center; }
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.logo img {
|
.footer-inner {
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px 30px 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header section div.buttons > a {
|
.footer-brand {
|
||||||
display: block;
|
align-items: center;
|
||||||
padding: 25px 5px;
|
}
|
||||||
|
|
||||||
|
.footer-tagline {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav-label {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav ul {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-copy {
|
||||||
|
padding: 16px 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
padding: 20px 72px 18px;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
|
.hero {
|
||||||
|
padding: 60px 24px 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-logo img {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-logo {
|
||||||
|
margin-bottom: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-sub {
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta {
|
||||||
|
padding: 18px 48px 16px;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@@ -88,7 +88,7 @@ main {
|
|||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #354d6a;
|
color: #354d6a;
|
||||||
width: 500px;
|
width: 660px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
-webkit-border-radius: 10px;
|
-webkit-border-radius: 10px;
|
||||||
@@ -109,47 +109,93 @@ main {
|
|||||||
color: #386e8c;
|
color: #386e8c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy {
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite {
|
||||||
|
padding: 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #386e8c;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
background: #d0e8f5;
|
||||||
margin-bottom: 10px;
|
border: 1px solid #7ab8d8;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: text;
|
||||||
|
transition: border-color 200ms ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #236f87;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy input {
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-icon {
|
||||||
|
color: #236f87;
|
||||||
|
font-size: 13px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-input {
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 100%;
|
color: #1a4a6a;
|
||||||
padding: 0 20px;
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: text;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
-webkit-border-radius: 3px;
|
&::selection {
|
||||||
border-radius: 3px;
|
background: rgba(35, 111, 135, 0.2);
|
||||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
}
|
||||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a {
|
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-copy-btn {
|
||||||
background: #d8e3ea;
|
display: inline-flex;
|
||||||
display: inline-table;
|
align-items: center;
|
||||||
text-decoration: none;
|
gap: 7px;
|
||||||
color: #126aa2;
|
background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%);
|
||||||
padding: 10px 50px;
|
border: 1px solid #2e7a9a;
|
||||||
margin: 0 2.5px;
|
color: #e0f4ff;
|
||||||
|
font-family: 'Rajdhani', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
padding: 9px 32px;
|
||||||
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: all 220ms ease;
|
||||||
|
|
||||||
-webkit-border-radius: 3px;
|
&:hover {
|
||||||
border-radius: 3px;
|
background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%);
|
||||||
-webkit-transition: all 250ms ease-in-out;
|
border-color: #5ba4d4;
|
||||||
transition: all 250ms ease-in-out;
|
color: #fff;
|
||||||
}
|
box-shadow: 0 0 10px rgba(35, 111, 135, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a:hover {
|
&.copied {
|
||||||
background: #a4afb6;
|
background: linear-gradient(to bottom, #1a6844 0%, #135233 100%);
|
||||||
color: #ffffff;
|
border-color: #2a9e60;
|
||||||
|
color: #a0f0c0;
|
||||||
-webkit-transition: all 250ms ease-in-out;
|
box-shadow: 0 0 8px rgba(26, 104, 68, 0.5);
|
||||||
transition: all 250ms ease-in-out;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#mine-wrapper .game-wrapper .users {
|
#mine-wrapper .game-wrapper .users {
|
||||||
|
|||||||
@@ -7,12 +7,42 @@
|
|||||||
* file that was distributed with this source code.
|
* file that was distributed with this source code.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||||
import { useGame } from '@mine-contexts';
|
import { useGame } from '@mine-contexts';
|
||||||
import { DESC } from '@mine-utils';
|
import { DESC } from '@mine-utils';
|
||||||
import useStepTimer from './useStepTimer';
|
import useStepTimer from './useStepTimer';
|
||||||
|
|
||||||
|
const ShareLinkBox = ({ url }) => {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const handleCopy = () => {
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2500);
|
||||||
|
}).catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="share-invite">
|
||||||
|
<p className="share-invite-label">Share this link with your opponent</p>
|
||||||
|
<div className="share-url-box" onClick={e => e.currentTarget.querySelector('input').select()}>
|
||||||
|
<i className="fa fa-link share-url-icon" />
|
||||||
|
<input
|
||||||
|
className="share-url-input"
|
||||||
|
readOnly
|
||||||
|
value={url}
|
||||||
|
onClick={e => e.target.select()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className={`share-copy-btn${copied ? ' copied' : ''}`} onClick={handleCopy}>
|
||||||
|
<i className={`fa ${copied ? 'fa-check' : 'fa-clipboard'}`} />
|
||||||
|
{copied ? 'Copied!' : 'Copy link'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
/** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
|
/** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
|
||||||
const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
||||||
const {
|
const {
|
||||||
@@ -76,13 +106,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
|
|||||||
const wInit = (revealedCells = []) => {
|
const wInit = (revealedCells = []) => {
|
||||||
setGridReady(true);
|
setGridReady(true);
|
||||||
showOverlay('We are waiting for your opponent...', gameAssoc ? (
|
showOverlay('We are waiting for your opponent...', gameAssoc ? (
|
||||||
<div>
|
<ShareLinkBox url={`${window.location.href}/${gameAssoc}`} />
|
||||||
<h3>Share this unique link w/ your opponent</h3>
|
|
||||||
<div className="clippy">
|
|
||||||
<input id="foo" defaultValue={`${window.location.href}/${gameAssoc}`} />
|
|
||||||
</div>
|
|
||||||
<a href={`/play/${gameAssoc}`} target="_blank">Play w/ me!</a>
|
|
||||||
</div>
|
|
||||||
) : '');
|
) : '');
|
||||||
setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0);
|
setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0);
|
||||||
};
|
};
|
||||||
|
|||||||
1
public/images/technologies/bun.svg
Normal file
1
public/images/technologies/bun.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bun</title><path d="M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001ZM10.599 4.715c.334-.759.503-1.58.498-2.409 0-.145.202-.187.23-.029.658 2.783-.902 4.162-2.057 4.624-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977Zm2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172 1.962 2.111 1.307 4.067.556 5.051-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431Zm1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218 2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071.11.11 0 0 1-.153-.026.122.122 0 0 1-.022-.083 5.891 5.891 0 0 0-.737-2.331Zm-5.087.561c-.617.546-1.282.76-2.063 1-.117 0-.195-.078-.156-.181 1.752-.909 2.376-1.649 2.999-2.778 0 0 .155-.118.188.085 0 .304-.349 1.329-.968 1.874Zm4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62 2.955 2.955 0 0 1-.925-1.553.244.244 0 0 1 .064-.198.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197Zm-5.458-2.176a1.862 1.862 0 0 1-2.384-.245 1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114 1.931 1.931 0 0 1-.698.869v.001Zm8.495.005a1.86 1.86 0 0 1-2.381-.253 1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117 1.932 1.932 0 0 1-.702.868Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
1
public/images/technologies/howler.svg
Normal file
1
public/images/technologies/howler.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
18
public/images/technologies/mercure.svg
Normal file
18
public/images/technologies/mercure.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 765 144" xml:space="preserve">
|
||||||
|
<style>
|
||||||
|
.st2{fill:#495466}
|
||||||
|
</style>
|
||||||
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1=".0353619" y1="72" x2="144.0354" y2="72">
|
||||||
|
<stop offset="0" stop-color="#76c8dd"/>
|
||||||
|
<stop offset="1" stop-color="#2ab3d7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<path d="M72 144c-39.7 0-72-32.3-72-72S32.3 0 72 0s72 32.3 72 72-32.3 72-72 72zM72 6.1C35.7 6.1 6.1 35.7 6.1 72s29.6 65.9 65.9 65.9 66-29.6 66-65.9S108.4 6.1 72 6.1z" fill="url(#SVGID_1_)"/>
|
||||||
|
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="15.4924" y1="71.2317" x2="128.5783" y2="71.2317">
|
||||||
|
<stop offset="0" stop-color="#76c8dd"/>
|
||||||
|
<stop offset="1" stop-color="#2ab3d7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<path d="M72 14.7c-31.2 0-56.5 25.3-56.5 56.5 0 9.7 2.5 18.9 6.8 26.9 1.5-1.1 3.1-2.2 4.9-3.3 31-18.5 58.4-33.7 76.6-62 0 0-1.3 32-19.7 46.9-4.1 3.3-7.6 5.9-10.9 8 9.3-4.9 17.4-10.5 23.7-18 0 0-.5 21.5-16.3 31-5.9 3.5-10.8 5.5-15.8 7 9-2 14.9-4.5 19.6-7.7-4 13.3-12.7 20.3-26.2 22.3-4.9.5-9.1-.5-13.5-1.5 8.1 4.5 17.4 7 27.3 7 31.2 0 56.5-25.3 56.5-56.5S103.3 14.7 72 14.7z" fill="url(#SVGID_2_)"/>
|
||||||
|
<g>
|
||||||
|
<path class="st2" d="M270 43.8c-1.7-1.9-2.9-3.2-3.5-3.9l-15-15.6c-2.9-3.2-6.2-4.9-10.2-4.9-3.9 0-7.5 1.6-10.6 4.9l-11.2 11.9-11.2-11.9c-2.8-3.2-6.1-4.9-10.2-4.9-3.8 0-7.2 1.6-10.2 4.9l-15 15.6c-.7.7-1.8 1.8-3.3 3.5-1.5 1.6-2.9 3.4-4 5.2s-1.7 4.2-1.8 6.9v56.2c0 3.9 1.3 7 3.8 9.2 2.6 2.2 5.6 3.3 9.1 3.3s6.6-1.1 9.1-3.3c2.6-2.2 3.8-5.3 3.8-9.2V54.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v56.9c0 4 1.3 7.2 3.8 9.4 2.6 2.3 5.6 3.4 9.1 3.4 3.4 0 6.4-1.1 9-3.4 2.6-2.3 3.8-5.4 3.8-9.4V55c0-4.8 3.9-8.6 8.6-8.6 4.8 0 8.6 3.9 8.6 8.6v56.7c0 3.9 1.3 7 3.8 9.2 2.6 2.2 5.6 3.3 9.1 3.3s6.6-1.1 9.1-3.3c2.6-2.2 3.8-5.3 3.8-9.2V55.6c-.2-2.3-.8-4.3-1.7-6.1-.6-1.9-1.9-3.8-3.6-5.7zM338.5 46.1c3.4 0 6.4-1.3 9-3.9 2.6-2.6 3.8-5.7 3.8-9.2 0-3.4-1.3-6.4-3.8-8.9s-5.5-3.8-9.1-3.8H303c-3.8 0-7.4 1-10.7 2.9-3.3 2-5.9 4.6-7.9 8-2 3.3-2.9 7-2.9 10.9V49c0 5.7.9 10.4 2.7 13.9 1.8 3.6 5.2 6.2 10.1 7.9-5.2 1.8-8.7 4.6-10.3 8.3-1.7 3.8-2.5 8.7-2.5 14.7v8c0 3.9 1 7.6 2.9 10.9 2 3.3 4.6 6 7.9 8 3.3 2 6.9 2.9 10.7 2.9h35.5c3.5-.2 6.6-1.5 9.1-4s3.8-5.4 3.8-8.8c0-3.6-1.3-6.7-3.8-9.2-2.5-2.5-5.5-3.8-9.1-3.8h-31.3V85.5H336c3.4 0 6.4-1.3 9-3.8 2.6-2.6 3.8-5.6 3.8-9 0-3.6-1.3-6.7-3.8-9.2-2.5-2.5-5.5-3.8-9.1-3.8h-28.8V46.1h31.4zM413 26.6c-4.5-4.2-9.7-6.3-15.5-6.3h-28.8c-3.6 0-6.7 1.3-9.2 3.8-2.5 2.5-3.8 5.6-3.8 9.2V111c0 3.5 1.3 6.6 3.8 9.1s5.6 3.8 9.2 3.8c3.5 0 6.5-1.3 9-3.8s3.7-5.5 3.7-9.1V73.1l25.2 30.7v7.2c0 3.4 1.2 6.4 3.7 9 2.5 2.6 5.5 3.8 9 3.8 3.4 0 6.4-1.3 8.8-3.8 2.5-2.5 3.7-5.5 3.7-9.1v-7.5c0-4.8-1-9-2.9-12.5s-5.1-6.7-9.5-9.4c8.7-4.3 13-11.4 13-21.1v-5.8c0-6-2.3-11.3-6.9-15.9L413 26.6zm-18.5 44.3h-13.1V58.7c0-7 5.6-12.6 12.6-12.6s12.6 5.6 12.6 12.6c0 6.7-5.4 12.2-12.1 12.2zM495.7 46.1c3.4 0 6.5-1.3 9.1-3.8 2.6-2.6 3.9-5.6 3.9-9 0-3.5-1.3-6.6-3.9-9.1-2.6-2.6-5.6-3.8-9.1-3.8H460c-3.9 0-7.6 1-10.9 2.9-3.3 2-6 4.6-8 8-2 3.3-2.9 7-2.9 10.9v59.6c0 3.9 1 7.6 2.9 10.9 2 3.3 4.6 6 8 8 3.3 2 7 2.9 10.9 2.9h35.4c3.5 0 6.6-1.2 9.1-3.7 2.6-2.5 3.8-5.5 3.8-9s-1.3-6.6-3.8-9.1c-2.6-2.5-5.6-3.8-9.1-3.8H464V46.1h31.7zM575.8 20c-3.5 0-6.6 1.3-9.1 3.9-2.6 2.6-3.8 5.6-3.8 9.1v53c0 6.6-5.3 11.9-11.9 11.9-6.6 0-11.9-5.3-11.9-11.9V33.6c0-3.8-1.2-7.1-3.7-9.7-2.5-2.6-5.6-3.9-9.3-3.9s-6.8 1.3-9.3 3.9c-2.5 2.6-3.7 5.7-3.7 9.4v66.4c0 4.8 1.1 9 3.4 12.7 2.3 3.6 5.3 6.5 9.2 8.5 3.9 2 8.2 3 13.1 3 5.7 0 10.5-1.5 14.5-4.4 4-2.9 6.9-7.2 8.6-12.8.2-.5.4-.7.6-.7.2 0 .3.2.3.7v4.4c0 3.6 1.3 6.7 3.8 9.2 2.6 2.5 5.6 3.8 9.1 3.8 3.6 0 6.7-1.3 9.3-3.8 2.6-2.5 3.8-5.6 3.8-9.2V33c0-3.4-1.2-6.3-3.5-8.8-2.3-2.6-5.9-4.2-9.5-4.2zM651.9 26.6c-4.5-4.2-9.7-6.3-15.5-6.3h-28.8c-3.6 0-6.7 1.3-9.2 3.8-2.5 2.5-3.8 5.6-3.8 9.2V111c0 3.5 1.3 6.6 3.8 9.1s5.6 3.8 9.2 3.8c3.5 0 6.5-1.3 9-3.8s3.7-5.5 3.7-9.1V73.1l25.2 30.7v7.2c0 3.4 1.2 6.4 3.7 9 2.5 2.6 5.5 3.8 9 3.8 3.4 0 6.4-1.3 8.8-3.8 2.5-2.5 3.7-5.5 3.7-9.1v-7.5c0-4.8-1-9-2.9-12.5s-5.1-6.7-9.5-9.4c8.7-4.3 13-11.4 13-21.1v-5.8c0-6-2.3-11.3-6.9-15.9l-12.5-12.1zm-18.5 44.3h-13.1V58.7c0-7 5.6-12.6 12.6-12.6s12.6 5.6 12.6 12.6c.1 6.7-5.4 12.2-12.1 12.2zM751.2 64.6C763.8 58 765 40.9 765 40.9c-12.6 13.8-31.4 19.9-52.6 27.5-5 1.8-7.9 1.1-9.6.7v-23h31.3c3.4 0 6.4-1.3 9-3.9 2.6-2.6 3.8-5.7 3.8-9.2 0-3.4-1.3-6.4-3.8-8.9s-5.5-3.8-9.1-3.8h-35.5c-3.8 0-7.4 1-10.7 2.9-3.3 2-5.9 4.6-7.9 8-2 3.3-2.9 7-2.9 10.9V49c0 5.7.9 10.4 2.7 13.9 1.8 3.6 5.2 6.2 10.1 7.9-5.2 1.8-8.7 4.6-10.3 8.3-1.7 3.8-2.5 8.7-2.5 14.7v8c0 3.9 1 7.6 2.9 10.9 2 3.3 4.6 6 7.9 8 3.3 2 6.9 2.9 10.7 2.9H734c3.5-.2 6.6-1.5 9.1-4s3.8-5.4 3.8-8.8c0-3.6-1.3-6.7-3.8-9.2-2.5-2.5-5.5-3.8-9.1-3.8h-31.3v-9.7c12.3-2.3 22.4-2.9 30.4-2.7 9.2-.1 15.1-3.1 18-10-3.2 1.4-7.2 2.3-13.4 2.7 3.3-.4 6.7-1.1 10.7-2.6 10.8-3.9 11.4-15.4 11.4-15.4-4.3 3.5-9.9 6-16.2 7.9 2.3-.8 4.8-1.9 7.6-3.4z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.8 KiB |
1
public/images/technologies/phpstorm.svg
Normal file
1
public/images/technologies/phpstorm.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PhpStorm</title><path d="M7.833 6.611v-.055c0-1-.667-1.5-1.778-1.5H4.389v3.056h1.722c1.111-.001 1.722-.668 1.722-1.501zM0 0v24h24V0H0zm2.167 3.111h4.056c2.389 0 3.833 1.389 3.833 3.445v.055c0 2.333-1.778 3.5-4.056 3.5H4.333v3H2.167v-10zM11.278 21h-9v-1.5h9V21zM18.5 10.222c0 2-1.5 3.111-3.667 3.111-1.5-.056-3-.611-4.222-1.667l1.278-1.556c.89.722 1.833 1.222 3 1.222.889 0 1.444-.333 1.444-.944v-.056c0-.555-.333-.833-2-1.277C12.333 8.555 11 8 11 6v-.056c0-1.833 1.444-3 3.5-3 1.444 0 2.723.444 3.723 1.278l-1.167 1.667c-.889-.611-1.777-1-2.611-1-.833 0-1.278.389-1.278.889v.056c0 .667.445.889 2.167 1.333 2 .556 3.167 1.278 3.167 3v.055z"/></svg>
|
||||||
|
After Width: | Height: | Size: 740 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
1
public/images/technologies/symfony.svg
Normal file
1
public/images/technologies/symfony.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Symfony</title><path d="M24 12c0 6.628-5.372 12-12 12S0 18.628 0 12 5.372 0 12 0s12 5.372 12 12zm-6.753-7.561c-1.22.042-2.283.715-3.075 1.644-.878 1.02-1.461 2.229-1.881 3.461-.753-.614-1.332-1.414-2.539-1.761-.966-.297-2.015-.105-2.813.514-.41.319-.71.757-.861 1.254-.36 1.176.381 2.225.719 2.6l.737.79c.15.154.519.56.339 1.138-.193.631-.951 1.037-1.732.799-.348-.106-.848-.366-.734-.73.045-.15.152-.263.21-.391.052-.11.077-.194.095-.242.141-.465-.053-1.07-.551-1.223-.465-.143-.939-.03-1.125.566-.209.68.117 1.913 1.86 2.449 2.04.628 3.765-.484 4.009-1.932.153-.907-.255-1.582-1.006-2.447l-.612-.677c-.371-.37-.497-1.002-.114-1.485.324-.409.785-.584 1.539-.379 1.103.3 1.594 1.063 2.412 1.68-.338 1.11-.56 2.223-.759 3.222l-.123.746c-.585 3.07-1.033 4.757-2.194 5.726-.234.166-.57.416-1.073.434-.266.005-.352-.176-.355-.257-.006-.184.15-.271.255-.353.154-.083.39-.224.372-.674-.016-.532-.456-.994-1.094-.973-.477.017-1.203.465-1.176 1.286.028.85.819 1.485 2.012 1.444.638-.021 2.062-.281 3.464-1.949 1.633-1.911 2.09-4.101 2.434-5.706l.383-2.116c.213.024.441.042.69.048 2.032.044 3.049-1.01 3.064-1.776.01-.464-.304-.921-.744-.91-.386.009-.718.278-.806.654-.094.428.646.813.068 1.189-.41.266-1.146.452-2.184.3l.188-1.042c.386-1.976.859-4.407 2.661-4.467.132-.007.612.006.623.323.003.105-.022.134-.147.375-.115.155-.174.345-.168.537.017.504.4.836.957.816.743-.023.955-.748.945-1.119-.032-.874-.952-1.424-2.17-1.386z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/images/technologies/tanstack-query.svg
Normal file
1
public/images/technologies/tanstack-query.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>React Query</title><path d="M6.9297 13.6875c.164-.0938.375-.0352.4687.1328l.0625.1055c.4805.8515.9805 1.6601 1.5 2.4258.6133.9023 1.3047 1.8164 2.0743 2.7421a.3455.3455 0 0 1-.0391.4844l-.0742.0664c-2.543 2.2227-4.1914 2.664-4.9532 1.332-.746-1.3046-.4765-3.6718.8086-7.1093a.3437.3437 0 0 1 .1524-.1797ZM17.75 16.3008c.1836-.0313.3594.086.3945.2695l.0196.1016c.6289 3.2851.1875 4.9297-1.3243 4.9297-1.4804 0-3.3593-1.4024-5.6484-4.2032a.3271.3271 0 0 1-.0742-.2226c0-.1875.1562-.3399.3437-.3399h.1211a32.9838 32.9838 0 0 0 2.8086-.0976c1.0703-.086 2.1914-.2305 3.3594-.4375zm.871-6.9766a.3528.3528 0 0 1 .4454-.211l.1016.0352c3.2617 1.1094 4.5039 2.332 3.7187 3.6641-.7656 1.3047-2.9922 2.254-6.6836 2.8477-.082.0117-.168-.004-.2383-.047-.168-.0976-.2265-.3085-.125-.4765l.0625-.1054c.504-.8438.957-1.6836 1.3672-2.5235.4766-.9883.9297-2.0508 1.3516-3.1836zM7.797 8.3398c.082-.0117.168.004.2383.047.168.0976.2265.3085.125.4765l-.0625.1054a34.0882 34.0882 0 0 0-1.3672 2.5235c-.4766.9883-.9297 2.0508-1.3516 3.1836a.3528.3528 0 0 1-.4453.211l-.1016-.0352c-3.2617-1.1094-4.5039-2.332-3.7187-3.6641.7656-1.3047 2.9922-2.254 6.6836-2.8477Zm5.2812-3.9843c2.543-2.2227 4.1914-2.664 4.9532-1.332.746 1.3046.4765 3.6718-.8086 7.1093a.3436.3436 0 0 1-.1524.1797c-.164.0938-.375.0352-.4687-.1328l-.0625-.1055c-.4805-.8515-.9805-1.6601-1.5-2.4258-.6133-.9023-1.3047-1.8164-2.0743-2.7421a.3455.3455 0 0 1 .0391-.4844Zm-5.793-2.082c1.4805 0 3.3633 1.4023 5.6485 4.203a.3488.3488 0 0 1 .0781.2188c-.0039.1914-.1562.3438-.3476.3438l-.1172-.004a34.5835 34.5835 0 0 0-2.8086.1016c-1.0742.086-2.1953.2305-3.3633.4375a.343.343 0 0 1-.3945-.2734l-.0196-.0977c-.629-3.2851-.1876-4.9297 1.3242-4.9297Zm2.8711 5.8124h3.6875a.638.638 0 0 1 .5508.3164l1.8477 3.2188a.6437.6437 0 0 1 0 .6289l-1.8477 3.2227a.638.638 0 0 1-.5507.3164h-3.6875c-.2266 0-.4375-.1211-.547-.3164L7.7579 12.25a.6437.6437 0 0 1 0-.629l1.8516-3.2187c.1093-.1953.3203-.3164.5468-.3164Zm3.2305.793a.638.638 0 0 1 .5508.3164l1.3906 2.4258a.6437.6437 0 0 1 0 .6289l-1.3906 2.4297a.638.638 0 0 1-.5508.3164h-2.7734c-.2266 0-.4375-.1211-.5469-.3164L8.672 12.25a.6437.6437 0 0 1 0-.629l1.3945-2.4257c.1094-.1953.3203-.3164.5469-.3164Zm-.4922.8672h-1.789c-.2266 0-.4336.1172-.547.3164l-.8983 1.5586a.6437.6437 0 0 0 0 .6289l.8984 1.5625a.6317.6317 0 0 0 .5469.3164h1.789a.6317.6317 0 0 0 .547-.3164l.8983-1.5625a.6437.6437 0 0 0 0-.629l-.8984-1.5585c-.1133-.1992-.3203-.3164-.5469-.3164Zm-.4765.8281c.2265 0 .4375.1211.5468.3164l.422.7305c.1132.1953.1132.4375 0 .6289l-.422.7344c-.1093.1953-.3203.3164-.5468.3164h-.836a.6317.6317 0 0 1-.5468-.3164l-.422-.7344c-.1132-.1914-.1132-.4336 0-.629l.422-.7304a.6317.6317 0 0 1 .5468-.3164zm-.418.8164a.548.548 0 0 0-.4727.2735c-.0976.168-.0976.375 0 .5468a.5444.5444 0 0 0 .4727.2696.5444.5444 0 0 0 .4727-.2696c.0976-.1718.0976-.3789 0-.5468A.548.548 0 0 0 12 11.3906Zm-4.4219.5469h.9805M18.9805 7.75c.3906-1.8945.4765-3.3438.2226-4.3984-.1484-.629-.4218-1.1368-.8398-1.5078-.4414-.3907-1-.582-1.625-.582-1.0352 0-2.1211.4726-3.2813 1.3671-.4726.3633-.9648.8047-1.4726 1.3164-.043-.0508-.086-.1015-.1367-.1445-1.4454-1.2852-2.6602-2.082-3.6993-2.3906-.6171-.1836-1.1953-.1993-1.7226-.0235-.5586.1875-1.004.5742-1.3164 1.1172-.5156.8945-.6524 2.0742-.461 3.5274.0782.5898.2149 1.2343.4024 1.9335a1.1187 1.1187 0 0 0-.2149.047C3.008 8.621 1.711 9.2694.9258 10.0155c-.4649.4414-.7695.9375-.8828 1.4805-.1133.5781 0 1.1562.3125 1.6992.5156.8945 1.4648 1.5977 2.8164 2.1563.543.2226 1.1562.4257 1.8437.6093a1.0227 1.0227 0 0 0-.0703.2266c-.3906 1.8906-.4765 3.3438-.2226 4.3945.1484.629.4257 1.1407.8398 1.5078.4414.3907 1 .582 1.625.582 1.0352 0 2.121-.4726 3.2813-1.3632.4765-.3711.9726-.8164 1.4882-1.336a1.2 1.2 0 0 0 .1953.2266c1.4454 1.2852 2.6602 2.082 3.6993 2.3906.6172.1836 1.1953.1993 1.7226.0235.5586-.1875 1.004-.5742 1.3164-1.1172.5157-.8945.6524-2.0742.461-3.5273-.082-.6133-.2227-1.2813-.4258-2.0118a1.2248 1.2248 0 0 0 .2383-.0468c1.828-.6094 3.125-1.2578 3.9101-2.004.4649-.4413.7696-.9374.8828-1.4804.1133-.5781 0-1.1563-.3125-1.6992-.5156-.8946-1.4648-1.5977-2.8164-2.1563-.5586-.2304-1.1953-.4414-1.9062-.625a.8647.8647 0 0 0 .0586-.1953z"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.1 KiB |
1
public/images/technologies/vite.svg
Normal file
1
public/images/technologies/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vite</title><path d="M13.056 23.238a.57.57 0 0 1-1.02-.355v-5.202c0-.63-.512-1.143-1.144-1.143H5.148a.57.57 0 0 1-.464-.903l3.777-5.29c.54-.753 0-1.804-.93-1.804H.57a.574.574 0 0 1-.543-.746.6.6 0 0 1 .08-.157L5.008.78a.57.57 0 0 1 .467-.24h14.589a.57.57 0 0 1 .466.903l-3.778 5.29c-.54.755 0 1.806.93 1.806h5.745c.238 0 .424.138.513.322a.56.56 0 0 1-.063.603z"/></svg>
|
||||||
|
After Width: | Height: | Size: 462 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
@@ -3,93 +3,83 @@
|
|||||||
{% block title %} - The Game{% endblock %}
|
{% block title %} - The Game{% endblock %}
|
||||||
|
|
||||||
{% block metas %}
|
{% block metas %}
|
||||||
<meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
|
<meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website"/>
|
||||||
<meta property="og:title" content="MineSeeker"/>
|
<meta property="og:title" content="MineSeeker"/>
|
||||||
<meta property="og:description" content="A multiplayer minesweeper game"/>
|
<meta property="og:description" content="A multiplayer minesweeper game"/>
|
||||||
<meta property="og:image"
|
<meta property="og:image"
|
||||||
content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/images/mine-1600x627.png') }}"/>
|
content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<section class="header-content">
|
<section
|
||||||
<div class="logo">
|
class="hero{% if app.request.attributes.get('_route') != 'MineSeekerBundle_homepage' %} hero--compact{% endif %}">
|
||||||
<a href="{{ path('MineSeekerBundle_homepage') }}" target="_self">
|
|
||||||
<img src="{{ asset('images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"/>
|
<a class="hero-logo" href="{{ path('MineSeekerBundle_homepage') }}">
|
||||||
</a>
|
<img src="{{ asset('images/mine-logo-txt.png') }}" alt="MineSeeker"/>
|
||||||
</div>
|
</a>
|
||||||
<div>
|
|
||||||
<div id="id_welcome"{% if app.user.facebookId is defined and app.user.facebookId is not null %} style="margin-bottom:50px"{% endif %}>
|
<div class="hero-body">
|
||||||
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
|
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
|
||||||
{% if app.user.facebookId is not null %}
|
<p class="hero-sub">
|
||||||
<div>
|
{% if app.user.facebookId is defined and app.user.facebookId is not null %}
|
||||||
<img src="http://graph.facebook.com/{{ app.user.facebookId }}/picture?type=square&width=100&height=100"
|
<img class="hero-avatar"
|
||||||
alt="Facebook profile"/>
|
src="http://graph.facebook.com/{{ app.user.facebookId }}/picture?type=square&width=80&height=80"
|
||||||
</div>
|
alt=""/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div>
|
Welcome back, <strong>{{ app.user.realName is not null ? app.user.realName : app.user.username }}</strong>
|
||||||
<h2{% if app.user.facebookId is defined and app.user.facebookId is not null %} style="margin-top:0"{% endif %}>
|
</p>
|
||||||
Hello, {{ app.user.realName is not null ? app.user.realName : app.user.username }}!
|
<h1>Ready for another round?</h1>
|
||||||
</h2>
|
{% else %}
|
||||||
<h1>Let's play!! :D</h1>
|
<p class="hero-sub">Multiplayer minesweeper — reimagined</p>
|
||||||
</div>
|
<h1>No account needed.<br>Just play.</h1>
|
||||||
{% else %}
|
{% endif %}
|
||||||
<div>
|
<a href="{{ path('MineSeekerBundle_gamePlay') }}" class="hero-cta">Play Now</a>
|
||||||
<h2>A minesweeper game rethought...</h2>
|
</div>
|
||||||
<h1>...and you can play w/o register!!</h1>
|
|
||||||
</div>
|
</section>
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="buttons">
|
|
||||||
<a href="{{ path('MineSeekerBundle_gamePlay') }}">Play NOW!</a>
|
|
||||||
{#
|
|
||||||
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
|
|
||||||
<a href="{{ path('fos_user_security_logout') }}" class="small">
|
|
||||||
{{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<a href="{{ path('fos_user_registration_register') }}" class="small">Sign up</a> ·
|
|
||||||
<a href="{{ path('fos_user_security_login') }}" class="small">Sign in</a>
|
|
||||||
{% endif %}
|
|
||||||
#}
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
version {{ version }} • MineSeeker © {{ "now"|date("Y") }} •
|
|
||||||
<a href="https://www.splendidbear.org">www.splendidbear.org</a>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<img src="{{ asset('images/mine-logo-logo.png') }}" alt="MineSeeker Logo"/>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="txt">
|
<div class="tech-section">
|
||||||
<div class="technologies">
|
<p class="tech-label">Built with</p>
|
||||||
<h1>Used technologies</h1>
|
<div class="tech-logos">
|
||||||
<img src="{{ asset('images/technologies/websocket.png') }}" alt="Used Websocket"/>
|
<img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
|
||||||
<img src="{{ asset('images/technologies/react.png') }}" alt="Used React.js"/>
|
<img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
|
||||||
<img src="{{ asset('images/technologies/symfony.png') }}" alt="Used Symfony"/>
|
<img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
|
||||||
<img src="{{ asset('images/technologies/jquery.png') }}" alt="Used jQuery"/>
|
<img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
|
||||||
<img src="{{ asset('images/technologies/lets-encrypt.png') }}" alt="Used Let's Encrypt"/>
|
<img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
|
||||||
</div>
|
<img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
|
||||||
|
<img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block footer %}
|
{% block footer %}
|
||||||
<nav>
|
<div class="footer-inner">
|
||||||
<ul>
|
<div class="footer-brand">
|
||||||
<li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
|
<img src="{{ asset('images/mine-logo-logo.png') }}" alt="MineSeeker" class="footer-logo"/>
|
||||||
<li>•</li>
|
<p class="footer-name">MineSeeker</p>
|
||||||
<li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
|
<p class="footer-tagline">Multiplayer minesweeper — reimagined</p>
|
||||||
<li>•</li>
|
</div>
|
||||||
<li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
|
<nav class="footer-nav">
|
||||||
<li>•</li>
|
<p class="footer-nav-label">Navigate</p>
|
||||||
<li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
|
<ul>
|
||||||
</ul>
|
<li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
|
||||||
|
<li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
|
||||||
|
<li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
|
||||||
|
<li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
|
||||||
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="footer-copy">
|
||||||
|
<p>© {{ "now"|date("Y") }} MineSeeker • All rights reserved •
|
||||||
|
<a href="https://www.splendidbear.org">www.splendidbear.org</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
{{ vite_entry_link_tags('homeStyle') }}
|
{{ vite_entry_link_tags('homeStyle') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user