├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug-report.yml
    │   ├── config.yml
    │   ├── doc-issue.yml
    │   ├── feature-report.yml
    │   └── other-issue.yml
    └── pull_request_template.md
├── .gitignore
├── .prettierrc
├── .vscode
    └── settings.json
├── Contributing.md
├── Contributors
    ├── contributors.html
    ├── script.js
    └── styles.css
├── Duplicates.txt
├── LICENSE
├── Quotes.js
├── README.md
├── assets
    ├── css
    │   ├── style.css
    │   └── styleBelow500.css
    ├── images
    │   ├── QuoteVeerseText.png
    │   ├── QuoteVerse-Cover.png
    │   └── favicon
    │   │   ├── android-chrome-192x192.png
    │   │   ├── android-chrome-512x512.png
    │   │   ├── apple-touch-icon.png
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.png
    │   │   └── favicon.ico
    ├── js
    │   ├── lang.js
    │   ├── main.js
    │   └── others.js
    └── lang
    │   ├── ar.json
    │   ├── bn.json
    │   ├── de.json
    │   ├── en-US.json
    │   ├── en.json
    │   ├── es.json
    │   ├── fr.json
    │   ├── hi.json
    │   ├── it.json
    │   ├── ja.json
    │   ├── kn.json
    │   ├── ml.json
    │   ├── mr.json
    │   ├── pt.json
    │   ├── ru.json
    │   ├── ta.json
    │   ├── te.json
    │   └── zh.json
├── index.html
├── package-lock.json
├── package.json
└── sample.json


/.github/ISSUE_TEMPLATE/bug-report.yml:
--------------------------------------------------------------------------------
 1 | name: 🐞 Bug Report
 2 | description: Create a issue mentioning bug 
 3 | title: "[BUG]: <your-issue-title>"
 4 | labels: ["bug","hacktoberfest","hacktoberfest-accepted"]
 5 | body:
 6 | 
 7 |   - type: markdown
 8 |     attributes:
 9 |       value: "## Hello Welcome to QuoteVerse issue section!"
10 | 
11 |   - type: textarea
12 |     id: reason
13 |     attributes:
14 |       label: Kindly explain, what is the issue or what bug do you want to be fixed?
15 |       description: Also tell us, what did you expect to happen?
16 |       placeholder: Tell us what you see!
17 |       value: "I want to . . . "
18 |     validations:
19 |       required: true
20 | 
21 |   - type: textarea
22 |     id: screenshot
23 |     attributes:
24 |       label: Screenshot of the issue.
25 |       description: Give a snap example of the bug?
26 |       placeholder: paste your screenshot here!
27 |     validations:
28 |       required: true
29 | 
30 |   - type: dropdown
31 |     id: browsers
32 |     attributes:
33 |       label: What browsers are you seeing the problem on?
34 |       multiple: true
35 |       options:
36 |         - Google Chrome
37 |         - Brave
38 |         - Microsoft Edge
39 |         - Mozilla Firefox
40 |         - Safari
41 |         - Opera
42 |         - Other
43 | 
44 |   - type: checkboxes
45 |     id: terms
46 |     attributes:
47 |       label: Code of Conduct
48 |       description: Fill up the boxes carefully.
49 |       options:
50 |         - label: i have read the [contribution guideline](https://github.com/Shariar-Hasan/QuoteVerse/blob/main/Contributing.md)
51 |           required: true
52 |         - label: i am sure, this issue is not raised before.
53 |           required: true
54 | 
55 |   - type: dropdown
56 |     id: willing
57 |     attributes:
58 |       label: Do you want to fix the issue?
59 |       options:
60 |         - Yes, I want to fix it
61 |         
62 |   - type: markdown
63 |     attributes:
64 |       value: |
65 |         Thanks for taking the time to fill out this bug! 
66 |         Please give a ⭐ star to the repository
67 |         Join us in github https://github.com/Shariar-Hasan
68 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/doc-issue.yml:
--------------------------------------------------------------------------------
 1 | name: 📄 Documentation issue
 2 | description: Found an issue in the documentation(README)? You can use this one!
 3 | title: "[DOCS] <what do you have to add>"
 4 | labels: ["documentation", "hacktoberfest"]
 5 | body:
 6 |   - type: textarea
 7 |     id: description
 8 |     attributes:
 9 |       label: Description
10 |       description: A brief description of the question or issue, also include what you tried and what didn't work
11 |     validations:
12 |       required: true
13 |   - type: textarea
14 |     id: screenshots
15 |     attributes:
16 |       label: Screenshots
17 |       description: Please add screenshots if applicable
18 |     validations:
19 |       required: false
20 |   - type: textarea
21 |     id: extrainfo
22 |     attributes:
23 |       label: Additional information
24 |       description: Is there anything else we should know about this issue?
25 |     validations:
26 |       required: false
27 | 
28 |   - type: checkboxes
29 |     id: no-duplicate-issues
30 |     attributes:
31 |       label: "👀 Have you checked if this issue has been raised before?"
32 |       options:
33 |         - label: "I checked and didn't find similar issue"
34 |           required: true
35 | 
36 |   - type: checkboxes
37 |     id: read-code-of-conduct
38 |     attributes:
39 |       label: "🏢 Have you read the Contributing Guidelines?"
40 |       options:
41 |         - label: "I have read and understood the rules in the [contribution guideline](https://github.com/Shariar-Hasan/QuoteVerse/blob/main/Contributing.md)"
42 |           required: true
43 | 
44 |   - type: dropdown
45 |     attributes:
46 |       label: Are you willing to work on this issue ?
47 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
48 |       options:
49 |         - "Yes I am willing to submit a PR!"
50 | 
51 |   - type: markdown
52 |     attributes:
53 |       value: |
54 |         Thanks for taking the time to fill out this bug! 
55 |         Please give a ⭐ star to the repository
56 |         Join us in github https://github.com/Shariar-Hasan
57 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-report.yml:
--------------------------------------------------------------------------------
 1 | name: 💡Feature Request
 2 | description: Create a feature request issue
 3 | title: "[FEATURE]: <your-issue-title>"
 4 | labels: ["feature", "hacktoberfest", "hacktoberfest-accepted"]
 5 | body:
 6 |   - type: markdown
 7 |     attributes:
 8 |       value: "## Hello Welcome to QuoteVerse issue section!"
 9 | 
10 |   - type: textarea
11 |     id: reason
12 |     attributes:
13 |       label: Description
14 |       description: A brief description of the feature, also include what you trying?
15 |       placeholder: Tell us what you found
16 |     validations:
17 |       required: true
18 | 
19 |   - type: textarea
20 |     id: screenshot
21 |     attributes:
22 |       label: Screenshots.
23 |       description: Please add screenshots if applicable
24 | 
25 |   - type: textarea
26 |     id: extrainfo
27 |     attributes:
28 |       label: Additional information
29 |       description: Is there anything else we should know about this issue?
30 |     validations:
31 |       required: false
32 | 
33 |   - type: checkboxes
34 |     id: terms
35 |     attributes:
36 |       label: Code of Conduct
37 |       description: Fill up the boxes carefully.
38 |       options:
39 |         - label: i have read the [contribution guideline](https://github.com/Shariar-Hasan/QuoteVerse/blob/main/Contributing.md)
40 |           required: true
41 |         - label: "I checked and didn't find similar issue"
42 |           required: true
43 | 
44 |   - type: dropdown
45 |     attributes:
46 |       label: Are you willing to work on this issue ?
47 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
48 |       options:
49 |         - "Yes I am willing to submit a PR!"
50 | 
51 |   - type: markdown
52 |     attributes:
53 |       value: |
54 |         Thanks for taking the time to fill out this bug! 
55 |         Please give a ⭐ star to the repository
56 |         Join us in github https://github.com/Shariar-Hasan
57 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/other-issue.yml:
--------------------------------------------------------------------------------
 1 | name: 🔀 Other issue
 2 | description: Found any other issue? You can use this one!
 3 | title: "[OTHER] <what do you have to add>"
 4 | labels: ["other", "hacktoberfest"]
 5 | body:
 6 |   - type: textarea
 7 |     id: description
 8 |     attributes:
 9 |       label: Description
10 |       description: A brief description of the issue, also include what you tried and what didn't work
11 |     validations:
12 |       required: true
13 |   - type: textarea
14 |     id: screenshots
15 |     attributes:
16 |       label: Screenshots
17 |       description: Please add screenshots if applicable
18 |     validations:
19 |       required: false
20 |   - type: textarea
21 |     id: extrainfo
22 |     attributes:
23 |       label: Additional information
24 |       description: Is there anything else we should know about this issue?
25 |     validations:
26 |       required: false
27 | 
28 |   - type: checkboxes
29 |     id: no-duplicate-issues
30 |     attributes:
31 |       label: "👀 Have you checked if this issue has been raised before?"
32 |       options:
33 |         - label: "I checked and didn't find similar issue"
34 |           required: true
35 | 
36 |   - type: checkboxes
37 |     id: read-code-of-conduct
38 |     attributes:
39 |       label: "🏢 Have you read the Contributing Guidelines?"
40 |       options:
41 |         - label: "I have read and understood the rules in the [contribution guideline](https://github.com/Shariar-Hasan/QuoteVerse/blob/main/Contributing.md)"
42 |           required: true
43 | 
44 |   - type: dropdown
45 |     attributes:
46 |       label: Are you willing to work on this issue ?
47 |       description: This is absolutely not required, but we are happy to guide you in the contribution process.
48 |       options:
49 |         - "Yes I am willing to submit a PR!"
50 | 
51 |   - type: markdown
52 |     attributes:
53 |       value: |
54 |         Thanks for taking the time to fill out this bug! 
55 |         Please give a ⭐ star to the repository
56 |         Join us in github https://github.com/Shariar-Hasan
57 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | # PULL REQUEST TEMPLATE
 2 | 
 3 | **My PR closes #issue_number_here** <!-- Mandary for feature and bug -->
 4 | 
 5 | ### 👨‍💻 What did you do ?
 6 | 
 7 | <!-- Explain your changes here -->
 8 | 
 9 | 
10 | 
11 | ### Note to reviewers
12 | 
13 | <!-- Add notes to reviewers if applicable else leave blank-->
14 | 
15 | 
16 | 
17 | # 📷 Screenshots <!-- Mandatory for bug fix and feature addition  -->
18 | 
19 | <!-- Add all the screenshots which support your changes. 
20 | If its not an UI issue, then type "Not an UI issue" -->
21 | 
22 | 
23 | ### ✔️ Check List (Check all the applicable boxes)
24 | 
25 | <!-- Mark all the applicable boxes. To mark the box as done follow the following conventions -->
26 | 
27 | <!--
28 | [x] - Correct; marked as done
29 | [X] - Correct; marked as done
30 | 
31 | [ ] - Not correct; marked as not done
32 | -->
33 | 
34 | - [] My code follows the code style of this project.
35 | - [] This PR does not contain plagiarized content.
36 | - [] The title and description of the PR is clear and explains the approach.
37 | - [] I have read the [contribution guideline](https://github.com/Shariar-Hasan/QuoteVerse/blob/main/Contributing.md) properly and following the criteria.
38 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | /node_modules
3 | node_modules


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 100,
3 |   "trailingComma": "all",
4 |   "tabWidth": 2,
5 |   "semi": true,
6 |   "singleQuote": false,
7 |   "bracketSameLine": false
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "liveSassCompile.settings.formats": [
 3 |     {
 4 |       "format": "expanded",
 5 |       "extensionName": ".css",
 6 |       "savePath": "/assets/css"
 7 |     }
 8 |   ],
 9 |   "liveSassCompile.settings.generateMap": false
10 | }
11 | 


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
  1 | # Contribution Guideline
  2 | 
  3 | Contributions are welcome and encouraged! If you want to add Quote to the QuoteVerse or Add any features or fix any bug.
  4 | ## TABLE of CONTENT
  5 | - [A - Z Pull Request Instruction](#make-sure-to-follow-the-instruction-below)
  6 | - [What contribution can you do](#what-can-you-do)
  7 |     - [Rules for Adding Quotes](#rules-for-adding-quotes)
  8 |     - [Rules for Adding Features](#rules-for-adding-features)
  9 |     - [Rules for Fixing Bugs](#rules-for-fixing-bugs)
 10 | 
 11 | 
 12 | 
 13 | ### Make sure to follow the instruction below:
 14 | 
 15 | - **Star the repository (`IMPORTANT`),**
 16 | - **Fork this repository.**
 17 | 
 18 |   Click on the fork button on the repository
 19 | - **Clone the repostory:**
 20 | 
 21 |   Go to your forked repositry, Click on the code button and copy your repositroy's `(.git)` link.
 22 | 
 23 |   clone the repository like this.
 24 | 
 25 | 
 26 |    ```sh
 27 |    git clone https://github.com/<your-username>/QuoteVerse.git
 28 |    cd QuoteVerse
 29 |    ```
 30 | 
 31 | - **Add your changes:**
 32 | 
 33 |   Add a Quote for website, fix bug or add new feature. You can see [here](#what-can-you-do) to get acknoledged about what can you do.
 34 | 
 35 | - **Check the changed files**
 36 | 
 37 |   ```sh
 38 |   git status
 39 |   ```
 40 | 
 41 | - **If all good, then Commit Your Changes**
 42 | 
 43 |   ```sh
 44 |   git add .
 45 |   git commit -m "<EXPLAIN-YOUR_CHANGES>"
 46 |   ```
 47 | 
 48 | - **Push to Your Forked Repository**
 49 | 
 50 |   ```sh
 51 |   git push
 52 |   ```
 53 | 
 54 | - **Create a Pull Request**
 55 | 
 56 |   Go to your forked repository on GitHub, and you should see a "Compare & pull request" button. Click on it to create a pull request (PR).
 57 | 
 58 |   Create a pull request with a clear description of your changes.
 59 | 
 60 |   For pull request add `feat:` in prefix of your PR title for adding features or adding quote and add `fix:` in prefix of your PR title for fixing any bugs. for example:
 61 | 
 62 |   ```
 63 |   fix: <your-bug-fixing-title>
 64 |   ```
 65 | 
 66 |   Your contribution will be reviewed, and upon approval, it will be merged into the main repository.
 67 | 
 68 |   Wait for the maintainer to review your PR.
 69 | 
 70 | ## What can you do
 71 | 
 72 | There can be many things you can do.
 73 | 
 74 | - You can add new quote. For this, you have to maintain [Quote Rules](#rules-for-adding-quotes) and follow the criteria
 75 | 
 76 | - You can add any feature in this project. [follow this to know](#rules-for-adding-features).
 77 | 
 78 | - You can fix bug in this project. [follow this to know](#rules-for-fixing-bugs).
 79 | 
 80 | ## Rules for adding Quotes
 81 | 
 82 | - The Quotes must be added in Quote.js file.
 83 | - You must maintain sequence.
 84 | - Make sure to follow the below example.
 85 |    ```javascript
 86 |    {
 87 |         "quote": "your-quote-text",
 88 |         "category": "quote-category",
 89 |         "author": "author-of-the-quote",
 90 |         "addedBy": "your-github-username",
 91 |         "translations": {
 92 |             "fr": "translated-quote-in-french",
 93 |             "es": "translated-quote-in-spanish",
 94 |             "ru": "translated-quote-in-russian",
 95 |             "it": "translated-quote-in-italian",
 96 |             "de": "translated-quote-in-german",
 97 |             "ja": "translated-quote-in-japanese",
 98 |             "zh": "translated-quote-in-chinese",
 99 |             "pt": "translated-quote-in-portuguese",
100 |             "ar": "translated-quote-in-arabic",
101 |             "hi": "translated-quote-in-hindi",
102 |             "mr": "translated-quote-in-marathi",
103 |             "bn": "translated-quote-in-bengali",
104 |             "kn": "translated-quote-in-kannada",
105 |             "ta": "translated-quote-in-tamil",
106 |             "te": "translated-quote-in-telugu",
107 |             "ml": "translated-quote-in-malayalam"
108 |         }
109 |     }
110 | 
111 |    ```
112 | - No need to add quote in JSON format.
113 | - In case you want to add a quote which is already in our list, then you can not add it.
114 | - You must add minimum of `5 Quotes` to get your PR considered for merge
115 | - Be carefull about long quote. Quote length must not exceed 30 words.
116 | - You must add valid Quote. you can not add a made up quote, we will manually review your added quotes. You can copy paste any quote from the internet, in your own concern.
117 | - While adding Quotes in pull request, add `feat:` in prefix of your PR title. 
118 | 
119 |    For example:
120 |    ```sh
121 |    feat: adding quotes of inspirational category
122 |    ```
123 | - Also you can add translations for already existing quotes in files in the same format because many quotes are not in the given format after multilingual support updation. Don't add any extra language.
124 | 
125 | ## Rules for adding features
126 | 
127 | - In this case you have to create an issue first decribing you feature
128 | - You have to get assigned for the issue and then you can work on it.
129 | - A suggestion template will be provided to you while creating the issue. (Fill it Carefully)
130 | - For creating an issue for feature, you have to put `[FEATURE] ` in prefix of your title of the issue. for example:
131 | 
132 |   ```
133 |   [FEATURE] <your-issue-title>
134 |   ```
135 | 
136 | - If you are not assigned, you are not eligible for making a PR. Which means, your PR will not get merged. This will not applicable for adding quotes. You dont have to be assigned to add quotes.
137 | 
138 | ## Rules for fixing bugs
139 | 
140 | - In this case you have to create an issue first decribing you which bug you want to fix
141 | - you have to give a screenshot about the bug.
142 | - You have to get assigned for the issue and then you can work on it.
143 | - A suggestion template will be provided to you while creating the issue. (Fill it Carefully)
144 | - For creating an issue for feature, you have to put `[BUG] ` in prefix of your title of the issue. for example:
145 | 
146 |   ```
147 |   [BUG] <your-issue-title>
148 |   ```
149 | 
150 | - If you are not assigned, you are not eligible for making a PR. Which means, your PR will not get merged.
151 | 
152 | ## Rules for Overall Pull Request
153 | 
154 | 
155 | - If you are not assigned, you are not eligible for making a PR. Which means, your PR will not get merged.
156 | 
157 | - In case you have been assigned to an issue before, you must mention the issue in your pull request. If you dont know how to do it, just type # in pull request and you will get an auto suggestion. write this like
158 |   ```
159 |   My PR closes issue #12
160 |   ```
161 |   it is mandatory for feature and bug.
162 | 
163 | - You must describe your changes a little bit to be understandable to the maintainer.
164 | 
165 | - It would be better if you add a screenshot to make the PR more organised and understandable.
166 | 
167 | 
168 | ### 🔴 Notice:
169 | 
170 | Please make sure that you have read the whole contribution guide to contribute.
171 | 


--------------------------------------------------------------------------------
/Contributors/contributors.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Contributors</title>
 7 |     <link rel="icon" type="image/x-icon" href="../assets/images/favicon/favicon.ico">
 8 |     <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon/favicon-16x16.png">
 9 |     <link rel="icon" type="image/png" sizes="32x32" href="../assets/images/favicon/favicon-32x32.png">
10 |     <link rel="icon" type="image/png" sizes="192x192" href="../assets/images/favicon/android-chrome-192x192.png">
11 |     <link rel="icon" type="image/png" sizes="512x512" href="../assets/images/favicon/android-chrome-512x512.png">
12 |     <link rel="stylesheet" href="./styles.css" />
13 | </head>
14 | <body>
15 |     <main class="w-full h-screen">
16 |         <div class="container">
17 |             <nav>
18 |                 <a href="../index.html" class="back-btn">
19 |                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512">
20 |                         <polyline points="244 400 100 256 244 112"
21 |                             style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px" />
22 |                         <line x1="120" y1="256" x2="412" y2="256"
23 |                             style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px" />
24 |                     </svg>
25 |                     <span style="margin-left: 5px">Back to Quotes</span>
26 |                 </a>
27 |                 <h2>Contributors</h2>
28 |             </nav>
29 | 
30 |             <!-- Search and Sort Section -->
31 |             <div class="search-sort-container">
32 |                 <div class="search-bar-container">
33 |                     <input type="text" id="search-bar" placeholder="Search contributors" onkeyup="searchContributors()">
34 |                 </div>
35 |                 <div class="sort-container">
36 |                     <select id="sort-options" onchange="sortContributors()">
37 |                         <option value="commits">Sort by Commits</option>
38 |                         <option value="name">Sort by Name</option>
39 |                     </select>
40 |                 </div>
41 |             </div>
42 | 
43 |             <div class="contributors-container" id="contributors-container"></div>
44 | 
45 |             <!-- Pagination Section -->
46 |             <div class="pagination-container">
47 |                 <button id="prev-page" class="pagination-btn">Previous</button>
48 |                 <span id="pagination-info">Page 1 of X</span>
49 |                 <button id="next-page" class="pagination-btn">Next</button>
50 |             </div>
51 |         </div>
52 |     </main>
53 | 
54 |     <hidden>
55 |         <a href="#" target="_blank" rel="noopener noreferrer" class="contributor-card">
56 |             <img src="" alt="img" />
57 |             <h4>
58 |                 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
59 |                     <path
60 |                         d="M8.10059 19.0137C8.10059 19.1113 7.98828 19.1895 7.84668 19.1895C7.68555 19.2041 7.57324 19.126 7.57324 19.0137C7.57324 18.916 7.68555 18.8379 7.82715 18.8379C7.97363 18.8232 8.10059 18.9014 8.10059 19.0137ZM6.58203 18.7939C6.54785 18.8916 6.64551 19.0039 6.79199 19.0332C6.91895 19.082 7.06543 19.0332 7.09473 18.9355C7.12402 18.8379 7.03125 18.7256 6.88477 18.6816C6.75781 18.6475 6.61621 18.6963 6.58203 18.7939ZM8.74023 18.7109C8.59863 18.7451 8.50098 18.8379 8.51562 18.9502C8.53027 19.0479 8.65723 19.1113 8.80371 19.0771C8.94531 19.043 9.04297 18.9502 9.02832 18.8525C9.01367 18.7598 8.88184 18.6963 8.74023 18.7109ZM11.9531 0C5.18066 0 0 5.1416 0 11.9141C0 17.3291 3.4082 21.9629 8.27637 23.5938C8.90137 23.7061 9.12109 23.3203 9.12109 23.0029C9.12109 22.7002 9.10645 21.0303 9.10645 20.0049C9.10645 20.0049 5.68848 20.7373 4.9707 18.5498C4.9707 18.5498 4.41406 17.1289 3.61328 16.7627C3.61328 16.7627 2.49512 15.9961 3.69141 16.0107C3.69141 16.0107 4.90723 16.1084 5.57617 17.2705C6.64551 19.1553 8.4375 18.6133 9.13574 18.291C9.24805 17.5098 9.56543 16.9678 9.91699 16.6455C7.1875 16.3428 4.43359 15.9473 4.43359 11.25C4.43359 9.90723 4.80469 9.2334 5.58594 8.37402C5.45898 8.05664 5.04395 6.74805 5.71289 5.05859C6.7334 4.74121 9.08203 6.37695 9.08203 6.37695C10.0586 6.10352 11.1084 5.96191 12.1484 5.96191C13.1885 5.96191 14.2383 6.10352 15.2148 6.37695C15.2148 6.37695 17.5635 4.73633 18.584 5.05859C19.2529 6.75293 18.8379 8.05664 18.7109 8.37402C19.4922 9.23828 19.9707 9.91211 19.9707 11.25C19.9707 15.9619 17.0947 16.3379 14.3652 16.6455C14.8145 17.0312 15.1953 17.7637 15.1953 18.9111C15.1953 20.5566 15.1807 22.5928 15.1807 22.9932C15.1807 23.3105 15.4053 23.6963 16.0254 23.584C20.9082 21.9629 24.2188 17.3291 24.2188 11.9141C24.2188 5.1416 18.7256 0 11.9531 0ZM4.74609 16.8408C4.68262 16.8896 4.69727 17.002 4.78027 17.0947C4.8584 17.1729 4.9707 17.207 5.03418 17.1436C5.09766 17.0947 5.08301 16.9824 5 16.8896C4.92188 16.8115 4.80957 16.7773 4.74609 16.8408ZM4.21875 16.4453C4.18457 16.5088 4.2334 16.5869 4.33105 16.6357C4.40918 16.6846 4.50684 16.6699 4.54102 16.6016C4.5752 16.5381 4.52637 16.46 4.42871 16.4111C4.33105 16.3818 4.25293 16.3965 4.21875 16.4453ZM5.80078 18.1836C5.72266 18.2471 5.75195 18.3936 5.86426 18.4863C5.97656 18.5986 6.11816 18.6133 6.18164 18.5352C6.24512 18.4717 6.21582 18.3252 6.11816 18.2324C6.01074 18.1201 5.86426 18.1055 5.80078 18.1836ZM5.24414 17.4658C5.16602 17.5146 5.16602 17.6416 5.24414 17.7539C5.32227 17.8662 5.4541 17.915 5.51758 17.8662C5.5957 17.8027 5.5957 17.6758 5.51758 17.5635C5.44922 17.4512 5.32227 17.4023 5.24414 17.4658Z"
61 |                         fill="black" />
62 |                 </svg>
63 |                 <span class="contributor-username"></span>
64 |                 <span class="contributor-commits"></span>
65 |             </h4>
66 |         </a>
67 |     </hidden>
68 | 
69 |     <script src="./script.js"></script>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/Contributors/script.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 |   const contributorsContainer = document.getElementById('contributors-container');
  3 |   const prevPageBtn = document.getElementById('prev-page');
  4 |   const nextPageBtn = document.getElementById('next-page');
  5 |   const paginationInfo = document.getElementById('pagination-info');
  6 |   const sortOptions = document.getElementById('sort-options');
  7 |   
  8 |   let pageCount = 1;
  9 |   let totalPages = 0;
 10 |   const itemsPerPage = 12; // Display 12 contributors per page
 11 |   let allContributors = []; // Store all contributors here
 12 |   let sortedContributors = []; // Store sorted contributors here
 13 | 
 14 |   // Load all contributors initially
 15 |   loadAllContributors();
 16 | 
 17 |   prevPageBtn.addEventListener('click', (e) => {
 18 |     e.preventDefault();
 19 |     if (pageCount > 1) {
 20 |       pageCount--;
 21 |       displayContributors(pageCount, contributorsContainer);
 22 |     }
 23 |   });
 24 | 
 25 |   nextPageBtn.addEventListener('click', (e) => {
 26 |     e.preventDefault();
 27 |     if (pageCount < totalPages) {
 28 |       pageCount++;
 29 |       displayContributors(pageCount, contributorsContainer);
 30 |     }
 31 |   });
 32 | 
 33 |   // Handle sort changes
 34 |   sortOptions.addEventListener('change', () => {
 35 |     applySort(); // Apply sorting when the user changes the sorting option
 36 |     pageCount = 1; // Reset to page 1 after sorting
 37 |     displayContributors(pageCount, contributorsContainer); // Display sorted contributors
 38 |   });
 39 | 
 40 |   // Function to fetch and store all contributors across all pages
 41 |   function loadAllContributors() {
 42 |     let currentPage = 1;
 43 |     const perPage = 100; // Fetch up to 100 contributors per API call
 44 |     const contributorsUrl = `https://api.github.com/repos/Shariar-Hasan/QuoteVerse/contributors`;
 45 | 
 46 |     function fetchContributorsPage(page) {
 47 |       fetch(`${contributorsUrl}?per_page=${perPage}&page=${page}`)
 48 |         .then(response => response.json())
 49 |         .then(data => {
 50 |           if (data.length > 0) {
 51 |             allContributors = allContributors.concat(data); // Append contributors to the list
 52 |             fetchContributorsPage(page + 1); // Fetch next page
 53 |           } else {
 54 |             sortedContributors = [...allContributors]; // Initially, sortedContributors is the same as allContributors
 55 |             totalPages = Math.ceil(allContributors.length / itemsPerPage);
 56 |             displayContributors(pageCount, contributorsContainer);
 57 |           }
 58 |         });
 59 |     }
 60 | 
 61 |     fetchContributorsPage(currentPage); // Start fetching from the first page
 62 |   }
 63 | 
 64 |   // Display contributors for the current page
 65 |   function displayContributors(pageCount, contributorsContainer) {
 66 |     contributorsContainer.innerHTML = ""; // Clear previous results
 67 | 
 68 |     const startIndex = (pageCount - 1) * itemsPerPage;
 69 |     const endIndex = pageCount * itemsPerPage;
 70 |     const contributorsToShow = sortedContributors.slice(startIndex, endIndex); // Get the sorted contributors for the current page
 71 | 
 72 |     contributorsToShow.forEach(contributor => {
 73 |       const contributorCard = getContributorCard();
 74 |       contributorCard.href = contributor.html_url;
 75 | 
 76 |       const img = contributorCard.querySelector('img');
 77 |       img.src = contributor.avatar_url;
 78 |       img.alt = contributor.login;
 79 | 
 80 |       contributorCard.querySelector('.contributor-username').textContent = contributor.login;
 81 |       contributorCard.querySelector('.contributor-commits').textContent =
 82 |         contributor.contributions + (contributor.contributions === 1 ? " commit" : " commits");
 83 | 
 84 |       contributorsContainer.appendChild(contributorCard);
 85 |     });
 86 | 
 87 |     paginationInfo.textContent = `Page ${pageCount} of ${totalPages}`;
 88 | 
 89 |     prevPageBtn.disabled = pageCount === 1;
 90 |     nextPageBtn.disabled = pageCount === totalPages;
 91 |   }
 92 | 
 93 |   // Apply sorting to all contributors before displaying
 94 |   function applySort() {
 95 |     const sortOption = sortOptions.value;
 96 | 
 97 |     if (sortOption === "commits") {
 98 |       sortedContributors.sort((a, b) => b.contributions - a.contributions); // Sort by contributions (descending)
 99 |     } else if (sortOption === "name") {
100 |       sortedContributors.sort((a, b) => a.login.localeCompare(b.login)); // Sort by name (ascending)
101 |     }
102 |   }
103 | 
104 |   function getContributorCard() {
105 |     return document.querySelector('.contributor-card').cloneNode(true);
106 |   }
107 | });
108 | 
109 | // Search and Sorting
110 | function searchContributors() {
111 |   let input = document.getElementById('search-bar').value.toLowerCase();
112 |   let contributorCards = document.getElementsByClassName('contributor-card');
113 | 
114 |   Array.from(contributorCards).forEach(card => {
115 |     let contributorName = card.querySelector('.contributor-username').textContent.toLowerCase();
116 |     if (contributorName.includes(input)) {
117 |       card.style.display = "";
118 |     } else {
119 |       card.style.display = "none";
120 |     }
121 |   });
122 | }
123 | 


--------------------------------------------------------------------------------
/Contributors/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Caveat&family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,300;1,100;1,300&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | *::-webkit-scrollbar {
 10 |     display: none;
 11 | }
 12 | 
 13 | /* Hide scrollbar for IE, Edge and Firefox */
 14 | * {
 15 |     -ms-overflow-style: none;  /* IE and Edge */
 16 |     scrollbar-width: none;     /* Firefox */
 17 | }
 18 | 
 19 | :root {
 20 |     --color: rgb(41, 41, 41);
 21 | }
 22 | 
 23 | a {
 24 |     color: inherit;
 25 |     text-decoration: none;
 26 | }
 27 | 
 28 | body {
 29 |     background: linear-gradient(30deg, #ffffff, #bebebe);
 30 |     background-size: 180% 180%;
 31 |     color: var(--color);
 32 |     font-family: "Lato", sans-serif;
 33 | }
 34 | 
 35 | .w-full {
 36 |     width: 100%;
 37 | }
 38 | 
 39 | .h-screen {
 40 |     height: 100vh;
 41 | }
 42 | 
 43 | .container {
 44 |     background: rgb(255, 255, 255);
 45 |     border: 10px solid black;
 46 |     border-radius: 25px;
 47 |     max-width: 1100px;
 48 |     width: 95%;
 49 |     margin: 0 auto;
 50 |     box-shadow: 0 0 80px 1px rgb(255 255 255 / 30%);
 51 |     text-align: center;
 52 |     transition: background-color 0.3s ease;
 53 |     position: relative; /* Change absolute to relative */
 54 |     top: 50%; 
 55 |     transform: translateY(-50%); /* Vertically center the container */
 56 |     height: 90vh;
 57 |     padding: 3rem;
 58 |     display: flex;
 59 |     flex-direction: column;
 60 |     justify-content: space-between;
 61 |     overflow: hidden; /* Ensure no overflow */
 62 | }
 63 | 
 64 | nav {
 65 |     display: flex;
 66 |     /* justify-content: space-between; */
 67 |     align-items: center;
 68 |     margin-bottom: 0.5rem;
 69 | }
 70 | 
 71 | nav a svg {
 72 |     stroke: var(--color);
 73 |     display: inline-block;
 74 |     vertical-align: bottom;
 75 | }
 76 | 
 77 | nav h2 {
 78 |     font-weight: bold;
 79 |     margin-left: 30%;
 80 | }
 81 | 
 82 | .contributors-container {
 83 |     height: calc(100vh - 200px); /* Adjust height for fixed container */
 84 |     width: 100%;
 85 |     overflow-y: auto; /* Enable scroll only for this section */
 86 |     display: grid;
 87 |     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Grid layout for contributors */
 88 |     gap: 1rem;
 89 |     padding-top: 1rem;
 90 |     justify-content: center;
 91 |     align-content: start;
 92 | }
 93 | 
 94 | .contributor-card {
 95 |     text-align: center;
 96 |     padding: 1rem;
 97 |     background-color: #D9D9D9;
 98 |     border-radius: 0.5rem;
 99 |     box-shadow: 0px 0px 8px #b0b0b0;
100 |     transition-duration: 250ms;
101 |     border: solid 1px #a0a0a0;
102 | }
103 | 
104 | .contributor-card:hover {
105 |     scale: 1.03; /* Smooth hover effect */
106 |     box-shadow: 2px 2px 5px 2px gray;
107 |     background-color: #E9E9E9;
108 | }
109 | 
110 | .contributor-card img {
111 |     width: 100px;
112 |     height: 100px;
113 |     border-radius: 50%;
114 |     display: inline-block;
115 |     margin-bottom: 0.5rem;
116 | }
117 | 
118 | .contributor-card h4 {
119 |     width: 130px;
120 | }
121 | 
122 | .contributor-card h4 span {
123 |     text-overflow: ellipsis;
124 |     overflow: hidden;
125 |     max-width: 90px;
126 |     text-align: left;
127 |     white-space: nowrap;
128 |     font-size: 14px;
129 | }
130 | 
131 | .contributor-card h4 svg, .contributor-card h4 span {
132 |     display: inline-block;
133 |     vertical-align: middle;
134 | }
135 | 
136 | main + hidden {
137 |     display: none;
138 | }
139 | 
140 | /* Pagination */
141 | .pagination-container {
142 |     width: 100%;
143 |     height: 3rem;
144 |     display: flex;
145 |     justify-content: center;
146 |     align-items: center;
147 |     gap: 0.5rem;
148 |     margin-top: 1.5rem;
149 | }
150 | 
151 | .pagination-btn {
152 |     padding: 0.5rem 0.75rem;
153 |     font-size: 0.75rem;
154 |     background-color: #272727;
155 |     color: #E9E9E9;
156 |     border: none;
157 |     border-radius: 3px;
158 |     cursor: pointer;
159 | }
160 | 
161 | .pagination-btn:hover {
162 |     background-color: #576574;
163 | }
164 | 
165 | .pagination-btn:disabled {
166 |     background-color: #a0a0a0;
167 |     cursor: not-allowed;
168 | }
169 | 
170 | #pagination-info {
171 |     font-size: 1rem;
172 |     font-weight: bold;
173 | }
174 | 
175 | /* Search and Sort Section */
176 | .search-sort-container {
177 |     display: flex;
178 |     justify-content: space-between;
179 |     align-items: center;
180 |     margin-top: 0.5rem;
181 |     margin-bottom: 1rem;
182 |     gap: 1rem;
183 | }
184 | 
185 | .search-bar-container, .sort-container {
186 |     flex: 1;
187 | }
188 | 
189 | #search-bar {
190 |     width: 100%;
191 |     padding: 0.75rem;
192 |     border: 1px solid #a0a0a0;
193 |     border-radius: 5px;
194 |     font-family: "Lato", sans-serif;
195 |     font-size: 1rem;
196 | }
197 | 
198 | #search-bar:focus {
199 |     border-color: #272727;
200 |     outline: none;
201 |     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
202 | }
203 | 
204 | #sort-options {
205 |     width: 100%;
206 |     padding: 0.75rem;
207 |     border: 1px solid #a0a0a0;
208 |     border-radius: 5px;
209 |     font-family: "Lato", sans-serif;
210 |     font-size: 1rem;
211 | }
212 | 
213 | #sort-options:focus {
214 |     border-color: #272727;
215 |     outline: none;
216 |     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
217 | }
218 | 


--------------------------------------------------------------------------------
/Duplicates.txt:
--------------------------------------------------------------------------------
  1 |   {
  2 |     quote:
  3 |       "Happiness is not something ready made. It comes from your own actions.",
  4 |     category: "Happiness",
  5 |     author: "Dalai Lama XIV",
  6 |     addedBy: "bemoierian",
  7 |   },
  8 | 
  9 | {
 10 |     quote:
 11 |       "Education is not the filling of a pail, but the lighting of a fire.",
 12 |     category: "Education",
 13 |     author: "William Butler Yeats",
 14 |     addedBy: "sohamhaldar",
 15 |   },
 16 | 
 17 |   {
 18 |     quote: "You are never too old to set another goal or to dream a new dream.",
 19 |     category: "Inspirational",
 20 |     author: "Malala Yousafzai",
 21 |     addedBy: "Maruf1075",
 22 |   },
 23 | 
 24 |   {
 25 |     quote: "It's not what happens to you, but how you react to it that matters.",
 26 |     category: "Motivational",
 27 |     author: "Epictetus",
 28 |     addedBy: "Hartz.Frequency"
 29 |   },
 30 | 
 31 |     {
 32 |     quote: "The only way to do great work is to love what you do.",
 33 |     category: "Motivational",
 34 |     author: "Steve Jobs",
 35 |     addedBy: "Shariar-Hasan",
 36 |   },
 37 | 
 38 |     {
 39 |     quote: "The only way to do great work is to love what you do.",
 40 |     category: "Motivation",
 41 |     author: "Steve Jobs",
 42 |     addedBy: "Vishnudas2003",
 43 |   },
 44 | 
 45 |     {
 46 |     quote:
 47 |       "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.",
 48 |     category: "Life",
 49 |     author: "Steve Jobs",
 50 |     addedBy: "Kapileswar-Moharana",
 51 |   },
 52 | 
 53 |     {
 54 |     quote: "The best way to predict the future is to invent it.",
 55 |     category: "Inspirational",
 56 |     author: "Alan Kay",
 57 |     addedBy: "Shariar-Hasan",
 58 |   },
 59 | 
 60 |     {
 61 |     quote: "The best way to predict the future is to invent it.",
 62 |     category: "Innovation",
 63 |     author: "Alan Kay",
 64 |     addedBy: "amanbind898",
 65 |   },
 66 | 
 67 |     {
 68 |     quote: "The only true wisdom is in knowing you know nothing.",
 69 |     category: "Philosophical",
 70 |     author: "Socrates",
 71 |     addedBy: "Shariar-Hasan",
 72 |   },
 73 | 
 74 |     {
 75 |     quote: "The only true wisdom is in knowing you know nothing.",
 76 |     category: "Philosophy",
 77 |     author: "Socrates	Philosophy",
 78 |     addedBy: "debsouryadatta",
 79 |   },
 80 | 
 81 |     {
 82 |     quote: "The only thing we have to fear is fear itself.",
 83 |     category: "Historical",
 84 |     author: "Franklin D. Roosevelt",
 85 |     addedBy: "Shariar-Hasan",
 86 |   },
 87 | 
 88 | 
 89 |     {
 90 |     quote: "The only thing we have to fear is fear itself.",
 91 |     category: "Motivation",
 92 |     author: "Franklin D. Roosevelt",
 93 |     addedBy: "Vishnudas2003",
 94 |   },
 95 | 
 96 |     {
 97 |     quote: "The only thing we have to fear is fear itself.",
 98 |     category: "Motivational",
 99 |     author: "Franklin D. Roosevelt",
100 |     addedBy: "Hartz.Frequency"
101 |   },
102 | 
103 |     {
104 |     quote: "Life is what happens when you're busy making other plans.",
105 |     category: "Life",
106 |     author: "Allen Sanders",
107 |     addedBy: "Shariar-Hasan",
108 |   },
109 | 
110 |     {
111 |     quote: "Life is what happens when you're busy making other plans.",
112 |     category: "Life",
113 |     author: "John Lennon",
114 |     addedBy: "iqbalcodes6602",
115 |   },
116 | 
117 |     {
118 |     quote: "Life is what happens when you're busy making other plans.",
119 |     category: "Life",
120 |     author: "Allen Sanders",
121 |     addedBy: "Shariar-Hasan",
122 |   },
123 | 
124 |     {
125 |     quote: "Life is what happens when you're busy making other plans.",
126 |     category: "Life",
127 |     author: "John Lennon",
128 |     addedBy: "iqbalcodes6602",
129 |   },
130 | 
131 |     {
132 |     quote: "Life is what happens when you're busy making other plans.",
133 |     category: "Life",
134 |     author: "John Lennon",
135 |     addedBy: "Vishnudas2003",
136 |   },
137 | 
138 |     {
139 |     quote: "Life is what happens when you're busy making other plans.",
140 |     category: "Life",
141 |     author: "John Lennon",
142 |     addedBy: "amanbind898",
143 |   },
144 | 
145 |     {
146 |     quote:
147 |       "The future belongs to those who believe in the beauty of their dreams.",
148 |     category: "Motivation",
149 |     author: "Eleanor Roosevelt",
150 |     addedBy: "Rekha Giri",
151 |   },
152 | 
153 |     {
154 |     quote:
155 |       "The future belongs to those who believe in the beauty of their dreams.",
156 |     category: "Inspirational",
157 |     author: "Eleanor Roosevelt",
158 |     addedBy: "ahsan-abc",
159 |   },
160 | 
161 |     {
162 |     quote:
163 |       "The future belongs to those who believe in the beauty of their dreams.",
164 |     category: "Hope",
165 |     author: "Eleanor Roosevelt",
166 |     addedBy: "debsouryadatta",
167 |   },
168 | 
169 |     {
170 |     quote: "The only way to predict the future is to create it.",
171 |     category: "Motivational",
172 |     author: "Peter Drucker",
173 |     addedBy: "ahsan-abc",
174 |   },
175 | 
176 |     {
177 |     quote:
178 |       "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.",
179 |     category: "Inspirational",
180 |     author: "Helen Keller",
181 |     addedBy: "Shariar-Hasan",
182 |   },
183 | 
184 |     {
185 |     quote:
186 |       "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.",
187 |     category: "Life",
188 |     author: "Helen Keller",
189 |     addedBy: "Rekha Giri",
190 |   },
191 | 
192 |     {
193 |     quote:
194 |       "Success is not final, failure is not fatal It is the courage to continue that counts.",
195 |     category: "Motivation",
196 |     author: "Winston Churchill",
197 |     addedBy: "Shariar-Hasan",
198 |   },
199 | 
200 |     {
201 |     quote:
202 |       "In the end, we will remember not the words of our enemies, but the silence of our friends.",
203 |     category: "Friendship",
204 |     author: "Martin Luther King Jr.",
205 |     addedBy: "Shariar-Hasan",
206 |   },
207 | 
208 |     {
209 |     quote:
210 |       "In the end, we will remember not the words of our enemies, but the silence of our friends.",
211 |     category: "Life",
212 |     author: "Martin Luther King Jr.",
213 |     addedBy: "Vishnudas2003",
214 |   },
215 | 
216 |     {
217 |     quote:
218 |       "In the end, we will remember not the words of our enemies, but the silence of our friends.",
219 |     category: "Friendship",
220 |     author: "Martin Luther King Jr.",
221 |     addedBy: "amanbind898",
222 |   },
223 | 
224 |     {
225 |     quote: "The best preparation for tomorrow is doing your best today.",
226 |     category: "Motivation",
227 |     author: "H. Jackson Brown Jr.",
228 |     addedBy: "Shariar-Hasan",
229 |   },
230 | 
231 |     {
232 |     quote: "Believe you can and you're halfway there.",
233 |     category: "Inspiration",
234 |     author: "Theodore Roosevelt",
235 |     addedBy: "Shariar-Hasan",
236 |   },
237 | 
238 |     {
239 |     quote: "It does not matter how slowly you go as long as you do not stop.",
240 |     category: "Persistence",
241 |     author: "Confucius",
242 |     addedBy: "Shariar-Hasan",
243 |   },
244 | 
245 |     {
246 |     quote:
247 |       "Description begins in the writer's imagination but should finish in the reader's.",
248 |     category: "Motivation",
249 |     author: "Stephen King",
250 |     addedBy: "Skb08",
251 |   },
252 | 
253 |     {
254 |     quote: "Half my life is an act of revision.",
255 |     category: "Motivation",
256 |     author: "John Irving",
257 |     addedBy: "Skb08",
258 |   },
259 | 
260 |     {
261 |     quote: "You can always edit a bad page. You can't edit a blank page",
262 |     category: "Motivation",
263 |     author: "Jodi Picoult",
264 |     addedBy: "Skb08",
265 |   },
266 | 
267 |     {
268 |     quote:
269 |       "Education is the most powerful weapon which you can use to change the world.",
270 |     category: "Inspirational",
271 |     author: "Nelson Mandela",
272 |     addedBy: "Shariar-Hasan",
273 |   },
274 | 
275 |     {
276 |     quote: "If you want to lift yourself up, lift up someone else.",
277 |     category: "Inspirational",
278 |     author: "Booker T. Washington",
279 |     addedBy: "Skb08",
280 |   },
281 | 
282 |     {
283 |     quote:
284 |       "You're braver than you believe, stronger than you seem, and smarter than you think.",
285 |     category: "Inspirational",
286 |     author: "A.A. Milne",
287 |     addedBy: "Skb08",
288 |   },
289 | 
290 |     {
291 |     quote: "History will be kind to me for I intend to write it.",
292 |     category: "Historical",
293 |     author: "Winston S. Churchill",
294 |     addedBy: "Skb08",
295 |   },
296 | 
297 |     {
298 |     quote: "Study the past and you would define the future",
299 |     category: "Historical",
300 |     author: "Confucius",
301 |     addedBy: "Skb08",
302 |   },
303 | 
304 |     {
305 |     quote: "A generation which ignores history has no past—and no future.",
306 |     category: "Historical",
307 |     author: "Robert A. Heinlein",
308 |     addedBy: "Skb08",
309 |   },
310 | 
311 |     {
312 |     quote: "Be the change that you wish to see in the world.",
313 |     category: "Philosophical",
314 |     author: "Mahatma Gandhi",
315 |     addedBy: "Skb08",
316 |   },
317 | 
318 |     {
319 |     quote:
320 |       "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
321 |     category: "Philosophical",
322 |     author: " Albert Einstein",
323 |     addedBy: "Skb08",
324 |   },
325 | 
326 |     {
327 |     quote: "Man is the only creature who refuses to be what he is.",
328 |     category: "Philosophical",
329 |     author: " Albert Camus",
330 |     addedBy: "Skb08",
331 |   },
332 | 
333 |    {
334 |     quote: "True friendship is a plant of slow growth…",
335 |     category: "Friendship",
336 |     author: "George Washington",
337 |     addedBy: "Skb08",
338 |   },
339 |   {
340 |     quote:
341 |       "I would rather walk with a friend in the dark than walk alone in the light.",
342 |     category: "Friendship",
343 |     author: "Helen Keller",
344 |     addedBy: "Skb08",
345 |   },
346 | 
347 |     {
348 |     quote:
349 |       "Success is not final, failure is not fatal: It is the courage to continue that counts.",
350 |     category: "Inspirational",
351 |     author: "Winston Churchill",
352 |     addedBy: "iqbalcodes6602",
353 |   },
354 | 
355 |     {
356 |     quote:
357 |       "Success is not final, failure is not fatal: It is the courage to continue that counts.",
358 |     category: "Persistence",
359 |     author: "Winston Churchill",
360 |     addedBy: "HarjjotSinghh",
361 |   },
362 | 
363 |    {
364 |     quote:
365 |       "Success is not final, failure is not fatal: It is the courage to continue that counts.",
366 |     category: "Persistence",
367 |     author: "Winston Churchill",
368 |     addedBy: "HarjjotSinghh",
369 |   },
370 | 
371 |     {
372 |     quote:
373 |       "Success is not final, failure is not fatal: it is the courage to continue that counts.",
374 |     category: "Inspirational",
375 |     author: "Winston Churchill",
376 |     addedBy: "Maruf1075",
377 |   },
378 | 
379 |     {
380 |     quote:
381 |       "Success is not final, failure is not fatal: It is the courage to continue that counts.",
382 |     category: "Motivation",
383 |     author: "Winston S. Churchill",
384 |     addedBy: "Vishnudas2003",
385 |   },
386 | 
387 |     {
388 |     quote:
389 |       "Success is not final, failure is not fatal: it is the courage to continue that counts.",
390 |     category: "Life",
391 |     author: "Winston Churchill",
392 |     addedBy: "Kapileswar-Moharana",
393 |   },
394 | 
395 |     {
396 |     quote:
397 |       "Success is not final, failure is not fatal: It is the courage to continue that counts.",
398 |     category: "Inspiration",
399 |     author: "Winston Churchill",
400 |     addedBy: "amanbind898",
401 |   },
402 | 
403 |     {
404 |     quote:
405 |       "The only limit to our realization of tomorrow will be our doubts of today.",
406 |     category: "Motivation",
407 |     author: "Franklin D. Roosevelt",
408 |     addedBy: "Vishnudas2003",
409 |   },
410 | 
411 |     {
412 |     quote: "Opportunities don't happen. You create them",
413 |     category: "Motivational",
414 |     author: "Chris Grosser",
415 |     addedBy: "dk172923",
416 |   },
417 | 
418 |     {
419 |     quote:
420 |       "Everyone fails sometimes and life isn't supposed to be fair, much less bend to your every whim.",
421 |     category: "Inspiration",
422 |     author: "David Goggins",
423 |     addedBy: "rohits-web03",
424 |   },
425 | 
426 |     {
427 |     quote: "Be kind, for everyone you meet is fighting a hard battle.",
428 |     category: "Life",
429 |     author: "Plato",
430 |     addedBy: "Rekha Giri",
431 |   },
432 | 
433 |     {
434 |     quote:
435 |       "Perseverance is not a long race; it is many short races one after another.",
436 |     category: "Persistence",
437 |     author: "Walter Elliot",
438 |     addedBy: "HarjjotSinghh",
439 |   },
440 | 
441 |     {
442 |     quote:
443 |       "Perseverance is not a long race; it is many short races one after another.",
444 |     category: "Persistence",
445 |     author: "Walter Elliot",
446 |     addedBy: "HarjjotSinghh",
447 |   },
448 | 
449 |     {
450 |     quote:
451 |       "Keep your head high, keep your chin up, and most importantly, keep smiling, because life's a beautiful thing and there's so much to smile about.",
452 |     category: "Persistence",
453 |     author: "Marilyn Monroe",
454 |     addedBy: "HarjjotSinghh",
455 |   },
456 |   {
457 |     quote: "Persistence guarantees that results are inevitable.",
458 |     category: "Persistence",
459 |     author: "Paramahansa Yogananda",
460 |     addedBy: "HarjjotSinghh",
461 |   },
462 | 
463 |     {
464 |     quote:
465 |       "The greatest glory in living lies not in never falling, but in rising every time we fall.",
466 |     category: "Motivation",
467 |     author: "Nelson Mandela",
468 |     addedBy: "Vishnudas2003",
469 |   },
470 | 
471 |     {
472 |     quote:
473 |       "The greatest glory in living lies not in never falling, but in rising every time we fall.",
474 |     category: "Life",
475 |     author: "Nelson Mandela",
476 |     addedBy: "Kapileswar-Moharana",
477 |   },
478 | 
479 |     {
480 |     quote: "Technology is best when it brings people together.",
481 |     category: "Technology",
482 |     author: "Matt Mullenweg",
483 |     addedBy: "amaan-p",
484 |   },
485 | 
486 |     {
487 |     quote: "Be the change you wish to see in the world.",
488 |     category: "Philosophical",
489 |     author: "Mahatma Gandhi",
490 |     addedBy: "ahsan-abc",
491 |   },
492 | 
493 |     {
494 |     quote: "The way to get started is to quit talking and begin doing.",
495 |     category: "Motivation",
496 |     author: "Walt Disney",
497 |     addedBy: "amanbind898",
498 |   },
499 | 
500 |     {
501 |     quote:
502 |       "The biggest risk is not taking any risk. In a world that is changing quickly, the only strategy that is guaranteed to fail is not taking risks.",
503 |     category: "Motivation",
504 |     author: "Mark Zuckerberg",
505 |     addedBy: "Vishnudas2003",
506 |   },
507 | 
508 |     {
509 |     quote:
510 |       "The biggest risk is not taking any risk. In a world that is changing quickly, the only strategy that is guaranteed to fail is not taking risks.",
511 |     category: "Political",
512 |     author: "Edmund Burke",
513 |     addedBy: "debsouryadatta",
514 |   },
515 |    {
516 |     quote:
517 |       "You are enough , just as you are.",
518 |     category: "Positive",
519 |     author: "Meghan Markle",
520 |     addedBy: "IamAayush2080",
521 |   }
522 |   


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) [2023] [Shariar Hasan]
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | ![Screenshot](./assets/images/QuoteVeerseText.png)
 4 | 
 5 | </div>
 6 | 
 7 | # QuoteVerse
 8 | 
 9 | ![GitHub repo size](https://img.shields.io/github/repo-size/Shariar-Hasan/QuoteVerse)
10 | ![GitHub last commit](https://img.shields.io/github/last-commit/Shariar-Hasan/QuoteVerse)
11 | ![GitHub issues](https://img.shields.io/github/issues/Shariar-Hasan/QuoteVerse)
12 | ![GitHub pull requests](https://img.shields.io/github/issues-pr/Shariar-Hasan/QuoteVerse)
13 | ![GitHub contributors](https://img.shields.io/github/contributors/Shariar-Hasan/QuoteVerse)
14 | ![GitHub stars](https://img.shields.io/github/stars/Shariar-Hasan/QuoteVerse?style=social)
15 | ![GitHub forks](https://img.shields.io/github/forks/Shariar-Hasan/QuoteVerse?style=social)
16 | 
17 | Quoteverse is a simple web application that generates random quotes to inspire, motivate, and enlighten. This open-source project aims to spread positivity though words.
18 | 
19 | ### 🥳🎉🎊Note : This Repository is under Hacktoberfest 2023
20 | 
21 | ### 🔴 For `hacktoberfest` you have to STAR The Repository⭐, Open a PULL REQUEST & Get it Merged! 🎉
22 | 
23 | 🗣 Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the challenge and earn a limited edition rewards!🚀
24 | 
25 | 📢 Register [here](https://hacktoberfest.com/) for Hacktoberfest and make four pull requests (PRs) between September 25th - October 31st to get awesome rewards! 🔥.
26 | 
27 | ## Table of Contents
28 | 
29 | - [Features](#features)
30 | - [Preview](#preview)
31 | - [Getting Started](#getting-started)
32 | - [How to Contribute](#how-to-contribute)
33 |   - [Add Quote](#add-quote)
34 | - [License](#license)
35 | - [Contributor List](#contributor-list)
36 | 
37 | ## 🗒️Features
38 | 
39 | - **Random Quote Generation:** Click `Generate Quote` button and get a new quote every time.
40 | - **Categories:** Choose from various categories such as Life, Motivation, Friendship, and more.
41 | - **Author Information:** Each quote includes the name of the author who said it.
42 | - **Contributor Information:** Each quote includes the name of the contributor who added the it.
43 | - **Open for Contributions:** This project is open for contributions. Feel free to add new quotes and categories to enrich the collection.
44 | - **Cool UI:** This project has a eye catching UI, with some interactive component. If you have better idea, you are open to contribute on UI features. See [How to Contibute](#🧩how-to-contribute) to this repository.
45 | - **Own Cdn:** This Project Provides Cdn for all the Quotes added.
46 |   ```
47 |   <script src="https://cdn.jsdelivr.net/gh/Shariar-Hasan/QuoteVerse/Quotes.js"></script>
48 |   ```
49 |   use this to get you apps global quotes.
50 | 
51 | ### `Star` the repository, if you found it helpful/wonderfull.
52 | 
53 | ## 🗒️Getting Started
54 | 
55 | To get started with Quoteverse, You can use QuoteVerse from [Live Site](https://shariar-hasan.github.io/QuoteVerse/) or follow these steps:
56 | 
57 | 1. **Clone the Repository:**
58 | 
59 |    ```sh
60 |    git clone https://github.com/Shariar-Hasan/QuoteVerse.git
61 |    cd QuoteVerse
62 |    ```
63 | 
64 | 2. **Open `index.html` in Your Browser:**
65 |    Simply open the `index.html` file in your preferred web browser to start using Quoteverse.
66 | 
67 | ## 🧩How to Contribute
68 | 
69 | - Go to [Contributing.md](Contributing.md) to have a brief idea about how to make a pull request and contribute to this repository.
70 | 
71 | #### follow all the steps to get your PR successfully merged
72 | 
73 | ## 🔑License
74 | 
75 | This project is licensed under the [MIT License](LICENSE)
76 | 
77 | ## 🛂Contributor List
78 | 
79 | Thanks to all the contributors:
80 | 
81 | <br/>
82 | 
83 | <a href="https://github.com/Shariar-Hasan/QuoteVerse/graphs/contributors">
84 |   <img src="https://contrib.rocks/image?repo=Shariar-Hasan/QuoteVerse" />
85 | </a>
86 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Caveat&family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,300;1,100;1,300&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | *::-webkit-scrollbar {
  9 |   display: none;
 10 | }
 11 | 
 12 | /* Hide scrollbar for IE, Edge and Firefox */
 13 | * {
 14 |   -ms-overflow-style: none; /* IE and Edge */
 15 |   scrollbar-width: none; /* Firefox */
 16 | }
 17 | a {
 18 |   color: none;
 19 |   text-decoration: none;
 20 |   color: whitesmoke;
 21 | }
 22 | 
 23 | body {
 24 |   background-color: #222f3e;
 25 |   background: linear-gradient(to left, #222f3e, #576574);
 26 |   color: rgb(41, 41, 41);
 27 |   font-family: "Lato", sans-serif;
 28 | }
 29 | 
 30 | .heart-icon {
 31 |   cursor: pointer;
 32 |   color: black; 
 33 |   font-variation-settings:
 34 |     'FILL' 0,  
 35 |     'wght' 400,
 36 |     'GRAD' 11,
 37 |     'opsz' 24;
 38 | }
 39 | 
 40 | .heart-icon.active {
 41 |   color: rgb(255, 30, 116);
 42 |   font-variation-settings:
 43 |     'FILL' 1,  
 44 |     'wght' 400,
 45 |     'GRAD' 11,
 46 |     'opsz' 24;
 47 | }
 48 | 
 49 | 
 50 | .w-full {
 51 |   width: 100%;
 52 | }
 53 | .h-screen {
 54 |   height: 100vh;
 55 | }
 56 | 
 57 | .container {
 58 |   background: rgb(255, 255, 255);
 59 |   border: 10px solid black; 
 60 |   border-radius: 25px;
 61 |   max-width: 1100px;
 62 |   width: 95%;
 63 |   margin: 0 auto;
 64 |   box-shadow: 0 0 80px 1px rgb(255 255 255 / 30%);
 65 |   text-align: center;
 66 |   transition: background-color 0.3s ease;
 67 |   position: relative;
 68 |   height: 90vh;
 69 |   padding: 3rem;
 70 |   display: flex;
 71 |   flex-direction: column;
 72 |   justify-content: space-between;
 73 | 
 74 | }
 75 | 
 76 | 
 77 | 
 78 | 
 79 | 
 80 | .container section {
 81 |   width: 100%;
 82 | }
 83 | 
 84 | main {
 85 |   display: flex;
 86 |   justify-content: center;
 87 |   align-items: center;
 88 |   flex-wrap: wrap;
 89 | }
 90 | 
 91 | .contribute a {
 92 |   color: #ffffff !important;
 93 |   font-size: 12px;
 94 | }
 95 | 
 96 | .contribute a i {
 97 |   font-size: 16px;
 98 |   margin-right: 5px;
 99 | }
100 | .ml-4{
101 |   margin-left: 4rem;
102 | }
103 | .quote {
104 |   text-align: center;
105 |   box-sizing: border-box;
106 |   padding: 10px 10px;
107 |   /* margin: 80px auto; */
108 |   margin: 80px auto 10px auto;
109 |   max-width: 1000px;
110 |   cursor: pointer;
111 |   position: relative;
112 |   /* height: 200px; */
113 | }
114 | 
115 | .quote-author {
116 |   font-size: 1rem;
117 |   font-weight: 300;
118 |   margin: 10px auto;
119 | }
120 | .quote-text {
121 |   font-family: "Exo 2", sans-serif;
122 |   font-size: 2.4rem;
123 |   font-weight: 300;
124 |   position: relative;
125 |   text-align: center;
126 |   transition: all 0.5s ease-in-out;
127 | }
128 | 
129 | .controllerSection {
130 |   margin-top: auto;
131 |   /* position: fixed; */
132 |   /* bottom: 0;
133 |   left: 50%; */
134 |   /* transform: translateX(-50%); */
135 | }
136 | .controller {
137 |   border-radius: 8px;
138 |   padding: 20px;
139 |   width: 60%;
140 |   margin: 10px auto;
141 |   position: relative;
142 |   overflow-y: scroll;
143 | 
144 | }
145 | 
146 | .controller .clip-box {
147 |   position: absolute;
148 |   left: 0;
149 |   right: 0;
150 |   z-index: 10;
151 |   width: -moz-fit-content;
152 |   width: fit-content;
153 |   margin: 0 auto;
154 |   padding: 5px 10px;
155 |   /* border: 3px solid #222f3e; */
156 | }
157 | 
158 | .controller .added-by-box {
159 |   width: 50%;
160 |   padding: 10px 0 10px 5px;
161 |   border-radius: 5px 5px 0 0;
162 | }
163 | 
164 | .controller .clip-box.added-by-box.animate {
165 |   -webkit-animation: text-slide-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
166 |     forwards;
167 |   animation: text-slide-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
168 | }
169 | .shareWith {
170 |   position: relative;
171 |   text-align: center;
172 |   width: 50%;
173 |   cursor: pointer;
174 | }
175 | 
176 | .share-buttons {
177 |   position: absolute;
178 |   bottom: 100%;
179 |   right: 0;
180 |   visibility: hidden;
181 |   opacity: 0;
182 |   transform: translateY(-20%);
183 |   transition: all 0.35s ease-in-out;
184 |   border-radius: 20px;
185 |   backdrop-filter: blur(14px);
186 |   border-top: 0.5px solid rgba(255, 255, 255, 0.515);
187 |   background-color: #262626;
188 |   padding: 15px;
189 | }
190 | 
191 | .share-buttons i {
192 |   transition: 0.5s;
193 | }
194 | 
195 | .share-buttons i:hover {
196 |   transform: translateY(-2px);
197 | }
198 | 
199 | .shareWith:hover .share-buttons {
200 |   visibility: visible;
201 |   opacity: 1;
202 |   transform: translateY(0);
203 | }
204 | .added-by-box a {
205 |   color: #2e2f2f;
206 |   font-weight: 700;
207 | }
208 | .added-by-box a:hover {
209 |   color: #0067dd;
210 | }
211 | .share-buttons {
212 |   margin-top: 6rem;
213 |   margin-bottom: 0.5rem;
214 |   display: flex;
215 |   flex-direction: row-reverse;
216 |   gap: 0.7rem;
217 |   justify-content: center;
218 |   align-items: end;
219 |   position: absolute;
220 |   bottom: 100%;
221 | }
222 | .text-right {
223 |   text-align: right;
224 | }
225 | .share-buttons div {
226 |   cursor: pointer;
227 | }
228 | .hoverToShare {
229 |   text-align: center;
230 |   display: inline-block;
231 |   padding: 10px 0;
232 |   margin-right: 10px;
233 | }
234 | /* all meadi queries here  */
235 | 
236 | @keyframes text-slide-up {
237 |   0% {
238 |     -webkit-transform: translateY(60px) scale(0.8);
239 |     transform: translateY(60px) scale(0.8);
240 |     opacity: 0;
241 |   }
242 |   100% {
243 |     -webkit-transform: translateY(0) scale(1);
244 |     transform: translateY(0) scale(1);
245 |     opacity: 1;
246 |   }
247 | }
248 | /* .contributor {
249 |   display: flex;
250 |   justify-content: center;
251 |   align-items: center;
252 | } */
253 | .controller .contribute1 {
254 |   width: 60%;
255 |   text-align: center;
256 |   display: inline-block;
257 |   margin-top:6px ;
258 |   padding: 10px 20px;
259 |   border-radius: 0 0 5px 5px;
260 |   border-top: 0.5px solid rgba(255, 255, 255, 0.515);
261 |   background-color: #262626;
262 | }
263 | 
264 | .controller .contribute2 {
265 |   width: 50%;
266 |   text-align: center;
267 |   display: inline-block;
268 |   padding: 10px 20px;
269 |   margin-top: 6px;
270 |   border-radius: 0 0 5px 5px;
271 |   border-top: 0.5px solid rgba(255, 255, 255, 0.515);
272 |   background-color: #262626;
273 | }
274 | 
275 | .contribute1:hover,
276 | .contribute2:hover {
277 |   background-color: #576574;
278 | }
279 | 
280 | .text-center {
281 |   text-align: center;
282 | }
283 | .text-left {
284 |   margin-left: 5px;
285 |   text-align: left;
286 | }
287 | .px-3 {
288 |   padding: 0 5px;
289 | }
290 | .controller .clip-box .added-by {
291 |   color: rgb(49, 155, 248);
292 | }
293 | 
294 | .controller-wrapper {
295 |   position: relative;
296 |   z-index: 10;
297 |   text-align: center;
298 | }
299 | 
300 | 
301 | .controller-group button,
302 | .controller-group select {
303 |   padding: 1em 0.5em 1em 0.5em;
304 |   text-align: center;
305 |   border: none;
306 |   outline: none;
307 |   width: 100%;
308 |   cursor: pointer;
309 |   background-color: inherit;
310 |   color: whitesmoke;
311 |   transition: all 0.15s ease-in-out;
312 |   font-weight: bold;
313 | }
314 | .controller-group {
315 |   display: flex;
316 |   flex-direction: row;
317 |   background-color: #262626;
318 |   overflow: hidden;
319 |   border-radius: 9px;
320 | }
321 | .controller-group button:hover,
322 | .controller-group select:hover {
323 |   background-color: #576574;
324 | }
325 | 
326 | .controller-group button {
327 |   border-radius: 9px 0 0 9px;
328 |   border-right: 1px solid rgba(245, 245, 245, 0.462);
329 | }
330 | 
331 | .controller-group button:active {
332 |   transform: scale(0.991);
333 |   transform-origin: right;
334 | }
335 | 
336 | .controller-group select {
337 |   border-radius: 0 9px 9px 0;
338 |   border-left: 3px solid #1d2938;
339 | }
340 | 
341 | .capitalise {
342 |   text-transform: capitalize;
343 | }
344 | 
345 | body {
346 |   font-family: Arial, sans-serif;
347 |   text-align: center;
348 |   margin: 0;
349 |   padding: 0;
350 |   display: flex;
351 |   justify-content: center;
352 |   align-items: center;
353 |   /* height: 100vh; */
354 |   background: linear-gradient(30deg, #ffffff, #bebebe);
355 |   background-size: 180% 180%;
356 |   animation: gradient-animation 15s ease infinite;
357 | }
358 | 
359 | @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
360 |   .container {
361 |     -webkit-backdrop-filter: blur(50px);
362 |     backdrop-filter: blur(50px);
363 |   }
364 | }
365 | .shareAndcontribute {
366 |   display: flex;
367 |   justify-content: space-between;
368 |   flex-direction: row;
369 |   align-items: end;
370 | }
371 | .theme_changer_button {
372 |   position: absolute;
373 |   top: 50%;
374 |   left: 0;
375 |   transform: translateY(-50%);
376 |   padding: 5px;
377 |   background-color: #272727;
378 |   border-radius: 0 9px 9px 0;
379 |   display: flex;
380 |   align-items: center;
381 | }
382 | 
383 | #color_picker {
384 |   margin-right: 5px;
385 |   border-radius: 50%; /* Make the color picker button round */
386 |   width: 20px;
387 |   height: 20px;
388 |   padding: 0;
389 |   margin: 0;
390 |   cursor: pointer;
391 |   appearance: none;
392 |   border: none;
393 | }
394 | 
395 | .button-text {
396 |   color: white;
397 |   margin-left: 2px;
398 |   margin-right: 10px;
399 | }
400 | 
401 | .theme_changer_button input[type="color"]::-webkit-color-swatch-wrapper {
402 |   padding: 0; /* Remove padding around the color picker */
403 |   border: none; /* Remove the border around the color picker */
404 | }
405 | 
406 | .theme_changer_button input[type="color"]::-webkit-color-swatch {
407 |   border: none; /* Remove the border around the color picker */
408 | }
409 | 
410 | 
411 | 
412 | .theme_changer_button div input {
413 |   display: none;
414 | }
415 | 
416 | .theme_changer_button div label {
417 |   display: block;
418 |   margin: 10px 7px;
419 |   width: 25px;
420 |   height: 25px;
421 |   border-radius: 50%;
422 | }
423 | 
424 | .theme_changer_button div input:checked ~ label,
425 | .theme_changer_button div label:hover {
426 |   outline: 3px solid rgba(0, 0, 0, 0.284);
427 |   cursor: pointer;
428 | }
429 | 
430 | .theme_changer_button div:nth-child(1) label {
431 |   background-color: rgba(237, 237, 237, 1);
432 | }
433 | 
434 | .theme_changer_button div:nth-child(2) label {
435 |   background-color: rgb(57, 150, 255);
436 | }
437 | 
438 | .theme_changer_button div:nth-child(3) label {
439 |   background-color: rgb(154 72 89);
440 | }
441 | 
442 | .theme_changer_button div:nth-child(4) label {
443 |   background-color: rgb(36, 183, 158);
444 | }
445 | 
446 | .theme_changer_button div:last-child label {
447 |   background-color: rgb(255, 253, 145);
448 | }
449 | 
450 | /* copy button */
451 | 
452 | .share-buttons .icon {
453 |   background: #1a232d;
454 |   color: #fff;
455 |   font-size: 16px;
456 |   border: none;
457 |   outline: none;
458 |   border-radius: 10px;
459 |   cursor: pointer;
460 |   transition: opacity 0.5s ease-in-out transform 0.3s;
461 | }
462 | 
463 | .share-buttons .copy-to-clipboard:active .icon {
464 |   background: #576574;
465 | }
466 | 
467 | .share-buttons .copy-to-clipboard .icon.visible {
468 |   display: inline-block;
469 | }
470 | 
471 | .share-buttons .copy-to-clipboard .icon.hidden {
472 |   display: none;
473 | }
474 | 
475 | .share-buttons .copy-to-clipboard .check-icon {
476 |   color: #00ff33;
477 | }
478 | 
479 | .share-buttons .copy-to-clipboard .cross-icon {
480 |   color: #c70039;
481 | }
482 | 
483 | .fade-out {
484 |   opacity: 0;
485 | }
486 | 
487 | /* copy quote tooltip */
488 | #copy_tooltip {
489 |   display: block;
490 |   font-size: 80%;
491 |   position: absolute;
492 |   background: #90ee90;
493 |   color: #000;
494 |   padding: 0.5rem 1rem;
495 |   border-radius: 4px;
496 |   top: 0;
497 |   left: 20px;
498 |   right: 20px;
499 |   margin: auto;
500 |   opacity: 0;
501 |   width: 140px;
502 | }
503 | #copy_tooltip.active {
504 |   -webkit-animation: slide-up 0.15s cubic-bezier(0.51, 0.92, 0.265, 1.55) both;
505 |   animation: slide-up 0.15s cubic-bezier(0.51, 0.92, 0.265, 1.55) both;
506 | }
507 | #copy_tooltip.inactive {
508 |   -webkit-animation: slide-up 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse
509 |     both;
510 |   animation: slide-up 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
511 | }
512 | #copy_tooltip:after {
513 |   content: "";
514 |   position: absolute;
515 |   top: 98%;
516 |   left: 50%;
517 |   margin-left: -8px;
518 |   width: 0;
519 |   height: 0;
520 |   border-top: 8px solid #90ee90;
521 |   border-right: 8px solid transparent;
522 |   border-left: 8px solid transparent;
523 | }
524 | @-webkit-keyframes slide-up {
525 |   0% {
526 |     -webkit-transform: translateY(0) scale(0.8);
527 |     transform: translateY(0) scale(0.8);
528 |     opacity: 0;
529 |   }
530 |   100% {
531 |     -webkit-transform: translateY(-35px) scale(1);
532 |     transform: translateY(-35px) scale(1);
533 |     opacity: 1;
534 |   }
535 | }
536 | @keyframes slide-up {
537 |   0% {
538 |     -webkit-transform: translateY(0) scale(0.8);
539 |     transform: translateY(0) scale(0.8);
540 |     opacity: 0;
541 |   }
542 |   100% {
543 |     -webkit-transform: translateY(-35px) scale(1);
544 |     transform: translateY(-35px) scale(1);
545 |     opacity: 1;
546 |   }
547 | }
548 | 
549 | .animate-text {
550 |   display: inline-block;
551 |   overflow: hidden;
552 |   animation: 0.3s swift-up ease-in-out forwards;
553 | }
554 | 
555 | i {
556 |   font-style: normal;
557 |   position: relative;
558 |   top: 2.7rem;
559 |   animation: 0.5s swift-up ease-in-out forwards;
560 | }
561 | 
562 | @keyframes swift-up {
563 |   to {
564 |     top: 0;
565 |   }
566 | }
567 | 
568 | 
569 | #share-button {
570 |   margin: 4px;
571 |   background-color: #4caf50; /* Green background */
572 |   color: white; /* White text */
573 |   border: none;
574 |   padding: 12px 24px; /* Padding for a medium-sized button */
575 |   font-size: 16px;
576 |   cursor: pointer;
577 |   border-radius: 8px; /* Rounded corners */
578 |   gap: 8px; /* Space between text and icon */
579 |   transition: background-color 0.3s, transform 0.2s; /* Smooth hover and click effects */
580 | }
581 | 
582 | #share-button:hover {
583 |   background-color: #45a049; /* Darker green on hover */
584 | }
585 | 
586 | #share-button:active {
587 |   transform: scale(0.98); /* Slightly shrink when clicked */
588 | }
589 | 
590 | .hoverToShare .fa-share {
591 |   transition: transform 0.3s ease-in-out;
592 | }
593 | 
594 | #share-button:hover .fa-share {
595 |   transform: rotate(360deg); /* Spin the share icon on hover */
596 | }
597 | 
598 | 
599 | .icon-list {
600 |   display: flex;  /* Arrange items in a row */
601 |   list-style: none;  /* Remove bullet points */
602 |   padding: 0;  /* Remove padding */
603 |   margin: 0;  /* Remove margin */
604 | }
605 | 
606 | .icon-list li {
607 |   margin-right: 10px;  /* Add spacing between icons */
608 | }
609 | 
610 | .icon-list li:last-child {
611 |   margin-right: 0;  /* Remove right margin for the last item */
612 | }
613 | 
614 | 
615 | 
616 | 
617 | /* Centered popup container */
618 | .popup {
619 |   position: fixed; /* Fixed position so it stays centered when scrolling */
620 |   top: 50%;
621 |   left: 50%;
622 |   transform: translate(-50%, -50%); /* Center the popup */
623 |   background-color: white;
624 |   padding: 20px;
625 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
626 |   border-radius: 8px;
627 |   z-index: 1000;
628 |   width: 250px; /* Adjust the width */
629 |   display: none; /* Hidden by default */
630 | }
631 | 
632 | /* Popup list */
633 | .popup ul {
634 |   list-style-type: none;
635 |   margin: 0;
636 |   padding: 0;
637 | }
638 | 
639 | /* Each share link */
640 | .popup ul li {
641 |   margin: 10px 0;
642 |   text-align: center;
643 | }
644 | 
645 | .popup ul li a {
646 |   display: flex;
647 |   align-items: center;
648 |   justify-content: center;
649 |   text-decoration: none;
650 |   font-size: 16px;
651 |   color: #333; /* Default text color */
652 |   padding: 10px 15px;
653 |   border-radius: 8px;
654 |   transition: background-color 0.3s ease;
655 | }
656 | 
657 | /* Style for each share icon */
658 | .popup ul li a i {
659 |   margin-right: 10px;
660 |   color: #0077b5; /* Change to the default color for the platform */
661 |   transition: transform 0.3s ease;
662 | }
663 | 
664 | /* Hover effect for the share links */
665 | .popup ul li a:hover {
666 |   background-color: #f0f0f0;
667 |   cursor: pointer;
668 | }
669 | 
670 | .popup ul li a:hover i {
671 |   transform: scale(1.1);
672 | }
673 | 
674 | /* Specific platform colors on hover */
675 | .popup ul li a[data-platform="facebook"] i {
676 |   color: #4267B2;
677 | }
678 | 
679 | .popup ul li a[data-platform="telegram"] i {
680 |   color: #0088cc;
681 | }
682 | 
683 | .popup ul li a[data-platform="twitter"] i {
684 |   color: #1DA1F2;
685 | }
686 | 
687 | .popup ul li a[data-platform="linkedin"] i {
688 |   color: #0077B5;
689 | }
690 | 
691 | .popup ul li a[data-platform="weixin"] i {
692 |   color: #1AAD19;
693 | }
694 | 
695 | /* Optional: mobile responsiveness */
696 | @media screen and (max-width: 600px) {
697 |   .popup {
698 |     width: 200px;
699 |     padding: 15px;
700 |   }
701 | 
702 |   .popup ul li a {
703 |     font-size: 14px;
704 |     padding: 8px 10px;
705 |   }
706 | 
707 |   .popup ul li a i {
708 |     margin-right: 5px;
709 |     font-size: 20px;
710 |   }
711 | }
712 | 
713 | 
714 | .language-selector {
715 |   position: absolute;
716 |   top: 20px;
717 |   left: 50%;
718 |   transform: translateX(-50%);
719 |   z-index: 10;
720 |   background-color: #fff;
721 |   padding: 10px;
722 |   border-radius: 5px;
723 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
724 | }
725 | 
726 | 
727 | 


--------------------------------------------------------------------------------
/assets/css/styleBelow500.css:
--------------------------------------------------------------------------------
  1 | @media screen and (max-width: 500px) {
  2 |   /* Adjust button and select width */
  3 |   .controller-group button,
  4 |   .controller-group select {
  5 |     width: 100%;
  6 |     padding: 8px;
  7 |   }
  8 | 
  9 |   /* Make controller full-width and adjust padding */
 10 |   .controller {
 11 |     width: 100%;
 12 |     padding: 10px;
 13 |   }
 14 | 
 15 |   /* Adjust container padding and border size */
 16 |   .container {
 17 |     padding: 2rem 1rem;
 18 |     border: 10px solid #272727;
 19 |     height: auto; /* Adjust height to auto for better fit */
 20 |   }
 21 | 
 22 |   /* Adjust quote text size */
 23 |   .quote-text {
 24 |     font-size: 1.3rem;
 25 |   }
 26 | 
 27 |   /* Adjust quote margins */
 28 |   .quote {
 29 |     margin: 0;
 30 |     padding: 40px 0 0 0;
 31 |   }
 32 | 
 33 |   /* Adjust author text size */
 34 |   .quote-author {
 35 |     font-size: 0.8rem;
 36 |   }
 37 | 
 38 |   /* Make hover-to-share text smaller */
 39 |   .hoverToShare,
 40 |   .added-by-box {
 41 |     font-size: smaller;
 42 |   }
 43 | 
 44 |   /* Adjust button font size */
 45 |   .controller-group button,
 46 |   .controller-group select {
 47 |     font-size: small;
 48 |     font-weight: 400;
 49 |   }
 50 | 
 51 |   /* Ensure controller section takes full width */
 52 |   .controllerSection {
 53 |     width: 100%;
 54 |   }
 55 | 
 56 |   /* Position theme changer button */
 57 |   .theme_changer_button {
 58 |     position: fixed;
 59 |     top: 0px;
 60 |     left: 50%;
 61 |     transform: translateX(-50%);
 62 |     display: flex;
 63 |     border-radius: 0 0 9px 9px;
 64 |   }
 65 | 
 66 |   /* Adjust theme changer button label size */
 67 |   .theme_changer_button div label {
 68 |     margin: 7px 9px;
 69 |     width: 20px;
 70 |     height: 20px;
 71 |   }
 72 | 
 73 |   /* Contribute button adjustments */
 74 |   .controller .contribute1 {
 75 |     width: 90%;
 76 |     font-size: x-small;
 77 |   }
 78 | 
 79 |   .controller .contribute2 {
 80 |     width: 60%;
 81 |     font-size: x-small;
 82 |   }
 83 | 
 84 |   /* Ensure pagination buttons and select options fit mobile view */
 85 |   .pagination-container {
 86 |     flex-direction: column;
 87 |     gap: 10px;
 88 |   }
 89 | 
 90 |   /* Adjust padding for search and sort inputs */
 91 |   #search-bar, #sort-options {
 92 |     padding: 0.5rem;
 93 |     font-size: 0.9rem;
 94 |   }
 95 | 
 96 |   /* Adjust contributor card size */
 97 |   .contributors-container {
 98 |     display: flex;
 99 |     flex-wrap: wrap;
100 |     justify-content: space-between; /* Space between cards */
101 |     gap: 1rem;
102 |   }
103 |   
104 |   .contributor-card {
105 |     width: 45%; /* Take up 45% of the container's width for 2 cards per row */
106 |     margin-bottom: 1rem;
107 |   }
108 | 
109 |   .contributor-card img {
110 |     width: 75px; /* Smaller avatar */
111 |     height: 75px;
112 |   }
113 | 
114 |   .contributor-card h4 {
115 |     font-size: 0.9rem;
116 |     text-align: center;
117 |   }
118 | 
119 |   /* Adjust font size in pagination */
120 |   .pagination-container, .pagination-info {
121 |     font-size: 0.85rem;
122 |   }
123 | 
124 |   /* Adjust spacing between navigation and header elements */
125 |   nav {
126 |     flex-direction: column;
127 |     gap: 10px;
128 |   }
129 | 
130 |   nav a svg {
131 |     width: 18px; /* Reduce back arrow size */
132 |     height: 18px;
133 |   }
134 | 
135 |   /* Ensure sorting and pagination buttons don't overflow */
136 |   .controller-group, .search-sort-container {
137 |     flex-direction: column;
138 |     gap: 0.5rem;
139 |   }
140 | 
141 |   /* Center the content properly */
142 |   .container {
143 |     max-width: 100%;
144 |   }
145 | }
146 | 


--------------------------------------------------------------------------------
/assets/images/QuoteVeerseText.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/QuoteVeerseText.png


--------------------------------------------------------------------------------
/assets/images/QuoteVerse-Cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/QuoteVerse-Cover.png


--------------------------------------------------------------------------------
/assets/images/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/assets/images/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/assets/images/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/assets/images/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/assets/images/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/assets/images/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/assets/images/favicon/favicon.ico


--------------------------------------------------------------------------------
/assets/js/lang.js:
--------------------------------------------------------------------------------
 1 |  // Initialize i18next
 2 | const langUrl = '/assets/lang';  // Adjust path to your language files
 3 | 
 4 | i18next
 5 |   .use(i18nextHttpBackend)
 6 |   .use(i18nextBrowserLanguageDetector)
 7 |   .init({
 8 |     lng: 'en',
 9 |     fallbackLng: 'en',
10 |     debug: true,
11 |     detection: {
12 |         // Disable detection options
13 |         order: [],
14 |         caches: [] // Do not cache language preferences
15 |     },
16 |     backend: {
17 |       loadPath: `${langUrl}/{{lng}}.json`,  // Path to your JSON language files
18 |     }
19 |   }, function (err, t) {
20 |     if (err) return console.error(err);
21 | 
22 |     // Optional: initialize jQuery i18next for translation with data-i18n attributes
23 |     jqueryI18next.init(i18next, $, {
24 |       useOptionsAttr: true  // Use 'data-i18n' attributes for translation
25 |     });
26 | 
27 |     // Apply the translation to the entire body (if using jQuery)
28 |     $('body').localize();
29 |   });
30 | 
31 | 
32 | 
33 | // Language switcher
34 | document.getElementById('languageSwitcher').addEventListener('change', function () {
35 |     const selectedLanguage = $(this).val();
36 |     console.log("lang",selectedLanguage);
37 |     i18next.changeLanguage(selectedLanguage,function(err,t){
38 |         if (err) return console.error(err);
39 |         $('body').localize();
40 |     });
41 | });
42 | 


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
  1 | // when dom fully loaded
  2 | document.addEventListener("DOMContentLoaded", () => {
  3 |   // all the required dom element selected
  4 |   const generateQuoteBtn = document.getElementById("generateQuoteBtn");
  5 |   const selectedCategoryTag = document.getElementById("selectedCategoryTag");
  6 |   const addedByTag = document.getElementById("addedByTag");
  7 |   const quoteTextTag = document.getElementById("quoteTextTag");
  8 |   const quoteAuthorTag = document.getElementById("quoteAuthorTag");
  9 |   const shareBtns = document.getElementById("shareBtns");
 10 |   const copyToClipboardButton = document.querySelector(".copy-to-clipboard");
 11 |   const container = document.querySelector(".container");
 12 |   const quoteSection = document.querySelector(".quote");
 13 |   const color_selection = document.querySelectorAll(".select_color");
 14 |   const heartIcon = document.querySelector(".heart-icon");
 15 | 
 16 |   // overall global variable to use in all function
 17 | 
 18 |   var color_array = [
 19 |     "rgba(237, 237, 237, 1)",
 20 |     "rgb(57 150 255 / 90%)",
 21 |     "rgb(154 72 89/ 70%)",
 22 |     "rgb(36 183 158 / 90%)",
 23 |     "rgb(255 255 145 / 70%)",
 24 |   ];
 25 |   let selectedQuoteText = "";
 26 |   let selectedQuoteAuthor = "";
 27 |   let selectedQuoteAddedBy = "";
 28 |   let selectedCategory = "";
 29 |   let webAddress = "https://quote-verse.netlify.app/";
 30 |   let themeColor = color_array[0];
 31 | 
 32 |   let currentQuoteIndex = -1; // Variable to store the index of the currently selected quote
 33 |   // categorically selected quotes
 34 |   var quotes = window.quotes
 35 |   .sort(() => Math.random() - 0.6)
 36 |   .filter(
 37 |     (quote) =>
 38 |       isIncluded(quote.category, selectedCategory) ||
 39 |       isIncluded(selectedCategory, "Random")
 40 |   );
 41 | 
 42 |   // update the themeColor when the color picker changes
 43 | document.getElementById("color_picker").addEventListener("input", (event) => {
 44 |   themeColor = event.target.value;
 45 |   container.style.background = themeColor;
 46 | 
 47 |   const brightness = getBrightness(themeColor);
 48 |   if (brightness < 128) {
 49 |     container.style.color = "white";
 50 |   } else {
 51 |     container.style.color = "black";
 52 |   }
 53 |   setCanvas();
 54 | });
 55 | 
 56 | heartIcon.addEventListener('click', function () {
 57 |   let quote = quoteTextTag.textContent.trim(); 
 58 |   console.log(quote);
 59 |   console.log("##############################");
 60 |   let quoteInd = -1;
 61 | 
 62 |   for (let i = 0; i < window.quotes.length; i++) {
 63 |     if ('"' + window.quotes[i].quote + '"' === quote) {  
 64 |       quoteInd = i;
 65 |       break;
 66 |     }
 67 |   }
 68 | 
 69 |   let isLiked = JSON.parse(localStorage.getItem(`quote-liked-${quoteInd}`)) || false;
 70 | 
 71 |   isLiked = !isLiked;
 72 | 
 73 |   if (isLiked) {
 74 |     this.classList.add('active'); 
 75 |     localStorage.setItem(`quote-liked-${quoteInd}`, JSON.stringify(true));
 76 |   } else {
 77 |     this.classList.remove('active'); 
 78 |     localStorage.removeItem(`quote-liked-${quoteInd}`);
 79 |   }
 80 | 
 81 |   console.log("Heart clicked on quote index: ", quoteInd, "Liked:", isLiked);
 82 | });
 83 | 
 84 | 
 85 | 
 86 | //calculating the brightness of the color picked
 87 | function getBrightness(hexColor) {
 88 |   const r = parseInt(hexColor.slice(1, 3), 16);
 89 |   const g = parseInt(hexColor.slice(3, 5), 16);
 90 |   const b = parseInt(hexColor.slice(5, 7), 16);
 91 |   return (r * 299 + g * 587 + b * 114) / 1000;
 92 | }
 93 | 
 94 | 
 95 |   // setting categories options
 96 |   const setCategories = () => {
 97 |     const quotes = window.quotes;
 98 | 
 99 |     //   getting all the categories
100 |     const categories = [...new Set(quotes.map((quote) => quote.category))];
101 | 
102 | 
103 |     // sort categories alphabetically
104 |     categories.sort();
105 |     categories.unshift("Random");
106 | 
107 |     //setting options
108 |     categories.forEach((category) => {
109 |       const option = new Option(
110 |         category,
111 |         category,
112 |         isIncluded(category, "Random")
113 |       );
114 |       selectedCategoryTag.appendChild(option);
115 |     });
116 |   };
117 | 
118 |   // setting innerHTML of the selector
119 |   const setValue = (selector, value) => {
120 |     selector.innerHTML = value;
121 |   };
122 | 
123 |   // set up the selected quote
124 |   const setQuote = (isLanguageChange = false, isCategoryChange = false) => {
125 |     const selectedLanguage = document.getElementById("languageSwitcher").value;
126 |     console.log("selectedLanguage",selectedLanguage);
127 |     console.log(currentQuoteIndex);
128 |     console.log(isLanguageChange);
129 | 
130 |     selectedCategory = selectedCategoryTag.value;
131 |     console.log(quotes);
132 |     
133 | 
134 |     
135 |     
136 | 
137 |     // If the language is changed, keep the current quote but find the translation
138 |     if (isLanguageChange && currentQuoteIndex !== -1) {
139 |       // Use the same quote's index to find the translation
140 |       var selectedQuote = quotes[currentQuoteIndex];
141 |     }else {
142 |       // categorically selected quotes
143 |       quotes = window.quotes
144 |       .sort(() => Math.random() - 0.6)
145 |       .filter(
146 |         (quote) =>
147 |           isIncluded(quote.category, selectedCategory) ||
148 |           isIncluded(selectedCategory, "Random")
149 |       );
150 |       // Pick a new random quote if it's not a language change
151 |       selectedQuote = quotes[randomInteger(0, quotes.length)];
152 |       currentQuoteIndex = quotes.indexOf(selectedQuote); // Store the index of the selected quote
153 |       
154 |       
155 |     }
156 | 
157 |     console.log("quote",selectedQuote);
158 | 
159 |     // setting global variable
160 |     if ("translations" in selectedQuote){
161 |       selectedQuoteText = selectedQuote.translations[selectedLanguage] || selectedQuote.quote;
162 |     }else{
163 |       selectedQuoteText = selectedQuote.quote;
164 |     }
165 |     
166 |     selectedQuoteAuthor = selectedQuote.author;
167 |     selectedQuoteAddedBy = selectedQuote.addedBy;
168 | 
169 | 
170 |     let quote = quoteTextTag.textContent.trim(); 
171 |     let quoteInd = -1;
172 |     for (let i = 0; i < window.quotes.length; i++) {
173 |       if ('"' + window.quotes[i].quote + '"' === quote) {  
174 |         quoteInd = i;
175 |         break;
176 |       }
177 |     }
178 | 
179 |     if (localStorage.getItem(`quote-liked-${quoteInd}`)){
180 |       console.log("already liked : quote ind - ", quoteInd);
181 |       heartIcon.classList.add('active');
182 |     }else{
183 |       console.log("not liked");
184 |       heartIcon.classList.remove('active');
185 |     }
186 | 
187 |     // setting the visual innerhtml values
188 |     setValue(quoteTextTag, `"${selectedQuoteText}"`);
189 |     setValue(quoteAuthorTag, `- ${selectedQuoteAuthor}`);
190 |     setValue(
191 |       addedByTag,
192 |       `Added by <br/> <a
193 |       href="https://github.com/${selectedQuoteAddedBy}"
194 |       target="_blank"
195 |       rel="noopener noreferrer"
196 |       class="added-by capitalise"
197 |     >
198 |     ${selectedQuoteAddedBy}</a
199 |     >`
200 |     );
201 | 
202 |     // animation section
203 |     animateQuoteText();
204 | 
205 |     // set canvas to generate image to download
206 |     setCanvas();
207 |   };
208 | 
209 |   
210 |   // function to wrap text; reference: https://fjolt.com/article/html-canvas-how-to-wrap-text
211 |   const wrapText = function (ctx, text, x, y, maxWidth, lineHeight) {
212 |     let words = text.split(" ");
213 |     let line = "";
214 |     let testLine = "";
215 |     let lineArray = [];
216 | 
217 |     for (var n = 0; n < words.length; n++) {
218 |       testLine += `${words[n]} `;
219 |       let metrics = ctx.measureText(testLine);
220 |       let testWidth = metrics.width;
221 | 
222 |       if (testWidth > maxWidth && n > 0) {
223 |         lineArray.push([line, x, y]);
224 |         y += lineHeight;
225 |         line = `${words[n]} `;
226 |         testLine = `${words[n]} `;
227 |       } else {
228 |         line += `${words[n]} `;
229 |       }
230 | 
231 |       if (n === words.length - 1) {
232 |         lineArray.push([line, x, y]);
233 |       }
234 |     }
235 | 
236 |     return lineArray;
237 |   };
238 | 
239 |   // draw the quote as an image on the canvas
240 |   const setCanvas = () => {
241 |     var canvas = document.getElementById("quoteCanvas");
242 |     canvas.height = window.innerHeight - 50 || 540;
243 |     canvas.width = window.innerWidth - 50 || 540;
244 | 
245 |     var x = canvas.width / 2;
246 |     var y = canvas.height / 2;
247 |     var ctx = canvas.getContext("2d");
248 | 
249 |     // add background color
250 |     const grd = ctx.createLinearGradient(0, 0, 500, 0);
251 |     grd.addColorStop(0, themeColor);
252 |     grd.addColorStop(1, themeColor);
253 |     // Fill background with gradient
254 |     ctx.fillStyle = grd;
255 |     ctx.fillRect(0, 0, canvas.width, canvas.height);
256 | 
257 |     // add wrapped text to canvas
258 |     ctx.textAlign = "center";
259 |     ctx.font = "35pt garamond";
260 |     ctx.fillStyle = "black";
261 |     let wrappedText = wrapText(
262 |       ctx,
263 |       '"' + selectedQuoteText + '"',
264 |       x,
265 |       60,
266 |       x * 2 - 40,
267 |       40
268 |     );
269 |     var len = wrappedText.length;
270 |     var centeringY = y - (len * 40) / 2;
271 |     wrappedText.forEach(function (item) {
272 |       ctx.fillText(item[0], item[1], centeringY);
273 |       centeringY += 50;
274 |     });
275 |     ctx.font = "15pt calibri";
276 |     ctx.fillText(selectedQuoteAuthor, wrappedText[len - 1][1], centeringY);
277 |   };
278 | 
279 |   // button click handling section
280 |   const handleTwitterClick = () => {
281 |     let text =
282 |       '"' +
283 |       selectedQuoteText +
284 |       '"%0D%0A- ' +
285 |       selectedQuoteAuthor +
286 |       ",%0D%0A%0D%0AI found this on " +
287 |       webAddress +
288 |       ",%0D%0AYou can check this out";
289 |     window.open(`https://twitter.com/intent/tweet?text=${text}`, "_blank");
290 |   };
291 |   const handleWhatsAppClick = () => {
292 |     let text =
293 |       '"' +
294 |       selectedQuoteText +
295 |       '"%0D%0A- ' +
296 |       selectedQuoteAuthor +
297 |       ",%0D%0A%0D%0AI found this on " +
298 |       webAddress +
299 |       ",%0D%0AYou can check this out";
300 |     window.open(`https://wa.me/?text=${text}`, "_blank");
301 |   };
302 |   const handleFacebookClick = () => {
303 |     window.open(
304 |       `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fquote-verse.netlify.app%2F`,
305 |       "_blank"
306 |     );
307 |   };
308 |   const handleDownloadClick = () => {
309 |     var link = document.createElement("a");
310 |     link.download =
311 |       selectedCategory +
312 |       " Quote by " +
313 |       selectedQuoteAuthor +
314 |       "-(quote-verse.netlify.app).png";
315 |     link.href = document.getElementById("quoteCanvas").toDataURL();
316 |     link.click();
317 |   };
318 |   const copyHandler = (func) => {
319 |     // Get quote and author as text
320 |     const text = `"${selectedQuoteText}" - ${selectedQuoteAuthor}`;
321 |     // Copy to clipboard and handle success or failure
322 |     // Check if the Clipboard API is supported
323 |     if (navigator.clipboard && window.isSecureContext) {
324 |       navigator.clipboard.writeText(text);
325 |       func(true);
326 |       return true;
327 |     } else {
328 |       // Fallback for browsers that do not support Clipboard API
329 |       var textArea = document.createElement("textarea");
330 |       document.body.appendChild(textArea);
331 |       textArea.value = text;
332 |       textArea.select();
333 |       var successful = document.execCommand("copy");
334 |       document.body.removeChild(textArea);
335 | 
336 |       func(successful);
337 |       return successful;
338 |     }
339 |   };
340 | 
341 |   // set up the selected quote
342 |   // set all funtionalities
343 |   setCategories();
344 |   setQuote();
345 |  // making event listener for language change
346 |   document.getElementById('languageSwitcher').addEventListener('change', function (){
347 |     setQuote(true);
348 |   });
349 |   // when generate button clicked
350 |   generateQuoteBtn.addEventListener("click", function(){
351 |     setQuote();
352 |   });
353 |   selectedCategoryTag.addEventListener("change", function(){
354 |     setQuote(false,true);
355 |   });
356 | 
357 |   // Function to replace icon class with a fade effect
358 |   function replaceIconClass(item, newClass) {
359 |     item.style.opacity = 0; // Set initial opacity to 0
360 |     console.log(item);
361 |     setTimeout(function () {
362 |       item.className = `fa ${newClass} icon`;
363 |       item.style.opacity = 1; // Set opacity to 1 after changing the class
364 |     }, 250); // You can adjust the duration of the fade (in milliseconds) here
365 |   }
366 | 
367 |   // Function to display copy message tooltip
368 |   function copyMessageTooltip(copyButtonMessage) {
369 |     const tooltipVisibleTime = 2000; // How long to leave tooltip visible
370 |     const tooltipHideTime = 100; // Matches .inactive animation time
371 | 
372 |     // Tooltip
373 |     const tooltip = document.getElementById("copy_tooltip");
374 |     tooltip.textContent = copyButtonMessage;
375 |     tooltip.classList.add("active");
376 | 
377 |     setTimeout(function () {
378 |       tooltip.classList.remove("active");
379 |       tooltip.classList.add("inactive");
380 |       // Create a clone of the tooltip to restart the animation
381 |       const newTooltip = tooltip.cloneNode(true);
382 |       tooltip.parentNode.replaceChild(newTooltip, tooltip);
383 |       setTimeout(function () {
384 |         newTooltip.classList.remove("inactive");
385 |         newTooltip.textContent = "";
386 |       }, tooltipHideTime);
387 |     }, tooltipVisibleTime);
388 |   }
389 | 
390 |   // Event listener for quote section click to copy
391 |   quoteSection.addEventListener("click", async function () {
392 |     // Get quote body and author text
393 |     const text = `${selectedQuoteText} - ${selectedQuoteAuthor}`;
394 |     // Copy to clipboard and display tooltip
395 |     copyHandler(() => copyMessageTooltip("Quote Copied"));
396 |   });
397 | 
398 |   // added sharing options
399 |   let sharingOptions = [
400 |     {
401 |       title: "Whatsapp",
402 |       icon: `<i class="fa-brands fa-whatsapp fa-xl" style="color: #00ff33" title="Share to Whatsapp"></i>`,
403 |       clickhandler: handleWhatsAppClick,
404 |     },
405 |     {
406 |       title: "Facebook",
407 |       icon: `<i class="fa-brands fa-facebook fa-xl" style="color: #0084ff" title="Share to Facebook"></i>`,
408 |       clickhandler: handleFacebookClick,
409 |     },
410 |     {
411 |       title: "Twitter",
412 |       icon: `<i class="fa-brands fa-x-twitter fa-xl" style="color: #5f99fc"  title="Share to Twitter"></i>`,
413 |       clickhandler: handleTwitterClick,
414 |     },
415 |     {
416 |       title: "Download",
417 |       icon: `<i class="fas fa-thin fa-download fa-lg" id="download-icon" style="color: #ffffff" title="Download this Quote"></i>`,
418 |       clickhandler: handleDownloadClick,
419 |     },
420 |     {
421 |       title: "Copy",
422 |       icon: `<i class="fa-regular fa-copy icon" id="copy-icon"  title="Copy this Quote"></i>`,
423 |       clickhandler: () =>
424 |         copyHandler((validation) => {
425 |           const copyIcon = document.getElementById("copy-icon");
426 |           replaceIconClass(
427 |             copyIcon,
428 |             validation
429 |               ? "fa-solid fa-check check-icon fa-xl"
430 |               : "fa-solid fa-xmark cross-icon fa-xl"
431 |           );
432 |           // Reset to copy icon after 0.5s
433 |           setTimeout(() => {
434 |             replaceIconClass(copyIcon, "fa-regular fa-copy icon");
435 |           }, 800);
436 |         }),
437 |     },
438 |   ];
439 |   // self calling function
440 |   (function setShareButtons() {
441 |     shareBtns.innerHTML = "";
442 |     sharingOptions.forEach((option) => {
443 |       const div = document.createElement("div");
444 |       div.innerHTML = option.icon;
445 |       div.addEventListener("click", option.clickhandler);
446 |       shareBtns.appendChild(div);
447 |     });
448 |   })();
449 | 
450 |   
451 |   color_selection.forEach((item) => {
452 |     item.addEventListener("click", () => {
453 |       var getItemNumber = item.getAttribute("data-number");
454 |       themeColor = color_array[getItemNumber - 1];
455 |       container.style.background = themeColor;
456 |       setCanvas();
457 |     });
458 |   });
459 | });
460 | 
461 | 
462 | 
463 | 


--------------------------------------------------------------------------------
/assets/js/others.js:
--------------------------------------------------------------------------------
 1 | // string match
 2 | const isIncluded = (string = "", pattern = "") => {
 3 |   return string.toLowerCase().includes(pattern.toLowerCase());
 4 | };
 5 | 
 6 | // for generating random integer
 7 | const randomInteger = (min = 0, max = 1) => {
 8 |   return Math.floor(Math.random() * (max - min)) + min;
 9 | };
10 | 
11 | // animation for the quote text
12 | const animateQuoteText = () => {
13 |   const quoteEl = document.querySelectorAll('#quoteTextTag');
14 |   quoteEl.forEach(el => {
15 |     // split the text content of the quote into individual words
16 |     const words = el.textContent.split(' ');
17 |     el.innerHTML = '';
18 |     
19 |     // wrap each word in a <span> element for animation
20 |     words.forEach((el, index) => {
21 |       words[index] = `<span class="animate-text"><i>${words[index]}</i></span>`;
22 |     });
23 |   
24 |     // join the words and update the element's content with the animated HTML
25 |     el.innerHTML = words.join(' ');
26 |   
27 |     // select all the child elements with class 'animate-text' and nested 'i' elements
28 |     const children = document.querySelectorAll('.animate-text > i');
29 |     // add animation delay to each word to create a staggered animation effect
30 |     children.forEach((node, index) => {
31 |       node.style.animationDelay = `${index * .05}s`;
32 |     });
33 |   });
34 | };


--------------------------------------------------------------------------------
/assets/lang/ar.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "توليد",
3 |     "share": "شارك",
4 |     "see_all_contributors": "عرض جميع المساهمين",
5 |     "click_to_contribute": "انقر للمساهمة",
6 |     "color": "لون"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/bn.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "সৃষ্টি করুন",
3 |     "share": "ভাগ করুন",
4 |     "see_all_contributors": "সব অবদানকারীদের দেখুন",
5 |     "click_to_contribute": "অবদান করতে ক্লিক করুন",
6 |     "color": "রঙ"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/de.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Generieren",
3 |     "share": "Teilen",
4 |     "see_all_contributors": "Alle Mitwirkenden anzeigen",
5 |     "click_to_contribute": "Klicken Sie hier, um beizutragen",
6 |     "color": "Farbe"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/en-US.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Latte",
3 |     "share": "Share",
4 |     "see_all_contributors": "See all Contributors",
5 |     "click_to_contribute": "Click to contribute",
6 |     "color": "Color"  
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/en.json:
--------------------------------------------------------------------------------
1 | {
2 |   "generate": "Generate",
3 |   "share": "Share",
4 |   "see_all_contributors": "See all Contributors",
5 |   "click_to_contribute": "Click to contribute",
6 |   "color": "Color"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/es.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Generar",
3 |     "share": "Compartir",
4 |     "see_all_contributors": "Ver todos los colaboradores",
5 |     "click_to_contribute": "Haga clic para contribuir",
6 |     "color": "Color"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/fr.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Générer",
3 |     "share": "Partager",
4 |     "see_all_contributors": "Voir tous les contributeurs",
5 |     "click_to_contribute": "Cliquez pour contribuer",
6 |     "color": "Couleur"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/hi.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "उत्पन्न करें",
3 |     "share": "साझा करें",
4 |     "see_all_contributors": "सभी योगदानकर्ताओं को देखें",
5 |     "click_to_contribute": "योगदान करने के लिए क्लिक करें",
6 |     "color": "रंग"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/it.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Generare",
3 |     "share": "Condividere",
4 |     "see_all_contributors": "Vedi tutti i collaboratori",
5 |     "click_to_contribute": "Fai clic per contribuire",
6 |     "color": "Colore"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/ja.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "生成する",
3 |     "share": "共有する",
4 |     "see_all_contributors": "すべての貢献者を見る",
5 |     "click_to_contribute": "貢献するにはクリックしてください",
6 |     "color": "色"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/kn.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "ರಚಿಸು",
3 |     "share": "ಹಂಚಿಕೊಳ್ಳಿ",
4 |     "see_all_contributors": "ಎಲ್ಲಾ ಕೊಡುಗೆದಾರರನ್ನು ನೋಡಿ",
5 |     "click_to_contribute": "ಕೊಡುಗೆ ನೀಡಲು ಕ್ಲಿಕ್ ಮಾಡಿ",
6 |     "color": "ಬಣ್ಣ"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/ml.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "സൃഷ്ടിക്കുക",
3 |     "share": "പങ്കിടുക",
4 |     "see_all_contributors": "എല്ലാ സംഭാവകരെയും കാണുക",
5 |     "click_to_contribute": "സംഭാവന ചെയ്യാൻ ക്ലിക്കുചെയ്യുക",
6 |     "color": "നിറം"
7 | }
8 | 


--------------------------------------------------------------------------------
/assets/lang/mr.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "निर्माण करा",
3 |     "share": "शेअर करा",
4 |     "see_all_contributors": "सर्व योगदानकर्त्यांना पहा",
5 |     "click_to_contribute": "योगदान करण्यासाठी क्लिक करा",
6 |     "color": "रंग"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/pt.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Gerar",
3 |     "share": "Compartilhar",
4 |     "see_all_contributors": "Ver todos os contribuidores",
5 |     "click_to_contribute": "Clique para contribuir",
6 |     "color": "Cor"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/ru.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "Создать",
3 |     "share": "Поделиться",
4 |     "see_all_contributors": "Посмотреть всех участников",
5 |     "click_to_contribute": "Нажмите, чтобы внести вклад",
6 |     "color": "Цвет"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/ta.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "உருவாக்கு",
3 |     "share": "பகிர்",
4 |     "see_all_contributors": "அனைத்து பங்களிப்பாளர்களையும் காண்க",
5 |     "click_to_contribute": "பங்களிக்க கிளிக் செய்யவும்",
6 |     "color": "நிறம்"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/te.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "సృష్టించు",
3 |     "share": "పంచుకో",
4 |     "see_all_contributors": "అన్ని సహకారదారులను చూడండి",
5 |     "click_to_contribute": "సహకరించడానికి క్లిక్ చేయండి",
6 |     "color": "రంగు"
7 | }
8 |   


--------------------------------------------------------------------------------
/assets/lang/zh.json:
--------------------------------------------------------------------------------
1 | {
2 |     "generate": "生成",
3 |     "share": "分享",
4 |     "see_all_contributors": "查看所有贡献者",
5 |     "click_to_contribute": "点击贡献",
6 |     "color": "颜色"
7 | }
8 |   


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
  8 |     integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
  9 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
 10 |   <!-- favicon here  -->
 11 |   <link rel="icon" type="image/x-icon" href="./assets/images/favicon/favicon.ico">
 12 |   <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon/apple-touch-icon.png">
 13 |   <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon/favicon-16x16.png">
 14 |   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon/favicon-32x32.png">
 15 |   <link rel="icon" type="image/png" sizes="192x192" href="./assets/images/favicon/android-chrome-192x192.png">
 16 |   <link rel="icon" type="image/png" sizes="512x512" href="./assets/images/favicon/android-chrome-512x512.png">
 17 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite" />
 18 |   <!-- favicon end here  -->
 19 |   <link rel="stylesheet" href="./assets/css/style.css" />
 20 |   <link rel="stylesheet" href="./assets/css/styleBelow500.css" />
 21 |   <title>QuoteVerse</title>
 22 |   <meta name="title" content="QuoteVerse - Explore Inspirational Quotes, Poems, and Verses" />
 23 |   <meta name="description"
 24 |     content="Discover a world of inspiration at QuoteVerse! Dive into a collection of meaningful quotes, soul-stirring poems, and thought-provoking verses." />
 25 |   <meta name="keywords"
 26 |     content="Inspirational Quotes, Motivational Verses, Thoughtful Poems, Meaningful Sayings, Wisdom Quotes, Positive Affirmations, Empowering Words, Life Lessons, Poetry Collection, Daily Inspiration, Uplifting Quotes, Emotional Verses, Heartfelt Poetry, Encouraging Sayings, Spiritual Quotes, Quote Library, Inspiring Poets, Famous Authors, Creative Expression, Words of Encouragement" />
 27 |   <meta name="robots" content="index,follow" />
 28 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 29 |   <meta name="language" content="English" />
 30 |   <meta name="revisit-after" content="1 day" />
 31 |   <meta name="author" content="Shariar Hasan" />
 32 |   <!-- Open Graph Meta Tags -->
 33 |   <meta property="og:title" content="QuoteVerse - Explore Inspirational Quotes, Poems, and Verses" />
 34 |   <meta property="og:description"
 35 |     content="QuoteVerse is a platform dedicated to sharing inspirational and motivational quotes to inspire and uplift your spirit. Explore a wide collection of quotes on various topics and share your favorites with the world." />
 36 |   <meta property="og:image" content="https://i.ibb.co/LvkdXrP/Quote-Verse-Cover.png" />
 37 |   <meta property="og:url" content="https://quote-verse.netlify.app/" />
 38 |   <meta property="og:type" content="website" />
 39 | 
 40 |   <!-- Twitter Card Meta Tags (for Twitter sharing) -->
 41 |   <meta name="twitter:card"
 42 |     content="QuoteVerse is a platform dedicated to sharing inspirational and motivational quotes to inspire and uplift your spirit. Explore a wide collection of quotes on various topics and share your favorites with the world." />
 43 |   <meta name="twitter:title" content="QuoteVerse - Explore Inspirational Quotes, Poems, and Verses" />
 44 |   <meta name="twitter:description"
 45 |     content="QuoteVerse is a platform dedicated to sharing inspirational and motivational quotes to inspire and uplift your spirit. Explore a wide collection of quotes on various topics and share your favorites with the world." />
 46 |   <meta name="twitter:image" content="https://i.ibb.co/LvkdXrP/Quote-Verse-Cover.png" />
 47 |   <meta name="twitter:site" content="@iShariarHasan" />
 48 |   
 49 | 
 50 | 
 51 |  
 52 | 
 53 |   
 54 |   
 55 | </head>
 56 | 
 57 | <body>
 58 |   <main class="w-full h-screen">
 59 |     
 60 |     <!-- Language Selection Dropdown -->
 61 |     <div class="language-selector">
 62 |       <select id="languageSwitcher">
 63 | 
 64 |         <option value="en" selected>English</option>
 65 |         <option value="hi">Hindi</option>
 66 |         <option value="ta">Tamil</option>
 67 |         <option value="kn">Kannada</option>
 68 |         <option value="ml">Malayalam</option>
 69 |         <option value="mr">Marathi</option>
 70 |         <option value="bn">Bengali</option>
 71 |         <option value="ar">Arabic</option>
 72 |         <option value="ru">Russian</option>
 73 |         <option value="es">Spanish</option>
 74 |         <option value="zh">Chinese (Simplified)</option>
 75 |         <option value="de">German</option>
 76 |         <option value="fr">French</option>
 77 |         <option value="pt">Portuguese</option>
 78 |         <option value="it">Italian</option>
 79 |         <option value="ja">Japanese</option>
 80 |       </select>
 81 |     </div>
 82 |   
 83 |     <div class="container">
 84 |       <!-- Quote Section -->
 85 |       <section>
 86 |         <div class="quote" title="Click to copy quote to clipboard">
 87 |           <h1 class="quote-text" id="quoteTextTag" >
 88 |             <!-- Quote will appear here  -->
 89 |           </h1>
 90 |           <h5 class="quote-author" id="quoteAuthorTag">
 91 |             <!-- Quote Author will appear here  -->
 92 |           </h5>
 93 |           <span id="copy_tooltip"></span>
 94 |         </div>
 95 |         <span class="material-symbols-outlined heart-icon">
 96 |           favorite
 97 |           </span>
 98 |         <canvas id="quoteCanvas" class="quote-img" style="visibility: hidden; display: none;">Canvas is not supported by
 99 |           your web browser</canvas>
100 |       </section>
101 | 
102 |       <!-- Control Section Section -->
103 |       <section class="controllerSection">
104 |         <div class="controller">
105 |           <!-- Share Button -->
106 |           <div class="shareAndcontribute">
107 |             <div class="shareWith text-right">
108 |               <button data-i18n="share" id="share-button" class="hoverToShare">
109 |                 Share <i class="fa fa-share" aria-hidden="true"></i>
110 |               </button>
111 |               <div class="popup" id="share-popup" style="display: none;">
112 |                 <ul>
113 |                   <li><a href="#" class="share-link" data-platform="facebook" title="Share on Facebook"><i class="fab fa-facebook fa-3x"></i>facebook</a></li>
114 |                   <li><a href="#" class="share-link" data-platform="telegram" title="Share on Telegram"><i class="fab fa-telegram fa-3x"></i>telegram</a></li>
115 |                   <li><a href="#" class="share-link" data-platform="twitter" title="Share on Twitter"><i class="fab fa-twitter fa-3x"></i>twitter</a></li>
116 |                   <li><a href="#" class="share-link" data-platform="linkedin" title="Share on LinkedIn"><i class="fab fa-linkedin fa-3x"></i>linkedin</a></li>
117 |                   <li><a href="#" class="share-link" data-platform="weixin" title="Share on Zalo"><i class="fab fa-weixin fa-3x"></i>copy</a></li>
118 |                 </ul>
119 |               </div>
120 |               
121 |             </div>
122 |             <div class="added-by-box animate text-left" id="addedByTag"></div>
123 |           </div>
124 |           <div class="controller-wrapper w-full">
125 |             <div class="controller-group w-full">
126 |               <button class="btn-generator w-full" id="generateQuoteBtn" data-i18n="generate">
127 |                 Generate <i class="fa-solid fa-rotate"></i>
128 |               </button>
129 |               <select name="selectedCategoryTag" id="selectedCategoryTag" class="capitalise w-full"></select>
130 |             </div>
131 |             <div class="w-full text-center">
132 |               <span class="contribute1" id="contributor">
133 |                 <a class="contributor" data-i18n="see_all_contributors" href="./Contributors/contributors.html">
134 |                   See all Contributors
135 |                   <i class="fa fa-arrow-right px-3" aria-hidden="true"></i>
136 |                 </a>
137 |               </span>
138 |               <span class="contribute2" id="contributeButton">
139 |                 <a href="https://github.com/Shariar-Hasan/QuoteVerse" data-i18n="click_to_contribute" target="_blank" rel="noopener noreferrer">
140 |                   <i class="fab fa-github px-3" aria-hidden="true"></i>Click
141 |                   to contribute</a>
142 |               </span>
143 |             </div>
144 |           </div>
145 |         </div>
146 |       </section>
147 |       
148 | 
149 |       <div id="theme_changer_button" class="theme_changer_button">
150 |         <span class="button-text" data-i18n="color">Color</span>
151 |         <input type="color" id="color_picker" value="#ededed">
152 |       </div>
153 | 
154 |   </main>
155 | 
156 | 
157 | 
158 | <!-- Other existing script tags -->
159 | <script src="./node_modules/i18next/i18next.js"></script>
160 | <script src="./node_modules/i18next-http-backend/i18nextHttpBackend.js"></script>
161 | <script src="./node_modules/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
162 | <script src="./node_modules/jquery/dist/jquery.js"></script>
163 | <script src="./node_modules/jquery-i18next/jquery-i18next.js"></script>
164 | <script type="module" src="./assets/js/lang.js"></script>
165 | <script src="./Quotes.js"></script>
166 | <script src="./assets/js/others.js"></script>
167 | <script src="./assets/js/main.js"></script>
168 | 
169 | <script>
170 |   const shareButton = document.getElementById('share-button');
171 |   const sharePopup = document.getElementById('share-popup');
172 | 
173 |   shareButton.addEventListener('click', (event) => {
174 |     event.stopPropagation();
175 |     sharePopup.style.display = sharePopup.style.display === 'none' || sharePopup.style.display === '' ? 'block' : 'none';
176 |   });
177 | 
178 |   document.addEventListener('click', (event) => {
179 |     if (!shareButton.contains(event.target) && !sharePopup.contains(event.target)) {
180 |       sharePopup.style.display = 'none';
181 |     }
182 |   });
183 | 
184 |   function encodeQuote(quote, author) {
185 |     return encodeURIComponent(`"${quote}" - ${author}`);
186 |   }
187 | 
188 |   document.querySelectorAll('.popup a').forEach(link => {
189 |     link.addEventListener('click', (event) => {
190 |       event.preventDefault();
191 |       const platform = event.currentTarget.getAttribute('title').split(' ')[2].toLowerCase();
192 | 
193 |       const quoteText = document.getElementById('quoteTextTag').innerText;
194 |       const quoteAuthor = document.getElementById('quoteAuthorTag').innerText;
195 | 
196 |       const encodedQuote = encodeQuote(quoteText, quoteAuthor);
197 |       const shareUrl = `https://quote-verse.netlify.app/`;
198 | 
199 |       switch (platform) {
200 |         case 'facebook':
201 |           window.open(`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`, '_blank');
202 |           break;
203 |         case 'telegram':
204 |           window.open(`https://t.me/share/url?url=${shareUrl}&text=${encodedQuote}`, '_blank');
205 |           break;
206 |         case 'twitter':
207 |           window.open(`https://twitter.com/intent/tweet?text=${encodedQuote}&url=${shareUrl}`, '_blank');
208 |           break;
209 |         case 'linkedin':
210 |           window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${encodedQuote}`, '_blank');
211 |           break;
212 |         default:
213 |           console.log('Unknown platform');
214 |       }
215 | 
216 |       sharePopup.style.display = 'none';
217 |     });
218 |   });
219 | </script>
220 | 
221 | <!-- Font Awesome Icons -->
222 | <script src="https://kit.fontawesome.com/a076d05399.js"></script>
223 | </body>
224 | 
225 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "QuoteVerse",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "QuoteVerse",
  9 |       "version": "1.0.0",
 10 |       "license": "ISC",
 11 |       "dependencies": {
 12 |         "i18next": "^23.16.2",
 13 |         "i18next-browser-languagedetector": "^8.0.0",
 14 |         "i18next-http-backend": "^2.6.2",
 15 |         "install": "^0.13.0",
 16 |         "jquery": "^3.7.1",
 17 |         "jquery-i18next": "^1.2.1",
 18 |         "prettier": "^3.0.3",
 19 |         "QuoteVerse": "file:"
 20 |       }
 21 |     },
 22 |     "node_modules/@babel/runtime": {
 23 |       "version": "7.25.9",
 24 |       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
 25 |       "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
 26 |       "dependencies": {
 27 |         "regenerator-runtime": "^0.14.0"
 28 |       },
 29 |       "engines": {
 30 |         "node": ">=6.9.0"
 31 |       }
 32 |     },
 33 |     "node_modules/cross-fetch": {
 34 |       "version": "4.0.0",
 35 |       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
 36 |       "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
 37 |       "dependencies": {
 38 |         "node-fetch": "^2.6.12"
 39 |       }
 40 |     },
 41 |     "node_modules/i18next": {
 42 |       "version": "23.16.2",
 43 |       "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.2.tgz",
 44 |       "integrity": "sha512-dFyxwLXxEQK32f6tITBMaRht25mZPJhQ0WbC0p3bO2mWBal9lABTMqSka5k+GLSRWLzeJBKDpH7BeIA9TZI7Jg==",
 45 |       "funding": [
 46 |         {
 47 |           "type": "individual",
 48 |           "url": "https://locize.com"
 49 |         },
 50 |         {
 51 |           "type": "individual",
 52 |           "url": "https://locize.com/i18next.html"
 53 |         },
 54 |         {
 55 |           "type": "individual",
 56 |           "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
 57 |         }
 58 |       ],
 59 |       "dependencies": {
 60 |         "@babel/runtime": "^7.23.2"
 61 |       }
 62 |     },
 63 |     "node_modules/i18next-browser-languagedetector": {
 64 |       "version": "8.0.0",
 65 |       "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
 66 |       "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
 67 |       "dependencies": {
 68 |         "@babel/runtime": "^7.23.2"
 69 |       }
 70 |     },
 71 |     "node_modules/i18next-http-backend": {
 72 |       "version": "2.6.2",
 73 |       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz",
 74 |       "integrity": "sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==",
 75 |       "dependencies": {
 76 |         "cross-fetch": "4.0.0"
 77 |       }
 78 |     },
 79 |     "node_modules/install": {
 80 |       "version": "0.13.0",
 81 |       "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
 82 |       "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
 83 |       "engines": {
 84 |         "node": ">= 0.10"
 85 |       }
 86 |     },
 87 |     "node_modules/jquery": {
 88 |       "version": "3.7.1",
 89 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
 90 |       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
 91 |     },
 92 |     "node_modules/jquery-i18next": {
 93 |       "version": "1.2.1",
 94 |       "resolved": "https://registry.npmjs.org/jquery-i18next/-/jquery-i18next-1.2.1.tgz",
 95 |       "integrity": "sha512-UNcw3rgxoKjGEg4w23FEn2h3OlPJU7rPzsgDuXDBZktIzeiVbJohs9Cv9hj8oP8KNfBRKOoErL/OVxg2FaAR4g=="
 96 |     },
 97 |     "node_modules/node-fetch": {
 98 |       "version": "2.7.0",
 99 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
100 |       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
101 |       "dependencies": {
102 |         "whatwg-url": "^5.0.0"
103 |       },
104 |       "engines": {
105 |         "node": "4.x || >=6.0.0"
106 |       },
107 |       "peerDependencies": {
108 |         "encoding": "^0.1.0"
109 |       },
110 |       "peerDependenciesMeta": {
111 |         "encoding": {
112 |           "optional": true
113 |         }
114 |       }
115 |     },
116 |     "node_modules/prettier": {
117 |       "version": "3.0.3",
118 |       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
119 |       "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
120 |       "bin": {
121 |         "prettier": "bin/prettier.cjs"
122 |       },
123 |       "engines": {
124 |         "node": ">=14"
125 |       },
126 |       "funding": {
127 |         "url": "https://github.com/prettier/prettier?sponsor=1"
128 |       }
129 |     },
130 |     "node_modules/QuoteVerse": {
131 |       "resolved": "",
132 |       "link": true
133 |     },
134 |     "node_modules/regenerator-runtime": {
135 |       "version": "0.14.1",
136 |       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
137 |       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
138 |     },
139 |     "node_modules/tr46": {
140 |       "version": "0.0.3",
141 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
142 |       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
143 |     },
144 |     "node_modules/webidl-conversions": {
145 |       "version": "3.0.1",
146 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
147 |       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
148 |     },
149 |     "node_modules/whatwg-url": {
150 |       "version": "5.0.0",
151 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
152 |       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
153 |       "dependencies": {
154 |         "tr46": "~0.0.3",
155 |         "webidl-conversions": "^3.0.0"
156 |       }
157 |     }
158 |   },
159 |   "dependencies": {
160 |     "@babel/runtime": {
161 |       "version": "7.25.9",
162 |       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
163 |       "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
164 |       "requires": {
165 |         "regenerator-runtime": "^0.14.0"
166 |       }
167 |     },
168 |     "cross-fetch": {
169 |       "version": "4.0.0",
170 |       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
171 |       "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
172 |       "requires": {
173 |         "node-fetch": "^2.6.12"
174 |       }
175 |     },
176 |     "i18next": {
177 |       "version": "23.16.2",
178 |       "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.2.tgz",
179 |       "integrity": "sha512-dFyxwLXxEQK32f6tITBMaRht25mZPJhQ0WbC0p3bO2mWBal9lABTMqSka5k+GLSRWLzeJBKDpH7BeIA9TZI7Jg==",
180 |       "requires": {
181 |         "@babel/runtime": "^7.23.2"
182 |       }
183 |     },
184 |     "i18next-browser-languagedetector": {
185 |       "version": "8.0.0",
186 |       "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
187 |       "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
188 |       "requires": {
189 |         "@babel/runtime": "^7.23.2"
190 |       }
191 |     },
192 |     "i18next-http-backend": {
193 |       "version": "2.6.2",
194 |       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz",
195 |       "integrity": "sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==",
196 |       "requires": {
197 |         "cross-fetch": "4.0.0"
198 |       }
199 |     },
200 |     "install": {
201 |       "version": "0.13.0",
202 |       "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
203 |       "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
204 |     },
205 |     "jquery": {
206 |       "version": "3.7.1",
207 |       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
208 |       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
209 |     },
210 |     "jquery-i18next": {
211 |       "version": "1.2.1",
212 |       "resolved": "https://registry.npmjs.org/jquery-i18next/-/jquery-i18next-1.2.1.tgz",
213 |       "integrity": "sha512-UNcw3rgxoKjGEg4w23FEn2h3OlPJU7rPzsgDuXDBZktIzeiVbJohs9Cv9hj8oP8KNfBRKOoErL/OVxg2FaAR4g=="
214 |     },
215 |     "node-fetch": {
216 |       "version": "2.7.0",
217 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
218 |       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
219 |       "requires": {
220 |         "whatwg-url": "^5.0.0"
221 |       }
222 |     },
223 |     "prettier": {
224 |       "version": "3.0.3",
225 |       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
226 |       "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg=="
227 |     },
228 |     "QuoteVerse": {
229 |       "version": "file:",
230 |       "requires": {
231 |         "i18next": "^23.16.2",
232 |         "i18next-browser-languagedetector": "^8.0.0",
233 |         "i18next-http-backend": "^2.6.2",
234 |         "install": "^0.13.0",
235 |         "jquery": "^3.7.1",
236 |         "jquery-i18next": "^1.2.1",
237 |         "prettier": "^3.0.3",
238 |         "QuoteVerse": "file:"
239 |       },
240 |       "dependencies": {
241 |         "@babel/runtime": {
242 |           "version": "7.25.9",
243 |           "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
244 |           "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
245 |           "requires": {
246 |             "regenerator-runtime": "^0.14.0"
247 |           }
248 |         },
249 |         "cross-fetch": {
250 |           "version": "4.0.0",
251 |           "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
252 |           "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
253 |           "requires": {
254 |             "node-fetch": "^2.6.12"
255 |           }
256 |         },
257 |         "i18next": {
258 |           "version": "23.16.2",
259 |           "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.2.tgz",
260 |           "integrity": "sha512-dFyxwLXxEQK32f6tITBMaRht25mZPJhQ0WbC0p3bO2mWBal9lABTMqSka5k+GLSRWLzeJBKDpH7BeIA9TZI7Jg==",
261 |           "requires": {
262 |             "@babel/runtime": "^7.23.2"
263 |           }
264 |         },
265 |         "i18next-browser-languagedetector": {
266 |           "version": "8.0.0",
267 |           "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
268 |           "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
269 |           "requires": {
270 |             "@babel/runtime": "^7.23.2"
271 |           }
272 |         },
273 |         "i18next-http-backend": {
274 |           "version": "2.6.2",
275 |           "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz",
276 |           "integrity": "sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==",
277 |           "requires": {
278 |             "cross-fetch": "4.0.0"
279 |           }
280 |         },
281 |         "install": {
282 |           "version": "0.13.0",
283 |           "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
284 |           "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
285 |         },
286 |         "jquery": {
287 |           "version": "3.7.1",
288 |           "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
289 |           "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
290 |         },
291 |         "jquery-i18next": {
292 |           "version": "1.2.1",
293 |           "resolved": "https://registry.npmjs.org/jquery-i18next/-/jquery-i18next-1.2.1.tgz",
294 |           "integrity": "sha512-UNcw3rgxoKjGEg4w23FEn2h3OlPJU7rPzsgDuXDBZktIzeiVbJohs9Cv9hj8oP8KNfBRKOoErL/OVxg2FaAR4g=="
295 |         },
296 |         "node-fetch": {
297 |           "version": "2.7.0",
298 |           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
299 |           "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
300 |           "requires": {
301 |             "whatwg-url": "^5.0.0"
302 |           }
303 |         },
304 |         "prettier": {
305 |           "version": "3.0.3",
306 |           "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
307 |           "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg=="
308 |         },
309 |         "regenerator-runtime": {
310 |           "version": "0.14.1",
311 |           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
312 |           "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
313 |         },
314 |         "tr46": {
315 |           "version": "0.0.3",
316 |           "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
317 |           "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
318 |         },
319 |         "webidl-conversions": {
320 |           "version": "3.0.1",
321 |           "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
322 |           "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
323 |         },
324 |         "whatwg-url": {
325 |           "version": "5.0.0",
326 |           "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
327 |           "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
328 |           "requires": {
329 |             "tr46": "~0.0.3",
330 |             "webidl-conversions": "^3.0.0"
331 |           }
332 |         }
333 |       }
334 |     },
335 |     "regenerator-runtime": {
336 |       "version": "0.14.1",
337 |       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
338 |       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
339 |     },
340 |     "tr46": {
341 |       "version": "0.0.3",
342 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
343 |       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
344 |     },
345 |     "webidl-conversions": {
346 |       "version": "3.0.1",
347 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
348 |       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
349 |     },
350 |     "whatwg-url": {
351 |       "version": "5.0.0",
352 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
353 |       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
354 |       "requires": {
355 |         "tr46": "~0.0.3",
356 |         "webidl-conversions": "^3.0.0"
357 |       }
358 |     }
359 |   }
360 | }
361 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "QuoteVerse",
 3 |   "version": "1.0.0",
 4 |   "description": "A place where you can find and add quotes of your choice",
 5 |   "main": "index.html",
 6 |   "dependencies": {
 7 |     "i18next": "^23.16.2",
 8 |     "i18next-browser-languagedetector": "^8.0.0",
 9 |     "i18next-http-backend": "^2.6.2",
10 |     "install": "^0.13.0",
11 |     "jquery": "^3.7.1",
12 |     "jquery-i18next": "^1.2.1",
13 |     "prettier": "^3.0.3",
14 |     "QuoteVerse": "file:"
15 |   },
16 |   "scripts": {
17 |     "test": "echo \"Error: no test specified\" && exit 1"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/Shariar-Hasan/QuoteVerse.git"
22 |   },
23 |   "author": "Shariar-Hasan",
24 |   "license": "ISC",
25 |   "bugs": {
26 |     "url": "https://github.com/Shariar-Hasan/QuoteVerse/issues"
27 |   },
28 |   "homepage": "https://github.com/Shariar-Hasan/QuoteVerse#readme"
29 | }
30 | 


--------------------------------------------------------------------------------
/sample.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shariar-Hasan/QuoteVerse/1794f97ba49e0bfd323d5f547e821de08631e7fb/sample.json


--------------------------------------------------------------------------------