caravan-x
Version:
A terminal-based utility for managing Caravan multisig wallets in regtest mode. This tool simplifies development and testing with Caravan by providing an easy-to-use interface
1,208 lines (1,058 loc) • 103 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CARAVAN-X: BlockCraft - Coming Soon</title>
<!-- External libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
<style>
@font-face {
font-family: "MinecraftFont";
src: url("assets/fonts/minecraft.woff2") format("woff2");
font-display: swap;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111111;
font-family: "MinecraftFont", monospace, sans-serif;
width: 100%;
height: 100%;
color: #f0f0f0;
text-shadow: 2px 2px 0 #000;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="rgba(0,0,0,0)"/><polygon points="4,4 12,8 4,12" fill="%23fff" stroke="%23000" stroke-width="1"/></svg>'),
auto;
}
/* Terminal container */
.terminal-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 800px;
height: 500px;
background-color: #1e2d3b;
border: 4px solid #3b8ba3;
box-shadow: 0 0 30px rgba(59, 139, 163, 0.5);
z-index: 10;
overflow: hidden;
}
.terminal-header {
background-color: #3b8ba3;
height: 40px;
display: flex;
align-items: center;
padding: 0 15px;
}
.terminal-title {
color: #f0f0f0;
font-size: 18px;
flex-grow: 1;
}
.terminal-buttons {
display: flex;
}
.terminal-button {
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 8px;
cursor: pointer;
}
.button-close {
background-color: #ff5f56;
}
.button-minimize {
background-color: #ffbd2e;
}
.button-maximize {
background-color: #27c93f;
}
.terminal-body {
height: calc(100% - 40px);
padding: 20px;
font-family: "Courier New", monospace;
color: #f0f0f0;
overflow: auto;
position: relative;
}
.terminal-line {
margin-bottom: 10px;
display: flex;
opacity: 0;
}
.terminal-line.visible {
opacity: 1;
}
.prompt {
color: #ffbd2e;
margin-right: 10px;
}
.command {
color: #f0f0f0;
}
.response {
color: #a0a0a0;
white-space: pre-wrap;
margin-left: 0;
}
.terminal-input {
background: transparent;
border: none;
color: #f0f0f0;
font-family: "Courier New", monospace;
font-size: inherit;
outline: none;
width: 100%;
}
.cursor {
display: inline-block;
width: 10px;
height: 18px;
background-color: #f0f0f0;
animation: blink 1s step-end infinite;
margin-left: 5px;
vertical-align: middle;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* Minecraft world */
.minecraft-world {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
perspective: 1000px;
}
/* Ground */
.ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-image: repeating-linear-gradient(
90deg,
#7d6338 0px,
#7d6338 20px,
#8b764d 20px,
#8b764d 40px
);
transform: rotateX(60deg);
transform-origin: bottom;
background-size: 40px 40px;
z-index: 1;
}
/* Sky */
.sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
#0a141f 0%,
#1e3a56 100%
);
z-index: 0;
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
}
/* Minecraft blocks */
.minecraft-block {
position: absolute;
width: 30px;
height: 30px;
background-size: contain;
image-rendering: pixelated;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="rgba(0,0,0,0)"/><path d="M2,2 L9,8 L2,14 M9,8 L14,8" stroke="%23fff" stroke-width="1"/></svg>'),
pointer;
transition: transform 0.2s;
z-index: 2;
}
.minecraft-block:hover {
transform: scale(1.2);
}
.minecraft-block.breaking {
animation: block-break 0.5s forwards;
}
@keyframes block-break {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(0);
opacity: 0;
}
}
.diamond-ore {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23666"/><rect x="2" y="2" width="2" height="2" fill="%2347A3FF"/><rect x="6" y="6" width="2" height="2" fill="%2347A3FF"/></svg>');
}
.gold-ore {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23666"/><rect x="2" y="2" width="2" height="2" fill="%23FFD700"/><rect x="6" y="6" width="2" height="2" fill="%23FFD700"/></svg>');
}
.stone {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23777"/><rect x="0" y="0" width="5" height="5" fill="%23666"/><rect x="5" y="5" width="5" height="5" fill="%23666"/></svg>');
}
.grass {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="2" fill="%2367A337"/><rect y="2" width="10" height="8" fill="%23866043"/></svg>');
}
.dirt {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23866043"/><rect x="1" y="1" width="2" height="2" fill="%23785a3c"/><rect x="7" y="3" width="2" height="2" fill="%23785a3c"/><rect x="3" y="6" width="2" height="2" fill="%23785a3c"/></svg>');
}
.redstone-ore {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23666"/><rect x="2" y="2" width="2" height="2" fill="%23FF0000"/><rect x="6" y="6" width="2" height="2" fill="%23FF0000"/></svg>');
}
.emerald-ore {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23666"/><rect x="2" y="2" width="2" height="2" fill="%2350C878"/><rect x="6" y="6" width="2" height="2" fill="%2350C878"/></svg>');
}
.coal-ore {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23666"/><rect x="2" y="2" width="2" height="2" fill="%23333"/><rect x="6" y="6" width="2" height="2" fill="%23333"/></svg>');
}
/* Miner character */
.miner {
position: absolute;
width: 60px;
height: 120px;
z-index: 10;
display: none;
transition: transform 0.2s;
}
.miner:hover {
transform: scale(1.1);
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="rgba(0,0,0,0)"/><path d="M4,4 L12,8 L4,12 Z" fill="%23fff" stroke="%23000" stroke-width="1"/></svg>'),
pointer;
}
.miner-head {
position: absolute;
top: 0;
left: 15px;
width: 30px;
height: 30px;
background-color: #ffcc99;
image-rendering: pixelated;
}
.miner-body {
position: absolute;
top: 30px;
left: 15px;
width: 30px;
height: 45px;
background-color: #3b8ba3;
image-rendering: pixelated;
}
.miner-leg-left {
position: absolute;
top: 75px;
left: 15px;
width: 15px;
height: 45px;
background-color: #333;
image-rendering: pixelated;
}
.miner-leg-right {
position: absolute;
top: 75px;
left: 30px;
width: 15px;
height: 45px;
background-color: #333;
image-rendering: pixelated;
}
.miner-arm-left {
position: absolute;
top: 30px;
left: 0;
width: 15px;
height: 45px;
background-color: #3b8ba3;
transform-origin: top center;
image-rendering: pixelated;
}
.miner-arm-right {
position: absolute;
top: 30px;
left: 45px;
width: 15px;
height: 45px;
background-color: #3b8ba3;
transform-origin: top center;
image-rendering: pixelated;
}
.pickaxe {
position: absolute;
top: 0;
left: 15px;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10"><path d="M2,2 L8,8 M5,2 L8,5" stroke="%23999" stroke-width="1.5"/><rect x="1" y="1" width="2" height="2" fill="%23a67c52"/></svg>');
transform-origin: bottom left;
image-rendering: pixelated;
}
/* Minecraft mobs */
.mob {
position: absolute;
width: 30px;
height: 60px;
z-index: 10;
transition: transform 0.2s;
}
.mob:hover {
transform: scale(1.1);
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="rgba(0,0,0,0)"/><path d="M4,4 L12,8 L4,12 Z" fill="%23fff" stroke="%23000" stroke-width="1"/></svg>'),
pointer;
}
.creeper {
display: flex;
flex-direction: column;
align-items: center;
}
.creeper-head {
width: 30px;
height: 30px;
background-color: #5fa050;
position: relative;
}
.creeper-face {
position: absolute;
width: 20px;
height: 10px;
top: 10px;
left: 5px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 10 5"><rect x="1" y="1" width="2" height="2" fill="black"/><rect x="7" y="1" width="2" height="2" fill="black"/><rect x="3" y="3" width="1" height="1" fill="black"/><rect x="4" y="2" width="2" height="2" fill="black"/><rect x="6" y="3" width="1" height="1" fill="black"/></svg>');
}
.creeper-body {
width: 20px;
height: 30px;
background-color: #5fa050;
}
.zombie {
display: flex;
flex-direction: column;
align-items: center;
}
.zombie-head {
width: 30px;
height: 30px;
background-color: #567d3e;
position: relative;
}
.zombie-face {
position: absolute;
width: 20px;
height: 10px;
top: 10px;
left: 5px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 10 5"><rect x="1" y="1" width="2" height="2" fill="black"/><rect x="7" y="1" width="2" height="2" fill="black"/><rect x="3" y="3" width="4" height="1" fill="black"/></svg>');
}
.zombie-body {
width: 20px;
height: 30px;
background-color: #587e3e;
}
.skeleton {
display: flex;
flex-direction: column;
align-items: center;
}
.skeleton-head {
width: 30px;
height: 30px;
background-color: #c2c2c2;
position: relative;
}
.skeleton-face {
position: absolute;
width: 20px;
height: 10px;
top: 10px;
left: 5px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 10 5"><rect x="1" y="1" width="2" height="2" fill="black"/><rect x="7" y="1" width="2" height="2" fill="black"/><rect x="3" y="3" width="4" height="1" fill="black"/></svg>');
}
.skeleton-body {
width: 20px;
height: 30px;
background-color: #c2c2c2;
}
/* Terminal crack effect */
.crack {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
z-index: 11;
}
.crack-line {
position: absolute;
background-color: white;
transform-origin: center;
}
/* Caravan logo */
.caravan-container {
position: absolute;
top: 10%;
left: 0;
width: 200px;
height: 120px;
z-index: 20;
transform: translateY(-200px);
}
.caravan {
position: relative;
width: 200px;
height: 120px;
}
.caravan-body {
position: absolute;
width: 150px;
height: 80px;
background-color: #1e6ea1; /* Blue body */
bottom: 20px;
left: 25px;
}
.caravan-roof {
position: absolute;
width: 170px;
height: 20px;
background-color: #ffbd2e; /* Gold roof */
top: 20px;
left: 15px;
border-radius: 10px 10px 0 0;
}
.caravan-window {
position: absolute;
width: 60px;
height: 40px;
background-color: #1e2d3b; /* Dark screen */
top: 50px;
left: 70px;
border: 3px solid #111;
}
.caravan-prompt {
position: absolute;
color: #ffbd2e;
font-size: 20px;
top: 58px;
left: 80px;
}
.wheel {
position: absolute;
width: 40px;
height: 40px;
background-color: #ffbd2e; /* Gold wheels */
border-radius: 50%;
bottom: 0;
border: 5px solid #111;
}
.wheel-left {
left: 30px;
}
.wheel-right {
right: 30px;
}
.wheel-spoke {
position: absolute;
background-color: #111;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spoke-vertical {
width: 4px;
height: 30px;
}
.spoke-horizontal {
width: 30px;
height: 4px;
}
.spoke-diagonal1 {
width: 4px;
height: 30px;
transform: translate(-50%, -50%) rotate(45deg);
}
.spoke-diagonal2 {
width: 4px;
height: 30px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.caravan-sign {
position: absolute;
width: 180px;
height: 40px;
background-color: #1e2d3b;
border: 3px solid #3b8ba3;
top: -30px;
left: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.sign-text {
color: #ffbd2e;
font-size: 20px;
letter-spacing: 2px;
}
/* Item pickups */
.item-pickup {
position: absolute;
width: 20px;
height: 20px;
background-size: contain;
image-rendering: pixelated;
z-index: 5;
animation: float 2s infinite ease-in-out;
opacity: 0;
transition: opacity 0.3s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.diamond {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><polygon points="5,0 10,5 5,10 0,5" fill="%2347A3FF"/></svg>');
}
.gold {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23FFD700"/></svg>');
}
.emerald {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><polygon points="5,0 10,5 5,10 0,5" fill="%2350C878"/></svg>');
}
.redstone {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23FF0000"/></svg>');
}
.coal {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><rect width="10" height="10" fill="%23333"/></svg>');
}
/* Particles */
.particle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
z-index: 15;
}
/* Loading screen */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
}
.loading-title {
color: #ffbd2e;
font-size: 36px;
margin-bottom: 20px;
text-shadow: 3px 3px 0 #000;
}
.loading-bar-container {
width: 300px;
padding: 10px;
background-color: #333;
border: 4px solid #3b8ba3;
}
.loading-bar {
height: 30px;
background-color: #1e2d3b;
position: relative;
overflow: hidden;
}
.loading-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #ffbd2e;
width: 0%;
transition: width 0.2s ease-in-out;
}
.loading-text {
margin-top: 20px;
color: #a0a0a0;
font-size: 16px;
}
/* Inventory */
.inventory {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 50;
}
.inventory-slot {
width: 44px;
height: 44px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #3b8ba3;
margin: 0 2px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.inventory-slot.selected {
border-color: #ffbd2e;
background-color: rgba(255, 189, 46, 0.2);
}
.inventory-item {
width: 30px;
height: 30px;
background-size: contain;
image-rendering: pixelated;
}
.inventory-count {
position: absolute;
bottom: 2px;
right: 2px;
color: white;
font-size: 12px;
text-shadow: 1px 1px 0 black;
}
/* Game UI */
.game-ui {
position: absolute;
top: 10px;
left: 10px;
z-index: 50;
}
.health-bar {
display: flex;
margin-bottom: 5px;
}
.heart {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><path d="M5,9 L1,5 C0,4 0,2 2,1 C4,0 5,2 5,2 C5,2 6,0 8,1 C10,2 10,4 9,5 Z" fill="red"/></svg>');
margin-right: 2px;
}
.heart.empty {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><path d="M5,9 L1,5 C0,4 0,2 2,1 C4,0 5,2 5,2 C5,2 6,0 8,1 C10,2 10,4 9,5 Z" fill="none" stroke="red" stroke-width="0.5"/></svg>');
}
.food-bar {
display: flex;
}
.food {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="%23bb7812"/></svg>');
margin-right: 2px;
}
.food.empty {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="none" stroke="%23bb7812" stroke-width="0.5"/></svg>');
}
/* Footer */
.footer {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
font-size: 14px;
color: #666;
z-index: 2;
}
/* Tooltip */
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #3b8ba3;
padding: 5px 10px;
color: white;
font-size: 12px;
border-radius: 5px;
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
max-width: 200px;
}
/* Day/Night Cycle */
@keyframes dayCycle {
0%,
100% {
background: linear-gradient(
to bottom,
#0a141f 0%,
#1e3a56 100%
);
} /* Night */
25% {
background: linear-gradient(
to bottom,
#644c78 0%,
#a57c84 100%
);
} /* Dawn */
50% {
background: linear-gradient(
to bottom,
#1976d2 0%,
#64b5f6 100%
);
} /* Day */
75% {
background: linear-gradient(
to bottom,
#ff9800 0%,
#f57c00 100%
);
} /* Sunset */
}
/* Sound control */
.sound-toggle {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #3b8ba3;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 50;
}
.sound-icon {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" fill="%23fff"/></svg>');
}
.sound-icon.off {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51c.66-1.28 1.03-2.69 1.03-4.15 0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" fill="%23fff"/></svg>');
}
</style>
</head>
<body>
<!-- Loading Screen -->
<div class="loading-screen" id="loading-screen">
<h1 class="loading-title">CARAVAN-X</h1>
<div class="loading-bar-container">
<div class="loading-bar">
<div class="loading-progress" id="loading-progress"></div>
</div>
</div>
<p class="loading-text" id="loading-text">
Loading blockchain world...
</p>
</div>
<!-- Minecraft World -->
<div class="minecraft-world" id="minecraft-world">
<div class="sky" id="sky"></div>
<div class="stars" id="stars"></div>
<div class="ground"></div>
<!-- Blocks will be generated via JavaScript -->
</div>
<!-- Tooltip -->
<div class="tooltip" id="tooltip"></div>
<!-- Caravan Logo -->
<div class="caravan-container" id="caravan-container">
<div class="caravan">
<div class="caravan-sign">
<div class="sign-text">CARAVAN-X</div>
</div>
<div class="caravan-roof"></div>
<div class="caravan-body"></div>
<div class="caravan-window"></div>
<div class="caravan-prompt">>_</div>
<div class="wheel wheel-left" id="wheel-left">
<div class="wheel-spoke spoke-vertical"></div>
<div class="wheel-spoke spoke-horizontal"></div>
<div class="wheel-spoke spoke-diagonal1"></div>
<div class="wheel-spoke spoke-diagonal2"></div>
</div>
<div class="wheel wheel-right" id="wheel-right">
<div class="wheel-spoke spoke-vertical"></div>
<div class="wheel-spoke spoke-horizontal"></div>
<div class="wheel-spoke spoke-diagonal1"></div>
<div class="wheel-spoke spoke-diagonal2"></div>
</div>
</div>
</div>
<!-- Terminal -->
<div class="terminal-container" id="terminal-container">
<div class="terminal-header">
<div class="terminal-title">BlockCraft Terminal</div>
<div class="terminal-buttons">
<div
class="terminal-button button-minimize"
id="minimize-btn"
></div>
<div
class="terminal-button button-maximize"
id="maximize-btn"
></div>
<div
class="terminal-button button-close"
id="close-btn"
></div>
</div>
</div>
<div class="terminal-body" id="terminal-body">
<!-- Terminal lines will be added here -->
</div>
<!-- Crack effect overlay -->
<div class="crack" id="crack-effect"></div>
</div>
<!-- Miner Character -->
<div class="miner" id="miner">
<div class="miner-head"></div>
<div class="miner-body"></div>
<div class="miner-arm-left">
<div class="pickaxe"></div>
</div>
<div class="miner-arm-right"></div>
<div class="miner-leg-left"></div>
<div class="miner-leg-right"></div>
</div>
<!-- Game UI -->
<div class="game-ui">
<div class="health-bar" id="health-bar">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<div class="food-bar" id="food-bar">
<div class="food"></div>
<div class="food"></div>
<div class="food"></div>
<div class="food"></div>
<div class="food"></div>
</div>
</div>
<!-- Inventory -->
<div class="inventory" id="inventory">
<div class="inventory-slot selected" data-slot="1">
<div
class="inventory-item pickaxe-item"
style="
background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 10 10'><path d='M2,2 L8,8 M5,2 L8,5' stroke='%23999' stroke-width='1.5'/><rect x='1' y='1' width='2' height='2' fill='%23a67c52'/></svg>");
"
></div>
</div>
<div class="inventory-slot" data-slot="2">
<!-- Empty initially -->
</div>
<div class="inventory-slot" data-slot="3">
<!-- Empty initially -->
</div>
<div class="inventory-slot" data-slot="4">
<!-- Empty initially -->
</div>
<div class="inventory-slot" data-slot="5">
<!-- Empty initially -->
</div>
</div>
<!-- Sound Toggle -->
<div class="sound-toggle" id="sound-toggle">
<div class="sound-icon" id="sound-icon"></div>
</div>
<div class="footer">
© 2025 CARAVAN-X • A Minecraft-inspired Blockchain
Visualization
</div>
<script>
// Main JavaScript for CARAVAN-X Coming Soon Page
document.addEventListener("DOMContentLoaded", () => {
// Global variables
let soundEnabled = true;
let terminalActive = true;
let inventoryItems = {
diamond: 0,
gold: 0,
emerald: 0,
redstone: 0,
coal: 0,
};
// Initialize loading screen
const loadingScreen = document.getElementById("loading-screen");
const loadingProgress =
document.getElementById("loading-progress");
const loadingText = document.getElementById("loading-text");
const loadingMessages = [
"Loading blockchain world...",
"Connecting to network nodes...",
"Generating voxel terrain...",
"Mining genesis block...",
"Spawning blockchain entities...",
"Building CARAVAN-X terminal...",
"Almost ready to explore...",
];
// Tooltip functionality
const tooltip = document.getElementById("tooltip");
function showTooltip(text, x, y) {
tooltip.textContent = text;
tooltip.style.left = `${x}px`;
tooltip.style.top = `${y}px`;
tooltip.style.opacity = 1;
}
function hideTooltip() {
tooltip.style.opacity = 0;
}
// Sound management
const soundToggle = document.getElementById("sound-toggle");
const soundIcon = document.getElementById("sound-icon");
// Sound effects
const sounds = {
click: new Audio(
"data:audio/wav;base64,UklGRlQFAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YTAFAAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAYgBjAGQAZQBmAGcAaABpAGoAawBsAG0AbgBvAHAAcQByAHMAdAB1AHYAdwB4AHkAegB7AHwAfQB+AH8AgACBAIIAgwCEAIUAhgCHAIgAiQCKAIsAjACNAI4AjwCQAJEAkgCTAJQAlQCWAJcAmACZAJoAmwCcAJ0AngCfAKAAoQCiAKMApAClAKYApwCoAKkAqgCrAKwArQCuAK8AsACxALIAswC0ALUAtgC3ALgAuQC6ALsAvAC9AL4AvwDAAMEAwgDDAMQAxQDGAMcAyADJAMoAywDMAM0AzgDPANAA0QDSANMA1ADVANYA1wDYANkA2gDbANwA3QDeAN8A4ADhAOIA4wDkAOUA5gDnAOgA6QDqAOsA7ADtAO4A7wDwAPEA8gDzAPQA9QD2APcA+AD5APEAcABpAF4ASgA5ACcAEQD//+3/3f/M/7r/qf+Z/4j/eP9o/1j/Sf87/yz/IP8S/wX/+P7s/uD+1f7K/r/+tf6s/qL+mv6R/ov+hP6A/nv+eP52/nb+dv53/nn+fP6A/oT+if6P/pT+mv6h/qj+r/63/r/+x/7Q/tn+4v7r/vX+/v4I/xL/HP8m/zH/O/9G/1H/XP9n/3L/ff+I/5T/n/+r/7b/wv/O/9r/5f/x//z/AgANABgAIwAuADkARABPAFoAZQBwAHsAhgCQAJsApQCvALkAwwDNANcA4ADqAPMACQATAB0AJwAwADoAQwBNAFYAXwBoAHEAegCCAIsAkwCbAKMAqwCzALoAwgDJANAA1wDeAOUA6wDxAPcA/QAaASABJgEtATMBOQE/AUUBSgFQAVUBWgFfAWMBaAFsAW4BcQF0AXYBeAF6AXsBeQF4AVoBOgEWAfdA2EC2QJJAb0BMQCNA+j/RP6U/ej8cfz5+4H7CfuQ+hj6ofkq+bT4Pvj/9+7303ei92LkI0DPP7M/lj95P10/QD8jPwY/6T7TPsV+9j6ofo6+gr60PlZ+Sn5+fiM+F/4MvgG+Nz3tPeM92T3QfcZ9/L20PaZ9mL2LPb19cD1ivVV9SD17PSx9H/0TPQa9Oj0qPTn9CL1ZfWp9fD1Nfae9QD0",
),
mining: new Audio(
"data:audio/wav;base64,UklGRl9JAABXQVZFZm10IBAAAAABAAEARKwAAESsAAABAAgAZGF0YTtJAACBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Oj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqaGqqqqrq6usrKytra2urq6vr6+wsLCxsrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHO0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dnW2Nja2trc3Nzd3d3e3t7f39/a3t7g4ODi4uLj4+Pk5OTl5eXm5ubn5+fh5+fo6Ojq6urr6+vs7Ozt7e3u7u7p7+/w8PDx8fHy8vLz8/P09PT19fXx9fX29vb4+Pj5+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////",
),
break: new Audio(
"data:audio/wav;base64,UklGRl9JAABXQVZFZm10IBAAAAABAAEARKwAAESsAAABAAgAZGF0YTtJAACBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Oj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqaGqqqqrq6usrKytra2urq6vr6+wsLCxsrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHO0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dnW2Nja2trc3Nzd3d3e3t7f39/a3t7g4ODi4uLj4+Pk5OTl5eXm5ubn5+fh5+fo6Ojq6urr6+vs7Ozt7e3u7u7p7+/w8PDx8fHy8vLz8/P09PT19fXx9fX29vb4+Pj5+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////",
),
pickup: new Audio(
"data:audio/wav;base64,UklGRl9JAABXQVZFZm10IBAAAAABAAEARKwAAESsAAABAAgAZGF0YTtJAACBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Oj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqaGqqqqrq6usrKytra2urq6vr6+wsLCxsrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHO0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dnW2Nja2trc3Nzd3d3e3t7f39/a3t7g4ODi4uLj4+Pk5OTl5eXm5ubn5+fh5+fo6Ojq6urr6+vs7Ozt7e3u7u7p7+/w8PDx8fHy8vLz8/P09PT19fXx9fX29vb4+Pj5+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////",
),
endScreen: new Audio(
"data:audio/wav;base64,UklGRl9JAABXQVZFZm10IBAAAAABAAEARKwAAESsAAABAAgAZGF0YTtJAACBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Oj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqaGqqqqrq6usrKytra2urq6vr6+wsLCxsrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHO0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dnW2Nja2trc3Nzd3d3e3t7f39/a3t7g4ODi4uLj4+Pk5OTl5eXm5ubn5+fh5+fo6Ojq6urr6+vs7Ozt7e3u7u7p7+/w8PDx8fHy8vLz8/P09PT19fXx9fX29vb4+Pj5+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v75+fn6+vr7+/v8/Pz9/f3+/v7/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////",
),
};
// Sound toggle functionality
soundToggle.addEventListener("click", () => {
soundEnabled = !soundEnabled;
if (soundEnabled) {
soundIcon.classList.remove("off");
playSound("click");
} else {
soundIcon.classList.add("off");
}
});
function playSound(soundName) {
if (soundEnabled) {
// Clone the sound to allow overlapping
const sound = sounds[soundName].cloneNode();
sound.volume = 0.3;
sound.play().catch((e) => {
// Silent error - browser may block autoplay
});
}
}
// Start loading animation
let progress = 0;
let messageIndex = 0;
const loadingInterval = setInterval(() => {
progress += Math.random() * 15;
if (progress >= 100) {
progress = 100;
clearInterval(loadingInterval);
// Hide loading screen with fade out
setTimeout(() => {
loadingScreen.style.opacity = 0;
loadingScreen.style.transition = "opacity 1s";
setTimeout(() => {
loadingScreen.style.display = "none";
startGame();
}, 1000);
}, 500);
}
loadingProgress.style.width = `${progress}%`;
// Update loading message occasionally
if (
progress > messageIndex * 15 &&
messageIndex < loadingMessages.length
) {
loadingText.textContent = loadingMessages[messageIndex];
messageIndex++;
}
}, 200);
// Terminal functionality
function startGame() {
// Initialize UI interactions
initializeUIInteractions();
// Generate Minecraft world with blocks
generateMinecraftWorld();
// Animate day/night cycle
animateDayCycle();
// Start caravan animation
animateCaravan();
// Start terminal
startTerminal();
// After short delay, start miner animation
setTimeout(() => {
startMinerAnimation();
}, 15000); // 15 seconds delay
}
function initializeUIInteractions() {
// Terminal buttons
const minimizeBtn = document.getElementById("minimize-btn");
const maximizeBtn = document.getElementById("maximize-btn");
const closeBtn = document.getElementById("close-btn");
const terminal =
document.getElementById("terminal-container");
minimizeBtn.addEventListener("click", () => {
playSound("click");
terminal.style.opacity = "0.5";
});
maximizeBtn.addEventListener("click", () => {
playSound("click");
terminal.style.opacity = "1";
});
closeBtn.addEventListener("click", () => {
playSound("click");
terminal.style.display = "none";
terminalActive = false;
});
// Inventory slot selection
const inventorySlots =
document.querySelectorAll(".inventory-slot");
inventorySlots.forEach((slot) => {
slot.addEventListener("click", () => {
playSound("click");
// Remove selected class fro