-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscore.html
172 lines (152 loc) · 5.75 KB
/
score.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Your score page CSS goes here */
body {
font-family: 'Poppins', sans-serif;
background-color: #f5f5f5; /* Light gray background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#scorePage {
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
animation: fade-in 1s ease-out; /* Fade-in animation */
}
h1 {
font-size: 24px;
color: #007bff; /* Deep blue */
margin-bottom: 20px;
}
#scoreMessage {
font-size: 18px;
margin-top: 20px;
}
/* Keyframes for fade-in animation */
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#scoreDisplay {
font-size: 24px; /* Adjust the font size as needed */
font-weight: bold;
color: #007bff; /* Text color (deep blue) */
margin-top: 20px;
}
#retryButton {
font-size: 18px; /* Adjust the font size as needed */
padding: 10px 20px; /* Adjust the padding for button size */
background-color: #007bff; /* Button background color (deep blue) */
color: #fff; /* Text color (white) */
border: none;
border-radius: 8px; /* Rounded corners */
cursor: pointer;
transition: background-color 0.3s ease-in-out; /* Smooth background color transition */
}
#retryButton:hover {
background-color: #0056b3; /* Darker blue on hover */
}
#retryButton:focus {
outline: none; /* Remove outline on focus for better appearance */
}
#eyesTipsButton {
font-size: 18px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
margin-top: 20px;
}
#eyesTipsButton:hover {
background-color: #0056b3;
}
#eyesTipsButton:focus {
outline: none;
}
/* Add an attractive animation when the button is clicked */
#eyesTipsButton.clicked {
animation: pulse 1s ease-in-out;
}
/* Keyframes for the pulse animation */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
<title>Eyes Test Score</title>
</head>
<body>
<div id="scorePage">
<h1>Your Score is :</h1>
<div id="scoreMessage">
<!-- Score-specific message will be displayed here -->
</div>
<div id="scoreDisplay">
<!-- Player's score will be displayed here -->
</div>
<button id="retryButton">Retry</button>
<br>
<button id="eyesTipsButton">Eyes Tips</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const scoreMessage = document.getElementById('scoreMessage');
const scoreDisplay = document.getElementById('scoreDisplay');
const retryButton = document.getElementById('retryButton');
const urlParams = new URLSearchParams(window.location.search);
const score = parseInt(urlParams.get('score'));
console.log('Score:', score);
if (!isNaN(score)) {
if (score < 8) {
scoreMessage.textContent = "You scored less than 6. You might have color blindness issues. Consider consulting an eye specialist for a checkup.";
} else if (score === 9) {
scoreMessage.textContent = "Congratulations! You scored 8 out of 10. You have a good score. To maintain good eyesight, remember to eat a balanced diet rich in fruits and vegetables.";
} else if (score === 10) {
scoreMessage.textContent = "Congratulations! You scored a perfect 10. You have great eyesight! Keep up the good work and continue to prioritize eye health.";
} else {
scoreMessage.textContent = "Congratulations! You have a great score! Remember to protect your eyes from prolonged screen time and UV radiation.";
}
scoreDisplay.textContent = `Your Score: ${score} out of 10`;
} else {
scoreMessage.textContent = "Invalid score. Please try again.";
}
retryButton.addEventListener('click', () => {
window.location.href = 'index1.html';
});
});
const eyesTipsButton = document.getElementById('eyesTipsButton');
eyesTipsButton.addEventListener('click', () => {
// Redirect to "eyes.html" when the button is clicked
window.location.href = 'eyestips.html';
});
setTimeout(() => {
window.location.href = 'eyestips.html';
}, 100000);
</script>
</body>
</html>