<div id="app">
<div class="min-h-screen bg-gray-950 text-white p-8">
<div class="max-w-2xl mx-auto">
<div class="flex items-center justify-between">
<h1 class="text-3xl font-bold">EarnLab Box Verifier</h1>
</div>
<div class="relative space-y-2 mt-8">
<div class="text-base text-gray-400 font-medium">Client Seed</div>
<input v-model="clientSeed" placeholder="Enter client seed" class="w-full px-4 py-3 bg-gray-900 rounded-lg text-white placeholder-gray-500 focus:outline-none">
<div class="text-base text-gray-400 font-medium">Server Seed</div>
<input v-model="serverSeed" placeholder="Enter server seed" class="w-full px-4 py-3 bg-gray-900 rounded-lg text-white placeholder-gray-500 focus:outline-none">
<div class="text-base text-gray-400 font-medium">Seed Index</div>
<input v-model.number="seedIndex" type="number" placeholder="Enter seed index" class="w-full px-4 py-3 bg-gray-900 rounded-lg text-white placeholder-gray-500 focus:outline-none">
<button class="px-4 py-2 bg-sky-500 text-black rounded-md hover:bg-sky-600 font-medium transition-colors w-full" @click="getResult">
Generate Ticket
</button>
</div>
<div v-if="ticket !== -1" class="mt-6 p-4 bg-gray-900 rounded-lg">
<div class="font-medium text-sky-500">Ticket:</div> {{ticket}}
</div>
</div>
</div>
</div>const { createApp, ref } = Vue;
const MAX_TICKETS = 100000000;
createApp({
setup() {
const clientSeed = ref("");
const serverSeed = ref("");
const seedIndex = ref();
const ticket = ref(-1);
function getResult() {
const seed = `${clientSeed.value}-${serverSeed.value}-${seedIndex.value}`;
const chance = new Chance(seed);
ticket.value = chance.integer({ min: 0, max: MAX_TICKETS - 1 });
}
return {
clientSeed,
serverSeed,
seedIndex,
ticket,
getResult
};
}
}).mount("#app");
External CSS
This Pen doesn't use any external CSS resources.