PowerPC/account.html at master · Pedro8b/PowerPC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Личный кабинет - Power PC</title>

    <!-- Подключаем все CSS файлы -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/account.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>

<body>
<!-- Шапка сайта -->
<header class="header">
    <a href="index.html" class="logo-link">
        <div class="logo">
            <img src="images/Logo.png" alt="Power PC Logo" class="logo-image">
            <div class="logo-text">
                <h1>Power PC</h1>
                <p>Только самые мощные компьютеры</p>
            </div>
        </div>
    </a>
    <nav class="main-menu">
        <ul>
            <li><a href="catalog.html">Каталог ПК</a></li>
            <li><a href="contacts.html">Контакты</a></li>
            <li><a href="favorites.html">Избранное <span id="favoritesCount"
                        style="display: none; background: #c68aff; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; margin-left: 5px;">0</span></a>
            </li>
            <li><a href="cart.html">Корзина <span id="cartCount"
                        style="display: none; background: #c68aff; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; margin-left: 5px;">0</span></a>
            </li>
            <li><a href="login.html" id="authLink">Войти</a></li>
        </ul>
    </nav>
</header>

    <!-- Основной контент -->
    <main class="main-content">
        <div class="account-header">
            <h1>Личный кабинет</h1>
            <p>Управление заказами и персональными данными</p>
        </div>

        <div class="account-layout grid-2-columns">
            <!-- Боковое меню -->
            <aside class="account-sidebar">
                <div class="user-profile">
                    <div class="user-avatar">👤</div>
                    <div class="user-info">
                        <h3>Загрузка...</h3>
                        <p>...</p>
                    </div>
                </div>

                <nav class="sidebar-menu">
                    <a href="#profile" class="menu-item active" data-tab="profile">
                        <span class="menu-icon emoticon-filter">👤</span>
                        <span>Профиль</span>
                    </a>
                    <a href="#orders" class="menu-item" data-tab="orders">
                        <span class="menu-icon emoticon-filter">📦</span>
                        <span>Мои заказы</span>
                    </a>
                    <a href="#settings" class="menu-item" data-tab="settings">
                        <span class="menu-icon emoticon-filter">⚙️</span>
                        <span>Настройки</span>
                    </a>
                    <a href="#" class="menu-item logout" onclick="logout(); return false;">
                        <span>Выйти</span>
                    </a>
                </nav>
            </aside>

            <!-- Основной контент -->
            <div class="account-content">
                <!-- Вкладка профиля -->
                <div class="tab-content active" id="profile">
                    <h2>Личная информация</h2>
                    <form class="profile-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="firstName">Имя</label>
                                <input type="text" id="firstName" value="" required>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Фамилия</label>
                                <input type="text" id="lastName" value="" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" value="" required readonly
                                style="background: rgba(50, 50, 50, 0.5); cursor: not-allowed;">
                            <small style="color: #888; font-size: 0.85rem;">Email нельзя изменить</small>
                        </div>

                        <div class="form-group">
                            <label for="phone">Телефон</label>
                            <input type="tel" id="phone" value="" placeholder="+7 (999) 123-45-67">
                        </div>

                        <div class="form-group">
                            <label for="address">Адрес доставки</label>
                            <textarea id="address" rows="3" placeholder="г. Москва, ул. Примерная, д. 123"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary">Сохранить изменения</button>
                    </form>
                </div>

                <!-- Вкладка заказов -->
                <div class="tab-content" id="orders">
                    <h2>История заказов</h2>
                    <div class="orders-list">
                        <!-- Заказы загружаются через JavaScript -->
                    </div>
                </div>

                <!-- Вкладка настроек -->
                <div class="tab-content" id="settings">
                    <h2>Настройки аккаунта</h2>
                    <div class="settings-section">
                        <h3>Уведомления</h3>
                        <div class="setting-item">
                            <label class="checkbox">
                                <input type="checkbox" checked>
                                <span class="checkmark"></span>
                                Email-уведомления о статусе заказов
                            </label>
                        </div>
                        <div class="setting-item">
                            <label class="checkbox">
                                <input type="checkbox" checked>
                                <span class="checkmark"></span>
                                СМС-уведомления о доставке
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Подвал -->
    <footer class="footer">
        <p>&copy; 2024 Power PC. Магазин мощных компьютеров. Все права защищены.</p>
    </footer>

    <!-- ВАЖНО: Подключаем JavaScript в правильном порядке -->
    <script src="js/auth-api.js"></script>
    <script src="js/account.js"></script>
    <script src="js/cart-functions.js"></script>
    <script src="js/auth-check.js"></script>
</body>

</html>