Show description
The Immortal Hulk Hogan: An Interactive Chronicle
The Immortal Hulk Hogan: An Interactive Chronicle
THE IMMORTAL HULK HOGAN
Origins
Hulkamania
The nWo
Legacy
Origins
Hulkamania
The nWo
Legacy
WHATCHA GONNA DO...
...WHEN HULKAMANIA RUNS WILD ON YOU?
This is the definitive interactive story of Terry Bollea, the man who became a pop culture icon. Explore the eras, the championships, and the controversies that defined one of the most recognizable figures in entertainment history.
THE MAN BEFORE THE MYTH
Before the roar of the crowd and the red and yellow, there was Terry Bollea: a shy, music-loving kid from Florida. This section explores his transformation from a bassist in a local rock band to a formidable wrestling trainee under the notoriously tough Hiro Matsuda, culminating in the career-altering role of "Thunderlips" in *Rocky III*.
From Bassist to Brawler
Long before stepping into a ring, Terry Bollea's passion was music. He spent a decade as a fretless bass player in Florida rock bands, most notably Ruckus. This experience on stage was a crucial training ground, teaching him how to command a live audience—a skill that would define his wrestling persona.
His imposing 6'7" frame didn't go unnoticed. Wrestlers Jack and Jerry Brisco saw his potential and introduced him to trainer Hiro Matsuda. In a legendary test of grit, Matsuda broke Bollea's leg on his first day. Bollea's return to the gym after healing earned Matsuda's respect and began his arduous journey into professional wrestling.
The "Thunderlips" Gamble
While in his first WWF run as a villain, Sylvester Stallone spotted him on TV and cast him as the colossal wrestler "Thunderlips" in *Rocky III*. Vince McMahon Sr., a staunch traditionalist, forbade it and fired him for taking the role. This act of defiance became the most important decision of his career, catapulting him to mainstream fame and setting the stage for the birth of a phenomenon.
Terry Bollea honed his performance skills on the stages of the Florida music scene long before he became Hulk Hogan.
HULKAMANIA IS BORN
On January 23, 1984, Hulk Hogan defeated The Iron Sheik to become WWF Champion, and the world of entertainment was never the same. "Hulkamania" was more than a wrestler; it was a cultural movement.…
The Immortal Hulk Hogan: An Interactive Chronicle
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Immortal Hulk Hogan: An Interactive Chronicle</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Hulkamania Reimagined -->
<!-- Application Structure Plan: A single-page, vertical scrolling timeline structure. A sticky navigation bar allows users to jump to key eras: 'Origins', 'Hulkamania', 'nWo', and 'Legacy'. This chronological flow is the most intuitive way to explore a biography. It breaks down a dense report into digestible, thematic sections. Key interactions include a dynamic chart for championship reigns to visualize dominance, a filterable table for title history for detailed exploration, and tabbed content for rivalries to organize information cleanly. This structure guides the user through Hogan's story, making the complex narrative easy to follow and interact with. -->
<!-- Visualization & Content Choices:
- Report Info: Career Timeline -> Goal: Show progression -> Viz/Method: Interactive vertical timeline (HTML/CSS/JS) -> Interaction: Scroll-based highlighting -> Justification: Visually engaging and easy to follow the chronological flow.
- Report Info: Major Championship History -> Goal: Compare reign lengths -> Viz/Method: Bar Chart (Chart.js) -> Interaction: Hover for details -> Justification: Provides an immediate visual comparison of the duration and impact of his different title reigns, which is more powerful than a simple table.
- Report Info: Major Championship History Table -> Goal: Organize detailed data -> Viz/Method: Filterable HTML Table -> Interaction: Dropdown to filter by promotion (WWF/WCW) -> Justification: Allows users to drill down into specific data points they are interested in, making a large data table more manageable.
- Report Info: Key Rivalries -> Goal: Organize complex narratives -> Viz/Method: Tabbed content sections (HTML/JS) -> Interaction: Click tabs to switch content -> Justification: Prevents overwhelming the user with too much text at once; organizes related content cleanly.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #fefce8; /* Warm Neutral - Cream */
}
h1, h2, h3 {
font-family: 'Anton', sans-serif;
letter-spacing: 1.5px;
}
.hulk-yellow { color: #facc15; } /* Yellow */
.hulk-red { color: #dc2626; } /* Red */
.nwo-black { color: #1f2937; } /* Gray-Black */
.bg-hulk-yellow { background-color: #facc15; }
.bg-hulk-red { background-color: #dc2626; }
.bg-nwo-black { background-color: #1f2937; }
.nav-link {
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.active {
border-bottom-color: #dc2626;
color: #dc2626;
}
.timeline-item .timeline-content {
transition: all 0.3s ease-in-out;
transform: translateY(10px);
opacity: 0;
}
.timeline-item.visible .timeline-content {
transform: translateY(0);
opacity: 1;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 50vh;
}
.tab-btn.active {
background-color: #dc2626;
color: white;
}
</style>
</head>
<body class="text-gray-800">
<!-- Header & Navigation -->
<header class="bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-md">
<nav class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0">
<h1 class="text-2xl md:text-3xl hulk-red">THE IMMORTAL HULK HOGAN</h1>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#origins" class="nav-link px-3 py-2 rounded-md text-sm font-bold uppercase text-gray-700">Origins</a>
<a href="#hulkamania" class="nav-link px-3 py-2 rounded-md text-sm font-bold uppercase text-gray-700">Hulkamania</a>
<a href="#nwo" class="nav-link px-3 py-2 rounded-md text-sm font-bold uppercase text-gray-700">The nWo</a>
<a href="#legacy" class="nav-link px-3 py-2 rounded-md text-sm font-bold uppercase text-gray-700">Legacy</a>
</div>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-white hover:bg-hulk-red focus:outline-none">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#origins" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700">Origins</a>
<a href="#hulkamania" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700">Hulkamania</a>
<a href="#nwo" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700">The nWo</a>
<a href="#legacy" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-700">Legacy</a>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="relative text-center py-20 md:py-32 bg-yellow-50">
<div class="absolute inset-0 bg-hulk-yellow opacity-80"></div>
<div class="absolute inset-0 bg-repeat" style="background-image: url('https://www.transparenttextures.com/patterns/az-subtle.png');"></div>
<div class="relative container mx-auto px-4">
<h2 class="text-5xl md:text-7xl lg:text-8xl font-extrabold hulk-red drop-shadow-lg">WHATCHA GONNA DO...</h2>
<p class="mt-4 text-xl md:text-2xl font-bold text-white drop-shadow-md">...WHEN HULKAMANIA RUNS WILD ON YOU?</p>
<p class="mt-8 max-w-3xl mx-auto text-lg text-white font-semibold">This is the definitive interactive story of Terry Bollea, the man who became a pop culture icon. Explore the eras, the championships, and the controversies that defined one of the most recognizable figures in entertainment history.</p>
</div>
</section>
<!-- Origins Section -->
<section id="origins" class="py-16 sm:py-24 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl text-center font-bold nwo-black mb-4">THE MAN BEFORE THE MYTH</h2>
<p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-12">Before the roar of the crowd and the red and yellow, there was Terry Bollea: a shy, music-loving kid from Florida. This section explores his transformation from a bassist in a local rock band to a formidable wrestling trainee under the notoriously tough Hiro Matsuda, culminating in the career-altering role of "Thunderlips" in *Rocky III*.</p>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6 text-gray-700 leading-relaxed">
<h3 class="text-3xl font-bold hulk-red">From Bassist to Brawler</h3>
<p>Long before stepping into a ring, Terry Bollea's passion was music. He spent a decade as a fretless bass player in Florida rock bands, most notably Ruckus. This experience on stage was a crucial training ground, teaching him how to command a live audience—a skill that would define his wrestling persona.</p>
<p>His imposing 6'7" frame didn't go unnoticed. Wrestlers Jack and Jerry Brisco saw his potential and introduced him to trainer Hiro Matsuda. In a legendary test of grit, Matsuda broke Bollea's leg on his first day. Bollea's return to the gym after healing earned Matsuda's respect and began his arduous journey into professional wrestling.</p>
<h3 class="text-3xl font-bold hulk-red mt-6">The "Thunderlips" Gamble</h3>
<p>While in his first WWF run as a villain, Sylvester Stallone spotted him on TV and cast him as the colossal wrestler "Thunderlips" in *Rocky III*. Vince McMahon Sr., a staunch traditionalist, forbade it and fired him for taking the role. This act of defiance became the most important decision of his career, catapulting him to mainstream fame and setting the stage for the birth of a phenomenon.</p>
</div>
<div class="p-4 bg-gray-100 rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/facc15/1f2937?text=Terry+Bollea:+Musician" alt="Terry Bollea as a musician" class="rounded-lg shadow-md w-full">
<p class="text-center mt-4 font-semibold text-gray-600">Terry Bollea honed his performance skills on the stages of the Florida music scene long before he became Hulk Hogan.</p>
</div>
</div>
</div>
</section>
<!-- Hulkamania Section -->
<section id="hulkamania" class="py-16 sm:py-24 bg-yellow-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl text-center font-bold hulk-red mb-4">HULKAMANIA IS BORN</h2>
<p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-12">On January 23, 1984, Hulk Hogan defeated The Iron Sheik to become WWF Champion, and the world of entertainment was never the same. "Hulkamania" was more than a wrestler; it was a cultural movement. This section details the rise of the red-and-yellow superhero, his iconic rivalries, and his dominance on wrestling's grandest stage, WrestleMania.</p>
<div class="bg-white p-6 md:p-8 rounded-xl shadow-2xl">
<h3 class="text-3xl font-bold text-center nwo-black mb-8">Championship Dominance</h3>
<div class="chart-container mb-12">
<canvas id="reignsChart"></canvas>
</div>
<p class="text-center text-gray-600 max-w-2xl mx-auto">This chart visualizes the duration of Hulk Hogan's 12 major singles championships in WWF/E and WCW. His first WWF reign, lasting an incredible 1,474 days, established Hulkamania as an unstoppable force and laid the foundation for the WWF's global expansion.</p>
</div>
<div class="mt-16">
<h3 class="text-3xl font-bold text-center nwo-black mb-8">A Pantheon of Rivals</h3>
<div class="max-w-4xl mx-auto">
<div class="mb-4 flex justify-center border-b border-gray-300">
<button data-tab="andre" class="tab-btn p-4 text-lg font-bold border-b-2 border-transparent hover:border-red-500 hover:text-red-500 transition active">André the Giant</button>
<button data-tab="savage" class="tab-btn p-4 text-lg font-bold border-b-2 border-transparent hover:border-red-500 hover:text-red-500 transition">Randy Savage</button>
<button data-tab="piper" class="tab-btn p-4 text-lg font-bold border-b-2 border-transparent hover:border-red-500 hover:text-red-500 transition">Roddy Piper</button>
</div>
<div id="rivals-content" class="p-6 bg-white rounded-lg shadow-lg">
<div id="andre-content" class="tab-content space-y-4">
<h4 class="text-2xl font-bold hulk-red">Irresistible Force vs. Immovable Object</h4>
<p>The definitive feud of the era. The buildup to their WrestleMania III clash was masterful, portraying the once-beloved André as a jealous monster. The climax, with Hogan lifting the 520-pound giant for "the bodyslam heard 'round the world" in front of over 93,000 fans, is arguably the most iconic moment in wrestling history.</p>
</div>
<div id="savage-content" class="tab-content space-y-4 hidden">
<h4 class="text-2xl font-bold hulk-red">The Mega Powers Explode</h4>
<p>A more personal and complex rivalry. Hogan and Savage formed the dominant "Mega Powers" tag team, but the storyline brilliantly played on Savage's paranoia and jealousy over their manager, Miss Elizabeth. Their epic confrontation at WrestleMania V was the culmination of a year-long story and one of the most emotionally charged matches of the era.</p>
</div>
<div id="piper-content" class="tab-content space-y-4 hidden">
<h4 class="text-2xl font-bold hulk-red">The Rock 'n' Wrestling Connection</h4>
<p>Piper's loud-mouthed, anti-establishment persona was the perfect foil for Hogan's clean-cut American hero. Their feud, famously involving Cyndi Lauper and Mr. T, was the central conflict that led to the main event of the first WrestleMania, setting the template for the sports-entertainment crossover model.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- nWo Section -->
<section id="nwo" class="py-16 sm:py-24 bg-gray-900 text-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl text-center font-bold text-white mb-4">HOLLYWOOD & THE HEEL TURN</h2>
<p class="text-center text-lg text-gray-300 max-w-3xl mx-auto mb-12">By the mid-90s, the red-and-yellow hero felt dated. In a move that shocked the world, Hulk Hogan turned his back on the fans at Bash at the Beach 1996. He traded his classic colors for black and white, becoming the villainous leader of the New World Order (nWo). This section covers the most successful reinvention in wrestling history and its impact on the Monday Night War.</p>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="p-4 bg-gray-800 rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/1f2937/ffffff?text=Hollywood+Hogan" alt="Hollywood Hogan" class="rounded-lg shadow-md w-full">
<p class="text-center mt-4 font-semibold text-gray-400">The "Hollywood" Hogan persona and the nWo were a cultural phenomenon, leading WCW to 83 straight weeks of ratings victories over the WWF.</p>
</div>
<div class="space-y-6 leading-relaxed">
<h3 class="text-3xl font-bold">"You Can Call This The New World Order of Wrestling, Brother."</h3>
<p>When Scott Hall and Kevin Nash, "The Outsiders," invaded WCW, they promised a mystery third partner. At Bash at the Beach, that partner was revealed to be Hulk Hogan. He dropped his signature leg drop on his friend Randy Savage, turning heel for the first time in over a decade.</p>
<p>The transformation was total. He became "Hollywood" Hogan, an arrogant, black-clad villain who berated the fans. The nWo became the coolest act in wrestling, tapping into the anti-establishment sentiment of the 90s. The angle was the primary driver of WCW's success in the "Monday Night War," forcing the WWF to adapt and usher in its own edgy "Attitude Era."</p>
</div>
</div>
</div>
</section>
<!-- Legacy Section -->
<section id="legacy" class="py-16 sm:py-24 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl text-center font-bold nwo-black mb-4">AN IMMORTAL LEGACY</h2>
<p class="text-center text-lg text-gray-600 max-w-3xl mx-auto mb-12">Hulk Hogan's story is one of profound duality: the industry's greatest hero and one of its most effective villains. This final section examines his later career, including his iconic match with The Rock, and confronts the controversies—the steroid trial, the Gawker lawsuit, and the racism scandal—that create a complex but unforgettable legacy.</p>
<div class="bg-yellow-50 p-6 md:p-8 rounded-xl shadow-2xl">
<h3 class="text-3xl font-bold text-center nwo-black mb-2">Championship Record</h3>
<p class="text-center text-gray-600 mb-6">Explore Hogan's detailed championship history. Use the filter to view his reigns in a specific promotion.</p>
<div class="flex justify-center mb-6">
<select id="promotionFilter" class="block w-full max-w-xs p-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500">
<option value="all">All Promotions</option>
<option value="WWF">WWF/E</option>
<option value="WCW">WCW</option>
</select>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-200">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Championship</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Promotion</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Date Won</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Opponent</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Duration</th>
</tr>
</thead>
<tbody id="championshipTableBody" class="bg-white divide-y divide-gray-200">
<!-- JS will populate this -->
</tbody>
</table>
</div>
</div>
<div class="mt-16 max-w-4xl mx-auto space-y-8">
<h3 class="text-3xl font-bold text-center nwo-black mb-8">Trials and Tribulations</h3>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h4 class="text-xl font-bold hulk-red">The Steroid Scandal (1994)</h4>
<p class="mt-2 text-gray-700">During the 1994 government trial against Vince McMahon, Hogan testified under immunity that he had used steroids for 14 years. This admission contradicted his public image as a hero who told kids to "take your vitamins," tarnishing his heroic facade permanently.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h4 class="text-xl font-bold hulk-red">Bollea v. Gawker (2012-2016)</h4>
<p class="mt-2 text-gray-700">After the website Gawker published a clip from a private sex tape, Bollea sued for invasion of privacy. He was awarded $140 million, a landmark verdict that bankrupted the media company and sparked a national debate on privacy and free press.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h4 class="text-xl font-bold hulk-red">Fall From Grace and Redemption (2015-2018)</h4>
<p class="mt-2 text-gray-700">Transcripts leaked during the Gawker lawsuit revealed Bollea making racist remarks. WWE fired him and removed him from the Hall of Fame. After three years of public apologies and community work, he was reinstated in 2018, completing a difficult journey of public redemption.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p>© 2025 The Immortal Hulk Hogan Interactive Chronicle. All rights reserved.</p>
<p class="text-sm text-gray-400 mt-2">This is a fan-created project for informational purposes, based on the report "The Immortal: A Comprehensive Chronicle of Hulk Hogan."</p>
</div>
</footer>
<script>
const championshipData = [
{ championship: "WWF World Heavyweight", promotion: "WWF", dateWon: "Jan 23, 1984", opponent: "The Iron Sheik", duration: 1474 },
{ championship: "WWF World Heavyweight", promotion: "WWF", dateWon: "Apr 2, 1989", opponent: "Randy Savage", duration: 364 },
{ championship: "WWF World Heavyweight", promotion: "WWF", dateWon: "Mar 24, 1991", opponent: "Sgt. Slaughter", duration: 248 },
{ championship: "WWF World Heavyweight", promotion: "WWF", dateWon: "Dec 3, 1991", opponent: "The Undertaker", duration: 1 },
{ championship: "WWF World Heavyweight", promotion: "WWF", dateWon: "Apr 4, 1993", opponent: "Yokozuna", duration: 70 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Jul 17, 1994", opponent: "Ric Flair", duration: 469 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Aug 10, 1996", opponent: "The Giant", duration: 359 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Aug 9, 1997", opponent: "Lex Luger", duration: 141 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Apr 20, 1998", opponent: "Randy Savage", duration: 77 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Jan 4, 1999", opponent: "Kevin Nash", duration: 69 },
{ championship: "WCW World Heavyweight", promotion: "WCW", dateWon: "Jul 12, 1999", opponent: "Randy Savage", duration: 62 },
{ championship: "WWE Undisputed", promotion: "WWF", dateWon: "Apr 21, 2002", opponent: "Triple H", duration: 28 }
];
document.addEventListener('DOMContentLoaded', function() {
// Mobile Menu
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Navigation scroll highlighting
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
window.onscroll = () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (pageYOffset >= sectionTop - 85) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
};
// Chart.js - Championship Reigns
const ctx = document.getElementById('reignsChart').getContext('2d');
const reignsChart = new Chart(ctx, {
type: 'bar',
data: {
labels: championshipData.map((reign, index) => `Reign ${index + 1} (${reign.promotion})`),
datasets: [{
label: 'Duration of Reign (Days)',
data: championshipData.map(reign => reign.duration),
backgroundColor: championshipData.map(reign => reign.promotion === 'WCW' ? 'rgba(31, 41, 55, 0.8)' : 'rgba(220, 38, 38, 0.8)'),
borderColor: championshipData.map(reign => reign.promotion === 'WCW' ? 'rgba(31, 41, 55, 1)' : 'rgba(220, 38, 38, 1)'),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Days Held'
}
},
x: {
ticks: {
callback: function(value, index, ticks) {
const label = this.getLabelForValue(value);
return label.length > 15 ? label.substring(0, 15) + '...' : label;
}
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
title: function(context) {
const index = context[0].dataIndex;
const data = championshipData[index];
return `${data.championship} (${data.promotion})`;
},
label: function(context) {
const index = context.dataIndex;
const data = championshipData[index];
return `Won: ${data.dateWon} vs ${data.opponent}`;
},
afterLabel: function(context) {
return `Duration: ${context.raw} days`;
}
}
}
}
}
});
// Championship Table
const tableBody = document.getElementById('championshipTableBody');
const filter = document.getElementById('promotionFilter');
function populateTable(filterValue) {
tableBody.innerHTML = '';
const filteredData = championshipData.filter(reign => {
if (filterValue === 'all') return true;
return reign.promotion === filterValue;
});
filteredData.forEach(reign => {
const row = `
<tr class="${reign.promotion === 'WCW' ? 'bg-gray-50' : ''}">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${reign.championship}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${reign.promotion}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${reign.dateWon}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${reign.opponent}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold ${reign.duration > 365 ? 'text-red-600' : 'text-gray-600'}">${reign.duration} days</td>
</tr>
`;
tableBody.innerHTML += row;
});
}
filter.addEventListener('change', (e) => populateTable(e.target.value));
populateTable('all');
// Rivals Tabs
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tabId = button.dataset.tab;
tabButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
tabContents.forEach(content => {
if (content.id === `${tabId}-content`) {
content.classList.remove('hidden');
} else {
content.classList.add('hidden');
}
});
});
});
// Timeline animation on scroll
const timelineItems = document.querySelectorAll('.timeline-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.5 });
// This is a placeholder as there's no timeline element in the final design.
// If a timeline was added, each .timeline-item would be observed like this:
// timelineItems.forEach(item => observer.observe(item));
});
</script>
</body>
</html>