Создание Интерактивного Профиля для Защиты Личных Данных простой пример
В мире веб-разработки, кроме эстетики и удобства использования, защита личных данных пользователей становится все более важной. Одним из способов обеспечения этой защиты и в то же время создания интересного и динамичного пользовательского опыта является использование интерактивных профилей. Давайте рассмотрим пример, как это может быть реализовано с помощью HTML, CSS и JavaScript.
HTML и CSS: Создание Основы
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Интерактивный Профиль</title>
<style>
body {
background-color: black;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p class="name">************</p>
<p class="data">************</p>
<p class="prof">************</p>
<p class="pol">************</p>
<script>
// Код JavaScript будет добавлен далее
// потом просто добавите в это место наш скрипт.
</script>
</body>
</html>
В этом примере мы создали простую HTML-структуру, определили стили для улучшения визуального восприятия и добавили заготовки для отображения данных пользователя.
JavaScript: Интерактивность и Защита
let dataParagraph = document.querySelector(".data");
let profParagraph = document.querySelector(".prof");
let polParagraph = document.querySelector(".pol");
let users = {
name: "Криштиану Роналду",
data: "05 02 1985",
prof: "Футболист",
pol: "Мужской"
}
nameParagraph.addEventListener("mouseover", function() {
nameParagraph.textContent = users.name;
});
nameParagraph.addEventListener("mouseout", function() {
nameParagraph.textContent = "************";
});
dataParagraph.addEventListener("mouseover", function() {
dataParagraph.textContent = users.data;
});
dataParagraph.addEventListener("mouseout", function() {
dataParagraph.textContent = "************";
});
profParagraph.addEventListener("mouseover", function() {
profParagraph.textContent = users.prof;
});
profParagraph.addEventListener("mouseout", function() {
profParagraph.textContent = "************";
});
polParagraph.addEventListener("mouseover", function() {
polParagraph.textContent = users.pol;
});
polParagraph.addEventListener("mouseout", function() {
polParagraph.textContent = "************";
});
JavaScript-код добавляет интерактивность к профилю. При наведении мыши на каждый параграф, скрытая информация о пользователе отображается, а при выходе мыши из области параграфа данные снова скрываются.
Вариант по кнопки
Добавим кнопку для отображения и скрытия данных всех параграфов. Также, мы изменим содержание кнопки в зависимости от ее текущего состояния. Вот код:
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>вариант с кнопкой</title>
<style>
body {
background-color: black;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p class="name">************</p>
<p class="data">************</p>
<p class="prof">************</p>
<p class="pol">************</p>
<button id="toggleButton">Показать данные</button>
<script>
let nameParagraph = document.querySelector(".name");
let dataParagraph = document.querySelector(".data");
let profParagraph = document.querySelector(".prof");
let polParagraph = document.querySelector(".pol");
let users = {
name: "Криштиану Роналду",
data: "05 02 1985",
prof: "Футболист",
pol: "Мужской"
}
let isDataVisible = false;
let toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
isDataVisible = !isDataVisible;
if (isDataVisible) {
showUserData();
toggleButton.textContent = "Скрыть данные";
} else {
hideUserData();
toggleButton.textContent = "Показать данные";
}
});
function showUserData() {
nameParagraph.textContent = users.name;
dataParagraph.textContent = users.data;
profParagraph.textContent = users.prof;
polParagraph.textContent = users.pol;
}
function hideUserData() {
nameParagraph.textContent = "************";
dataParagraph.textContent = "************";
profParagraph.textContent = "************";
polParagraph.textContent = "************";
}
</script>
</body>
</html>
Добавлена кнопка с идентификатором "toggleButton", и теперь при ее нажатии данные в параграфах будут показываться или скрываться, а надпись на кнопке изменится с Показать данные на Скрыть данные.
Давайте разберем JavaScript-код:
1. Выборка элементов параграфов:
document.querySelector(".name"), .data, .prof, и .pol выбирают соответствующие элементы на основе их классов.
2. Определение данных пользователя:
Объект users содержит информацию о пользователе, такую как имя, дата рождения, профессия и пол.
3. Переключатель видимости данных:
Переменная isDataVisible определяет текущее состояние видимости данных.
По нажатию кнопки с идентификатором toggleButton событие click изменяет состояние isDataVisible и вызывает соответствующую функцию.
4. Функции для отображения и скрытия данных:
showUserData() и hideUserData() обновляют содержимое параграфов в соответствии с данными пользователя или скрывают их, соответственно.
5. Изменение текста кнопки:
Текст кнопки изменяется в зависимости от текущего состояния. Если данные видны, текст меняется на Скрыть данные, в противном случае - на Показать данные.
Таким образом, этот код обеспечивает интерактивное отображение и скрытие данных пользователя при нажатии на кнопку, предоставляя элемент управления пользователю.
Защита Личных Данных с Интерактивными Профилями
Этот подход позволяет пользователям управлять информацией, которую они раскрывают. Вместо статичного отображения личных данных, они видны только по запросу пользователя, что может быть полезным для защиты приватности. Такие интерактивные профили предоставляют элемент контроля над информацией и демонстрируют внимание к вопросам безопасности в веб-разработке.
