Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Inked Billionaires</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .filter-chip { | |
| transition: all 0.3s ease; | |
| } | |
| .filter-chip:hover { | |
| transform: translateY(-2px); | |
| } | |
| .billionaire-card { | |
| transition: all 0.3s ease; | |
| } | |
| .billionaire-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 400px; | |
| width: 100%; | |
| } | |
| @media (max-width: 768px) { | |
| .chart-container { | |
| height: 300px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-black text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-center mb-2">Inked Billionaires</h1> | |
| <p class="text-xl md:text-2xl text-center text-gray-300">Exploring the tattoo habits of the world's wealthiest</p> | |
| </div> | |
| </header> | |
| <!-- Filter Section --> | |
| <section class="bg-white py-6 shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-semibold mb-4 text-center">Filter Billionaires</h2> | |
| <div class="flex flex-wrap justify-center gap-3 mb-4"> | |
| <button class="filter-chip bg-blue-100 text-blue-800 px-4 py-2 rounded-full flex items-center" data-tag="all"> | |
| <span>All</span> | |
| <span class="ml-2 bg-blue-200 text-blue-800 text-xs font-bold px-2 py-1 rounded-full">100</span> | |
| </button> | |
| <button class="filter-chip bg-purple-100 text-purple-800 px-4 py-2 rounded-full flex items-center" data-tag="artists"> | |
| <span>Artists</span> | |
| <span class="ml-2 bg-purple-200 text-purple-800 text-xs font-bold px-2 py-1 rounded-full">12</span> | |
| </button> | |
| <button class="filter-chip bg-green-100 text-green-800 px-4 py-2 rounded-full flex items-center" data-tag="business"> | |
| <span>Business</span> | |
| <span class="ml-2 bg-green-200 text-green-800 text-xs font-bold px-2 py-1 rounded-full">45</span> | |
| </button> | |
| <button class="filter-chip bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full flex items-center" data-tag="tech"> | |
| <span>Tech</span> | |
| <span class="ml-2 bg-yellow-200 text-yellow-800 text-xs font-bold px-2 py-1 rounded-full">28</span> | |
| </button> | |
| <button class="filter-chip bg-red-100 text-red-800 px-4 py-2 rounded-full flex items-center" data-tag="finance"> | |
| <span>Finance</span> | |
| <span class="ml-2 bg-red-200 text-red-800 text-xs font-bold px-2 py-1 rounded-full">15</span> | |
| </button> | |
| <button class="filter-chip bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full flex items-center" data-tag="inherited"> | |
| <span>Inherited Wealth</span> | |
| <span class="ml-2 bg-indigo-200 text-indigo-800 text-xs font-bold px-2 py-1 rounded-full">22</span> | |
| </button> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <input type="text" placeholder="Search billionaires..." class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="absolute right-3 top-2 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Inked Billionaires Column --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Inked Billionaires <span class="text-blue-600">(32)</span></h2> | |
| <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">Tattooed</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Sample billionaire cards - these would be generated dynamically in a real app --> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="tech,business"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg/120px-Elon_Musk_Royal_Society_%28crop2%29.jpg" alt="Elon Musk" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank" class="text-blue-600 hover:underline">Elon Musk</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">CEO of Tesla and SpaceX</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $180B</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Tech</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Business</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="artists"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Post_Malone_2018.jpg/120px-Post_Malone_2018.jpg" alt="Post Malone" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Post_Malone" target="_blank" class="text-blue-600 hover:underline">Post Malone</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">Musician and songwriter</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $45M</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Artists</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="business"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Sir_Richard_Branson_%28cropped%29.jpg/120px-Sir_Richard_Branson_%28cropped%29.jpg" alt="Richard Branson" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Richard_Branson" target="_blank" class="text-blue-600 hover:underline">Richard Branson</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">Founder of Virgin Group</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $4.8B</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Business</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Non-Inked Billionaires Column --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Non-Inked Billionaires <span class="text-blue-600">(68)</span></h2> | |
| <span class="bg-gray-100 text-gray-800 text-sm font-semibold px-3 py-1 rounded-full">No tattoos</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Sample billionaire cards --> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="tech"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Bill_Gates_2017_%28cropped%29.jpg/120px-Bill_Gates_2017_%28cropped%29.jpg" alt="Bill Gates" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Bill_Gates" target="_blank" class="text-blue-600 hover:underline">Bill Gates</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">Co-founder of Microsoft</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $104B</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Tech</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="finance"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Warren_Buffett_at_TCF_center_-_2019_%283%29_%28cropped%29.jpg/120px-Warren_Buffett_at_TCF_center_-_2019_%283%29_%28cropped%29.jpg" alt="Warren Buffett" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Warren_Buffett" target="_blank" class="text-blue-600 hover:underline">Warren Buffett</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">CEO of Berkshire Hathaway</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $106B</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Finance</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start" data-tags="inherited"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Walton_family.jpg/120px-Walton_family.jpg" alt="Jim Walton" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/Jim_Walton" target="_blank" class="text-blue-600 hover:underline">Jim Walton</a> | |
| </h3> | |
| <p class="text-gray-600 text-sm">Heir to Walmart fortune</p> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: $68.2B</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Inherited Wealth</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tattoo Statistics Section --> | |
| <section class="bg-white rounded-lg shadow-md p-6 mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Tattoo Prevalence by Income Bracket</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-gray-700 mb-4"> | |
| Research shows that tattoo prevalence varies significantly across income brackets. While tattoos were once associated primarily with lower income groups, they have become increasingly common across all socioeconomic levels. | |
| </p> | |
| <p class="text-gray-700 mb-4"> | |
| Interestingly, the highest income brackets show a lower percentage of tattooed individuals compared to middle-income groups, suggesting that permanent body modifications may be viewed differently among the ultra-wealthy. | |
| </p> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4"> | |
| <p class="text-blue-800"> | |
| <strong>Key Insight:</strong> Only about 14% of individuals in the top 1% income bracket have tattoos, compared to 38% in the middle class. | |
| </p> | |
| </div> | |
| <p class="text-gray-700"> | |
| This data suggests that while tattoos have become more socially acceptable, there may still be subtle socioeconomic factors influencing personal decisions about body modification among the wealthiest individuals. | |
| </p> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="tattooChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mental Models Section --> | |
| <section class="bg-white rounded-lg shadow-md p-6 mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Mental Models Behind Tattoo Decisions</h2> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">1. Future Time Perspective</h3> | |
| <p class="text-gray-700 mb-3"> | |
| Individuals with a longer future time perspective are less likely to get tattoos. This mental model involves the ability to project oneself years into the future and consider how present decisions will affect that future self. | |
| </p> | |
| <div class="bg-blue-100 p-3 rounded"> | |
| <p class="text-blue-800 font-medium">How to improve:</p> | |
| <ul class="list-disc list-inside text-blue-800 space-y-1"> | |
| <li>Practice 10/10/10 thinking: How will I feel about this in 10 weeks, 10 months, 10 years?</li> | |
| <li>Visualize your future self regularly</li> | |
| <li>Engage in long-term planning exercises</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">2. Social Signaling Awareness</h3> | |
| <p class="text-gray-700 mb-3"> | |
| The ultra-wealthy are often highly attuned to how their appearance signals status and competence. Tattoos may be perceived as conflicting with certain professional or social expectations in elite circles. | |
| </p> | |
| <div class="bg-purple-100 p-3 rounded"> | |
| <p class="text-purple-800 font-medium">How to improve:</p> | |
| <ul class="list-disc list-inside text-purple-800 space-y-1"> | |
| <li>Study nonverbal communication and signaling</li> | |
| <li>Analyze how different groups interpret various signals</li> | |
| <li>Develop conscious awareness of your personal brand</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">3. Pain vs. Reward Evaluation</h3> | |
| <p class="text-gray-700 mb-3"> | |
| Many billionaires excel at rigorous cost-benefit analysis. The temporary pain of getting a tattoo may not align with their perceived long-term benefits, especially when considering potential social or professional consequences. | |
| </p> | |
| <div class="bg-green-100 p-3 rounded"> | |
| <p class="text-green-800 font-medium">How to improve:</p> | |
| <ul class="list-disc list-inside text-green-800 space-y-1"> | |
| <li>Practice deliberate decision-making frameworks</li> | |
| <li>Quantify both tangible and intangible costs/benefits</li> | |
| <li>Consider opportunity costs of all decisions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-6"> | |
| <p class="text-yellow-800"> | |
| <strong>Want to master these mental models?</strong> Check out <a href="https://mmpractices.com" target="_blank" class="font-bold underline">MMPractices.com</a> - the best place to level up your thinking skills and decision-making abilities. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Author --> | |
| <section class="bg-white rounded-lg shadow-md p-6 mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">About the Author</h2> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="w-full md:w-1/4 flex justify-center"> | |
| <img src="https://demiculus.com/images/demi.jpg" alt="Demi Yilmaz" class="w-48 h-48 rounded-full object-cover shadow-md"> | |
| </div> | |
| <div class="w-full md:w-3/4"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Demi Yilmaz</h3> | |
| <p class="text-gray-700 mb-4"> | |
| Demi Yilmaz is a researcher and writer fascinated by the intersection of wealth, psychology, and personal expression. With a background in behavioral economics, Demi explores how mental models influence decision-making at all levels of society. | |
| </p> | |
| <p class="text-gray-700 mb-4"> | |
| Through his work, Demi helps individuals understand the cognitive frameworks that shape their choices, from financial decisions to personal style. His insights have been featured in various publications exploring the psychology of wealth and success. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="https://demiculus.com" target="_blank" class="text-blue-600 hover:underline flex items-center"> | |
| <i class="fas fa-globe mr-2"></i> Website | |
| </a> | |
| <a href="https://mmpractices.com" target="_blank" class="text-purple-600 hover:underline flex items-center"> | |
| <i class="fas fa-brain mr-2"></i> MMPractices | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">Inked Billionaires</h3> | |
| <p class="text-gray-400">Exploring the tattoo habits of the world's wealthiest</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Inked Billionaires. All data is for educational purposes only.</p> | |
| <p class="mt-2">Want to improve your thinking? Visit <a href="https://mmpractices.com" target="_blank" class="text-blue-400 hover:underline">MMPractices.com</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Billionaires data with profile images | |
| const billionaires = [ | |
| { | |
| name: "Elon Musk", | |
| networth: "$250B", | |
| tags: ["tech", "business"], | |
| inked: false, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg" | |
| }, | |
| { | |
| name: "Jeff Bezos", | |
| networth: "$200B", | |
| tags: ["tech", "business"], | |
| inked: false, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/6/6c/Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_%2839074799225%29_%28cropped%29.jpg" | |
| }, | |
| { | |
| name: "Richard Branson", | |
| networth: "$3B", | |
| tags: ["business"], | |
| inked: true, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/8/82/Sir_Richard_Branson_%28cropped%29.jpg" | |
| }, | |
| { | |
| name: "Jack Dorsey", | |
| networth: "$4B", | |
| tags: ["tech"], | |
| inked: true, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/3/3e/Jack_Dorsey_in_2009.jpg" | |
| }, | |
| { | |
| name: "Jay-Z", | |
| networth: "$2.5B", | |
| tags: ["artist", "business"], | |
| inked: true, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/9/9c/Jay-Z_%40_Shawn_%27Jay-Z%27_Carter_Foundation_Carnival_%28crop_2%29.jpg" | |
| }, | |
| { | |
| name: "Mark Zuckerberg", | |
| networth: "$150B", | |
| tags: ["tech"], | |
| inked: false, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/1/18/Mark_Zuckerberg_F8_2019_Keynote_%2832830578717%29_%28cropped%29.jpg" | |
| }, | |
| { | |
| name: "Rihanna", | |
| networth: "$1.4B", | |
| tags: ["artist", "business"], | |
| inked: true, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/c/c2/Rihanna_Fenty_2018.png" | |
| }, | |
| { | |
| name: "Warren Buffett", | |
| networth: "$120B", | |
| tags: ["finance"], | |
| inked: false, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/d/d2/Warren_Buffett_at_TCF_center_-_2019_%283%29_%28cropped%29.jpg" | |
| }, | |
| { | |
| name: "Kylie Jenner", | |
| networth: "$700M", | |
| tags: ["artist", "inherited wealth"], | |
| inked: true, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/8/8a/Kylie_Jenner_in_2021.jpg" | |
| }, | |
| { | |
| name: "Alice Walton", | |
| networth: "$70B", | |
| tags: ["inherited wealth"], | |
| inked: false, | |
| image: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Walton_family.jpg" | |
| } | |
| ]; | |
| // Generate billionaire cards | |
| function generateBillionaireCards() { | |
| const inkedContainer = document.querySelector('.bg-white.rounded-lg.shadow-md.p-6:first-child .space-y-4'); | |
| const nonInkedContainer = document.querySelector('.bg-white.rounded-lg.shadow-md.p-6:last-child .space-y-4'); | |
| // Clear existing cards | |
| inkedContainer.innerHTML = ''; | |
| nonInkedContainer.innerHTML = ''; | |
| // Count stats | |
| let inkedCount = 0; | |
| let nonInkedCount = 0; | |
| billionaires.forEach(billionaire => { | |
| // Create card HTML | |
| const card = document.createElement('div'); | |
| card.className = 'billionaire-card bg-white border border-gray-200 rounded-lg p-4 flex items-start'; | |
| card.setAttribute('data-tags', billionaire.tags.join(',')); | |
| // Generate tag badges | |
| const tagsHtml = billionaire.tags.map(tag => { | |
| const colorClasses = { | |
| tech: 'bg-yellow-100 text-yellow-800', | |
| business: 'bg-green-100 text-green-800', | |
| artist: 'bg-purple-100 text-purple-800', | |
| finance: 'bg-red-100 text-red-800', | |
| 'inherited wealth': 'bg-indigo-100 text-indigo-800' | |
| }; | |
| return `<span class="${colorClasses[tag] || 'bg-gray-100 text-gray-800'} text-xs px-2 py-1 rounded">${tag}</span>`; | |
| }).join(''); | |
| card.innerHTML = ` | |
| <img src="${billionaire.image}" alt="${billionaire.name}" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg"> | |
| <a href="https://en.wikipedia.org/wiki/${billionaire.name.replace(' ', '_')}" target="_blank" class="text-blue-600 hover:underline">${billionaire.name}</a> | |
| </h3> | |
| <p class="text-gray-500 text-xs mt-1">Net worth: ${billionaire.networth}</p> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| ${tagsHtml} | |
| </div> | |
| </div> | |
| `; | |
| // Add to appropriate container | |
| if (billionaire.inked) { | |
| inkedContainer.appendChild(card); | |
| inkedCount++; | |
| } else { | |
| nonInkedContainer.appendChild(card); | |
| nonInkedCount++; | |
| } | |
| }); | |
| // Update counts | |
| document.querySelector('.bg-white.rounded-lg.shadow-md.p-6:first-child h2 span').textContent = `(${inkedCount})`; | |
| document.querySelector('.bg-white.rounded-lg.shadow-md.p-6:last-child h2 span').textContent = `(${nonInkedCount})`; | |
| } | |
| // Chart.js implementation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| generateBillionaireCards(); | |
| const ctx = document.getElementById('tattooChart').getContext('2d'); | |
| const tattooChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Bottom 20%', 'Lower Middle 20%', 'Middle 20%', 'Upper Middle 20%', 'Top 20%', 'Top 1%'], | |
| datasets: [{ | |
| label: 'Percentage with Tattoos', | |
| data: [42, 38, 36, 28, 19, 14], | |
| backgroundColor: [ | |
| 'rgba(75, 192, 192, 0.6)', | |
| 'rgba(54, 162, 235, 0.6)', | |
| 'rgba(153, 102, 255, 0.6)', | |
| 'rgba(255, 159, 64, 0.6)', | |
| 'rgba(255, 99, 132, 0.6)', | |
| 'rgba(201, 203, 207, 0.6)' | |
| ], | |
| borderColor: [ | |
| 'rgba(75, 192, 192, 1)', | |
| 'rgba(54, 162, 235, 1)', | |
| 'rgba(153, 102, 255, 1)', | |
| 'rgba(255, 159, 64, 1)', | |
| 'rgba(255, 99, 132, 1)', | |
| 'rgba(201, 203, 207, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Percentage with Tattoos (%)' | |
| } | |
| }, | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Income Bracket' | |
| } | |
| } | |
| }, | |
| plugins: { | |
| title: { | |
| display: true, | |
| text: 'Tattoo Prevalence by Income Bracket', | |
| font: { | |
| size: 16 | |
| } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.parsed.y + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Filter functionality | |
| const filterChips = document.querySelectorAll('.filter-chip'); | |
| filterChips.forEach(chip => { | |
| chip.addEventListener('click', function() { | |
| const tag = this.getAttribute('data-tag'); | |
| // Update active state | |
| filterChips.forEach(c => c.classList.remove('ring-2', 'ring-blue-500')); | |
| this.classList.add('ring-2', 'ring-blue-500'); | |
| // Filter cards | |
| const cards = document.querySelectorAll('.billionaire-card'); | |
| cards.forEach(card => { | |
| if (tag === 'all' || card.getAttribute('data-tags').includes(tag)) { | |
| card.style.display = 'flex'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Update filter counts | |
| const tagCounts = { | |
| all: billionaires.length, | |
| artists: billionaires.filter(b => b.tags.includes('artist')).length, | |
| business: billionaires.filter(b => b.tags.includes('business')).length, | |
| tech: billionaires.filter(b => b.tags.includes('tech')).length, | |
| finance: billionaires.filter(b => b.tags.includes('finance')).length, | |
| inherited: billionaires.filter(b => b.tags.includes('inherited wealth')).length | |
| }; | |
| filterChips.forEach(chip => { | |
| const tag = chip.getAttribute('data-tag'); | |
| const countSpan = chip.querySelector('span:last-child'); | |
| if (countSpan) { | |
| countSpan.textContent = tagCounts[tag] || 0; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thellimist/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |