add animation, form validation, final step and test javascript
parent
72d4047541
commit
b9979d10e9
|
|
@ -1,7 +1,7 @@
|
|||
@color-1: #047E7C;
|
||||
@color-2: #0C6D74;
|
||||
@color-3: #0C6D74;
|
||||
@color-bg: #F1F2E3;
|
||||
@color-white: #F1F2E3;
|
||||
@color-grey: #787970;
|
||||
|
||||
/* ======== MIXINS ======== */
|
||||
|
|
@ -19,17 +19,31 @@
|
|||
box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ======== ANIMATIONS ======== */
|
||||
|
||||
@keyframes rotate-step-number {
|
||||
0% {
|
||||
transform: rotate3d(0,0,0,0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate3d(45, 45, 1, 90deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(0,0,0,0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== ======== */
|
||||
|
||||
body {
|
||||
cursor: default;
|
||||
background-color: @color-bg;
|
||||
background-color: @color-white;
|
||||
font-family: "Source Sans Pro", sans;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: @color-bg;
|
||||
background-color: @color-white;
|
||||
padding: 1rem;
|
||||
|
||||
h1 {
|
||||
|
|
@ -41,7 +55,7 @@ header {
|
|||
}
|
||||
|
||||
#steps {
|
||||
color: @color-bg;
|
||||
color: @color-white;
|
||||
.step-heading {
|
||||
.top-bottom-shadow;
|
||||
|
||||
|
|
@ -53,17 +67,19 @@ header {
|
|||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
border: 0px;
|
||||
border-radius: 50%;
|
||||
|
||||
transition: background-color 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.step-number:not(.done) {
|
||||
font-weight: 400;
|
||||
background-color: @color-bg;
|
||||
background-color: @color-white;
|
||||
color: black;
|
||||
.number {
|
||||
display: inline;
|
||||
|
|
@ -74,8 +90,11 @@ header {
|
|||
}
|
||||
|
||||
.step-number.done {
|
||||
&:not(.final) { // prevents animation to be shown at final step
|
||||
animation: rotate-step-number 0.5s;
|
||||
}
|
||||
background-color: #8ECA63; // green
|
||||
color: @color-bg;
|
||||
color: @color-white;
|
||||
.number {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -105,6 +124,12 @@ header {
|
|||
color: rgba(255, 255, 255, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
// show numbers without spin box
|
||||
-moz-appearance:textfield;
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +138,11 @@ header {
|
|||
height: 96px;
|
||||
padding-top: 2em;
|
||||
|
||||
a {
|
||||
button {
|
||||
/* unstyle button */
|
||||
background-color: transparent;
|
||||
color: @color-white;
|
||||
border: none;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
|
|
@ -151,7 +180,7 @@ header {
|
|||
|
||||
footer {
|
||||
.top-bottom-shadow;
|
||||
background-color: @color-bg;
|
||||
background-color: @color-white;
|
||||
padding: 2em 30vw;
|
||||
text-align: center;
|
||||
a {
|
||||
|
|
@ -159,3 +188,20 @@ footer {
|
|||
border-bottom: dotted 1px rgba(0,0,0,0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== FINAL STEP ======== */
|
||||
|
||||
.step.final {
|
||||
pre.address {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: @color-white;
|
||||
}
|
||||
.download-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
color: @color-white;
|
||||
border-bottom: dotted 1px rgba(0,0,0,0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
index.html
75
index.html
|
|
@ -39,32 +39,32 @@
|
|||
<form>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-6">
|
||||
<input type="text" name="givenname" placeholder="Vorname">
|
||||
<input type="text" name="givenname" placeholder="Vorname" required>
|
||||
</div>
|
||||
<div class="col col-12 col-md-6">
|
||||
<input type="text" name="surname" placeholder="Nachname">
|
||||
<input type="text" name="surname" placeholder="Nachname" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<input type="text" name="address" placeholder="Adresse">
|
||||
<input type="text" name="address" placeholder="Adresse" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-4">
|
||||
<input type="text" name="zip" placeholder="Postleitzahl">
|
||||
<input type="number" min="10000" max="99999" name="zip" placeholder="Postleitzahl" required>
|
||||
</div>
|
||||
<div class="col col-12 col-md-8">
|
||||
<input type="text" name="place" placeholder="Ort">
|
||||
<input type="text" name="place" placeholder="Ort" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-wrapper">
|
||||
<button type="submit">
|
||||
<span>Weiter</span>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="next-wrapper">
|
||||
<a data-toggle="collapse" data-target="#step-2" aria-expanded="false" aria-controls="step-2">
|
||||
<span>Weiter</span>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
|
@ -77,45 +77,29 @@
|
|||
|
||||
<div class="step-heading" id="step-2-heading">
|
||||
<h2>
|
||||
<div class="step-number">
|
||||
<span class="number">2</span>
|
||||
<div class="step-number final done">
|
||||
<span class="check">✓</span>
|
||||
</div>
|
||||
<a data-toggle="collapse" data-target="#step-2" aria-expanded="true" aria-controls="step-2">
|
||||
Persönliche Daten
|
||||
Fertig
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="step-2" class="step collapse" aria-labelledby="step-2-heading" data-parent="#steps">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-6">
|
||||
<input type="text" name="givenname" placeholder="Vorname">
|
||||
</div>
|
||||
<div class="col col-12 col-md-6">
|
||||
<input type="text" name="surname" placeholder="Nachname">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<input type="text" name="address" placeholder="Adresse">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-4">
|
||||
<input type="text" name="zip" placeholder="Postleitzahl">
|
||||
</div>
|
||||
<div class="col col-12 col-md-8">
|
||||
<input type="text" name="place" placeholder="Ort">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="next-wrapper">
|
||||
<a data-toggle="collapse" data-target="#step-3" aria-expanded="false" aria-controls="step-3">
|
||||
<span>Weiter</span>
|
||||
<i class="material-icons">keyboard_arrow_down</i>
|
||||
</a>
|
||||
<div id="step-2" class="step final collapse" aria-labelledby="step-2-heading" data-parent="#steps">
|
||||
<p>
|
||||
Sie haben erfolgreich Ihren Mitgliedsantrag ausgefüllt und können
|
||||
diesen jetzt herunterladen und dann entweder per E-Mail an
|
||||
<a href="mailto:membership@fablab-nea.de">membership@fablab-nea.de
|
||||
</a> schicken oder ausdrucken und per Post schicken:
|
||||
</p>
|
||||
<p>
|
||||
<pre class="address">
|
||||
FabLab Bad Windsheim
|
||||
Spitalwall 16
|
||||
91435 Bad Windsheim</pre>
|
||||
<div class="download-wrapper">
|
||||
<button type="button" onclick="gen()" class="btn btn-success">Mitgliedsantrag herunterladen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -130,8 +114,13 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/js/bootstrap.min.js" integrity="sha256-C8oQVJ33cKtnkARnmeWp6SDChkU+u7KvsNMFUzkkUzk=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- lodash -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js" integrity="sha256-kfCY8AGGIjQknt91OQsTG0nhavjNrRGIWWb8WXOvQp8=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- pdfmake -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/pdfmake.min.js" integrity="sha256-Bxopx5SriypS8eE5qr38Bvap2ZNx3CUl9HZ6sewBtfk=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/vfs_fonts.js" integrity="sha256-wvH/UThD/fVD6sz1bAWX7JDW5Nx1TBdhegX8IHX20hA=" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
const num_steps = 1;
|
||||
|
||||
_.forEach(_.range(num_steps), function(value) {
|
||||
$('#step-' + (value+1) + ' form').submit(function(event) {
|
||||
$('#step-' + (value+2) ).collapse('show');
|
||||
$('#step-' + (value+1) + '-heading .step-number').addClass('done');
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
function gen() {
|
||||
var model = {};
|
||||
_.forEach(_.range(num_steps), function(value) {
|
||||
_.each($('#step-' + (value + 1) + ' form').serializeArray(), function(value) {
|
||||
model[value.name] = value.value;
|
||||
});
|
||||
});
|
||||
var docDefinition = {
|
||||
content: [
|
||||
{ text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Winsheim', fontSize: 20, margin: [0,0,0,20] },
|
||||
{
|
||||
text: [
|
||||
'Name: ',
|
||||
{ text: model.givenname + ' ' + model.surname, bold: true },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: [
|
||||
'Adresse: ',
|
||||
{ text: model.address, bold: true },
|
||||
]
|
||||
},
|
||||
{
|
||||
text: [
|
||||
'PLZ + Ort: ',
|
||||
{ text: model.zip + ' ' + model.place, bold: true },
|
||||
]
|
||||
}
|
||||
],
|
||||
pageSize: 'A4',
|
||||
pageMargins: [ 62.3622, 60, 62.3622, 60 ]
|
||||
};
|
||||
|
||||
pdfMake.createPdf(docDefinition).download('Mitgliedsantrag FabLab NEA.pdf');
|
||||
}
|
||||
Reference in New Issue