Showing source for: https://gutschein.bikehotels.it/de/
Duration: 0.222456s
Server: Apache
<!DOCTYPE html>
<html itemscope="" itemtype="http://schema.org/Thing" lang="de">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
<!--[if lt IE 9]><script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="/template/css/font.css" media="all" rel="stylesheet" type="text/css">
<link href="/template/css/style.css?1" media="all" rel="stylesheet" type="text/css">
<link href="/template/css/form.css" media="all" rel="stylesheet" type="text/css">
<style>
body.noiframe {
overflow : auto;
}
#steps {
clear : both;
margin-bottom : 1em;
overflow : auto;
}
#steps a:hover {
text-decoration : none;
}
#steps > * {
border : 2px dashed #71002D;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
color : #000;
display : inline-block;
float : left;
line-height : 1.25em;
margin-left : 0.7em;
padding : 0.5em;
text-align : center;
width : 120px;
min-height : 104px;
}
#steps > *:first-child {
margin-left : 0;
}
#steps > *:hover {
cursor : default;
}
#steps > *.clickable, #steps > *.active {
border-style : solid;
}
#steps > *.clickable:hover, #steps > *.active {
background : #71002D;
color : #FFF;
cursor : pointer;
}
#steps > * .nr {
font-size : 1.8em;
line-height : 1.2em;
}
#article label.wrap {
white-space : normal;
}
#article .liketable {
display : table;
width : 100%;
}
#article .liketable > * {
display : table-cell;
padding-left : 1em;
vertical-align : top;
}
#article .liketable.fiftyfifty > * {
width : 50%;
}
#article .liketable > *:first-child {
padding-left : 0;
}
#voucherform .liketable {
display : table;
width : 100%;
}
#voucherform .liketable > * {
display : table-cell;
vertical-align : middle;
}
#voucherform .liketable.valigntop > * {
vertical-align : top;
}
#voucherform .liketable.valigntop > *:first-child {
padding-right : 1.5em;
}
#voucherform .liketable.valigntop > * > * {
margin-top : 0;
}
#voucherform .liketable.valigntop > *:first-child > select {
margin-top : 0.2em;
}
#voucherform ol, voucherform ul {
font-size : 1em;
}
.formrow {
margin : 0.2em 0;
}
.ajaxloader {
background : #fff;
display : none;
margin : 0.5em 1em;
text-align : center;
}
.ajaxloader.show {
display : block;
}
.ajaxloader span {
background : #71002D;
border : 1px solid #71002D;
display : inline-block;
margin : 0 5px;
width : 20px;
height : 20px;
}
.ajaxloader.one span:nth-child(2), .ajaxloader.one span:nth-child(3),
.ajaxloader.two span:first-child, .ajaxloader.two span:nth-child(3),
.ajaxloader.three span:first-child, .ajaxloader.three span:nth-child(2) {
background : #fff;
}
/* Start Step 0 */
#motifs {
clear : both;
margin-top : -4%;
overflow : auto;
}
#motifs > * {
border : 1px solid #000;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
display : inline-block;
float : left;
margin-right : 4%;
margin-top : 4%;
position : relative;
width : 48%;
max-width : 400px;
}
#motifs > * span.check {
background : #71002D;
color : #FFF;
display : none;
line-height : 25px;
padding : 0.5em;
position : absolute;
bottom : 0;
right : 0;
z-index : 1;
text-align : center;
width : 25px;
height : 25px;
}
#motifs > *.active span.check {
display : inline-block;
}
#motifs > *:nth-child(2n) {
margin-right : 0;
}
#motifs > *.active img {
opacity : 0.5;
}
#motifs > *:hover {
cursor : pointer;
}
#motifs img {
height : auto;
vertical-align : middle;
width : 100%;
}
#text {
min-height : 120px;
width : 100%;
max-width : 500px;
}
#types .type {
margin : 2em 0;
position : relative;
width : 100%;
max-width : 500px;
}
#types .deleter {
font-size : 0.7em;
padding : 0!important;
position : absolute;
top : 0;
right : 0;
text-align : center;
width : 25px;
height : 25px;
}
#types .mt {
margin-top : 7px;
}
#types .type .vtype.hide {
display : none;
}
#article input[type="checkbox"] + label {
line-height : 1.3em;
margin-left : 0.4em;
text-align : left;
vertical-align : top;
width : 90%;
white-space : normal;
}
#article input[type="checkbox"] + label span.desc {
display : block;
margin-top : 0.3em;
font-size : 0.8em;
line-height : 1.35em;
}
#steps a.text {
text-decoration : none;
}
/* End Step 0 */
/* Start Step 1 */
#land {
margin-top : 0!important;
width : 100%;
max-width : 204px;
}
#taxrow {
display : none;
}
/* End Step 1 */
/* Start Step 2 */
#article .paymentdesc {
display : none;
}
/* End Step 2 */
/* Start Step 3 */
#article .summary {
margin-left : 5%;
}
#article .summary.liketable {
width : 95%;
}
#article .value.mb {
margin-bottom : 1em;
}
#preview {
min-height : 657px;
position : relative;
width : 100%;
max-width : 750px;
}
#preview .ajaxloader {
margin : 0;
min-width : 150px;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
}
#preview img {
height : auto;
width : 100%;
}
/* End Step 3 */
/* Start Step 4 */
#transferinfo {
padding : 0 1em;
}
#transferinfo > div {
display : table;
}
#transferinfo > div > * {
display : table-cell;
vertical-align : top;
}
#transferinfo .likelabel {
display : inline-block;
font-weight : 600;
margin-right : 1em;
text-align : right;
width : 140px;
}
#newvoucher {
margin-top : 4em;
}
/* End Step 4 */
#navigation {
clear : both;
border-top : 2px solid #DDD;
overflow : auto;
margin-top : 2em;
padding : 0.5em 0;
}
#prevstep {
float : left;
}
#nextstep {
float : right;
}
/* Custom Mediaqueries */
@media screen and (max-width: 720px) {
#steps > * {
margin-top : 2.5%;
margin-left : 0!important;
margin-right : 2.5%;
min-height : 0;
width : 48.75%
}
#steps > *:nth-child(2n) {
margin-right : 0;
}
#steps > * > * {
display : inline-block;
float : left;
font-size : 1em!important;
width : auto;
}
#steps > * .nr {
background : #FFF;
border-radius : 50%;
color : #000;
line-height : 25px;
margin-right : 0.5em;
text-align : center;
width : 25px;
height : 25px;
}
}
@media screen and (max-width: 600px) {
#payselect.liketable, #payselect.liketable > * {
display : block;
padding : 0!important;
}
#payselect.liketable > *:first-child {
margin-bottom : 1em;
}
}
@media screen and (max-width: 520px) {
#article .summary {
margin-left : 0;
}
#article fieldset {
margin : 1em 0;
}
#steps > * {
margin-right : 0;
width : 100%;
}
#voucherform ol, #voucherform ul {
list-style : none;
padding : 0;
}
#voucherform ol > *, #voucherform ul > * {
margin-top : 3.5em;
}
#voucherform ol > *:first-child, #voucherform ul > *:first-child {
margin-top : 0;
}
#motifs > * {
width : 48%;
}
#motifs > *:nth-child(3n) {
margin-right : 4%;
}
#motifs > *:nth-child(2n) {
margin-right : 0;
}
#types .type {
margin : 3em 0;
padding-top : 1em;
}
#types .type:first-child {
margin-top : 0;
}
#transferinfo > div {
display : block;
}
#types label, .formrow label, #transferinfo > div > * {
display : block!important;
text-align : left!important;
width : auto!important;
}
.formrow label, #transferinfo .likelabel {
margin-top : 0.5em;
}
.formrow label[for*="dont_show_price"] {
margin-top : 0;
}
.formrow:first-child label {
margin-top : 0;
}
#types label + *, .formrow label + *, #paymenttype, .summary.liketable.fiftyfifty, .summary.liketable.fiftyfifty > * {
display : block!important;
width : 100%!important;
max-width : none!important;
}
#types label + *.valueinput {
display : inline-block!important;
margin-right : 5%!important;
width : 85%!important;
}
#article input[type="checkbox"] + label {
display : inline-block!important;
width : 85%!important;
}
.summary.liketable.fiftyfifty > * {
margin-top : 1em;
padding : 0!important;
}
.summary.liketable.fiftyfifty > *:first-child {
margin-top : 0;
}
#newvoucher {
text-align : center;
}
#navigation {
padding-left : 0;
padding-right : 0;
}
}
@media screen and (max-width: 450px) {
#navigation > * {
display : block;
float : none;
text-align : center;
}
#navigation > *:nth-child(2) {
margin-top : 0.4em;
}
#navigation > *:before, #navigation > *:after {
content : "";
}
#motifs > * {
margin-right : 0;
width : 100%;
}
}
@media screen and (max-width: 400px) {
#transferinfo {
padding : 0;
}
}
</style>
</head>
<body>
<main id="main">
<article id="article">
<h1>
Gutschein
</h1>
<div id="steps">
<a class="steps-step clickable active" data-step="0" href="javascript:;">
<div class="nr">
1
</div>
<div class="text">
Gutschein erstellen
</div>
</a>
<a class="steps-step" data-step="1" href="javascript:;">
<div class="nr">
2
</div>
<div class="text">
Persönliche Daten
</div>
</a>
<a class="steps-step" data-step="2" href="javascript:;">
<div class="nr">
3
</div>
<div class="text">
Zahlungsart wählen
</div>
</a>
<a class="steps-step" data-step="3" href="javascript:;">
<div class="nr">
4
</div>
<div class="text">
Gutschein bestellen
</div>
</a>
<a class="steps-step" data-step="4" href="javascript:;">
<div class="nr">
5
</div>
<div class="text">
Gutschein zusenden
</div>
</a>
</div>
<form action="/de/" id="voucherform" method="POST">
<fieldset>
<h2>
Wähle ein Gutscheinmotiv:
</h2>
<div id="motifs">
<div class="active" data-alt="GR" data-index="1000" data-motifid="6">
<div class="ajaxloader one">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
<div data-alt="Hotel" data-index="1001" data-motifid="9">
<div class="ajaxloader one">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
<div data-alt="gutschein" data-index="1002" data-motifid="13">
<div class="ajaxloader one">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
<div data-alt="gutschein Rennrad" data-index="1003" data-motifid="14">
<div class="ajaxloader one">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
</div>
<input id="motifid" name="stepdata[0][motif]" type="hidden" value="6">
<h2>
Gib hier einen Text und einen Gutscheinbetrag ein:
</h2>
<p>
Sag etwas Persönliches! Der Text wird auf dem Gutschein aufgedruckt.
</p>
<textarea id="text" name="stepdata[0][text]"></textarea>
<p>
Wähl die Art des Gutscheins und gib den Gutscheinbetrag ein.
</p>
<div id="types">
<div class="type">
<label for="stepdata[0][vouchertypes][0][category]">
Art
</label>
<span>
Wertegutschein
</span>
<input data-index="0" name="stepdata[0][vouchertypes][0][category]" type="hidden" value="voucher">
<select class="vtype hide" data-index="0" name="stepdata[0][vouchertypes][0][category]">
<option value="voucher">
Wertegutschein
</option>
</select>
<div class="typedata formrow">
<div class="ajaxloader one">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</div>
</div>
</div>
<div class="formrow">
<input id="stepdata[0][dont_show_price]" name="stepdata[0][dont_show_price]" type="checkbox" value="1">
<label for="stepdata[0][dont_show_price]">
Ich möchte, dass der Preis nicht auf den Gutschein gedruckt wird.
<span class="desc">
Wird diese Option ausgewählt, wird anstelle des Preises folgender Standardtext aufgedruckt: "Viel Spaß beim Biken!"
</span>
</label>
</div>
</fieldset>
<input name="step" type="hidden" value="0">
<input id="offset" name="offset" type="hidden" value="1">
</form>
<div id="navigation">
<a class="next button" href="javascript:;" id="nextstep">
Weiter
</a>
</div>
</article>
</main>
<script src="/template/tools/jquery.min.js" type="text/javascript">
</script>
<!--[if lt IE 10]><script type="text/javascript" src="/template/tools/ieplaceholder.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/template/tools/respond.js"></script><![endif]-->
<script>
var ajaxloadcntr = new Array(), prevclass = new Array(), timeout_event = new Array(), externalWindow;
var vouchertypedata = [];
$(function() {
if (self == top) $('body').addClass('noiframe');
var lastheight = 0;
$(document).bind('DOMSubtreeModified', function() {
adjustHeight();
});
$(window).resize(function() {
adjustHeight();
}).resize();
function adjustHeight() {
if (Math.abs($(document.body).outerHeight(true) - lastheight) > 10) {
window.parent.postMessage({
height: $(document.body).outerHeight(true)
}, '*');
lastheight = $(document.body).outerHeight(true);
}
}
$('#steps > a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('clickable')) {
if ($('#voucherform').hasClass('kk')) $('#voucherform').html('').attr('action', $('#voucherform').attr('data-alt'));
$('#voucherform').append('<input type="hidden" name="goto" value="' + $(this).attr('data-step') + '">');
$('#voucherform').append('<input type="hidden" name="do" value="save">');
$('#voucherform').submit();
}
});
$('#motifs > *').click(function() {
$('#motifs > *').removeClass('active');
$(this).addClass('active');
$('#motifid').val($(this).attr('data-motifid'));
updateVoucherPreview();
});
$('#motifs > *').each(function() {
var $obj = $(this), $loader = $obj.find('.ajaxloader');
stopAjaxLoader.apply($loader);
$loader.addClass('show');
initAjaxLoader.apply($loader);
$.ajax({
timeout: 20000,
dataType: 'json',
type: 'post',
url: 'https://gutschein.bikehotels.it/contentcontrol/voucher/voucherpreview',
data: {
'motif_id': $obj.attr('data-motifid'),
'lang': 'de',
'getvpreview': 1
},
success: function(data) {
$loader.removeClass('show');
stopAjaxLoader.apply($loader);
if (data.imagedata !== '') $obj.html('<img style="width: 100%; height: auto;" src="data: image/jpeg;base64,' + data.imagedata + '" alt="' + $obj.attr('data-alt') + '"><span class="check">✔</span>');
}
});
});
$('#addType').click(function(e) {
e.preventDefault();
$('#offset').val(0);
$('#voucherform').append('<input type="hidden" name="additional_do" value="addtypes">');
$('#voucherform').submit();
});
$(document).on('change', 'select.vtype', function() {
loadVouchertypeData.apply(this);
singleVouchertypeVoucher();
});
$('select.vtype').change();
$(document).on('click', '#types .deleter', function() {
$(this).closest('.type').remove();
singleVouchertypeVoucher();
});
$('#land').change(function() {
var $taxrow = $('#taxrow');
if ($(this).val() === 'it') $taxrow.show(); else $taxrow.hide();
adjustHeight();
}).change();
$('#paymenttype').change(function() {
var val = $(this).val();
$('#article .paymentdesc').filter('[data-for!="' + val + '"]').hide();
$('#article .paymentdesc').filter('[data-for="' + val + '"]').show();
}).change();
$('#navigation > a').click(function(e) {
e.preventDefault();
$('#offset').val($(this).attr('id') === 'prevstep' ? -1 : 1);
$('#voucherform').append('<input type="hidden" name="do" value="save">');
$('#voucherform').submit();
});
});
function loadVouchertypeData() {
var $obj = $(this), $loader = $obj.parent().find('.ajaxloader');
stopAjaxLoader.apply($loader);
$loader.addClass('show');
initAjaxLoader.apply($loader);
$.ajax({
dataType: 'json',
type: 'post',
url: '/vouchertypedata',
data: $.extend({
index: $obj.attr('data-index'),
type: $obj.val()
}, vouchertypedata[$obj.attr('data-index')]),
success: function(data) {
$loader.removeClass('show');
stopAjaxLoader.apply($loader);
$obj.parent().find('.typedata').html(data.data);
updateVoucherPreview();
}
});
}
function initAjaxLoader() {
var $obj = $(this), index = $obj.closest('.type').find('select').attr('data-index') ? $obj.closest('.type').find('select').attr('data-index') : $(this).parent().attr('data-index'), classes = ['one','two','three'];
timeout_event[index] = window.setTimeout(function() {
if (ajaxloadcntr[index] == undefined) ajaxloadcntr[index] = 0;
if (prevclass[index]) $obj.removeClass(prevclass[index]);
$obj.addClass(classes[ajaxloadcntr[index]]);
prevclass[index] = classes[ajaxloadcntr[index]];
ajaxloadcntr[index]++;
if (ajaxloadcntr[index] === classes.length) ajaxloadcntr[index] = 0;
if (timeout_event[index]) clearTimeout(timeout_event[index]);
initAjaxLoader.apply($obj);
}, 250);
}
function stopAjaxLoader() {
var $obj = $(this), index = $obj.closest('.type').find('select').attr('data-index');
if (timeout_event[index]) clearTimeout(timeout_event[index]);
if (prevclass[index]) $obj.removeClass(prevclass[index]);
ajaxloadcntr[index] = 1;
prevclass[index] = 'one';
$obj.addClass('one');
}
function singleVouchertypeVoucher() {
var $selects = $('select.vtype');
if ($selects.length > 0) {
$selects.find('option[value="voucher"]').show();
$selects.each(function() {
if ($(this).val() === 'voucher') {
$selects.not(this).each(function() {
var $hiddenoption = $(this).find('option[value="voucher"]').hide(), $selectedoption = $(this).find('option:selected');
$(this).val($selectedoption.length > 0 ? $selectedoption.val() : $(this).find('option').not($hiddenoption).val());
});
}
});
}
}
function updateVoucherPreview() {
}
</script>
</body>
</html>