[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warframe Cards - Настольная игра</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
border: 2px solid #00ffff;
}
.filters {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
background: #2d3047;
color: #fff;
border: 1px solid #00ffff;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover, .filter-btn.active {
background: #00ffff;
color: #000;
}
.warframe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 25px;
}
.warframe-card {
background: linear-gradient(145deg, #2d3047 0%, #1b1b2f 100%);
border-radius: 20px;
padding: 20px;
border: 2px solid #00ffff;
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.warframe-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 255, 255, 0.2);
}
.warframe-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.warframe-image {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #00ffff;
margin-right: 15px;
object-fit: cover;
}
.warframe-info {
flex: 1;
}
.warframe-name {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 5px;
color: #00ffff;
}
.warframe-roles {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.role-tag {
background: rgba(0, 255, 255, 0.2);
padding: 4px 10px;
border-radius: 15px;
font-size: 0.8em;
border: 1px solid #00ffff;
}
.abilities-section {
margin-top: 20px;
}
.section-title {
font-size: 1.1em;
margin-bottom: 15px;
color: #ff6b6b;
border-bottom: 1px solid #444;
padding-bottom: 5px;
}
.ability {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 12px;
margin-bottom: 10px;
border-left: 3px solid #4ecdc4;
}
.ability.passive {
border-left-color: #ffeaa7;
}
.ability-name {
font-weight: bold;
color: #4ecdc4;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 8px;
}
.ability.passive .ability-name {
color: #ffeaa7;
}
.ability-description {
font-size: 0.9em;
line-height: 1.4;
color: #ccc;
}
.ability-icon {
width: 20px;
height: 20px;
background: #444;
border-radius: 4px;
display: inline-block;
}
.card-footer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #444;
font-size: 0.8em;
color: #888;
text-align: center;
}
@media (max-width: 768px) {
.warframe-grid {
grid-template-columns: 1fr;
}
.filters {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>WARFRAME CARDS</h1>
<p>Коллекция карточек для настольной ролевой игры</p>
</div>
<div class="filters">
<button class="filter-btn active" data-role="all">Все</button>
<button class="filter-btn" data-role="damage">Урон</button>
<button class="filter-btn" data-role="support">Поддержка</button>
<button class="filter-btn" data-role="survival">Выживание</button>
<button class="filter-btn" data-role="stealth">Скрытность</button>
<button class="filter-btn" data-role="crowdcontrol">Контроль</button>
</div>
<div class="warframe-grid" id="warframeGrid">
<!-- Карточки будут добавляться через JavaScript -->
</div>
</div>
<script>
// Данные варфреймов
const warframesData = [
{
name: "Atlas",
image: "https://content.warframe.com/PublicExport/Lotus/Interface/Icons/StoreIcons/Warframes/Atlas.png",
roles: ["damage", "survival"],
abilities: {
passive: "Иммунитет к отбрасыванию при нахождении на земле. Поверженные окаменевшие враги оставляют Обломки, которые лечат Атласа или дают ему бонус к броне.",
active: [
{ name: "Оползень", description: "Мощный повторяющийся удар, который устремляется вперед и наносит урон по площади." },
{ name: "Тектоника", description: "Создает каменную стену, блокирующую вражеский огонь. Можно зарядить, чтобы скатить ее вперед как валун." },
{ name: "Окаменение", description: "Атака конусом, превращающая врагов в камень, делая их уязвимыми и позволяя оставлять Обломки." },
{ name: "Грохот", description: "Призывает двух элементалей камня для сражения за Атласа." }
]
}
},
{
name: "Banshee",
image: "https://content.warframe.com/PublicExport/Lotus/Interface/Icons/StoreIcons/Warframes/Banshee.png",
roles: ["crowdcontrol"],
abilities: {
passive: "Все оружие Банши работает бесшумно, не предупреждая врагов при стрельбе.",
active: [
{ name: "Звуковой удар", description: "Излучает звуковую ударную волну, которая отбрасывает врагов в широком конусе." },
{ name: "Сонар", description: "Обнаруживает уязвимые места врагов, которые умножают урон при попадании." },
{ name: "Тишина", description: "Создает область, которая оглушает врагов, входящих в нее, и заглушает все звуки оружия." },
{ name: "Звуковое землетрясение", description: "Создает ударные волны, наносящие урон и оглушающие всех врагов на большой площади." }
]
}
},
{
name: "Frost",
image: "https://content.warframe.com/PublicExport/Lotus/Interface/Icons/StoreIcons/Warframes/Frost.png",
roles: ["crowdcontrol", "survival"],
abilities: {
passive: "Способности имеют увеличенную длительность эффекта статуса Холод. Враги с эффектом Холода в радиусе аффинити дают Фросту бонус к броне.",
active: [
{ name: "Замораживание", description: "Запускает ледяной снаряд, который замораживает единственную цель на месте." },
{ name: "Ледяная волна", description: "Посылает волну острого льда вперед, нанося урон и замедляя врагов на широком пути." },
{ name: "Снежный шар", description: "Создает защитную сферу льда, блокирующую вражеские выстрелы. Кратко неуязвим при создании." },
{ name: "Лавина", description: "Выпускает волну мороза, которая наносит урон всем ближайшим врагам и снижает их броню." }
]
}
},
{
name: "Volt",
image: "https://content.warframe.com/PublicExport/Lotus/Interface/Icons/StoreIcons/Warframes/Volt.png",
roles: ["damage", "support"],
abilities: {
passive: "Накопитель заряда: накапливает статическое электричество при движении, добавляя бонусный урон Электричеством к следующей атаке.",
active: [
{ name: "Шок", description: "Запускает снаряд, который передает урон Электричеством нескольким ближайшим врагам." },
{ name: "Скорость", description: "Заряжает Вольта и ближайших союзников, значительно увеличивая их скорость передвижения и атаки." },
{ name: "Электрический щит", description: "Развертывает энергетический барьер, блокирующий вражеский огонь и усиливающий выстрелы, произведенные сквозь него." },
{ name: "Разряд", description: "Выпускает мощное электрическое поле, которое оглушает и наносит урон врагам на большой площади." }
]
}
},
{
name: "Mag",
image: "https://content.warframe.com/PublicExport/Lotus/Interface/Icons/StoreIcons/Warframes/Mag.png",
roles: ["crowdcontrol"],
abilities: {
passive: "Автоматически притягивает предметы в радиусе 8 метров к себе.",
active: [
{ name: "Притяжение", description: "Создает магнитный вихрь, который отбрасывает и притягивает врагов к Мэг." },
{ name: "Намагничивание", description: "Захватывает цель в магнитном поле, которое захватывает снаряды и наносит периодический урон." },
{ name: "Поляризация", description: "Излучает волну, которая истощает щиты и броню врагов, одновременно восстанавливая щиты союзников." },
{ name: "Раздавить", description: "Телекинетически поднимает врагов, нанося массовый Магнитный урон и снимая их броню." }
]
}
}
];
// Функция для создания карточки варфрейма
function createWarframeCard(warframe) {
const card = document.createElement('div');
card.className = 'warframe-card';
card.dataset.roles = warframe.roles.join(' ');
const rolesHTML = warframe.roles.map(role =>
`<span class="role-tag">${getRoleName(role)}</span>`
).join('');
const abilitiesHTML = warframe.abilities.active.map((ability, index) => `
<div class="ability">
<div class="ability-name">
<span class="ability-icon"></span>
${index + 1}. ${ability.name}
</div>
<div class="ability-description">${ability.description}</div>
</div>
`).join('');
card.innerHTML = `
<div class="card-header">
<img src="${warframe.image}" alt="${warframe.name}" class="warframe-image" onerror="this.src='https://via.placeholder.com/80x80/2d3047/00ffff?text=?'">
<div class="warframe-info">
<div class="warframe-name">${warframe.name}</div>
<div class="warframe-roles">${rolesHTML}</div>
</div>
</div>
<div class="abilities-section">
<div class="section-title">СПОСОБНОСТИ</div>
<div class="ability passive">
<div class="ability-name">
<span class="ability-icon"></span>
Пассивная
</div>
<div class="ability-description">${warframe.abilities.passive}</div>
</div>
${abilitiesHTML}
</div>
<div class="card-footer">
Warframe RPG Card © 2024
</div>
`;
return card;
}
// Функция для получения русского названия роли
function getRoleName(role) {
const roleNames = {
'damage': 'Урон',
'support': 'Поддержка',
'survival': 'Выживание',
'stealth': 'Скрытность',
'crowdcontrol': 'Контроль'
};
return roleNames[role] || role;
}
// Функция для фильтрации карточек
function filterCards(role) {
const cards = document.querySelectorAll('.warframe-card');
cards.forEach(card => {
if (role === 'all' || card.dataset.roles.includes(role)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
// Инициализация
document.addEventListener('DOMContentLoaded', () => {
const grid = document.getElementById('warframeGrid');
// Создаем карточки для каждого варфрейма
warframesData.forEach(warframe => {
const card = createWarframeCard(warframe);
grid.appendChild(card);
});
// Добавляем обработчики для кнопок фильтра
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
filterCards(btn.dataset.role);
});
});
});
</script>
</body>
</html>[/html]
