<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Levels</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>body {
margin: 0;
padding: 0;
font-family: 'Press Start 2P', cursive; /* Game-style font */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url('UG9KXRgvR4-JIgE3u-8u3Q.webp'); /* Game-like background */
background-size: cover;
background-position: center;
color: #fff;
}
.levels-container {
text-align: center;
background-color: rgba(49, 105, 81, 0.8); /* Dark semi-transparent container */
padding: 80px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 900px;
}
.game-title {
font-size: 2.0em;
margin-bottom: 20px;
color: #ffdf00;
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.levels {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 40px;
}
.level {
width: 230px;
height: 210px;
background-color: #ffdf00; /* Yellowish color */
color: #064d26;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
border: 2px solid #fff;
}
.level img {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
opacity: 0.2;
}
.level:hover {
background-color: #ffa500;
transform: scale(1.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}
.level:hover img {
opacity: 0.6;
}
.level-title {
position: relative;
z-index: 10;
}
@media (max-width: 768px) {
.levels-container {
padding: 20px;
}
.game-title {
font-size: 1.4em;
}
.level {
width: 120px;
height: 120px;
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div class="levels-container">
<h1 class="game-title">Select Your Level</h1>
<div class="levels">
<div class="level" onclick="goToLevel(1)">
<img src="energy-icon.png">
<span class="level-title">Transition <p>to</p> <p>Renewable</p> Energy</span>
</div>
<div class="level" onclick="goToLevel(2)">
<img src="carbon-icon.png" >
<span class="level-title">Carbon <p>Footprint</p> <p>Reduction</p></span>
</div>
<div class="level" onclick="goToLevel(3)">
<img src="agriculture-icon.png">
<span class="level-title">Agriculture<p>&</p> <p>Land Use</p></span>
</div>
<div class="level" onclick="goToLevel(4)">
<img src="resilience-icon.png">
<span class="level-title">Climate <p>Resilience</p> & Adaptation</span>
</div>
<div class="level" onclick="goToLevel(5)">
<img src="policy-icon.png">
<span class="level-title">Climate<p>Policy</p> </span>
</div>
</div>
</div>
<script>
function goToLevel(levelNumber) {
const levelPages = {
1: 'energy-transition.html',
2: 'carbon-footprint-reduction.html',
3: 'sustainable-agriculture.html',
4: 'climate-resilience.html',
5: 'climate-policy.html'
};
if (levelPages[levelNumber]) {
window.location.href = levelPages[levelNumber];
}
}
</script>
</body>
</html>