<html><head><base href="https://btcsimulator.com/" /><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bitcoin Evolution Simulator: Journey through Time</title><style>
body {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
text-align: center;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.container {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 1200px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.game-area {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
width: 60%;
}
#btcContainer {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin-bottom: 20px;
transition: all 0.5s ease;
overflow: hidden;
font-size: 100px;
}
#btcName {
position: absolute;
top: -40px;
font-size: 24px;
font-weight: bold;
color: #34495e;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.button {
font-size: 18px;
padding: 12px 24px;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
#ageButton {
background-color: #3498db;
color: white;
}
#ageButton:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
#ageButton:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
transform: none;
}
#newBtcButton {
background-color: #2ecc71;
color: white;
}
#newBtcButton:hover {
background-color: #27ae60;
transform: translateY(-2px);
}
.info-display {
font-size: 18px;
margin: 10px 0;
padding: 10px;
border-radius: 10px;
width: 100%;
text-align: center;
transition: all 0.3s ease;
}
#yearDisplay {
background-color: #f39c12;
color: white;
}
#priceDisplay {
background-color: #16a085;
color: white;
}
#marketCapDisplay {
background-color: #27ae60;
color: white;
}
#volumeDisplay {
background-color: #c0392b;
color: white;
}
#description {
font-size: 18px;
max-width: 400px;
margin-top: 20px;
line-height: 1.6;
color: #34495e;
text-align: center;
padding: 15px;
background-color: rgba(236, 240, 241, 0.8);
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
#milestone {
font-size: 24px;
color: #e74c3c;
margin-top: 20px;
text-align: center;
font-weight: bold;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: translateY(20px);
}
#milestone.show {
opacity: 1;
transform: translateY(0);
}
#milestones {
width: 40%;
padding: 30px;
background-color: #ecf0f1;
border-left: 1px solid #bdc3c7;
}
#milestones h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
}
#milestonesList {
list-style-type: none;
padding: 0;
max-height: 500px;
overflow-y: auto;
}
#milestonesList li {
margin-bottom: 15px;
padding: 15px;
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
#milestonesList li:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
#milestonesList li.core {
border-left: 5px solid #3498db;
}
#simulationEnd {
font-size: 36px;
font-weight: bold;
color: #e74c3c;
margin-top: 20px;
text-align: center;
display: none;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.game-area, #milestones {
width: 100%;
}
}
</style></head><body>
<h1>Bitcoin Evolution Simulator: Journey through Time</h1>
<div class="container">
<div class="game-area">
<div id="btcContainer">
<div id="btcName">Bitcoin</div>
<span id="btcEmoji">₿</span>
</div>
<button id="ageButton" class="button">Advance Year</button>
<button id="newBtcButton" class="button">Reset Simulation</button>
<div id="yearDisplay" class="info-display">Year: 2009</div>
<div id="priceDisplay" class="info-display">Price: $0</div>
<div id="marketCapDisplay" class="info-display">Market Cap: $0</div>
<div id="volumeDisplay" class="info-display">24h Volume: $0</div>
<div id="description"></div>
<div id="milestone"></div>
<div id="simulationEnd"></div>
</div>
<div id="milestones">
<h2>Bitcoin Milestones</h2>
<ul id="milestonesList"></ul>
</div>
</div>
<script>
let year = 2009;
let price = 0;
let marketCap = 0;
let volume = 0;
let isSimulationEnded = false;
const btcContainer = document.getElementById('btcContainer');
const btcEmoji = document.getElementById('btcEmoji');
const btcNameDisplay = document.getElementById('btcName');
const ageButton = document.getElementById('ageButton');
const newBtcButton = document.getElementById('newBtcButton');
const yearDisplay = document.getElementById('yearDisplay');
const priceDisplay = document.getElementById('priceDisplay');
const marketCapDisplay = document.getElementById('marketCapDisplay');
const volumeDisplay = document.getElementById('volumeDisplay');
const description = document.getElementById('description');
const milestone = document.getElementById('milestone');
const milestonesList = document.getElementById('milestonesList');
const simulationEnd = document.getElementById('simulationEnd');
const btcMilestones = [
{ year: 2009, event: "Bitcoin Created", description: "Satoshi Nakamoto mines the genesis block of Bitcoin." },
{ year: 2010, event: "First Real-World Transaction", description: "Two pizzas are bought for 10,000 BTC, now known as Bitcoin Pizza Day." },
{ year: 2011, event: "Silk Road Launched", description: "The infamous dark web marketplace begins using Bitcoin as its primary currency." },
{ year: 2013, event: "First Major Bull Run", description: "Bitcoin price surpasses $1,000 for the first time." },
{ year: 2014, event: "Mt. Gox Collapse", description: "The largest Bitcoin exchange at the time files for bankruptcy." },
{ year: 2015, event: "Bitcoin XT Fork", description: "The first notable hard fork attempt of Bitcoin occurs." },
{ year: 2017, event: "All-Time High", description: "Bitcoin reaches nearly $20,000, capturing global attention." },
{ year: 2018, event: "Major Correction", description: "Bitcoin price falls over 80% from its all-time high." },
{ year: 2020, event: "COVID-19 Impact", description: "Bitcoin sees increased adoption as a hedge against economic uncertainty." },
{ year: 2021, event: "New All-Time High", description: "Bitcoin surpasses $60,000, driven by institutional adoption." }
];
ageButton.addEventListener('click', () => {
year++;
updateBitcoin();
});
newBtcButton.addEventListener('click', () => {
resetSimulation();
});
function resetSimulation() {
year = 2009;
price = 0;
marketCap = 0;
volume = 0;
isSimulationEnded = false;
ageButton.disabled = false;
simulationEnd.style.display = "none";
milestonesList.innerHTML = '';
updateBitcoin();
}
function updateBitcoin() {
yearDisplay.textContent = `Year: ${year}`;
milestone.classList.remove('show');
if (!isSimulationEnded) {
updatePriceAndMetrics();
priceDisplay.textContent = `Price: $${price.toLocaleString()}`;
marketCapDisplay.textContent = `Market Cap: $${marketCap.toLocaleString()}`;
volumeDisplay.textContent = `24h Volume: $${volume.toLocaleString()}`;
}
btcNameDisplay.textContent = "Bitcoin";
updateBtcColor();
checkForBtcMilestones();
checkForRandomEvents();
checkForSimulationEnd();
}
function updatePriceAndMetrics() {
let priceMultiplier = 1;
if (year < 2011) {
priceMultiplier = Math.random() * 10;
} else if (year < 2013) {
priceMultiplier = Math.random() * 100;
} else if (year < 2017) {
priceMultiplier = Math.random() * 1000;
} else {
priceMultiplier = Math.random() * 10000;
}
price = Math.round(price + priceMultiplier);
marketCap = Math.round(price * (21000000 - (2140 - year + 2009) * 52500)); // Rough estimate
volume = Math.round(marketCap * (Math.random() * 0.1)); // 0-10% of market cap
}
function updateBtcColor() {
const hue = (year - 2009) * 15 % 360; // Change hue based on year
const saturation = 70 + Math.random() * 30; // 70-100%
const lightness = 40 + Math.random() * 20; // 40-60%
btcContainer.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
function checkForBtcMilestones() {
const event = btcMilestones.find(e => e.year === year);
if (event) {
addMilestone(event.event, year, event.description, true);
description.textContent = `In ${year}, ${event.description}`;
} else {
description.textContent = `Bitcoin continues its journey in ${year}.`;
}
}
function checkForRandomEvents() {
if (Math.random() < 0.2) { // 20% chance of random event
const randomEvents = [
"A major country announces Bitcoin adoption",
"A cryptocurrency exchange gets hacked",
"A prominent CEO endorses Bitcoin",
"Regulatory concerns cause market uncertainty",
"A new technological breakthrough improves Bitcoin's scalability",
"A large corporation adds Bitcoin to its balance sheet",
"A famous investor calls Bitcoin 'rat poison squared'",
"Bitcoin's energy consumption becomes a hot topic",
"Lightning Network sees significant adoption",
"A new competitor challenges Bitcoin's dominance"
];
const event = randomEvents[Math.floor(Math.random() * randomEvents.length)];
addMilestone("Market Event", year, event, false);
description.textContent += ` This year, ${event}.`;
}
}
function checkForSimulationEnd() {
if (year >= 2030) {
btcEmoji.textContent = '🚀'; // Rocket emoji
description.textContent = `In ${year}, Bitcoin has become a major part of the global financial system. The simulation ends here.`;
addMilestone("Simulation End", year, "Bitcoin's journey through our simulation comes to an end.", true);
isSimulationEnded = true;
ageButton.disabled = true;
simulationEnd.textContent = "Simulation Complete";
simulationEnd.style.display = "block";
}
}
function addMilestone(text, year, description, isCore) {
const li = document.createElement('li');
li.innerHTML = `<strong>${year}:</strong> ${text}<br><em>${description}</em>`;
if (isCore) {
li.classList.add('core');
}
milestonesList.insertBefore(li, milestonesList.firstChild);
showMilestone(text);
}
function showMilestone(text) {
milestone.textContent = text;
milestone.classList.add('show');
}
// Initialize the simulation
resetSimulation();
</script>
</body></html>
