mirror of
https://github.com/voltbonn/diversity.volt.link.git
synced 2024-06-24 23:10:57 +00:00
started metadata page
This commit is contained in:
thomasrosen
parent
88c85ea8d5
commit
f5098ce05c
|
|
@ -27,7 +27,7 @@ const _DATA_ = {
|
|||
`,
|
||||
},
|
||||
//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>
|
||||
//
|
||||
|
|
@ -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>.
|
||||
`,
|
||||
},
|
||||
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: {
|
||||
de: 'Zu den Fragen',
|
||||
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: {
|
||||
de: 'An Volt senden',
|
||||
en: 'Send to Volt',
|
||||
|
|
@ -123,29 +140,6 @@ const _DATA_ = {
|
|||
},
|
||||
},
|
||||
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: {
|
||||
de: 'Bildung',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
--volt-purple: #502379;
|
||||
--volt-yellow: #FDC220;
|
||||
--volt-red: #E63E12;
|
||||
--volt-blur: #82D0F4;
|
||||
--volt-blue: #82D0F4;
|
||||
--volt-green: #1BBE6F;
|
||||
|
||||
--page-width: 800px;
|
||||
|
|
@ -78,9 +78,9 @@ a:hover {
|
|||
.block_wrapper,
|
||||
.block_left,
|
||||
.block_right {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,11 +112,16 @@ margin: 0;
|
|||
background: var(--volt-purple);
|
||||
}
|
||||
|
||||
.page.orange_bg {
|
||||
.page.red_bg {
|
||||
color: black;
|
||||
background: var(--volt-red);
|
||||
}
|
||||
|
||||
.page.blue_bg {
|
||||
color: black;
|
||||
background: var(--volt-blue);
|
||||
}
|
||||
|
||||
.page .pageContent {
|
||||
width: var(--page-width);
|
||||
max-width: calc(100% - 64px);
|
||||
|
|
@ -188,7 +193,8 @@ h1 {
|
|||
}
|
||||
|
||||
.page.violet_bg h1,
|
||||
.page.orange_bg h1 {
|
||||
.page.red_bg h1,
|
||||
.page.blue_bg h1 {
|
||||
color: var(--on-dark-color);
|
||||
}
|
||||
|
||||
|
|
@ -300,7 +306,7 @@ p {
|
|||
color: var(--on-light-color);
|
||||
}
|
||||
|
||||
.markedText.black_on_orange {
|
||||
.markedText.black_on_red {
|
||||
background-color: var(--volt-red);
|
||||
color: var(--on-light-color);
|
||||
}
|
||||
|
|
@ -546,7 +552,8 @@ button {
|
|||
color: var(--volt-purple);
|
||||
}
|
||||
|
||||
.page.orange_bg button {
|
||||
.page.red_bg button,
|
||||
.page.blue_bg button {
|
||||
background: var(--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="intro"] .page[page="intro"],
|
||||
body[show="privacy"] .page[page="privacy"],
|
||||
body[show="metadata"] .page[page="metadata"],
|
||||
body[show="questions"] .page[page="questions"] {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
<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/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" />
|
||||
|
||||
|
|
@ -105,7 +104,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page orange_bg" page="privacy">
|
||||
<div class="page red_bg" page="privacy">
|
||||
<div class="pageContent" style="padding-top:64px;">
|
||||
<h1 class="website_heading" data-translation-key="heading_privacy"></h1>
|
||||
|
||||
|
|
@ -121,11 +120,52 @@
|
|||
</p>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
<span class="arrow"></span></button>
|
||||
</div>
|
||||
|
|
@ -139,14 +179,7 @@
|
|||
<div style="margin-bottom: 128px;">
|
||||
|
||||
<div class="submitWrapper">
|
||||
<label class="radio_or_checkbox_label" style="display:flex;align-items: center;width:450px;max-width:100%;">
|
||||
<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>
|
||||
<button class="green" id="submitButton"><span data-translation-key="button_send_to_volt"></span><span class="arrow"></span></button>
|
||||
</div>
|
||||
<p class="message saving" data-translation-key="saving"></p>
|
||||
<p class="message success" data-translation-key="success"></p>
|
||||
|
|
@ -155,6 +188,7 @@
|
|||
</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,14 @@ console.info('%c \n Be yourself! \n\n', `
|
|||
7px 7px #3e0099,
|
||||
8px 8px #8f008f;
|
||||
`)
|
||||
|
||||
|
||||
const teams = []
|
||||
const teams_selected = []
|
||||
const teams_selected_automatically = []
|
||||
|
||||
|
||||
|
||||
|
||||
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) {
|
||||
button.addEventListener('click', () => {
|
||||
const toPage = button.getAttribute('to-page')
|
||||
if (!['', 'intro', 'privacy', 'questions'].includes(toPage)) {
|
||||
if (!['', 'intro', 'privacy', 'metadata', 'questions'].includes(toPage)) {
|
||||
toPage = ''
|
||||
}
|
||||
body.setAttribute('show', toPage)
|
||||
|
|
|
|||
Loading…
Reference in a new issue