| Server IP : 202.61.199.114 / Your IP : 216.73.217.139 Web Server : nginx/1.22.1 System : Linux de.arni-solutions.de 6.1.0-49-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.174-1 (2026-05-26) x86_64 User : web20 ( 1018) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /proc/3951572/root/tmp/ |
Upload File : |
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Ihre Meinung zählt · Parken am Schiff</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--pas-blue:#0b4677; --pas-blue2:#1a6bb0; --pas-ink:#1e2633; --pas-muted:#7e8896;
--pas-line:#e6eef4; --pas-star:#ffb400; --pas-bg:#eef3f8; --pas-radius:18px;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(160deg,#eef3f8 0%,#e3edf6 100%);min-height:100vh;
font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--pas-ink);
display:flex;align-items:center;justify-content:center;padding:24px 14px;}
.pas-card{width:100%;max-width:560px;background:#fff;border-radius:var(--pas-radius);
box-shadow:0 24px 60px rgba(11,70,119,.16);overflow:hidden}
.pas-head{background:linear-gradient(135deg,var(--pas-blue),var(--pas-blue2));color:#fff;padding:26px 26px 22px;text-align:center}
.pas-head img{height:46px;width:auto;margin-bottom:12px}
.pas-head h1{font-size:20px;font-weight:600;margin:0 0 4px}
.pas-head p{margin:0;opacity:.9;font-size:14px}
.pas-progress{height:5px;background:rgba(255,255,255,.25);border-radius:99px;margin:16px auto 0;max-width:280px;overflow:hidden}
.pas-progress span{display:block;height:100%;background:#fff;border-radius:99px;width:33%;transition:width .35s ease}
.pas-step-count{font-size:12px;opacity:.85;margin-top:8px;letter-spacing:.3px}
.pas-body{padding:26px}
.pas-step{display:none;animation:pasIn .3s ease}
.pas-step.active{display:block}
@keyframes pasIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pas-q{font-size:17px;font-weight:600;margin:0 0 4px}
.pas-q-sub{color:var(--pas-muted);font-size:13.5px;margin:0 0 18px}
/* Sterne */
.pas-stars{display:flex;gap:8px;justify-content:center;margin:8px 0 4px}
.pas-stars.lg{gap:12px}
.pas-star{font-size:34px;line-height:1;color:#d7e1ea;cursor:pointer;transition:transform .1s,color .15s;user-select:none}
.pas-stars.lg .pas-star{font-size:46px}
.pas-star:hover{transform:scale(1.12)}
.pas-star.on{color:var(--pas-star)}
.pas-stars-label{text-align:center;color:var(--pas-muted);font-size:13px;min-height:18px;margin-bottom:6px}
/* Aspekt-Zeilen */
.pas-aspect{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--pas-line)}
.pas-aspect:last-child{border-bottom:0}
.pas-aspect .lab{font-size:14.5px;font-weight:500}
.pas-aspect .pas-stars{margin:0;gap:5px}
.pas-aspect .pas-star{font-size:24px}
/* Empfehlung */
.pas-choice{display:flex;gap:10px;flex-wrap:wrap}
.pas-chip{flex:1 1 0;min-width:120px;border:1.5px solid var(--pas-line);border-radius:12px;padding:14px;text-align:center;
cursor:pointer;font-weight:600;transition:.15s;background:#fff}
.pas-chip:hover{border-color:var(--pas-blue2)}
.pas-chip.sel{border-color:var(--pas-blue);background:#eef5fb;color:var(--pas-blue)}
.pas-chip small{display:block;font-weight:400;color:var(--pas-muted);font-size:12px;margin-top:2px}
textarea.form-control{border-radius:12px;border-color:var(--pas-line);resize:vertical}
textarea.form-control:focus{border-color:var(--pas-blue2);box-shadow:0 0 0 .2rem rgba(26,107,176,.15)}
/* Buttons */
.pas-actions{display:flex;gap:10px;margin-top:24px}
.btn-pas{background:var(--pas-blue);border:0;color:#fff;border-radius:12px;padding:13px 20px;font-weight:600;flex:1;transition:.15s}
.btn-pas:hover{background:var(--pas-blue2);color:#fff}
.btn-pas:disabled{opacity:.5}
.btn-pas-ghost{background:transparent;border:1.5px solid var(--pas-line);color:var(--pas-ink);border-radius:12px;padding:13px 18px;font-weight:600}
.btn-pas-ghost:hover{border-color:var(--pas-blue2);color:var(--pas-blue)}
.btn-google{background:#fff;border:1.5px solid var(--pas-line);color:#1f2937;border-radius:12px;padding:14px 18px;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;text-decoration:none;transition:.15s}
.btn-google:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);border-color:#cdd7e1;color:#1f2937}
.btn-google svg{width:20px;height:20px;flex:none}
/* Ergebnis */
.pas-result{display:none;padding:34px 26px;text-align:center}
.pas-result.active{display:block;animation:pasIn .35s ease}
.pas-emoji{font-size:54px;line-height:1;margin-bottom:8px}
.pas-result h2{font-size:21px;font-weight:600;margin:0 0 8px}
.pas-result p{color:var(--pas-muted);font-size:14.5px;margin:0 auto 20px;max-width:420px}
.pas-foot{text-align:center;color:var(--pas-muted);font-size:11.5px;padding:0 26px 22px}
.pas-foot a{color:var(--pas-muted)}
.pas-req{color:#d23}
</style>
</head>
<body>
<div class="pas-card">
<div class="pas-head">
<img src="https://seaside.pacim.de/assets/images/seaside-logo-white.png" alt="SeaSide Travel Parking" onerror="this.style.display='none'">
<h1>Ihre Meinung zählt</h1>
<p>2 Minuten – wir möchten unseren Service für Sie verbessern.</p>
<div class="pas-progress" id="pasBar"><span></span></div>
<div class="pas-step-count" id="pasCount">Schritt 1 von 3</div>
</div>
<form id="pasForm" class="pas-body" novalidate>
<!-- Schritt 1: Gesamtzufriedenheit -->
<div class="pas-step active" data-step="1">
<p class="pas-q">Wie zufrieden waren Sie insgesamt mit Parken am Schiff? <span class="pas-req">*</span></p>
<p class="pas-q-sub">Von der Buchung bis zur Rückgabe Ihres Fahrzeugs.</p>
<div class="pas-stars lg" data-rating="overall">
<span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span>
</div>
<div class="pas-stars-label" data-label="overall"></div>
<div class="pas-actions">
<button type="button" class="btn-pas" data-next disabled>Weiter</button>
</div>
</div>
<!-- Schritt 2: Detail-Aspekte -->
<div class="pas-step" data-step="2">
<p class="pas-q">Wie bewerten Sie diese Punkte?</p>
<p class="pas-q-sub">Tippen Sie pro Zeile auf die Sterne.</p>
<div class="pas-aspect"><span class="lab">Buchung & Reservierung</span>
<div class="pas-stars" data-rating="booking"><span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span></div></div>
<div class="pas-aspect"><span class="lab">Stellplatz & Sicherheit</span>
<div class="pas-stars" data-rating="parking"><span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span></div></div>
<div class="pas-aspect"><span class="lab">Shuttle / Übergabe am Schiff</span>
<div class="pas-stars" data-rating="service"><span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span></div></div>
<div class="pas-aspect"><span class="lab">Freundlichkeit des Teams</span>
<div class="pas-stars" data-rating="staff"><span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span></div></div>
<div class="pas-aspect"><span class="lab">Preis-Leistungs-Verhältnis</span>
<div class="pas-stars" data-rating="price"><span class="pas-star" data-v="1">★</span><span class="pas-star" data-v="2">★</span><span class="pas-star" data-v="3">★</span><span class="pas-star" data-v="4">★</span><span class="pas-star" data-v="5">★</span></div></div>
<div class="pas-actions">
<button type="button" class="btn-pas-ghost" data-prev>Zurück</button>
<button type="button" class="btn-pas" data-next>Weiter</button>
</div>
</div>
<!-- Schritt 3: Empfehlung + Kommentar -->
<div class="pas-step" data-step="3">
<p class="pas-q">Würden Sie uns weiterempfehlen? <span class="pas-req">*</span></p>
<p class="pas-q-sub">Ihre Empfehlung hilft anderen Reisenden.</p>
<div class="pas-choice" data-rating="recommend">
<div class="pas-chip" data-v="1">👍 Ja, gerne<small>Würde wieder buchen</small></div>
<div class="pas-chip" data-v="0">🤔 Eher nicht<small>Da geht noch was</small></div>
</div>
<div class="mt-3">
<label class="pas-q-sub d-block mb-1" for="pasComment">Möchten Sie uns noch etwas mitteilen? <span class="text-muted">(optional)</span></label>
<textarea class="form-control" id="pasComment" rows="3" maxlength="600" placeholder="Lob, Anregung oder Kritik …"></textarea>
</div>
<div class="pas-actions">
<button type="button" class="btn-pas-ghost" data-prev>Zurück</button>
<button type="submit" class="btn-pas" id="pasSubmit">Absenden</button>
</div>
</div>
</form>
<!-- Ergebnis: gut bewertet -> Google-CTA -->
<div class="pas-result" id="pasGood">
<div class="pas-emoji">🙏</div>
<h2>Vielen Dank für Ihre Bewertung!</h2>
<p>Es freut uns sehr, dass Sie zufrieden waren. Wenn Sie uns unterstützen möchten: Eine kurze Google-Bewertung hilft uns enorm und ist in 30 Sekunden erledigt.</p>
<a class="btn-google" id="pasGoogle" href="#" target="_blank" rel="noopener">
<svg viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.4 29.2 35 24 35c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 5 29.5 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21 21-9.4 21-21c0-1.2-.1-2.3-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 7 29.8 5 24 5 16 5 9.1 9.5 6.3 14.7z"/><path fill="#4CAF50" d="M24 45c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 36 26.7 37 24 37c-5.2 0-9.6-2.6-11.3-7l-6.5 5C9.1 40.5 16 45 24 45z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.4-2.4 4.4-4.5 5.6l6.2 5.2C40.9 36.5 45 31 45 24c0-1.2-.1-2.3-.4-3.5z"/></svg>
Jetzt bei Google bewerten
</a>
<div class="mt-3"><button type="button" class="btn-pas-ghost" onclick="window.close()">Schließen</button></div>
</div>
<!-- Ergebnis: Verbesserungspotenzial -> internes Danke -->
<div class="pas-result" id="pasImprove">
<div class="pas-emoji">💙</div>
<h2>Danke für Ihr ehrliches Feedback!</h2>
<p>Es tut uns leid, dass nicht alles rund lief. Ihr Feedback geht direkt an unser Team – wir nehmen es ernst und arbeiten daran, beim nächsten Mal zu überzeugen.</p>
<p class="text-muted" style="font-size:13px">Bei einem konkreten Anliegen erreichen Sie uns unter <a href="mailto:info@parken-am-schiff.de">info@parken-am-schiff.de</a>.</p>
<div><button type="button" class="btn-pas-ghost" onclick="window.close()">Schließen</button></div>
</div>
<div class="pas-foot">
SeaSide Travel GmbH & Co. Immobilien KG · Parken am Schiff · Warnemünde<br>
Ihre Angaben werden vertraulich behandelt. <span style="opacity:.7">(Demo-Fragebogen)</span>
</div>
</div>
<script>
(function(){
var GOOGLE_URL = "https:\/\/search.google.com\/local\/writereview?placeid=DEINE_GOOGLE_PLACE_ID";
var GOOGLE_FALLBACK = "https:\/\/www.google.com\/maps\/search\/?api=1&query=Parken%20am%20Schiff%20Warnem%C3%BCnde";
var data = { overall:0, booking:0, parking:0, service:0, staff:0, price:0, recommend:null, comment:'' };
var LABELS = ['', 'Sehr unzufrieden', 'Unzufrieden', 'Geht so', 'Zufrieden', 'Begeistert'];
var steps = Array.prototype.slice.call(document.querySelectorAll('.pas-step'));
var cur = 0;
function paint(group){
document.querySelectorAll('.pas-stars[data-rating="'+group+'"] .pas-star').forEach(function(s){
s.classList.toggle('on', parseInt(s.dataset.v,10) <= data[group]);
});
var lab = document.querySelector('[data-label="'+group+'"]');
if (lab) lab.textContent = data[group] ? LABELS[data[group]] : '';
}
// Sterne
document.querySelectorAll('.pas-stars').forEach(function(box){
var group = box.dataset.rating;
box.querySelectorAll('.pas-star').forEach(function(star){
star.addEventListener('click', function(){ data[group] = parseInt(star.dataset.v,10); paint(group); refreshNav(); });
star.addEventListener('mouseenter', function(){
var v = parseInt(star.dataset.v,10);
box.querySelectorAll('.pas-star').forEach(function(s){ s.classList.toggle('on', parseInt(s.dataset.v,10) <= v); });
});
});
box.addEventListener('mouseleave', function(){ paint(group); });
});
// Empfehlung
document.querySelectorAll('.pas-choice .pas-chip').forEach(function(chip){
chip.addEventListener('click', function(){
document.querySelectorAll('.pas-choice .pas-chip').forEach(function(c){ c.classList.remove('sel'); });
chip.classList.add('sel'); data.recommend = parseInt(chip.dataset.v,10); refreshNav();
});
});
function showStep(i){
cur = i;
steps.forEach(function(s,idx){ s.classList.toggle('active', idx===i); });
document.querySelector('#pasBar span').style.width = Math.round(((i+1)/steps.length)*100)+'%';
document.getElementById('pasCount').textContent = 'Schritt '+(i+1)+' von '+steps.length;
refreshNav();
document.querySelector('.pas-card').scrollIntoView({behavior:'smooth', block:'start'});
}
function refreshNav(){
var s = steps[cur];
var nextBtn = s.querySelector('[data-next]');
if (cur===0 && nextBtn) nextBtn.disabled = !(data.overall>0); // Gesamtbewertung Pflicht
var submit = document.getElementById('pasSubmit');
if (cur===2 && submit) submit.disabled = (data.recommend===null); // Empfehlung Pflicht
}
document.querySelectorAll('[data-next]').forEach(function(b){ b.addEventListener('click', function(){ if(cur<steps.length-1) showStep(cur+1); }); });
document.querySelectorAll('[data-prev]').forEach(function(b){ b.addEventListener('click', function(){ if(cur>0) showStep(cur-1); }); });
document.getElementById('pasForm').addEventListener('submit', function(e){
e.preventDefault();
if (data.recommend===null || data.overall===0) return;
data.comment = document.getElementById('pasComment').value.trim();
// (Dummy: keine Speicherung) – Review-Gate
document.getElementById('pasForm').style.display='none';
document.querySelector('.pas-progress').parentNode.querySelector('.pas-step-count').style.display='none';
document.querySelector('#pasBar span').style.width='100%';
var good = (data.overall>=4 && data.recommend===1);
if (good){
document.getElementById('pasGoogle').href = (GOOGLE_URL.indexOf('DEINE_GOOGLE_PLACE_ID')>=0) ? GOOGLE_FALLBACK : GOOGLE_URL;
document.getElementById('pasGood').classList.add('active');
} else {
document.getElementById('pasImprove').classList.add('active');
}
});
showStep(0);
})();
</script>
</body>
</html>