diff --git a/app.js b/app.js
index 8acbdef..760a7db 100644
--- a/app.js
+++ b/app.js
@@ -125,6 +125,19 @@ resetBtn.addEventListener("click", () => {
document.querySelector(".hands .computer-hand").src = "rock.png";
});
+function showLoading() {
+ // Hide the button
+ document.getElementById('loadingBtn').style.display = 'none';
+ // Show the loader
+ document.getElementById('loader').style.display = 'inline-block';
+ // Simulate a delay, you can replace this with an actual async task
+ setTimeout(function() {
+ // Show the button again after some time (simulating task completion)
+ document.getElementById('loadingBtn').style.display = 'inline-block';
+ // Hide the loader
+ document.getElementById('loader').style.display = 'none';
+ }, 500); // Change the delay as per your requirement
+}
// // Mapping
// // 0 -> rock, 1->paper, 2->scissor
diff --git a/index.html b/index.html
index d855c7d..322d05b 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,8 @@
Choose an option
-
+
+
diff --git a/style.css b/style.css
index ff56940..eb1a632 100644
--- a/style.css
+++ b/style.css
@@ -16,19 +16,17 @@
html,
body {
- padding: 0;
- margin: 0;
- width: 100%;
- overflow-x: hidden;
background: #0f0f0f;
color: #fff;
+ height: 97vh;
+ width: 99vw;
+ overflow: hidden;
font-family: "Open Sans", sans-serif;
}
section {
- min-height: 100vh;
- margin: 0 auto;
- width: 80vw;
+ min-height: 100%;
+ min-width: 100%;
}
@@ -37,9 +35,9 @@ section {
background: #0f0f0f;
border: 1px solid #fff;
color: #fff;
- padding: 10px 20px;
- font-size: 1.2rem;
+ font-size: medium;
font-weight: 600;
+ padding: 0.6rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
@@ -52,7 +50,24 @@ section {
.reset-div{
text-align: center;
-}
+ margin-top: 20px;
+}
+
+/* Loading animation styles */
+.loader {
+ border: 4px solid #f3f3f3;
+ border-top: 4px solid #3498db;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ animation: spin 1s linear infinite;
+ display: none; /* Initially hidden */
+}
+ /* Keyframe animation for spinner */
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}s
/*--------------------*/
.intro h1 {
@@ -65,7 +80,6 @@ section {
display: flex;
justify-content: space-between;
align-items: center;
- padding-top: 1rem;
max-width: 55vw;
margin: 0 auto;
text-align: center;
@@ -75,11 +89,6 @@ section {
font-weight: 400;
}
-.score hr{
- margin-top: 25px;
- margin-bottom: 25px;
-}
-
.winner{
font-weight: 400;
}
@@ -99,18 +108,18 @@ section {
flex-direction: column;
align-items: center;
justify-content: space-between;
- margin-top: -2rem;
+ margin-top: -3rem;
}
.match h2 {
- font-size: 2rem;
+ font-size: 1.5rem;
text-align: center;
}
.match .hands {
display: flex;
flex-direction: row;
- width: 100%;
+ width: 90%;
justify-content: space-around;
align-items: center;
}
@@ -127,15 +136,14 @@ section {
min-height: 130px;
display: flex;
align-items: flex-start;
- gap: 1.5rem;
- margin: 0 auto;
- justify-content: center;
}
.options button {
display: inline-block;
outline: none;
+ height: 50px;
cursor: pointer;
+ margin: 10px;
border: none;
color: #fff;
background-color: transparent;
@@ -143,24 +151,25 @@ section {
.options button label{
font-size: 18px;
- margin-top: 0px;
opacity: 0;
display: none;
}
.options button:hover > label{
- margin-top: 25px;
display: inline-block;
+ padding: 10px;
opacity: 1;
}
.options button img{
height: 50px;
+ width: 80px;
+ padding: 8px;
}
.options .paper img{
width: 50px;
- height: auto;
+ height: 60px;
}
.options .rock img{
@@ -191,7 +200,7 @@ section {
max-width: 70vw;
}
.hands{
- gap: 1rem;
+ margin: 1rem;
}
.player-hand,
.computer-hand{