diff --git a/.github/workflows/auto-assign-label-pr.yml b/.github/workflows/auto-assign-label-pr.yml index 10382c3a..4e858565 100644 --- a/.github/workflows/auto-assign-label-pr.yml +++ b/.github/workflows/auto-assign-label-pr.yml @@ -13,16 +13,16 @@ jobs: runs-on: ubuntu-latest steps: - - name: Add Labels to PR - uses: actions-ecosystem/action-add-labels@v1.1.1 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - labels: - - gssoc-ext - - hacktoberfest-accepted + - name: Add Labels to PR + uses: actions-ecosystem/action-add-labels@v1.1.1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + labels: | + gssoc-ext + hacktoberfest-accepted - - name: Assign PR to Creator - uses: actions-ecosystem/action-assign@v1 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - assignees: ${{ github.actor }} + - name: Assign PR to Creator + uses: actions-ecosystem/action-assign@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + assignees: ${{ github.actor }} \ No newline at end of file diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000..c1e02d46 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,21 @@ +name: 'Close stale pull requests' + +on: + schedule: + # Runs the action once a day + - cron: '0 0 * * *' + +jobs: + close_stale_prs: + runs-on: ubuntu-latest + + steps: + - name: Close stale pull requests + uses: actions/stale@v8 + with: + days-before-stale: 7 + days-before-close: 1 + stale-issue-message: 'This PR has been marked as stale due to 7 days of inactivity.' + close-issue-message: 'Closing this PR due to prolonged inactivity. Please reopen if necessary.' + stale-pr-label: 'stale' + only-prs: true diff --git a/Contributing.md b/Contributing.md index 10b29df9..9c823df2 100644 --- a/Contributing.md +++ b/Contributing.md @@ -1,31 +1,237 @@ +# Contributing To Collect Your GamingTools Repository ๐ŸŽฎ +Thank you for your interest in contributing to **Collect Your GamingTools**! Weโ€™re excited to see what creative ideas you bring. Follow these simple guidelines below to get started. -# ๐ŸŽฎ Contributing to Collect Your GamingTools Repository +
-Thank you for your interest in contributing to **Collect Your GamingTools**! Weโ€™re excited to see what creative ideas you bring. Follow these simple guidelines below to get started. +# Code of Conduct ๐Ÿ“ƒ ---- +Please read and follow our [Code of Conduct.](https://github.com/swaraj-das/Collect-your-GamingTools/blob/main/CODE_OF_CONDUCT.md) -## ๐Ÿš€ Getting Started +
-1. **Fork the Repository** - Click the "Fork" button at the top-right corner to create your own copy of the repo. +# Need Help With The Basics? ๐Ÿค” -2. **Clone Your Fork** - Clone your forked repository to your local machine: - ```bash - git clone https://github.com//Collect-your-GamingTools.git - ``` +If you're new to Git and GitHub, no worries! Here are some useful resources: -3. **Create a New Branch** - Create a new branch for your changes: - ```bash - git checkout -b feature/your-feature-name - ``` +- [Forking a Repository](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) +- [Cloning a Repository](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request) +- [How to Create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) +- [Getting Started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) +- [Learn GitHub from Scratch](https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources) + +
+ +# Project Structure ๐Ÿ“‚ + +```bash +COLLECT-YOUR-GAMINGTOOLS/ +โ”œโ”€โ”€ .github/ # GitHub-related configurations such as workflows, issue templates, etc +โ”‚ +โ”œโ”€โ”€ backend/ # All the components of the project +โ”‚ +โ”œโ”€โ”€ contributor/ # Contributor page in the project +โ”‚ +โ”œโ”€โ”€ images/ # All the images in the project +โ”‚ +โ”œโ”€โ”€ Loader/ # Loading paging for the project +โ”‚ +โ”œโ”€โ”€ login/ # Login page in the project +โ”‚ +โ”œโ”€โ”€ Policies/ # Privacy and other policies for the project +โ”‚ +โ”œโ”€โ”€ popup/ # Pop Up action for the project +โ”‚ +โ”œโ”€โ”€ SignUp/ # Sign Up page in the project +โ”‚ +โ”œโ”€โ”€ .gitattributes/ +โ”‚ +โ”œโ”€โ”€ aboutus.html # About us page in the project +โ”œโ”€โ”€ +โ”œโ”€โ”€ CODE_OF_CONDUCT.md # Some rules for the contributors +โ”œโ”€โ”€ +โ”œโ”€โ”€ CONTRIBUTING.md # Instructions for the contributors +โ”œโ”€โ”€ +โ”œโ”€โ”€ darkMode.js +โ”œโ”€โ”€ +โ”œโ”€โ”€ docker-compose.yml +โ”œโ”€โ”€ +โ”œโ”€โ”€ Dockerfile +โ”œโ”€โ”€ +โ”œโ”€โ”€ index.html # Main page of the project +โ”œโ”€โ”€ +โ”œโ”€โ”€ LICENSE # A set of permissions to do something +โ”œโ”€โ”€ +โ”œโ”€โ”€ manifest.json +โ”œโ”€โ”€ +โ”œโ”€โ”€ pull_request_template.md +โ”œโ”€โ”€ +โ”œโ”€โ”€ README.md # Some instructions about the contribution +โ”œโ”€โ”€ +โ”œโ”€โ”€ script.js +โ”œโ”€โ”€ +โ”œโ”€โ”€ SECURITY.md +โ”œโ”€โ”€ +โ”œโ”€โ”€ service-worker.js +โ”œโ”€โ”€ +โ”œโ”€โ”€ style.css # Stylesheet document of the project +โ”œโ”€โ”€ +``` + +
+ +# Getting Started ๐Ÿš€ + +1. **Star this repository** + Click on the top right corner marked as **Stars** at last. + +2. **Fork this repository** + Click on the top right corner marked as **Fork** at second last. + +3. **Clone the forked repository** + +```bash +git clone https://github.com//Collect-your-GamingTools.git +``` + +4. **Navigate to the project directory** + +```bash +cd Collect-your-GamingTools +``` + +5. **Create a new branch** + +```bash +git checkout -b +``` + +6. **To make changes** + +```bash +git add . +``` + +7. **Now to commit** + +```bash +git commit -m "add comment according to your changes or addition of features inside this" +``` + +8. **Push your local commits to the remote repository** + +```bash +git push -u origin +``` + +9. **Create a Pull Request** + +10. **Congratulations! ๐ŸŽ‰ you've made your contribution** + +
+ +# Alternatively, contribute using GitHub Desktop ๐Ÿ–ฅ๏ธ + +1. **Open GitHub Desktop:** + Launch GitHub Desktop and log in to your GitHub account if you haven't already. + +2. **Clone the Repository:** +- If you haven't cloned the project repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository." +- Choose the project repository from the list of repositories on GitHub and clone it to your local machine. + +3.**Switch to the Correct Branch:** +- Ensure you are on the branch that you want to submit a pull request for. +- If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch. + +4. **Make Changes:** +- Make your changes to the code or files in the repository using your preferred code editor. + +5. **Commit Changes:** +- In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit. +- Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to " button to commit your changes to the local branch. ---- +6. **Push Changes to GitHub:** +- After committing your changes, click the "Push origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub. -## ๐Ÿ–Œ๏ธ Making Changes +7. **Create a Pull Request:** +- Go to the GitHub website and navigate to your fork of the project repository. +- You should see a button to "Compare & pull request" between your fork and the original repository. Click on it. + +8. **Review and Submit:** +- On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request. +- Once you're satisfied, click the "Create pull request" button to submit your pull request. + +9. **Wait for Review:** +Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the project repository. + +
+ +# For Help And Support ๐Ÿ’ฌ + +- Admin Github Profile:- [SWARAJ DAS](https://github.com/swaraj-das) +- Contact :- [Email](swarajdas625w@gmail.com) + +
+ +# Good Coding Practices ๐Ÿง‘โ€๐Ÿ’ป + +1. **Follow the Project's Code Style** + + - Maintain consistency with the existing code style (indentation, spacing, comments). + - Use meaningful and descriptive names for variables, functions, and classes. + - Keep functions short and focused on a single task. + - Avoid hardcoding values; instead, use constants or configuration files when possible. + +2. **Write Clear and Concise Comments** + + - Use comments to explain why you did something, not just what you did. + - Avoid unnecessary comments that state the obvious. + - Document complex logic and functions with brief explanations to help others understand your thought -process. + +3. **Keep Code DRY (Don't Repeat Yourself)** + + - Avoid duplicating code. Reuse functions, methods, and components whenever possible. + - If you find yourself copying and pasting code, consider creating a new function or component. + +4. **Write Tests** + + - Write unit tests for your functions and components. + - Ensure your tests cover both expected outcomes and edge cases. + - Run tests locally before making a pull request to make sure your changes donโ€™t introduce new bugs. + +5. **Code Reviews and Feedback** + + - Be open to receiving constructive feedback from other contributors. + - Conduct code reviews for others and provide meaningful suggestions to improve the code. + - Always refactor your code based on feedback to meet the project's standards. + +
+ +# Pull Request Process ๐Ÿš€ + +When submitting a pull request, please adhere to the following: + +1. **Self-review your code** before submission. ๐Ÿ˜€ +2. Include a detailed description of the functionality youโ€™ve added or modified. +3. Comment your code, especially in complex sections, to aid understanding. +4. Add relevant screenshots to assist in the review process. +5. Submit your PR using the provided template and hang tight; we'll review it as soon as possible! + +
+ +# Issue Report Process ๐Ÿ“Œ + +To report an issue, follow these steps: + +1. Navigate to the project's issues section :- [Issues](https://github.com/swaraj-das/Collect-your-GamingTools/issues/new/choose) +2. Please kindly choose the appropriate template according to your issue. +3. Provide a clear and concise description of the issue. +4. Wait until someone looks into your report. +5. Begin working on the issue only after you have been assigned to it. ๐Ÿš€ + +
+ +# Making Changes ๐Ÿ–Œ๏ธ 1. **Code Changes** Make your modifications, ensuring they align with the projectโ€™s coding standards and code of conduct. Add exciting features, enriching documentation or squash bugs! @@ -42,19 +248,19 @@ Thank you for your interest in contributing to **Collect Your GamingTools**! We git push origin feature/your-feature-name ``` ---- +
+ +# Additional Notes ๐ŸŽ‰ -## ๐Ÿ› ๏ธ Creating a Pull Request +- Make sure to sync your fork with the latest changes from the original repo before pushing new features. +- Respect coding conventions and keep your code clean. Comment your changes for ease in review. -1. Once your changes are pushed, create a pull request (PR) on the original repository. -2. Provide a detailed description of your changes and link any relevant issues. Provide relevant images/videos, if any. -3. Wait for reviews and engage with feedback! +Welcome to Open-Source and thank you for contributing! ๐Ÿ™Œ ---- +
-## ๐ŸŽ‰ Additional Notes +# Thank you for contributing ๐Ÿ’— -- Make sure to sync your fork with the latest changes from the original repo before pushing new features. -- Respect coding conventions and keep your code clean. Comment your changes for ease in review. +We truly appreciate your time and effort to help improve our project. Feel free to reach out if you have any questions or need guidance. Happy coding! ๐Ÿš€ -Welcome to Open-Source and thank you for contributing! ๐Ÿ™Œ \ No newline at end of file +## \ No newline at end of file diff --git a/Contributors/contributor.css b/Contributors/contributor.css deleted file mode 100644 index a9aadd71..00000000 --- a/Contributors/contributor.css +++ /dev/null @@ -1,262 +0,0 @@ -body { - font-family: "Poppins"; - color: #333; - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - margin: 0; -} - -.container { - text-align: center; -} - -.title { - display: inline-block; - font-size: 3em; - margin-bottom: 20px; - padding: 10px; - color: #f6f2f6; - text-shadow: 1px 1px 2px rgb(184, 45, 235), 0 0 1em rgba(216, 130, 200, 0.617), - 0 0 0.2em rgba(99, 1, 124, 0.623); - /* border-radius: 20px; */ - /* background-color: rgba(209, 209, 255, 0.8); */ -} - -.contributors-grid { - display: flex; - flex-wrap: wrap; - gap: 20px; - justify-content: center; - padding: 20px; - gap: 40px; -} - -.contributor-card { - width: 300px; - position: relative; - overflow: hidden; - max-width: calc(55% - 16px); - display: flex; - flex-direction: column; - align-items: center; - background-color: #f9e2f9; - /* border: 1px solid #00ebdf; */ - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 16px; - transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; - text-decoration: none; - color: inherit; - /* margin-bottom: 16px; */ -} - -.contributor-card:hover { - transform: scale(1.02); - box-shadow: 1px 1px 23px rgba(170, 1, 175, 0.915); - border: none; - cursor: pointer; -} - -.contributor-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(132deg, #5103fa 50%, rgb(218, 46, 146) 51%); - /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */ - transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; - transform: translate(-100%, -100%); - opacity: 0; - z-index: -1; -} - -.contributor-card:hover::before { - transform: translate(0, 0); - opacity: 1; -} - -.contributor-card img { - border-radius: 50%; - width: 100px; - height: 100px; - object-fit: cover; - margin-bottom: 10px; - transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out; -} - -.contributor-card:hover img { - border: 2px solid rgb(255, 234, 0); - box-shadow: -1px 2px 27px rgb(0, 217, 255); -} - -/* - .contributor-card h2 { - margin: 0 0 10px; - } */ -/* - .contributor-card p { - } */ - -.contributor-card h2 { - font-size: 1.2em; - color: #040404; - position: relative; - z-index: 1; - transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; -} - -.contributor-card p { - font-size: 1.2em; - color: #040404; - position: relative; - z-index: 1; - transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; - margin: 0 0 10px; -} - -.contributor-card:hover h2 { - text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108), - 0 0 0.8em rgb(0, 14, 108); - color: white; -} - -.contributor-card:hover p { - text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168), - 0 0 0.3em rgb(134, 136, 250); - color: white; - - /* font-weight: 400; */ -} - -/* dark mode */ -/* Toggle button styles */ -.toggle-container { - position: fixed; /* Change this as needed for positioning */ - top: 25px; - right: 40px; -} - -.toggle { - appearance: none; - outline: none; - cursor: pointer; - width: 100%; - height: 100%; - box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; - border-radius: 999px; - color: hsl(240, 100%, 95%); - transition: all 500ms; - position: absolute; - top: 0; - left: 0; -} - -.toggle:checked { - background-color: #333; -} -.toggle:checked:before { - transform: translateX(25px); -} - -body { - background-color: #f8f9fa; - color: #212529; -} - -.nav-container { - background-color: #ffffff; -} - -.footer { - background-color: #ffffff; - color: #212529; -} - -/* Dark mode styles */ -body.dark-mode { - background-color: #333; - color: #ffffff; -} - -body.dark-mode .nav-container { - background-color: #343a40; -} - -body.dark-mode .footer { - background-color: #343a40; - color: #ffffff; -} -#toggle { - display: inline-block; - border-radius: 50px; - transition: all 0.4s ease-in-out; - padding: 10px 10px; - background-color: transparent; - border: 2px solid #c6c9d8bf; - color: #c6c9d8bf; - font-weight: 600; - font-size: 14px; - letter-spacing: 2px; - text-decoration: none; -} -.toggle-container { - --size: 2rem; - width: var(--size); - height: var(--size); -} - -.toggle { - appearance: none; - outline: none; - cursor: pointer; - width: 100%; - height: 100%; - box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; - border-radius: 999px; - color: hsl(240, 100%, 95%); - transition: all 500ms; - position: absolute; - top: 25px; - right: 0; - - &:checked { - --ray-size: calc(var(--size) * -0.4); - --offset-orthogonal: calc(var(--size) * 0.65); - --offset-diagonal: calc(var(--size) * 0.45); - transform: scale(0.75); - color: hsl(40, 100%, 50%); - box-shadow: inset 0 0 0 var(--size), - calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), - var(--offset-orthogonal) 0 0 var(--ray-size), - 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), - 0 var(--offset-orthogonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 - var(--ray-size), - var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), - var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); - } -} - -/* Apply fade-down animation to the toggle container */ -.toggle-container[data-aos="fade-down"] { - transition: opacity 500ms ease-in-out; - opacity: 0; -} - -.toggle-container[data-aos="fade-down"].aos-animate { - opacity: 1; -} -body.dark-mode .contributor-card { - background: #0e1525; -} -body.dark-mode .contributor-card p { - color: white; -} -body.dark-mode .contributor-card h2 { - color: white; -} diff --git a/Contributors/contributor.html b/Contributors/contributor.html deleted file mode 100644 index a55f7ac2..00000000 --- a/Contributors/contributor.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - Contributors - - - - - - - - - -
-
- -
-

Our Contributors

-
-
- - - - - - diff --git a/Contributors/contributor.js b/Contributors/contributor.js deleted file mode 100644 index 017e37a7..00000000 --- a/Contributors/contributor.js +++ /dev/null @@ -1,55 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const contributorsContainer = document.getElementById("contributors"); - - async function fetchContributors() { - try { - const response = await fetch( - `https://api.github.com/repos/swaraj-das/Collect-your-GamingTools/contributors` - ); - const contributors = await response.json(); - - contributorsContainer.innerHTML = ""; - contributors.forEach((contributor) => { - const contributorCard = document.createElement("div"); - contributorCard.className = "contributor-card"; - - contributorCard.innerHTML = ` - - ${contributor.login} - -

${contributor.login}

-

Contributions: ${contributor.contributions}

- `; - - contributorsContainer.appendChild(contributorCard); - }); - } catch (error) { - console.error("Error fetching contributors:", error); - } - } - - fetchContributors(); -}); - -// Dark mode (remains unchanged) -document.addEventListener("DOMContentLoaded", () => { - const toggleCheckbox = document.getElementById("themeToggle"); - const body = document.body; - - if (localStorage.getItem("dark-mode") === "enabled") { - body.classList.add("dark-mode"); - toggleCheckbox.checked = true; - } else { - toggleCheckbox.checked = false; - } - - toggleCheckbox.addEventListener("change", () => { - if (toggleCheckbox.checked) { - body.classList.add("dark-mode"); - localStorage.setItem("dark-mode", "enabled"); - } else { - body.classList.remove("dark-mode"); - localStorage.setItem("dark-mode", "disabled"); - } - }); -}); diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..888bf077 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 SWARAJ DAS + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Loader/Loader.css b/Loader/Loader.css new file mode 100644 index 00000000..73aafd5c --- /dev/null +++ b/Loader/Loader.css @@ -0,0 +1,44 @@ +.loader { + width: 120px; /* Adjust size */ + height: 120px; /* Adjust size */ + position: fixed; /* Stay fixed in the center */ + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9999; +} + +/* Main content styling */ +.main-content { + display: none; + opacity: 0; +} + +/* Show content when page is loaded */ +body.loaded .loader { + display: none; /* Hide loader */ +} + +body.loaded .main-content { + display: block; /* Show main content */ + animation: fadeIn 1s ease-in-out forwards; /* Fade in animation */ +} + +body.loaded .popup { + display: flex; /* Show popup after loading */ +} + +/* Smooth fade-in effect for content */ +@keyframes fadeIn { + to { + opacity: 1; + } +} + +/* Body styling to prevent scrolling while the loader is visible */ +body { + margin: 0; + padding: 0; + overflow: hidden; /* Prevent scrolling while loader is visible */ + background-color: #f0f4f8; +} diff --git a/Loader/Loader.js b/Loader/Loader.js new file mode 100644 index 00000000..7080e823 --- /dev/null +++ b/Loader/Loader.js @@ -0,0 +1,17 @@ +// Load Lottie animation +const loader = document.getElementById("loader"); +const animation = lottie.loadAnimation({ + container: loader, // the DOM element that will contain the animation + renderer: "svg", // the rendering method + loop: true, // loop the animation + autoplay: true, // start playing the animation + path: "https://lottie.host/f0db1198-7725-40df-91d4-15dcf396f3a2/vyKXUMpsxT.json", // the path to the animation JSON +}); + +window.onload = function () { + setTimeout(function () { + // Stop the animation and go to the last frame + animation.stop(); + document.body.classList.add("loaded"); + }, 1500); // 1.5-second delay +}; diff --git a/PrivacyPolicy/PrivacyPolicy.css b/Policies/PrivacyPolicy/PrivacyPolicy.css similarity index 100% rename from PrivacyPolicy/PrivacyPolicy.css rename to Policies/PrivacyPolicy/PrivacyPolicy.css diff --git a/PrivacyPolicy/PrivacyPolicy.html b/Policies/PrivacyPolicy/PrivacyPolicy.html similarity index 100% rename from PrivacyPolicy/PrivacyPolicy.html rename to Policies/PrivacyPolicy/PrivacyPolicy.html diff --git a/Policies/returnPolicy.html b/Policies/returnPolicy.html new file mode 100644 index 00000000..ded7f38b --- /dev/null +++ b/Policies/returnPolicy.html @@ -0,0 +1,223 @@ + + + + + + + Return Policy - Collect Your Gaming Tools + + + + + + + + +
+
+

Return Policy

+
+ +
+

Return Conditions

+

To be eligible for a return, your item must be unused and in the same condition that you received it. It must also be in the original packaging.

+
+ +
+

Return Process

+
    +
  • Contact us within 30 days of receiving your order.
    • +
  • Provide your order number and the reason for the return.
    • +
  • Ship the item back to us using the original packaging.
    • +
  • Once we receive your item, we will inspect it and notify you of the approval or rejection of your return.
    • +
+
+ +
+

Refunds

+

If your return is approved, we will process your refund to your original payment method within a certain amount of days.

+
+ +
+

Exchanges

+

If you need to exchange an item for the same item, please send us an email at support@collectyourgamingtools.com.

+
+ + +
+ Back to Home +
+
+ + +
+

© 2024 Collect Your Gaming Tools. All rights reserved.

+
+ + + + + diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 00000000..034e8480 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,21 @@ +# Security Policy + +## Supported Versions + +Use this section to tell people about which versions of your project are +currently being supported with security updates. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :white_check_mark: | +| < 4.0 | :x: | + +## Reporting a Vulnerability + +Use this section to tell people how to report a vulnerability. + +Tell them where to go, how often they can expect to get an update on a +reported vulnerability, what to expect if the vulnerability is accepted or +declined, etc. diff --git a/aboutus.html b/aboutus.html index b68c19aa..ed8a7b99 100644 --- a/aboutus.html +++ b/aboutus.html @@ -11,6 +11,9 @@ + + + + +
@@ -140,14 +183,16 @@
  • Gaming Keyboard
  • Others
    • - +
    • -
  • - - Cart Icon 0 - -
    • + + + Cart Icon + 0 + @@ -172,56 +217,58 @@
    -

    About Gaming Tools

    -

    Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're +

    About GamingTools

    +

    Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're passionate about providing gamers with the best tools to elevate their gaming experience to new heights.

    +
    +

    Why Choose Us?

    +
    -

    Why Choose Us?

    -
    +

    Wide Range of Accessories

    From controllers to VR headsets, we offer a comprehensive selection for all gaming platforms.

    -
    +

    Competitive Pricing

    Get the best gaming gear at unbeatable prices, with regular discounts and promotions.

    -
    +

    Free Shipping

    Enjoy free courier services on all orders, making it easy to get your hands on the latest gear.

    -
    +

    Secure Shopping

    Shop with confidence using our secure checkout process to protect your information.

    -
    +

    Easy Returns

    Hassle-free returns and exchanges to ensure your complete satisfaction with every purchase.

    -
    +

    Customer Support

    Our dedicated team is always ready to assist you with any questions or concerns.

    -
    +

    Product Reviews

    Make informed decisions with help from our customer reviews and ratings.

    -
    +

    FAQs Section

    Find quick answers to common questions in our comprehensive FAQ section.

    @@ -286,18 +333,6 @@

    Feedback Form

    - - - -
    @@ -182,9 +185,9 @@

    Wireless Controllers for PlayStation 4

    (2252 reviews)

    - Overall Rating: -

    4.1โ˜…

    + Overall Rating4.1โ˜…
    +
    @@ -212,9 +215,9 @@

    Controllers for Xbox One and Series X

    (1189 reviews)

    - Overall Rating: -

    4.8โ˜…

    + Overall Rating4.8โ˜…
    +
    @@ -244,9 +247,9 @@

    Wireless Controllers for Nintendo Switch

    (3145 reviews)

    - Overall Rating: -

    4.2โ˜…

    + Overall Rating4.2โ˜…
    +
    @@ -276,9 +279,9 @@

    VR Headset from Meta

    (871 reviews)

    - Overall Rating: -

    4.2โ˜…

    + Overall Rating4.2โ˜…
    +
    @@ -308,9 +311,9 @@

    VR Headset from Apple

    (235 reviews)

    - Overall Rating: -

    4.8โ˜…

    + Overall Rating4.8โ˜…
    +
    @@ -340,9 +343,9 @@

    High Performance Gaming Mouse

    (9256 reviews)

    - Overall Rating: -

    5.0โ˜…

    + Overall Rating5.0โ˜…
    +
    @@ -371,9 +374,9 @@

    Mechanical Gaming Keyboard

    (6184 reviews)

    - Overall Rating: -

    4.5โ˜…

    + Overall Rating4.5โ˜…
    +
    @@ -402,9 +405,9 @@

    Wireless Gaming Headset

    (8452 reviews)

    - Overall Rating: -

    4.7โ˜…

    + Overall Rating4.7โ˜…
    +
    @@ -433,9 +436,9 @@

    Ergonomic Gaming Chair

    (3564 reviews)

    - Overall Rating: -

    4.8โ˜…

    + Overall Rating4.8โ˜…
    +
    @@ -584,11 +587,8 @@

    Emily Davismore

    - - -
    @@ -620,46 +620,6 @@

    Contact Our Customer Support Team

    - -
    @@ -678,8 +638,10 @@

    Collect your GamingTools

    selection of controllers, VR gear, and more.

    -   123-456-789 -   info@gamingtools.com +   123-456-789 +   info@gamingtools.com
    @@ -689,21 +651,31 @@

    Collect your GamingTools

    -
    - -
    +

    Quick Links

    +
    + +
    +

    Legal Links

    +
    +

    Feedback Form

    @@ -737,7 +709,7 @@

    Feedback Form

    @@ -818,8 +790,13 @@

    Feedback Form

    + + + + +
    - \ No newline at end of file + diff --git a/login/.env b/login/.env new file mode 100644 index 00000000..b9b59b9b --- /dev/null +++ b/login/.env @@ -0,0 +1,8 @@ + const firebaseConfig = { + apiKey: process.env.FIREBASE_API_KEY, + authDomain: process.env.FIREBASE_AUTH_DOMAIN, + projectId: process.env.FIREBASE_PROJECT_ID, + storageBucket: process.env.FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.FIREBASE_APP_ID, +}; \ No newline at end of file diff --git a/login/auth.js b/login/auth.js new file mode 100644 index 00000000..c6f5887e --- /dev/null +++ b/login/auth.js @@ -0,0 +1,68 @@ + + import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js"; + import { getAuth, signOut, onAuthStateChanged, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js"; + + // Firebase configuration + const firebaseConfig = { + apiKey: process.env.FIREBASE_API_KEY, + authDomain: process.env.FIREBASE_AUTH_DOMAIN, + projectId: process.env.FIREBASE_PROJECT_ID, + storageBucket: process.env.FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.FIREBASE_APP_ID, +}; + + + + // Initialize Firebase + const app = initializeApp(firebaseConfig); + const auth = getAuth(app); + auth.languageCode = "en"; + const provider = new GoogleAuthProvider(); + + // Sign in with Google + const googleLoginBtn = document.getElementById('google-login-btn'); + googleLoginBtn?.addEventListener('click', function () { + signInWithPopup(auth, provider) + .then((result) => { + const user = result.user; + console.log('User logged in:', user); + + // Redirect to the home page + window.location.href = "../index.html"; + }) + .catch((error) => { + console.error('Login error:', error); + }); + }); + + // Handle auth state change and toggle login/logout button + window.addEventListener('load', () => { + const authLink = document.getElementById('auth-link'); + + onAuthStateChanged(auth, (user) => { + if (user) { + // If the user is logged in, change the link to "Logout" + authLink.textContent = 'Logout'; + authLink.removeAttribute('href'); + authLink.addEventListener('click', handleLogout); + } else { + // If the user is not logged in, change the link to "Login" + authLink.textContent = 'Login'; + authLink.setAttribute('href', 'login/login.html'); + authLink.removeEventListener('click', handleLogout); + } + }); + }); + + // Handle logout + function handleLogout() { + signOut(auth) + .then(() => { + console.log('User logged out'); + window.location.reload(); // Reload the page if needed + }) + .catch((error) => { + console.error('Logout error:', error); + }); + } diff --git a/login/login.html b/login/login.html index 937f4e32..e985fdf6 100644 --- a/login/login.html +++ b/login/login.html @@ -9,6 +9,8 @@ + +
    @@ -39,7 +41,7 @@

    Welcome to Gaming Tools Store!

    @@ -120,4 +122,4 @@

    Welcome to Gaming Tools Store!

    - + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 00000000..24b19535 --- /dev/null +++ b/manifest.json @@ -0,0 +1,21 @@ +{ + "name": "Collect your GamingTools", + "short_name": "Collect your GamingTools", + "description": "A responsive and dynamic website to showcase the best gaming accessories for every gamer!", + "start_url": "/index.html", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#000000", + "icons": [ + { + "src": "/images/logo-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/images/logo-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] + } diff --git a/popup/popup.css b/popup/popup.css index d1412f36..2f6a99d1 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -82,14 +82,22 @@ color: #333; } - p { + .pop_up { margin-bottom: 26px; - color: #d7d7d7; - font-size: 13px; + font-weight: bold; + background: -webkit-linear-gradient(left, #fd1c1c, #3375c7, #14addd); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 12.7px; + + } + + .bold{ + font-size: 13.1px; } input[type="email"] { - width: 100%; + width: 93%; padding: 10px; margin-bottom: 16px; border: 1px solid #000000; diff --git a/script.js b/script.js index 1787e9e1..04553379 100644 --- a/script.js +++ b/script.js @@ -204,4 +204,278 @@ function testimonialJs() { }); } -testimonialJs(); \ No newline at end of file +testimonialJs(); + +// Service Worker code for PWA +if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/service-worker.js') + .then((registration) => { + console.log('ServiceWorker registration successful with scope: ', registration.scope); + }) + .catch((error) => { + console.log('ServiceWorker registration failed: ', error); + }); + }); +} + +var menuList = document.getElementById("menuList"); +menuList.style.height = "0px"; +menuList.style.paddingTop = "0px"; +menuList.style.display = "block"; +menuList.style.position = "fixed"; +menuList.style.borderRadius = "20px"; + +function toggleMenu() { + if (menuList.style.height == "0px") { + menuList.style.height = "auto"; + menuList.style.paddingTop = "20px"; + } else { + menuList.style.height = "0px"; + menuList.style.paddingTop = "0px"; + } +} + +window.onscroll = function() { + updateProgressBar(); + }; +function updateProgressBar() { + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + var scrollPercent = (scrollTop / scrollHeight) * 100; + document.getElementById("progressBar").style.width = scrollPercent + "%"; +} +document.addEventListener("DOMContentLoaded", () => { + console.log("Website loaded successfully!"); +}); + +// Show or hide the scroll-top button based on scroll position +window.addEventListener('scroll', function() { + const scrollTopButton = document.querySelector('.scroll-top'); + if (window.pageYOffset > 300) { + scrollTopButton.style.display = 'block'; + } else { + scrollTopButton.style.display = 'none'; + } +}); + +document.addEventListener('DOMContentLoaded', function() { + const scrollToTopBtn = document.getElementById('scrollToTopBtn'); + const progressRing = scrollToTopBtn.querySelector('circle'); + const rootElement = document.documentElement; + + const radius = progressRing.r.baseVal.value; + const circumference = radius * 2 * Math.PI; + + progressRing.style.strokeDasharray = `${circumference} ${circumference}`; + progressRing.style.strokeDashoffset = circumference; + + function setProgress(percent) { + const offset = circumference - percent / 100 * circumference; + progressRing.style.strokeDashoffset = offset; + } + + function handleScroll() { + const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight; + const scrolled = (rootElement.scrollTop / scrollTotal) * 100; + + // Show or hide the scroll-to-top button based on scroll position + if (window.pageYOffset > 300) { + scrollToTopBtn.classList.add('show'); + } else { + scrollToTopBtn.classList.remove('show'); + } + + // Update progress circle + requestAnimationFrame(() => { + setProgress(scrolled); + }); + } + + function scrollToTop() { + rootElement.scrollTo({ + top: 0, + behavior: 'smooth' + }); + } + + scrollToTopBtn.addEventListener('click', scrollToTop); + window.addEventListener('scroll', handleScroll); + + // Initial check in case the page is already scrolled on load + handleScroll(); +}); + +function toggleTheme() { + const body = document.body; + const themeToggle = document.getElementById("theme-toggle"); + body.classList.toggle("dark-mode", themeToggle.checked); + + // Save the user's preference in localStorage + if (themeToggle.checked) { + localStorage.setItem("theme", "dark"); + } else { + localStorage.setItem("theme", "light"); + } +} + +// Load theme from localStorage on page load +window.onload = () => { + const savedTheme = localStorage.getItem("theme"); + const themeToggle = document.getElementById("theme-toggle"); + if (savedTheme === "dark") { + document.body.classList.add("dark-mode"); + themeToggle.checked = true; + } +}; + +//function to remove sidebar upon clicking close button +function toggleSidebar() { + const sidebar = document.querySelector('.social-sidebar'); + const toggleArrow = document.querySelector('.toggle-arrow'); + + // Check if the sidebar is currently visible + if (sidebar.style.display === "none") { + // If hidden, show the sidebar and hide the toggle arrow + sidebar.style.display = "block"; + toggleArrow.style.display = "none"; + } else { + // If visible, hide the sidebar and show the toggle arrow + sidebar.style.display = "none"; + toggleArrow.style.display = "block"; + } +} + +function performSearch() { + let searchTerm = document.getElementById("search-input").value.toLowerCase(); + console.log(searchTerm); + let cards = document.querySelectorAll(".row"); + + cards.forEach(function (card) { + let cardHeading = card + .querySelector(".card-heading") + .innerText.toLowerCase(); + + // Check if the search term is in the card heading or description + if (cardHeading.includes(searchTerm)) { + card.style.display = "block"; // Show the card + } else { + card.style.display = "none"; // Hide the card + } + }); +} + +async function SendEmail(e) { + e.preventDefault(); + const Name = document.getElementById("name").value; + const Email = document.getElementById("email").value; + const Message = document.getElementById("message").value; + + try { + const response = await fetch("http://localhost:5000/email/SendEmail", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ Name, Email, Message }), + }); + + if (response.ok) { + alert("Email sent successfully!"); + } else { + alert("Error sending email"); + } + } catch (error) { + console.error("Error:", error); + alert("An error occurred while sending the email."); + } +} + +// faq +document.querySelectorAll('.faq input[type="checkbox"]').forEach((checkbox) => { + checkbox.addEventListener('change', function () { + const answer = this.nextElementSibling.nextElementSibling; // FAQ answer div + if (this.checked) { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } else { + answer.style.maxHeight = '0px'; + } + }); +}); + + +function testimonialJs() { + const swiper = new Swiper('.swiper', { + autoHeight: true, + loop: true, + + // If we need pagination + pagination: { + el: '.swiper-pagination', + }, + + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + +}); +} +testimonialJs(); + +// Service Worker code for PWA +if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/service-worker.js') + .then((registration) => { + console.log('ServiceWorker registration successful with scope: ', registration.scope); + }) + .catch((error) => { + console.log('ServiceWorker registration failed: ', error); + }); + }); +} + +// Function to load form data from local storage +function loadFormData() { + const data = JSON.parse(localStorage.getItem('formData')) || []; + if (data.length > 0) { + console.log('Saved Form Data:', data); + } +} + +// Function to save form data to local storage +function saveFormData() { + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const message = document.getElementById('message').value; + + const newEntry = { name, email, message }; + const existingData = JSON.parse(localStorage.getItem('formData')) || []; + existingData.push(newEntry); + localStorage.setItem('formData', JSON.stringify(existingData)); +} + +// Event listener for form submission +document.getElementById('contactForm').addEventListener('submit', function (event) { + event.preventDefault(); + saveFormData(); + clearForm(); + alert('Message sent!'); +}); + +// Function to clear input fields +function clearForm() { + document.getElementById('name').value = ''; + document.getElementById('email').value = ''; + document.getElementById('message').value = ''; +} + +// Load the form data when the page is loaded +window.onload = loadFormData; + + diff --git a/service-worker.js b/service-worker.js new file mode 100644 index 00000000..c6e96613 --- /dev/null +++ b/service-worker.js @@ -0,0 +1,43 @@ +const CACHE_NAME = 'my-pwa-cache-v1'; +const urlsToCache = [ + '/', + '/index.html', + '/styles.css', + '/script.js', + '/manifest.json', + '/images/logo-192x192.png', + '/images/logo-512x512.png' +]; + +self.addEventListener('install', (event) => { + event.waitUntil( + caches.open(CACHE_NAME) + .then((cache) => { + return cache.addAll(urlsToCache); + }) + ); +}); + +self.addEventListener('fetch', (event) => { + event.respondWith( + caches.match(event.request) + .then((response) => { + return response || fetch(event.request); + }) + ); +}); + +self.addEventListener('activate', (event) => { + const cacheWhitelist = [CACHE_NAME]; + event.waitUntil( + caches.keys().then((cacheNames) => { + return Promise.all( + cacheNames.map((cacheName) => { + if (!cacheWhitelist.includes(cacheName)) { + return caches.delete(cacheName); + } + }) + ); + }) + ); +}); diff --git a/style.css b/style.css index 83f7ea5e..1bf11643 100644 --- a/style.css +++ b/style.css @@ -146,6 +146,7 @@ textarea { padding: 10px; border: 1px solid #ccc; border-radius: 5px; + resize: vertical; } textarea { @@ -355,14 +356,14 @@ input:checked + .slider:before { } nav { - height: 50px; + height: 40px; display: flex; align-items: center; } nav ul { display: flex; flex-direction: row; - height: 50px; + height: 40px; align-items: center; } nav ul li { @@ -386,7 +387,7 @@ nav ul li a { } nav ul li a:hover { color: #e00999; - transform: scale(1.18); + transform: scale(1.08); } nav ul { list-style-type: none; @@ -397,7 +398,7 @@ nav ul { nav ul li { display: inline-block; position: relative; - margin: 0 15px; + margin: 0 10px; align-content: center; } @@ -427,7 +428,7 @@ nav ul li.login { background: linear-gradient(to right, #fb5283, #ff3527); height: 24px; border-radius: 20px; - padding: 4px 18px; + padding: 4px 22px; cursor: pointer; transition: all 0.5s ease; } @@ -441,14 +442,14 @@ nav ul li.login a { nav ul li.login:hover { color: #fff; - transform: scale(1.08); + transform: scale(1.06); } .row { display: flex; justify-content: space-between; align-items: center; - margin: 120px 0; + margin: 80px 0; } .col-1 { @@ -506,25 +507,6 @@ button { background: linear-gradient(to right, #ff3527, #fb5283, #ffd700); transition: background 0.3s ease-in-out; } -#buy-btn { - display: flex; /* Use flexbox for alignment */ - align-items: center; /* Center align items vertically */ - justify-content: center; /* Center align items horizontally */ - width: 140px; /* Initial width */ - padding: 10px; /* Initial padding */ - background-color: #4caf50; /* Button background color */ - color: white; /* Text color */ - border: none; /* No border */ - border-radius: 5px; /* Rounded corners */ - transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, - background-color 0.3s ease-in-out; /* Transition for background color */ -} - -#buy-btn:hover { - width: 160px; /* Increased width on hover */ - padding: 12px; /* Increased padding on hover */ - background-color: #45a049; /* Darker green on hover */ -} #buy-btn img { width: 30px; /* Icon size */ @@ -733,10 +715,18 @@ button { align-items: center; } +.overall-rating .rating-value { + margin-left: 8px; /* Adds space between the heading and rating */ + color: #ff3c6d; /* Sets the rating value to pink */ + font-weight: 600; /* Makes the rating value bold */ + line-height: 1; +} + .overall-rating .star { - margin-left: 5px; - color: #ff3c6d; - font-weight: 600; + margin-left: 2px; /* Small gap between the rating value and the star */ + color: #ff3c6d; /* Star color is pink as well */ + font-weight: 600; + line-height: 1; } .footer { @@ -750,17 +740,23 @@ button { .footer-content { display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-around; max-width: 1200px; margin: 0 auto; padding: 0 20px; } +.links-tag{ + width: 100%; + display: flex; +} .footer-section { flex: 1; margin-bottom: 40px; min-width: 300px; padding: 0 20px; +/* margin-left: 20px; */ + } .quick-links { @@ -979,7 +975,7 @@ button { font-size: 20px; color: white; cursor: pointer; - background-color: #1f2937; + background-color: #ff1476; border: 2px solid white; border-radius: 50%; display: flex; @@ -993,8 +989,8 @@ button { top: 50%; right: 0; transform: translateY(-50%); - transition: transform 0.3s ease-in-out; - background-color: #333; + transition: all 0.5s linear, width 0.5s ease; + background: linear-gradient(45deg, #8a2be2, #FF1493); border-radius: 10px 0 0 10px; cursor: pointer; color: white; @@ -1002,6 +998,10 @@ button { padding: 12px; z-index: 1; } +.toggle-arrow:hover{ + background: linear-gradient(45deg, #8400ffa6, #ff0088ac); + width: 30px; +} .social-sidebar { position: fixed; @@ -1011,7 +1011,7 @@ button { display: flex; flex-direction: column; gap: 15px; - background-color: #333; + background: linear-gradient(135deg, #8514ee, #00ffffc9, #ff078b); padding: 3px; border-radius: 15px 0 0 15px; border: none; @@ -1035,7 +1035,7 @@ button { text-decoration: none; color: white; font-size: 20px; - padding: 10px; + padding: 4px; transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; border: none; border-bottom: none; @@ -1055,8 +1055,9 @@ button { .social-sidebar li a:hover { background-color: #ffffff; border-radius: 50%; - color: #1f2937; + /* color: #1f2937; */ transform: scale(1.1); + transition: all linear 0.3s; } .social-sidebar i { @@ -1068,6 +1069,22 @@ button { transform: scale(1.1); } +.social-sidebar .facebook:hover{ + color: #1877F2; +} + +.social-sidebar .twitter:hover { + color: black; +} + +.social-sidebar .instagram:hover { + color: #C13584; +} + +.social-sidebar .youtube:hover { + color: #FF0000; +} + /* -----------------------------------------------Responsiveness----------------------------------------------------- */ /* ----------------------------for mobiles--------------------------------------- */ @@ -1723,10 +1740,11 @@ button { color: #000; } .container-swipe { - max-width: 1100px; + max-width: 1200px; width: 100%; - padding: 0 30px; + padding:30px; margin: 0 auto; + background-color:#303036; } .testi { max-width: 900px; @@ -1924,3 +1942,48 @@ button { width: 1000vw !important; } } + + +/* Add hover effects and shadows to the card */ +#contact .card { + border: 1px solid #ddd; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#contact .card:hover { + transform: scale(1.03); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + border-color: #54546b; +} + +/* Add hover effect to the form input fields */ +#contact .form-group input, +#contact .form-group textarea { + border: 1px solid #ccc; + padding: 10px; + border-radius: 4px; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +#contact .form-group input:hover, +#contact .form-group textarea:hover { + border-color: #767d86; + box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2); +} + +/* Style the button with hover effects */ +#contact button { + background-color: #007BFF; + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease, box-shadow 0.3s ease; +} + +#contact button:hover { + background-color: #0056b3; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +}