Загрузка данных
Отличная идея! Это сделает интерфейс Axioma гораздо удобнее и современнее.
Чтобы это реализовать, нам нужно изменить логику в шапке (хедере): если пользователь авторизован, клик по иконке профиля будет открывать модальное окно (как это сделано с настройками), а если нет — отправлять на регистрацию.
Вот пошаговый план реализации:
### 1. Изменяем ссылки в шапке (файл `index_copy.php`)
Найдите блок навигации и обновите условие PHP. Мы убираем прямую ссылку на профиль и вешаем `id`, чтобы перехватывать клик с помощью JavaScript.
```php
<div class="NAVnav">
<a href="#section2">Портфолио</a>
<a href="">О нас</a>
<a href="index_copy.php">Главная</a>
<?php if ($is_logged_in): ?>
<a class="navimg" style="cursor: pointer;" id="openAccountsBtn"><img src="icons/icon-icons-profil-white.svg" alt="Профиль"></a>
<a class="navimg" style="cursor: pointer;" id="openAccountsBtn2"><img src="icons/icon-icons-profil-white.svg" alt="Профиль"></a>
<?php else: ?>
<a class="navimg" href="register_copy.html"><img src="icons/icon-icons-profil-white.svg" alt="Регистрация"></a>
<a class="navimg" href="register_copy.html"><img src="icons/icon-icons-profil-white.svg" alt="Регистрация"></a>
<?php endif; ?>
<a><img src="icons/icon-icons-nastroiki-white.svg" alt="Настройки" id="openModalBtn"></a>
</div>
```
### 2. Добавляем верстку модального окна
Вставьте этот HTML-код сразу после блока с модальным окном настроек (`#myModal`). Здесь мы добавим кнопку перехода в профиль, список аккаунтов и кнопку «Выйти».
```html
<div id="accountsModal" class="modal">
<div class="modal-content">
<button id="closeAccountsBtn" class="close-btn">×</button>
<div class="modal-content-div">
<h3>Ваши аккаунты</h3>
<div class="accounts-list">
<div class="account-item active">
<div class="account-info">
<div class="acc-avatar placeholder">A</div>
<div>
<h5>Основной аккаунт</h5>
<small class="neon-text">В сети</small>
</div>
</div>
<button class="btn-go" onclick="window.location.href='profil.php'">В профиль</button>
</div>
<div class="account-item">
<div class="account-info">
<div class="acc-avatar placeholder" style="background: #333;">C</div>
<div>
<h5>Компания ООО</h5>
<small>Офлайн</small>
</div>
</div>
<button class="btn-delete" title="Удалить аккаунт">×</button>
</div>
</div>
<button class="btn-add-account" onclick="window.location.href='register_copy.html'">+ Добавить аккаунт</button>
<button class="btn-logout" onclick="window.location.href='vendor/logout.php'">Выйти из системы</button>
</div>
</div>
</div>
```
### 3. Добавляем стили (в ваш `.css` файл)
Эти стили отлично впишутся в темную кибер-эстетику интерфейса:
```css
/* Стили для модалки аккаунтов */
.accounts-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.account-item {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.3s;
}
.account-item.active {
border-color: #00ffcc; /* Тот самый неоновый цвет */
box-shadow: 0 0 10px rgba(0, 255, 204, 0.1);
}
.account-info {
display: flex;
align-items: center;
gap: 15px;
}
.acc-avatar.placeholder {
width: 40px;
height: 40px;
border-radius: 50%;
background: #00ffcc;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.btn-go {
background: transparent;
color: #00ffcc;
border: 1px solid #00ffcc;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.btn-go:hover {
background: #00ffcc;
color: #000;
}
.btn-delete {
background: transparent;
color: #ff4b4b;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
font-size: 1.5rem;
}
.btn-delete:hover {
color: #ff0000;
}
.btn-add-account {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-add-account:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #00ffcc;
}
.btn-logout {
margin-top: 15px;
width: 100%;
border: 1px solid #ff4b4b;
color: #ff4b4b;
background: transparent;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.btn-logout:hover {
background: #ff4b4b;
color: #fff;
}
```
### 4. Добавляем логику JavaScript (в файл `modal.js`)
Нужно "научить" кнопки открывать и закрывать новое окно:
```javascript
// Получаем элементы нового модального окна
const accountsModal = document.getElementById('accountsModal');
const openAccountsBtn = document.getElementById('openAccountsBtn');
const openAccountsBtn2 = document.getElementById('openAccountsBtn2');
const closeAccountsBtn = document.getElementById('closeAccountsBtn');
// Проверяем, существуют ли кнопки (чтобы не было ошибок в консоли у неавторизованных)
if (openAccountsBtn) {
openAccountsBtn.onclick = function() { accountsModal.style.display = "flex"; }
}
if (openAccountsBtn2) {
openAccountsBtn2.onclick = function() { accountsModal.style.display = "flex"; }
}
if (closeAccountsBtn) {
closeAccountsBtn.onclick = function() { accountsModal.style.display = "none"; }
}
// Добавляем закрытие нового окна при клике вне его области
// (Дополняем существующую функцию window.onclick)
window.addEventListener('click', function(event) {
if (event.target == accountsModal) {
accountsModal.style.display = "none";
}
});
```
### 5. Бонус: скрипт выхода (`vendor/logout.php`)
Поскольку мы добавили кнопку выхода, нам нужен простой скрипт, который будет "убивать" сессию, чтобы кнопка работала. Создайте файл `vendor/logout.php`:
```php
<?php
session_start();
session_unset(); // Удаляем все переменные сессии
session_destroy(); // Уничтожаем сессию
header('Location: ../index_copy.php'); // Перекидываем на главную
exit();
?>
```
**Обрати внимание:** Реальный функционал переключения и мультиаккаунтов потребует доработок в базе данных (связывать несколько ID с одним пользователем или использовать cookies), но визуально интерфейс будет работать и выглядеть круто уже сейчас!