From 498623060db565f5bc4408c7801aa1d586f2060e Mon Sep 17 00:00:00 2001
From: Mohammad Aazib Khan <178921109+Aazib-at-hub@users.noreply.github.com>
Date: Thu, 10 Oct 2024 02:38:35 +0530
Subject: [PATCH] Create player box & timer

---
 player box & timer | 84 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 player box & timer
diff --git a/player box & timer b/player box & timer
new file mode 100644
index 0000000..1722cdb
--- /dev/null
+++ b/player box & timer	
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<style>
+body {
+    background-color: #000000; 
+  }
+  
+  .container {
+    width: 80%;
+    margin: 40px auto;
+    text-align: center;
+  }
+  
+  .timer {
+    font-size: 36px;
+    font-weight: bold;
+    color: #0f0; /* green color */
+    margin-bottom: 20px;
+  }
+  
+  .players {
+    display: flex;
+    justify-content: space-between;
+    
+  }
+  
+  .player {
+    width: 30%; /* decreased width to make room for Tic-Tac-Toe board */
+    margin: 20px 40px; /* added horizontal margin to create space between player boxes */
+    background-color: #fff; /* white background for boxes */
+    padding: 10px;
+    border-radius: 15%;
+    border: 1px solid #ddd;
+    height: 250px; /* increased height */
+  }
+  
+  .player img {
+    width: 100%;
+    height: 100%; /* adjusted image height */
+    object-fit: cover;
+    border-radius: 15%;
+    border-color: rgb(44, 44, 44);
+  }
+  
+  .name {
+    font-size: 18px;
+    color: #fff;
+    margin-top: 50px;
+  }
+</style>
+<html>
+<head>
+  <title>Game Interface</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <div class="timer" id="timer">10</div>
+    <div class="players">
+      <div class="player" id="player-1">
+        <img src="img1.jpg" alt="Image 1">
+        <div class="name">Player 1</div>
+      </div>
+      <div class="player" id="player-2">
+        <img src="img2.jpg" alt="Image 2">
+        <div class="name">Player 2</div>
+      </div>
+    </div>
+  </div>
+
+  <script src="next.js"></script>
+</body>
+</html>
+<script>
+    let timer = 10;
+let timerElement = document.getElementById('timer');
+
+setInterval(() => {
+  timer--;
+  timerElement.textContent = timer;
+  if (timer <= 0) {
+    timer = 10; // reset timer to 10 seconds
+  }
+}, 1000);
+</script>
