<html><head><base href="https://www.543x.com">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加密货币连接图</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.node {
width: 100px;
height: 60px;
border-radius: 10px;
position: absolute;
cursor: move;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.node:hover {
box-shadow: 0 6px 8px rgba(0,0,0,0.2);
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
path {
fill: none;
stroke: #666;
stroke-width: 2;
}
</style>
</head>
<body>
<div class="container" id="container">
<svg id="svg"></svg>
</div>
<script>
const cryptos = ['BTC', 'ETH', 'ADA', 'SOL', 'DOGE', 'QQ', 'NO', 'PEPE', 'GF', 'PANDA', 'YAYA', 'SATOSHI', 'CAT', 'ORD', 'CLOWN', 'YY', 'JUMP', 'DONALD', 'A', 'MIMI', 'MIQI', 'RABBIT', 'SHEEP', 'SNAKE', 'PEACE', 'RAT', 'MONKEY', 'DRAGON', 'X', 'SEAL', 'COW', 'OTTER', 'ORD(', 'ORD{', 'ORD%', 'ORD<'];
const container = document.getElementById('container');
const svg = document.getElementById('svg');
let nodes = [];
function createNode(crypto, x, y) {
const node = document.createElement('div');
node.className = 'node';
node.textContent = crypto;
node.style.left = x + 'px';
node.style.top = y + 'px';
node.style.backgroundColor = getRandomColor();
container.appendChild(node);
nodes.push(node);
let isDragging = false;
let offsetX, offsetY;
node.addEventListener('mousedown', startDragging);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDragging);
function startDragging(e) {
isDragging = true;
offsetX = e.clientX - node.offsetLeft;
offsetY = e.clientY - node.offsetTop;
}
function drag(e) {
if (isDragging) {
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
node.style.left = x + 'px';
node.style.top = y + 'px';
updateConnections();
}
}
function stopDragging() {
isDragging = false;
}
}
function getRandomColor() {
const hue = Math.floor(Math.random() * 360);
return `hsl(${hue}, 70%, 60%)`;
}
function updateConnections() {
svg.innerHTML = '';
for (let i = 0; i < nodes.length - 1; i++) {
connectNodes(nodes[i], nodes[i + 1]);
}
}
function connectNodes(node1, node2) {
const x1 = node1.offsetLeft + node1.offsetWidth / 2;
const y1 = node1.offsetTop + node1.offsetHeight / 2;
const x2 = node2.offsetLeft + node2.offsetWidth / 2;
const y2 = node2.offsetTop + node2.offsetHeight / 2;
const dx = x2 - x1;
const dy = y2 - y1;
const curve = Math.min(Math.abs(dx), Math.abs(dy)) * 0.5;
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', `M${x1},${y1} C${x1+curve},${y1} ${x2-curve},${y2} ${x2},${y2}`);
svg.appendChild(path);
}
// Create nodes in a grid layout
const gridSize = Math.ceil(Math.sqrt(cryptos.length));
const cellSize = Math.min(window.innerWidth, window.innerHeight) / (gridSize + 1);
cryptos.forEach((crypto, index) => {
const row = Math.floor(index / gridSize);
const col = index % gridSize;
const x = (col + 1) * cellSize - 50;
const y = (row + 1) * cellSize - 30;
createNode(crypto, x, y);
});
updateConnections();
window.addEventListener('resize', () => {
updateConnections();
});
</script>
</body>
</html>
