diff --git a/README.md b/README.md index 9e6f1ab..1e2d4a5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ ![Community](https://github.com/GameSphere-MultiPlayer/Physi-c-Tech/assets/98798977/e79af9da-814e-487e-8a9a-85947384d3b2) - + # About Our Project 💻
@@ -18,8 +18,21 @@
+ + +# 💻 Tech Stack Uses + +jQuery logo + + +Bootstrap logo + + +JavaScript logo - # How to initialise the Project in your local environment + + + # How to initialise the Project in your local environment 1. Fork the repo 2. Clone it using ``git clone `` command @@ -38,8 +51,10 @@ ### If Nodemon is not installed , run npm install nodemon -g - - # How to make a PR in a Project 🟢 + + + +# How to make a PR in a Project 🟢 If you are interested to contribute in this project how to start contribute @@ -92,8 +107,9 @@ To push your changes, run the following command in your terminal: 9. Create a PR. __________________________________________________________________________________________________________________________________________________________________ + -## Alternatively Using GitHub Desktop +# Alternatively Using GitHub Desktop 1. Open GitHub Desktop and log in to your GitHub account. @@ -113,6 +129,8 @@ ________________________________________________________________________________ **Note:** In order to create a pull request, you must have a fork of the original repository in your GitHub account and you must have made the changes in that forked repository. + +

@@ -129,4 +147,4 @@ ________________________________________________________________________________ - \ No newline at end of file + diff --git a/public/css/styles.css b/public/css/styles.css index 6c0a699..22280ee 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -469,12 +469,35 @@ body { background-size: cover; transition: transform 0.4s ease; /* Slower transition duration */ } - +.social-links { + font-size: 2rem; /* Adjust initial size here */ +} .small-screen-social { display: none; } +.social-links { + display: flex; + gap: 15px; +} -/* Individual social media icons styling. */ +.social-icon { + width: 40px; + height: 40px; + background-size: contain; + background-repeat: no-repeat; +} +.footer-column { +position: absolute; +bottom: 3rem; +right: 8rem; +} +.social-links a { +margin-top: 1rem; +} +.gmail-icon { + position: relative; + top: -5px; +} .youtube { background-image: url("https://cdn-icons-png.flaticon.com/128/3670/3670147.png"); } @@ -494,7 +517,9 @@ body { .instagram { background-image: url("https://cdn-icons-png.flaticon.com/128/3955/3955024.png"); } - +.discord { + background-image: url("https://cdn.discordapp.com/brand/logos/Discord_Logo_Color.png"); +} /* Toggler button styles */ .toggler { display: block; @@ -1437,7 +1462,7 @@ h3 { } .share-button { - position: absolute; + position: fixed; border: none; cursor: pointer; z-index: 2; @@ -1455,7 +1480,7 @@ h3 { .active .share-button, .share-button:hover { - background-color: var(#00c896); + background-color: var(--green); transform: scale(1.03); } @@ -1866,3 +1891,94 @@ section.image { font-size: 14px; box-shadow:0px 2px 10px 6px #999999; } + +.rateus-modal { + display: none; /* Hidden by default */ + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */ +} + +.rateus-container { + max-width: 600px; + margin: 100px auto; /* Position the container a bit lower */ + padding: 20px; + background-color: #333; + border-radius: 10px; + text-align: center; +} + +.rating-slider { + margin: 20px 0; + position: relative; + width: 80%; + margin-left: auto; + margin-right: auto; +} + +.rating-slider input[type="range"] { + width: 100%; + height: 15px; + background: linear-gradient(90deg, #ffcc00 60%, #ddd 60%); + border-radius: 10px; + outline: none; + opacity: 0.9; + -webkit-transition: opacity .15s ease-in-out; + transition: opacity .15s ease-in-out; +} + +.rating-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + background: #ffcc00; + cursor: pointer; + border-radius: 50%; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); +} + +.rating-slider input[type="range"]::-moz-range-thumb { + width: 25px; + height: 25px; + background: #ffcc00; + cursor: pointer; + border-radius: 50%; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); +} + +textarea { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #444; /* Darker background */ + color: white; /* Text color */ +} + + +.close { + color: white; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: #ffcc00; + text-decoration: none; + cursor: pointer; +} + +#feedback-message { + margin-top: 10px; + color: #ffcc00; /* Feedback message color */ +} diff --git a/public/images/envelope.png b/public/images/envelope.png new file mode 100644 index 0000000..9a6d406 Binary files /dev/null and b/public/images/envelope.png differ diff --git a/public/js/script.js b/public/js/script.js index f0665f0..557ad7a 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -295,4 +295,48 @@ subscriptionForm.addEventListener("submit", function (event) { } else { success(); } -}); \ No newline at end of file +}); + +// Function to update the displayed slider value +function updateSliderValue(value) { + document.getElementById('slider-value').textContent = value; + const slider = document.getElementById('rating'); + const color = `linear-gradient(90deg, #ffcc00 ${value * 20}%, #ddd ${value * 20}%)`; + slider.style.background = color; +} + +// Function to handle feedback submission +function submitFeedback(event) { + event.preventDefault(); // Prevent form submission from refreshing the page + + const rating = document.getElementById('rating').value; + const feedback = document.getElementById('feedback').value; + const feedbackMessage = document.getElementById('feedback-message'); + + if (rating && feedback) { + // Show feedback message + feedbackMessage.textContent = "You have submitted the rating"; + feedbackMessage.style.display = 'block'; + + // Close the Rate Us modal after submission + closeRateUs(); + + // Optional: Reset form fields + document.getElementById('feedback').value = ''; + document.getElementById('rating').value = 3; // Reset slider to default value + updateSliderValue(3); // Reset displayed value + + } else { + feedbackMessage.textContent = "Please select a rating and provide feedback before submitting."; + feedbackMessage.style.display = 'block'; + } +} + +function openRateUs() { + document.getElementById('rateus-modal').style.display = 'block'; +} + +// Function to close the Rate Us modal +function closeRateUs() { + document.getElementById('rateus-modal').style.display = 'none'; +} \ No newline at end of file diff --git a/server/views/about.ejs b/server/views/about.ejs index f63b9a2..7039b5c 100644 --- a/server/views/about.ejs +++ b/server/views/about.ejs @@ -71,6 +71,7 @@
  • Products
  • About Us
  • Certificate
    • +
  • Rate Us
  • @@ -99,6 +100,9 @@
    + <%- include('partials/rateus') %> + +
  • Products
  • About Us
  • Certificate
    • +
  • Rate Us
  • + <%- include('partials/rateus') %> + +
  • Products
  • About Us
  • Certificate
    • +
  • Rate Us
  • + <%- include('partials/rateus') %> + diff --git a/server/views/products.ejs b/server/views/products.ejs index d72e472..cbc2c26 100644 --- a/server/views/products.ejs +++ b/server/views/products.ejs @@ -12,11 +12,15 @@ - - + + + + @@ -24,7 +28,7 @@ - + @@ -119,6 +123,7 @@
  • About Us
  • Certificate
    • +
  • Rate Us
  • @@ -146,6 +151,8 @@
    + <%- include('partials/rateus') %> +