-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEarAcuty.html
More file actions
162 lines (149 loc) · 8.96 KB
/
EarAcuty.html
File metadata and controls
162 lines (149 loc) · 8.96 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EarAcuity - Hearing Test App</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.feature-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.step-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.download-button:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-white text-gray-900 p-4">
<section class="bg-white text-gray-900 py-16 md:py-24">
<div class="container mx-auto px-4 grid md:grid-cols-2 gap-8 items-center">
<div class="text-center md:text-left" style="margin-left : 20px">
<h2 class="text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-black">Know Your Hearing, Effortlessly.</h2>
<p class="text-lg md:text-xl mb-8 md:mb-10 text-gray-700">Accurate hearing assessments from the comfort of your smartphone.</p>
<a href="https://play.google.com/store/apps" target="_blank" rel="noopener noreferrer" class="download-button bg-black text-white hover:bg-gray-800 font-semibold py-3 px-6 rounded-full transition duration-300 ease-in-out shadow-lg">
Download on Google Play
</a>
</div>
<div class="flex justify-center">
<img src="https://github.com/ErrorxCode/EarAcuity/raw/main/banner.png" alt="EarAcuity App Banner" class="rounded-lg shadow-lg max-w-md h-auto reveal">
</div>
</div>
</section>
<section class="bg-gradient-to-r from-gray-100 to-white-100 py-16 md:py-24">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl md:text-3xl font-semibold mb-8 text-black">Key Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="feature-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=Test" alt="Comprehensive Test" class="mb-4">
<h3 class="text-xl font-semibold mb-2 text-black">Comprehensive Hearing Test</h3>
<p class="text-gray-700">Utilizes calibrated audio signals for thorough assessment.</p>
</div>
<div class="feature-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=Easy" alt="Easy Interface" class="mb-4">
<h3 class="text-xl font-semibold mb-2 text-black">Easy and Intuitive Interface</h3>
<p class="text-gray-700">User-friendly design guides you through the process.</p>
</div>
<div class="feature-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=Results" alt="Instant Results" class="mb-4">
<h3 class="text-xl font-semibold mb-2 text-black">Instant Results</h3>
<p class="text-gray-700">Receive immediate, easy-to-understand results.</p>
</div>
</div>
</div>
</section>
<section class="bg-gradient-to-r from-gray-100 to-purple-100 py-16 md:py-24">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl md:text-3xl font-semibold mb-8 text-black">How It Works</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="step-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=1" alt="Download App" class="mb-4 rounded-full border-2 border-black">
<h3 class="text-xl font-semibold mb-2 text-black">Download the App</h3>
<p class="text-gray-700">Get EarAcuity from the Google Play Store.</p>
</div>
<div class="step-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=2" alt="Follow Prompts" class="mb-4 rounded-full border-2 border-black">
<h3 class="text-xl font-semibold mb-2 text-black">Follow the Prompts</h3>
<p class="text-gray-700">Our guide will walk you through the process.</p>
</div>
<div class="step-card bg-white rounded-lg shadow-md p-6 flex flex-col items-center reveal">
<img src="https://via.placeholder.com/50/424242/FFFFFF?text=3" alt="View Results" class="mb-4 rounded-full border-2 border-black">
<h3 class="text-xl font-semibold mb-2 text-black">View Your Results</h3>
<p class="text-gray-700">Instantly see your hearing assessment.</p>
</div>
</div>
</div>
</section>
<section class="bg-gradient-to-r from-gray-100 to-orange-100 py-16 md:py-24">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl md:text-3xl font-semibold mb-8 text-black">What Users Say</h2>
<div class="testimonial-card bg-gray-100 rounded-lg shadow-md p-6 max-w-lg mx-auto reveal">
<p class="text-gray-700 italic mb-4">"EarAcuity is so convenient! I can check my hearing without taking time off work."</p>
<p class="text-black font-semibold">- [User Name/Initial]</p>
</div>
</div>
</section>
<section class="bg-gradient-to-r from-white-100 to-white-100 py-16 md:py-24">
<div class="container mx-auto px-4 text-center" style="margin-top: 80px; margin-bottom: 80px;">
<h2 class="text-5xl md:text-6xl font-extrabold text-black tracking-tight mb-8" style="margin-bottom: 80px; letter-spacing: 0.3em; word-spacing: 0.5em; line-height: 1.3;">
Ready to Check Your Hearing?
</h2>
<a href="https://play.google.com/store/apps" target="_blank" rel="noopener noreferrer" class="download-button bg-black text-white hover:bg-gray-800 font-semibold py-4 px-8 rounded-full transition duration-300 ease-in-out shadow-lg text-lg mt-8">
Download EarAcuity on Google Play Today!
</a>
</div>
</section>
<section class="bg-gradient-to-r from-green-100 to-blue-100 py-16 md:py-24">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl md:text-3xl font-semibold mb-8 text-black">Contribute to EarAcuity</h2>
<p class="text-lg text-gray-700 mb-8 reveal">
EarAcuity is an open-source project, and we welcome contributions from the community. If you're a developer, designer, or have other skills, you can help us improve the app and make hearing assessments even more accessible.
</p>
<a href="https://github.com/ErrorxCode/EarAcuity" target="_blank" rel="noopener noreferrer" class="bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3 px-6 rounded-full transition duration-300 ease-in-out shadow-lg text-lg">
Contribute on GitHub
</a>
</div>
</section>
<footer class="bg-gray-800 text-white py-4">
<div class="container mx-auto px-4 text-center text-sm">
© 2024 EarAcuity. All rights reserved. | <a href="/privacy-policy" class="text-teal-300 hover:underline">Privacy Policy</a> | <a href="/terms-of-service" class="text-teal-300 hover:underline">Terms of Service</a>
</div>
</footer>
<script>
function revealElements() {
const reveals = document.querySelectorAll('.reveal');
for (let i = 0; i < reveals.length; i++) {
let windowHeight = window.innerHeight;
let elementTop = reveals[i].getBoundingClientRect().top;
let elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add('active');
} else {
reveals[i].classList.remove('active');
}
}
}
window.addEventListener('scroll', revealElements);
window.addEventListener('load', revealElements);
</script>
</body>
</html>