Skip to content

Commit ba1c4d1

Browse files
CrossyAtom46CrossyAtom46
committed
Replaced placeholders at help.html
1 parent daa8bbc commit ba1c4d1

File tree

3 files changed

+127
-24
lines changed

3 files changed

+127
-24
lines changed

‎app.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,25 @@ function updateActiveNavButton(pageName) {
167167
}
168168
});
169169
}
170-
function initializeHelpTab(){
170+
async function initializeHelpTab(){
171+
// Toggle visibility of FAQ sections with animations
172+
document.querySelectorAll("section").forEach(section => {
173+
section.addEventListener("click", () => {
174+
const content = section.querySelector(".faq-content");
175+
const allSections = document.querySelectorAll("section");
176+
177+
// Collapse other sections and open the clicked one
178+
allSections.forEach(sec => sec.classList.remove("opened"));
179+
section.classList.toggle("opened");
180+
181+
// Adjust the FAQ content display
182+
document.querySelectorAll(".faq-content").forEach(c => {
183+
if (c !== content) c.style.display = "none";
184+
});
171185

186+
content.style.display = content.style.display === "block" ? "none" : "block";
187+
});
188+
});
172189
}
173190

174191
function inToggleActiveOnChange(checkboxId, fieldSelector) {
@@ -375,6 +392,7 @@ async function selectFolderLocation(inputId) {
375392
console.error('Error selecting folder location:', error);
376393
}
377394
}
395+
378396
async function openFileLocation(inputId) {
379397
try {
380398
// Get the folder path using system dialog

‎help.html‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,45 @@
77
</head>
88
<body>
99
<div class="help-container">
10-
<h1>Help Center</h1>
10+
<h1 class="helph1">Help Center</h1>
1111
<section id="yt-dlp-help">
12-
<h2>YT-DLP Help</h2>
13-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam.</p>
14-
<p>Etiam vitae lectus vel tortor ullamcorper venenatis. Duis tincidunt, urna quis varius placerat, libero ligula laoreet arcu, sed rutrum leo tortor nec nibh. Nunc sed fringilla magna.</p>
12+
<h2 class="helph2"><i class="fas fa-video"></i> YT-DLP FAQ</h2>
13+
<div class="faq-content">
14+
<h3>Which sites are supported?</h3>
15+
<p>Find supported sites in the generic video downloading tab's supported sites section.</p>
16+
</div>
17+
</section>
18+
<section id="generic-faq">
19+
<h2 class="helph2"><i class="fas fa-question-circle"></i> Generic FAQ</h2>
20+
<div class="faq-content">
21+
<h3>Downloads get stuck, what to do?</h3>
22+
<p>Make sure to diagnose the issue. Currently, you can start the app from the terminal to debug.</p>
23+
<h3>Deleted files aren’t removed from my PC.</h3>
24+
<p>This is expected behavior for now. We’ll be fixing this in a future update.</p>
25+
<h3>How to report an issue/feature request?</h3>
26+
<p>Visit our main project page and create a new issue: <a class="linkRef" onclick=openPopup("https://github.com/MediaHarbor/mediaharbor/issues")>GitHub Issues</a>.</p>
27+
</div>
1528
</section>
1629
<section id="streamrip-help">
17-
<h2>Streamrip Help</h2>
18-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tincidunt magna. Phasellus sed nulla augue. Integer congue, eros non commodo viverra, urna eros tristique est, ac hendrerit urna est non felis.</p>
19-
<p>Maecenas ut dolor in libero consequat scelerisque. Curabitur eu nibh ac lorem feugiat euismod vel nec libero. Donec non risus sollicitudin, fermentum turpis nec, congue elit.</p>
30+
<h2 class="helph2"><i class="fas fa-music"></i> Streamrip FAQ</h2>
31+
<div class="faq-content">
32+
<h3>Streamrip downloads (Qobuz, Deezer, Tidal) get stuck, what to do?</h3>
33+
<p>Try running <code>$custom_rip config reset</code>. If unresolved, try downloading from your terminal. If it fixes, create a new issue</p>
34+
</div>
2035
</section>
2136
<section id="search-help">
22-
<h2>Search Help</h2>
23-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.</p>
24-
<p>Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
37+
<h2 class="helph2"><i class="fas fa-search"></i> Search FAQ</h2>
38+
<div class="faq-content">
39+
<h3>What is this?</h3>
40+
<p>A search function using API requests is in progress. Meanwhile, use your service’s search page.</p>
41+
</div>
2542
</section>
26-
<section id="general-help">
27-
<h2>General Help</h2>
28-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</p>
29-
<p>Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
43+
<section id="sponsor-help">
44+
<h2 class="helph2"><i class="fas fa-hand-holding-usd"></i> How to Sponsor this Project?</h2>
45+
<div class="faq-content">
46+
<p>Support us via the sponsor button on our project page: <a class="linkRef" onclick=openPopup("https://github.com/MediaHarbor/mediaharbor/")>GitHub Sponsor</a>.</p>
47+
<p>All donations are appreciated!</p>
48+
</div>
3049
</section>
3150
</div>
3251
</body>

‎style.css‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -143,15 +143,6 @@ input[type="text"] {
143143
border-radius: 5px;
144144
border: 1px solid #ddd;
145145
}
146-
.help-container {
147-
max-width: 800px;
148-
margin: 0 auto;
149-
background: #fff;
150-
padding: 20px;
151-
border-radius: 10px;
152-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
153-
}
154-
155146

156147
button {
157148
padding: 10px 20px;
@@ -1018,4 +1009,79 @@ select.dropdown-btn:focus {
10181009

10191010
.download-actions {
10201011
padding: 5px 0px 0px 0px;
1012+
}
1013+
.help-container {
1014+
max-width: 800px;
1015+
margin: 2em auto;
1016+
padding: 1.5em;
1017+
background-color: var(--container-color);
1018+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
1019+
border-radius: 8px;
1020+
transition: all 0.3s ease;
1021+
animation: fadeIn 0.5s ease-out;
1022+
}
1023+
1024+
.helph1 {
1025+
text-align: center;
1026+
font-size: 2em;
1027+
margin-bottom: 1em;
1028+
animation: fadeSlideIn 0.5s ease-in-out;
1029+
}
1030+
1031+
section {
1032+
margin-bottom: 1.5em;
1033+
cursor: pointer;
1034+
transition: transform 0.2s ease;
1035+
}
1036+
1037+
section:hover {
1038+
transform: scale(1.02);
1039+
}
1040+
1041+
.helph2 {
1042+
font-size: 1.4em;
1043+
margin-bottom: 0.5em;
1044+
display: flex;
1045+
align-items: center;
1046+
animation: fadeSlideIn 0.5s ease-in-out;
1047+
}
1048+
1049+
.faq-content {
1050+
display: none;
1051+
padding-left: 1.5em;
1052+
transition: opacity 0.3s ease, max-height 0.3s ease;
1053+
max-height: 0;
1054+
overflow: hidden;
1055+
}
1056+
1057+
section.opened .faq-content {
1058+
display: block;
1059+
max-height: 500px;
1060+
opacity: 1;
1061+
}
1062+
1063+
h3, p, a {
1064+
font-size: 1em;
1065+
line-height: 1.6;
1066+
opacity: 0;
1067+
animation: fadeInContent 0.6s ease forwards;
1068+
}
1069+
1070+
@keyframes fadeIn {
1071+
from { opacity: 0; }
1072+
to { opacity: 1; }
1073+
}
1074+
1075+
@keyframes fadeSlideIn {
1076+
from { opacity: 0; transform: translateY(-10px); }
1077+
to { opacity: 1; transform: translateY(0); }
1078+
}
1079+
1080+
@keyframes fadeInContent {
1081+
from { opacity: 0; }
1082+
to { opacity: 1; }
1083+
}
1084+
.linkRef {
1085+
color: #45a049;
1086+
text-decoration: none;
10211087
}

0 commit comments

Comments
 (0)