order form
This commit is contained in:
+76
-73
@@ -1,19 +1,26 @@
|
||||
{{define "body_content"}}
|
||||
<p class="title is-4">Ich bestelle...</p>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
Aktuell noch in Entwicklung, kommen Sie später noch einmal vorbei...
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
|
||||
<script src="static/js/order.js"></script>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<img src="/static/images/wo-bisch-tracker-product.jpg">
|
||||
</div>
|
||||
<div class="column is-three-quarters">
|
||||
<p class="is-size-2 has-text-weight-bold">CHF 150.00</p>
|
||||
<p class="is-size-7 neg-margin-1">pro Stück, inkl. MwSt.</p>
|
||||
<br />
|
||||
<div id="modal" class="modal is-active">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">GPS Tracker bestellen</p>
|
||||
</header>
|
||||
<div class="modal-card-body">
|
||||
<!-- Content ... -->
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<figure class="image is-1by1">
|
||||
<img src="/static/images/wo-bisch-tracker-product.png" alt="GPS Tracker Produktbild">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column is-three-quarters">
|
||||
<p class="is-size-2 has-text-weight-bold">CHF 150.00</p>
|
||||
<p class="is-size-7 neg-margin-1">pro Stück, inkl. MwSt.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
Im Preis enthalten:
|
||||
<ul>
|
||||
@@ -23,71 +30,67 @@ Aktuell noch in Entwicklung, kommen Sie später noch einmal vorbei...
|
||||
<li>12 Monate Abo, <span class="has-text-weight-bold">anschliessend CHF 5.00 pro Monat</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="field">
|
||||
<label class="label">Bestellmenge</label>
|
||||
<div class="control">
|
||||
<input class="input" type="number" id="quantity" name="quantity" min="1" max="5" value="1">
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="field">
|
||||
<label class="label">Bestellmenge</label>
|
||||
<div class="control has-icons-right">
|
||||
<input class="input" type="text" id="quantity" value="1">
|
||||
<span id="quantity_exclamation" class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p id="quantity_errormsg" class="help is-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-three-quarters">
|
||||
<div class="field">
|
||||
<label class="label">E-Mail</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" id="email" placeholder="max.mustermann@example.com" value="">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span id="email_exclamation" class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p id="email_errormsg" class="help is-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="field">
|
||||
<label class="label">E-Mail</label>
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-danger" type="email" placeholder="max.mustermann@example.com" value="">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="field">
|
||||
<label class="label">Lieferadresse</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="delivery_address" placeholder="Lieferadresse" autocomplete="off"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="field">
|
||||
<label class="label">Rechnungsadresse</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea has-fixed-size" rows="5" maxlength="250" id="billing_address" placeholder="leer lassen, wenn wie Lieferadresse" autocomplete="off"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger">This email is invalid</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="field">
|
||||
<label class="label">Lieferadresse</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Lieferadresse"></textarea>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Ich stimme den <a href="#">Geschäftsbedingungen</a> zu
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="field">
|
||||
<label class="label">Rechnungsadresse</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="leer lassen, wenn wie Lieferadresse"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Ich stimme den <a href="#">Geschäftsbedingungen</a> zu
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link">Bestellen</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link is-light">Abbrechen</button>
|
||||
<footer class="modal-card-foot">
|
||||
<button id="modal-save" class="button is-success">Bestellen</button>
|
||||
<button id="modal-close" class="button">Abbrechen</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user