новый лендинг

2026-04-26 16:09:08 +04:00
parent 103e2bc4cf
commit 7701aa16c0
24 changed files with 6368 additions and 341 deletions
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+
+export default function Tweaks({ state, setState }) {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === '`' || (e.altKey && e.key.toLowerCase() === 't')) {
+                setOpen((v) => !v);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+
+    const set = (k, v) => {
+        setState((s) => {
+            const next = { ...s, [k]: v };
+            try {
+                localStorage.setItem('moonwell.tweaks', JSON.stringify(next));
+            } catch (e) {
+                // ignore
+            }
+            return next;
+        });
+    };
+
+    return (
+        <>
+            <button
+                className="tweaks-fab"
+                onClick={() => setOpen((v) => !v)}
+                aria-label="Tweaks"
+                title="Настройки внешнего вида (alt+T)"
+            >
+                ✦
+            </button>
+            <div className={`tweaks ${open ? 'open' : ''}`}>
+                <div className="tweaks-title">
+                    <span>Tweaks</span>
+                    <button onClick={() => setOpen(false)} aria-label="Close">×</button>
+                </div>
+
+                <div className="tweak-row">
+                    <label>Настроение</label>
+                    <div className="tweak-seg">
+                        <button
+                            className={state.variant === 'forest' ? 'active' : ''}
+                            onClick={() => set('variant', 'forest')}
+                        >
+                            Лес
+                        </button>
+                        <button
+                            className={state.variant === 'temple' ? 'active' : ''}
+                            onClick={() => set('variant', 'temple')}
+                        >
+                            Храм
+                        </button>
+                    </div>
+                </div>
+
+                <div className="tweak-row">
+                    <label>Частицы и анимации</label>
+                    <div
+                        className={`tweak-switch ${state.particles ? 'on' : ''}`}
+                        onClick={() => set('particles', !state.particles)}
+                        role="switch"
+                        aria-checked={state.particles}
+                    />
+                </div>
+
+                <div className="tweak-row">
+                    <label>Луна на фоне</label>
+                    <div
+                        className={`tweak-switch ${state.moon ? 'on' : ''}`}
+                        onClick={() => set('moon', !state.moon)}
+                        role="switch"
+                        aria-checked={state.moon}
+                    />
+                </div>
+            </div>
+        </>
+    );
+}