Playtime.Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Play Time</title>
<style>
body {
font-family: sans-serif;
background: #f9fafb;
margin: 0;
padding: 20px;
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 24px;
font-weight: bold;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn {
background-color: #3b82f6;
color: white;
padding: 6px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #e5e7eb;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
}
.games {
margin-top: 30px;
}
.game-card {
display: flex;
justify-content: space-between;
background: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 16px;
margin-bottom: 15px;
align-items: center;
}
.game-info {
max-width: 70%;
}
.play-btn {
background-color: #22c55e;
color: white;
padding: 6px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.challenge {
background: #fef9c3;
border-left: 4px solid #facc15;
padding: 16px;
margin-top: 30px;
border-radius: 8px;
}
.progress-bar {
background: #d1d5db;
height: 10px;
border-radius: 9999px;
margin-top: 8px;
position: relative;
}
.progress-bar-inner {
background: #fbbf24;
width: 33%;
height: 100%;
border-radius: 9999px;
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>🎮 Play Time</h1>
<button class="btn" onclick="window.location.href='index.html'">⬅ Back Home</button>
</div>
<!-- Stats -->
<div class="stats">
<div>
<p style="font
Comments
Post a Comment