<html><head><base href="https://www.543x.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psychedelic Crypto Dreams</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.btn {
padding: 10px 20px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<button class="btn" data-crypto="BTC">BTC</button>
<button class="btn" data-crypto="ETH">ETH</button>
<button class="btn" data-crypto="FTT">FTT</button>
<button class="btn" data-crypto="SOL">SOL</button>
<button class="btn" data-crypto="DOGE">DOGE</button>
<button class="btn" data-crypto="QQ">QQ</button>
<button class="btn" data-crypto="NO">NO</button>
<button class="btn" data-crypto="PEPE">PEPE</button>
</div>
<script>
let scene, camera, renderer, particles;
const particleCount = 5000;
let currentCrypto = 'BTC';
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 50;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
createParticles();
animate();
window.addEventListener('resize', onWindowResize, false);
}
function createParticles() {
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount * 3; i += 3) {
positions[i] = (Math.random() - 0.5) * 100;
positions[i + 1] = (Math.random() - 0.5) * 100;
positions[i + 2] = (Math.random() - 0.5) * 100;
colors[i] = Math.random();
colors[i + 1] = Math.random();
colors[i + 2] = Math.random();
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({
size: 0.5,
vertexColors: true,
transparent: true,
opacity: 0.8
});
particles = new THREE.Points(geometry, material);
scene.add(particles);
}
function animate() {
requestAnimationFrame(animate);
particles.rotation.x += 0.001;
particles.rotation.y += 0.002;
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function changeCrypto(crypto) {
currentCrypto = crypto;
const colors = particles.geometry.attributes.color.array;
for (let i = 0; i < particleCount * 3; i += 3) {
switch(crypto) {
case 'BTC':
colors[i] = 1; // Red
colors[i + 1] = 0.647; // Green
colors[i + 2] = 0; // Blue
break;
case 'ETH':
colors[i] = 0.278;
colors[i + 1] = 0.337;
colors[i + 2] = 0.773;
break;
case 'FTT':
colors[i] = 0.169;
colors[i + 1] = 0.831;
colors[i + 2] = 0.478;
break;
case 'SOL':
colors[i] = 0.4;
colors[i + 1] = 0.2;
colors[i + 2] = 0.7;
break;
case 'DOGE':
colors[i] = 0.988;
colors[i + 1] = 0.725;
colors[i + 2] = 0.192;
break;
case 'QQ':
colors[i] = 0.2;
colors[i + 1] = 0.8;
colors[i + 2] = 0.8;
break;
case 'NO':
colors[i] = 0.8;
colors[i + 1] = 0.1;
colors[i + 2] = 0.1;
break;
case 'PEPE':
colors[i] = 0.133;
colors[i + 1] = 0.545;
colors[i + 2] = 0.133;
break;
default:
colors[i] = Math.random();
colors[i + 1] = Math.random();
colors[i + 2] = Math.random();
}
}
particles.geometry.attributes.color.needsUpdate = true;
gsap.to(particles.rotation, {
x: Math.random() * Math.PI * 2,
y: Math.random() * Math.PI * 2,
duration: 1.5,
ease: "power2.inOut"
});
}
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => {
const crypto = btn.getAttribute('data-crypto');
changeCrypto(crypto);
});
});
init();
</script>
</body>
</html>
