[html]
<div id="lp-forum-message">
<style>
#lp-forum-message,
#lp-forum-message * {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
#lp-forum-message {
display: block !important;
max-width: none !important;
margin: 0 auto !important;
font-family: 'Segoe UI', Arial, sans-serif !important;
line-height: 1.5 !important;
color: #d0d0d0 !important;
background: #1e1e1e !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
padding: 15px !important;
}
#lp-forum-message .lp-header {
text-align: center !important;
margin-bottom: 20px !important;
}
#lp-forum-message .lp-title {
font-size: 32px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #eaeaea !important;
text-shadow: 2px 2px 6px rgba(0,0,0,0.6) !important;
margin-bottom: 6px !important;
}
#lp-forum-message .lp-slogan {
font-size: 14px !important;
color: #a0a0a0 !important;
font-style: italic !important;
}
#lp-forum-message .player-block {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
margin: 15px 0 !important;
flex-wrap: wrap !important;
}
#lp-forum-message .play-btn {
background: #2c2c2c !important;
border: 1px solid #444 !important;
color: #ddd !important;
font-size: 16px !important;
padding: 8px 20px !important;
border-radius: 20px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
letter-spacing: 1px !important;
font-weight: 600 !important;
}
#lp-forum-message .play-btn:hover {
background: #3a3a3a !important;
border-color: #7a9cc6 !important;
color: #fff !important;
}
#lp-forum-message .albums-section {
margin-top: 20px !important;
border-top: 1px solid #333 !important;
padding-top: 20px !important;
}
#lp-forum-message .albums-tabs {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin-bottom: 15px !important;
}
#lp-forum-message .album-tab {
background: #262626 !important;
border: 1px solid #3a3a3a !important;
border-radius: 20px !important;
padding: 6px 14px !important;
color: #bbb !important;
cursor: pointer !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
text-transform: uppercase !important;
}
#lp-forum-message .album-tab:hover {
background: #303030 !important;
border-color: #7a9cc6 !important;
color: #fff !important;
}
#lp-forum-message .album-tab.active {
background: #333 !important;
border-color: #b08d57 !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
#lp-forum-message .album-panel {
display: none !important;
background: #1a1a1a !important;
border-radius: 10px !important;
padding: 15px !important;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
margin-bottom: 10px !important;
}
#lp-forum-message .album-panel.active {
display: flex !important;
flex-wrap: wrap !important;
gap: 15px !important;
align-items: flex-start !important;
}
#lp-forum-message .album-cover {
flex: 0 0 120px !important;
max-width: 120px !important;
height: 120px !important;
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}
#lp-forum-message .album-cover img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
#lp-forum-message .album-info {
flex: 1 !important;
min-width: 180px !important;
}
#lp-forum-message .album-title {
font-size: 22px !important;
font-weight: 700 !important;
color: #eaeaea !important;
margin-bottom: 4px !important;
}
#lp-forum-message .album-year {
color: #888 !important;
font-size: 13px !important;
margin-bottom: 6px !important;
}
#lp-forum-message .album-desc {
color: #bbb !important;
margin-bottom: 8px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
#lp-forum-message .album-tracks {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 8px !important;
}
#lp-forum-message a.track-tag {
background: #2a2a2a !important;
border: 1px solid #3d3d3d !important;
padding: 3px 10px !important;
border-radius: 12px !important;
font-size: 12px !important;
color: #ccc !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
#lp-forum-message a.track-tag:hover {
background: #3a3a3a !important;
border-color: #b08d57 !important;
color: #fff !important;
}
#lp-forum-message .album-quote {
font-style: italic !important;
color: #999 !important;
font-size: 13px !important;
margin-top: 4px !important;
}
/* Блок "Достойны упоминания" */
#lp-forum-message .honorable-block {
margin-top: 20px !important;
text-align: center !important;
}
#lp-forum-message .honorable-btn {
background: #262626 !important;
border: 1px solid #3a3a3a !important;
border-radius: 20px !important;
padding: 7px 18px !important;
color: #ccc !important;
cursor: pointer !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
}
#lp-forum-message .honorable-btn:hover {
background: #303030 !important;
border-color: #7a9cc6 !important;
color: #fff !important;
}
#lp-forum-message .honorable-content {
display: none !important;
margin-top: 10px !important;
text-align: left !important;
}
#lp-forum-message .honorable-content.show {
display: block !important;
}
#lp-forum-message .honorable-item {
background: #1a1a1a !important;
border-radius: 8px !important;
padding: 10px 12px !important;
margin-bottom: 8px !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}
#lp-forum-message .honorable-item .album-tracks {
margin-bottom: 0 !important;
}
#lp-forum-message .honorable-quote {
font-style: italic !important;
color: #999 !important;
margin-top: 10px !important;
font-size: 13px !important;
}
/* Правила */
#lp-forum-message .rules {
background: #191919 !important;
border-radius: 8px !important;
padding: 15px !important;
margin: 15px 0 10px !important;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.4) !important;
}
#lp-forum-message .rules h3 {
color: #b08d57 !important;
font-size: 18px !important;
margin-bottom: 8px !important;
}
#lp-forum-message .rules ul {
list-style: none !important;
padding-left: 0 !important;
color: #bbb !important;
}
#lp-forum-message .rules li {
margin: 5px 0 !important;
color: #bbb !important;
padding-left: 18px !important;
text-indent: -18px !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
/* Футер */
#lp-forum-message .lp-footer {
margin-top: 15px !important;
padding-top: 10px !important;
border-top: 1px solid #333 !important;
text-align: center !important;
font-size: 13px !important;
color: #888 !important;
}
/* Адаптивность */
@media (max-width: 700px) {
#lp-forum-message .lp-title { font-size: 24px !important; letter-spacing: 2px !important; }
#lp-forum-message .album-panel.active { flex-direction: column !important; align-items: center !important; }
#lp-forum-message .album-cover { flex: 0 0 auto !important; max-width: 150px !important; height: auto !important; }
#lp-forum-message .album-info { text-align: center !important; }
#lp-forum-message .album-tracks { justify-content: center !important; }
}
</style>
<div class="lp-header">
<div class="lp-title">LINKIN PARK</div>
<div class="lp-slogan">"In the end, it doesn't even matter... но здесь - имеет значение каждое твоё слово"</div>
</div>
<div class="player-block">
<button class="play-btn" id="playBtn">Play</button>
<audio id="audioPlayer" loop>
<source src="https://archive.org/download/linkin-park_mp3/01%20-%20In%20the%20End.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио.
</audio>
</div>
<div class="albums-section">
<div class="albums-tabs" id="albumTabs">
<button class="album-tab active" data-album="0">Hybrid Theory</button>
<button class="album-tab" data-album="1">Meteora</button>
<button class="album-tab" data-album="2">Minutes to Midnight</button>
</div>
<!-- Альбом 0: Hybrid Theory -->
<div class="album-panel active" data-album="0">
<div class="album-cover">
<img src="https://upload.wikimedia.org/wikipedia/en/2/2a/Linkin_Park_Hybrid_Theory_Album_Cover.jpg" alt="Hybrid Theory">
</div>
<div class="album-info">
<div class="album-title">Hybrid Theory</div>
<div class="album-year">2000</div>
<div class="album-desc">Дебютный альбом, взорвавший мировой чарт. Смесь ню-метала, рэпа и электроники. Именно здесь родился тот самый узнаваемый стиль LP.</div>
<div class="album-tracks">
<a href="#" class="track-tag">Papercut</a>
<a href="#" class="track-tag">One Step Closer</a>
<a href="#" class="track-tag">Crawling</a>
<a href="#" class="track-tag">In the End</a>
<a href="#" class="track-tag">Points of Authority</a>
</div>
<div class="album-quote">"I tried so hard and got so far, but in the end it doesn't even matter..."</div>
</div>
</div>
<!-- Альбом 1: Meteora -->
<div class="album-panel" data-album="1">
<div class="album-cover">
<img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Linkin_Park_Meteora_Album_Cover.jpg" alt="Meteora">
</div>
<div class="album-info">
<div class="album-title">Meteora</div>
<div class="album-year">2003</div>
<div class="album-desc">Второй студийный альбом, закрепивший успех. Более мрачное и плотное звучание, эксперименты с текстурами.</div>
<div class="album-tracks">
<a href="#" class="track-tag">Somewhere I Belong</a>
<a href="#" class="track-tag">Faint</a>
<a href="#" class="track-tag">Numb</a>
<a href="#" class="track-tag">Breaking the Habit</a>
<a href="#" class="track-tag">From the Inside</a>
</div>
<div class="album-quote">"I'm tired of being what you want me to be..."</div>
</div>
</div>
<!-- Альбом 2: Minutes to Midnight -->
<div class="album-panel" data-album="2">
<div class="album-cover">
<img src="https://upload.wikimedia.org/wikipedia/en/7/7a/Minutes_to_Midnight_cover.jpg" alt="Minutes to Midnight">
</div>
<div class="album-info">
<div class="album-title">Minutes to Midnight</div>
<div class="album-year">2007</div>
<div class="album-desc">Отход от ню-метала в сторону альтернативного рока. Политические и социальные темы, более медленные композиции.</div>
<div class="album-tracks">
<a href="#" class="track-tag">Given Up</a>
<a href="#" class="track-tag">Bleed It Out</a>
<a href="#" class="track-tag">Shadow of the Day</a>
<a href="#" class="track-tag">What I've Done</a>
<a href="#" class="track-tag">Leave Out All the Rest</a>
</div>
<div class="album-quote">"In this farewell, there's no blood, there's no alibi..."</div>
</div>
</div>
<!-- Блок "Достойны упоминания" (без названий альбомов) -->
<div class="honorable-block">
<button class="honorable-btn" id="honorableBtn">Достойны упоминания</button>
<div class="honorable-content" id="honorableContent">
<div class="honorable-item">
<div class="album-tracks">
<a href="#" class="track-tag">Guilty All the Same</a>
<a href="#" class="track-tag">Until It's Gone</a>
<a href="#" class="track-tag">Wastelands</a>
<a href="#" class="track-tag">Rebellion</a>
<a href="#" class="track-tag">Final Masquerade</a>
<a href="#" class="track-tag">Heavy</a>
<a href="#" class="track-tag">Talking to Myself</a>
<a href="#" class="track-tag">One More Light</a>
<a href="#" class="track-tag">Invisible</a>
<a href="#" class="track-tag">Sharp Edges</a>
<a href="#" class="track-tag">The Emptiness Machine</a>
<a href="#" class="track-tag">Heavy Is the Crown</a>
<a href="#" class="track-tag">Over Each Other</a>
<a href="#" class="track-tag">Two Faced</a>
<a href="#" class="track-tag">Casualty</a>
<a href="#" class="track-tag">Burn It Down</a>
<a href="#" class="track-tag">Lost in the Echo</a>
<a href="#" class="track-tag">Castle of Glass</a>
<a href="#" class="track-tag">Powerless</a>
<a href="#" class="track-tag">Roads Untraveled</a>
</div>
</div>
<div class="honorable-quote">"Треки, которые мне нравятся и зря были добавлены в ужасные альбомы, им там не место"</div>
</div>
</div>
</div>
<div class="rules">
<h3>⚡ ПРАВИЛА ТЕМЫ ⚡</h3>
<ul>
<li>● Уважайте мнение каждого - даже если кто-то не считает "Hybrid Theory" лучшим альбомом.</li>
<li>● Делитесь постами, артами, треками, каверами, ремиксами и историями, интересностями, связанными с LP. AI можно, но только с "один в один" голосом.</li>
<li>● Обсуждаем творчество, а не личную жизнь участников (если это не имеет прямого отношения к музыке).</li>
<li>● Никакого хейта в адрес новых или старых участников - мы здесь ради музыки.</li>
<li>● Флуд запрещён. Основная тема - творчество.</li>
<li>● Мы итак знаем что здесь ужасная попса, просьба лишний раз не напоминать об этом.</li>
</ul>
</div>
<div class="lp-footer">
<p>#LinkinPark #HybridTheory #Meteora</p>
<p style="margin-top:8px;">Давайте создадим здесь настоящий цифровой храм для всех, кто чувствует эту музыку. 🎸</p>
</div>
<script>
(function() {
// Переключение основных альбомов
var tabs = document.querySelectorAll('#lp-forum-message .album-tab');
var panels = document.querySelectorAll('#lp-forum-message .album-panel');
function activateAlbum(index) {
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
panels.forEach(function(panel) {
panel.classList.remove('active');
});
var targetTab = document.querySelector('#lp-forum-message .album-tab[data-album="' + index + '"]');
var targetPanel = document.querySelector('#lp-forum-message .album-panel[data-album="' + index + '"]');
if (targetTab) targetTab.classList.add('active');
if (targetPanel) targetPanel.classList.add('active');
}
tabs.forEach(function(tab) {
tab.addEventListener('click', function() {
var index = this.getAttribute('data-album');
activateAlbum(index);
});
});
// Кнопка "Достойны упоминания"
var honorableBtn = document.getElementById('honorableBtn');
var honorableContent = document.getElementById('honorableContent');
honorableBtn.addEventListener('click', function() {
honorableContent.classList.toggle('show');
});
// Плеер
var playBtn = document.getElementById('playBtn');
var audio = document.getElementById('audioPlayer');
var isPlaying = false;
// Громкость 20%
audio.volume = 0.2;
playBtn.addEventListener('click', function() {
if (isPlaying) {
audio.pause();
playBtn.textContent = 'Play';
isPlaying = false;
} else {
audio.play().catch(function(e) {
alert('Не удалось воспроизвести аудио. Проверьте источник.');
});
playBtn.textContent = 'Pause';
isPlaying = true;
}
});
audio.addEventListener('ended', function() {
playBtn.textContent = 'Play';
isPlaying = false;
});
})();
</script>
</div>
[/html]
