DemO/DEMO/wwwroot/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO Shop</title>
    <!-- подключаю мои стили -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- экран входа, виден сначала -->
    <div id="authScreen" class="auth-screen">
        <div class="auth-card">

            <!-- логотип -->
            <div class="auth-logo">
                DEMO
                <small>МАГАЗИН</small>
            </div>

            <!-- форма входа -->
            <div id="loginFormContainer">
                <div class="auth-heading">
                    <h1>Вход</h1>
                    <p>Войдите чтобы работать</p>
                </div>

                <form id="loginForm" class="auth-form">
                    <label>
                        Логин
                        <input id="login" type="text" placeholder="Ваш логин" required>
                    </label>

                    <label>
                        Пароль
                        <input id="password" type="password" placeholder="Ваш пароль" required>
                    </label>

                    <!-- сюда пишу ошибку входа -->
                    <div id="loginError" class="auth-error"></div>

                    <button type="submit" class="auth-button">Войти</button>
                </form>

                <div class="auth-switch">
                    <span>Нет аккаунта?</span>
                    <button id="showRegister" type="button">Зарегистрироваться</button>
                </div>
            </div>

            <!-- форма регистрации, сначала спрятана -->
            <div id="registerFormContainer" class="hidden">
                <div class="auth-heading">
                    <h1>Регистрация</h1>
                    <p>Создайте новый аккаунт</p>
                </div>

                <form id="registerForm" class="auth-form">
                    <label>
                        Логин
                        <input id="registerLogin" type="text" placeholder="Придумайте логин" required>
                    </label>

                    <label>
                        Пароль
                        <input id="registerPassword" type="password" placeholder="Придумайте пароль" required>
                    </label>

                    <label>
                        Повторите пароль
                        <input id="registerPasswordRepeat" type="password" placeholder="Еще раз пароль" required>
                    </label>

                    <!-- сюда пишу ошибку регистрации -->
                    <div id="registerError" class="auth-error"></div>

                    <button type="submit" class="auth-button">Зарегистрироваться</button>
                </form>

                <div class="auth-switch">
                    <span>Уже есть аккаунт?</span>
                    <button id="showLogin" type="button">Войти</button>
                </div>
            </div>

        </div>
    </div>

    <!-- главное окно, сначала спрятано -->
    <div id="app" class="app hidden">

        <!-- меню слева -->
        <aside class="sidebar">
            <div class="logo">
                DEMO
                <span>МАГАЗИН</span>
            </div>

            <!-- кто сейчас вошел -->
            <div class="user-panel">
                <div class="user-avatar" id="userAvatar">U</div>
                <div class="user-info">
                    <strong id="currentUser">Пользователь</strong>
                    <span id="currentRole">Client</span>
                </div>
            </div>

            <!-- кнопки страниц -->
            <nav>
                <button class="nav-button active" data-page="products">Товары</button>
                <button class="nav-button" data-page="categories">Категории</button>
                <button class="nav-button" data-page="warehouses">Склады</button>
                <button class="nav-button" data-page="stock">Остатки</button>
                <button class="nav-button" data-page="users">Пользователи</button>
                <button class="nav-button" data-page="orders">Заказы</button>
            </nav>

            <!-- выйти из аккаунта -->
            <button id="logoutButton" class="logout-button">Выйти</button>
        </aside>

        <!-- правая часть -->
        <main class="content">
            <header class="header">
                <div>
                    <h1 id="pageTitle">Товары</h1>
                    <p id="pageDescription">Управление товарами магазина</p>
                </div>

                <!-- кнопка добавить новое -->
                <button id="addButton" class="primary-button">+ Добавить</button>
            </header>

            <!-- сюда рисую таблицу или карточки -->
            <section id="pageContent"></section>
        </main>
    </div>

    <!-- всплывающее окно формы -->
    <div id="modal" class="modal hidden">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">Добавить</h2>
                <button id="closeModal" class="close-button">X</button>
            </div>
            <!-- сюда рисую поля формы -->
            <form id="modalForm"></form>
        </div>
    </div>

    <!-- маленькое сообщение снизу -->
    <div id="toast" class="toast"></div>

    <!-- подключаю мой код -->
    <script src="script.js"></script>

</body>
</html>