diff --git a/4dcolor-pick.html b/4dcolor-pick.html index 4754072..e85d45e 100644 --- a/4dcolor-pick.html +++ b/4dcolor-pick.html @@ -4,70 +4,70 @@ - - - - - 4D Color Pick - - - - - - - -
-
-
- -
-
- - -
-
- - - - - - + + + + + diff --git a/4dcolor-result.html b/4dcolor-result.html index 5e5bdf0..2d61180 100644 --- a/4dcolor-result.html +++ b/4dcolor-result.html @@ -4,40 +4,47 @@ - - - - 4D Color Pick Result - - - - - - -
-

4D 色

-
+ + + + 4D Color Pick Result + + + + + + +
+

4D 色

+
+
+
+
+
+
- - - \ No newline at end of file + + + diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..8a61ee3 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,149 @@ +* { + padding: 0; + margin: 0; +} +body { + font-family: "Termina", "Helvetica", sans-serif; +} +.gform { + text-align: center; + width: 100%; +} +.gform button { + font-family: "Termina", "Helvetica", sans-serif; + background-color: rgba(255, 255, 255, 95%); + appearance: none; + border: 0; + padding: 12px; + width: 100%; + margin: 0 10px; + max-width: 240px; + cursor: pointer; +} +#fConfirm { + display: none; +} +.message { + font-family: "Termina", "Helvetica", sans-serif; + display: none; + position: absolute; + align-items: center; + justify-content: center; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 90%); + opacity: 0; + transition: opacity 0.6s ease; +} +.message-text { + font-size: 20px; +} +.wrapper-button { + display: flex; + padding: 0 20px; + margin-top: 20px; + justify-content: center; +} +.wrapper-picker { + position: relative; + width: 300px; + height: 300px; + background-color: #fff; + display: flex; + padding: 10px; +} +.wrap { + background-color: #cfcdc9; + min-height: calc(100vh - 50px); + padding: 25px 30px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +.wrapper-description { + display: flex; + justify-content: center; + margin-bottom: 25px; + align-self: flex-end; + width: 100%; +} +.description { + font-size: 12px; + color: #fff; +} +.container { + max-width: 1000px; + height: 80.10680907877169vh; + width: 100%; + max-height: 600px; + align-self: flex-start; + margin: 0 auto; + position: relative; + background-image: url("../images/background_pc.png"); + background-size: cover; + background-color: #00486e; + border-radius: 10px; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.16); + transition: background-color 0.3s linear; +} +.wrapper-inner { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.page-heading { + text-align: center; + margin-bottom: 25px; +} +#fSubmitConfirm, +#fConfirm { + transition: opacity 0.3s ease, transform 0.3s ease; +} +#fSubmitConfirm { + opacity: 1; +} +#fConfirm { + opacity: 0; +} + +@media screen and (max-width: 768px) { + .wrapper-button { + margin-top: 15px; + } + .wrapper-description { + margin-top: 50%; + margin-bottom: 0; + position: absolute; + top: 50%; + right: 15px; + transform: rotate(90deg); + transform-origin: right center; + } + .description { + white-space: nowrap; + } + .wrapper-picker { + width: 220px; + height: 220px; + } + .description br { + display: none; + } + .container { + background-image: url("../images/background_sp.png"); + height: calc(100vh - 50px); + max-height: none; + border-radius: 25px; + } +} diff --git a/assets/images/background_pc.png b/assets/images/background_pc.png new file mode 100644 index 0000000..f94c5cf Binary files /dev/null and b/assets/images/background_pc.png differ diff --git a/assets/images/background_sp.png b/assets/images/background_sp.png new file mode 100644 index 0000000..fd2e068 Binary files /dev/null and b/assets/images/background_sp.png differ diff --git a/assets/js/form-submission-handler.js b/assets/js/form-submission-handler.js new file mode 100644 index 0000000..e38c5c8 --- /dev/null +++ b/assets/js/form-submission-handler.js @@ -0,0 +1,143 @@ +(function () { + // get all data in form and return object + function getFormData(form) { + var elements = form.elements; + var honeypot; + + var fields = Object.keys(elements) + .filter(function (k) { + if (elements[k].name === "honeypot") { + honeypot = elements[k].value; + return false; + } + return true; + }) + .map(function (k) { + if (elements[k].name !== undefined) { + return elements[k].name; + // special case for Edge's html collection + } else if (elements[k].length > 0) { + return elements[k].item(0).name; + } + }) + .filter(function (item, pos, self) { + return self.indexOf(item) == pos && item; + }); + + var formData = {}; + fields.forEach(function (name) { + var element = elements[name]; + + // singular form elements just have one value + formData[name] = element.value; + + // when our element has multiple items, get their values + if (element.length) { + var data = []; + for (var i = 0; i < element.length; i++) { + var item = element.item(i); + if (item.checked || item.selected) { + data.push(item.value); + } + } + formData[name] = data.join(", "); + } + }); + + // add form-specific values into the data + formData.formDataNameOrder = JSON.stringify(fields); + formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name + formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default + + return { data: formData, honeypot: honeypot }; + } + + function handleFormSubmit(event) { + // handles form submit without any jquery + event.preventDefault(); // we are submitting via xhr below + var form = event.target; + var formData = getFormData(form); + var data = formData.data; + // If a honeypot field is filled, assume it was done so by a spam bot. + if (formData.honeypot) { + return false; + } + + disableAllButtons(form); + var url = form.action; + var xhr = new XMLHttpRequest(); + xhr.open("POST", url); + // xhr.withCredentials = true; + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4 && xhr.status === 200) { + form.reset(); + var formElements = form.querySelector(".form-elements"); + if (formElements) { + formElements.style.display = "none"; // hide form + } + var message = form.querySelector(".message"); + if (message) { + messageText.innerHTML = "Thank you!"; + message.style.display = "flex"; + } + } + }; + // url encode form data for sending as post data + var encoded = Object.keys(data) + .map(function (k) { + return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); + }) + .join("&"); + xhr.send(encoded); + } + + function loaded() { + // bind to the submit event of our form + var forms = document.querySelectorAll("form.gform"); + for (var i = 0; i < forms.length; i++) { + forms[i].addEventListener("submit", handleFormSubmit, false); + } + var message = document.querySelector(".message"); + var messageText = document.querySelector(".message-text"); + var buttonSubmitConfirm = document.getElementById("submitConfirm"); + var formSubmitConfirm = document.getElementById("fSubmitConfirm"); + var formConfirm = document.getElementById("fConfirm"); + buttonSubmitConfirm.addEventListener("click", function () { + if (!buttonSubmitConfirm.disabled) { + messageText.innerHTML = "Are you sure?"; + message.style.display = "flex"; + formSubmitConfirm.style.opacity = 0; + formSubmitConfirm.style.transform = "scale(0)"; + formConfirm.style.opacity = 1; + formConfirm.style.transform = "scale(1)"; + setTimeout(function () { + message.style.opacity = 1; + formSubmitConfirm.style.display = "none"; + formConfirm.style.display = "flex"; + }, 310); + } + }); + var buttonConfirmCancel = document.getElementById("fButtonCancel"); + buttonConfirmCancel.addEventListener("click", function () { + message.style.opacity = 0; + formConfirm.style.opacity = 0; + formConfirm.style.transform = "scale(0)"; + formSubmitConfirm.style.opacity = 1; + formSubmitConfirm.style.transform = "scale(1)"; + setTimeout(function () { + message.style.display = "none"; + formSubmitConfirm.style.display = "block"; + formConfirm.style.display = "none"; + }, 310); + }); + } + document.addEventListener("DOMContentLoaded", loaded, false); + + function disableAllButtons(form) { + var buttons = form.querySelectorAll("button"); + for (var i = 0; i < buttons.length; i++) { + buttons[i].disabled = true; + } + } +})(); diff --git a/libs/color-picker.js b/assets/libs/color-picker.js similarity index 100% rename from libs/color-picker.js rename to assets/libs/color-picker.js diff --git a/form-submission-handler.js b/form-submission-handler.js deleted file mode 100644 index 7db03c8..0000000 --- a/form-submission-handler.js +++ /dev/null @@ -1,104 +0,0 @@ -(function() { - // get all data in form and return object - function getFormData(form) { - var elements = form.elements; - var honeypot; - - var fields = Object.keys(elements).filter(function(k) { - if (elements[k].name === "honeypot") { - honeypot = elements[k].value; - return false; - } - return true; - }).map(function(k) { - if(elements[k].name !== undefined) { - return elements[k].name; - // special case for Edge's html collection - }else if(elements[k].length > 0){ - return elements[k].item(0).name; - } - }).filter(function(item, pos, self) { - return self.indexOf(item) == pos && item; - }); - - var formData = {}; - fields.forEach(function(name){ - var element = elements[name]; - - // singular form elements just have one value - formData[name] = element.value; - - // when our element has multiple items, get their values - if (element.length) { - var data = []; - for (var i = 0; i < element.length; i++) { - var item = element.item(i); - if (item.checked || item.selected) { - data.push(item.value); - } - } - formData[name] = data.join(', '); - } - }); - - // add form-specific values into the data - formData.formDataNameOrder = JSON.stringify(fields); - formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name - formData.formGoogleSendEmail - = form.dataset.email || ""; // no email by default - - return {data: formData, honeypot: honeypot}; - } - - function handleFormSubmit(event) { // handles form submit without any jquery - event.preventDefault(); // we are submitting via xhr below - var form = event.target; - var formData = getFormData(form); - var data = formData.data; - // If a honeypot field is filled, assume it was done so by a spam bot. - if (formData.honeypot) { - return false; - } - - disableAllButtons(form); - var url = form.action; - var xhr = new XMLHttpRequest(); - xhr.open('POST', url); - // xhr.withCredentials = true; - xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - xhr.onreadystatechange = function() { - if (xhr.readyState === 4 && xhr.status === 200) { - form.reset(); - var formElements = form.querySelector(".form-elements") - if (formElements) { - formElements.style.display = "none"; // hide form - } - var thankYouMessage = form.querySelector(".thankyou_message"); - if (thankYouMessage) { - thankYouMessage.style.display = "block"; - } - } - }; - // url encode form data for sending as post data - var encoded = Object.keys(data).map(function(k) { - return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); - }).join('&'); - xhr.send(encoded); - } - - function loaded() { - // bind to the submit event of our form - var forms = document.querySelectorAll("form.gform"); - for (var i = 0; i < forms.length; i++) { - forms[i].addEventListener("submit", handleFormSubmit, false); - } - }; - document.addEventListener("DOMContentLoaded", loaded, false); - - function disableAllButtons(form) { - var buttons = form.querySelectorAll("button"); - for (var i = 0; i < buttons.length; i++) { - buttons[i].disabled = true; - } - } -})(); diff --git a/main.css b/main.css deleted file mode 100644 index 635e807..0000000 --- a/main.css +++ /dev/null @@ -1,22 +0,0 @@ -body { - margin: 0; -} -.gform { - text-align: center; -} -.gform button { - margin-top: 20px; -} -.wrap { - min-height: 100vh; - max-width: 720px; - margin: 0 auto; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} -.wrap .half { - width: 50%; - padding: 32px 0; -}