<html><head><base href="https://%E6%A0%87%E9%A2%98%E8%8B%B1%E8%AF%AD%EF%BC%8Chttps://www.543x.com%E5%8F%B3%E4%B8%8A%E6%B7%BB%E5%8A%A0%E9%93%BE%E6%8E%A5%E7%BD%91%E7%AB%99%E4%BB%8B%E7%BB%8D">
<title>Cryptocurrency Periodic Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--primary-color: #0056b3;
--background-color: #f0f8ff;
--element-hover-color: rgba(255,255,255,0.1);
}
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', 'Arial', sans-serif;
background-color: var(--background-color);
color: #333;
line-height: 1.6;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 10px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: var(--primary-color);
color: white;
}
h1 {
font-size: 1.8em;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.site-info {
font-size: 0.9em;
}
.site-info a {
color: white;
text-decoration: none;
padding: 5px 10px;
border: 1px solid white;
border-radius: 5px;
transition: all 0.3s ease;
}
.site-info a:hover {
background-color: white;
color: var(--primary-color);
}
.periodic-table {
display: grid;
grid-template-columns: repeat(18, 1fr);
gap: 1px;
background-color: #fff;
padding: 5px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-top: 20px;
}
.element {
aspect-ratio: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
padding: 2px;
font-size: 0.5vw;
position: relative;
overflow: hidden;
}
.element:hover {
transform: scale(1.05);
z-index: 1;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.element:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--element-hover-color);
pointer-events: none;
}
.symbol {
font-size: 1.2em;
font-weight: bold;
}
.number {
font-size: 0.6em;
position: absolute;
top: 1px;
left: 1px;
}
.name {
font-size: 0.5em;
text-align: center;
margin-top: 1px;
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
backdrop-filter: blur(5px);
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 400px;
border-radius: 8px;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.close:hover {
color: #000;
}
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px;
background-color: #fff;
padding: 8px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.legend-item {
display: flex;
align-items: center;
margin: 3px 5px;
font-size: 0.7em;
}
.legend-color {
width: 15px;
height: 15px;
margin-right: 4px;
border-radius: 2px;
}
.additional-rows {
grid-column: 4 / -1;
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 1px;
margin-top: 5px;
}
.additional-rows::before {
content: attr(data-label);
grid-column: 1 / span 3;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: #f0f0f0;
border-radius: 4px;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
padding: 3px;
font-size: 0.6em;
}
@media (max-width: 1200px) {
.element {
font-size: 0.8vw;
}
.legend-item {
font-size: 0.6em;
}
}
@media (max-width: 768px) {
.element {
font-size: 1.5vw;
}
.legend-item {
font-size: 0.5em;
}
.additional-rows::before {
font-size: 0.5em;
}
}
</style>
</head>
<body>
<header>
<h1>Cryptocurrency Periodic Table</h1>
<div class="site-info">
<a href="https://www.543x.com" target="_blank">Website Info</a>
</div>
</header>
<div class="container">
<div class="periodic-table" id="periodicTable"></div>
<div class="legend" id="legend"></div>
</div>
<div id="elementModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 id="modalTitle"></h2>
<p id="modalInfo"></p>
</div>
</div>
<script>
const cryptoGroups = [
{name: 'Top Tier', color: '#FF6666', coins: ['BTC', 'ETH', 'BNB', 'ADA', 'SOL', 'DOT', 'DOGE']},
{name: 'DeFi Leaders', color: '#FFDAB9', coins: ['LTC', 'LINK', 'MATIC', 'UNI', 'AAVE', 'SUSHI']},
{name: 'Cross-Chain', color: '#A1D344', coins: ['XRP', 'XLM', 'ATOM', 'EGLD']},
{name: 'Layer 1', color: '#40E0D0', coins: ['FTM', 'AVAX', 'NEAR', 'EWT']},
{name: 'Web3 Infrastructure', color: '#CCB974', coins: ['FIL', 'ICP', 'FLOW', 'HNT']},
{name: 'Metaverse', color: '#FFFF99', coins: ['AXS', 'SAND', 'MANA', 'ENJ']},
{name: 'Emerging Protocols', color: '#FFC0CB', coins: ['LUNA', 'FTT', 'GRT', 'RUNE']},
{name: 'Enterprise Solutions', color: '#BFC0C0', coins: ['VET', 'CHZ', 'GALA']},
{name: 'Interoperability', color: '#FFBFFF', coins: ['QNT', 'OCEAN', 'BAL']},
{name: 'Utility Tokens', color: '#F660AB', coins: ['BAT', 'ZRX', 'NMR']},
{name: 'Governance', color: '#FF7F50', coins: ['MKR', 'DAI', 'USDC']},
{name: 'Stablecoins', color: '#00CED1', coins: ['USDT', 'BUSD', 'TUSD']},
{name: 'Meme Coins', color: '#FF69B4', coins: ['SHIB', 'BABYDOGE', 'SAFEMOON', 'QQ', 'NO']},
{name: 'Scalability Solutions', color: '#20B2AA', coins: ['ZIL', 'HOT', 'COTI', 'PEPE', 'GF']},
{name: 'Interchain', color: '#BA55D3', coins: ['ONE', 'CELO', 'KAVA', 'PANDA', 'YAYA']},
{name: 'Yield Farming', color: '#FF4500', coins: ['COMP', 'CRV', 'YFI', 'SATOSHI', 'CAT']},
{name: 'Privacy & Storage', color: '#1E90FF', coins: ['REN', 'ANKR', 'STORJ', 'ORD', 'CLOWN']},
{name: 'DEX', color: '#32CD32', coins: ['UMA', '1INCH', 'BNT', 'YY', 'JUMP', 'DONALD']},
{name: 'Oracles', color: '#FFD700', coins: ['REN', 'BAND', 'OCEAN', 'RLC', 'NKN', 'A', 'MIMI', 'MIQI', 'RABBIT', 'SHEEP', 'SNAKE', 'PEACE', 'RAT', 'MONKEY']},
{name: 'Layer 2', color: '#8A2BE2', coins: ['LRC', 'KNC', 'REQ', 'QKC', 'REP', 'DRAGON', 'X', 'SEAL', 'COW', 'OTTER', 'ORD(', 'ORD{', 'ORD%', 'ORD<']}
];
let cryptoElements = [];
let groupNumber = 1;
cryptoGroups.forEach((group, index) => {
group.coins.forEach((coin, coinIndex) => {
cryptoElements.push({
symbol: coin,
name: coin,
number: groupNumber,
category: group.name,
group: coinIndex + 1,
period: index + 1
});
groupNumber++;
});
});
function createPeriodicTable() {
const table = document.getElementById('periodicTable');
table.innerHTML = '';
cryptoElements.forEach(element => {
const el = document.createElement('div');
el.className = 'element';
el.style.backgroundColor = cryptoGroups.find(group => group.name === element.category)?.color || '#FFFFFF';
el.innerHTML = `
<span class="number">${element.number}</span>
<span class="symbol">${element.symbol}</span>
<span class="name">${element.name}</span>
`;
el.style.gridColumn = element.group;
el.style.gridRow = element.period;
el.addEventListener('click', () => showElementDetails(element));
table.appendChild(el);
});
cryptoGroups.forEach((group, index) => {
if (group.coins.length > 18) {
const additionalRow = document.createElement('div');
additionalRow.className = 'additional-rows';
additionalRow.setAttribute('data-label', group.name);
group.coins.slice(18).forEach((coin, coinIndex) => {
const el = document.createElement('div');
el.className = 'element';
el.style.backgroundColor = group.color;
el.innerHTML = `
<span class="number">${groupNumber + coinIndex}</span>
<span class="symbol">${coin}</span>
<span class="name">${coin}</span>
`;
el.addEventListener('click', () => showElementDetails({
symbol: coin,
name: coin,
number: groupNumber + coinIndex,
category: group.name,
group: coinIndex + 1,
period: index + 1
}));
additionalRow.appendChild(el);
});
table.appendChild(additionalRow);
groupNumber += group.coins.slice(18).length;
}
});
}
function createLegend() {
const legend = document.getElementById('legend');
legend.innerHTML = '';
cryptoGroups.forEach(group => {
const item = document.createElement('div');
item.className = 'legend-item';
item.innerHTML = `
<div class="legend-color" style="background-color: ${group.color};"></div>
<span>${group.name}</span>
`;
legend.appendChild(item);
});
}
function showElementDetails(element) {
const modal = document.getElementById('elementModal');
const modalTitle = document.getElementById('modalTitle');
const modalInfo = document.getElementById('modalInfo');
modalTitle.textContent = `${element.name} (${element.symbol})`;
modalInfo.innerHTML = `
<p><strong>Number:</strong> ${element.number}</p>
<p><strong>Category:</strong> ${element.category}</p>
<p><strong>Group:</strong> ${element.group}</p>
<p><strong>Period:</strong> ${element.period}</p>
`;
modal.style.display = 'block';
}
document.querySelector('.close').onclick = function() {
document.getElementById('elementModal').style.display = 'none';
}
window.onclick = function(event) {
const modal = document.getElementById('elementModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}
createPeriodicTable();
createLegend();
</script>
</body>
</html>
