From 933e3c8c3864f221c2bcbd61d3e5b579de849831 Mon Sep 17 00:00:00 2001 From: Amin Jalal Date: Sat, 23 Nov 2024 21:44:59 +0300 Subject: [PATCH] Created the support page. --- index.html | 34 +---- website/pages/support.html | 173 +++++++++++++++++++++++++ website/scripts/script.js | 175 +++++++++++++------------ website/scripts/support.js | 45 +++++++ website/styles/style.css | 112 ---------------- website/styles/support.css | 254 +++++++++++++++++++++++++++++++++++++ 6 files changed, 561 insertions(+), 232 deletions(-) create mode 100644 website/pages/support.html create mode 100644 website/scripts/support.js create mode 100644 website/styles/support.css diff --git a/index.html b/index.html index cdcaab6..9b28efa 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Dataverse - @@ -47,7 +46,6 @@
- - - - - - -
- + diff --git a/website/pages/support.html b/website/pages/support.html new file mode 100644 index 0000000..d4c885b --- /dev/null +++ b/website/pages/support.html @@ -0,0 +1,173 @@ + + + + + + Help Center - Dataverse + + + + + + + + + + + + +
+
+
+
+
+ + +
+ +
+ + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
Home
Github Repository
Documentation
Contributors
+ Figma Design +
Code of Conduct +
License
+
+
+ +
+
+

How can we help you?

+
+
+ + +
+
+
+
+ + + + + +
+
+ + + + \ No newline at end of file diff --git a/website/scripts/script.js b/website/scripts/script.js index 9487cd2..9978500 100644 --- a/website/scripts/script.js +++ b/website/scripts/script.js @@ -5,24 +5,28 @@ var windowFunctions = []; // Array of city names var cities = ["Pune", "Moradabad", "Dehradun", "Rampur", "Delhi", "Coimbatore", "Riyadh", "Ahmedabad", "Kolkata", "Mumbai", "Jorhat", "Arrah", "Bhopal", "Bengalore", "Secunderabad", "Ludhiana", "Nagpur", "Lucknow", "Gorakhpur", "Bhilai", "Kanpur", "Panaji"]; -var map = L.map('map', { +try { + var map = L.map('map', { center: [22.7937, 77.9629], zoom: 4, zoomControl: false -}); + }); -// Add OpenStreetMap tile layer -L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + // Add OpenStreetMap tile layer + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' -}).addTo(map); + }).addTo(map); -var redIcon = L.icon({ + var redIcon = L.icon({ iconUrl: 'https://img1.picmix.com/output/stamp/normal/2/5/4/3/873452_376bb.png', iconSize: [20, 20], iconAnchor: [12, 12], popupAnchor: [1, -34], shadowSize: [41, 41] -}); + }); +} catch(e) { + console.error(e); +} // Your OpenCage API Key here const OPENCAGE_API_KEY = '3f55c6e93c2c4b19ae45f1fd5db12cfc'; @@ -68,23 +72,27 @@ window.addEventListener('DOMContentLoaded', () => { // Hide the loader after 3 seconds setTimeout(() => { const loader = document.getElementById('video-loader'); - loader.style.display = 'none'; + if(loader) { + loader.style.display = 'none'; + } displayCopyright(); }, 3000); attachToWindow(windowFunctions); }); -windowFunctions.push(topFunction); function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } +windowFunctions.push(topFunction); function changeCss() { var top = document.getElementById("top"); var scroll_icon = document.getElementById("scroll_icon"); - (this.scrollY > 30) ? top.style.opacity = 1 : top.style.opacity = 0; - (this.scrollY > 0) ? scroll_icon.style.opacity = 0 : scroll_icon.style.opacity = 1; + if(scroll_icon) { + (this.scrollY > 30) ? top.style.opacity = 1 : top.style.opacity = 0; + (this.scrollY > 0) ? scroll_icon.style.opacity = 0 : scroll_icon.style.opacity = 1; + } } window.addEventListener("scroll", changeCss, false); @@ -139,8 +147,10 @@ window.addEventListener('scroll', () => { }); window.onload = function() { - const feedbackField = document.forms['feedback-form']['Message']; - + let feedbackField; + if(document.forms['feedback-form']) { + feedbackField = document.forms['feedback-form']['Message']; + feedbackField.addEventListener('focus', () => { checkFeedbackLength(feedbackField); }) @@ -148,6 +158,8 @@ window.onload = function() { feedbackField.addEventListener('blur', () => { document.getElementById('feedbackError').style.opacity = '0%'; }) + } + } let lastScroll = 0; @@ -160,7 +172,6 @@ function progress() { window.addEventListener("scroll", progress); -windowFunctions.push(show); function show() { l2.style.opacity = 0; l1.style.transform = "rotate(-45deg)"; @@ -168,10 +179,11 @@ function show() { burger.style.display = "none"; cross.style.display = "block"; plane.style.right = 0; - body.style.overflowY = "hidden"; + document.body.style.overflowY = "hidden"; buttons.style.marginLeft = 0; } -windowFunctions.push(hide); +windowFunctions.push(show); + function hide() { l2.style.opacity = 1; l1.style.transform = "rotate(0deg)"; @@ -179,43 +191,10 @@ function hide() { burger.style.display = "block"; cross.style.display = "none"; plane.style.right = "-100vw"; - body.style.overflowY = "scroll"; + document.body.style.overflowY = "scroll"; buttons.style.marginLeft = "-60px"; } - -// Function to show the issue report form -function showReportForm() { - document.getElementById("container").classList.add("popup-active"); - document.body.classList.add("popup-active"); - document.getElementById("bug-report-form").classList.add("active"); -} -windowFunctions.push(showReportForm); - -// Function to close the issue report form -function closeReportForm() { - document.getElementById("container").classList.remove("popup-active"); - document.body.classList.remove("popup-active"); - document.getElementById("bug-report-form").classList.remove("active"); -} -windowFunctions.push(closeReportForm); - -function validateReport() { - const form = document.forms["Bug Report Form"]; - const emailInput = form["email"]; - const emailValue = form["email"].value.trim(); - const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "protonmail.com", "icloud.com", "tutanota.com"]; - const emailDomain = emailValue.split('@')[1].toLowerCase(); - emailInput.addEventListener("input", function() { // Reset the validity message after change in input - emailInput.setCustomValidity(""); - }) - - if(!trustedDomains.includes(emailDomain)) { - emailInput.setCustomValidity("Please provide an email from a trusted provider. Ex: outlook, gmail, yahoo,..etc") - return false; - } - return true; -} -windowFunctions.push(validateReport); +windowFunctions.push(hide); // function updateIndicator(button) { // // Set the position of the indicator to align with the selected button @@ -246,41 +225,47 @@ function updateIndicator(button) { // indicator.style.boxShadow = "0 0 5px 3px rgba(255, 255, 255, 0.7)"; // Subtle white glow } } +windowFunctions.push(updateIndicator); - -windowFunctions.push(light); function light(flag) { localStorage.setItem('theme', 'light'); - body.classList.remove('dark-mode'); - body.classList.add('light-mode'); - document.getElementById("map").style.filter = "none"; - document.getElementById("map").style.zIndex = 0; - tags.style.borderColor = "black"; - tags.style.backgroundColor = "#171717"; + document.body.classList.remove('dark-mode'); + document.body.classList.add('light-mode'); + if(document.getElementById("map") && tags && contribute && shadow && technologies) { + document.getElementById("map").style.filter = "none"; + document.getElementById("map").style.zIndex = 0; + tags.style.borderColor = "black"; + tags.style.backgroundColor = "#171717"; + contribute.style.filter="invert(1)"; + shadow.style.backgroundImage = "linear-gradient(115deg, #00000000,#f9f9f9,#00000000)"; + technologies.style.border="1px solid #00000044"; + } indicator.style.backgroundImage = "radial-gradient(rgba(0,0,0, 0.608),#00000000,#00000000)"; - shadow.style.backgroundImage = "linear-gradient(115deg, #00000000,#f9f9f9,#00000000)"; - contribute.style.filter="invert(1)"; - technologies.style.border="1px solid #00000044"; const lightButton = document.getElementById("lightButton"); updateIndicator(lightButton); // Update the indicator position and style for the light button } -windowFunctions.push(dark); +windowFunctions.push(light); + function dark(flag) { + if(document.getElementById("map") && tags && contribute && shadow && technologies) { + document.getElementById("map").style.filter = "invert(1) hue-rotate(180deg) brightness(1.5)"; + tags.style.borderColor = "rgba(255, 255, 255, 0.323)"; + tags.style.backgroundColor = "#00000000"; + shadow.style.backgroundImage = "linear-gradient(115deg, #00000000,#000000d4,#00000000)"; + contribute.style.filter="invert(0)"; + technologies.style.border="1px solid #ffffff044"; + } localStorage.setItem('theme', 'dark'); - document.getElementById("map").style.filter = "invert(1) hue-rotate(180deg) brightness(1.5)"; - tags.style.borderColor = "rgba(255, 255, 255, 0.323)"; - tags.style.backgroundColor = "#00000000"; indicator.style.backgroundImage = "radial-gradient(rgba(255,255,255, 0.608),#00000000,#00000000)"; - shadow.style.backgroundImage = "linear-gradient(115deg, #00000000,#000000d4,#00000000)"; - body.classList.remove('light-mode'); - body.classList.add('dark-mode'); - contribute.style.filter="invert(0)"; - technologies.style.border="1px solid #ffffff044"; + document.body.classList.remove('light-mode'); + document.body.classList.add('dark-mode'); const darkButton = document.getElementById("darkButton"); updateIndicator(darkButton); // Update the indicator position and style for the dark button + } -windowFunctions.push(systemDefault); +windowFunctions.push(dark); + function systemDefault() { const theme = localStorage.getItem('theme'); const defaultButton = document.getElementById("defaultButton"); @@ -305,7 +290,7 @@ function systemDefault() { // Move indicator to the default button when explicitly selected updateIndicator(defaultButton); } - +windowFunctions.push(systemDefault); // Initialize the theme and indicator position on page load systemDefault(); document.getElementById("lightButton").addEventListener("click", () => { @@ -348,20 +333,23 @@ let scrollTimeout; // Function to scroll the 'examples' and 'examples2' div automatically function autoScrollExamples() { + if(examples, examples2) { if (autoScroll) { - examples.scrollLeft += currentSpeed; - examples2.scrollLeft += currentSpeed * 1.2; - - // Looping the scroll - if (examples.scrollLeft + examples.clientWidth >= examples.scrollWidth) { - examples.scrollLeft = 0; - } - if (examples2.scrollLeft + examples2.clientWidth >= examples2.scrollWidth) { - examples2.scrollLeft = 0; - } + examples.scrollLeft += currentSpeed; + examples2.scrollLeft += currentSpeed * 1.2; + + // Looping the scroll + if (examples.scrollLeft + examples.clientWidth >= examples.scrollWidth) { + examples.scrollLeft = 0; + } + if (examples2.scrollLeft + examples2.clientWidth >= examples2.scrollWidth) { + examples2.scrollLeft = 0; + } } + } } + setInterval(autoScrollExamples, 30); // Smoothly adjust scroll speed @@ -388,10 +376,12 @@ const startAutoScroll = () => { adjustSpeed(scrollSpeed); }; -examples.addEventListener("mouseenter", stopAutoScroll); -examples.addEventListener("mouseleave", startAutoScroll); -examples2.addEventListener("mouseenter", stopAutoScroll); -examples2.addEventListener("mouseleave", startAutoScroll); +if(examples, examples2) { + examples.addEventListener("mouseenter", stopAutoScroll); + examples.addEventListener("mouseleave", startAutoScroll); + examples2.addEventListener("mouseenter", stopAutoScroll); + examples2.addEventListener("mouseleave", startAutoScroll); +} window.addEventListener("scroll", progress); @@ -451,7 +441,7 @@ function validateForm() { return false; } -windowFunctions.push(checkFeedbackLength); + function checkFeedbackLength(input) { if(input.value.length < 10) { document.getElementById('feedbackError').style.opacity = '100%'; @@ -461,6 +451,7 @@ function checkFeedbackLength(input) { return true; } } +windowFunctions.push(checkFeedbackLength); // EMAIL VALIDATING FUNCTION function isValidEmail(email) { @@ -471,5 +462,9 @@ function isValidEmail(email) { // Display the current year in the copyright section function displayCopyright() { const year = new Date().getFullYear(); - document.getElementById("copyright").innerText = year; -} \ No newline at end of file + if( document.getElementById("copyright").innerText = year) { + document.getElementById("copyright").innerText = year; + } +} + +export {windowFunctions}; \ No newline at end of file diff --git a/website/scripts/support.js b/website/scripts/support.js new file mode 100644 index 0000000..3b37dca --- /dev/null +++ b/website/scripts/support.js @@ -0,0 +1,45 @@ +import { attachToWindow } from "./sharedUtilities.js"; +import { windowFunctions } from "./script.js"; + +// Function to show the issue report form +function showReportForm() { + document.getElementById("container").classList.add("popup-active"); + document.body.classList.add("popup-active"); + document.getElementById("bug-report-form").classList.add("active"); + } + windowFunctions.push(showReportForm); + + // Function to close the issue report form + function closeReportForm() { + document.getElementById("container").classList.remove("popup-active"); + document.body.classList.remove("popup-active"); + document.getElementById("bug-report-form").classList.remove("active"); + } + windowFunctions.push(closeReportForm); + + function validateReport() { + const form = document.forms["Bug Report Form"]; + const emailInput = form["email"]; + const emailValue = form["email"].value.trim(); + const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "protonmail.com", "icloud.com", "tutanota.com"]; + const emailDomain = emailValue.split('@')[1].toLowerCase(); + emailInput.addEventListener("input", function() { // Reset the validity message after change in input + emailInput.setCustomValidity(""); + }) + + if(!trustedDomains.includes(emailDomain)) { + emailInput.setCustomValidity("Please provide an email from a trusted provider. Ex: outlook, gmail, yahoo,..etc") + return false; + } + return true; + } + windowFunctions.push(validateReport); + +document.addEventListener("keyup", (event) => { + if(event.key == 'Enter') { + alert(window.innerWidth); + } +}) + +// Attach functions required by the DOM to the window +attachToWindow(windowFunctions); \ No newline at end of file diff --git a/website/styles/style.css b/website/styles/style.css index 90908c5..0c90ba7 100644 --- a/website/styles/style.css +++ b/website/styles/style.css @@ -1139,118 +1139,6 @@ input { height: 26px; } -#bug-report-form { - width: 75vw;; /* For phone compatability */ - max-width: 600px; /* For desktop compatability */ - z-index: -999; - position: fixed; - top: 30%; - left: 50%; - transform: translate(-42%, -50%); - display: flex; - flex-direction: column; - justify-content: center; - gap: 2.4vh; - opacity: 0%; - transition: all 0.35s ease; -} - -#bug-report-form.active { - z-index: 9999; - top: 47.5%; - opacity: 100%; -} - -#bug-report-form p { - font-size: 1.8rem; - margin-bottom: 30px; -} - -#bug-report-form label { - font-size: 1.2rem; - display: flex; - flex-direction: column; - justify-content: flex-start; - text-align: left; -} - -#bug-report-form label input, -#issue-select, -#issue-description-field { - background-color: #76767639; - color: #eee; - width: 100%; - margin-top: 10px; - font-size: 1.1rem; - height: 40px; - box-shadow: none; - border: 2px solid rgba(255, 255, 255, 0.19) -} - -#issue-select { - border-radius: 5px; -} - -#issue-select option { - color: black; - background-color: rgba(255, 255, 255, 0.3); -} - -#issue-description-field { - padding: 3px 4px; - height: 80px; - border-radius: 5px; -} - -#bug-report-form .button-div { - width: 100%; - display: flex; - justify-content: center; -} - -#bug-report-form button[type="submit"] { - background-color: rgba(0, 123, 121, 0.364); - color: rgb(224, 224, 224); - border: none; - border-radius: 3px; - width: 70px; - height: 37px; - transition: all 0.2s ease-out; -} - -#bug-report-form button[type="submit"]:hover { - color: black; - background-color:rgba(0, 240, 236, 0.867); - box-shadow: 0px 0px 15px rgba(0, 240, 236, 0.867); -} - -#close-report-popup { - position: absolute; - background-color: rgba(0, 0, 0, 0); - color: rgb(148, 51, 51); - border: none; - transform: scale(1.3); - right: 1%; - top: 1%; - will-change: transform; - transition: transform 0.2s ease; -} - -#close-report-popup:hover { - transform: scale(1.4); -} - -body.popup-active { - overflow: hidden; -} - -#container.popup-active{ - user-select: none; - pointer-events: none; - filter: blur(8px); - overflow: hidden; - } - /*===========================RESPONSIVE===================================*/ @media screen and (max-width: 660px) { .name { diff --git a/website/styles/support.css b/website/styles/support.css new file mode 100644 index 0000000..057684e --- /dev/null +++ b/website/styles/support.css @@ -0,0 +1,254 @@ +body.light-mode { + --heading-color: rgb(43, 43, 43); + --card-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); + --card-background-color: rgb(188, 196, 196); + --card-font-color: rgba(36, 36, 36, 0.95); + --card-p-color: rgb(41, 40, 40); + --form-field-input-color: #0f0f0f; +} + +body.dark-mode { + --heading-color: rgb(170, 170, 170); + --card-box-shadow: 0px 0px 7px rgba(255, 255, 255, 0.7); + --card-background-color: rgb(126, 126, 126); + --card-font-color: rgba(0, 0, 0, 0.95); + --card-p-color: rgb(22, 22, 22); + --form-field-input-color: #eee; +} + +main { + /* border: 2px solid rgba(0, 0, 0, 0.3); */ + width: 100%; + height: 100vh; + position: relative; + top: 100px; + padding: 5px 10px; + display: flex; + flex-direction: column; + gap: 15vh; +} + +#heading { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.45rem; + color: var(--heading-color); +} + +section#help-categories { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 5vh; +} + +.category-row { + display: flex; + gap: 10vw; +} + +.category-row div { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + height: 200px; + padding: 15px 10px; + background-color: var(--card-background-color); + border-radius: 7.5px; + box-shadow: var(--card-box-shadow); + transition: all 0.3s ease; + will-change: transform; + cursor: pointer; + color: var(--card-font-color); + /* border: 2px solid black; */ +} + +.category-row div:hover { + transform: translateY(-8px); +} + +.category-row div h2 { + font-size: 1.95rem; + font-weight: 500; + +} + +.category-row div p { + width: 100%; + text-align: center; + font-size: 1.5rem; + color: var(--card-p-color); +} + +#bug-report-form { + width: 75vw;; /* For phone compatability */ + max-width: 600px; /* For desktop compatability */ + z-index: -999; + position: fixed; + top: 30%; + left: 50%; + transform: translate(-40%, -50%); + display: flex; + flex-direction: column; + justify-content: center; + gap: 2.4vh; + opacity: 0%; + transition: all 0.35s ease; +} + +#bug-report-form.active { + z-index: 9999; + top: 45%; + opacity: 100%; +} + +#bug-report-form p { + font-size: 1.8rem; + margin-bottom: 30px; +} + +#bug-report-form label { + font-size: 1.2rem; + display: flex; + flex-direction: column; + justify-content: flex-start; + text-align: left; +} + +#bug-report-form label input, +#issue-select, +#issue-description-field { + background-color: #76767639; + color: var(--form-field-input-color); + width: 100%; + margin-top: 10px; + font-size: 1.1rem; + height: 40px; + box-shadow: none; + border: 2px solid rgba(255, 255, 255, 0.19) +} + +#issue-select { + border-radius: 5px; +} + +#issue-select option { + color: black; + background-color: rgba(255, 255, 255, 0.3); +} + +#issue-description-field { + padding: 3px 4px; + height: 80px; + border-radius: 5px; +} + +#bug-report-form .button-div { + width: 100%; + display: flex; + justify-content: center; +} + +#bug-report-form button[type="submit"] { + background-color: rgba(0, 123, 121, 0.364); + color: rgb(224, 224, 224); + border: none; + border-radius: 3px; + width: 70px; + height: 37px; + transition: all 0.2s ease-out; +} + +#bug-report-form button[type="submit"]:hover { + color: black; + background-color:rgba(0, 240, 236, 0.867); + box-shadow: 0px 0px 15px rgba(0, 240, 236, 0.867); +} + +#close-report-popup { + position: absolute; + background-color: rgba(0, 0, 0, 0); + color: rgb(148, 51, 51); + border: none; + transform: scale(1.3); + right: 1%; + top: 1%; + will-change: transform; + transition: transform 0.2s ease; +} + +#close-report-popup:hover { + transform: scale(1.4); +} + +body.popup-active { + overflow: hidden; +} + +#container.popup-active{ + user-select: none; + pointer-events: none; + filter: blur(8px); + overflow: hidden; + } + +/*==============================RESPONSIVE===================================*/ +@media screen and (max-width: 1150px) { + .category-row { + display: flex; + flex-direction: column; + gap: 8vw + } + + section#help-categories { + gap: 8vw; + } +} + +@media screen and (max-width: 500px) { + #bug-report-form { + transform: translate(-50%, -50%); + } +} + +@media screen and (max-width: 453px) { + #heading { + font-size: 1.4rem; + } + + #popup-header p { + font-size: 1.5rem; + } +} + +@media screen and (max-width: 438px) { + #heading { + font-size: 1.3rem; + } +} + +@media screen and (max-width: 408px) { + #heading { + font-size: 1.2rem; + } + + #popup-header p { + font-size: 1.4rem; + } +} + +@media screen and (max-width: 377px) { + #heading { + font-size: 1.1rem; + } +} + +@media screen and (max-width: 340px) { + #popup-header p { + font-size: 1.3rem; + } +} \ No newline at end of file