forked from tohe/wmdeit_kaform
				
			
		
			
	
	
		
			498 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
		
		
			
		
	
	
			498 lines
		
	
	
		
			25 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
| 
								 | 
							
								<!doctype html>
							 | 
						||
| 
								 | 
							
								<html>
							 | 
						||
| 
								 | 
							
								<head>
							 | 
						||
| 
								 | 
							
									<meta charset="utf-8"/>
							 | 
						||
| 
								 | 
							
									<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
							 | 
						||
| 
								 | 
							
									<title>Kostenerstattungsantrag Wikimedia Deutschland e.V.</title>
							 | 
						||
| 
								 | 
							
									<link rel="stylesheet" href="kostenerstattung.css">
							 | 
						||
| 
								 | 
							
									<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
							 | 
						||
| 
								 | 
							
									<script src="polyfiller.js"></script>
							 | 
						||
| 
								 | 
							
									<script src="iban.js/iban.js"></script>
							 | 
						||
| 
								 | 
							
									<script>
							 | 
						||
| 
								 | 
							
										var eintraege = 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function neuerIndex()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var aufstellung = document.getElementById('Aufstellung'),
							 | 
						||
| 
								 | 
							
												eintraege = document.querySelectorAll('#Aufstellung tbody tr');
							 | 
						||
| 
								 | 
							
											for(var n = 0; n < eintraege.length; n++)
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												eintraege[n].querySelector('legend').textContent = n+1+'. Position';
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function checkIban()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											iban = document.getElementById('iban');
							 | 
						||
| 
								 | 
							
											if( document.getElementById('eu').checked ) {
							 | 
						||
| 
								 | 
							
												
							 | 
						||
| 
								 | 
							
												if(IBAN.isValid(iban.value))
							 | 
						||
| 
								 | 
							
												{
							 | 
						||
| 
								 | 
							
													if(iban.classList.contains('invalid')) iban.classList.remove('invalid');
							 | 
						||
| 
								 | 
							
													iban.classList.add('valid');
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
												else
							 | 
						||
| 
								 | 
							
												{
							 | 
						||
| 
								 | 
							
													if(iban.classList.contains('valid')) iban.classList.remove('valid');
							 | 
						||
| 
								 | 
							
													iban.classList.add('invalid');
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
											} else {
							 | 
						||
| 
								 | 
							
												if(iban.classList.contains('invalid')) iban.classList.remove('invalid');
							 | 
						||
| 
								 | 
							
												if(iban.classList.contains('valid')) iban.classList.remove('valid');
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function neueZeileGebraucht()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var eintraege = document.querySelectorAll('#Aufstellung tbody tr');
							 | 
						||
| 
								 | 
							
											if(2 === eintraege.length) 
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												addLine();
							 | 
						||
| 
								 | 
							
												return true;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											var datum = document.getElementById('Datum['+(eintraege.length-1)+']'),
							 | 
						||
| 
								 | 
							
												betrag = document.getElementById('Betrag['+(eintraege.length-1)+']');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											if("" !== datum.value || "0.00" !== betrag.value) addLine();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function aktualisiereSumme()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var aufstellung = document.getElementById('Aufstellung'),
							 | 
						||
| 
								 | 
							
												eintraege = document.querySelectorAll('#Aufstellung tbody tr'),
							 | 
						||
| 
								 | 
							
												summe = 0-parseFloat(document.getElementById('vorschuss').value);
							 | 
						||
| 
								 | 
							
											for(var e = 1; e < eintraege.length-1; e++)
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
								//				console.log('aktualisiereSumme/Summe: '+summe);
							 | 
						||
| 
								 | 
							
								//				console.log('aktualisiereSumme/eintraege[e].id: '+eintraege[e].id);
							 | 
						||
| 
								 | 
							
												var id = parseInt(eintraege[e].id.match(/(\d+)/)[0]);
							 | 
						||
| 
								 | 
							
												summe += parseFloat(document.getElementById('Betrag['+id+']').querySelector('input').value);
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
											document.getElementById('Summe').textContent = summe.toLocaleString(false, { minimumFractionDigits: 2, useGrouping: true } );
							 | 
						||
| 
								 | 
							
								//			document.getElementById('Summe').textContent = summe.toFixed(2).toLocaleString();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function checkForUpdates()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
								//			neueZeileGebraucht();
							 | 
						||
| 
								 | 
							
											aktualisiereSumme();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function erstellePosition(p)
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var vorlage = document.getElementById('neuerEintrag'),
							 | 
						||
| 
								 | 
							
												neuerEintrag, inputs, labels, spans, textareas, tds;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											neuerEintrag = document.importNode(vorlage.content, true);
							 | 
						||
| 
								 | 
							
											neuerEintrag.querySelector('tr').id='Reihe['+p+']';
							 | 
						||
| 
								 | 
							
											tds = neuerEintrag.querySelectorAll('td');
							 | 
						||
| 
								 | 
							
											tds[0].id = 'Position['+p+']';
							 | 
						||
| 
								 | 
							
											tds[1].id = 'Beschreibung['+p+']';
							 | 
						||
| 
								 | 
							
											tds[2].id = 'Belegdatum['+p+']';
							 | 
						||
| 
								 | 
							
											tds[3].id = 'Betrag['+p+']';
							 | 
						||
| 
								 | 
							
											tds[4].id = 'Delete['+p+']';
							 | 
						||
| 
								 | 
							
											tds[0].textContent = p;
							 | 
						||
| 
								 | 
							
											tds[4].querySelector('button').onclick = delLine;
							 | 
						||
| 
								 | 
							
											tds[4].querySelector('button').ontouch = delLine;
							 | 
						||
| 
								 | 
							
											tds[3].querySelector('input').onchange = checkForUpdates;
							 | 
						||
| 
								 | 
							
											spans = neuerEintrag.querySelectorAll('span');
							 | 
						||
| 
								 | 
							
											return neuerEintrag;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function fadeIn(element)
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											console.log('Fading in');
							 | 
						||
| 
								 | 
							
											var op = 0.1;  // initial opacity
							 | 
						||
| 
								 | 
							
											element.style.opacity = 0;
							 | 
						||
| 
								 | 
							
											element.style.filter = 'alpha(opacity=0)';
							 | 
						||
| 
								 | 
							
											element.style.display = 'table-row';
							 | 
						||
| 
								 | 
							
											var timer = setInterval(function ()
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												element.style.opacity = op;
							 | 
						||
| 
								 | 
							
												element.style.filter = 'alpha(opacity=' + op * 100 + ")";
							 | 
						||
| 
								 | 
							
												op += op * 0.1;
							 | 
						||
| 
								 | 
							
												if (op >= 1)
							 | 
						||
| 
								 | 
							
												{
							 | 
						||
| 
								 | 
							
													clearInterval(timer);
							 | 
						||
| 
								 | 
							
													element.style.opacity = 1;
							 | 
						||
| 
								 | 
							
													element.style.filter = 'alpha(opacity=100)';
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
											}, 10);
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
										function fadeOut(element)
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											console.log('Fading out');
							 | 
						||
| 
								 | 
							
											var op = 1;  // initial opacity
							 | 
						||
| 
								 | 
							
											var timer = setInterval(function ()
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												if (op <= 0.1)
							 | 
						||
| 
								 | 
							
												{
							 | 
						||
| 
								 | 
							
													clearInterval(timer);
							 | 
						||
| 
								 | 
							
													element.style.display = 'none';
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
												element.style.opacity = op;
							 | 
						||
| 
								 | 
							
												element.style.filter = 'alpha(opacity=' + op * 100 + ")";
							 | 
						||
| 
								 | 
							
												op -= 0.05;
							 | 
						||
| 
								 | 
							
											}, 25);
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function removeAfterTimeout(element)
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											console.log('Removing '+element.id);
							 | 
						||
| 
								 | 
							
											var eintraege = document.querySelectorAll('#Aufstellung tbody tr'),
							 | 
						||
| 
								 | 
							
												aufstellung = document.getElementById('Aufstellung'),
							 | 
						||
| 
								 | 
							
												currentId = parseInt(element.id.match(/(\d+)/)[0]);
							 | 
						||
| 
								 | 
							
											element.parentNode.removeChild(document.getElementById('Reihe['+currentId+']'));
							 | 
						||
| 
								 | 
							
								//			console.log('removeAfterTimeout/currentId: '+currentId);
							 | 
						||
| 
								 | 
							
								//			console.log('removeAfterTimeout/eintraege.length: '+eintraege.length);
							 | 
						||
| 
								 | 
							
											if((currentId+1) < (eintraege.length))
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												// if there are more entries after the one supposed to be deleted, change their index values to match their new position
							 | 
						||
| 
								 | 
							
												for(var i = currentId+1; i < eintraege.length-1; i++)
							 | 
						||
| 
								 | 
							
												{
							 | 
						||
| 
								 | 
							
								//					console.log('removeAfterTimeout/i: '+i);
							 | 
						||
| 
								 | 
							
													var regex = new RegExp(/\d+/),
							 | 
						||
| 
								 | 
							
														newIdx = i-1,
							 | 
						||
| 
								 | 
							
														pos = document.getElementById('Reihe['+i+']');
							 | 
						||
| 
								 | 
							
								//					console.log('removeAfterTimeout/newIdx: '+newIdx);
							 | 
						||
| 
								 | 
							
								//					console.log('removeAfterTimeout/pos.id before: '+pos.id);
							 | 
						||
| 
								 | 
							
													pos.id=pos.id.replace(regex,newIdx);
							 | 
						||
| 
								 | 
							
								//					console.log('removeAfterTimeout/pos.id after: '+pos.id);
							 | 
						||
| 
								 | 
							
													for(var n = 0; n < pos.childNodes.length; n++)
							 | 
						||
| 
								 | 
							
													{
							 | 
						||
| 
								 | 
							
														if(1 == pos.childNodes[n].nodeType)
							 | 
						||
| 
								 | 
							
														{
							 | 
						||
| 
								 | 
							
															pos.childNodes[n].id=pos.childNodes[n].id.replace(/\d/,newIdx);
							 | 
						||
| 
								 | 
							
														}
							 | 
						||
| 
								 | 
							
													}
							 | 
						||
| 
								 | 
							
													document.getElementById('Position['+newIdx+']').textContent = newIdx;
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
											checkForUpdates();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function delLine()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var eintraege = document.querySelectorAll('#Aufstellung tbody tr'),
							 | 
						||
| 
								 | 
							
												aufstellung = document.getElementById('Aufstellung');
							 | 
						||
| 
								 | 
							
											var current = this.parentNode.parentNode;
							 | 
						||
| 
								 | 
							
											console.log(current);
							 | 
						||
| 
								 | 
							
											fadeOut(current);
							 | 
						||
| 
								 | 
							
											setTimeout(removeAfterTimeout, 1100, current);
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function addLine()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var eintraege = document.querySelectorAll('#Aufstellung tbody tr'),
							 | 
						||
| 
								 | 
							
												aufstellung = document.getElementById('Aufstellung').querySelector('tbody');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											var neu = erstellePosition(eintraege.length-1);
							 | 
						||
| 
								 | 
							
											aufstellung.insertBefore(neu,document.getElementById('more'));
							 | 
						||
| 
								 | 
							
								//			var eingefuegt = aufstellung.querySelector('fieldset:last-of-type');
							 | 
						||
| 
								 | 
							
											var eingefuegt = aufstellung.querySelector('tr:nth-last-of-type(2)');
							 | 
						||
| 
								 | 
							
								//			neuerIndex();
							 | 
						||
| 
								 | 
							
											console.log('Adding '+eingefuegt.id);
							 | 
						||
| 
								 | 
							
											fadeIn(eingefuegt);
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function splitDateString(date) { return date.match(/(\d{4})-(\d{2})-(\d{2})/); }
							 | 
						||
| 
								 | 
							
										function splitTimeString(time) { return time.match(/(\d{2}):(\d{2})/); }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function restoreFromCookie()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var c = document.cookie.match(new RegExp('Kostenerstattung' + '=([^;]+)'));
							 | 
						||
| 
								 | 
							
											console.log(c);
							 | 
						||
| 
								 | 
							
											if(c) {
							 | 
						||
| 
								 | 
							
												c && (c = JSON.parse(c[1]));
							 | 
						||
| 
								 | 
							
												document.getElementById('projekt').value = c.projekt;
							 | 
						||
| 
								 | 
							
												document.getElementById('ansprech').value = c.ansprech;
							 | 
						||
| 
								 | 
							
												document.getElementById('real').value = c.real;
							 | 
						||
| 
								 | 
							
												document.getElementById('email').value = c.email;
							 | 
						||
| 
								 | 
							
												document.getElementById('phone').value = c.phone;
							 | 
						||
| 
								 | 
							
												document.getElementById('iban').value = c.iban;
							 | 
						||
| 
								 | 
							
												document.getElementById('bic').value = c.bic;
							 | 
						||
| 
								 | 
							
												document.getElementById('bank').value = c.bank;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function storeToCookie()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											var c =
							 | 
						||
| 
								 | 
							
											{
							 | 
						||
| 
								 | 
							
												'projekt': document.getElementById('projekt').value,
							 | 
						||
| 
								 | 
							
												'ansprech': document.getElementById('ansprech').value,
							 | 
						||
| 
								 | 
							
												'real': document.getElementById('real').value,
							 | 
						||
| 
								 | 
							
												'email': document.getElementById('email').value,
							 | 
						||
| 
								 | 
							
												'phone': document.getElementById('phone').value,
							 | 
						||
| 
								 | 
							
												'iban': document.getElementById('iban').value,
							 | 
						||
| 
								 | 
							
												'bic': document.getElementById('bic').value,
							 | 
						||
| 
								 | 
							
												'bank': document.getElementById('bank').value,
							 | 
						||
| 
								 | 
							
											};
							 | 
						||
| 
								 | 
							
											document.cookie = 'Kostenerstattung='+JSON.stringify(c)+'; domain='+window.location.host.toString()+'; path=/extern; expires='+(new Date().getTime()+1000*60*60*24*365);
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function init() {
							 | 
						||
| 
								 | 
							
											document.getElementById("printDE_top").addEventListener('click', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printEN_top").addEventListener('click', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printDE_top").addEventListener('touch', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printEN_top").addEventListener('touch', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printDE_bottom").addEventListener('click', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printEN_bottom").addEventListener('click', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printDE_bottom").addEventListener('touch', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById("printEN_bottom").addEventListener('touch', function() { window.print(); }, true);
							 | 
						||
| 
								 | 
							
											document.getElementById('vorschuss').addEventListener('change', aktualisiereSumme);
							 | 
						||
| 
								 | 
							
											document.getElementById('iban').addEventListener('change', checkIban);
							 | 
						||
| 
								 | 
							
								/*			document.getElementById('save').addEventListener('click', storeToCookie);
							 | 
						||
| 
								 | 
							
											document.getElementById('save').addEventListener('touch', storeToCookie);*/
							 | 
						||
| 
								 | 
							
											document.getElementById('addbutton_de').addEventListener('click', addLine);
							 | 
						||
| 
								 | 
							
											document.getElementById('addbutton_de').addEventListener('touch', addLine);
							 | 
						||
| 
								 | 
							
											document.getElementById('addbutton_en').addEventListener('click', addLine);
							 | 
						||
| 
								 | 
							
											document.getElementById('addbutton_en').addEventListener('touch', addLine);
							 | 
						||
| 
								 | 
							
								//			if(document.cookie) restoreFromCookie();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										function init2()
							 | 
						||
| 
								 | 
							
										{
							 | 
						||
| 
								 | 
							
											webshims.setOptions('forms-ext', {types: 'date'});
							 | 
						||
| 
								 | 
							
											webshims.polyfill('forms forms-ext');
							 | 
						||
| 
								 | 
							
											addLine();
							 | 
						||
| 
								 | 
							
											aktualisiereSumme();
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										window.addEventListener('DOMContentLoaded',init);
							 | 
						||
| 
								 | 
							
										window.addEventListener('load',init2);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									</script>
							 | 
						||
| 
								 | 
							
								</head>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<body>
							 | 
						||
| 
								 | 
							
									<input class="screen radiobutton" type="radio" id="en" name="lang" value="en" checked><label class="screen" for="en">English</label>
							 | 
						||
| 
								 | 
							
									<input class="screen radiobutton" type="radio" id="de" name="lang" value="de"><label class="screen" for="de">Deutsch</label>
							 | 
						||
| 
								 | 
							
									<header>
							 | 
						||
| 
								 | 
							
										<img style="float: right;" src="logo_web.png" alt="logo">
							 | 
						||
| 
								 | 
							
										<h1 lang="de">Antrag auf Kostenerstattung</h1>
							 | 
						||
| 
								 | 
							
										<h1 lang="en">Reimbursement Claims</h1>
							 | 
						||
| 
								 | 
							
										<p  lang="de">Bitte beachte beim Ausfüllen die <a href="https://languwww.wikimedia.de/wiki/Gesch%C3%A4ftsordnung#Reisekostenordnung">Reisekostenordnung</a>.</p>
							 | 
						||
| 
								 | 
							
									</header>
							 | 
						||
| 
								 | 
							
									<div id="printcontainerDE_top" lang="de"><input type="button" value="🖶  Antrag drucken" id="printDE_top" disabled></div>
							 | 
						||
| 
								 | 
							
									<div id="printcontainerEN_top" lang="en"><input type="button" value="🖶 Print" id="printEN_top" disabled></div>
							 | 
						||
| 
								 | 
							
									<main>
							 | 
						||
| 
								 | 
							
									<fieldset>
							 | 
						||
| 
								 | 
							
										<legend lang="de">Bitte fülle die allgemeinen Daten für die Erstattung aus.</legend>
							 | 
						||
| 
								 | 
							
										<legend lang="en">Please fill in the general data for reimbursement.</legend>
							 | 
						||
| 
								 | 
							
										<fieldset class="iblock">
							 | 
						||
| 
								 | 
							
										<legend lang="de">Dein Projekt / Zweck der Reise</legend>
							 | 
						||
| 
								 | 
							
										<legend lang="en">Your project / purpose of travel</legend>
							 | 
						||
| 
								 | 
							
										<input required type="input" size="32" id="projekt" name="Projekt" placeholder="Projekt xy" />
							 | 
						||
| 
								 | 
							
										</fieldset>
							 | 
						||
| 
								 | 
							
										<fieldset class="iblock">
							 | 
						||
| 
								 | 
							
										<legend lang="de">Deine Ansprechperson bei Wikimedia</legend>
							 | 
						||
| 
								 | 
							
										<legend lang="en">Your contact person at Wikimedia</legend>
							 | 
						||
| 
								 | 
							
										<input required type="input" size="32" id="ansprech" name="Ansprechperson" placeholder="John Doe" />
							 | 
						||
| 
								 | 
							
										</fieldset>
							 | 
						||
| 
								 | 
							
										<hr />
							 | 
						||
| 
								 | 
							
										<fieldset class="iblock">
							 | 
						||
| 
								 | 
							
											<legend lang="de">Deine Kontaktdaten</legend>
							 | 
						||
| 
								 | 
							
											<legend lang="en">Contact details</legend>
							 | 
						||
| 
								 | 
							
								<!--		<p>Eine Angabe reicht bereits</p>-->
							 | 
						||
| 
								 | 
							
											<label for="real" lang="de">Dein Realname</label>
							 | 
						||
| 
								 | 
							
											<label for="real" lang="en">Full legal name</label>
							 | 
						||
| 
								 | 
							
											<input required type="input" size="32" id="real" name="Realname" placeholder="Corinna Commonsuser" />
							 | 
						||
| 
								 | 
							
											<label for="email" lang="de">E-Mail-Adresse</label>
							 | 
						||
| 
								 | 
							
											<label for="email" lang="en">Email address</label>
							 | 
						||
| 
								 | 
							
											<input required type="email" size="32" id="email" name="Emailadresse" placeholder="name@example.org" />
							 | 
						||
| 
								 | 
							
											<label for="phone" lang="de">Telefonnummer</label>
							 | 
						||
| 
								 | 
							
											<label for="phone" lang="en">Phone number</label>
							 | 
						||
| 
								 | 
							
											<input required type="tel" size="32" id="phone" name="Telefonnummer" placeholder="0123-456789" />
							 | 
						||
| 
								 | 
							
										</fieldset>
							 | 
						||
| 
								 | 
							
										<fieldset class="iblock" id="bankdetails">
							 | 
						||
| 
								 | 
							
											<legend lang="de">Auszahlungsweg</legend>
							 | 
						||
| 
								 | 
							
											<legend lang="en">Payout method</legend>
							 | 
						||
| 
								 | 
							
								<!--			<span style="white-space: pre;"><input class="screen" type="radio" id="eu" name="bank" value="EU" checked><label class="screen" for="eu" lang="de">EU-Banküberweisung</label><label class="screen" for="eu" lang="en">EU bank transfer</label></span>
							 | 
						||
| 
								 | 
							
											<span style="white-space: pre;"><input class="screen" type="radio" id="noneu" name="bank" value="Non-EU"><label class="screen" for="noneu" lang="en">Non EU bank transfer</label><label class="screen" for="noneu" lang="de">Non-EU-Banküberweisung</label></span>
							 | 
						||
| 
								 | 
							
											<span style="white-space: pre;"><input class="screen" type="radio" id="paypal" name="bank" value="PayPal"><label class="screen" for="paypal">PayPal</label></span>
							 | 
						||
| 
								 | 
							
											<span style="white-space: pre;"><input class="screen" type="radio" id="bar" name="bank" value="Bar"><label class="screen" for="bar" lang="de">Bargeld</label><label class="screen" for="bar" lang="en">Cash</label></span>-->
							 | 
						||
| 
								 | 
							
											<input class="screen" type="radio" id="eu" name="bank" value="EU" checked><label class="screen radio" for="eu" lang="de">EU-Banküberweisung</label><label class="screen radio" for="eu" lang="en">EU bank transfer</label>
							 | 
						||
| 
								 | 
							
											<input class="screen" type="radio" id="noneu" name="bank" value="Non-EU"><label class="screen radio" for="noneu" lang="de">Non-EU-Banküberweisung</label><label class="screen radio" for="noneu" lang="en">Non EU bank transfer</label>
							 | 
						||
| 
								 | 
							
											<input class="screen" type="radio" id="paypal" name="bank" value="PayPal"><label class="screen radio" for="paypal">PayPal</label>
							 | 
						||
| 
								 | 
							
											<input class="screen" type="radio" id="bar" name="bank" value="Bar"><label class="screen radio" for="bar" lang="de">Bargeld</label><label class="screen radio" for="bar" lang="en">Cash</label>
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="owner" lang="de">Kontoinhaber</label><label class="EU nonEU" for="owner" lang="en">Bank account owner</label><input class="EU nonEU" type="input" size="32" id="ownerDe" name="Owner" placeholder="wenn abweichend vom Realnamen" lang="de" /><input class="EU nonEU" type="input" size="32" id="ownerEn" name="Owner" placeholder="if different from full legal name" lang="en" />
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="iban" lang="de">IBAN</label><label class="EU nonEU" for="iban" lang="en">Bank account number</label><input class="EU nonEU" type="input" size="32" id="iban" name="IBAN" placeholder="DE0123…" />
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="bic">BIC / SWIFT</label><input class="EU nonEU" type="input" size="32" id="bic" name="BIC" placeholder="LBMU…" />
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="bank" lang="de">Name der Bank</label><label class="EU nonEU" for="bank" lang="en">Name of bank</label><input class="EU nonEU" type="input" size="32" id="bank" name="Bankname" placeholder="Banky McBankface" />
							 | 
						||
| 
								 | 
							
											<label class="nonEU" for="bankaddress" lang="en">Bank address</label><textarea lang="en" class="nonEU" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Street and house number
							 | 
						||
| 
								 | 
							
								Postal code and city
							 | 
						||
| 
								 | 
							
								Country"></textarea>
							 | 
						||
| 
								 | 
							
											<label class="nonEU" for="address" lang="en">Your address</label><textarea lang="en" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Street and house number
							 | 
						||
| 
								 | 
							
								Postal code and city
							 | 
						||
| 
								 | 
							
								Country"></textarea>
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="comments" lang="en">Further comments</label><textarea lang="en" class="EU nonEU" id="comments" style="resize:both;" cols="32" rows="4" placeholder="e.g. intermediary bank,
							 | 
						||
| 
								 | 
							
								reasons for differing account owner"></textarea>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											<label class="nonEU" for="bankaddress" lang="de">Bankanschrift</label><textarea lang="de" class="nonEU" id="bankaddress" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
							 | 
						||
| 
								 | 
							
								Postleitzahl und Ort
							 | 
						||
| 
								 | 
							
								Land"></textarea>
							 | 
						||
| 
								 | 
							
											<label class="nonEU" for="address" lang="de">Deine Anschrift</label><textarea lang="de" class="nonEU" id="address" style="resize:both;" cols="32" rows="4" placeholder="Straße und Hausnummer
							 | 
						||
| 
								 | 
							
								Postleitzahl und Ort
							 | 
						||
| 
								 | 
							
								Land"></textarea>
							 | 
						||
| 
								 | 
							
											<label class="EU nonEU" for="comments" lang="de">Weitere Anmerkungen</label><textarea lang="de" class="EU nonEU" id="comments" style="resize:both;" cols="32" rows="4" placeholder="z.B. intermdiäre Bank,
							 | 
						||
| 
								 | 
							
								Grund für abweichende Kontoinhaberin"></textarea>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											<label class="paypal" for="accountnumber">PayPal account</label><input class="paypal" type="input" size="32" id="paypal" placeholder="paypal@example.com" />
							 | 
						||
| 
								 | 
							
										</fieldset>
							 | 
						||
| 
								 | 
							
								<!--		<div id="datacontainer"><input type="button" value="💾 Diese Angaben für eine spätere Verwendung auf diesem Rechner sichern (Cookie). / Save these specifications for later use on this computer (cookie)." id="save"></div>-->
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									</fieldset>
							 | 
						||
| 
								 | 
							
									<fieldset id="Aufstellung_alt">
							 | 
						||
| 
								 | 
							
										<legend class="screen" lang="de">Bitte trage deine einzelnen Kostenpositionen ein.</legend>
							 | 
						||
| 
								 | 
							
										<legend class="screen" lang="en">Please enter your cost items.</legend>
							 | 
						||
| 
								 | 
							
										<p class="screen" lang="de">Bitte trage nur eine Ausgabe pro Zeile ein, lege den Originalbeleg dem Antrag bei und kennzeichne den Beleg mit der entsprechenden Zeilennummer.
							 | 
						||
| 
								 | 
							
										Aus der Beschreibung soll zu ersehen sein, ob es sich um Transport, Dienstleistung, Materialien, Verpflegung oder ähnliches handelt.
							 | 
						||
| 
								 | 
							
										
							 | 
						||
| 
								 | 
							
										<p class="screen" lang="en">Please enter only one expense per line, provide original receipt with your claim and tag the receipt with the appropriate line number.
							 | 
						||
| 
								 | 
							
										The description of the expense should refer to the kind of expense, e.g. travel, service, materials, food or similar.</p>
							 | 
						||
| 
								 | 
							
										<table id="Aufstellung">
							 | 
						||
| 
								 | 
							
											<thead><tr id="aufstellungheader" style="font-size:80%;">
							 | 
						||
| 
								 | 
							
												<th id="spalte0">Pos.</th>
							 | 
						||
| 
								 | 
							
												<th id="spalte1"><span lang="de">Beschreibung</span><span lang="en">Description</span></th>
							 | 
						||
| 
								 | 
							
												<th id="spalte2"><span lang="de">Belegdatum</span><span lang="en">Date</span></th>
							 | 
						||
| 
								 | 
							
												<th id="spalte3"><span lang="de">Betrag</span><span lang="en">Sum</span>
							 | 
						||
| 
								 | 
							
												<input list="waehrungen" name="waehrung" id="waehrung" placeholder="EUR, or enter currency code">
							 | 
						||
| 
								 | 
							
												<datalist id="waehrungen">
							 | 
						||
| 
								 | 
							
													<option value="USD">United States Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="EUR" selected="selected">Euro</option>
							 | 
						||
| 
								 | 
							
													<option value="GBP">United Kingdom Pounds</option>
							 | 
						||
| 
								 | 
							
													<option value="DZD">Algeria Dinars</option>
							 | 
						||
| 
								 | 
							
													<option value="ARP">Argentina Pesos</option>
							 | 
						||
| 
								 | 
							
													<option value="AUD">Australia Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="BSD">Bahamas Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="BBD">Barbados Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="BMD">Bermuda Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="BRR">Brazil Real</option>
							 | 
						||
| 
								 | 
							
													<option value="BGL">Bulgaria Lev</option>
							 | 
						||
| 
								 | 
							
													<option value="CAD">Canada Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="CLP">Chile Pesos</option>
							 | 
						||
| 
								 | 
							
													<option value="CNY">China Yuan Renmimbi</option>
							 | 
						||
| 
								 | 
							
													<option value="CSK">Czech Republic Koruna</option>
							 | 
						||
| 
								 | 
							
													<option value="DKK">Denmark Kroner</option>
							 | 
						||
| 
								 | 
							
													<option value="XCD">Eastern Caribbean Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="EGP">Egypt Pounds</option>
							 | 
						||
| 
								 | 
							
													<option value="FJD">Fiji Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="HKD">Hong Kong Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="HUF">Hungary Forint</option>
							 | 
						||
| 
								 | 
							
													<option value="ISK">Iceland Krona</option>
							 | 
						||
| 
								 | 
							
													<option value="INR">India Rupees</option>
							 | 
						||
| 
								 | 
							
													<option value="IDR">Indonesia Rupiah</option>
							 | 
						||
| 
								 | 
							
													<option value="ILS">Israel New Shekels</option>
							 | 
						||
| 
								 | 
							
													<option value="JMD">Jamaica Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="JPY">Japan Yen</option>
							 | 
						||
| 
								 | 
							
													<option value="JOD">Jordan Dinar</option>
							 | 
						||
| 
								 | 
							
													<option value="KRW">Korea (South) Won</option>
							 | 
						||
| 
								 | 
							
													<option value="LBP">Lebanon Pounds</option>
							 | 
						||
| 
								 | 
							
													<option value="MYR">Malaysia Ringgit</option>
							 | 
						||
| 
								 | 
							
													<option value="MXP">Mexico Pesos</option>
							 | 
						||
| 
								 | 
							
													<option value="NZD">New Zealand Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="NOK">Norway Kroner</option>
							 | 
						||
| 
								 | 
							
													<option value="PKR">Pakistan Rupees</option>
							 | 
						||
| 
								 | 
							
													<option value="PHP">Philippines Pesos</option>
							 | 
						||
| 
								 | 
							
													<option value="PLZ">Poland Zloty</option>
							 | 
						||
| 
								 | 
							
													<option value="ROL">Romania Leu</option>
							 | 
						||
| 
								 | 
							
													<option value="RUR">Russia Rubles</option>
							 | 
						||
| 
								 | 
							
													<option value="SAR">Saudi Arabia Riyal</option>
							 | 
						||
| 
								 | 
							
													<option value="SGD">Singapore Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="ZAR">South Africa Rand</option>
							 | 
						||
| 
								 | 
							
													<option value="KRW">South Korea Won</option>
							 | 
						||
| 
								 | 
							
													<option value="SDD">Sudan Dinar</option>
							 | 
						||
| 
								 | 
							
													<option value="SEK">Sweden Krona</option>
							 | 
						||
| 
								 | 
							
													<option value="CHF">Switzerland Francs</option>
							 | 
						||
| 
								 | 
							
													<option value="TWD">Taiwan Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="THB">Thailand Baht</option>
							 | 
						||
| 
								 | 
							
													<option value="TTD">Trinidad and Tobago Dollars</option>
							 | 
						||
| 
								 | 
							
													<option value="TRL">Turkey Lira</option>
							 | 
						||
| 
								 | 
							
													<option value="VEB">Venezuela Bolivar</option>
							 | 
						||
| 
								 | 
							
													<option value="ZMK">Zambia Kwacha</option>
							 | 
						||
| 
								 | 
							
												</datalist>
							 | 
						||
| 
								 | 
							
												</th>
							 | 
						||
| 
								 | 
							
												<th id="spalte4" class="delete"></th>
							 | 
						||
| 
								 | 
							
											</tr></thead>
							 | 
						||
| 
								 | 
							
											<tbody>
							 | 
						||
| 
								 | 
							
											<tr id="Reihe[0]">
							 | 
						||
| 
								 | 
							
												<td id="Position[0]" style="text-align: right;">0</td>
							 | 
						||
| 
								 | 
							
												<td id="Beschreibung[0]"><textarea style="resize:none;" cols="45" rows="1" readonly lang="de">Vorschuss (falls zutreffend)</textarea><textarea style="resize:none;" cols="45" rows="1" readonly lang="en">Advance payment (if applicable)</textarea></td>
							 | 
						||
| 
								 | 
							
												<td id="Belegdatum[0]"><input type="date" style="visibility:hidden;"></td>
							 | 
						||
| 
								 | 
							
												<td id="Betrag[0]" style="text-align:right;"><input required type="number" step="0.01" value="0.00" min="0.00" max="10000.00" id="vorschuss" name="Vorschuss" style="font-size:120%; text-align: right;" /></td>
							 | 
						||
| 
								 | 
							
												<td class="delete" id="delete[0]"></td>
							 | 
						||
| 
								 | 
							
											</tr>
							 | 
						||
| 
								 | 
							
											<tr class="screen" id="more"><td colspan="4"><input type="button" id="addbutton_de" style="width:100%;" value="Ausgabe hinzufügen +" lang="de" /><input type="button" id="addbutton_en" style="width:100%;" value="Add expense +" lang="en" /></td></tr>
							 | 
						||
| 
								 | 
							
											</tbody>
							 | 
						||
| 
								 | 
							
											<tfoot>
							 | 
						||
| 
								 | 
							
											<tr id="Reihe[Summe]">
							 | 
						||
| 
								 | 
							
												<td colspan="3" style="text-align: right;"><span lang="de">Summe</span><span lang="en">Total</span></td>
							 | 
						||
| 
								 | 
							
												<td style="text-align: right;"><span class="geld" id="Summe" style="margin-left: 2em; font-weight:bold; color:black; width:8em;"></span></td>
							 | 
						||
| 
								 | 
							
											</tr>
							 | 
						||
| 
								 | 
							
											</tfoot>
							 | 
						||
| 
								 | 
							
										</table>
							 | 
						||
| 
								 | 
							
									</fieldset>
							 | 
						||
| 
								 | 
							
									<fieldset>
							 | 
						||
| 
								 | 
							
										<legend lang="de">Datum der Antragstellung</legend>
							 | 
						||
| 
								 | 
							
										<legend lang="en">Date of claim</legend>
							 | 
						||
| 
								 | 
							
										<input type="date">
							 | 
						||
| 
								 | 
							
									</fieldset>
							 | 
						||
| 
								 | 
							
									<fieldset>
							 | 
						||
| 
								 | 
							
										<legend lang="de">Pflichtangabe: Hiermit bestätige ich die Vollständig- und Richtigkeit meiner Angaben.</legend>
							 | 
						||
| 
								 | 
							
										<legend lang="en">Mandatory declaration: Herewith I confirm the completeness and correctness of my data.</legend>
							 | 
						||
| 
								 | 
							
										<input type="checkbox" id="check" name="checkbox" onchange="document.getElementById('printDE_bottom').disabled = !this.checked; 
							 | 
						||
| 
								 | 
							
																									document.getElementById('printEN_bottom').disabled = !this.checked;	
							 | 
						||
| 
								 | 
							
																									document.getElementById('printDE_top').disabled = !this.checked;
							 | 
						||
| 
								 | 
							
																									document.getElementById('printEN_top').disabled = !this.checked;">
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									</fieldset>
							 | 
						||
| 
								 | 
							
									<h2 id="faq" class="screen">Frequently asked questions (FAQ)</h2>
							 | 
						||
| 
								 | 
							
									<!--<input class="screen" type="radio" id="en" name="lang" value="en" checked><label class="screen" for="en">English</label>
							 | 
						||
| 
								 | 
							
									<input class="screen" type="radio" id="de" name="lang" value="de"><label class="screen" for="de">Deutsch</label>-->
							 | 
						||
| 
								 | 
							
									<dl lang="en" class="screen">
							 | 
						||
| 
								 | 
							
										<dt>My claims are not in Euro. What now?</dt>
							 | 
						||
| 
								 | 
							
										<dd>When claiming expenses please select in which currency you want your expense reimbursed. Use the
							 | 
						||
| 
								 | 
							
										<a href="https://sdw.ecb.europa.eu/curConverter.do?node=9693519">converter of the European Central Bank</a>.
							 | 
						||
| 
								 | 
							
										Convert per line (not the sum!) using the exchange rate valid at the date of expense. If you don't provide a
							 | 
						||
| 
								 | 
							
										currency, we'll assume you want to get reimbursed using Euro.</dd>
							 | 
						||
| 
								 | 
							
									</dl>
							 | 
						||
| 
								 | 
							
									<dl lang="de" class="screen">
							 | 
						||
| 
								 | 
							
										<dt>Meine Ausgabe sind nicht in Euro. Was soll ich machen?</dt>
							 | 
						||
| 
								 | 
							
										<dd>Wenn du Ausgaben erstattet haben willst, rechne die Ausgaben zeilenweise (nicht nur den Gesamtbetrag!) mit dem
							 | 
						||
| 
								 | 
							
										<a href="https://sdw.ecb.europa.eu/curConverter.do?node=9693519">Währungsumrechner der Europäischen Zentralbank</a>
							 | 
						||
| 
								 | 
							
										in die Währung um, in der du deine Kosten erstattet haben willst. Gibst du keine Währung an, nehmen wir an, dass
							 | 
						||
| 
								 | 
							
										die Erstattung in Euro erfolgen soll.</dd>
							 | 
						||
| 
								 | 
							
									</dl>
							 | 
						||
| 
								 | 
							
									<div style="width: 100%; text-align:right; padding-right: 50px; font-weight:bold; font-size:90%;"></div>
							 | 
						||
| 
								 | 
							
									</main>
							 | 
						||
| 
								 | 
							
									<div id="printcontainerDE_bottom" lang="de"><input type="button" value="🖶  Antrag drucken" id="printDE_bottom" disabled></div>
							 | 
						||
| 
								 | 
							
									<div id="printcontainerEN_bottom" lang="en"><input type="button" value="🖶  Print" id="printEN_bottom" disabled></div>
							 | 
						||
| 
								 | 
							
									<template id="neuerEintrag">
							 | 
						||
| 
								 | 
							
										<tr style="display: none">
							 | 
						||
| 
								 | 
							
											<td style="text-align: right;"></td>
							 | 
						||
| 
								 | 
							
											<td><textarea style="resize:both;" cols="45" rows="2" placeholder="Please enter a description of this expense here."></textarea></td>
							 | 
						||
| 
								 | 
							
											<td><input type="date"></td>
							 | 
						||
| 
								 | 
							
											<td style="text-align:right;"><input type="number" min="0.00" max="10000.00" step="0.01" value="0.00" style="text-align: right;"></td>
							 | 
						||
| 
								 | 
							
											<td class="delete"><button class="delbutton">-</button></td>
							 | 
						||
| 
								 | 
							
										</tr>
							 | 
						||
| 
								 | 
							
									</template>
							 | 
						||
| 
								 | 
							
									<footer>
							 | 
						||
| 
								 | 
							
										<a href="mailto:info@wikimedia.de">Kontakt / contact</a>
							 | 
						||
| 
								 | 
							
										<p>© 2016 by Wikimedia Deutschland e.V.</p>
							 | 
						||
| 
								 | 
							
										<address>Wikimedia Deutschland<br>
							 | 
						||
| 
								 | 
							
								Gesellschaft zur Förderung Freien Wissens e.V.<br>
							 | 
						||
| 
								 | 
							
								Postfach 61 03 49<br>
							 | 
						||
| 
								 | 
							
								10925 Berlin<br><br>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								http://wikimedia.de<br>
							 | 
						||
| 
								 | 
							
								Tel: +49 30/21 91 58 26-0<br>
							 | 
						||
| 
								 | 
							
								Fax: +49 30/21 91 58 26-9<br>
							 | 
						||
| 
								 | 
							
								E-Mail: info@wikimedia.de<br><br>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								</address>
							 | 
						||
| 
								 | 
							
									</footer>
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								</html>
							 |