Skip to content

Commit fe11381

Browse files
mdazfar2mdazfar2
authored
Merge pull request #238 from dhruv8433/feedback-responsive
Feedback responsive
2 parents b8541f2 + 687d427 commit fe11381

3 files changed

Lines changed: 143 additions & 68 deletions

File tree

‎Official_Website/app.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,28 @@ document.addEventListener("DOMContentLoaded", async function () {
166166
}
167167

168168
fetchRepository("https://api.github.com/repos/mdazfar2/HelpOps-Hub/contents");
169+
170+
const accordionButtons = document.querySelectorAll('.btn.abeezee-regular');
171+
172+
accordionButtons.forEach(button => {
173+
button.addEventListener('click', function () {
174+
const targetId = this.getAttribute('aria-controls');
175+
const targetCollapse = document.getElementById(targetId);
176+
177+
if (targetCollapse.classList.contains('show')) {
178+
targetCollapse.classList.remove('show');
179+
this.querySelector('i').classList.remove('fa-chevron-up');
180+
this.querySelector('i').classList.add('fa-chevron-down');
181+
} else {
182+
targetCollapse.classList.add('show');
183+
this.querySelector('i').classList.remove('fa-chevron-down');
184+
this.querySelector('i').classList.add('fa-chevron-up');
185+
}
186+
});
187+
});
188+
169189
});
190+
170191
//Scroll to top js
171192
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
172193
function scrollToTop() {

‎Official_Website/faq.html‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
.accordion .card-header i {
2929
transition: transform 0.2s;
3030
}
31-
.accordion .collapse.show .card-header i {
32-
transform: rotate(180deg);
31+
.accordion .card-header i.collapsed {
32+
transform: rotate(0deg);
3333
}
3434
.accordion .collapse {
3535
height: auto;
@@ -52,34 +52,32 @@
5252
overflow-y: scroll;
5353
}
5454
.about-button1 {
55-
display: flex;
56-
align-items: center;
57-
color: black;
58-
position: fixed;
59-
bottom: 50px;
60-
right: 50px;
61-
color: #00ccff;
62-
background-color: #00ccff;
63-
box-shadow: 5px 5px 20px #00ccff;
64-
border: none;
65-
padding: 5px 5px;
66-
border-radius: 8px; /* Rounded corners */
67-
font-size: 16px; /* Text size */
68-
cursor: pointer;
69-
text-decoration: none;
70-
transition: 0.5s;
71-
}
55+
display: flex;
56+
align-items: center;
57+
color: black;
58+
position: fixed;
59+
bottom: 50px;
60+
right: 50px;
61+
color: #00ccff;
62+
background-color: #00ccff;
63+
box-shadow: 5px 5px 20px #00ccff;
64+
border: none;
65+
padding: 5px 5px;
66+
border-radius: 8px; /* Rounded corners */
67+
font-size: 16px; /* Text size */
68+
cursor: pointer;
69+
text-decoration: none;
70+
transition: 0.5s;
71+
}
7272
.about-button1:hover {
73-
transform: scale(1.2);
74-
/* background-color: white; */
75-
}
76-
.about-button1 a{
77-
text-decoration: none;
78-
}
79-
.nav_item {
80-
text-decoration: none;
81-
}
82-
73+
transform: scale(1.2);
74+
}
75+
.about-button1 a{
76+
text-decoration: none;
77+
}
78+
.nav_item {
79+
text-decoration: none;
80+
}
8381
</style>
8482
</head>
8583
<body>
@@ -137,6 +135,7 @@ <h1>FAQ's</h1>
137135
<div class="container mt-5">
138136

139137
<div class="accordion" id="accordionExample">
138+
140139
<div class="card">
141140
<div class="card-header" id="headingOne">
142141
<h5 class="mb-0">
@@ -217,15 +216,17 @@ <h5 class="mb-0">
217216
</div>
218217
</div>
219218
</div>
219+
220+
220221
<button class="about-button1">
221222
<a href="./about.html"> About Us </a>
222223
</button>
223224
<div id="scrollToTopBtn" class="scrollToTopBtn_FAQ" onclick="scrollToTop() "><img src="scrollToTop.png"></div>
224-
<script src="app.js"></script>
225225
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
226+
<script src="app.js"></script>
226227
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
227228
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
228-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
229+
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
229230

230231
</body>
231232
</html>

‎Official_Website/style.css‎

Lines changed: 90 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ p {
7575

7676
input {
7777
width: 90%;
78-
margin-left: 12px;
78+
/* margin-left: 12px; */
7979
outline: none;
8080
border: none;
8181
font-size: 20px;
@@ -684,28 +684,6 @@ width: 40px;
684684
filter: brightness(1.2);
685685
}
686686

687-
/* Feedback section */
688-
.feedback {
689-
display: flex;
690-
flex-direction: row;
691-
justify-content: space-around;
692-
}
693-
694-
.feedback img {
695-
margin-left: 8rem;
696-
align-items: center;
697-
width: 40rem;
698-
}
699-
700-
#feedback-section {
701-
background-color: #f9f9f9;
702-
padding: 1.5rem;
703-
margin: 2rem auto;
704-
width: 30%;
705-
border: 1px solid #ddd;
706-
border-radius: 20px;
707-
box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
708-
}
709687

710688
#feedback-section.dark-mode {
711689
background-color: #1c1c1c;
@@ -727,35 +705,110 @@ width: 40px;
727705
#feedback-section.dark-mode h2 {
728706
color: #ffffff;
729707
}
708+
.feedback {
709+
display: grid;
710+
grid-template-columns: 1fr;
711+
grid-template-rows: auto auto;
712+
gap:20px;
713+
}
730714

731-
.feedback-form {
732-
display: flex;
733-
flex-direction: column;
734-
gap: 1rem;
715+
#feedback-section {
716+
background-color: #f9f9f9;
717+
padding: 1.5rem;
718+
margin: 2rem auto;
719+
height: 60%;
720+
margin-top: 150px;
721+
width: 60%;
722+
border: 1px solid #ddd;
723+
border-radius: 20px;
724+
box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.2);
735725
}
736726

737-
.feedback-form .form-group {
738-
display: flex;
739-
flex-direction: column;
727+
@media (min-width: 768px) {
728+
.feedback {
729+
grid-template-columns: repeat(2, 1fr);
730+
grid-template-rows: auto;
731+
}
740732
}
741733

742-
.feedback-form label {
743-
font-size: 16px;
744-
margin-bottom: 0.5rem;
734+
@media (max-width: 767px) {
735+
#feedback-section{
736+
width: auto;
737+
height: 100%;
738+
margin: 0px 10px;
739+
}
745740
}
746741

747-
.feedback-form.dark-mode label {
748-
color: white;
742+
#feedback-image {
743+
text-align: center;
744+
}
745+
746+
#feedback-image img {
747+
max-width: 70%;
748+
/* height: auto; */
749+
}
750+
751+
#feedback-section {
752+
padding: 20px;
753+
}
754+
755+
.feedback-form {
756+
display: grid;
757+
grid-template-columns: 1fr;
758+
gap: 10px;
759+
}
760+
761+
.feedback-form label {
762+
font-weight: bold;
749763
}
750764

751765
.feedback-form input,
752766
.feedback-form textarea {
753-
padding: 0.5rem;
754-
font-size: 14px;
767+
width: 98%;
768+
padding: 8px;
755769
border: 1px solid #ccc;
756770
border-radius: 5px;
757771
}
758772

773+
.rating {
774+
display: flex;
775+
justify-content: flex-start;
776+
gap: 5px;
777+
}
778+
779+
.rating input[type="radio"] {
780+
display: none;
781+
}
782+
783+
.rating label {
784+
font-size: 2em;
785+
cursor: pointer;
786+
}
787+
788+
.rating input[type="radio"]:checked + label {
789+
color: orange;
790+
}
791+
792+
button[type="submit"] {
793+
width: 100%;
794+
padding: 10px;
795+
background-color: #007bff;
796+
color: white;
797+
border: none;
798+
border-radius: 5px;
799+
cursor: pointer;
800+
}
801+
802+
button[type="submit"]:hover {
803+
background-color: #0056b3;
804+
}
805+
806+
#message,
807+
#error-message {
808+
margin-top: 20px;
809+
font-size: 1.2em;
810+
}
811+
759812
.feedback-form input.dark-mode,
760813
.feedback-form textarea.dark-mode {
761814
background-color: #333333;

0 commit comments

Comments
 (0)