Здравствуйте! Чтобы реализовать функционал, который вы описали, вам нужно использовать JavaScript (или jQuery) для обработки изменения состояния входа пользователя и изменения отображения элементов на странице в зависимости от этого состояния. Вот последовательность шагов, которые помогут вам настроить это:
1. **Создайте базовую HTML-структуру**:
Убедитесь, что у вас есть блок для входа и регистрации, а также блок для отображения изображения профиля пользователя.
```html
<div id="auth-container">
<a href="#" id="login-link">Войти</a> или <a href="#" id="register-link">зарегистрироваться</a>
</div>
<div id="profile-container" style="display: none;">
<img id="profile-image" src="profile.jpg" alt="Профиль" />
</div>
```
2. **Добавьте логику для изменения состояния**:
Напишите JavaScript-код, который будет скрывать и показывать соответствующие элементы в зависимости от того, выполнен ли вход пользователя.
```javascript
// Функция для имитации успешного входа
function login() {
// Здесь должна быть логика вашего входа (например, запрос на сервер)
// После успешного входа:
document.getElementById('auth-container').style.display = 'none';
document.getElementById('profile-container').style.display = 'block';
}
// Пример использования функции
document.getElementById('login-link').addEventListener('click', function (event) {
event.preventDefault();
// Вызовите функцию входа
login();
});
```
3. **Стилизация и настройка изображения профиля**:
Убедитесь, что ваше изображение профиля отображается правильно. Вы можете использовать CSS для стилизации.
```css
#profile-container {
display: flex;
align-items: center;
}
#profile-image {
width: 40px; /* Установите необходимую ширину */
height: 40px; /* Установите необходимую высоту */
border-radius: 50%; /* Округление для эффекта аватара */
}
```
4. **Хранение состояния входа**:
Для обеспечения более сложной логики (например, если страница снова загружается), рекомендуется использовать локальное хранилище (localStorage) или куки для хранения состояния входа.
```javascript
function login() {
// Ваш код входа...
localStorage.setItem('isLoggedIn', 'true'); // Сохраняем состояние входа
updateUIBasedOnLoginState();
}
function updateUIBasedOnLoginState() {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
document.getElementById('auth-container').style.display = 'none';
document.getElementById('profile-container').style.display = 'block';
} else {
document.getElementById('auth-container').style.display = 'block';
document.getElementById('profile-container').style.display = 'none';
}
}
// Вызываем функцию при загрузке страницы
window.onload = updateUIBasedOnLoginState;
```
Эти шаги должны помочь вам скрыть блок с "Войти или зарегистрироваться" после входа пользователя и показать его профиль. Не забудьте заменить обсуждаемые элементы и логику на свои собственные, которые соответствуют вашим требованиям.