mirror of
https://github.com/voltbonn/diversity.volt.link.git
synced 2024-06-28 08:50:56 +00:00
started metadata page
This commit is contained in:
parent
88c85ea8d5
commit
f5098ce05c
|
@ -27,7 +27,7 @@ const _DATA_ = {
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
//website_privacy: {de:`
|
//website_privacy: {de:`
|
||||||
// <span class="markedText dark_on_light">Da uns <strong class="markedText black_on_orange">Privatsphäre</strong> wichtig ist, werden die Antworten jeweils zur Frage gruppiert gespeichert, sodass die hier eingegebenen Daten <strong>nicht auf dich zurückführbar</strong> sind.</span>
|
// <span class="markedText dark_on_light">Da uns <strong class="markedText black_on_red">Privatsphäre</strong> wichtig ist, werden die Antworten jeweils zur Frage gruppiert gespeichert, sodass die hier eingegebenen Daten <strong>nicht auf dich zurückführbar</strong> sind.</span>
|
||||||
//
|
//
|
||||||
// <span class="markedText light_on_dark">Zu den einzelnen Datensätzen werden nur die im folgenden Kasten genannten Metadaten gespeichert.</span>
|
// <span class="markedText light_on_dark">Zu den einzelnen Datensätzen werden nur die im folgenden Kasten genannten Metadaten gespeichert.</span>
|
||||||
//
|
//
|
||||||
|
@ -90,15 +90,32 @@ const _DATA_ = {
|
||||||
If you have any questions about this survey, please contact <a target="_blank" href="mailto:thomas.rosen@volteuropa.org">thomas.rosen@volteuropa.org</a>.
|
If you have any questions about this survey, please contact <a target="_blank" href="mailto:thomas.rosen@volteuropa.org">thomas.rosen@volteuropa.org</a>.
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
|
button_to_metadata: {
|
||||||
|
de: 'Teams und Metadaten auswählen',
|
||||||
|
en: 'Select teams and metadata',
|
||||||
|
},
|
||||||
|
|
||||||
|
metadata_heading: {
|
||||||
|
de: 'Metadaten',
|
||||||
|
en: 'Metadata',
|
||||||
|
},
|
||||||
|
metadata_description: {
|
||||||
|
de: `Hier kannst du auswählen zu welchen Teams deine Antworten zählen sollen. Du kannst mehrere Local-Teams auswählen.
|
||||||
|
|
||||||
|
Die Daten werden zu jedem Team einzeln gespeichert. So können die Daten weniger auf dich zurückgeführt werden.
|
||||||
|
|
||||||
|
Die Daten werden automatisch auch zu den übergeordnten Teams gespeichert. Zum Beispiel werden die Daten zu den Local-Teams auch zu den Regional- und Nationalen-Teams und zu Volt Europa gespeichert.`,
|
||||||
|
en: `Here you can select which teams your answers should count for. You can select multiple local teams.
|
||||||
|
|
||||||
|
The data will be saved separately for each team. This way the data can be less attributed to you.
|
||||||
|
|
||||||
|
The data will automatically also be saved for the higher-level teams. For example, the data for the local teams will also be saved for the regional- and national-teams and Volt Europe.`,
|
||||||
|
},
|
||||||
button_to_questions: {
|
button_to_questions: {
|
||||||
de: 'Zu den Fragen',
|
de: 'Zu den Fragen',
|
||||||
en: 'To the questions',
|
en: 'To the questions',
|
||||||
},
|
},
|
||||||
|
|
||||||
metadata_is_this_the_first_completion: {
|
|
||||||
de: 'Nimmst du das erste Mal an der Umfrage teil?',
|
|
||||||
en: 'Is this your first time participating in the survey?',
|
|
||||||
},
|
|
||||||
button_send_to_volt: {
|
button_send_to_volt: {
|
||||||
de: 'An Volt senden',
|
de: 'An Volt senden',
|
||||||
en: 'Send to Volt',
|
en: 'Send to Volt',
|
||||||
|
@ -123,29 +140,6 @@ const _DATA_ = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
sections: [
|
sections: [
|
||||||
{
|
|
||||||
heading: {
|
|
||||||
de: 'Metadaten',
|
|
||||||
en: 'Metadata',
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
metadata_country: {
|
|
||||||
question: {
|
|
||||||
de: 'Dein Land',
|
|
||||||
en: 'Your country',
|
|
||||||
},
|
|
||||||
type: 'chooser',
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
metadata_city: {
|
|
||||||
question: {
|
|
||||||
de: 'Dein Städteteam',
|
|
||||||
en: 'Your cityteam',
|
|
||||||
},
|
|
||||||
type: 'one_line_text',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
heading: {
|
heading: {
|
||||||
de: 'Bildung',
|
de: 'Bildung',
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
--volt-purple: #502379;
|
--volt-purple: #502379;
|
||||||
--volt-yellow: #FDC220;
|
--volt-yellow: #FDC220;
|
||||||
--volt-red: #E63E12;
|
--volt-red: #E63E12;
|
||||||
--volt-blur: #82D0F4;
|
--volt-blue: #82D0F4;
|
||||||
--volt-green: #1BBE6F;
|
--volt-green: #1BBE6F;
|
||||||
|
|
||||||
--page-width: 800px;
|
--page-width: 800px;
|
||||||
|
@ -78,9 +78,9 @@ a:hover {
|
||||||
.block_wrapper,
|
.block_wrapper,
|
||||||
.block_left,
|
.block_left,
|
||||||
.block_right {
|
.block_right {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -112,11 +112,16 @@ margin: 0;
|
||||||
background: var(--volt-purple);
|
background: var(--volt-purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.orange_bg {
|
.page.red_bg {
|
||||||
color: black;
|
color: black;
|
||||||
background: var(--volt-red);
|
background: var(--volt-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page.blue_bg {
|
||||||
|
color: black;
|
||||||
|
background: var(--volt-blue);
|
||||||
|
}
|
||||||
|
|
||||||
.page .pageContent {
|
.page .pageContent {
|
||||||
width: var(--page-width);
|
width: var(--page-width);
|
||||||
max-width: calc(100% - 64px);
|
max-width: calc(100% - 64px);
|
||||||
|
@ -188,7 +193,8 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.violet_bg h1,
|
.page.violet_bg h1,
|
||||||
.page.orange_bg h1 {
|
.page.red_bg h1,
|
||||||
|
.page.blue_bg h1 {
|
||||||
color: var(--on-dark-color);
|
color: var(--on-dark-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -300,7 +306,7 @@ p {
|
||||||
color: var(--on-light-color);
|
color: var(--on-light-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.markedText.black_on_orange {
|
.markedText.black_on_red {
|
||||||
background-color: var(--volt-red);
|
background-color: var(--volt-red);
|
||||||
color: var(--on-light-color);
|
color: var(--on-light-color);
|
||||||
}
|
}
|
||||||
|
@ -546,7 +552,8 @@ button {
|
||||||
color: var(--volt-purple);
|
color: var(--volt-purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.orange_bg button {
|
.page.red_bg button,
|
||||||
|
.page.blue_bg button {
|
||||||
background: var(--light-color);
|
background: var(--light-color);
|
||||||
color: var(--on-light-color);
|
color: var(--on-light-color);
|
||||||
}
|
}
|
||||||
|
@ -673,9 +680,64 @@ body.success .submitWrapper {
|
||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 100px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
.chip.add,
|
||||||
|
.chip.remove {
|
||||||
|
padding-right: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.chip.add::after,
|
||||||
|
.chip.remove::after {
|
||||||
|
content: '+';
|
||||||
|
color: var(--volt-green);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 100;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.chip.add::before,
|
||||||
|
.chip.remove::before {
|
||||||
|
content: '';
|
||||||
|
background: var(--volt-green);
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 100px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.chip.remove:hover::before {
|
||||||
|
background: var(--volt-red);
|
||||||
|
}
|
||||||
|
.chip.add:hover::before,
|
||||||
|
.chip.remove:hover::before {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
.chip.remove::after {
|
||||||
|
content: '+';
|
||||||
|
transform: rotateZ(45deg);
|
||||||
|
color: var(--volt-red);
|
||||||
|
}
|
||||||
|
.chip.automatic {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
body[show=""] .page[page="intro"],
|
body[show=""] .page[page="intro"],
|
||||||
body[show="intro"] .page[page="intro"],
|
body[show="intro"] .page[page="intro"],
|
||||||
body[show="privacy"] .page[page="privacy"],
|
body[show="privacy"] .page[page="privacy"],
|
||||||
|
body[show="metadata"] .page[page="metadata"],
|
||||||
body[show="questions"] .page[page="questions"] {
|
body[show="questions"] .page[page="questions"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,6 @@
|
||||||
<script type="text/javascript" src="./jsSHA/src/sha3.js" defer></script>
|
<script type="text/javascript" src="./jsSHA/src/sha3.js" defer></script>
|
||||||
<script type="text/javascript" src="./scripts/async.min.js" defer></script>
|
<script type="text/javascript" src="./scripts/async.min.js" defer></script>
|
||||||
<script type="text/javascript" src="./scripts/css_browser_selector.js" defer></script>
|
<script type="text/javascript" src="./scripts/css_browser_selector.js" defer></script>
|
||||||
<script type="text/javascript" src="./_DATA_.js" defer></script>
|
|
||||||
|
|
||||||
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
|
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
|
||||||
|
|
||||||
|
@ -105,7 +104,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="page orange_bg" page="privacy">
|
<div class="page red_bg" page="privacy">
|
||||||
<div class="pageContent" style="padding-top:64px;">
|
<div class="pageContent" style="padding-top:64px;">
|
||||||
<h1 class="website_heading" data-translation-key="heading_privacy"></h1>
|
<h1 class="website_heading" data-translation-key="heading_privacy"></h1>
|
||||||
|
|
||||||
|
@ -121,11 +120,52 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="block_right">
|
<div class="block_right">
|
||||||
<p style="padding-top:48px;opacity:0.8;font-size:16px;line-height:1.2;display: block;"
|
<p style="padding-top:48px;font-size:16px;line-height:1.2;display: block;"
|
||||||
data-translation-key="privacy_details"></p>
|
data-translation-key="privacy_details"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button to-page="metadata" style="margin-top:64px;"><span data-translation-key="button_to_metadata"></span>
|
||||||
|
<span class="arrow"></span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page blue_bg" page="metadata">
|
||||||
|
<div class="pageContent" style="padding-top:64px;">
|
||||||
|
<h1 class="website_heading" data-translation-key="metadata_heading"></h1>
|
||||||
|
|
||||||
|
<div class="block_wrapper" style="margin-top:32px;">
|
||||||
|
<div class="block_left" style="padding-top:48px;">
|
||||||
|
<p style="font-size:16px;line-height:1.2;display: block;"
|
||||||
|
data-translation-key="metadata_description"></p>
|
||||||
|
</div>
|
||||||
|
<div class="block_right" style="font-weight:bold;padding-top:48px;">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="team_search"
|
||||||
|
placeholder="Bonn"
|
||||||
|
style="border-color: currentColor;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div id="team_suggestions">
|
||||||
|
<div class="chip add">Bonn</div>
|
||||||
|
<div class="chip add">Berlin</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div id="teams_selected">
|
||||||
|
<div class="chip remove">Bonn</div>
|
||||||
|
<div class="chip remove">Berlin</div>
|
||||||
|
</div>
|
||||||
|
<div id="teams_selected_automaticly">
|
||||||
|
<div class="chip automatic">Bonn</div>
|
||||||
|
<div class="chip automatic">Berlin</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button to-page="questions" style="margin-top:64px;"><span data-translation-key="button_to_questions"></span>
|
<button to-page="questions" style="margin-top:64px;"><span data-translation-key="button_to_questions"></span>
|
||||||
<span class="arrow"></span></button>
|
<span class="arrow"></span></button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -139,14 +179,7 @@
|
||||||
<div style="margin-bottom: 128px;">
|
<div style="margin-bottom: 128px;">
|
||||||
|
|
||||||
<div class="submitWrapper">
|
<div class="submitWrapper">
|
||||||
<label class="radio_or_checkbox_label" style="display:flex;align-items: center;width:450px;max-width:100%;">
|
<button class="green" id="submitButton"><span data-translation-key="button_send_to_volt"></span><span class="arrow"></span></button>
|
||||||
<input id="metadataIsFirstCompletion" type="checkbox" />
|
|
||||||
<strong style="text-align:left; padding-bottom:1px; line-height:1.1;"
|
|
||||||
data-translation-key="metadata_is_this_the_first_completion"></strong>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<button class="green" id="submitButton"><span data-translation-key="button_send_to_volt"></span><span
|
|
||||||
class="arrow"></span></button>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="message saving" data-translation-key="saving"></p>
|
<p class="message saving" data-translation-key="saving"></p>
|
||||||
<p class="message success" data-translation-key="success"></p>
|
<p class="message success" data-translation-key="success"></p>
|
||||||
|
@ -155,6 +188,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript" src="./index.js" defer></script>
|
<script type="text/javascript" src="./index.js"></script>
|
||||||
|
<script type="text/javascript" src="./_DATA_.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -15,7 +15,14 @@ console.info('%c \n Be yourself! \n\n', `
|
||||||
7px 7px #3e0099,
|
7px 7px #3e0099,
|
||||||
8px 8px #8f008f;
|
8px 8px #8f008f;
|
||||||
`)
|
`)
|
||||||
|
|
||||||
|
const teams = []
|
||||||
|
const teams_selected = []
|
||||||
|
const teams_selected_automatically = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const CloudFunctionsPrefix = 'https://us-central1-volt-4eca0.cloudfunctions.net/save_formdata'
|
const CloudFunctionsPrefix = 'https://us-central1-volt-4eca0.cloudfunctions.net/save_formdata'
|
||||||
|
|
||||||
|
|
||||||
|
@ -569,7 +576,7 @@ const buttons_to_page = document.querySelectorAll('button[to-page]')
|
||||||
for (const button of buttons_to_page) {
|
for (const button of buttons_to_page) {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const toPage = button.getAttribute('to-page')
|
const toPage = button.getAttribute('to-page')
|
||||||
if (!['', 'intro', 'privacy', 'questions'].includes(toPage)) {
|
if (!['', 'intro', 'privacy', 'metadata', 'questions'].includes(toPage)) {
|
||||||
toPage = ''
|
toPage = ''
|
||||||
}
|
}
|
||||||
body.setAttribute('show', toPage)
|
body.setAttribute('show', toPage)
|
||||||
|
|
Loading…
Reference in a new issue