<a href="
https://t.me/red_clawe" target="_blank" class="tg-chat-card">
<img src="
https://api.qrserver.com/v1/create-qr-code/?size=60x60&data=https://t.me/+e3X6jHgQqRc0NjVi&margin=0" alt="QR" class="qr">
<div class="content">
<div class="title">Чат игроков</div>
<div class="subtitle">Присоединиться в Telegram</div>
</div>
<div class="icon">
<svg viewBox="0 0 240 240" xmlns="
http://www.w3.org/2000/svg">
<circle cx="120" cy="120" r="120" fill="#229ED9"/>
<path d="M177.5 71.5l-23.6 111.3c-1.7 7.9-6.5 9.8-13.2 6.1l-35.9-26.4-17.3 16.6c-1.9 1.9-3.5 3.5-7.1 3.5l2.6-36.5 66.7-60.3c2.9-2.6-.6-4-4.5-1.4l-82.4 51.8-35.6-11.1c-7.7-2.4-7.8-7.7.4-11.4l139.3-53.7c6.4-2.5 12 1.5 12 9z" fill="#fff"/>
</svg>
</div>
</a>
<style>
.tg-chat-card {
display: flex;
align-items: center;
height: 80px;
padding: 0 18px;
margin-bottom: 18px;
border-radius: 16px;
background: #1a1a1f;
border: 1px solid #2d2d35;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
text-decoration: none;
color: #fff;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
gap: 14px;
}
.tg-chat-card:hover {
border-color: #229ED9;
box-shadow: 0 8px 20px rgba(34, 158, 217, 0.15);
transform: translateY(-2px);
background: #1e1e24;
}
.tg-chat-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: #229ED9;
opacity: 0;
transition: opacity 0.3s ease;
}
.tg-chat-card:hover::before {
opacity: 1;
}
.qr {
width: 52px;
height: 52px;
border-radius: 10px;
border: 2px solid #2d2d35;
flex-shrink: 0;
transition: all 0.3s ease;
}
.tg-chat-card:hover .qr {
border-color: #229ED9;
transform: scale(1.05);
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.title {
font-size: 15px;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.2px;
}
.subtitle {
font-size: 12px;
color: #aaaaaa;
margin-top: 2px;
font-weight: 500;
}
.icon {
width: 38px;
height: 38px;
background: #229ED9;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.tg-chat-card:hover .icon {
transform: scale(1.1);
}
.icon svg {
width: 22px;
height: 22px;
}
/* Адаптивность */
@media (max-width: 480px) {
.tg-chat-card { height: 72px; padding: 0 14px; gap: 12px; }
.qr { width: 46px; height: 46px; }
.title { font-size: 14px; }
.subtitle { font-size: 11px; }
.icon { width: 34px; height: 34px; }
.icon svg { width: 19px; height: 19px; }
}
</style>
