dia_drop™ LAB | Command Center
Command Center for XR Infrastructure, Drops, and Forging
🌐 XRHighway
Claim, stack, and traverse a global XR grid. Tiles, signs, Light Points, and Ghost_Dia integration.
Enter XRHighway
🥏 Disc Duel
XR-enabled smart disc battles. Sync to Disc II, track throws, dominate the park with real-world XR game physics.
Play Disc Duel
💎 Drop Shop + DIA Forge
Preorder smart gear. Unlock digital goods. Forge with ink. Shape the economy with your own hands.
🧬 AVA AI Concierge
Live tile insights, real-time chat, forge intelligence, and AI-led global stack operations. Ask AVA anything.
Talk to AVA
📊 Subscription Mine
Subscribe for monthly DIA, blueprint unlocks, and forge access from Blue to Violet.
View Plans
🧿 Ghost Access
Unlock stealth access, advanced crafting, or tile whispering via Ghost_DIA tokens. Only the worthy get in.
View Ghost Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XRHighway | dia_drop™ LAB Portal</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body { background-color: #000; font-family: 'Arial', sans-serif; }
.neon {
border: 2px solid #0ff;
box-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
}
.diamond {
width: 180px; height: 180px;
transform: rotate(45deg);
}
.diamond .content {
transform: rotate(-45deg);
}
#signpost {
width: 8px;
background: rgba(0,255,255,0.25);
height: 400px;
}
.arm {
position: absolute;
background: rgba(0,0,0,0.7);
color: #cff;
padding: .5rem 1rem;
border: 2px solid #0ff;
box-shadow: 0 0 4px #0ff;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
}
.arm.country { top: -20px; left: -140px; transform: rotate(-25deg); }
.arm.latlon { top: 60px; left: 140px; transform: rotate( 25deg); }
.arm.xre { top: 180px; left: 160px; transform: rotate( 0deg); }
.arm.claim { top: 260px; left: -140px; transform: rotate( 25deg); }
.arm.chat { top: 340px; left: 140px; transform: rotate(-25deg); }
</style>
</head>
<body class="text-white bg-black">
<header class="p-6 flex flex-col md:flex-row items-center justify-between gap-4 border-b border-gray-700">
<div class="flex items-center gap-4">
<img src="/dia_drop_logo_512.png" alt="dia_drop™ Logo" class="w-16 h-16">
<div>
<h1 class="text-4xl font-extrabold tracking-wide">dia_drop™ LAB</h1>
<p class="text-sm text-cyan-400">Command Center for XR Infrastructure, Drops, and Forging</p>
</div>
</div>
<div class="space-x-4">
<a href="/user/login" class="px-4 py-2 bg-gray-800 hover:bg-cyan-600 rounded-xl text-sm transition">Login</a>
<a href="/user/signup" class="px-4 py-2 bg-cyan-700 hover:bg-cyan-500 text-white rounded-xl text-sm font-semibold transition">Sign Up</a>
</div>
</header>
<main class="flex flex-col items-center py-12">
<!-- Diamond Signpost Top -->
<div class="diamond neon flex items-center justify-center relative">
<img src="https://diadroplab.com/wp-content/uploads/2025/05/CrystalBottle.png" alt="XRH Logo" class="absolute w-12 h-12"/>
<div class="content text-2xl font-bold">XRH-12</div>
</div>
<!-- Signpost Arms -->
<div class="relative mt-4 flex items-start">
<div id="signpost" class="mx-auto"></div>
<div class="arms absolute top-12 left-1/2 -translate-x-1/2">
<div class="arm country" onclick="window.location.href='/user/region'">Country</div>
<div class="arm latlon" onclick="manualLatLon()">Lat / Lon</div>
<div class="arm xre" onclick="window.location.href='/user/xre'">XRE</div>
<div class="arm claim" onclick="window.location.href='/user/claim'">Claim Node</div>
<div class="arm chat" onclick="window.location.href='/user/ava'">Atlas Chat</div>
</div>
</div>
<!-- Globe Display -->
<div id="globeContainer" class="w-64 h-64 mt-12 neon rounded-full overflow-hidden"></div>
</main>
<footer class="text-center py-8 text-gray-500 text-xs border-t border-gray-800">
<p>© 2025 dia_drop™ LAB LLC — Forged in Light. Built for Flight.</p>
<p><a href="mailto:dev@diadroplab.com" class="underline">dev@diadroplab.com</a></p>
</footer>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(256, 256);
document.getElementById('globeContainer').appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(1, 32, 32);
const texture = new THREE.TextureLoader().load('https://raw.githubusercontent.com/jeromeetienne/threex.planets/master/images/earthmap1k.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
globe.rotation.y += 0.002;
renderer.render(scene, camera);
}
animate();
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
renderer.domElement.addEventListener('click', (e) => {
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const hits = raycaster.intersectObject(globe);
if (!hits.length) return;
const p = hits[0].point;
const lat = 90 - (Math.acos(p.y) * 180 / Math.PI);
const lon = ((270 + Math.atan2(p.x, p.z) * 180 / Math.PI) % 360) - 180;
alert(`Lat: ${lat.toFixed(4)}\nLon: ${lon.toFixed(4)}`);
});
function manualLatLon() {
const manual = prompt('Enter Lat, Lon (e.g. 46.0,-117.0):');
if (manual) {
const [lat, lon] = manual.split(',').map(x => x.trim());
alert(`Selected: ${lat}, ${lon}`);
}
}
</script>
</body>
</html>