Первый коммит после распаковки архива

src/pages/RegisterStep1.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function RegisterStep1() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirm, setConfirm] = useState('');
+    const [agree, setAgree] = useState(false);
+    const navigate = useNavigate();
+
+    const handleNext = e => {
+        e.preventDefault();
+        if (password !== confirm) return alert('Пароли не совпадают');
+        if (!agree) return alert('Нужно согласиться с условиями');
+        sessionStorage.setItem('reg_step1', JSON.stringify({ email, password }));
+        navigate('/register/step2');
+    };
+
+    return (
+        <div style={{
+            minHeight: '100vh',
+            backgroundColor: 'black',
+            padding: '20px',
+            color: 'white' // Устанавливаем белый цвет для всего текста в контейнере
+        }}>
+            <form onSubmit={handleNext} style={styles.form}>
+                <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Регистрация — шаг 1</h2>
+
+                <label style={styles.label}>
+                    Почта
+                    <input
+                        type="email"
+                        value={email}
+                        onChange={e => setEmail(e.target.value)}
+                        required
+                        style={styles.input}
+                    />
+                </label>
+
+                <label style={styles.label}>
+                    Пароль
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={e => setPassword(e.target.value)}
+                        required
+                        style={styles.input}
+                    />
+                </label>
+
+                <label style={styles.label}>
+                    Подтверждение пароля
+                    <input
+                        type="password"
+                        value={confirm}
+                        onChange={e => setConfirm(e.target.value)}
+                        required
+                        style={styles.input}
+                    />
+                </label>
+
+                <label style={styles.checkbox}>
+                    <input
+                        type="checkbox"
+                        checked={agree}
+                        onChange={e => setAgree(e.target.checked)}
+                        style={{
+                            marginRight: '8px',
+                            padding: '8px',
+                            borderRadius: '7px',
+                            border: '2px solid #444',
+                            backgroundColor: '#333',
+                            color: 'white', // Белый цвет текста в инпутах
+                            fontSize: '14px'                        }}
+                    />
+                    Я принимаю условия пользовательского соглашения
+                </label>
+
+                <button type="submit" style={styles.button}>Далее →</button>
+            </form>
+        </div>
+    );
+}
+
+const styles = {
+    form: {
+        maxWidth: 400,
+        margin: '50px auto',
+        padding: 20,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 15,
+        background: '#222',
+        borderRadius: 8
+    },
+    label: {
+        display: 'flex',
+        flexDirection: 'column',
+        fontSize: '14px',
+        gap: '5px'
+    },
+    input: {
+        padding: '8px',
+        borderRadius: '7px',
+        border: '2px solid #444',
+        backgroundColor: '#333',
+        color: 'white', // Белый цвет текста в инпутах
+        fontSize: '14px'
+    },
+    checkbox: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        fontSize: '14px',
+        margin: '10px 0'
+    },
+    button: {
+        padding: '12px 20px',
+        background: '#007bff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '16px',
+        fontWeight: '500',
+        transition: 'background 0.3s',
+        ':hover': {
+            background: '#0056b3'
+        }
+    }
+};