-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathencore.html
More file actions
191 lines (153 loc) · 8.55 KB
/
Copy pathencore.html
File metadata and controls
191 lines (153 loc) · 8.55 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RedLeaf Systems -- ENCORE</title>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/x-icon" href="favicon.svg" />
</head>
<body>
<div class="content" class="fade-in">
<div class="navbar-container">
<nav class="navbar fade-up fade-up-1">
<a href="index.html" class="nav-logo">🍁</a>
<hr class="nav-horizontal-spacer">
<span class="nav-vertical-spacer">|</span>
<a href="index.html" class="nav-link">Home</a>
<div class="horizontal-on-mobile">
<a href="apps.html" class="nav-link nav-link-no-margin-right">Apps</a>
<a href="encore.html" class="nav-link nav-link-selected nav-link-no-margin-left">Encore</a>
</div>
<a href="about.html" class="nav-link">About</a>
<a href="contact.html" class="nav-link">Contact</a>
</nav>
</div>
<div class="hero fade-up fade-up-2">
<div class="hero-side-by-side-container">
<div class="hero-left">
<h1 class="fade-up fade-up-3">Every song deserves an <em>Encore.</em></h1>
<p>Encore is a music player designed specifically for seniors, offering a simple and enjoyable way to listen to their favorite tunes.</p>
<p><em>Encore is currently in development and will be available for download soon.</em></p>
<a href="example.com" class="button big-button button-disabled fade-up fade-up-11">Download Encore</a>
</div>
<div class="hero-right">
<img src="media/encore-screenshot.png" alt="Screenshot of Encore" class="hero-screenshot fade-up fade-up-4">
</div>
</div>
</div>
<!-- Why Encore? -->
<div class="hero fade-up fade-up-4">
<h2>Why Encore?</h2>
<div class="card-container">
<div class="card fade-up fade-up-5">
<h3>Simple Interface</h3>
<p>Designed with seniors in mind, Encore has an intuitive interface that makes it easy to.</p>
</div>
<div class="card fade-up fade-up-6">
<h3>Play Music Easily</h3>
<p>Encore has large buttons with high contrast, making it easy to play, pause, skip, and adjust the volume.</p>
</div>
<div class="card fade-up fade-up-7">
<h3>No Ads, No Distractions</h3>
<p>Enjoy uninterrupted music without the distraction of advertisements.</p>
</div>
<div class="card fade-up fade-up-8">
<h3>Offline Listening</h3>
<p>Enjoy your music even without an internet connection -- Encore works entirely offline.</p>
</div>
</div>
</div>
<!-- Encore advertisement -->
<div class="hero fade-up fade-up-9">
<h2>Watch the video!</h2>
<p>
At some point, I plan to make a better video advertisement for Encore, but for now, here's a super short and simple one.
<br><br>
<em>Please click on the video to play it (it's the big black area).</em>
</p>
<video controls class="video fade-up fade-up-9">
<source src="media/encore-advertisement.mp4" type="video/mp4">
Please use a modern browser to watch this video.
</video>
</div>
<!-- Encore demo -->
<div class="hero fade-up fade-up-10">
<h2>See a Demo</h2>
<p>
Here's a quick demo of what Encore looks like in action!
There are some glitches with the background texture in this video,
but those are due to the video compression I had to perform so this
video would load somewhat quickly. The actual app doesn't have any
glitches.
<br><br>
<em>Please click on the video to play it (it's the big black area).</em>
</p>
<video controls class="video fade-up fade-up-10">
<source src="media/encore-demo.mp4" type="video/mp4">
Please use a modern browser to watch this video.
</video>
</div>
<!-- What makes Encore different -->
<div class="hero fade-up fade-up-10">
<h2>What makes Encore different?</h2>
<p>
Encore stands out from other music players with its focus on simplicity and ease of use.
Unlike many music playing apps that are cluttered with features and ads, Encore provides
a clean, easy-to-use interface that makes it easy for seniors to enjoy their favorite
songs without any hassle.
</p>
</div>
<!-- The story of Encore -->
<div class="hero fade-up fade-up-9">
<h2>The Story of Encore</h2>
<p>
A year ago, my grandfather was developing dementia and was struggling to maintain a
happy and fulfilling life. One of the few things that brought him joy was listening
to music -- he used to be a concert violinist, and music was a huge part of his life.
However, as his life progressed, he found it increasingly difficult to read music
and eventually lost the ability to play the violin altogether. Despite this, he still
loved being able to listen to classical music, and I wanted to find a way to help him
do that. That's why I started working on Encore -- I wanted to create a music player
that would allow him to listen to his favorite songs quickly and easily. Sadly, he
passed away before I could finish the app, but the early beta versions of Encore
I'm working on now are being enjoyed greatly by my grandmother, who also loves music
and has found Encore to be a wonderful way to listen to her favorite songs without
any hassle.
<br><br>
As I built Encore, I encountered many challenges, from designing a simple and intuitive
interface to ensuring that the app would work well on a variety of devices. However, I
was motivated by the knowledge that Encore could make a real difference in the lives of
seniors like my grandparents, and I was determined to create an app that would be
enjoyable to use. To help me code, I primarily used Stack Overflow and the official
documentation for the programming language (Java) I was using. Both had massive amounts
of helpful information that I was able to use to solve problems and learn new techniques
as I built Encore.
<br><br>
In terms of the UI, I wanted to create a design that was clean and simple, with large
buttons and skeumorphic design elements that would make it easy for seniors to navigate
the app <em>while feeling like a real music playing device</em> -- I picked a combination
of a record player and a tape player for my inspiration, and I think the current design
of Encore reflects that inspiration well. Overall, I'm really proud of how Encore has
turned out so far, and I'm excited to continue working on it and eventually release
it to the public.
</p>
</div>
<div class="hero fade-up fade-up-10">
<h2>Try Encore Today!</h2>
<p>
Experience the joy of music with Encore, the best music player for seniors. Download Encore today!
<br><br>
<em>Encore is currently in development and will be available for download soon.</em>
</p>
<a href="example.com" class="button big-button button-disabled fade-up fade-up-11">Download Encore</a>
</div>
</div>
<!-- Footer -->
<footer class="footer fade-in fade-up fade-up-6">
<p>Proudly made in Canada without <em>absolutely zero</em> AI</p>
<p>© 2026 RedLeaf Systems. All rights reserved.</p>
</footer>
<script src="js.js"></script>
</body>
</html>