Skip to content

Commit

Permalink
Merge pull request #403 from Ojas-Arora/test
Browse files Browse the repository at this point in the history
Enhancing User Experience: Adding Home Icons and Improving the FAQ Page
  • Loading branch information
sk66641 authored Jul 10, 2024
2 parents 7ca168a + d35d69f commit 2d9b9df
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 12 deletions.
13 changes: 12 additions & 1 deletion Login/index1.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,19 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="./styles1.css">
<title>Login/SignUp Page</title>
<style>
.backbtn {
position: absolute;
top: 20px;
left: 30px;
z-index: 1000; /* Ensure it is above other elements */
}
</style>
</head>
<body style="background-color: black;">
<a href="../index.html" class="backbtn">
<img src="../assets/images/Designer.jpeg" alt="Home" style="width: 70px; height: 70px;">
</a>
<div class="loader">
<div>
<lottie-player src="https://lottie.host/451aadfb-9af8-4298-98be-e9c583f8a72c/jPRsrfR2jf.json"
Expand All @@ -24,7 +35,7 @@
<div class="snowflakes" style="display: block;">
<div id="particles-js"></div>
</div>

<div class="container" id="container">
<div class="form-container sign-up">
<img src="../assets/images/logo/logo..png" alt="Website Logo" class="logo-right">
Expand Down
Binary file added assets/images/Designer.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/homeicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pages/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
</div>
</div>
<div class="box" id="box">
<a href="../index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a href="../index.html" class="backbtn"><img src="../assets/images/Designer.jpeg" style="width: 70px; height: 70px;"></a>
<h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff; display: block;">
About
</h1>
Expand Down
54 changes: 45 additions & 9 deletions pages/faq.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,34 @@
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.faqBox {
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 7px 7px 20px 0 #f09819;
}
.question {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.question:hover {
color: #f09819;
}
.answer {
display: none;
padding: 10px 0;
}
.arrow {
transition: transform 0.2s;
}
.rotate {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>
Expand All @@ -32,40 +60,40 @@
</div>
</div>
<div class="box" id="box">
<a href="../index.html" class="back-button"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a href="../index.html" class="back-button"><img src="../assets/images/Designer.jpeg" style="width: 70px; height: 70px; margin-top: 10px;"></a>
<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?</div>
<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>
</div>
<div class="faqBox">
<div class="question">How do I change the colors?</div>
<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>
<div class="faqBox">
<div class="question">Can I add a countdown timer?</div>
<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">
<div class="question">What are some example settings?</div>
<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>
<div class="faqBox">
<div class="question">Can I customize the light patterns?</div>
<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">
<div class="question">Is there a way to save my settings?</div>
<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>
<div class="faqBox">
<div class="question">Does the simulator work on mobile devices?</div>
<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">
<div class="question">Can I share my disco light show with friends?</div>
<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>
</div>
Expand Down Expand Up @@ -101,6 +129,14 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 40px;
<script src="../js/script.js"></script>
<script src="../js/backToTopBtn.js"></script>
<script src="../js/social.js"></script>
<script>
$(document).ready(function() {
$('.question').click(function() {
$(this).next('.answer').slideToggle();
$(this).find('.arrow').toggleClass('rotate');
});
});
</script>
<div id="accountNotAvailableModal" class="account-not-available-modal">
<div class="account-not-available-modal-content">
<span class="close" id="closeAccountNotAvailableModal">&times;</span>
Expand Down
2 changes: 1 addition & 1 deletion pages/features.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</div>
</div>
<div class="box" id="box">
<a href="../index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a href="../index.html" class="backbtn"><img src="../assets/images/Designer.jpeg" style="width: 70px; height: 70px;"></a>
<h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff;">
Features
</h1>
Expand Down
1 change: 1 addition & 0 deletions pages/feedback.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
</div>
</div>
<div class="box" id="box">
<a href="../index.html" class="backbtn"><img src="../assets/images/Designer.jpeg" style="width: 70px; height: 70px;"></a>
<h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff;">
HELP US IMPROVE!
</h1>
Expand Down

0 comments on commit 2d9b9df

Please sign in to comment.