Skip to content

feat/layout #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
4dvn-huypho wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat/layout #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
18a262c
feat(layou) implement layout
4dvn-huypho Apr 19, 2021
19073c8
feat(layou) implement layout
4dvn-huypho Apr 19, 2021
0408878
Merge branch 'main' into feat/layout-#1
4dvn-huypho Apr 20, 2021
f466ce2
feat(layout) implement layout
4dvn-huypho Apr 20, 2021
ad72b89
feat(layout) implement layout
4dvn-huypho Apr 20, 2021
f345918
feat(layout) adjust layout
4dvn-huypho Apr 20, 2021
947a72a
feat(layout) adjust layout
4dvn-huypho Apr 20, 2021
c319dee
feat(layout) adjust layout anim
4dvn-huypho Apr 20, 2021
9fc545c
feat(layout) adjust layout style
4dvn-huypho Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 63 additions & 63 deletions 4dcolor-pick.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,70 +4,70 @@
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>4D Color Pick</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>

<body>
<div class="wrap">
<div class="half">
<div id="picker"></div>
<canvas id="color-picker"></canvas>
<form class="gform" method="POST"
action="https://script.google.com/macros/s/AKfycbyttn_NB5t2OdOCBX9b3FB394nDwhbkddC_aRbq6ZKWgRkHtokq8jFzsTEkI9Lskhb5/exec"
data-email="phungnc@4digit.com">
<div>
<input id="colorInput" name="colorInput" type="hidden">
<button>この色に決定</button>
</div>
<div style="display:none" class="thankyou_message">
<h2><em>Thanks</em></h2>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>4D Color Pick</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="wrap">
<div class="wrapper-description">
<p class="description">
Please pick the color of <br />FOURDIGIT that you feel. <br />Don’t
think, just feel!
</p>
</div>
<div id="simulation" class="container">
<div class="wrapper-inner">
<div class="inner">
<div class="wrapper-picker">
<canvas id="color-picker"></canvas>
<div class="message">
<h2 class="message-text">Thank you!</h2>
</div>
</div>
<form
class="gform"
method="POST"
action="https://script.google.com/macros/s/AKfycbyttn_NB5t2OdOCBX9b3FB394nDwhbkddC_aRbq6ZKWgRkHtokq8jFzsTEkI9Lskhb5/exec"
data-email="phungnc@4digit.com"
>
<input id="colorInput" name="colorInput" type="hidden" />
<div id="fSubmitConfirm" class="wrapper-button">
<button id="submitConfirm" type="button" disabled>
Submit
</button>
</div>
<div id="fConfirm" class="wrapper-button">
<button id="fButtonCancel" type="button">Cancel</button>
<button type="submit">OK</button>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
<div class="half" id="simulation">
<h1>FOURDIGIT</h1>
<p>Design&Tech <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porttitor leo, sit
amet bibendum enim. Duis efficitur dui vitae tincidunt rutrum. </p>
</div>
</div>
<script type="text/javascript" src="./libs/color-picker.js"></script>
</body>
<script>
// let colorPicker = new iro.ColorPicker('#picker', {
// color: "#f00",
// layout: [
// {
// component: iro.ui.Wheel,
// }
// ]
// });
// let colorPick = document.getElementById("colorInput");
// let colorSimulation = document.getElementById("simulation");
// colorPicker.on(["color:init", "color:change"], function (color) {
// colorPick.value = color;
// colorSimulation.style.color = color.rgbString;
// });
let picker = new Picker(document.getElementById('color-picker'));
picker.draw();
let colorPick = document.getElementById("colorInput");
let colorSimulation = document.getElementById("simulation");

picker.onChange(function (color) {
colorPick.value = color;
colorSimulation.style.color = color;
})

</script>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript" src="./form-submission-handler.js"></script>
</body>
<script type="text/javascript" src="./assets/libs/color-picker.js"></script>
<script>
let picker = new Picker(document.getElementById("color-picker"));
picker.draw();
let colorPick = document.getElementById("colorInput");
let colorSimulation = document.getElementById("simulation");

picker.onChange(function (color) {
colorPick.value = color;
colorSimulation.style.backgroundColor = color;
document.getElementById("submitConfirm").disabled = false;
});
</script>
<!-- Submit the Form to Google Using "AJAX" -->
<script
data-cfasync="false"
type="text/javascript"
src="./assets/js/form-submission-handler.js"
></script>
</body>
</html>
57 changes: 32 additions & 25 deletions 4dcolor-result.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,47 @@
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>4D Color Pick Result</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
<div class="wrap" style="flex-direction:column">
<h1>4D 色</h1>
<div id="picker_result"></div>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>4D Color Pick Result</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
<div class="wrap">
<h1 class="page-heading">4D 色</h1>
<div id="simulation" class="container">
<div class="wrapper-inner">
<div class="inner">
<div id="picker_result"></div>
</div>
</div>
</div>
<script>
let url = 'https://api.sheety.co/6961d020dc8005d8d55425a9f2790547/colorVoter/responses';
fetch(url)
</div>
<script>
let url =
"https://api.sheety.co/6961d020dc8005d8d55425a9f2790547/colorVoter/responses";
fetch(url)
.then((response) => response.json())
.then(json => {
.then((json) => {
// Do something with the data
console.log(json.responses);
var cls = json.responses.map(c => c.colorInput);
var cls = json.responses.map((c) => c.colorInput);
const colorPickerResult = new iro.ColorPicker("#picker_result", {
width: 300,
colors: cls,
handleRadius: 3,
borderWidth: 1,
layout: [
{
{
component: iro.ui.Wheel,
}
]
});
},
],
});
});
</script>
</body>
</html>
</script>
</body>
</html>
149 changes: 149 additions & 0 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Binary file added assets/images/background_pc.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/background_sp.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading