├── .env.example
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug.yml
    │   ├── documentation.yml
    │   ├── feature_request.yml
    │   ├── other.yml
    │   └── styles.yml
    ├── PULL_REQUEST_TEMPLATE.md
    ├── pr-title-checker.json
    └── workflows
    │   ├── codeql.yml
    │   ├── greetings.yml
    │   └── pr-title-checker.yml
├── .gitignore
├── LICENSE
├── README.md
├── app.js
├── code_of_conduct.md
├── contributing.md
├── package-lock.json
├── package.json
├── public
    ├── css
    │   ├── bootstrap-social.css
    │   ├── contact.css
    │   ├── dark-styles.css
    │   └── styles.css
    └── image
    │   ├── contact2.jpg
    │   ├── key.ico
    │   └── secrets.webp
└── views
    ├── 404-page.ejs
    ├── about.ejs
    ├── contact.ejs
    ├── home.ejs
    ├── login.ejs
    ├── partials
        ├── footer.ejs
        └── header.ejs
    ├── privacy.ejs
    ├── register.ejs
    ├── secret-form.ejs
    └── secrets.ejs


/.env.example:
--------------------------------------------------------------------------------
 1 | # Since the ".env" file is gitignored, you can use the ".env.example" file to
 2 | # build a new ".env" file when you clone the repo. Keep this file up-to-date
 3 | # when you add new variables to `.env`.
 4 | 
 5 | # This file will be committed to version control, so make sure not to have any
 6 | # secrets in it. If you are cloning this repo, create a copy of this file named
 7 | # ".env" and populate it with your secrets.
 8 | 
 9 | GOOGLE_ID=
10 | GOOGLE_SECRET=
11 | 
12 | FACEBOOK_APP_ID=
13 | FACEBOOK_APP_SECRET=
14 | 
15 | PUBLIC_BASENAME=http://localhost:3000/
16 | PORT=3000
17 | MONGO_SERVER=mongodb://127.0.0.1:27017
18 | 
19 | 
20 | ## How to get your GOOGLE_ID and GOOGLE_SECRET
21 | 
22 | # Create a Google Cloud Platform (GCP) Project:
23 | #  - Go to the Google Cloud Console.
24 | #  - Create a new project by clicking on the project dropdown menu at the top of the page and selecting "New Project".
25 | #  - Follow the prompts to name your project and select your organization.
26 | #  - Enable the Google Sign-In API:
27 | 
28 | # In the Cloud Console, go to the "APIs & Services" > "Library".
29 | #  - Search for "Google Sign-In API" and select it.
30 | #  - Click on the "Enable" button to enable the API for your project.
31 | #  - Create OAuth 2.0 Credentials:
32 | 
33 | # In the Cloud Console, navigate to "APIs & Services" > "OAuth consent screen".
34 | #  - Choose either "External" or "Internal" based on your use case and fill in the required information.
35 | #  - After setting up the consent screen, go to "APIs & Services" > "Credentials".
36 | #  - Click on "Create Credentials" and select "OAuth client ID".
37 | #  - Choose "Web application" as the application type.
38 | #  - In the "Authorized redirect URIs" section, add the URL where users will be redirected after signing in with Google. Typically, this would be something like https://yourwebsite.com/auth/google/callback.
39 | #  - Click "Create" to generate your OAuth 2.0 credentials. This will provide you with your GOOGLE_ID (Client ID) and GOOGLE_SECRET (Client Secret).
40 | 
41 | 
42 | #  ## How to get your FACEBOOK_APP_ID and FACEBOOK_APP_SECRET
43 | 
44 | # Create a Facebook Developer Account:
45 | # - Go to the Facebook Developer website (https://developers.facebook.com/) and sign in with your Facebook credentials.
46 | # - Create a new app by clicking on the "My Apps" dropdown menu at the top right corner and selecting "Create App."
47 | # - Follow the prompts to set up your new app. Choose a display name, category, and other relevant details.
48 | 
49 | # Configure Basic Settings:
50 | # - Once your app is created, navigate to the app dashboard.
51 | # - Under the "Settings" tab, go to the "Basic" section.
52 | # - Add your website domain under "App Domains" and save the changes.
53 | # - Note down your App ID and App Secret.


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.yml:
--------------------------------------------------------------------------------
 1 | name: ​🐞 Bug
 2 | description: Report an issue to help us improve the project.
 3 | title: "[BUG] <write a small description here>"
 4 | labels: ["bug", "goal: fix"]
 5 | body:
 6 |   - type: textarea
 7 |     attributes:  
 8 |       label: Description   
 9 |       description: A brief description of the issue or bug you are facing, also include what you tried and what didn't work.
10 |     validations:
11 |       required: false
12 |   - type: textarea
13 |     attributes: 
14 |       label: Screenshots
15 |       description: Please add screenshots if applicable
16 |     validations:
17 |       required: false
18 |   - type: textarea
19 |     attributes: 
20 |       label: Any additional information? 
21 |       description: Any additional information or Is there anything we should know about this bug? 
22 |     validations: 
23 |       required: false
24 |   - type: dropdown
25 |     id: browsers
26 |     attributes: 
27 |       label: What browser are you seeing the problem on? 
28 |       multiple: true
29 |       options: 
30 |         - Firefox
31 |         - Chrome
32 |         - Safari
33 |         - Microsoft Edge      
34 |   - type: checkboxes
35 |     id: no-duplicate-issues
36 |     attributes:
37 |       label: "Checklist"
38 |       options:
39 |         - label: "I have starred the repository"
40 |           required: true
41 | 
42 |         - label: "I have checked the existing issues"
43 |           required: true
44 |           
45 |         - label: "I have read the discussion tab thoroughly and got the project idea"
46 |           required: true
47 |           
48 |         - label: "I am willing to work on this issue (optional)"
49 |           required: false
50 |         
51 |         
52 | 
53 |                  
54 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Documentation Issue
 3 | about: Report an issue with the project documentation
 4 | title: "[Documentation] "
 5 | 
 6 | ---
 7 | 
 8 | body:
 9 |   - type: markdown
10 |     attributes:
11 |       value: |
12 |         <!--
13 |         Please follow the guidelines below to report documentation issues effectively.
14 |         -->
15 | 
16 |         ### Issue Summary
17 | 
18 |         **Description:**
19 |         A clear and concise description of the problem with the documentation or the improvement you'd like to suggest.
20 | 
21 |         **Severity:**
22 |         [ ] Low
23 |         [ ] Medium
24 |         [ ] High
25 |         [ ] Critical
26 | 
27 |         **Affected Documentation Section:**
28 |         Specify the relevant section(s) or page(s) of the documentation where you encountered the issue.
29 | 
30 |         ### Expected Documentation
31 | 
32 |         **Describe the expected content:**
33 |         If applicable, describe how you expected the documentation to be or provide examples of how it could be improved.
34 | 
35 |         **Proposed Solution:**
36 |         Share your ideas for improving the documentation or propose a solution if you have one.
37 | 
38 |         ### Reproduction Steps
39 | 
40 |         **Steps to Reproduce:**
41 |         If the issue is related to inaccuracies or unclear instructions, provide the steps to reproduce the problem.
42 | 
43 |         **Screenshots or Code Snippets:**
44 |         Attach any relevant screenshots or code snippets that illustrate the problem.
45 | 
46 |         ### Environment Information
47 | 
48 |         **Your Environment:**
49 |         - OS: [e.g., Windows, macOS, Linux]
50 |         - Browser: [e.g., Chrome, Firefox, Safari]
51 |         - Version: [e.g., 1.0.0]
52 | 
53 |         **Additional Context:**
54 |         Add any other context or details that might be helpful for understanding the issue.
55 | 
56 |         ### Related Documentation URLs
57 | 
58 |         **Links:**
59 |         If relevant, provide any specific URLs or links to the documentation in question.
60 | 
61 |         ### Contributor Checklist
62 | 
63 |         Please make sure that you have considered the following before submitting this documentation issue:
64 | 
65 |         - [ ] I have checked the project's existing documentation issues to ensure there are no duplicates.
66 |         - [ ] I have reviewed the project's CONTRIBUTING guidelines.
67 |         - [ ] I understand that submitting a documentation issue does not guarantee immediate updates.
68 | 
69 |         ### Additional Notes
70 | 
71 |         **Notes:**
72 |         Add any other notes or comments related to this documentation issue.
73 | 
74 |         <!-- 
75 |         Thank you for contributing to our project's documentation! 
76 |         Please make sure to review our CONTRIBUTING guidelines before submitting your issue.
77 |         -->
78 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
 1 | name: Feature Request 💡
 2 | description: Have any new idea or new feature ? Please suggest!
 3 | title: "[Feature] <write a small description here>"
 4 | labels: ["enhancement", "goal: addition"]
 5 | body:
 6 |   - type: textarea
 7 |     id: description
 8 |     attributes:
 9 |       label: Description
10 |       description: A clear and concise description of any alternative solution or features you've considered.
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: checkboxes
21 |     id: no-duplicate-issues
22 |     attributes:
23 |       label: "Checklist"
24 |       options:
25 |         - label: "I have starred the repository"
26 |           required: true
27 |           
28 |         - label: "I have checked the existing issues"
29 |           required: true
30 |           
31 |         - label: "I have read the discussion tab thoroughly and got the project idea "
32 |           required: true
33 | 
34 |         - label: "I am willing to work on this issue (optional)"
35 |           required: false
36 | 
37 |         
38 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/other.yml:
--------------------------------------------------------------------------------
 1 | name: Other 🤔
 2 | description: Use this for any other issues. PLEASE do not create blank issues
 3 | title: "[Other]"
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: "# Other issue"
 8 | 
 9 |   - type: textarea
10 |     id: issuedescription
11 |     attributes:
12 |       label: What would you like to share?
13 |       description: Provide a clear and concise explanation of your issue.
14 |     validations:
15 |       required: true
16 | 
17 |   - type: textarea
18 |     id: extrainfo
19 |     attributes:
20 |       label: Additional information
21 |       description: Is there anything else we should know about this issue?
22 |     validations:
23 |       required: false
24 | 
25 |   - type: checkboxes
26 |     id: no-duplicate-issues
27 |     attributes:
28 |       label: "Checklist"
29 |       options:
30 |         - label: "I have checked the existing issues."
31 |           required: true
32 | 
33 |         - label: "I follow [Contributing Guidelines](https://github.com/Kritika30032002/Top_Secrets/blob/main/contributing.md) of this project."
34 |           required: true
35 | 
36 |         - label: "I am a IWOC'24 contributor."
37 |           required: false
38 |   
39 |   - type: checkboxes
40 |     id: terms
41 |     attributes:
42 |       label: Code of Conduct
43 |       description: By submitting this issue, you agree to follow our "[Code of Conduct](https://github.com/Kritika30032002/Top_Secrets/blob/main/code_of_conduct.md)"
44 |       options:
45 |         - label: I agree to follow this project's "[Code of Conduct](https://github.com/Kritika30032002/Top_Secrets/blob/main/code_of_conduct.md)".
46 |           required: true


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/styles.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Style Changing Request
 3 | description: Suggest a style designs
 4 | title: '[style]: '
 5 | labels: ['enhancement']
 6 | 
 7 | ---
 8 | 
 9 | body:
10 |   - type: markdown
11 |     attributes:
12 |       value: |
13 |         Thanks for taking the time to fill out this template!
14 |   - type: textarea
15 |     id: style-idea
16 |     attributes:
17 |       label: What's the style idea?
18 |       placeholder: Add descriptions
19 |       value: 'We need to improve  '
20 |     validations:
21 |       required: true
22 |   - type: textarea
23 |     id: screenshots
24 |     attributes:
25 |       label: Add screenshots
26 |       description: Add screenshots to see the demo
27 |       placeholder: Add screenshots
28 |       value: 'Add screenshots'
29 |   - type: checkboxes
30 |     id: terms
31 |     attributes:
32 |       label: Code of Conduct
33 |       description: By submitting this issue, you agree to follow our Code of Conduct
34 |       options:
35 |         - label: I agree to follow this project's Code of Conduct
36 |         required: true
37 | 
38 |         - label: I want to work on this issue
39 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!-- Pull Request Template -->
 2 | 
 3 | ## Related Issue
 4 | 
 5 | Closes #issue_number
 6 | 
 7 | <!-- If there is no issue number, the PR will not be merged. Therefore, please ensure that the issue number is added -->
 8 | 
 9 | ## Description
10 | 
11 | <!-- Write a brief description of the changes made in the PR. Explain the problem being addressed, or any relevant
12 | information. -->
13 | 
14 | ## Screenshots (if applicable)
15 | 
16 | |      Original       |      Updated       |
17 | | :-----------------: | :----------------: |
18 | | original screenshot | updated screenshot |
19 | 
20 | ## Checklist 
21 | 
22 | <!-- [x] - To mark checked, put 'x' in place of ' '(space)  -->
23 | <!-- [ ] - Keep unchecked using ' '(space)  -->
24 | 
25 | - [ ] My code adheres to the established style guidelines of the project.
26 | - [ ] I have included comments in areas that may be difficult to understand.
27 | - [ ] My changes have not introduced any new warnings.
28 | - [ ] I have conducted a self-review of my code.


--------------------------------------------------------------------------------
/.github/pr-title-checker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "LABEL": {
 3 |       "name": "title needs formatting",
 4 |       "color": "F9D0C4"
 5 |     },
 6 |     "CHECKS": {
 7 |       "prefixes": [
 8 |         "build: ",
 9 |         "chore: ",
10 |         "docs: ",
11 |         "feat: ",
12 |         "fix: ",
13 |         "perf: ",
14 |         "refactor: ",
15 |         "revert: ",
16 |         "style: ",
17 |         "test: "
18 |       ]
19 |     },
20 |     "MESSAGES": {
21 |       "success": "Everything is great. Status: 200",
22 |       "failure": "PR title does not conform to the required format. Please use one of the specified prefixes followed by a colon and a space. Status: 400",
23 |       "notice": ""
24 |     }
25 |   }


--------------------------------------------------------------------------------
/.github/workflows/codeql.yml:
--------------------------------------------------------------------------------
 1 | name: 'CodeQL'
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: ['main']
 6 |   pull_request:
 7 |     branches: ['main']
 8 |   schedule:
 9 |     - cron: '19 19 * * 0'
10 | 
11 | jobs:
12 |   analyze:
13 |     name: Analyze
14 |     runs-on: ${{ (matrix.language == 'javascript' && 'ubuntu-latest') || 'windows-latest' }}
15 |     timeout-minutes: ${{ (matrix.language == 'javascript' && 120) || 360 }}
16 |     permissions:
17 |       actions: read
18 |       contents: read
19 |       security-events: write
20 | 
21 |     strategy:
22 |       fail-fast: false
23 |       matrix:
24 |         language: ['javascript']
25 | 
26 |     steps:
27 |       - name: Checkout repository
28 |         uses: actions/checkout@v4
29 | 
30 |       # Initializes the CodeQL tools for scanning.
31 |       - name: Initialize CodeQL
32 |         uses: github/codeql-action/init@v3
33 |         with:
34 |           languages: ${{ matrix.language }}
35 | 
36 |       - name: Autobuild
37 |         uses: github/codeql-action/autobuild@v3
38 | 
39 |       - name: Perform CodeQL Analysis
40 |         uses: github/codeql-action/analyze@v3
41 |         with:
42 |           category: '/language:${{matrix.language}}'
43 | 


--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
 1 | name: Greetings
 2 | 
 3 | on: [pull_request, issues]
 4 | 
 5 | jobs:
 6 |   greeting:
 7 |     runs-on: ubuntu-latest
 8 |     permissions:
 9 |       issues: write
10 |       pull-requests: write
11 |     steps:
12 |     - uses: actions/first-interaction@v1
13 |       with:
14 |         repo-token: ${{ secrets.GITHUB_TOKEN }}
15 |         issue-message: 'Hey, @${{ github.actor }} welcome to Top_Secrets repository.🎊 Thank you so much for taking the time to point this out.🙌'
16 |         pr-message: 'Hey, @${{ github.actor }} welcome to Top_Secrets repository.🎊 Thank you so much for taking the effort to make our project better! 🙌 Keep making such awesome contributions!'


--------------------------------------------------------------------------------
/.github/workflows/pr-title-checker.yml:
--------------------------------------------------------------------------------
 1 | name: 'PR Title Checker'
 2 | on:
 3 |   pull_request_target:
 4 |     types:
 5 |       - opened
 6 |       - edited
 7 |       - synchronize
 8 |       - labeled
 9 |       - unlabeled
10 | 
11 | jobs:
12 |   check:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: thehanimo/pr-title-checker@v1.3.7
16 |         with:
17 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
18 |           pass_on_octokit_error: false
19 |           configuration_path: '.github/pr-title-checker.json'


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .env


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 |  # Top_Secrets
  4 |  ![License](https://img.shields.io/github/license/Kritika30032002/Top_Secrets.svg?style=for-the-badge) ![Repo Size](https://img.shields.io/github/languages/code-size/Kritika30032002/Top_Secrets.svg?style=for-the-badge) ![TOP_LANGUAGE](https://img.shields.io/github/languages/top/Kritika30032002/Top_Secrets.svg?style=for-the-badge) ![FORKS](https://img.shields.io/github/forks/Kritika30032002/Top_Secrets.svg?style=for-the-badge&social) ![Stars](https://img.shields.io/github/stars/Kritika30032002/Top_Secrets.svg?style=for-the-badge)
  5 |  
  6 |  [![Discord Server](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/GQCMP8rhB2)
  7 | 
  8 |  
  9 |  This is a website that allows user to add their secrets anonymously to the website. Thus makes its interesting. One can add their secrets that they don't want to share with anyone.
 10 |     
 11 | </div>
 12 | 
 13 | ## 🖼️ Demo Video of Website
 14 | [screen-capture.webm](https://user-images.githubusercontent.com/83400697/204582783-e3def69a-61f6-4421-972f-34134ec4528b.webm)
 15 | 
 16 | ## 📖 Table of Contents
 17 | 
 18 | - [Technologies](#-technologies)
 19 | - [Project Setup](#-project-setup)
 20 | - [Contributing](#-contributing)
 21 |    - [How to Get Started with Open Source](#-how-to-get-started-with-open-source)
 22 |    - [Things to do After Making a Change](#-after-making-a-change)
 23 |    - [Rules](#-rules)
 24 |    - [Reporting a Bug or Discussing a Feature Idea](#-reporting-a-bug-or-discussing-a-feature-idea)
 25 |    - [Fixing a Bug or Implement a new Feature](#-fixing-a-bug-or-implementing-a-new-feature)
 26 | - [Thanks to all contributors](#-thanks-to-all-contributors)
 27 | - [License](#-license)
 28 | 
 29 |  ## 🧰 Technologies
 30 | 
 31 | - HTML
 32 | - Javascript
 33 | - CSS
 34 | - Bootstrap
 35 | - Nodejs
 36 | - Expressjs
 37 | - MongoDB
 38 | 
 39 | ## 🚀 Project Setup
 40 | To get started with locally running the app, follow these simple steps:
 41 | 
 42 | 1. **Clone this repository**: Begin by cloning the Top Secrets repository to your local machine using the following command:
 43 |     ```bash
 44 |     git clone https://github.com/Kritika30032002/Top_Secrets.git
 45 |     ```
 46 | 2. **Install the dependencies**: Navigate to the cloned repository and install the required dependencies by running the following command:
 47 |     ```bash
 48 |     npm install --force
 49 |     ```
 50 | 3. **Create a `.env` file**: Create a `.env` file in the root directory of your project and add the following environment variables:
 51 |     ```env
 52 |     GOOGLE_ID=<YOUR GOOGLE OAUTH CLIENT ID>
 53 |     GOOGLE_SECRET=<YOUR GOOGLE OAUTH SECRET KEY>
 54 |     FACEBOOK_APP_ID=<YOUR FACEBOOK APP ID>
 55 |     FACEBOOK_APP_SECRET=<YOUR FACEBOOK SECRET KEY>
 56 |     
 57 |     PUBLIC_BASENAME=http://localhost:3000/
 58 |     PORT=3000
 59 |     MONGO_SERVER=mongodb://127.0.0.1:27017
 60 |     ```
 61 | 
 62 |     - `GOOGLE_ID` & `GOOGLE_SECRET` : Refer to this video for **Google OAuth Client ID and Secret key** : [Click Here](https://www.youtube.com/watch?v=XiuA-xO5Pz8) 
 63 |     - `FACEBOOK_APP_ID` & `FACEBOOK_APP_SECRET` : Refer to this video for **Facebook ID and Secret key**: [Click Here](https://www.youtube.com/watch?v=LLlpH3vZVkg&t=258s)
 64 |     - `PUBLIC_BASENAME` : The base URL for the Express app. For local setup, `http://localhost:3000/`
 65 |     - `PORT` : The port on which the Express app is running.
 66 |     - `MONGO_SERVER` : The MongoDB URI. A MongoDB URI looks like the below examples. Check the video for local setup on [Windows](https://www.youtube.com/watch?v=gB6WLkSrtJk) & [Ubuntu](https://www.youtube.com/watch?v=HSIh8UswVVY). For a free cloud MongoDB database check [this video](https://www.youtube.com/watch?v=jXgJyuBeb_o). 
 67 |   
 68 |     > **Locally running instance**: `mongodb://127.0.0.1:27017/`
 69 |     > 
 70 |     > **Hosted on the internet**: `mongodb+srv://<username>:<password>@somecluster.some.mongodb.net/`
 71 |     
 72 | 4. **Run the project**: Once you have installed the dependencies and added the required environment variables, you are ready to run the project. To start the development server, run the following command:
 73 |     ```bash
 74 |     node app.js
 75 |     ```
 76 |     or use `nodemon` to run it in background for a detailed log & better development experience
 77 |    ```bash
 78 |    npx nodemon app.js
 79 |    ```
 80 | 
 81 |    Great you have successfully run the app! **Now get coding!**
 82 | 
 83 | <div  align="center">
 84 |     <img  height="200px"  src="https://user-images.githubusercontent.com/77617189/192947926-37284128-9965-46a4-b29b-c75e47b2f76b.svg"  />
 85 | </div>
 86 | 
 87 | ## 🌱 Contributing
 88 | 
 89 | **I heartily welcome any and all contributions that match our engineering standards! :raised_hands:**
 90 | 
 91 | That being said, this codebase isn't your typical open source project because it's not a library or package with a limited scope—it's our entire product.
 92 | 
 93 | * Contributions make the open source community such an amazing place to learn, inspire, and create.
 94 | * Any contributions you make are greatly appreciated.
 95 | * Check out our contribution guidelines for more information.
 96 | 
 97 | <div align="center">
 98 | 
 99 | <pre>Don't forget to leave a star✨ </pre>
100 | <h2>HAPPY CONTRIBUTING!!</h2>
101 | 
102 | </div>
103 | 
104 | ### 🧑‍💻 How to get started with Open Source
105 | 
106 | Here's a quick run down on how to get started with open source, first of all let's know some basic terminologies:
107 | 
108 | - Git: is a versioning system that let's you store your code and code history on your local computer preventing loses and allowing sharing of that code
109 | - Github: is a server that let's you store the history in a database
110 | - Open Source: A project is said to be open sourced if you can see the code on GitHub
111 | - Fork: This is a copy that you make of a project on GitHub, it gets added to your repositories
112 | - Repository: A project on GitHub is called a repository
113 | - Pull Request: This is a fix for an issue proposed to be done in a project, this consists of you editing a file in the project.
114 | - Issue: An issue is a change that should be done in a project, can be a bug, a new feature or a suggestion to a project
115 | - Branch: A branch is a new workspace derived from the default workspace(main or master), it allows you to work on something without affecting the original code.
116 | - Star: When you star a repositiory, it gets saved at your profile and you can easily re-visit it later.
117 | 
118 | Now you know some basic terms, let's get into how to get started with some resources to let you understand open source better:
119 | 
120 | - [Crash Course to Git and Github](https://www.youtube.com/watch?v=apGV9Kg7ics) - Video
121 | - [A complete Guide to Open Source](https://www.youtube.com/watch?v=yzeVMecydCE) - Video
122 | - [Guide to Open Source](https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/) - Article
123 | 
124 | ### 🥂 After making a change
125 | 
126 | 1. Create a new branch
127 | ```
128 | git checkout -b YourBranchName
129 | ```
130 | 2. Add it to staging area
131 | ```
132 | git add <path to the file you worked on>
133 | ```
134 | 3. Commit your changes with
135 | ```
136 | git commit -m "message"
137 | ```
138 | 4. Push your changes
139 | ```
140 | git push
141 | ```
142 | 
143 | ### 📃 Rules
144 | 
145 | - **No `console.log`s in any file**: We use the `debug` module across the codebase to log debugging information in development only. Never commit a file that contains a `console.log` as CI will fail your build. The only exceptions are errors, which you can log, but you have to use `console.error` to be explicit about it
146 | - **Code reviews**: All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose.
147 | 
148 | ### 🕵 Reporting a bug or discussing a feature idea
149 | 
150 | If you found a technical bug on the website or have ideas for features we should implement, the issue tracker is the best place to share your ideas.  ([click here to open a new issue](https://github.com/Kritika30032002/Top_Secrets/issues))
151 | 
152 | ### ✨ Fixing a bug or implementing a new feature
153 | 
154 | - If you find a bug on Project and open a PR that fixes it we'll review it as soon as possible to ensure it matches our engineering standards.
155 | - If you want to implement a new feature, open an issue first to discuss what it'd look like .
156 | - If you want to contribute but are unsure to start, we have [a "good first issue" label](https://github.com/Kritika30032002/Top_Secrets/contribute) which is applied to newcomer-friendly issues and pick something you like!
157 | - Want to fix a bug or implement an agreed-upon feature? Great, jump to the [local setup instructions](#project-setup)!
158 | 
159 | ---
160 | 
161 | ### 👀 Our Contributors
162 | 
163 | - We extend our heartfelt gratitude for your invaluable contribution to our project! Your efforts play a pivotal role in elevating this project to greater heights.
164 | - Make sure you show some love by giving ⭐ to our repository.
165 | 
166 | <div align="center">
167 |   <a href="https://github.com/Kritika30032002/Top_Secrets/">
168 |     <img src="https://contrib.rocks/image?repo=Kritika30032002/Top_Secrets&&max=1000" />
169 |   </a>
170 | </div>
171 | 
172 | ---
173 | 
174 | ## 💪 Thanks to all Contributors
175 | 
176 | Thanks a lot for spending your time helping Top_Secrets to grow. Thanks a lot! Keep rocking 🍻
177 | Also Give it a Star 🌟, If you loved contributing to the project.
178 | 
179 | ## 📄 License
180 | 
181 | MIT License, see the [LICENSE](./LICENSE) file.
182 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | require("dotenv").config();
  2 | const express = require("express");
  3 | const bodyParser = require("body-parser");
  4 | const ejs = require("ejs");
  5 | const mongoose = require("mongoose");
  6 | const session = require("express-session");
  7 | const passport = require("passport");
  8 | const passportLocalMongoose = require("passport-local-mongoose");
  9 | const findOrCreate = require("mongoose-findorcreate");
 10 | const LocalStrategy = require("passport-local").Strategy;
 11 | const GoogleStrategy = require("passport-google-oauth20").Strategy;
 12 | const FacebookStrategy = require("passport-facebook").Strategy;
 13 | 
 14 | const app = express();
 15 | 
 16 | app.use(express.static("public"));
 17 | app.use(express.json());
 18 | app.set("view engine", "ejs");
 19 | app.use(bodyParser.urlencoded({ extended: true }));
 20 | 
 21 | app.use(
 22 |   session({
 23 |     secret: "Our little secret.",
 24 |     resave: false,
 25 |     saveUninitialized: false,
 26 |   })
 27 | );
 28 | 
 29 | app.use(passport.initialize());
 30 | app.use(passport.session());
 31 | 
 32 | mongoose.set('strictQuery', false);
 33 | 
 34 | const userSchema = new mongoose.Schema({
 35 |   username: String,
 36 |   password: String,
 37 |   googleId: String,
 38 |   facebookId: String,
 39 |   secret: [
 40 |     {
 41 |       title: { type: String, required: true },
 42 |       upvote: { type: Number, default: 0 },
 43 |       downvote: { type: Number, default: 0 },
 44 |     }
 45 |   ],
 46 | });
 47 | 
 48 | userSchema.plugin(passportLocalMongoose);
 49 | userSchema.plugin(findOrCreate);
 50 | 
 51 | const User = mongoose.model("User", userSchema);
 52 | 
 53 | passport.use(User.createStrategy());
 54 | 
 55 | passport.serializeUser(function (user, done) {
 56 |   done(null, user.id);
 57 | });
 58 | 
 59 | passport.deserializeUser(function (id, done) {
 60 |   User.findById(id, function (err, user) {
 61 |     done(err, user);
 62 |   });
 63 | });
 64 | 
 65 | passport.use(
 66 |   new GoogleStrategy(
 67 |     {
 68 |       clientID: process.env.GOOGLE_ID,
 69 |       clientSecret: process.env.GOOGLE_SECRET,
 70 |       callbackURL: `${process.env.PUBLIC_BASENAME}auth/google/secrets`,
 71 |     },
 72 |     function (accessToken, refreshToken, profile, cb) {
 73 |       User.findOne({ googleId: profile.id }, (err, existingUser) => {
 74 |         if (err) {
 75 |           return cb(err);
 76 |         }
 77 | 
 78 |         if (existingUser) {
 79 |           console.log("User already exists, return the existing user");
 80 |           return cb(null, existingUser);
 81 |         }
 82 | 
 83 |         console.log("User does not exist, create a new one")
 84 |         const newUser = new User({ googleId: profile.id, username: profile.displayName });
 85 |         console.log("id" + newUser.googleId);
 86 |         console.log("username" + newUser.username);
 87 |         newUser.save((err, user) => {
 88 |           if (err) {
 89 |             console.error('Error saving new user:', err);
 90 |             return cb(err, null);
 91 |           }
 92 | 
 93 |           console.log('New User saved successfully:', user);
 94 |           return cb(null, user);
 95 |         });
 96 |       });
 97 |     }
 98 |   )
 99 | );
100 | 
101 | passport.use(
102 |   new FacebookStrategy(
103 |     {
104 |       clientID: process.env.FACEBOOK_APP_ID,
105 |       clientSecret: process.env.FACEBOOK_APP_SECRET,
106 |       callbackURL: `${process.env.PUBLIC_BASENAME}auth/facebook/secrets`,
107 |     },
108 |     function (accessToken, refreshToken, profile, cb) {
109 |       User.findOne({ facebookId: profile.id }, (err, existingUser) => {
110 |         if (err) {
111 |           return cb(err);
112 |         }
113 | 
114 |         if (existingUser) {
115 |           console.log("User already exists, return the existing user");
116 |           return cb(null, existingUser);
117 |         }
118 | 
119 |         console.log("User does not exist, create a new one")
120 |         const newUser = new User({ facebookId: profile.id, username: profile.displayName });
121 |         console.log("id" + newUser.facebookId);
122 |         console.log("username" + newUser.username);
123 |         newUser.save((err, user) => {
124 |           if (err) {
125 |             console.error('Error saving new user:', err);
126 |             return cb(err, null);
127 |           }
128 | 
129 |           console.log('New User saved successfully:', user);
130 |           return cb(null, user);
131 |         });
132 |       });
133 |     }
134 |   )
135 | );
136 | 
137 | app.get("/", function (req, res) {
138 |   res.render("home");
139 | });
140 | 
141 | app.get(
142 |   "/auth/google",
143 |   passport.authenticate("google", { scope: ["profile"] })
144 | );
145 | 
146 | app.get(
147 |   "/auth/google/secrets",
148 |   passport.authenticate("google", { failureRedirect: "/login" }),
149 |   function (req, res) {
150 |     res.redirect("/secrets");
151 |   }
152 | );
153 | 
154 | app.get("/auth/facebook", passport.authenticate("facebook"));
155 | 
156 | app.get(
157 |   "/auth/facebook/secrets",
158 |   passport.authenticate("facebook", { failureRedirect: "/login" }),
159 |   function (req, res) {
160 |     res.redirect("/secrets");
161 |   }
162 | );
163 | 
164 | app.get("/login", function (req, res) {
165 |   res.render("login");
166 | });
167 | 
168 | app.get("/about", function (req, res) {
169 |   res.render("about");
170 | });
171 | 
172 | app.get("/contact", function (req, res) {
173 |   res.render("contact");
174 | });
175 | 
176 | app.get("/register", function (req, res) {
177 |   res.render("register");
178 | });
179 | 
180 | app.get("/privacy", function (req, res) {
181 |   res.render("privacy");
182 | });
183 | 
184 | app.post("/register", function (req, res) {
185 |   User.register(
186 |     { username: req.body.username },
187 |     req.body.password,
188 |     function (err, user) {
189 |       if (err) {
190 |         console.log(err);
191 |         res.render("register", { error: err.message });
192 |       } else {
193 |         passport.authenticate("local")(req, res, function () {
194 |           res.redirect("/login");
195 |         });
196 |       }
197 |     }
198 |   );
199 | });
200 | 
201 | app.post("/login", function (req, res, next) {
202 |   passport.authenticate("local", function (err, user, info) {
203 |     if (err) {
204 |       return next(err);
205 |     }
206 |     if (!user) {
207 |       return res.render("login", { error: info.message });
208 |     }
209 |     req.logIn(user, function (err) {
210 |       if (err) {
211 |         return next(err);
212 |       }
213 |       return res.redirect("/secrets");
214 |     });
215 |   })(req, res, next);
216 | });
217 | 
218 | app.get("/secrets", function (req, res) {
219 |   User.find({ secret: { $ne: null } }, function (err, foundUsers) {
220 |     if (err) {
221 |       console.log(err);
222 |     } else {
223 |       if (foundUsers) {
224 |         res.render("secrets", {
225 |           usersWithSecrets: foundUsers,
226 |           upvoted: false,
227 |           downvoted: false,
228 |         });
229 |       }
230 |     }
231 |   });
232 | });
233 | 
234 | app.get("/submit-secret-form", function (req, res) {
235 |   if (req.isAuthenticated()) {
236 |     res.render("secret-form");
237 |   } else {
238 |     res.redirect("/login");
239 |   }
240 | });
241 | 
242 | app.post("/submit-secret-form", function (req, res) {
243 |   const submittedSecret = req.body.secret;
244 |   User.findById(req.user.id, function (err, foundUser) {
245 |     if (err) {
246 |       console.log(err);
247 |     } else {
248 |       if (foundUser) {
249 |         foundUser.secret.push({ title: submittedSecret });
250 | 
251 |         foundUser.save(function (err) {
252 |           if (err) {
253 |             console.log(err)
254 |           } else {
255 |             res.redirect("/secrets");
256 |           }
257 |         });
258 |       }
259 |     }
260 |   });
261 | });
262 | 
263 | app.get("/logout", function (req, res) {
264 |   req.logout(function (err) {
265 |     if (err) {
266 |       console.error('Error during logout:', err);
267 |       return res.redirect("/");
268 |     }
269 |     res.redirect("/");
270 |   });
271 | });
272 | 
273 | app.post('/api/votes', async (req, res) => {
274 |   try {
275 |     const { upvoteCount, downvoteCount, index, username } = req.body;
276 | 
277 |     const user = await User.findOne({ username });
278 | 
279 |     if (!user) {
280 |       return res.status(404).json({ error: 'User not found' });
281 |     }
282 | 
283 |     if (index < 0 || index >= user.secret.length) {
284 |       return res.status(400).json({ error: 'Invalid secret index' });
285 |     }
286 | 
287 |     user.secret[index].upvote = upvoteCount;
288 |     user.secret[index].downvote = downvoteCount;
289 | 
290 |     await user.save();
291 | 
292 |     res.json({ message: 'Vote updated successfully', user });
293 |   } catch (error) {
294 |     console.error(error);
295 |     res.status(500).json({ error: 'Internal server error' });
296 |   }
297 | });
298 | 
299 | app.get('*', (req, res) => {
300 |   res.status(404).render("404-page");
301 | });
302 | 
303 | app.listen(process.env.PORT, () => {
304 |   mongoose
305 |     .connect(process.env.MONGO_SERVER, {
306 |       useNewUrlParser: true,
307 |       useUnifiedTopology: true,
308 |     })
309 |     .then(() => {
310 |       console.log("Database connected successfully");
311 |     })
312 |     .catch((error) => {
313 |       console.log("DB connection failed", process.env.MONGO_SERVER);
314 |     });
315 |   console.log(`Server is running on ${process.env.PORT}`);
316 | });
317 | 


--------------------------------------------------------------------------------
/code_of_conduct.md:
--------------------------------------------------------------------------------
 1 | <h2>Code Of Conduct-TOP_SECRETS</h2>
 2 | 
 3 | Our Pledge
 4 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
 5 | 
 6 | Our Standards
 7 | Examples of behavior that contributes to a positive environment for our community include:
 8 | 
 9 | Demonstrating empathy and kindness toward other people
10 | Being respectful of differing opinions, viewpoints, and experiences
11 | Giving and gracefully accepting constructive feedback
12 | Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
13 | Focusing on what is best not just for us as individuals, but for the overall community
14 | Examples of unacceptable behavior include:
15 | 
16 | The use of sexualized language or imagery, and sexual attention or advances
17 | Trolling, insulting or derogatory comments, and personal or political attacks
18 | Public or private harassment
19 | Publishing others' private information, such as a physical or email address, without their explicit permission
20 | Other conduct which could reasonably be considered inappropriate in a professional setting
21 | Our Responsibilities
22 | Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any instances of unacceptable behavior.
23 | 
24 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behavior that they deem inappropriate, threatening, offensive, or harmful.
25 | 
26 | Scope
27 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
28 | 
29 | Enforcement:
30 | 
31 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at <>. All complaints will be reviewed and investigated promptly and fairly.
32 | 
33 | Attribution
34 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at http://contributor-covenant.org/version/1/4


--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
 1 | Contributing to TOP_SECRETS
 2 | Thank you for considering contributing to TOP_SECRETS!
 3 | Whether it's fixing a bug , proposing a new feature , or improving documentation, your contributions are greatly appreciated.
 4 | 
 5 | Code of Conduct
 6 | Please make sure to read and follow our Code of Conduct before contributing to the project.
 7 | 
 8 | Getting Started
 9 | Fork the repository:
10 | 
11 | Create a personal copy of the TOP_SECRETS repository on Github.
12 | You can do this by clicking the "Fork" button on the TOP_SECRETS repository page.
13 | Clone the repository locally:
14 | 
15 | After forking the repository, clone it locally on your computer so that you can work on the code and make changes.
16 | git clone https://github.com/<YOUR-USERNAME>/TOP_SECRETS.git
17 | Create a new branch:
18 | 
19 | Before making any changes, create a new branch in your local repository.
20 | This is done to ensure that your changes are isolated from the main branch and can be easily reviewed and merged later.
21 | git checkout -b <branch-name>
22 | Make changes:
23 | 
24 | Start making changes to the code, fixing bugs, adding new features, etc.
25 | Push changes to the fork:
26 | 
27 | Once the changes have been made, push them to your fork on Github.
28 | git add .
29 | git commit -m "Description of changes"
30 | git push origin <branch-name>
31 | Submitting a Pull Request
32 | Make sure your changes are well-documented and include relevant tests.
33 | 
34 | If you've added new functionality, include appropriate documentation.
35 | 
36 | Follow the coding conventions used in the project.
37 | 
38 | Before submitting your pull request, make sure the following items have been checked:
39 | 
40 | All tests pass and the build is successful.
41 | Your changes do not produce any new warnings or errors.
42 | Your changes have been thoroughly tested on different platforms and browsers.
43 | Your changes do not break backward compatibility.
44 | When you're ready, submit a pull request and include a descriptive title and a detailed description of your changes.
45 | 
46 | Additional Resources
47 | Project documentation
48 | Issue tracker
49 | Thank you again for your interest in contributing to TOP_SECRETS.
50 | 
51 | We look forward to working with you!


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "secrets---authentication",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "bcrypt": "^5.1.0",
14 |     "body-parser": "^1.20.1",
15 |     "dotenv": "^16.0.3",
16 |     "ejs": "^3.1.8",
17 |     "express": "^4.18.2",
18 |     "express-session": "^1.17.3",
19 |     "md5": "^2.3.0",
20 |     "mongoose": "^6.12.7",
21 |     "mongoose-encryption": "^2.1.2",
22 |     "mongoose-findorcreate": "^3.0.0",
23 |     "nodemon": "^3.0.2",
24 |     "passport": "^0.6.0",
25 |     "passport-facebook": "^3.0.0",
26 |     "passport-google-oauth20": "^2.0.0",
27 |     "passport-local": "^1.0.0",
28 |     "passport-local-mongoose": "^7.1.2",
29 |     "toastify": "^2.0.1",
30 |     "toastr": "^2.1.4"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/css/bootstrap-social.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Social Buttons for Bootstrap
  3 |  *
  4 |  * Copyright 2013-2016 Panayiotis Lipiridis
  5 |  * Licensed under the MIT License
  6 |  *
  7 |  * https://github.com/lipis/bootstrap-social
  8 |  */
  9 | 
 10 | .btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
 11 | .btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
 12 | .btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
 13 | .btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
 14 | .btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon>:first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
 15 | .btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg>:first-child{line-height:45px;width:45px;font-size:1.8em}
 16 | .btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm>:first-child{line-height:28px;width:28px;font-size:1.4em}
 17 | .btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs>:first-child{line-height:20px;width:20px;font-size:1.2em}
 18 | .btn-social-icon>:first-child{border:none;text-align:center;width:100% !important}
 19 | .btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
 20 | .btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
 21 | .btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
 22 | .btn-adn{color:#fff;background-color:#d87a68;border-color:rgba(0,0,0,0.2)}.btn-adn:focus,.btn-adn.focus{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
 23 | .btn-adn:hover{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}
 24 | .btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{color:#fff;background-color:#ce563f;border-color:rgba(0,0,0,0.2)}.btn-adn:active:hover,.btn-adn.active:hover,.open>.dropdown-toggle.btn-adn:hover,.btn-adn:active:focus,.btn-adn.active:focus,.open>.dropdown-toggle.btn-adn:focus,.btn-adn:active.focus,.btn-adn.active.focus,.open>.dropdown-toggle.btn-adn.focus{color:#fff;background-color:#b94630;border-color:rgba(0,0,0,0.2)}
 25 | .btn-adn:active,.btn-adn.active,.open>.dropdown-toggle.btn-adn{background-image:none}
 26 | .btn-adn.disabled:hover,.btn-adn[disabled]:hover,fieldset[disabled] .btn-adn:hover,.btn-adn.disabled:focus,.btn-adn[disabled]:focus,fieldset[disabled] .btn-adn:focus,.btn-adn.disabled.focus,.btn-adn[disabled].focus,fieldset[disabled] .btn-adn.focus{background-color:#d87a68;border-color:rgba(0,0,0,0.2)}
 27 | .btn-adn .badge{color:#d87a68;background-color:#fff}
 28 | .btn-bitbucket{color:#fff;background-color:#205081;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:focus,.btn-bitbucket.focus{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
 29 | .btn-bitbucket:hover{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}
 30 | .btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{color:#fff;background-color:#163758;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:active:hover,.btn-bitbucket.active:hover,.open>.dropdown-toggle.btn-bitbucket:hover,.btn-bitbucket:active:focus,.btn-bitbucket.active:focus,.open>.dropdown-toggle.btn-bitbucket:focus,.btn-bitbucket:active.focus,.btn-bitbucket.active.focus,.open>.dropdown-toggle.btn-bitbucket.focus{color:#fff;background-color:#0f253c;border-color:rgba(0,0,0,0.2)}
 31 | .btn-bitbucket:active,.btn-bitbucket.active,.open>.dropdown-toggle.btn-bitbucket{background-image:none}
 32 | .btn-bitbucket.disabled:hover,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket:hover,.btn-bitbucket.disabled:focus,.btn-bitbucket[disabled]:focus,fieldset[disabled] .btn-bitbucket:focus,.btn-bitbucket.disabled.focus,.btn-bitbucket[disabled].focus,fieldset[disabled] .btn-bitbucket.focus{background-color:#205081;border-color:rgba(0,0,0,0.2)}
 33 | .btn-bitbucket .badge{color:#205081;background-color:#fff}
 34 | .btn-dropbox{color:#fff;background-color:#1087dd;border-color:rgba(0,0,0,0.2)}.btn-dropbox:focus,.btn-dropbox.focus{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
 35 | .btn-dropbox:hover{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}
 36 | .btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{color:#fff;background-color:#0d6aad;border-color:rgba(0,0,0,0.2)}.btn-dropbox:active:hover,.btn-dropbox.active:hover,.open>.dropdown-toggle.btn-dropbox:hover,.btn-dropbox:active:focus,.btn-dropbox.active:focus,.open>.dropdown-toggle.btn-dropbox:focus,.btn-dropbox:active.focus,.btn-dropbox.active.focus,.open>.dropdown-toggle.btn-dropbox.focus{color:#fff;background-color:#0a568c;border-color:rgba(0,0,0,0.2)}
 37 | .btn-dropbox:active,.btn-dropbox.active,.open>.dropdown-toggle.btn-dropbox{background-image:none}
 38 | .btn-dropbox.disabled:hover,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox:hover,.btn-dropbox.disabled:focus,.btn-dropbox[disabled]:focus,fieldset[disabled] .btn-dropbox:focus,.btn-dropbox.disabled.focus,.btn-dropbox[disabled].focus,fieldset[disabled] .btn-dropbox.focus{background-color:#1087dd;border-color:rgba(0,0,0,0.2)}
 39 | .btn-dropbox .badge{color:#1087dd;background-color:#fff}
 40 | .btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:focus,.btn-facebook.focus{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
 41 | .btn-facebook:hover{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}
 42 | .btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{color:#fff;background-color:#2d4373;border-color:rgba(0,0,0,0.2)}.btn-facebook:active:hover,.btn-facebook.active:hover,.open>.dropdown-toggle.btn-facebook:hover,.btn-facebook:active:focus,.btn-facebook.active:focus,.open>.dropdown-toggle.btn-facebook:focus,.btn-facebook:active.focus,.btn-facebook.active.focus,.open>.dropdown-toggle.btn-facebook.focus{color:#fff;background-color:#23345a;border-color:rgba(0,0,0,0.2)}
 43 | .btn-facebook:active,.btn-facebook.active,.open>.dropdown-toggle.btn-facebook{background-image:none}
 44 | .btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled.focus,.btn-facebook[disabled].focus,fieldset[disabled] .btn-facebook.focus{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
 45 | .btn-facebook .badge{color:#3b5998;background-color:#fff}
 46 | .btn-flickr{color:#fff;background-color:#ff0084;border-color:rgba(0,0,0,0.2)}.btn-flickr:focus,.btn-flickr.focus{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
 47 | .btn-flickr:hover{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}
 48 | .btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{color:#fff;background-color:#cc006a;border-color:rgba(0,0,0,0.2)}.btn-flickr:active:hover,.btn-flickr.active:hover,.open>.dropdown-toggle.btn-flickr:hover,.btn-flickr:active:focus,.btn-flickr.active:focus,.open>.dropdown-toggle.btn-flickr:focus,.btn-flickr:active.focus,.btn-flickr.active.focus,.open>.dropdown-toggle.btn-flickr.focus{color:#fff;background-color:#a80057;border-color:rgba(0,0,0,0.2)}
 49 | .btn-flickr:active,.btn-flickr.active,.open>.dropdown-toggle.btn-flickr{background-image:none}
 50 | .btn-flickr.disabled:hover,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr:hover,.btn-flickr.disabled:focus,.btn-flickr[disabled]:focus,fieldset[disabled] .btn-flickr:focus,.btn-flickr.disabled.focus,.btn-flickr[disabled].focus,fieldset[disabled] .btn-flickr.focus{background-color:#ff0084;border-color:rgba(0,0,0,0.2)}
 51 | .btn-flickr .badge{color:#ff0084;background-color:#fff}
 52 | .btn-foursquare{color:#fff;background-color:#f94877;border-color:rgba(0,0,0,0.2)}.btn-foursquare:focus,.btn-foursquare.focus{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
 53 | .btn-foursquare:hover{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}
 54 | .btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{color:#fff;background-color:#f71752;border-color:rgba(0,0,0,0.2)}.btn-foursquare:active:hover,.btn-foursquare.active:hover,.open>.dropdown-toggle.btn-foursquare:hover,.btn-foursquare:active:focus,.btn-foursquare.active:focus,.open>.dropdown-toggle.btn-foursquare:focus,.btn-foursquare:active.focus,.btn-foursquare.active.focus,.open>.dropdown-toggle.btn-foursquare.focus{color:#fff;background-color:#e30742;border-color:rgba(0,0,0,0.2)}
 55 | .btn-foursquare:active,.btn-foursquare.active,.open>.dropdown-toggle.btn-foursquare{background-image:none}
 56 | .btn-foursquare.disabled:hover,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare:hover,.btn-foursquare.disabled:focus,.btn-foursquare[disabled]:focus,fieldset[disabled] .btn-foursquare:focus,.btn-foursquare.disabled.focus,.btn-foursquare[disabled].focus,fieldset[disabled] .btn-foursquare.focus{background-color:#f94877;border-color:rgba(0,0,0,0.2)}
 57 | .btn-foursquare .badge{color:#f94877;background-color:#fff}
 58 | .btn-github{color:#fff;background-color:#444;border-color:rgba(0,0,0,0.2)}.btn-github:focus,.btn-github.focus{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
 59 | .btn-github:hover{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}
 60 | .btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{color:#fff;background-color:#2b2b2b;border-color:rgba(0,0,0,0.2)}.btn-github:active:hover,.btn-github.active:hover,.open>.dropdown-toggle.btn-github:hover,.btn-github:active:focus,.btn-github.active:focus,.open>.dropdown-toggle.btn-github:focus,.btn-github:active.focus,.btn-github.active.focus,.open>.dropdown-toggle.btn-github.focus{color:#fff;background-color:#191919;border-color:rgba(0,0,0,0.2)}
 61 | .btn-github:active,.btn-github.active,.open>.dropdown-toggle.btn-github{background-image:none}
 62 | .btn-github.disabled:hover,.btn-github[disabled]:hover,fieldset[disabled] .btn-github:hover,.btn-github.disabled:focus,.btn-github[disabled]:focus,fieldset[disabled] .btn-github:focus,.btn-github.disabled.focus,.btn-github[disabled].focus,fieldset[disabled] .btn-github.focus{background-color:#444;border-color:rgba(0,0,0,0.2)}
 63 | .btn-github .badge{color:#444;background-color:#fff}
 64 | .btn-google{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google:focus,.btn-google.focus{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
 65 | .btn-google:hover{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}
 66 | .btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{color:#fff;background-color:#c23321;border-color:rgba(0,0,0,0.2)}.btn-google:active:hover,.btn-google.active:hover,.open>.dropdown-toggle.btn-google:hover,.btn-google:active:focus,.btn-google.active:focus,.open>.dropdown-toggle.btn-google:focus,.btn-google:active.focus,.btn-google.active.focus,.open>.dropdown-toggle.btn-google.focus{color:#fff;background-color:#a32b1c;border-color:rgba(0,0,0,0.2)}
 67 | .btn-google:active,.btn-google.active,.open>.dropdown-toggle.btn-google{background-image:none}
 68 | .btn-google.disabled:hover,.btn-google[disabled]:hover,fieldset[disabled] .btn-google:hover,.btn-google.disabled:focus,.btn-google[disabled]:focus,fieldset[disabled] .btn-google:focus,.btn-google.disabled.focus,.btn-google[disabled].focus,fieldset[disabled] .btn-google.focus{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
 69 | .btn-google .badge{color:#dd4b39;background-color:#fff}
 70 | .btn-instagram{color:#fff;background-color:#3f729b;border-color:rgba(0,0,0,0.2)}.btn-instagram:focus,.btn-instagram.focus{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
 71 | .btn-instagram:hover{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}
 72 | .btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{color:#fff;background-color:#305777;border-color:rgba(0,0,0,0.2)}.btn-instagram:active:hover,.btn-instagram.active:hover,.open>.dropdown-toggle.btn-instagram:hover,.btn-instagram:active:focus,.btn-instagram.active:focus,.open>.dropdown-toggle.btn-instagram:focus,.btn-instagram:active.focus,.btn-instagram.active.focus,.open>.dropdown-toggle.btn-instagram.focus{color:#fff;background-color:#26455d;border-color:rgba(0,0,0,0.2)}
 73 | .btn-instagram:active,.btn-instagram.active,.open>.dropdown-toggle.btn-instagram{background-image:none}
 74 | .btn-instagram.disabled:hover,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram:hover,.btn-instagram.disabled:focus,.btn-instagram[disabled]:focus,fieldset[disabled] .btn-instagram:focus,.btn-instagram.disabled.focus,.btn-instagram[disabled].focus,fieldset[disabled] .btn-instagram.focus{background-color:#3f729b;border-color:rgba(0,0,0,0.2)}
 75 | .btn-instagram .badge{color:#3f729b;background-color:#fff}
 76 | .btn-linkedin{color:#fff;background-color:#007bb6;border-color:rgba(0,0,0,0.2)}.btn-linkedin:focus,.btn-linkedin.focus{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
 77 | .btn-linkedin:hover{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}
 78 | .btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{color:#fff;background-color:#005983;border-color:rgba(0,0,0,0.2)}.btn-linkedin:active:hover,.btn-linkedin.active:hover,.open>.dropdown-toggle.btn-linkedin:hover,.btn-linkedin:active:focus,.btn-linkedin.active:focus,.open>.dropdown-toggle.btn-linkedin:focus,.btn-linkedin:active.focus,.btn-linkedin.active.focus,.open>.dropdown-toggle.btn-linkedin.focus{color:#fff;background-color:#00405f;border-color:rgba(0,0,0,0.2)}
 79 | .btn-linkedin:active,.btn-linkedin.active,.open>.dropdown-toggle.btn-linkedin{background-image:none}
 80 | .btn-linkedin.disabled:hover,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin:hover,.btn-linkedin.disabled:focus,.btn-linkedin[disabled]:focus,fieldset[disabled] .btn-linkedin:focus,.btn-linkedin.disabled.focus,.btn-linkedin[disabled].focus,fieldset[disabled] .btn-linkedin.focus{background-color:#007bb6;border-color:rgba(0,0,0,0.2)}
 81 | .btn-linkedin .badge{color:#007bb6;background-color:#fff}
 82 | .btn-microsoft{color:#fff;background-color:#2672ec;border-color:rgba(0,0,0,0.2)}.btn-microsoft:focus,.btn-microsoft.focus{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
 83 | .btn-microsoft:hover{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}
 84 | .btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{color:#fff;background-color:#125acd;border-color:rgba(0,0,0,0.2)}.btn-microsoft:active:hover,.btn-microsoft.active:hover,.open>.dropdown-toggle.btn-microsoft:hover,.btn-microsoft:active:focus,.btn-microsoft.active:focus,.open>.dropdown-toggle.btn-microsoft:focus,.btn-microsoft:active.focus,.btn-microsoft.active.focus,.open>.dropdown-toggle.btn-microsoft.focus{color:#fff;background-color:#0f4bac;border-color:rgba(0,0,0,0.2)}
 85 | .btn-microsoft:active,.btn-microsoft.active,.open>.dropdown-toggle.btn-microsoft{background-image:none}
 86 | .btn-microsoft.disabled:hover,.btn-microsoft[disabled]:hover,fieldset[disabled] .btn-microsoft:hover,.btn-microsoft.disabled:focus,.btn-microsoft[disabled]:focus,fieldset[disabled] .btn-microsoft:focus,.btn-microsoft.disabled.focus,.btn-microsoft[disabled].focus,fieldset[disabled] .btn-microsoft.focus{background-color:#2672ec;border-color:rgba(0,0,0,0.2)}
 87 | .btn-microsoft .badge{color:#2672ec;background-color:#fff}
 88 | .btn-odnoklassniki{color:#fff;background-color:#f4731c;border-color:rgba(0,0,0,0.2)}.btn-odnoklassniki:focus,.btn-odnoklassniki.focus{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}
 89 | .btn-odnoklassniki:hover{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}
 90 | .btn-odnoklassniki:active,.btn-odnoklassniki.active,.open>.dropdown-toggle.btn-odnoklassniki{color:#fff;background-color:#d35b0a;border-color:rgba(0,0,0,0.2)}.btn-odnoklassniki:active:hover,.btn-odnoklassniki.active:hover,.open>.dropdown-toggle.btn-odnoklassniki:hover,.btn-odnoklassniki:active:focus,.btn-odnoklassniki.active:focus,.open>.dropdown-toggle.btn-odnoklassniki:focus,.btn-odnoklassniki:active.focus,.btn-odnoklassniki.active.focus,.open>.dropdown-toggle.btn-odnoklassniki.focus{color:#fff;background-color:#b14c09;border-color:rgba(0,0,0,0.2)}
 91 | .btn-odnoklassniki:active,.btn-odnoklassniki.active,.open>.dropdown-toggle.btn-odnoklassniki{background-image:none}
 92 | .btn-odnoklassniki.disabled:hover,.btn-odnoklassniki[disabled]:hover,fieldset[disabled] .btn-odnoklassniki:hover,.btn-odnoklassniki.disabled:focus,.btn-odnoklassniki[disabled]:focus,fieldset[disabled] .btn-odnoklassniki:focus,.btn-odnoklassniki.disabled.focus,.btn-odnoklassniki[disabled].focus,fieldset[disabled] .btn-odnoklassniki.focus{background-color:#f4731c;border-color:rgba(0,0,0,0.2)}
 93 | .btn-odnoklassniki .badge{color:#f4731c;background-color:#fff}
 94 | .btn-openid{color:#fff;background-color:#f7931e;border-color:rgba(0,0,0,0.2)}.btn-openid:focus,.btn-openid.focus{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
 95 | .btn-openid:hover{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}
 96 | .btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{color:#fff;background-color:#da7908;border-color:rgba(0,0,0,0.2)}.btn-openid:active:hover,.btn-openid.active:hover,.open>.dropdown-toggle.btn-openid:hover,.btn-openid:active:focus,.btn-openid.active:focus,.open>.dropdown-toggle.btn-openid:focus,.btn-openid:active.focus,.btn-openid.active.focus,.open>.dropdown-toggle.btn-openid.focus{color:#fff;background-color:#b86607;border-color:rgba(0,0,0,0.2)}
 97 | .btn-openid:active,.btn-openid.active,.open>.dropdown-toggle.btn-openid{background-image:none}
 98 | .btn-openid.disabled:hover,.btn-openid[disabled]:hover,fieldset[disabled] .btn-openid:hover,.btn-openid.disabled:focus,.btn-openid[disabled]:focus,fieldset[disabled] .btn-openid:focus,.btn-openid.disabled.focus,.btn-openid[disabled].focus,fieldset[disabled] .btn-openid.focus{background-color:#f7931e;border-color:rgba(0,0,0,0.2)}
 99 | .btn-openid .badge{color:#f7931e;background-color:#fff}
100 | .btn-pinterest{color:#fff;background-color:#cb2027;border-color:rgba(0,0,0,0.2)}.btn-pinterest:focus,.btn-pinterest.focus{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
101 | .btn-pinterest:hover{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}
102 | .btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{color:#fff;background-color:#9f191f;border-color:rgba(0,0,0,0.2)}.btn-pinterest:active:hover,.btn-pinterest.active:hover,.open>.dropdown-toggle.btn-pinterest:hover,.btn-pinterest:active:focus,.btn-pinterest.active:focus,.open>.dropdown-toggle.btn-pinterest:focus,.btn-pinterest:active.focus,.btn-pinterest.active.focus,.open>.dropdown-toggle.btn-pinterest.focus{color:#fff;background-color:#801419;border-color:rgba(0,0,0,0.2)}
103 | .btn-pinterest:active,.btn-pinterest.active,.open>.dropdown-toggle.btn-pinterest{background-image:none}
104 | .btn-pinterest.disabled:hover,.btn-pinterest[disabled]:hover,fieldset[disabled] .btn-pinterest:hover,.btn-pinterest.disabled:focus,.btn-pinterest[disabled]:focus,fieldset[disabled] .btn-pinterest:focus,.btn-pinterest.disabled.focus,.btn-pinterest[disabled].focus,fieldset[disabled] .btn-pinterest.focus{background-color:#cb2027;border-color:rgba(0,0,0,0.2)}
105 | .btn-pinterest .badge{color:#cb2027;background-color:#fff}
106 | .btn-reddit{color:#000;background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}.btn-reddit:focus,.btn-reddit.focus{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
107 | .btn-reddit:hover{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}
108 | .btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{color:#000;background-color:#bcddff;border-color:rgba(0,0,0,0.2)}.btn-reddit:active:hover,.btn-reddit.active:hover,.open>.dropdown-toggle.btn-reddit:hover,.btn-reddit:active:focus,.btn-reddit.active:focus,.open>.dropdown-toggle.btn-reddit:focus,.btn-reddit:active.focus,.btn-reddit.active.focus,.open>.dropdown-toggle.btn-reddit.focus{color:#000;background-color:#98ccff;border-color:rgba(0,0,0,0.2)}
109 | .btn-reddit:active,.btn-reddit.active,.open>.dropdown-toggle.btn-reddit{background-image:none}
110 | .btn-reddit.disabled:hover,.btn-reddit[disabled]:hover,fieldset[disabled] .btn-reddit:hover,.btn-reddit.disabled:focus,.btn-reddit[disabled]:focus,fieldset[disabled] .btn-reddit:focus,.btn-reddit.disabled.focus,.btn-reddit[disabled].focus,fieldset[disabled] .btn-reddit.focus{background-color:#eff7ff;border-color:rgba(0,0,0,0.2)}
111 | .btn-reddit .badge{color:#eff7ff;background-color:#000}
112 | .btn-soundcloud{color:#fff;background-color:#f50;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:focus,.btn-soundcloud.focus{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
113 | .btn-soundcloud:hover{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}
114 | .btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{color:#fff;background-color:#c40;border-color:rgba(0,0,0,0.2)}.btn-soundcloud:active:hover,.btn-soundcloud.active:hover,.open>.dropdown-toggle.btn-soundcloud:hover,.btn-soundcloud:active:focus,.btn-soundcloud.active:focus,.open>.dropdown-toggle.btn-soundcloud:focus,.btn-soundcloud:active.focus,.btn-soundcloud.active.focus,.open>.dropdown-toggle.btn-soundcloud.focus{color:#fff;background-color:#a83800;border-color:rgba(0,0,0,0.2)}
115 | .btn-soundcloud:active,.btn-soundcloud.active,.open>.dropdown-toggle.btn-soundcloud{background-image:none}
116 | .btn-soundcloud.disabled:hover,.btn-soundcloud[disabled]:hover,fieldset[disabled] .btn-soundcloud:hover,.btn-soundcloud.disabled:focus,.btn-soundcloud[disabled]:focus,fieldset[disabled] .btn-soundcloud:focus,.btn-soundcloud.disabled.focus,.btn-soundcloud[disabled].focus,fieldset[disabled] .btn-soundcloud.focus{background-color:#f50;border-color:rgba(0,0,0,0.2)}
117 | .btn-soundcloud .badge{color:#f50;background-color:#fff}
118 | .btn-tumblr{color:#fff;background-color:#2c4762;border-color:rgba(0,0,0,0.2)}.btn-tumblr:focus,.btn-tumblr.focus{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
119 | .btn-tumblr:hover{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}
120 | .btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{color:#fff;background-color:#1c2d3f;border-color:rgba(0,0,0,0.2)}.btn-tumblr:active:hover,.btn-tumblr.active:hover,.open>.dropdown-toggle.btn-tumblr:hover,.btn-tumblr:active:focus,.btn-tumblr.active:focus,.open>.dropdown-toggle.btn-tumblr:focus,.btn-tumblr:active.focus,.btn-tumblr.active.focus,.open>.dropdown-toggle.btn-tumblr.focus{color:#fff;background-color:#111c26;border-color:rgba(0,0,0,0.2)}
121 | .btn-tumblr:active,.btn-tumblr.active,.open>.dropdown-toggle.btn-tumblr{background-image:none}
122 | .btn-tumblr.disabled:hover,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr:hover,.btn-tumblr.disabled:focus,.btn-tumblr[disabled]:focus,fieldset[disabled] .btn-tumblr:focus,.btn-tumblr.disabled.focus,.btn-tumblr[disabled].focus,fieldset[disabled] .btn-tumblr.focus{background-color:#2c4762;border-color:rgba(0,0,0,0.2)}
123 | .btn-tumblr .badge{color:#2c4762;background-color:#fff}
124 | .btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:focus,.btn-twitter.focus{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
125 | .btn-twitter:hover{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}
126 | .btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{color:#fff;background-color:#2795e9;border-color:rgba(0,0,0,0.2)}.btn-twitter:active:hover,.btn-twitter.active:hover,.open>.dropdown-toggle.btn-twitter:hover,.btn-twitter:active:focus,.btn-twitter.active:focus,.open>.dropdown-toggle.btn-twitter:focus,.btn-twitter:active.focus,.btn-twitter.active.focus,.open>.dropdown-toggle.btn-twitter.focus{color:#fff;background-color:#1583d7;border-color:rgba(0,0,0,0.2)}
127 | .btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter{background-image:none}
128 | .btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled.focus,.btn-twitter[disabled].focus,fieldset[disabled] .btn-twitter.focus{background-color:#55acee;border-color:rgba(0,0,0,0.2)}
129 | .btn-twitter .badge{color:#55acee;background-color:#fff}
130 | .btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}.btn-vimeo:focus,.btn-vimeo.focus{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
131 | .btn-vimeo:hover{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}
132 | .btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{color:#fff;background-color:#1295bf;border-color:rgba(0,0,0,0.2)}.btn-vimeo:active:hover,.btn-vimeo.active:hover,.open>.dropdown-toggle.btn-vimeo:hover,.btn-vimeo:active:focus,.btn-vimeo.active:focus,.open>.dropdown-toggle.btn-vimeo:focus,.btn-vimeo:active.focus,.btn-vimeo.active.focus,.open>.dropdown-toggle.btn-vimeo.focus{color:#fff;background-color:#0f7b9f;border-color:rgba(0,0,0,0.2)}
133 | .btn-vimeo:active,.btn-vimeo.active,.open>.dropdown-toggle.btn-vimeo{background-image:none}
134 | .btn-vimeo.disabled:hover,.btn-vimeo[disabled]:hover,fieldset[disabled] .btn-vimeo:hover,.btn-vimeo.disabled:focus,.btn-vimeo[disabled]:focus,fieldset[disabled] .btn-vimeo:focus,.btn-vimeo.disabled.focus,.btn-vimeo[disabled].focus,fieldset[disabled] .btn-vimeo.focus{background-color:#1ab7ea;border-color:rgba(0,0,0,0.2)}
135 | .btn-vimeo .badge{color:#1ab7ea;background-color:#fff}
136 | .btn-vk{color:#fff;background-color:#587ea3;border-color:rgba(0,0,0,0.2)}.btn-vk:focus,.btn-vk.focus{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
137 | .btn-vk:hover{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}
138 | .btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{color:#fff;background-color:#466482;border-color:rgba(0,0,0,0.2)}.btn-vk:active:hover,.btn-vk.active:hover,.open>.dropdown-toggle.btn-vk:hover,.btn-vk:active:focus,.btn-vk.active:focus,.open>.dropdown-toggle.btn-vk:focus,.btn-vk:active.focus,.btn-vk.active.focus,.open>.dropdown-toggle.btn-vk.focus{color:#fff;background-color:#3a526b;border-color:rgba(0,0,0,0.2)}
139 | .btn-vk:active,.btn-vk.active,.open>.dropdown-toggle.btn-vk{background-image:none}
140 | .btn-vk.disabled:hover,.btn-vk[disabled]:hover,fieldset[disabled] .btn-vk:hover,.btn-vk.disabled:focus,.btn-vk[disabled]:focus,fieldset[disabled] .btn-vk:focus,.btn-vk.disabled.focus,.btn-vk[disabled].focus,fieldset[disabled] .btn-vk.focus{background-color:#587ea3;border-color:rgba(0,0,0,0.2)}
141 | .btn-vk .badge{color:#587ea3;background-color:#fff}
142 | .btn-yahoo{color:#fff;background-color:#720e9e;border-color:rgba(0,0,0,0.2)}.btn-yahoo:focus,.btn-yahoo.focus{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
143 | .btn-yahoo:hover{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}
144 | .btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{color:#fff;background-color:#500a6f;border-color:rgba(0,0,0,0.2)}.btn-yahoo:active:hover,.btn-yahoo.active:hover,.open>.dropdown-toggle.btn-yahoo:hover,.btn-yahoo:active:focus,.btn-yahoo.active:focus,.open>.dropdown-toggle.btn-yahoo:focus,.btn-yahoo:active.focus,.btn-yahoo.active.focus,.open>.dropdown-toggle.btn-yahoo.focus{color:#fff;background-color:#39074e;border-color:rgba(0,0,0,0.2)}
145 | .btn-yahoo:active,.btn-yahoo.active,.open>.dropdown-toggle.btn-yahoo{background-image:none}
146 | .btn-yahoo.disabled:hover,.btn-yahoo[disabled]:hover,fieldset[disabled] .btn-yahoo:hover,.btn-yahoo.disabled:focus,.btn-yahoo[disabled]:focus,fieldset[disabled] .btn-yahoo:focus,.btn-yahoo.disabled.focus,.btn-yahoo[disabled].focus,fieldset[disabled] .btn-yahoo.focus{background-color:#720e9e;border-color:rgba(0,0,0,0.2)}
147 | .btn-yahoo .badge{color:#720e9e;background-color:#fff}
148 | 


--------------------------------------------------------------------------------
/public/css/contact.css:
--------------------------------------------------------------------------------
  1 | .modal-div{
  2 |   width: 60%;
  3 |   display: block;
  4 |   background-color:#F3F8FF;
  5 |    padding:2vh ;
  6 |     border-radius:0 10px 10px 0; 
  7 |     box-shadow:4px 4px 4px black
  8 |   
  9 |   
 10 | }
 11 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 12 | 
 13 | .suggest-subheader{
 14 |   text-align: center;
 15 |   margin:4vh 0;
 16 |   
 17 |   
 18 |   font-size: 2rem;
 19 |   font-weight: 500;
 20 |   color: black;
 21 | }
 22 | .input-box{
 23 |  background-color:inherit;
 24 |  border:none;
 25 |  border-bottom:2px solid black;
 26 |  border-radius:none!important;
 27 |  font-size: 1.5rem;
 28 |  border-color: #3559E0;
 29 |  padding: 1px 5px;
 30 |  width: 50%;
 31 |  
 32 | }
 33 | .input-box:focus{
 34 |   outline: none;
 35 |   border-color: #a7daff;
 36 | }
 37 | .input-header{
 38 |   font-size: 1.25rem;
 39 |   color: #3559E0;
 40 |   font-weight: 600;
 41 |  
 42 |   margin-bottom: 0.5rem;
 43 | }
 44 | .suggest-textarea{
 45 |     width: 80%;
 46 |     margin: 1vh 0;
 47 |     border-radius: 5px;
 48 |     background-color: #F3F8FF;
 49 |     border: 2px solid #3559E0;
 50 |     font-size: 1.5rem;
 51 |     padding: 5px;
 52 | }
 53 | .suggest-textarea:focus{
 54 |   border-color: #a7daff;
 55 |   outline: none;
 56 | }
 57 | .suggest-btn{
 58 |   display: block;
 59 |   margin: auto;
 60 |   padding: 1vh 4vh;
 61 |   font-size: 1.5rem;
 62 |   background-color: #3559E0;
 63 |   color: white;
 64 |   border: none;
 65 |   box-shadow:3px 3px 3px black ;
 66 |   border-radius:5px ;
 67 |   cursor: pointer;
 68 | }
 69 | .suggest-btn:active{
 70 |   box-shadow: none;
 71 | }
 72 | .suggest-btn:hover{
 73 |   background-color: #a7daff;
 74 |   color:#3559E0 ;
 75 | }
 76 | .banner-img-suggest{
 77 |   width:45%;
 78 |   border-radius:10px 0 0 10px;
 79 |   box-shadow: 4px 4px 4px black;
 80 | }
 81 | .input-suggest-flexbox{
 82 |   display: flex;
 83 | }
 84 | .modal-box{
 85 |   width:68%;
 86 |    margin:3vh auto;
 87 |    border-radius:10px;
 88 |    max-height:fit-content;
 89 |    display:flex;
 90 |    z-index: 100;
 91 | }
 92 | @media only screen and (max-width: 768px)
 93 | {
 94 |   .modal-box{
 95 |       flex-direction: column;
 96 |       
 97 |   }
 98 |   *{
 99 |       font-size: 70%;
100 |   }
101 |   .banner-img-suggest{
102 |       width: 100%;
103 |       height: 20vh;
104 |       display: none;
105 |   }
106 |   .input-suggest-flexbox{
107 |       flex-direction: column;
108 |   }
109 |   .modal-div{
110 |       width: 100%;
111 |       border-radius: 10px 10px 10px 10px;
112 |   }
113 |   .suggest-textarea{
114 |       width: 100%;
115 |   }
116 | }
117 | 
118 | 


--------------------------------------------------------------------------------
/public/css/dark-styles.css:
--------------------------------------------------------------------------------
 1 | body.dark,
 2 | html.dark {
 3 |   background-color: #192e4e;
 4 |   color: white;
 5 | }
 6 | #theme-toggle.dark {
 7 |   background: #0e0d0d;
 8 |   color: white;
 9 | }
10 | .form-inline a.dark {
11 |   background-color: #0e0d0d !important;
12 |   color: white !important;
13 | }
14 | .hero.dark,
15 | .hero .main-content h1.dark {
16 |   color: #a7daff !important;
17 | }
18 | .about-title.dark {
19 |   color: white !important;
20 | }
21 | .login-container.dark,
22 | .register-container.dark {
23 |   background-color: rgba(255, 255, 255, 0.105);
24 | }
25 | button.dark {
26 |   background-color: #a7daff;
27 |   color: #192e4e;
28 | }
29 | button.secondary.dark {
30 |   color: #192e4e;
31 |   background-color: #a7daff;
32 | }
33 | }
34 | #about.dark {
35 |   background-color: #093c7e !important;
36 |   color: white !important;
37 | }
38 | .secrets-container.dark {
39 |   background-color: #192e4e !important;
40 |   color: #a7daff;
41 | }
42 | #nav_small.side_nav.dark {
43 |   background-color: #a7daff;
44 | }
45 | #nav_small.side_nav a.dark {
46 |   color: #192e4e !important;
47 | }
48 | 


--------------------------------------------------------------------------------
/public/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,200;1,600;1,900&display=swap");
  2 | :root {
  3 |   --accent-clr: #192e4e;
  4 | }
  5 | * {
  6 |   margin: 0;
  7 |   padding: 0;
  8 |   box-sizing: border-box;
  9 |   font-family: "Poppins";
 10 | }
 11 | ::selection {
 12 |   color: var(--accent-clr);
 13 |   background-color: #e1e6ff;
 14 | }
 15 | html,
 16 | body {
 17 |   height: 100%;
 18 |   width: 100%;
 19 |   scroll-behavior: smooth;
 20 |   max-width: 100vw;
 21 |   font-family: Poppins, sans-serif;
 22 |   background-color: #a7daff;
 23 | }
 24 | html {
 25 |   overflow-x: hidden;
 26 | }
 27 | .flexbox {
 28 |   display: flex;
 29 |   justify-content: center;
 30 |   align-items: center;
 31 |   /* flex-wrap: wrap; */
 32 |   gap: 20px;
 33 | }
 34 | .loader {
 35 |   position: fixed;
 36 |   top: 0;
 37 |   left: 0;
 38 |   z-index: 1000;
 39 |   width: 100%;
 40 |   height: 100%;
 41 |   background-color: #a7daff;
 42 |   display: flex;
 43 |   justify-content: center;
 44 |   align-items: center;
 45 | }
 46 | .loader .spinner {
 47 |   width: 100px;
 48 |   height: 100px;
 49 |   border-radius: 50%;
 50 |   border: 5px solid var(--accent-clr);
 51 |   border-top-color: transparent;
 52 |   border-bottom-color: transparent;
 53 |   animation: spin 1.25s linear infinite;
 54 | }
 55 | nav a {
 56 |   color: #a7daff !important;
 57 | }
 58 | nav a:hover {
 59 |   border: 1px solid #a7daff !important;
 60 | }
 61 | .navbar-brand {
 62 |   color: white !important;
 63 | }
 64 | #nav_small {
 65 |   display: none;
 66 | }
 67 | #theme-toggle {
 68 |   width: 40px;
 69 |   height: 40px;
 70 |   padding: 0;
 71 |   border-radius: 50px;
 72 |   background-color: #a7daff;
 73 |   background: transparent;
 74 |   color:#a7daff;
 75 |   margin-right: 20px;
 76 | }
 77 | button {
 78 |   cursor: pointer;
 79 | 
 80 |   padding: 1em 2em;
 81 |   border: none;
 82 |   outline: none;
 83 |   background: var(--accent-clr);
 84 |   color: #a7daff;
 85 |   font-size: 1.0rem;
 86 |   border-radius: 10px;
 87 |   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
 88 | 
 89 |   -webkit-tap-highlight-color: transparent;
 90 | }
 91 | button.secondary {
 92 |   cursor: pointer;
 93 |   padding: 1em 2em;
 94 |   border: none;
 95 |   outline: none;
 96 |   background: var(--accent-clr);
 97 |   color: #a7daff;
 98 |   font-size: 1.0rem;
 99 |   border-radius: 10px;
100 |   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
101 |   -webkit-tap-highlight-color: transparent;
102 | }
103 | button:hover {
104 |   background-color: #070b43b2;
105 |   color: #00ffa6;
106 | }
107 | .hero {
108 |   position: relative;
109 |   width: 100%;
110 |   min-height: 100vh;
111 |   padding: 3rem;
112 |   z-index: 10;
113 |   justify-content: space-evenly;
114 | }
115 | header {
116 |   position: relative;
117 | 
118 |   z-index: 30;
119 | 
120 |   width: 100%;
121 |   height: 60px;
122 |   line-height: 60px;
123 |   padding: 0 3rem;
124 | }
125 | header a {
126 |   text-decoration: none;
127 |   max-width: 300px;
128 | }
129 | header h1 {
130 |   font-size: 1.5rem;
131 |   font-weight: 500;
132 |   color: #3d4372;
133 |   width: max-content;
134 | }
135 | .hero .container {
136 |   width: max-content;
137 |   margin: 0;
138 |   flex-direction: column;
139 |   align-items: flex-start;
140 | }
141 | .hero .main-content {
142 |   position: relative;
143 |   z-index: 10;
144 |   width: 60vw;
145 |   max-width: 650px;
146 |   margin-top: -0px;
147 | }
148 | .hero .main-content h1 {
149 |   font-size: clamp(2rem, 7vw, 4rem);
150 |   color: #0b0967;
151 | }
152 | .hero .main-content .highlight {
153 |   color: var(--accent-clr);
154 | }
155 | .hero .main-content .char {
156 |   height: 1.3em;
157 |   overflow: hidden;
158 |   padding-top: 1.2em;
159 | 
160 |   animation: wipe-in 1s ease-in-out forwards;
161 | }
162 | .hero .main-content .word {
163 |   white-space: nowrap;
164 | }
165 | .hero .buttons-container {
166 |   position: relative;
167 |   z-index: 10;
168 |   margin-top: 20px;
169 |   justify-content: flex-start;
170 |   opacity: 1;
171 |   transform: translateY(10px);
172 |   transition: 1.25s ease-in-out;
173 | }
174 | .illustration {
175 |   scale: 2.5;
176 |   margin-top: -10%;
177 |   animation: wave 4s ease-in-out infinite;
178 | }
179 | .hamburger {
180 |   display: none;
181 | }
182 | #about {
183 |   background-color: var(--accent-clr);
184 |   color: #a7daff;
185 |   padding: 4rem 3rem;
186 |   flex-direction: column;
187 | }
188 | #about p {
189 |   text-align: center;
190 |   max-width: 700px;
191 |   font-size: 3em;
192 |   font-weight: 100;
193 | }
194 | #about button {
195 |   border: 2px solid #a7daff;
196 | }
197 | .about-page {
198 |   padding: 4.2rem;
199 | }
200 | .about-title {
201 |   font-size: 3rem;
202 |   font-weight: 700;
203 |   color: #1b1c52;
204 |   padding-left: 1ch;
205 |   border-left: 15px solid currentColor;
206 |   border-radius: 10px;
207 | }
208 | .container-about {
209 |   justify-content: space-between;
210 | }
211 | .container-image {
212 |   padding-bottom: 3%;
213 | }
214 | .login-container .card,
215 | .register-container .card {
216 |   padding: 0;
217 |   background-color: transparent;
218 |   border: none;
219 |   outline: none;
220 |   box-shadow: none;
221 |   filter: none;
222 | }
223 | .login-container .card-body,
224 | .register-container .card-body {
225 |   padding-left: 0;
226 | }
227 | .login-container,
228 | .register-container {
229 |   background-color: rgba(255, 255, 255, 0.473);
230 |   padding: 2rem;
231 |   border-radius: 20px;
232 | }
233 | /* input {
234 |   padding: 1rem !important;
235 |   border-radius: 10px !important;
236 | } */
237 | #goToTopBtn {
238 |   position: fixed;
239 |   bottom: 20px;
240 |   right: 20px;
241 |   width: 50px;
242 |   height: 50px;
243 |   border-radius: 50%;
244 |   background-color: white;
245 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
246 |   padding: 0;
247 |   object-fit: contain;
248 |   display: flex;
249 |   justify-content: center;
250 |   align-items: center;
251 |   font-size: 2rem;
252 |   z-index: 100;
253 |   cursor: pointer;
254 |   transition: background-color 0.5s, color 0.5s;
255 | }
256 | .secrets-container {
257 |   background-color: #a7daff;
258 | }
259 | .secrets-container h1 {
260 |   font-size: 3em;
261 | }
262 | .secrets-container .fa-key {
263 |   scale: 0.7;
264 | }
265 | .secret-text {
266 |   font-size: 1.3em;
267 |   padding: 1rem;
268 |   display: flex;
269 | }
270 | .vote-container{
271 |   display: flex;
272 | }
273 | .inner-secret-text{
274 |   margin-left: 30%;
275 |   margin-right: 15px;
276 | }
277 | .vote-container{
278 |   padding: 0 5px;
279 | }
280 | .vote-container img{
281 |   margin: 0 5px;
282 | }
283 | .vote-count{
284 |   margin-right: 10px;
285 | }
286 | 
287 | 
288 | 
289 | @media (max-width: 600px) {
290 |   .flexbox {
291 |     flex-wrap: wrap;
292 |   }
293 |   .hero {
294 |     flex-direction: column-reverse;
295 |   }
296 |   .illustration {
297 |     scale: 1;
298 |   }
299 |   .hamburger {
300 |     display: block;
301 |     color: #a7daff;
302 |   }
303 |   .nav_big {
304 |     display: none !important;
305 |   }
306 |   #nav_small.side_nav {
307 |     position: absolute;
308 |     z-index: 1000;
309 |     width: 100%;
310 |     display: flex;
311 |     flex-direction: column;
312 |     background-color: var(--accent-clr);
313 |     color: #a7daff;
314 |   }
315 |   #nav_small.side_nav a {
316 |     width: 100%;
317 |     color: #a7daff;
318 |   }
319 |   .hero .container {
320 |     align-items: center;
321 |   }
322 |   .main-content {
323 |     margin-left: unset !important;
324 |     margin-top: unset !important;
325 |   }
326 |   .main-content h1 {
327 |     text-align: center;
328 |   }
329 |   .buttons-container {
330 |     justify-content: center !important;
331 |     align-items: center;
332 |     width: 100%;
333 |   }
334 |   button{
335 |     font-size: 0.9em;
336 |   }
337 |   .tagline{
338 |     font-size: 0.6rem;
339 |   }
340 | }
341 | 
342 | @keyframes wipe-in {
343 |   0% {
344 |     padding-top: 1.3em;
345 |   }
346 |   100% {
347 |     padding-top: 0;
348 |   }
349 | }
350 | @keyframes wave {
351 |   0% {
352 |     transform: rotate(0deg);
353 |   }
354 |   50% {
355 |     transform: rotate(10deg);
356 |   }
357 |   100% {
358 |     transform: rotate(0deg);
359 |   }
360 | }
361 | 
362 | /* CSS for Privacy */
363 | 
364 | main {
365 |   margin: 1px 60px;
366 |   padding: 1px 0;
367 | }
368 | 
369 | section.c1 {
370 |   /* background-color: #f0f0f0; */
371 |   padding: 20px;
372 |   margin-bottom: 20px;
373 | }
374 | 


--------------------------------------------------------------------------------
/public/image/contact2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kritika30032002/Top_Secrets/020daedd2afcd3f3ea2a34b7b53968349a3a7646/public/image/contact2.jpg


--------------------------------------------------------------------------------
/public/image/key.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kritika30032002/Top_Secrets/020daedd2afcd3f3ea2a34b7b53968349a3a7646/public/image/key.ico


--------------------------------------------------------------------------------
/public/image/secrets.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kritika30032002/Top_Secrets/020daedd2afcd3f3ea2a34b7b53968349a3a7646/public/image/secrets.webp


--------------------------------------------------------------------------------
/views/404-page.ejs:
--------------------------------------------------------------------------------
 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 |   <title>404 - Page Not Found</title>
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 9 |   <style>
10 |     body {
11 |       font-family: 'Arial', sans-serif;
12 |       background-color: #f5f5f5;
13 |       display: flex;
14 |       align-items: center;
15 |       justify-content: center;
16 |       height: 100vh;
17 |       margin: 0;
18 |     }
19 | 
20 |     .container {
21 |       text-align: center;
22 |       padding: 20px;
23 |       border-radius: 8px;
24 |       background-color: #fff;
25 |       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
26 |     }
27 | 
28 |     .icon {
29 |       font-size: 80px;
30 |       color: #f44336;
31 |       margin-bottom: 20px;
32 |     }
33 | 
34 |     h1 {
35 |       color: #333;
36 |       margin-bottom: 10px;
37 |     }
38 | 
39 |     p {
40 |       color: #666;
41 |       margin-bottom: 20px;
42 |     }
43 | 
44 |     a {
45 |       color: #2196F3;
46 |       text-decoration: none;
47 |       font-weight: bold;
48 |     }
49 |   </style>
50 | </head>
51 | 
52 | <body>
53 |   <div class="container">
54 |     <div class="icon">
55 |       <i class="fas fa-exclamation-circle"></i>
56 |     </div>
57 |     <h1>404 - Page Not Found</h1>
58 |     <p>Sorry, the page you are looking for does not exist.</p>
59 |     <p><a href="/">Go back to the home page</a></p>
60 |   </div>
61 | </body>
62 | 
63 | </html>
64 | 


--------------------------------------------------------------------------------
/views/about.ejs:
--------------------------------------------------------------------------------
 1 | <%- include('partials/header') %>
 2 | <div class="about-page">
 3 |   <p class="about-title">About Secrets</p>
 4 | 
 5 |   <div class="flexbox container-about">
 6 |     <div class="container-text" style="padding: -3% 6% 6% 20%">
 7 |       <p style="font-size: 1.5rem; max-width: 700px" class="paragraph">
 8 |         Secrets is the place where everyone can add their secrets.It is created
 9 |         with an idea of having a fun space where people could share their
10 |         secrets, without revealing their true identity. It makes more intresting
11 |         to know that other dont want to share it but still are sharing. Thus,
12 |         share your secrets and we will store them for you, without revealing
13 |         your identity, making things interesting.
14 |       </p>
15 |     </div>
16 |     <div class="container-image">
17 |       <img
18 |         src="image/secrets.webp"
19 |         alt=""
20 |         style="width: 100%; padding: 2%; max-width: 500px"
21 |       />
22 |     </div>
23 |   </div>
24 | </div>
25 | 
26 | <!-- <div  class="container-about">
27 |   <div class="container-text" style="padding: 0 3% 0 3%">
28 |     <h1>About</h1>
29 |     <p style="font-size: 1.5rem" class="paragraph">
30 |       Secrets is the place where everyone can add their secrets.It is created
31 |       with an idea of having a fun space where people could share their secrets,
32 |       without revealing their true identity. Thus,share your secrets and we will
33 |       store them for you, without revealing your identity, making things
34 |       interesting.
35 |     </p>
36 |   </div>
37 |   <div class="container-image">
38 |     <img src="image/secrets.webp" alt="" style="width: 100%; padding: 2%" />
39 |   </div>
40 | </div> -->
41 | <%- include('partials/footer') %>
42 | 


--------------------------------------------------------------------------------
/views/contact.ejs:
--------------------------------------------------------------------------------
 1 | <%- include('partials/header') %>
 2 | 
 3 | 
 4 | <div class="modal-box" >
 5 |     <img class="banner-img-suggest"  src="image/contact2.jpg" ></img> 
 6 |      
 7 |           <div class='modal-div'>
 8 |          
 9 |        <p class='suggest-subheader'>Get In Touch</p>
10 |        <div class='input-suggest-flexbox' >
11 |        <div style="margin:3vh 4vh">
12 |        <p class='input-header' id="NAME">Name</p>
13 |          <input class='input-box' style="width:100%; border-radius: none;" type="text" placeholder='John'></input>
14 |      
15 |        </div>
16 |        
17 |        <div style="margin:3vh 4vh">
18 |        <p class='input-header' id="CONTACT">Contact</p>
19 |          <input class='input-box' style="width:100%"  type="text" placeholder='9152345677'></input>
20 |      
21 |        </div>
22 |        </div>
23 |        <div class='input-suggest-flexbox'>
24 |        <div style="margin:3vh 4vh">
25 |        <p class='input-header' id="EMAIL">Email</p>
26 |          <input class='input-box' style="width:100%" type="text" placeholder='john@gmail.com'></input>
27 |      
28 |        </div>
29 |        
30 |        <div style="margin:3vh 4vh">
31 |        <p class='input-header' id="SUBJECT">Subject</p>
32 |          <input class='input-box' style="width:100%"  type="text" placeholder='Hey'></input>
33 |      
34 |        </div>
35 |        </div>
36 |       
37 |        <div style="margin:4vh">
38 |        <p class='input-header' id="TEXT">Message</p>
39 |         <textarea class='suggest-textarea' cols="43" rows="3" placeholder='Hello!'></textarea>
40 |      
41 |        </div>
42 |        <button class='suggest-btn' id="send_button">Send</button>
43 |      </div>
44 |      </div>
45 |      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
46 | <script src="https://smtpjs.com/v3/smtp.js"></script>
47 | <script>
48 |     var btn=document.getElementById("send_button");
49 |     btn.addEventListener('click', function(e){
50 |         var name=document.getElementById("NAME").value;
51 |         var subject=document.getElementById("SUBJECT").value;
52 |         var email=document.getElementById("EMAIL").value;
53 |         var contact=document.getElementById("CONTACT").value;
54 |         var text=document.getElementById("TEXT").value;
55 |         e.preventDefault();
56 |             Email.send({
57 |             Host : "smtp.elasticemail.com",
58 |             Username : "username_smtp",
59 |             Password : "generate_from_smtp_server",
60 |             To : 'your_email',
61 |             From : `${email}`,
62 |             Subject : `${Subject}`,
63 |             Body : `<br>${text} <br><br> Name: ${name} <br> Email: ${email} <br>Contact:${contact}`
64 |         }).then(
65 |             async message => {
66 |                 if (message=="OK"){
67 |                     await Swal.fire({
68 |                         title: "Success!",
69 |                         text: "Message Sent Successfully!",
70 |                         icon: "success"
71 |                     });
72 |                 }
73 |                 else{
74 |                     await Swal.fire({
75 |                         icon: "error",
76 |                         title: "Oops...",
77 |                         text: "Something went wrong!",
78 |                     });
79 |                 }
80 |             }
81 |         ).then(async (res)=> {
82 |             await window.location.reload()
83 |         }
84 |         )
85 |     })
86 |     
87 | </script>
88 | <%- include('partials/footer') %>


--------------------------------------------------------------------------------
/views/home.ejs:
--------------------------------------------------------------------------------
 1 | <%- include('partials/header') %>
 2 | 
 3 | <div class="flexbox hero">
 4 |   <div class="flexbox container">
 5 |     <div class="main-content">
 6 |       <h1>Don't Keep Your Secrets,</h1>
 7 |       <h1 class="display-3">Share Them Anonymously!</h1>
 8 |     </div>
 9 | 
10 |     <div class="flexbox buttons-container" style="opacity: 0">
11 |       <a href="/register" role="button"
12 |         ><button class="secondary">Register</button></a
13 |       >
14 |       <a href="/login" role="button"><button class="secondary">Login</button></a>
15 |     </div>
16 |   </div>
17 |   <div class="illustration">
18 |     <i class="fas fa-key fa-6x"></i>
19 |   </div>
20 | </div>
21 | <section id="about" class="flexbox">
22 |   <p class="tagline">
23 |     We allow you to add your secrets that you don't want to share with anyone.
24 |   </p>
25 |   <a href="/about"><button>Know More</button></a>
26 | </section>
27 | <%- include('partials/footer') %>
28 | 


--------------------------------------------------------------------------------
/views/login.ejs:
--------------------------------------------------------------------------------
  1 | <%- include('partials/header') %>
  2 | 
  3 | <div class="login-container container mt-5" style="margin-bottom: 197px">
  4 |   <h1>Login</h1>
  5 | 
  6 |   <div class="row">
  7 |     <div class="col-sm-8">
  8 |       <div class="card">
  9 |         <div class="card-body">
 10 |           <!-- Makes POST request to /login route -->
 11 |           <form action="/login" method="POST">
 12 |             <div class="form-group">
 13 |               <label for="email">Email</label>
 14 | 
 15 |               <input
 16 |                 type="email"
 17 |                 class="form-control"
 18 |                 name="username"
 19 |                 placeholder="Enter your email"
 20 |               />
 21 |             </div>
 22 |             <div class="form-group">
 23 |               <label for="password">Password</label>
 24 |               <input
 25 |                 type="password"
 26 |                 class="form-control"
 27 |                 name="password"
 28 |                 placeholder="Enter your password"
 29 |               />
 30 |             </div>
 31 |             <button
 32 |               type="submit"
 33 |               id="user-login"
 34 |               class="button_all_black secondary"
 35 |               role="button"
 36 |             >
 37 |               Login
 38 |             </button>
 39 |           </form>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="col-sm-4">
 45 |       <div class="card social-block">
 46 |         <div class="card-body">
 47 |           <a
 48 |             class="btn btn-block btn-social btn-google"
 49 |             href="/auth/google"
 50 |             role="button"
 51 |           >
 52 |             <i class="fab fa-google"></i>
 53 |             Sign Up with Google
 54 |           </a>
 55 |         </div>
 56 |       </div>
 57 | 
 58 |       <div class="card social-block">
 59 |         <div class="card-body">
 60 |           <a
 61 |             class="btn btn-block btn-social btn-facebook"
 62 |             href="/auth/facebook"
 63 |             role="button"
 64 |           >
 65 |             <i class="fab fa-facebook"></i>
 66 |             Sign Up with Facebook
 67 |           </a>
 68 |         </div>
 69 |       </div>
 70 |     </div>
 71 |   </div>
 72 | </div>
 73 | 
 74 | <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 75 | <link
 76 |   rel="stylesheet"
 77 |   type="text/css"
 78 |   href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
 79 | />
 80 | <script>
 81 |   // Initialize Toastify globally
 82 |   Toastify({
 83 |     position: "toast-top-left",
 84 |     duration: 3000,
 85 |     className: "toastify-library-class",
 86 |     style: {
 87 |       background: "linear-gradient(to right, #4E575F,#343A40)",
 88 |     },
 89 |   });
 90 | 
 91 |   const userLogin = document.getElementById("user-login");
 92 |   userLogin.addEventListener("click", async (e) => {
 93 |     e.preventDefault();
 94 | 
 95 |     try {
 96 |       const formData = JSON.stringify({
 97 |         username: document.querySelector('input[name="username"]').value,
 98 |         password: document.querySelector('input[name="password"]').value,
 99 |       });
100 |       const response = await fetch("/login", {
101 |         method: "POST",
102 |         headers: {
103 |           "Content-Type": "application/json",
104 |         },
105 |         body: formData,
106 |       });
107 | 
108 |       if (response.ok) {
109 |         const data = await response.json();
110 |         if (data.success) {
111 |           Toastify({
112 |             text: data.message,
113 |             type: "success",
114 |           }).showToast();
115 |           window.location.href = "/secrets"; // Redirect to secrets page
116 |           window.alert("Login successful");
117 |         } else {
118 |           Toastify({
119 |             text: data.message,
120 |             type: "error",
121 |             style: {
122 |               background: "linear-gradient(to right, #4E575F,#343A40)",
123 |             },
124 |           }).showToast();
125 |         }
126 |       } else {
127 |         console.error("Server error:", response.statusText);
128 |         Toastify({
129 |           text: "Error! Please try again later",
130 |           type: "error",
131 |           style: {
132 |             background: "linear-gradient(to right, #4E575F,#343A40)",
133 |           },
134 |         }).showToast();
135 |       }
136 |     } catch (error) {
137 |       Toastify({
138 |         text: "Error! Please try again later",
139 |         type: "error",
140 |         style: {
141 |           background: "linear-gradient(to right, #4E575F,#343A40)",
142 |         },
143 |       }).showToast();
144 |     }
145 |   });
146 | </script>
147 | 
148 | <%- include('partials/footer') %>
149 | 


--------------------------------------------------------------------------------
/views/partials/footer.ejs:
--------------------------------------------------------------------------------
  1 | <% const currentYear = new Date().getFullYear(); %>
  2 | 
  3 | <div class="footer bg-dark py-4">
  4 |   <div class="container">
  5 |     <div class="row">
  6 |       <!-- Website Description -->
  7 |       <div class="col-md-3 col-sm-12 mb-4 text-left">
  8 |         <h5 class="footer-title text-white">Secrets</h5>
  9 |         <p class="text-white">
 10 |           Share your secrets, anonymously! Our platform allows you to express
 11 |           yourself freely while maintaining privacy.
 12 |         </p>
 13 |       </div>
 14 | 
 15 |       <!-- About Page and Other Links -->
 16 |       <div class="col-md-3 col-sm-12 mb-4 text-left">
 17 |         <h5 class="footer-title text-white">Useful Links</h5>
 18 |         <ul class="list-unstyled">
 19 |           <li><a href="/about" class="footer-link">About Us</a></li>
 20 |           <li><a href="/terms" class="footer-link">Terms of Service</a></li>
 21 |           <li><a href="/faq" class="footer-link">FAQ</a></li>
 22 |           <li><a href="/privacy" class="footer-link">Privacy Policy</a></li>
 23 |         </ul>
 24 |       </div>
 25 | 
 26 |       <!-- Helpdesk, Queries, and Contact -->
 27 |       <div class="col-md-3 col-sm-12 mb-4 text-left">
 28 |         <h5 class="footer-title text-white">Help & Contact</h5>
 29 |         <ul class="list-unstyled">
 30 |           <li><a href="mailto:support@secrets.com" class="footer-link">Helpdesk</a></li>
 31 |           <li><a href="/contact" class="footer-link">Contact Us</a></li>
 32 |           <li><a href="/support" class="footer-link">Submit a Query</a></li>
 33 |         </ul>
 34 |       </div>
 35 | 
 36 |       <!-- Social Media Icons -->
 37 |       <div class="col-md-3 col-sm-12 mb-4 text-center">
 38 |         <h5 class="footer-title text-white">Follow Us</h5>
 39 |         <div class="social-icons">
 40 |           <a href="https://www.linkedin.com/in/kritika-gupta-343458212" target="_blank" class="social-icon">
 41 |             <img
 42 |               src="https://static-00.iconduck.com/assets.00/linkedin-icon-2048x2048-ya5g47j2.png"
 43 |               alt="LinkedIn"
 44 |               class="icon"
 45 |             />
 46 |           </a>
 47 |           <a href="https://github.com/Kritika30032002" target="_blank" class="social-icon">
 48 |             <img
 49 |               src="https://cdn3.iconfinder.com/data/icons/inficons/512/github.png"
 50 |               alt="GitHub"
 51 |               class="icon"
 52 |             />
 53 |           </a>
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |     <!-- Copyright Section -->
 58 |     <div class="row">
 59 |       <div class="col-12 text-center">
 60 |         <p class="text-white">
 61 |           &copy; <%= currentYear %> All Rights Reserved. Created by
 62 |           <a href="https://github.com/Kritika30032002" class="footer-link" target="_blank">
 63 |             Kritika Gupta
 64 |           </a>
 65 |         </p>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </div>
 70 | 
 71 | <style>
 72 |   /* Footer General Styling */
 73 |   .footer {
 74 |     background-color: #343a40;
 75 |     padding: 2em 0;
 76 |     border-top: 1px solid #e0e0e0;
 77 |   }
 78 | 
 79 |   .footer-title {
 80 |     font-size: 1.4rem;
 81 |     font-weight: bold;
 82 |   }
 83 | 
 84 |   .footer-link {
 85 |     text-decoration: none;
 86 |     color: #00acee;
 87 |     transition: color 0.3s ease;
 88 |   }
 89 | 
 90 |   .footer-link:hover {
 91 |     color: #007bff;
 92 |   }
 93 | 
 94 |   /* Social Icons */
 95 |   .social-icons {
 96 |     display: flex;
 97 |     justify-content: center;
 98 |     gap: 15px;
 99 |     margin-top: 1em;
100 |   }
101 | 
102 |   .social-icon .icon {
103 |     width: 50px;
104 |     height: 50px;
105 |     border-radius: 50%;
106 |     border: 3px solid white;
107 |     transition: transform 0.3s ease, box-shadow 0.3s ease;
108 |   }
109 | 
110 |   .social-icon:hover .icon {
111 |     transform: translateY(-5px);
112 |     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
113 |   }
114 | 
115 |   /* Footer Columns Styling */
116 |   .row {
117 |     display: flex;
118 |     justify-content: space-around;
119 |   }
120 | 
121 |   .list-unstyled {
122 |     list-style-type: none;
123 |     padding-left: 0;
124 |   }
125 | 
126 |   .text-white {
127 |     color: white;
128 |   }
129 | 
130 |   .text-left {
131 |     text-align: left;
132 |   }
133 | 
134 |   .text-center {
135 |     text-align: center;
136 |   }
137 | 
138 |   .py-4 {
139 |     padding-top: 1.5rem;
140 |     padding-bottom: 1.5rem;
141 |   }
142 | 
143 |   .mb-4 {
144 |     margin-bottom: 1.5rem;
145 |   }
146 | 
147 |   .mt-4 {
148 |     margin-top: 1.5rem;
149 |   }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/views/partials/header.ejs:
--------------------------------------------------------------------------------
 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>Secrets</title>
 7 |     <link rel="icon" type="image/x-icon" href="image/key.ico" />
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
11 |       integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
12 |       crossorigin="anonymous"
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
17 |       integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
18 |       crossorigin="anonymous"
19 |     />
20 |     <link rel="stylesheet" href="css/bootstrap-social.css" />
21 |     <link rel="stylesheet" href="css/styles.css" />
22 |     <link rel="stylesheet" href="css/dark-styles.css" />
23 |     <link rel="stylesheet" href="css/contact.css" />
24 |     <link rel="stylesheet" href="css/SuggestModal.css" />
25 |   </head>
26 | 
27 |   <body oncanplay="toggle_nav_body()">
28 |     <nav class="navbar navbar-dark bg-dark justify-content-between" id="navbar">
29 |       <a href="/" class="navbar-brand" style="border: 1px solid transparent">
30 |         <i class="fas fa-key fa-1.5x logo" style="color: white"></i>
31 |         Secrets</a
32 |       >
33 |       <form class="form-inline">
34 |         <button id="theme-toggle">
35 |           <i class="fas fa-sun" style="display: none;font-size: medium;"></i>
36 |           <i class="fas fa-moon" style="font-size: medium;"></i>
37 |         </button>
38 |         <div class="nav_big">
39 |           <a href="/" class="btn my-2 my-sm-0 home" type="submit"> Home </a>
40 |           <a href="/about" class="btn my-2 my-sm-0 about" type="submit">
41 |             About
42 |           </a>
43 |           <a href="/contact" class="btn my-2 my-sm-0 about" type="submit">
44 |             Contact
45 |           </a>
46 |           <a href="/register" class="btn my-1 my-sm-0 register" type="submit">
47 |             Register
48 |           </a>
49 |           <a href="/login" class="btn my-2 my-sm-0 login" type="submit">
50 |             Login
51 |           </a>
52 |         </div>
53 |         <div class="hamburger" onclick="toggle_nav()">
54 |           <i class="fa fa-bars" style="font-size: medium;"></i>
55 |         </div>
56 |       </form>
57 |     </nav>
58 |     <div class="hide" id="nav_small">
59 |       <div class="hide" id="nav_small2">
60 |         <a
61 |           href="/"
62 |           class="btn my-2 my-sm-0 home"
63 |           type="submit"
64 |           onclick="toggle_nav()"
65 |         >
66 |           Home
67 |         </a>
68 |         <a
69 |           href="/about"
70 |           class="btn my-2 my-sm-0 about"
71 |           type="submit"
72 |           onclick="toggle_nav()"
73 |         >
74 |           About
75 |         </a>
76 |         <a
77 |           href="/contact"
78 |           class="btn my-2 my-sm-0 about"
79 |           type="submit"
80 |           onclick="toggle_nav()"
81 |         >
82 |           Contact
83 |         </a>
84 |       </div>
85 |     </div>
86 |   </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/views/privacy.ejs:
--------------------------------------------------------------------------------
 1 | <%- include('partials/header') %>
 2 | 
 3 | <main>
 4 |     <section class="c1">
 5 |        <b><h2>Privacy Policy</h2></b> 
 6 |        <br> <br>
 7 |         <div>
 8 |             <h4>Data Collection</h4>
 9 |             <p>At Top Secrets, we prioritize your privacy. While using our website, we may collect personal information such as your email address during the login process. However, rest assured that any data collected is handled securely and used solely for the purpose of providing you with access to our platform.</p>
10 |         </div>
11 |     </section>
12 |     <section class="c1">
13 |         <div>
14 |             <h4>Data Usage</h4>
15 |             <p>Your secrets are exclusively displayed on our website - "Top Secrets" for others to view anonymously. We do not exploit this data for any other purpose beyond its intended use. Rest assured, your trust is paramount to us, and we are committed to maintaining it.</p>
16 |         </div>
17 |     </section>
18 |     <section class="c1">
19 |         <div>
20 |             <h4>Data Sharing</h4>
21 |             <p>We uphold the anonymity and confidentiality of all secrets submitted by our users. None of the secrets are shared with third parties. We deeply respect your privacy and ensure that your secrets remain solely between you and our platform.</p>
22 |         </div>
23 |     </section>
24 |     <section class="c1">
25 |         <div>
26 |             <h4>Security</h4>
27 |             <p>While we take comprehensive measures to safeguard the confidentiality and security of the secrets submitted to Top Secrets, we acknowledge that absolute security cannot be guaranteed. Nonetheless, we prioritize your security and continuously strive to enhance our protective mechanisms.</p>
28 |         </div>
29 |     </section>
30 |     <section class="c1">
31 |         <div>
32 |             <h4>Cookies</h4>
33 |             <p>To preserve your privacy, we refrain from utilizing cookies to track user activity on our website. Our commitment to respecting your privacy means that we do not engage in any intrusive tracking mechanisms, ensuring a safe and anonymous browsing experience for all users.</p>
34 |         </div>
35 |     </section>
36 | </main>
37 | 
38 | <%- include('partials/footer') %>
39 | 


--------------------------------------------------------------------------------
/views/register.ejs:
--------------------------------------------------------------------------------
  1 | <%- include('partials/header') %>
  2 | 
  3 |         <div 
  4 |             class="register-container container mt-5"
  5 |             style="margin-bottom: 197px"
  6 |         >
  7 |             <h1>Register</h1>
  8 | 
  9 |             <div class="row">
 10 |                 <div class="col-sm-8">
 11 |                     <div class="card">
 12 |                         <div class="card-body">
 13 |                             <!-- Makes POST request to /register route -->
 14 |                             <form
 15 |                                 action="/register"
 16 |                                 method="POST"
 17 |                             >
 18 |                                 <div class="form-group">
 19 |                                     <label for="email">Email</label>
 20 |                                     <input
 21 |                                         placeholder="Enter your email"
 22 |                                         type="email"
 23 |                                         class="form-control"
 24 |                                         name="username"
 25 |                                         id="user-email"
 26 |                                     />
 27 |                                 </div>
 28 |                                 <div class="form-group">
 29 |                                     <label for="password">Password</label>
 30 |                                     <input
 31 |                                         placeholder="minimum 8 length with at least 1 special ,upper ,lower and a number"
 32 |                                         type="password"
 33 |                                         class="form-control"
 34 |                                         name="password"
 35 |                                         minlength="8"
 36 |                                         id="user-password"
 37 |                                     />
 38 |                                          </div>
 39 |                                 <button
 40 |                                     type="submit"
 41 |                                     class="button_all_black secondary"
 42 |                                     id="user-register"
 43 |                                 >
 44 |                                     Register
 45 |                                 </button>
 46 |                             </form>
 47 |                         </div>
 48 |                     </div>
 49 |                 </div>
 50 | 
 51 |                 <div class="col-sm-4">
 52 |                     <div class="card social-block">
 53 |                         <div class="card-body">
 54 |                             <a
 55 |                                 class="btn btn-block btn-social btn-google"
 56 |                                 href="/auth/google"
 57 |                                 role="button"
 58 |                             >
 59 |                                 <i class="fab fa-google"></i>
 60 |                                 Sign Up with Google
 61 |                             </a>
 62 |                         </div>
 63 |                     </div>
 64 | 
 65 |                     <div class="card social-block">
 66 |                         <div class="card-body">
 67 |                             <a
 68 |                                 class="btn btn-block btn-social btn-facebook"
 69 |                                 href="/auth/facebook"
 70 |                                 role="button"
 71 |                             >
 72 |                                 <i class="fab fa-facebook"></i>
 73 |                                 Sign Up with Facebook
 74 |                             </a>
 75 |                         </div>
 76 |                     </div>
 77 |                 </div>
 78 |             </div>
 79 |         </div>       
 80 |         <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 81 |     <link
 82 |       rel="stylesheet"
 83 |       type="text/css"
 84 |       href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
 85 |     />
 86 |     <script>
 87 |       // Initialize Toastify globally
 88 |       Toastify({
 89 |         position: "toast-top-left",
 90 |         duration: 3000,
 91 |         className: "toastify-library-class",
 92 |         style: {
 93 |               background: "linear-gradient(to right, #4E575F,#343A40)",
 94 |             },
 95 |       });
 96 | 
 97 |       function validateForm(){
 98 |         const email = document.getElementById("user-email").value;
 99 |         const userPassword = document.getElementById("user-password").value;
100 |         var regex =
101 |           /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
102 |         
103 |         var regexEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
104 |         if(!email && !userPassword){
105 |           Toastify({
106 |             text:"Please fill email and password",
107 |             type:"error",
108 |             style: {
109 |               background: "linear-gradient(to right, #4E575F,#343A40)",
110 |             },
111 |             duration:3000,
112 |           }).showToast();
113 |           return false;
114 |         }
115 |         else if(!email || !userPassword){
116 |           Toastify({
117 |             text:"Please fill email/password",
118 |             type:"error",
119 |             style: {
120 |               background: "linear-gradient(to right, #4E575F,#343A40)",
121 |             },
122 |             duration:3000,
123 |           }).showToast();
124 |           return false;
125 |         }
126 |         else if(!regexEmail.test(email)){
127 |           Toastify({
128 |             text: "Enter a valid Email",
129 |             type: "error",
130 |             style: {
131 |               background: "linear-gradient(to right, #4E575F,#343A40)",
132 |             },
133 |             duration: 3000,
134 |           }).showToast();
135 |           return false;
136 |         }
137 |         else if (!regex.test(userPassword)) {
138 |           Toastify({
139 |             text: "Password must have at least 8 characters, including one uppercase letter, one lowercase letter, one number, and one special character.",
140 |             type: "error",
141 |             style: {
142 |               background: "linear-gradient(to right, #4E575F,#343A40)",
143 |             },
144 |             duration: 3000,
145 |           }).showToast();
146 |           return false;
147 |         }
148 |         return true;
149 |       }
150 |       const userRegister = document.getElementById("user-register");
151 |       userRegister.addEventListener("click", async (e) => {
152 |         e.preventDefault();
153 | 
154 |         // Validate Form
155 |         const isFormValid = validateForm();
156 | 
157 |         if (isFormValid) {
158 |           try {
159 |             // Send POST request only if the password is valid
160 |             const formData = JSON.stringify({
161 |               username: document.querySelector('input[name="username"]').value,
162 |               password: document.querySelector('input[name="password"]').value,
163 |             });
164 |             const response = await fetch("/register", {
165 |               method: "POST",
166 |               headers: {
167 |                 "Content-Type": "application/json",
168 |               },
169 |               body: formData,
170 |             });
171 | 
172 |             if (response.ok) {
173 |               const data = await response.json();
174 |               if (data.success) {
175 |                 await Toastify({
176 |                   text: data.message,
177 |                   type: "success",
178 |                 }).showToast();
179 |                 window.location.href = "/secrets"; 
180 |                 window.alert("Registration successful! Login to continue");
181 |               } else {
182 |                 Toastify({
183 |                   text: data.message,
184 |                   type: "error",
185 |                   style: {
186 |               background: "linear-gradient(to right, #4E575F,#343A40)",
187 |             },
188 |                 }).showToast();
189 |               }
190 |             } else {
191 |               console.error("Server error:", response.statusText);
192 |               Toastify({
193 |                 text: "Error! Please try again later",
194 |                 type: "error",
195 |                 style: {
196 |               background: "linear-gradient(to right, #4E575F,#343A40)",
197 |             },
198 |               }).showToast();
199 |             }
200 |           } catch (error) {
201 |             Toastify({
202 |               text: "Error! Please try again later",
203 |               type: "error",
204 |               style: {
205 |               background: "linear-gradient(to right, #4E575F,#343A40)",
206 |             },
207 |             }).showToast();
208 |           }
209 |         }
210 |       });
211 |     </script>
212 |         <%- include('partials/footer') %>
213 |     </body>
214 | </html>
215 | 


--------------------------------------------------------------------------------
/views/secret-form.ejs:
--------------------------------------------------------------------------------
 1 | <%- include('partials/header') %>
 2 | 
 3 | <div class="container" style="text-align: center">
 4 |   <div class="secrets-container jumbotron centered">
 5 |     <i class="fas fa-key fa-6x"></i>
 6 |     <h1 class="display-3">Secrets</h1>
 7 |     <p class="secret-text">Don't keep your secrets, share them anonymously!</p>
 8 | 
 9 |     <form action="/submit-secret-form" method="POST">
10 |       <div class="form-group">
11 |         <input
12 |           type="text"
13 |           class="form-control text-center"
14 |           name="secret"
15 |           placeholder="What's your secret?"
16 |         />
17 |       </div>
18 |       <button type="submit" class="btn btn-dark">Submit</button>
19 |     </form>
20 |   </div>
21 | </div>
22 | <%- include('partials/footer') %>
23 | 


--------------------------------------------------------------------------------
/views/secrets.ejs:
--------------------------------------------------------------------------------
  1 | <%- include('partials/header') %>
  2 | 
  3 |   <div class="secrets-container jumbotron text-center">
  4 |     <div class="container">
  5 |       <i class="fas fa-key fa-6x"></i>
  6 |       <h1 class="display-3">You've Discovered My Secret!</h1>
  7 | 
  8 |       <% usersWithSecrets.forEach(function(user){ %>
  9 |         <% user.secret.forEach(function(secret,index){ %>
 10 | 
 11 |           <div class="card">
 12 |             <div class="card-body" style="display: flex;justify-content:flex-start;">
 13 | 
 14 |               <p class="secret-text">
 15 |               <div class="inner-secret-text">
 16 |                 <%= secret.title %>
 17 |               </div>
 18 |               <div class="vote-container" id="vote-container-<%= index %>">
 19 |                 <img class="vote-image" alt="Upvote" data-index='<%= index %>' data-value='<%= user.username %>'
 20 |                   id="upvote-image-<%= index %>" data-upvotecount='<%= secret.upvote %>'
 21 |                   data-downvotecount='<%= secret.downvote %>' onclick="handleUpvote(this ,<%= index %>)" width="24"
 22 |                   height="24"
 23 |                   src="<%= upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png' %>" />
 24 |                 <span class="vote-count" id="upvote-count-<%= index %>">
 25 |                   <%= secret.upvote %>
 26 |                 </span>
 27 |                 <img class="vote-image" width="24" height="24" data-index='<%= index %>'
 28 |                   id="downvote-image-<%= index %>" data-value='<%= user.username %>'
 29 |                   data-upvotecount='<%= secret.upvote %>' data-downvotecount='<%= secret.downvote %>'
 30 |                   onclick="handleDownvote(this, <%= index %>)"
 31 |                   src="<%= downvoted ? 'https://img.icons8.com/material/24/thumbs-down--v1.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-down-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png' %>"
 32 |                   alt="Downvote" />
 33 |                 <span class="vote-count" id="downvote-count-<%= index %>">
 34 |                   <%= secret.downvote %>
 35 |                 </span>
 36 |               </div>
 37 |               </p>
 38 |             </div>
 39 |           </div>
 40 |           <% }) %>
 41 |             <% }) %>
 42 |               <style>
 43 |                 .card {
 44 |                   margin: 10px 0px;
 45 |                   background-color: #315B9A;
 46 |                   transition: transform 0.3s ease-in-out;
 47 |                   font-size: 20px;
 48 |                 }
 49 | 
 50 |                 .card:hover {
 51 |                   transform: scale(1.05);
 52 |                   box-shadow: 0 0 15px #64a9db;
 53 |                 }
 54 | 
 55 |                 .card-text {
 56 |                   color: #A7DAFF;
 57 |                 }
 58 |               </style>
 59 |               <script>
 60 | 
 61 |                 let upvoted = <%= upvoted %>;
 62 |                 let downvoted = <%= downvoted %>;
 63 |                 function handleUpvote(element, index) {
 64 | 
 65 |                   let upvoteCount = element.getAttribute("data-upvotecount");
 66 |                   let downvoteCount = element.getAttribute("data-downvotecount");
 67 | 
 68 |                   //let index = element.getAttribute('data-index');
 69 |                   let username = element.getAttribute('data-value');
 70 |                   //console.log("index: " + index + " username : " + username);
 71 | 
 72 |                   if (!upvoted) {
 73 |                     upvoted = true;
 74 |                     upvoteCount++;
 75 |                     if (downvoted) {
 76 |                       downvoted = false;
 77 |                     }
 78 |                   } else {
 79 |                     upvoted = false;
 80 |                   }
 81 | 
 82 |                   updateVotes(upvoteCount, downvoteCount, index, username);
 83 |                   // // Update the image source and count on the page
 84 |                   //console.log("upvoted: " + upvoted);
 85 |                   //console.log("downvoted: " + downvoted);
 86 |                   updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index);
 87 |                 }
 88 | 
 89 |                 function handleDownvote(element, index) {
 90 |                   let upvoteCount = element.getAttribute("data-upvotecount");
 91 |                   let downvoteCount = element.getAttribute("data-downvotecount");
 92 | 
 93 |                   //let index = element.getAttribute('data-index');
 94 |                   let username = element.getAttribute('data-value');
 95 |                   //console.log("index: " + index + " username : " + username);
 96 | 
 97 |                   if (!downvoted) {
 98 |                     downvoted = true;
 99 |                     //upvoted = false;
100 |                     downvoteCount++;
101 |                     if (upvoted) {
102 |                       upvoted = false;
103 |                       //upvoteCount--;
104 |                     }
105 |                   } else {
106 |                     downvoted = false;
107 |                     //downvoteCount--;
108 |                   }
109 | 
110 |                   updateVotes(upvoteCount, downvoteCount, index, username);
111 |                   // Update the image source and count on the page
112 |                   //console.log("upvoted: " + upvoted);
113 |                   //console.log("downvoted: " + downvoted);
114 | 
115 |                   updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index);
116 |                 }
117 | 
118 |                 function updateVotes(upvoteCount, downvoteCount, index, username) {
119 |                   // Implement logic to send an AJAX request or use fetch to update the server-side vote counts
120 |                   // You would typically send a POST request to your server here
121 |                   // Example using fetch:
122 |                   fetch('/api/votes', {
123 |                     method: 'POST',
124 |                     headers: {
125 |                       'Content-Type': 'application/json',
126 |                     },
127 |                     body: JSON.stringify({
128 |                       upvoteCount,
129 |                       downvoteCount,
130 |                       index,
131 |                       username,
132 |                     }),
133 |                   })
134 |                     .then(response => response.json())
135 |                     .then(data => console.log('Votes updated:', data))
136 |                     .catch(error => console.error('Error updating votes:', error));
137 |                 }
138 | 
139 |                 function updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index) {
140 |                   // Update the image sources and vote counts on the page for the specific secret
141 |                   const containerId = `vote-container-${index}`;
142 |                   const upvoteImageId = `upvote-image-${index}`;
143 |                   const downvoteImageId = `downvote-image-${index}`;
144 |                   const upvoteCountId = `upvote-count-${index}`;
145 |                   const downvoteCountId = `downvote-count-${index}`;
146 | 
147 |                   const upvoteImage = document.getElementById(upvoteImageId);
148 |                   const downvoteImage = document.getElementById(downvoteImageId);
149 | 
150 |                   const upvoteCountElement = document.getElementById(upvoteCountId);
151 |                   const downvoteCountElement = document.getElementById(downvoteCountId);
152 | 
153 |                   //getting wrong values -- null
154 |                   //console.log(upvoteImage)
155 |                   //console.log(downvoteImage)
156 | 
157 |                   //getting correct values below
158 |                   //console.log(upvoteCountElement)
159 |                   //console.log(downvoteCountElement)
160 | 
161 |                   if (upvoteImage && downvoteImage && upvoteCountElement && downvoteCountElement) {
162 |                     upvoteImage.src = upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png';
163 |                     downvoteImage.src = downvoted ? 'https://img.icons8.com/material/24/thumbs-down--v1.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-down-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png';
164 |                     upvoteCountElement.innerText = upvoteCount;
165 |                     downvoteCountElement.innerText = downvoteCount;
166 |                   } else {
167 |                     console.error(`One or more elements not found for secret at index ${index}`);
168 |                   }
169 |                 }
170 | 
171 |               </script>
172 | 
173 | 
174 |               <hr />
175 |               <div class="d-flex justify-content-center">
176 |                 <a class="button_all_white" href="/logout" role="button"><button class="secondary"
177 |                     style="font-size: 1em; margin: 10px">
178 |                     Log Out
179 |                   </button></a>
180 |                 <a class="button_all_black" href="/submit-secret-form" role="button"><button
181 |                     style="font-size: 1em; margin: 10px">
182 |                     Submit a Secret
183 |                   </button></a>
184 |               </div>
185 |     </div>
186 |   </div>
187 |   <a href="#navbar" id="goToTopBtn" title="Go to top">
188 |     <img src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
189 |       style="width: 70%; height: 70%; color: white" />
190 |   </a>
191 |   <%- include('partials/footer') %>


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