Skip to content

Commit

Permalink
Final push
Browse files Browse the repository at this point in the history
  • Loading branch information
@emrebilge
emrebilge committed Sep 22, 2023
1 parent e50afae commit b3a6523
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 171 deletions.
2 changes: 1 addition & 1 deletion frontend/word-guessing-game/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<title>Ekreb</title>
<style>
body {
background-image: url('library.jpg'); /* Replace 'your-image.jpg' with the path to your background image */
background-image: url('lib1.jpg'); /* Replace 'your-image.jpg' with the path to your background image */
background-repeat: no-repeat;
background-size: cover; /* Adjust this property for image size */
background-attachment: fixed; /* This keeps the background fixed while scrolling */
Expand Down
Binary file added frontend/word-guessing-game/public/lib1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
251 changes: 152 additions & 99 deletions frontend/word-guessing-game/src/GamePage/GamePage.css
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,207 @@
/* Add this style to your GamePage.css file */
.reset-button {
background-color: #ff5722; /* Change the background color as desired */
color: #fff; /* Text color */
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
/* GamePage.css */

/* Add box shadow for a cool effect */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.reset-button:hover {
background-color: #d84315; /* Change the hover background color as desired */
}

.reset-button {
margin-left: 16px; /* Add your desired margin value */
.card-container {
display: flex; /* Use flex display to place them side by side */
justify-content: space-between; /* Add space between the cards */
margin-top: 20px;
}


.button{
background-color: #007bff; /* Blue background color */
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer; /* Show pointer cursor on hover */
font-size: 16px; /* Font size */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow */
transition: box-shadow 0.3s ease; /* Add a transition for smoother hover effect */}

.button:hover{
background-color: #0056b3; /* Darker blue on hover */
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
/* Add styles for the header */
/* Styles for the app header container */
.app-header {
background-color: rgb(132, 164, 170) ; /* Background color for the header */
color: #fff; /* Text color */
padding: 10px; /* Add padding for spacing */
text-align: center; /* Center-align the text */
border-radius: 10px;
margin-bottom: 10px;
}

.button.hide{
background-color: rgb(110, 174, 252); /* Red background color */
/* Style for the game name */
.game-name {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 36px; /* Adjust font size for the game name */
font-weight: bold; /* Make the name bold if needed */
}


.green {
color: green;
}

.red {
color: red;
/* Style for the game name */
.game-name {
font-size: 36px; /* Adjust font size for the game name */
font-weight: bold; /* Make the name bold if needed */
}


/* Container styles */
.game-container {
max-width: 600px;
margin: 0 auto;
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
background-color: #f4f4f4; /* Light gray background */
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Header styles */
.game-header h1 {
font-size: 28px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #3498db; /* Blue text color */
font-size: 2.5rem;
color: #333;
margin-bottom: 20px;
}

/* Content styles */
.game-content {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}

/* Game card styles */
/* Card styles */
.game-card {
background-color: #fff; /* White background */
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
flex: 1;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Game title styles */
.game-title {
font-size: 24px;
margin-bottom: 10px;
color: #333; /* Dark gray text color */
font-size: 1.5rem;
color: #333;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

margin-bottom: 15px;
}

/* Scrambled word styles */
.scrambled-word {
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
color: #333; /* Dark gray text color */
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.2rem;
color: #333;
margin-bottom: 20px;
}

/* Guess input styles */
.guess-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc; /* Light gray border */
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-bottom: 15px;
}

.button {
padding: 12px 24px; /* Slightly increase padding for better touch targets */
font-size: 1rem;
border: none;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-radius: 8px; /* Increase border-radius for a softer look */
cursor: pointer;
background-color: #f39c12;
color: #fff;
transition: background-color 0.3s ease, color 0.3s ease; /* Add a smooth transition effect */
}

.button:hover{
background-color: #b37511;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

/* Score card styles */

.button.hint-button {
background-color: #f39c12; /* Use a yellow color for hint buttons */
color: #fff;
}

.button.hint-button:hover {
background-color: #d68910; /* Darken the color on hover */

}

.button.primary {
background-color: #3498db; /* Use a blue color for primary buttons */
color: #fff;
}


.button.primary:hover {
background-color: #2980b9; /* Darken the color on hover */
}

.button.secondary {
background-color: #6c757d;
color: #fff;
}

.button.secondary:hover {
background-color: #545b62;
}


/* Hint message styles */
.hint-message {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1rem;
color: #333;
margin-top: 15px;
}

/* Round number styles */
.round-number {
font-size: 1rem;
color: #333;
margin-top: 15px;
}


/* Accuracy and Score card styles */
/* ... previous styles ... */

/* Accuracy and Score card styles */
.accuracy-card,
.score-card {
background-color: #fff; /* White background */
padding: 20px;
background-color: #fff;
padding: 10px; /* Reduce padding for smaller boxes */
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
text-align: center;
margin-top: 25px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
flex: 1; /* Allow the cards to share equal width within the container */
margin: 0 10px; /* Add margin between the cards */
}
.score-card{
margin-top: 20px;
}



/* Score title styles */
.accuracy-title,
.score-title {
font-size: 24px;
margin-bottom: 10px;
color: #333; /* Dark gray text color */
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1rem; /* Reduce font size for both titles */
color: #333;
}

/* Score value styles */
.accuracy,
.score {
font-size: 32px;
font-weight: bold;
color: #3498db; /* Blue text color */
font-size: 1.2rem; /* Reduce font size for both accuracy and score */
color: #333;
}

/* Feedback message styles */
.feedback-message {
font-size: 18px;
color: #e74c3c; /* Red for incorrect feedback */
margin-top: 10px;
font-size: 1rem;
margin-top: 20px;
}

.app {
text-align: center;
/* Button styles */
.button.reset-button {
margin-top: 30px;
background-color: #dc3545;
color: #fff;
}

.App{
text-align: center;
}
.button.reset-button:hover {
background-color: #ab1221;
}

/* Responsive styles */
@media (max-width: 768px) {
.game-card {
padding: 15px;
}

.accuracy-card,
.score-card {
padding: 15px;
}
}
Loading

0 comments on commit b3a6523

Please sign in to comment.