<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memobility Bestellformular</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.contact-info {
font-size: 14px;
line-height: 1.4;
}
.logo {
font-size: 32px;
font-weight: bold;
color: #2E86AB;
}
.logo .me {
color: #2E86AB;
}
.logo .mobility {
color: #00A8CC;
}
.form-container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #2E86AB;
font-size: 28px;
margin-bottom: 30px;
border-bottom: 3px solid #00A8CC;
padding-bottom: 10px;
}
.section {
margin-bottom: 25px;
}
.section-title {
color: #00A8CC;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.section-number {
background: #00A8CC;
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 14px;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-group {
flex: 1;
}
.form-group.half {
flex: 0.5;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"] {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="time"]:focus {
border-color: #00A8CC;
outline: none;
}
.checkbox-group {
margin-bottom: 15px;
}
.checkbox-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
}
input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #00A8CC;
}
.checkbox-item label {
font-weight: normal;
margin: 0;
cursor: pointer;
}
.signature-section {
display: flex;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.signature-box {
flex: 1;
min-width: 280px;
border: 2px solid #ddd;
border-radius: 4px;
padding: 15px;
text-align: center;
background: #fafafa;
}
.signature-label {
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.signature-pad {
width: 100%;
height: 120px;
border: 1px solid #ccc;
border-radius: 4px;
background: white;
cursor: crosshair;
margin-bottom: 10px;
}
.signature-controls {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 10px;
}
.signature-btn {
background: #00A8CC;
color: white;
border: none;
padding: 6px 12px;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s;
}
.signature-btn:hover {
background: #007a99;
}
.signature-btn.clear {
background: #dc3545;
}
.signature-btn.clear:hover {
background: #c82333;
}
.visa-line {
font-size: 12px;
color: #666;
}
.print-button {
background: #2E86AB;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}
.print-button:hover {
background: #1e5f7a;
}
@media print {
body {
background: white;
margin: 0;
padding: 10px;
}
.header, .form-container {
box-shadow: none;
border: 1px solid #ddd;
}
.print-button {
display: none;
}
}
@media (max-width: 768px) {
.signature-section {
flex-direction: column;
}
.signature-box {
min-width: unset;
}
}
</style>
</head>
<body>
<div class="header">
<div class="contact-info">
<strong>Betriebszeiten:</strong> 06:30 – 19:00 Uhr<br>
<strong>Telefon:</strong> +41 79 949 25 80<br>
<strong>E-Mail:</strong> info@memobility.ch<br>
<strong>Web:</strong> www.memobility.ch
</div>
<div class="logo">
<span class="me">ME</span><span class="mobility">MOBILITY</span>
</div>
</div>
<div class="form-container">
<h1>Bestellformular</h1>
<div class="section">
<div class="section-title">
<div class="section-number">1</div>
Auftraggeber
</div>
<div class="form-row">
<div class="form-group">
<label for="institution">Institution:</label>
<input type="text" id="institution" name="institution">
</div>
<div class="form-group">
<label for="abteilung">Abteilung:</label>
<input type="text" id="abteilung" name="abteilung">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="strasse">Strasse:</label>
<input type="text" id="strasse" name="strasse">
</div>
<div class="form-group">
<label for="telefon">Telefon:</label>
<input type="tel" id="telefon" name="telefon">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="plz_ort">PLZ / Ort:</label>
<input type="text" id="plz_ort" name="plz_ort">
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<div class="section-number">2</div>
Patientenangaben
</div>
<div class="form-row">
<div class="form-group">
<label for="name_vorname">Name, Vorname:</label>
<input type="text" id="name_vorname" name="name_vorname">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="patienten_nummer">Patienten-/Fallnummer:</label>
<input type="text" id="patienten_nummer" name="patienten_nummer">
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<div class="section-number">3</div>
Transportart & Fahrt
</div>
<div class="checkbox-group">
<label><strong>Hilfsmittel (bitte ankreuzen):</strong></label>
<div class="checkbox-row">
<div class="checkbox-item">
<input type="checkbox" id="rollstuhl" name="hilfsmittel" value="rollstuhl">
<label for="rollstuhl">Rollstuhl</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="liegend" name="hilfsmittel" value="liegend">
<label for="liegend">Liegend</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="fussgaenger" name="hilfsmittel" value="fussgaenger">
<label for="fussgaenger">Fussgänger / Rollator</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="reha" name="hilfsmittel" value="reha">
<label for="reha">Reha</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="begleitperson" name="hilfsmittel" value="begleitperson">
<label for="begleitperson">Begleitperson</label>
</div>
</div>
</div>
<div class="checkbox-group">
<label><strong>Fahrtart:</strong></label>
<div class="checkbox-row">
<div class="checkbox-item">
<input type="checkbox" id="einzelfahrt" name="fahrtart" value="einzelfahrt">
<label for="einzelfahrt">Einzelfahrt</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="hin_rueck" name="fahrtart" value="hin_rueck">
<label for="hin_rueck">Hin- und Rückfahrt</label>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<div class="section-number">4</div>
Transportdetails
</div>
<div class="form-row">
<div class="form-group">
<label for="transportdatum">Transportdatum:</label>
<input type="date" id="transportdatum" name="transportdatum">
</div>
<div class="form-group">
<label for="abholzeit">Abholzeit:</label>
<input type="time" id="abholzeit" name="abholzeit">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="fahrziel_strasse">Fahrziel – Strasse:</label>
<input type="text" id="fahrziel_strasse" name="fahrziel_strasse">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="fahrziel_plz_ort">PLZ / Ort:</label>
<input type="text" id="fahrziel_plz_ort" name="fahrziel_plz_ort">
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<div class="section-number">5</div>
Rechnungsadresse (falls abweichend)
</div>
<div class="checkbox-row">
<div class="checkbox-item">
<input type="checkbox" id="rechnung_patient" name="rechnungsadresse" value="patient">
<label for="rechnung_patient">Patient</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="rechnung_klinik" name="rechnungsadresse" value="klinik">
<label for="rechnung_klinik">Klinik</label>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="rechnung_name">Name / Vorname:</label>
<input type="text" id="rechnung_name" name="rechnung_name">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="rechnung_strasse">Strasse:</label>
<input type="text" id="rechnung_strasse" name="rechnung_strasse">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="rechnung_plz_ort">PLZ / Ort:</label>
<input type="text" id="rechnung_plz_ort" name="rechnung_plz_ort">
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<div class="section-number">6</div>
Unterschriften
</div>
<div class="signature-section">
<div class="signature-box">
<div class="signature-label">Fahrer:</div>
<canvas class="signature-pad" id="driver-signature"></canvas>
<div class="signature-controls">
<button type="button" class="signature-btn clear" onclick="clearSignature('driver-signature')">Löschen</button>
</div>
<div class="visa-line">Visum:</div>
</div>
<div class="signature-box">
<div class="signature-label">Empfänger:</div>
<canvas class="signature-pad" id="recipient-signature"></canvas>
<div class="signature-controls">
<button type="button" class="signature-btn clear" onclick="clearSignature('recipient-signature')">Löschen</button>
</div>
<div class="visa-line">Visum:</div>
</div>
</div>
</div>
<button class="print-button" onclick="window.print()">Formular drucken</button>
</div>
<script>
// Signature pad functionality
class SignaturePad {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.isDrawing = false;
this.setupCanvas();
this.setupEventListeners();
}
setupCanvas() {
const rect = this.canvas.getBoundingClientRect();
this.canvas.width = rect.width * 2;
this.canvas.height = rect.height * 2;
this.canvas.style.width = rect.width + 'px';
this.canvas.style.height = rect.height + 'px';
this.ctx.scale(2, 2);
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
this.ctx.strokeStyle = '#000';
this.ctx.lineWidth = 2;
}
setupEventListeners() {
// Mouse events
this.canvas.addEventListener('mousedown', (e) => this.startDrawing(e));
this.canvas.addEventListener('mousemove', (e) => this.draw(e));
this.canvas.addEventListener('mouseup', () => this.stopDrawing());
this.canvas.addEventListener('mouseout', () => this.stopDrawing());
// Touch events
this.canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
this.startDrawing(e.touches[0]);
});
this.canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
this.draw(e.touches[0]);
});
this.canvas.addEventListener('touchend', (e) => {
e.preventDefault();
this.stopDrawing();
});
}
getEventPos(e) {
const rect = this.canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
startDrawing(e) {
this.isDrawing = true;
const pos = this.getEventPos(e);
this.ctx.beginPath();
this.ctx.moveTo(pos.x, pos.y);
}
draw(e) {
if (!this.isDrawing) return;
const pos = this.getEventPos(e);
this.ctx.lineTo(pos.x, pos.y);
this.ctx.stroke();
}
stopDrawing() {
this.isDrawing = false;
}
clear() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
// Initialize signature pads
let driverPad, recipientPad;
function clearSignature(canvasId) {
if (canvasId === 'driver-signature') {
driverPad.clear();
} else if (canvasId === 'recipient-signature') {
recipientPad.clear();
}
}
// Auto-set today's date if transport date is empty
document.addEventListener('DOMContentLoaded', function() {
const today = new Date().toISOString().split('T')[0];
const transportDate = document.getElementById('transportdatum');
if (!transportDate.value) {
transportDate.value = today;
}
// Initialize signature pads
driverPad = new SignaturePad(document.getElementById('driver-signature'));
recipientPad = new SignaturePad(document.getElementById('recipient-signature'));
});
// Make fahrtart checkboxes exclusive (only one can be selected)
const fahrtartCheckboxes = document.querySelectorAll('input[name="fahrtart"]');
fahrtartCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.checked) {
fahrtartCheckboxes.forEach(other => {
if (other !== this) other.checked = false;
});
}
});
});
// Make rechnungsadresse checkboxes exclusive
const rechnungCheckboxes = document.querySelectorAll('input[name="rechnungsadresse"]');
rechnungCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.checked) {
rechnungCheckboxes.forEach(other => {
if (other !== this) other.checked = false;
});
}
});
});
</script>
</body>
</html>