From b31c6f92189d4757a483c4b4c12f08c954b1779c Mon Sep 17 00:00:00 2001 From: thilakjo Date: Tue, 22 Oct 2024 00:19:34 +0530 Subject: [PATCH 1/2] index.html some text alignment change --- index.html | 1293 ++++++++++++++++++++++++---------------------------- 1 file changed, 601 insertions(+), 692 deletions(-) diff --git a/index.html b/index.html index 8fd8521..a2ab2ed 100644 --- a/index.html +++ b/index.html @@ -1,212 +1,200 @@ - - - - - - - - - - My Favorite Books Music App - + + + + + + + + + + My Favorite Books Music App + - -
+ +
+
+ Loading... +
+
+ + + +
+ -
+ + +
+ + - - + + + +
+
+
+ Audio book cover +
+
+

Frankestine

+

By Mary Shelby

+ Discover +
+
+
+ +
+
+
+ Audio book cover +
+
+

+ Adventures of Sherlock Holmes +

+

By Sir Arthur Conan Doyle

+ Discover +
+
+
+ +
+
+
+ Audio book cover +
+
+

+ Sapiens: A Brief History of Humankind +

+

By Yuval Noah Harari

+ Discover +
+
+
+ + - -
-
-
- -
- God Delusion Cover -
- -
-

- God Delusion -

-

- By Richard Dawkins -

-

- The God Delusion is a book by English biologist - Richard Dawkins that argues against the - existence of a supernatural creator. -

-
+ +
+
+
+ +
+ God Delusion Cover +
+ +
+

God Delusion

+

By Richard Dawkins

+

+ The God Delusion is a book by English biologist Richard Dawkins + that argues against the existence of a supernatural creator. +

+
-
+
- -
- Save to Favourites - Share - View comments -
- -
+ +
+ Save to Favourites + Share + View comments +
+ +
+
+
+ +
+
    +
  • +
    +

    Introduction: God Delusion

    + +
    +
    +
    +
    +
  • +
  • +
    +

    Part 2

    + +
    +
    +
    +
    +
  • +
  • +
    +

    Part 3

    + +
    +
    +
    +
    +
  • +
  • +
    +

    Part 4

    + +
    +
    +
    +
    +
  • +
  • +
    +

    Part 5

    + +
    +
    +
    +
    +
  • +
  • +
    +

    Part 6

    + + +
    +
    +
    -
    - -
    -
      -
    • -
      -

      Introduction: God Delusion

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 2

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 3

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 4

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 5

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 6

      +
    • +
    • +
      +

      Part 7

      - -
      -
      -
      -
      -
    • -
    • -
      -

      Part 7

      + +
      +
      +
      +
      +
    • +
    - -
    -
    -
    -
    -
  • -
+
+ + 0:00 + + 0:00 + +
+ 1x -
- - 0:00 - - 0:00 - -
- 1x - - - -
-
+ + +
+
- -
-
-
- -
-
- -30 -
-
- -
-
- +30 -
-
- -
-
-
-
+ +
+
+
+
-
- - -
-
- Previous Book +
+ -30 +
+
+
-
- Next Book +
+ +30
-
+
+ +
+ + + + + -
- -
-

- Share Your Comments -

-
-
- - -
-
- - -
-
- -
-
+ +
+ +
+ Next Book +
+
-
-
-
- +
+ +
+

+ Share Your Comments +

+
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+
+ - - + + - + - - - + + + From 7a43462bb4a33b3692ce5ff47fce8bd72f69a623 Mon Sep 17 00:00:00 2001 From: thilakjo Date: Tue, 22 Oct 2024 01:05:18 +0530 Subject: [PATCH 2/2] faq typing effect for answers --- about.html | 71 ++++++++++++------ faq.html | 214 +++++++++++++++++++++++++++++++++++++++++++++-------- index.html | 3 - script.js | 52 +++++++++++-- style.css | 21 ++++++ 5 files changed, 296 insertions(+), 65 deletions(-) diff --git a/about.html b/about.html index aeef4fc..d17487f 100644 --- a/about.html +++ b/about.html @@ -459,16 +459,16 @@
vatsaljain-hub
>
Contributor 1
-
Jules Mukadi
+
Shalom fernandes

GitHub ProfileJules Mukadi

+ +
Thilak Jo +
+
Thilak Jo
+

+ GitHub Profile +

+
+
+
+
+
+
+
+ Contributor 1
-
Jay Shukla
+
Jules Mukadi

GitHub ProfileJay Shukla >

Contributor 1
-
Nirmohi
+
Jay Shukla

GitHub ProfileNirmohi >

Contributor 1
-
Amarjit
+
Nirmohi

GitHub ProfileAmarjit >

Contributor 1
-
harshitkumargupta
+
Amarjit

GitHub Profileharshitkumargupta >

Contributor 1
-
Sujal charati
+
harshitkumargupta

GitHub ProfileSujal charati >

Contributor 1
-
Aman Kumar
+
Sujal charati

GitHub Profile + + My Favorite Books Music App - @@ -53,9 +54,110 @@ Loading...

- -
+ +
+ +

@@ -73,9 +175,16 @@

alt="Profile" />
-

What is Lisbook?

-

- Lisbook is an audio-book and music streaming platform that + +

+ What is Lisbook? +

+ + @@ -94,10 +203,13 @@

What is Lisbook?

alt="Profile" />
-

+

How can I create an account?

-

+

alt="Profile" />
-

+

Is there a mobile app available?

-

+

@@ -139,10 +254,13 @@

alt="Profile" />
-

+

Can I download audiobooks for offline listening?

-

+

@@ -161,10 +279,13 @@

alt="Profile" />
-

+

Is there a free version of Lisbook?

-

+

@@ -183,10 +304,13 @@

alt="Profile" />
-

+

How do I cancel my subscription?

-

+

alt="Profile" />
-

+

Does Lisbook have a family plan?

-

+

@@ -228,10 +355,13 @@

alt="Profile" />
-

+

Can I create my own playlists?

-

+

@@ -250,8 +380,13 @@

alt="Profile" />
-

How do I reset my password?

-

+

+ How do I reset my password? +

+

How do I reset my password?

alt="Profile" />
-

+

What formats are supported for audiobooks?

-

+

@@ -293,10 +431,13 @@

alt="Profile" />
-

+

How can I share audiobooks with friends?

-

+

@@ -315,10 +456,13 @@

alt="Profile" />
-

+

Can I listen to audiobooks while offline?

-

+

@@ -337,10 +481,13 @@

alt="Profile" />
-

+

Does Lisbook offer audiobooks in different languages?

-

+

@@ -359,10 +506,13 @@

alt="Profile" />
-

+

How do I contact customer support?

-

+

diff --git a/index.html b/index.html index 7bbaa81..7eb728c 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,6 @@ -<<<<<<< HEAD -=======
@@ -48,7 +46,6 @@
->>>>>>> issue-119-fix
{ - if (!speedButton.contains(e.target) && !speedDropdown.contains(e.target)) { - speedDropdown.classList.add("hidden"); - } - }); - // Function to display error popup function showErrorPopup(message) { const overlay = document.createElement("div"); @@ -265,8 +257,15 @@ document.addEventListener("DOMContentLoaded", function () { } }); } + //cursor smooth const circles = document.querySelectorAll(".circle"); + const logo = document.querySelector(".logo"); // Assuming the logo has a class "logo" const coords = { x: 0, y: 0 }; + if (logo) { + const logoRect = logo.getBoundingClientRect(); + coords.x = logoRect.left + logoRect.width / 2; // Center of the logo horizontally + coords.y = logoRect.top + logoRect.height / 2; // Center of the logo vertically + } // Updated color palette const colors = [ @@ -552,6 +551,43 @@ document.addEventListener("DOMContentLoaded", function () { } }); }); + //faq auto type answer + const faqBoxes = document.querySelectorAll(".faq-box"); + + faqBoxes.forEach((box) => { + // Hover event on the entire FAQ box + box.addEventListener("mouseenter", function () { + const question = box.querySelector(".faq-question"); + const answerId = question.getAttribute("data-answer"); + const answerElement = document.getElementById(answerId); + + // Check if the answer has already been displayed + if (!answerElement.classList.contains("hidden")) return; + + // Add the typing effect + typeAnswer( + answerElement, + answerElement.dataset.fulltext || answerElement.innerHTML + ); + }); + }); + + function typeAnswer(element, answer) { + element.dataset.fulltext = answer; // Store the full text in a data attribute + element.innerHTML = ""; // Clear the current text + element.classList.remove("hidden"); // Make the answer visible + let i = 0; + + function type() { + if (i < answer.length) { + element.innerHTML += answer.charAt(i); + i++; + setTimeout(type, 50); // Adjust typing speed here + } + } + + type(); + } audioPlayer?.addEventListener("loadeddata", function () { playlistItems?.forEach((item) => { diff --git a/style.css b/style.css index 707f203..aaea4b7 100644 --- a/style.css +++ b/style.css @@ -56,6 +56,27 @@ button, li { cursor: none; } +.hidden { + display: none; +} + +.faq-answer { + display: block; + font-size: 1rem; + margin-top: 10px; + color: var(--accent-color); /* Existing accent color */ +} + +.faq-question { + cursor: pointer; + color: var(--accent-color); /* Same color for consistency */ + font-weight: bold; + font-size: 1.2rem; +} + +.faq-question:hover { + text-decoration: none; +} /* Trailing circles styles */ .circle {