Numex yayın: public/style.css
This commit is contained in:
parent
36e0fb0a0a
commit
63b8c62a7a
348
public/style.css
Normal file
348
public/style.css
Normal file
|
|
@ -0,0 +1,348 @@
|
|||
:root {
|
||||
--bg: #0f172a;
|
||||
--panel: #1e293b;
|
||||
--grid-bg: #1e293b;
|
||||
--cell: #334155;
|
||||
--cell-border: #1e293b;
|
||||
--wall: #0f172a;
|
||||
--start: #22c55e;
|
||||
--goal: #ef4444;
|
||||
--visited: #38bdf8;
|
||||
--current: #7dd3fc;
|
||||
--path: #facc15;
|
||||
--path-glow: rgba(250, 204, 21, 0.9);
|
||||
--text: #e2e8f0;
|
||||
--muted: #94a3b8;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: radial-gradient(circle at 20% 10%, #1e293b, #0f172a 70%);
|
||||
min-height: 100vh;
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header { text-align: center; margin-bottom: 16px; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
background: linear-gradient(135deg, #22d3ee, #a78bfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--panel);
|
||||
border: 1px solid #334155;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 16px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn:active { transform: scale(0.97); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0ea5e9, #6366f1);
|
||||
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #475569;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.speed-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.speed-wrap input[type="range"] {
|
||||
accent-color: #22d3ee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#speed-value {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
|
||||
.dot-start { background: var(--start); }
|
||||
.dot-goal { background: var(--goal); }
|
||||
|
||||
.grid-wrap {
|
||||
background: var(--panel);
|
||||
border: 1px solid #334155;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(25, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--cell-border);
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--cell);
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
border-radius: 2px;
|
||||
transition: background 0.05s ease, box-shadow 0.15s ease;
|
||||
min-width: 8px;
|
||||
}
|
||||
|
||||
.cell:hover { filter: brightness(1.2); }
|
||||
|
||||
.cell.wall {
|
||||
background: var(--wall);
|
||||
box-shadow: inset 0 0 0 1px #0f172a;
|
||||
}
|
||||
.cell.wall::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 3px,
|
||||
rgba(15, 23, 42, 0.85) 3px,
|
||||
rgba(15, 23, 42, 0.85) 5px
|
||||
);
|
||||
}
|
||||
|
||||
.cell.start {
|
||||
background: var(--start);
|
||||
cursor: grab;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
.cell.start::after {
|
||||
content: '🟢';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: clamp(10px, 2.2vw, 18px);
|
||||
}
|
||||
.cell.start.dragging { cursor: grabbing; filter: brightness(1.3); }
|
||||
|
||||
.cell.goal {
|
||||
background: var(--goal);
|
||||
cursor: grab;
|
||||
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
.cell.goal::after {
|
||||
content: '🎯';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: clamp(10px, 2.2vw, 18px);
|
||||
}
|
||||
.cell.goal.dragging { cursor: grabbing; filter: brightness(1.3); }
|
||||
|
||||
.cell.visited {
|
||||
background: var(--visited);
|
||||
animation: popIn 0.2s ease;
|
||||
}
|
||||
|
||||
.cell.current {
|
||||
background: var(--current);
|
||||
box-shadow: 0 0 8px rgba(125, 211, 252, 0.8);
|
||||
animation: pulseCurrent 0.4s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.cell.path {
|
||||
background: var(--path);
|
||||
animation: pathGlow 1s ease-in-out infinite alternate;
|
||||
z-index: 2;
|
||||
}
|
||||
.cell.path::before {
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: clamp(8px, 1.8vw, 14px);
|
||||
color: #7a5b00;
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% { transform: scale(0.8); opacity: 0.5; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes pulseCurrent {
|
||||
0% { filter: brightness(1); }
|
||||
100% { filter: brightness(1.4); }
|
||||
}
|
||||
|
||||
@keyframes pathGlow {
|
||||
0% { box-shadow: 0 0 6px var(--path-glow); }
|
||||
100% { box-shadow: 0 0 18px var(--path-glow), 0 0 30px var(--path-glow); }
|
||||
}
|
||||
|
||||
/* ─── Responsive ─── */
|
||||
@media (max-width: 700px) {
|
||||
.grid-wrap { padding: 6px; }
|
||||
.cell { border-radius: 1px; }
|
||||
h1 { font-size: 1.6rem; }
|
||||
.controls { gap: 6px; }
|
||||
.btn { padding: 8px 10px; font-size: 0.8rem; }
|
||||
.legend { font-size: 0.7rem; flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
/* ─── Toast (Yol Bulunamadı — kırmızı neon) ─── */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-120%);
|
||||
background: rgba(127, 29, 29, 0.95);
|
||||
border: 2px solid #ff4d4d;
|
||||
border-radius: 14px;
|
||||
padding: 18px 28px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
z-index: 999;
|
||||
box-shadow: 0 0 20px rgba(255, 77, 77, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
|
||||
animation: neonToast 1.2s ease-in-out infinite alternate;
|
||||
transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
max-width: 90vw;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-icon { font-size: 1.8rem; display: block; margin-bottom: 4px; }
|
||||
|
||||
.toast-sub {
|
||||
font-weight: 400;
|
||||
font-size: 0.85rem;
|
||||
color: #ffd6d6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@keyframes neonToast {
|
||||
0% {
|
||||
box-shadow: 0 0 15px rgba(255, 77, 77, 0.7), 0 0 40px rgba(255, 0, 0, 0.3);
|
||||
border-color: #ff4d4d;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 30px rgba(255, 77, 77, 1), 0 0 80px rgba(255, 0, 0, 0.7);
|
||||
border-color: #ffdddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Legend ─── */
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
margin-top: 14px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
.wall-swatch { background: #0f172a; border: 1px solid #334155; }
|
||||
.start-swatch { background: var(--start); }
|
||||
.goal-swatch { background: var(--goal); }
|
||||
.visited-swatch { background: var(--visited); }
|
||||
.current-swatch { background: var(--current); }
|
||||
.path-swatch { background: var(--path); }
|
||||
Loading…
Reference in New Issue
Block a user