diff --git a/Contributors/contributor.css b/Contributors/contributor.css new file mode 100644 index 00000000..a9aadd71 --- /dev/null +++ b/Contributors/contributor.css @@ -0,0 +1,262 @@ +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 new file mode 100644 index 00000000..a55f7ac2 --- /dev/null +++ b/Contributors/contributor.html @@ -0,0 +1,122 @@ + + + + + + Contributors + + + + + + + + + +
+
+ +
+

Our Contributors

+
+
+ + + + + + diff --git a/Contributors/contributor.js b/Contributors/contributor.js new file mode 100644 index 00000000..017e37a7 --- /dev/null +++ b/Contributors/contributor.js @@ -0,0 +1,55 @@ +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/SignUp/signup.css b/SignUp/signup.css index 18c0f8d8..562e3578 100644 --- a/SignUp/signup.css +++ b/SignUp/signup.css @@ -257,4 +257,92 @@ a { text-shadow: none; font-family: 'Trebuchet MS', Arial, sans-serif; -} \ No newline at end of file +} + +/* ... existing styles ... */ + +.signup-button, .google-signup-button { + width: 100%; + padding: 10px; + margin: 10px 0; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +.signup-button { + background-color: #f4a261; + color: white; +} + +.signup-button:hover { + background-color: #e76f51; +} + +.google-signup-button { + background-color: white; + color: #757575; + border: 1px solid #dadce0; + display: flex; + align-items: center; + justify-content: center; +} + +.google-signup-button:hover { + background-color: #f8f9fa; +} + +.google-signup-button img { + width: 18px; + height: 18px; + margin-right: 10px; +} + +.or-divider { + text-align: center; + margin: 20px 0; + color: #757575; + position: relative; + overflow: hidden; +} + +.or-divider::before, +.or-divider::after { + content: ""; + position: absolute; + top: 50%; + width: 45%; + height: 1px; + background-color: #dadce0; +} + +.or-divider::before { + left: 0; +} + +.or-divider::after { + right: 0; +} + +.or-divider span { + display: inline-block; + position: relative; + padding: 0 10px; + background-color: #000; /* Match this with your form background color */ +} + +.links { + text-align: center; + margin-top: 20px; +} + +.links a { + color: #e76f51; + text-decoration: none; +} + +.links a:hover { + text-decoration: underline; +} diff --git a/SignUp/signup.html b/SignUp/signup.html index 2e5c4029..99f3d935 100644 --- a/SignUp/signup.html +++ b/SignUp/signup.html @@ -34,11 +34,19 @@

Create Your Account

+
+ OR +
+
Already have an account? Login
+ diff --git a/images/cart.png b/images/cart.png new file mode 100644 index 00000000..93046e4e Binary files /dev/null and b/images/cart.png differ diff --git a/index.html b/index.html index c2ee2cf5..630c6b2a 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,13 @@ + +
  • + + Cart Icon 0 + +
    • + @@ -359,52 +366,67 @@

    Ergonomic Gaming Chair

    + +
    +
    +
    +

    Contact Us

    +
    +
    +
    +
    +
    + + +
    +
    + + + +
    + + +
    +
    -

    Frequently Asked Questions

    - -
    - - - - -
    - We have tried our best to make all the tools available for enthusiastic gamers. -
    +

    Frequently Asked Questions

    + +
    + + +
    + We have tried our best to make all the tools available for enthusiastic gamers. +
    +
    - - -
    - - -
    - By considering our terms and conditions, further actions will be taken. -
    + + +
    + By considering our terms and conditions, further actions will be taken. +
    - +
    - - -
    - Yes, you are welcomed to buy multiple products at one time. -
    + + +
    + Yes, you are welcome to buy multiple products at one time. +
    - +
    - - -
    - Currently that option is unavailable. Sorry for the inconvenience. -
    + + +
    + We have courier services for our customers and it's absolutely free. +
    - -
    - -
    -
    +
    +
    @@ -432,10 +454,6 @@

    What Our Customers Say

    - -
    -
    -
    @@ -464,12 +482,31 @@

    Contact Us

    + - + +
    + + +
    + + + + -
    - +
    + Contact Image +
    + + + + +