Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added the aria labels for all the pages which were missing it #620

Merged
merged 6 commits into from
Aug 9, 2024
Merged

added the aria labels for all the pages which were missing it #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
67d7c4b
Update privacy.html
aditya-bhaumik Aug 9, 2024
f2ab35b
Merge branch 'sk66641:main' into aria-labels-fix
aditya-bhaumik Aug 9, 2024
0c833e6
Update feedback.html
aditya-bhaumik Aug 9, 2024
08f9582
Update faq.html
aditya-bhaumik Aug 9, 2024
ce2d14f
Update about.html
aditya-bhaumik Aug 9, 2024
a9c9972
Update terms.html
aditya-bhaumik Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 44 additions & 20 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,42 +207,66 @@
</nav>
</div>
</div>
<div class="box" id="box">
<a href="../index.html" class="back-button">
<img src="../assets/images/BackToHome Btn.png" style="width: 70px; height: 70px;" class="back">
<div class="box" id="box" aria-labelledby="changingHeading">
<a href="../index.html" class="back-button" aria-label="Back to Home">
<img src="../assets/images/BackToHome Btn.png" style="width: 70px; height: 70px;" class="back" alt="Back to Home Button">
</a>
<h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff; display: block;">
About
</h1>
<div class="aboutBox">
<div class="heading">The Random Disco-Light Simulator</div>

<div class="aboutBox" aria-labelledby="heading1">
<div class="heading" id="heading1">The Random Disco-Light Simulator</div>
<div class="desc">Welcome to the Random Disco-Light Simulator, a captivating and interactive project designed to bring the dynamic energy of a disco dance floor right to your screen. Whether you're a developer looking to explore creative coding, a party enthusiast eager to recreate the vibe of a disco, or simply someone who loves the burst of vibrant colors, this simulator is sure to add some excitement to your day.</div>
</div>
<div class="aboutBox">
<div class="heading">Inputs</div>

<div class="aboutBox" aria-labelledby="heading2">
<div class="heading" id="heading2">Inputs</div>
<div class="desc">
<div class="points" style="margin-bottom: 10px;"><strong>1. Number of Colors :</strong> Choose the total number of random colors that will be displayed in the simulation. You can opt for a few colors for a subtle effect or go all out with hundreds of colors for a truly dazzling display.</div>
<div class="points" style="margin-bottom: 10px;"><strong>2. Time Interval :</strong> Set the interval in milliseconds at which the colors will change. A smaller interval will create a rapid, strobe-like effect, while a larger interval will provide a more relaxed, flowing transition of colors.</div>
<div class="points" style="margin-bottom: 10px;"><strong>3. View Type :</strong> Customize the visual effect by selecting from three distinct view types: conic, linear, or radial. Each view type offers a unique pattern and movement for the colors, allowing you to tailor the simulation to your preferences.</div>
<div class="points" style="margin-bottom: 10px;"><strong>4. Countdown Timer :</strong> Decide the duration of the simulation by setting a countdown timer in seconds. The simulation will run for the specified time before automatically stopping, letting you enjoy the show without needing to manually end it.</div>
<div class="points" style="margin-bottom: 10px;"><strong>5. Sound Effect :</strong> Enhance the visual experience with an optional sound effect. Choose a funky beat, a classic disco tune, or any sound that complements the vibrant visuals, adding an auditory dimension to your light show.</div>
<div class="points" style="margin-bottom: 10px;">
<strong>1. Number of Colors :</strong> Choose the total number of random colors that will be displayed in the simulation. You can opt for a few colors for a subtle effect or go all out with hundreds of colors for a truly dazzling display.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>2. Time Interval :</strong> Set the interval in milliseconds at which the colors will change. A smaller interval will create a rapid, strobe-like effect, while a larger interval will provide a more relaxed, flowing transition of colors.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>3. View Type :</strong> Customize the visual effect by selecting from three distinct view types: conic, linear, or radial. Each view type offers a unique pattern and movement for the colors, allowing you to tailor the simulation to your preferences.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>4. Countdown Timer :</strong> Decide the duration of the simulation by setting a countdown timer in seconds. The simulation will run for the specified time before automatically stopping, letting you enjoy the show without needing to manually end it.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>5. Sound Effect :</strong> Enhance the visual experience with an optional sound effect. Choose a funky beat, a classic disco tune, or any sound that complements the vibrant visuals, adding an auditory dimension to your light show.
</div>
</div>
</div>
<div class="aboutBox">
<div class="heading">Output</div>

<div class="aboutBox" aria-labelledby="heading3">
<div class="heading" id="heading3">Output</div>
<div class="desc">Based on the inputs you provide, the simulator generates a dynamic and colorful light show that transforms your screen into a lively disco dance floor. The colors will change according to your specified interval and view type, creating a mesmerizing visual experience. The simulation continues until the countdown timer expires, offering a seamless and immersive disco ambiance.</div>
</div>
<div class="aboutBox">
<div class="heading">Examples</div>

<div class="aboutBox" aria-labelledby="heading4">
<div class="heading" id="heading4">Examples</div>
<div class="desc">
Here are some fun combinations to try out:
<div class="points" style="margin-top: 20px; margin-bottom: 10px;">1. <strong>1000 Colors, 1 Millisecond Interval, Conic View, 60 Seconds Timer:</strong> Experience an intense and fast-paced color explosion with this high-energy setup.</div>
<div class="points" style="margin-bottom: 10px;">2. <strong>500 Colors, 500 Milliseconds Interval, Radial View, 120 Seconds Timer:</strong> Enjoy a more laid-back, hypnotic light show with slower transitions and a radial pattern.</div>
<div class="points" style="margin-bottom: 10px;">3. <strong>300 Colors, 100 Milliseconds Interval, Linear View, 90 Seconds Timer:</strong> Create a balanced and rhythmic visual effect with this intermediate setting, perfect for a relaxed yet dynamic display.</div>
<div class="points" style="margin-top: 20px; margin-bottom: 10px;">
<strong>1. 1000 Colors, 1 Millisecond Interval, Conic View, 60 Seconds Timer:</strong> Experience an intense and fast-paced color explosion with this high-energy setup.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>2. 500 Colors, 500 Milliseconds Interval, Radial View, 120 Seconds Timer:</strong> Enjoy a more laid-back, hypnotic light show with slower transitions and a radial pattern.
</div>
<div class="points" style="margin-bottom: 10px;">
<strong>3. 300 Colors, 100 Milliseconds Interval, Linear View, 90 Seconds Timer:</strong> Create a balanced and rhythmic visual effect with this intermediate setting, perfect for a relaxed yet dynamic display.
</div>
</div>
</div>
<div class="desc" style="text-align: center; color: chocolate; font-weight: bold;">Experiment with different settings to craft your own unique disco light show and enjoy the colorful spectacle! 😄</div>

<div class="desc" style="text-align: center; color: chocolate; font-weight: bold;">
Experiment with different settings to craft your own unique disco light show and enjoy the colorful spectacle! 😄
</div>
</div>

<footer class="footer" style="width: 100%;height: 2px;">
<div class="socialIcons">
<span class="icons">
Expand Down
117 changes: 72 additions & 45 deletions pages/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,62 +202,89 @@
</div>

</div>
<div class="box" id="box">
<a href="../index.html" class="back-button">
<img src="../assets/images/BackToHome Btn.png" style="width: 70px; height: 70px;" class="back">
<div class="box" id="box" aria-label="FAQ Section">
<a href="../index.html" class="back-button" aria-label="Back to Home">
<img src="../assets/images/BackToHome Btn.png" style="width: 70px; height: 70px;" class="back" alt="Back to Home Button">
</a>
<h1 id="changingHeading"
style="font-family: Arial, sans-serif; font-size: 40px; color: #f09819; display: block;">
<h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 40px; color: #f09819; display: block;">
FAQ
</h1>
<div class="faqBox">
<div class="question">What is the Random Disco Light Simulator? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer">The Random Disco Light Simulator is a fun and interactive project that brings the
excitement of a disco dance floor to your screen. Whether you're a developer, a party enthusiast, or
just curious, this simulator is designed to brighten up your day!</div>

<!-- FAQ Items -->
<div class="faqBox" aria-labelledby="faq1">
<div class="question" id="faq1" aria-expanded="false" aria-controls="faq1-answer">
What is the Random Disco Light Simulator? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="faqBox">
<div class="question">How do I change the colors? <i class="fas fa-chevron-down arrow"></i></div>
<div class="answer">You can specify the number of random colors you want to be shown, set the interval (in
milliseconds) at which the colors should change, and choose from conic, linear, or radial views to
customize the visual effect.</div>
<div class="answer" id="faq1-answer" hidden>
The Random Disco Light Simulator is a fun and interactive project that brings the excitement of a disco dance floor to your screen. Whether you're a developer, a party enthusiast, or just curious, this simulator is designed to brighten up your day!
</div>
<div class="faqBox">
<div class="question">Can I add a countdown timer? <i class="fas fa-chevron-down arrow"></i></div>
<div class="answer">Yes, you can set a timer (in seconds) for how long the simulation should run.
Additionally, you can optionally add a sound effect to enhance the disco experience.</div>
</div>

<div class="faqBox" aria-labelledby="faq2">
<div class="question" id="faq2" aria-expanded="false" aria-controls="faq2-answer">
How do I change the colors? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="faqBox">
<div class="question">What are some example settings? <i class="fas fa-chevron-down arrow"></i></div>
<div class="answer">Try these input combinations and see the magic unfold: 1000 colors, 1 millisecond
interval, conic view, 60 seconds timer. Experiment with different settings and have fun creating your
own disco light show!</div>
<div class="answer" id="faq2-answer" hidden>
You can specify the number of random colors you want to be shown, set the interval (in milliseconds) at which the colors should change, and choose from conic, linear, or radial views to customize the visual effect.
</div>
<div class="faqBox">
<div class="question">Can I customize the light patterns? <i class="fas fa-chevron-down arrow"></i></div>
<div class="answer">Yes, you can customize the light patterns by selecting different modes and intervals.
This allows you to create unique and mesmerizing disco light shows.</div>
</div>

<div class="faqBox" aria-labelledby="faq3">
<div class="question" id="faq3" aria-expanded="false" aria-controls="faq3-answer">
Can I add a countdown timer? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="faqBox">
<div class="question">Is there a way to save my settings? <i class="fas fa-chevron-down arrow"></i></div>
<div class="answer">Currently, there is no built-in feature to save settings, but you can manually note down
your preferred settings to reuse them later.</div>
<div class="answer" id="faq3-answer" hidden>
Yes, you can set a timer (in seconds) for how long the simulation should run. Additionally, you can optionally add a sound effect to enhance the disco experience.
</div>
<div class="faqBox">
<div class="question">Does the simulator work on mobile devices? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer">Yes, the Random Disco Light Simulator is designed to work on various devices, including
desktops, tablets, and mobile phones. However, performance may vary based on the device's capabilities.
</div>
</div>

<div class="faqBox" aria-labelledby="faq4">
<div class="question" id="faq4" aria-expanded="false" aria-controls="faq4-answer">
What are some example settings? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="faqBox">
<div class="question">Can I share my disco light show with friends? <i
class="fas fa-chevron-down arrow"></i></div>
<div class="answer">Yes, you can share your disco light show by sharing the URL with your friends. They can
visit the same link to experience the light show you have created.</div>
<div class="answer" id="faq4-answer" hidden>
Try these input combinations and see the magic unfold: 1000 colors, 1 millisecond interval, conic view, 60 seconds timer. Experiment with different settings and have fun creating your own disco light show!
</div>
</div>

<div class="faqBox" aria-labelledby="faq5">
<div class="question" id="faq5" aria-expanded="false" aria-controls="faq5-answer">
Can I customize the light patterns? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer" id="faq5-answer" hidden>
Yes, you can customize the light patterns by selecting different modes and intervals. This allows you to create unique and mesmerizing disco light shows.
</div>
</div>

<div class="faqBox" aria-labelledby="faq6">
<div class="question" id="faq6" aria-expanded="false" aria-controls="faq6-answer">
Is there a way to save my settings? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer" id="faq6-answer" hidden>
Currently, there is no built-in feature to save settings, but you can manually note down your preferred settings to reuse them later.
</div>
</div>

<div class="faqBox" aria-labelledby="faq7">
<div class="question" id="faq7" aria-expanded="false" aria-controls="faq7-answer">
Does the simulator work on mobile devices? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer" id="faq7-answer" hidden>
Yes, the Random Disco Light Simulator is designed to work on various devices, including desktops, tablets, and mobile phones. However, performance may vary based on the device's capabilities.
</div>
</div>

<div class="faqBox" aria-labelledby="faq8">
<div class="question" id="faq8" aria-expanded="false" aria-controls="faq8-answer">
Can I share my disco light show with friends? <i class="fas fa-chevron-down arrow"></i>
</div>
<div class="answer" id="faq8-answer" hidden>
Yes, you can share your disco light show by sharing the URL with your friends. They can visit the same link to experience the light show you have created.
</div>
</div>
</div>

</div>
<footer class="footer">
<div class="socialIcons">
<span class="icons">
Expand Down Expand Up @@ -308,4 +335,4 @@ <h2>Account Not Available</h2>

</body>

</html>
</html>
Loading
Loading