Source: src/components/index.scss, line 1
Source: src/components/index.scss, line 1
Source: src/components/qr-code.scss, line 1
Styling to apply to the QR code image
<img class="yivi-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
Source: src/components/yivi-button.scss, line 1
A button to press to launch the disclosure flow in the Yivi app (locally on a mobile device)
<button class="yivi-web-button">
Open Yivi-app
</button>
<a href="#" class="yivi-web-button">
Open Yivi-app
</a>
Source: src/components/yivi-form.scss, line 1
A place to nicely show the different states of the Yivi disclosure flow.
Trigger helper:
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
With some text and stuff
Ga verder met Yivi
Kom je er niet uit? Kijk dan eerst eens op de website van Yivi.
With some text and stuff
<section class="yivi-web-form">
<div class="yivi-web-header">
<p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
<div class="yivi-web-helper">
<p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
</div>
</div>
<div class="yivi-web-content">
<div class="yivi-web-centered">
<button>Some action here</button>
<p>With some text <a href="#">and stuff</a></p>
</div>
</div>
</section>
<section class="yivi-web-form">
<div class="yivi-web-header">
<p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
<div class="yivi-web-helper">
<p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
</div>
<button class="yivi-web-close"></button>
</div>
<div class="yivi-web-content">
<div class="yivi-web-centered">
<button>Some action here</button>
<p>With some text <a href="#">and stuff</a></p>
</div>
</div>
</section>
Source: src/components/yivi-logo.scss, line 1
Change an element into the Yivi logo
<div class="yivi-web-logo" style="width: 70px; height: 60px;"></div>
<i class="yivi-web-logo" style="width: 70px; height: 60px;"></i><br/>
<i class="yivi-web-logo" style="width: 200px; height: 160px;"></i>
Source: src/components/yivi-pairing-form.scss, line 1
A form to enter the pairing code in order to pair your Yivi app with the session.
<form class="yivi-web-pairing-form">
<p>Vul de koppelcode in die in je Yivi-app verschijnt.</>
<div class="yivi-web-pairing-code">
<input inputmode="numeric" pattern="\d" maxlength="1" required />
<input inputmode="numeric" pattern="\d" maxlength="1" required />
<input inputmode="numeric" pattern="\d" maxlength="1" required />
<input inputmode="numeric" pattern="\d" maxlength="1" required />
</div>
<div class="yivi-web-pairing-loading-animation" style="visibility: hidden">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<input type="submit" style="display: none" />
<script type="application/javascript">
let form = document.querySelector('.yivi-web-pairing-form');
let inputFields = form.querySelectorAll('.yivi-web-pairing-code input');
inputFields.forEach(field => {
field.onkeydown = (e) => {
e.target.prevValue = e.target.value;
if (e.key != 'Enter') e.target.value = '';
};
field.onkeyup = (e) => {
let prevField = e.target.previousElementSibling;
if (prevField && e.key == 'Backspace' && e.target.value === e.target.prevValue) {
prevField.value = '';
prevField.focus();
}
};
field.oninput = (e) => {
let nextField = e.target.nextElementSibling;
if (!nextField || !e.target.checkValidity()) {
e.target.form.querySelector('input[type=submit]').click();
} else {
nextField.focus();
}
};
field.onfocus = (e) => {
if (!e.target.value) {
e.preventDefault();
e.target.form.querySelector('input:invalid').focus();
}
};
});
inputFields[0].parentElement.onclick = (e) => {
if (e.target.tagName !== 'INPUT') {
let firstInvalidField = form.querySelector('input:invalid');
if (firstInvalidField) firstInvalidField.focus();
}
};
form.onsubmit = (e) => {
e.preventDefault();
let code = Array.prototype.map.call(inputFields, f => {
f.disabled = true;
return f.value;
}).join('');
e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'visible';
setTimeout(() => {
e.target.reset();
inputFields.forEach(f => f.disabled = false);
inputFields[0].focus();
e.target.querySelector('p').innerHTML = `De ingevoerde koppelcode ${code} komt niet overeen met de code in jouw Yivi-app. Probeer het opnieuw.`;
e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'hidden';
}, 500);
};
</script>
</form>