статы и инфа под мобилу
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Card</title>
<style>
.character-card {
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--white);
border-radius: 6px;
border: 1px solid var(--blackmedium);
padding: 20px;
font-family: Arial, sans-serif;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.character-header {
font-size: 24px;
color: var(--amscolor);
margin-bottom: 20px;
text-align: center;
font-weight: bold;
width: 100%;
}
.character-content {
display: flex;
flex-direction: column;
align-items: center;
}
.chart-container {
width: 100%;
max-width: 300px;
height: 300px;
margin-bottom: 20px;
}
.character-stats {
width: 100%;
text-align: left;
}
.character-stats p {
margin: 5px 0;
font-size: 1rem;
color: var(--black);
}
@media (min-width: 600px) {
.character-content {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.chart-container {
width: 50%;
margin-bottom: 0;
}
.character-stats {
width: 45%;
padding-left: 20px;
}
}
</style>
</head>
<body>
<div class="character-card">
<div class="character-header">Информация о персонаже</div>
<div class="character-content">
<div class="chart-container">
<canvas id="spiderChart" width="300" height="300"></canvas>
</div>
<div class="character-stats">
<p><b>Имя Клан:</b> Имя и Клан</p>
<p><b>Возраст:</b> возраст</p>
<p><b>Специализация:</b> медицина, ниндзя сенсор и т.д.</p>
<p><b>Ранг:</b> генин, чунин, джонин</p>
<p><b>Возраст окончания академии:</b> возраст</p>
<p><b>Возраст становления чунином:</b> возраст</p>
<p><b>Участие в экзаменах:</b> 7</p>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('spiderChart');
const ctx = canvas.getContext('2d');
const labels = ['Нин', 'Тай', 'Ген', 'Инт', 'Сил', 'Ско', 'Чак', 'Печ'];
const data = [0.5, 1.5, 2, 2.5, 3, 4, 4.5, 2]; // Пример данных
const drawSpiderChart = (ctx, labels, data, maxValue) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 100;
const backgroundRadius = 120;
const angleStep = (2 * Math.PI) / labels.length;
const labelOffset = 40;
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, backgroundRadius);
gradient.addColorStop(0, 'rgba(255, 180, 0, 1)');
gradient.addColorStop(0.7, 'rgba(255, 100, 0, 1)');
gradient.addColorStop(1, 'rgba(255, 40, 0, 1)');
ctx.beginPath();
ctx.arc(centerX, centerY, backgroundRadius, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = gradient;
ctx.fill();
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
for (let i = 1; i <= 5; i++) {
ctx.beginPath();
const r = (radius / 5) * i;
for (let j = 0; j <= labels.length; j++) {
const x = centerX + r * Math.cos(angleStep * j - Math.PI / 2);
const y = centerY + r * Math.sin(angleStep * j - Math.PI / 2);
j === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}
for (let i = 0; i < labels.length; i++) {
const x = centerX + radius * Math.cos(angleStep * i - Math.PI / 2);
const y = centerY + radius * Math.sin(angleStep * i - Math.PI / 2);
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();
}
ctx.font = 'bold 12px Arial';
ctx.fillStyle = '#333';
for (let i = 0; i < labels.length; i++) {
const x = centerX + radius * Math.cos(angleStep * i - Math.PI / 2);
const y = centerY + radius * Math.sin(angleStep * i - Math.PI / 2);
const labelX = x + Math.cos(angleStep * i - Math.PI / 2) * labelOffset;
const labelY = y + Math.sin(angleStep * i - Math.PI / 2) * labelOffset;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(labels[i], labelX, labelY);
}
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.strokeStyle = '#000';
for (let i = 0; i < data.length; i++) {
const value = (data[i] / maxValue) * radius;
const x = centerX + value * Math.cos(angleStep * i - Math.PI / 2);
const y = centerY + value * Math.sin(angleStep * i - Math.PI / 2);
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
};
drawSpiderChart(ctx, labels, data, 5);
</script>
</body>
</html>
[/html]