Browse Source

Initial commit

master
Franzi 3 years ago
commit
327b49e976
  1. 1
      googled73cfb75a2144c8b.html
  2. BIN
      img/background.jpg
  3. BIN
      img/facebook.png
  4. BIN
      img/goldwell-farbe.png
  5. BIN
      img/goldwell-pflege.png
  6. BIN
      img/karte-marker.png
  7. BIN
      img/katrin-pruefung.png
  8. BIN
      img/leute-annka-thumb.jpg
  9. BIN
      img/leute-annka.jpg
  10. BIN
      img/leute-foehn-annette-thumb.jpg
  11. BIN
      img/leute-foehn-annette.jpg
  12. BIN
      img/leute-warte-thumb.jpg
  13. BIN
      img/leute-warte.jpg
  14. BIN
      img/leute-wasch-thumb.jpg
  15. BIN
      img/leute-wasch.jpg
  16. BIN
      img/salon-graustufen.png
  17. BIN
      img/salon-hintergrund.jpg
  18. BIN
      img/salon-katrin-logo-200px.png
  19. BIN
      img/salon-katrin-logo-klein.png
  20. BIN
      img/salon-katrin-logo.png
  21. BIN
      img/salon-vorne-seite-thumb.jpg
  22. BIN
      img/salon-vorne-seite.jpg
  23. BIN
      img/salon-vorne-thumb.jpg
  24. BIN
      img/salon-vorne-warte-thumb.jpg
  25. BIN
      img/salon-vorne-warte.jpg
  26. BIN
      img/salon-vorne.jpg
  27. BIN
      img/theke-thumb.jpg
  28. BIN
      img/theke.jpg
  29. BIN
      img/thumbs-up.png
  30. BIN
      img/wasch-thumb.jpg
  31. BIN
      img/wasch.jpg
  32. 147
      index.html
  33. BIN
      preisliste.pdf
  34. 4
      static/jquery.js
  35. 369
      static/screen.css
  36. 85
      static/scripts.js
  37. 1
      static/touchSwipe.js
  38. 372
      static/v2.css
  39. 120
      v1.html
  40. 382
      v2.css

1
googled73cfb75a2144c8b.html

@ -0,0 +1 @@
google-site-verification: googled73cfb75a2144c8b.html

BIN
img/background.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

BIN
img/facebook.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/goldwell-farbe.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/goldwell-pflege.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
img/karte-marker.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

BIN
img/katrin-pruefung.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

BIN
img/leute-annka-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
img/leute-annka.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

BIN
img/leute-foehn-annette-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
img/leute-foehn-annette.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

BIN
img/leute-warte-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
img/leute-warte.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

BIN
img/leute-wasch-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
img/leute-wasch.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
img/salon-graustufen.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
img/salon-hintergrund.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 KiB

BIN
img/salon-katrin-logo-200px.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/salon-katrin-logo-klein.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
img/salon-katrin-logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/salon-vorne-seite-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/salon-vorne-seite.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
img/salon-vorne-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
img/salon-vorne-warte-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/salon-vorne-warte.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

BIN
img/salon-vorne.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

BIN
img/theke-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/theke.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

BIN
img/thumbs-up.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/wasch-thumb.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/wasch.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

147
index.html

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<title>Salon Katrin in Pirmasens</title>
<link href="static/v2.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="static/jquery.js"></script>
<script type="text/javascript" src="static/scripts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Salon Katrin</h1>
<nav>
<div id="nav_wrapper">
<ul id="nav">
<li data-id="home">Home</li>
<li data-id="leistungen">Leistungen und Preise</li>
<li data-id="produkte">Produkte</li>
<li data-id="inhaberin">Inhaberin</li>
<li data-id="salon">Der Salon</li>
<li data-id="kontakt">Kontakt / Anfahrt</li>
<li><a id="facebook" href="https://www.facebook.com/Salon-Katrin-1469928639940183/">Finden Sie<br><span style="font-weight: bolder;">Salon Katrin</span><br>auf Facebook</a></li>
</ul>
</div>
</nav>
<div class="main" id="home">
<h2>Herzlich willkommen im Salon Katrin,<br>Ihrem Friseur am Medicenter!</h2>
<p>Ich freue mich, Sie in meinem kleinen, Familiären und mit viel Liebe gestalteten Friseursalon begrüßen zu dürfen. Gerne lade ich Sie ein, den Alltag für kurze Zeit zu vergessen und zu entspannen.</p>
<p>Möchten Sie ihr Aussehen verändern, Ihr Styling auffrischen oder einfach nur zum Friseur gehen?<br>Dann sind Sie bei mir genau richtig!<br>Ich biete Ihnen von der klassischen Frisur bis zur ausgefallenen Farb- und Styling-Idee jede Friseurdienstleistung an.</p>
<p>Lassen Sie sich von mir persönlich beraten, vereinbaren Sie am besten gleich Ihren Termin!<br><br><a href="tel:+49633144509">06331 – 44509</a></p>
<p>Ich freue mich auf Sie!</p>
</div>
<div class="main" id="leistungen">
<h2>Leistungen & Preise</h2>
<p>Damen, Herren und Kinder sind bei uns herzlich willkommen!</p>
<p>Klassische Angebote wie zum Beispiel Haarschnitt, Farbe, Dauerwelle oder ähnliches bis hin zur kompletten Typveränderung. Gerne berate ich Sie persönlich mit meiner fachlichen Kompetenz.</p>
<p><a href="/preisliste.pdf">Eine detaillierte Preisliste können sie hier herunterladen.</a></p>
</div>
<div class="main" id="produkte">
<h2>Produkte</h2>
<p>Um Ihre Frisur optimal zu unterstützen, biete ich Ihnen ein individuelles Pflege- und Stylingprogramm direkt im Salon sowie zum Mitnehmen nach Hause.</p>
<p>Ich arbeite mit Produkten der Firmen <em>ESLABONDEXX<sup>&reg;</sup></em> und <em>GOLDWELL<sup>&reg;</sup></em>.</p>
<div id="img">
<img src="img/goldwell-pflege.png" alt="Pflegeprodukte der Firma Goldwell">
<img src="img/goldwell-farbe.png" alt="Farbe und Tönung der Firma Goldwell">
</div>
<p>Pflege im Salon und Zuhause sowie Farbe und Tönung der Firma <em>GOLDWELL<sup>&reg;</sup></em></p>
<div id="eslabondexx">
<h3>ESLABONDEXX</h3>
<p><em>ESLABONDEXX<sup>&reg;</sup></em> setzt gebrochenem und beschädigtem Haar ein Ende!</p>
<p><em>ESLABONDEXX<sup>&reg;</sup></em> macht das Haar stärker, flexibler und bruchbeständiger, aber auch seidiger und weicher. Das Haar wird während der chemischen Behandlung geschützt und repariert.</p>
</div>
</div>
<div class="main" id="inhaberin">
<h2>Inhaberin</h2>
<figure>
<img src="img/katrin-pruefung.png" alt="Katrin Kunsmann zeigt ihren Meisterbrief vor einem Transparent von 'Das Handwerk'">
<figcaption>Katrin Kunsmann</figcaption>
</figure>
<dl>
<dt>Qualifikationen</dt>
<dd>Friseurmeisterin (Meisterschule für Handwerker Kaiserslautern)</dd>
<dd>Diplom für Painting / Stähnentechniken</dd>
</dl>
<div style="clear:both;">&nbsp;</div>
</div>
<div class="main" id="salon">
<h2>Der Salon</h2>
<ul>
<li><a href="img/leute-annka.jpg" class="image-lightbox leute-annka">Die Inhaberin des Salons beim Schneiden</a></li>
<li><a href="img/leute-foehn-annette.jpg" class="image-lightbox leute-foehn-annette">Beim Föhnen</a></li>
<li><a href="img/leute-warte.jpg" class="image-lightbox leute-warte">Wartende Kunden</a></li>
<li><a href="img/leute-wasch.jpg" class="image-lightbox leute-wasch">Die Haare eines Kunden werden gewaschen</a></li>
<li><a href="img/salon-vorne.jpg" class="image-lightbox salon-vorne">Bedienplätze im vorderen Salonbereich</a></li>
<li><a href="img/salon-vorne-seite.jpg" class="image-lightbox salon-vorne-seite">Bedienplätze im vorderen Salonbereich</a></li>
<li><a href="img/salon-vorne-warte.jpg" class="image-lightbox salon-vorne-warte">Wartebereich</a></li>
<li><a href="img/theke.jpg" class="image-lightbox theke">Die neu gestaltete Theke mit integrierter Kaffeebar, daneben das Produktregal</a></li>
<li><a href="img/wasch.jpg" class="image-lightbox wasch">Waschbecken und Arbeitsplatte</a></li>
</ul>
<div style="clear:both;">&nbsp;</div>
</div>
<div class="main" id="kontakt">
<h2>Kontakt</h2>
<object type="text/html" data="http://www.openstreetmap.org/export/embed.html?bbox=7.60151982307434%2C49.20201598196094%2C7.613493204116821%2C49.20542981046809&amp;layer=mapnik&amp;marker=49.203722925674185%2C7.607506513595581"></object>
<h3 id="tmg">Angaben gemäß § 5 TMG</h3>
<p>Katrin Kunsmann<br>Salon Katrin<br>Herzogstraße 5<br>66953 Pirmasens</p>
<dl>
<dt>Telefon</dt>
<dd><a href="tel:+49633144509">06331 44509</a></dd>
<dt>E-Mail</dt>
<dd><a href="mailto:info@salonkatrin.de">info@salonkatrin.de</a></dd>
</dl>
<p>Ich bitte um Terminvereinbarung!</p>
<p>Zahlreiche Parkplätze finden Sie auf dem ca. 3 Gehminuten entfernten Messegelände.</p>
<p>Mit dem Bus erreichen Sie meinen Salon mit der Linie 206 zum Dr.&nbsp;Robert-Schelp-Platz, jeweils zur Minute 5 und 35 ab Exerzierplatz, oder Sie gehen die wenigen Schritte ab Exerzierplatz zu Fuß.</p>
<h3>Öffnungszeiten</h3>
<dl>
<dt>Montag</dt>
<dd>Geschlossen</dd>
<dt>Dienstag bis Freitag</dt>
<dd>09:00 bis 12:00 Uhr</dd>
<dd>13:00 bis 18:00 Uhr
<dt>Samstag</dt>
<dd>08:00 bis 13:00 Uhr</dd>
</dl>
<div style="clear:both;">&nbsp;</div>
</div>
<div class="main" id="rechtliches">
<h2>Datenschutz / Rechtliches</h2>
<p>Im Interesse der Goldwell GmbH wird ausdrücklich darauf hingewiesen, dass der Name Goldwell, die Produktbezeichnungen, Logos und Produktabbildungen eingetragene Marken der <span>Goldwell GmbH</span> sind.</p>
<p>Im Interesse der HSA S.p.A. wird ausdrücklich darauf hingewiesen, dass der Name ESLABONDEXX, die Produktbezeichnungen, Logos und Produktabbildungen eingetragene Marken der <span>HSA S.p.A., Via U Foscolo 27, Bisuschio Varese (Italien)</span> sind.</p>
<h3>Datenschutzerklärung</h3>
<ol>
<li>
<h4>Erhebung und Verarbeitung von http-Protokolldaten</h4>
<p>Bei Besuch meiner Website und bei jedem Abruf einer Datei sammelt der Webserver über diese Vorgänge Protokollinformationen (z.B. Browsertyp, Datum und Uhrzeit des Abrufs). Dies sind keine personenbezogenen Daten. Es ist mir also nicht möglich, die erfassten Daten einer bestimmten natürlichen Person zuzuordnen.</p>
<p>Sämtliche dieser Angaben werden von mir ausschließlich zu statistischen Zwecken ausgewertet. Eine Weitergabe an Dritte erfolgt nicht. Eine Verknüpfung dieser Daten mit anderen Daten erfolgt durch mich nicht.</p>
</li>
<li>
<h4>Datenschutz</h4>
<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
<p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
</li>
<li>
<h4>Auskunftsrecht</h4>
<p>Sie haben das Recht jederzeit Auskunft über die zu Ihrer Person gespeicherten Daten zu erhalten, einschließlich Herkunft und Empfänger Ihrer Daten sowie den Zweck der Datenverarbeitung. Ihre Anfrage richten Sie bitte schriftlich oder per E-Mail an die oben genannten Adressen.</p>
<!--p>Diese Datenschutzerklärung gilt nur für Inhalte auf unseren Servern und umfasst nicht die auf unserer Seite verlinkten Webseiten.</p-->
</li>
</ol>
</div>
<div id="lightbox">
<img src="" alt="">
<p class="helptext">Benutzen Sie die Pfeiltasten, um die Bilder zu wechseln.<br>Klicken auf das Bild oder drücken der ESC-Taste blendet das Bild wieder aus.</p>
</div>
<div style="display:none;">
<a href="https://plus.google.com/107632517822882746074" rel="publisher">Google+</a>
</div>
</body>
</html>

BIN
preisliste.pdf

Binary file not shown.

4
static/jquery.js

File diff suppressed because one or more lines are too long

369
static/screen.css

@ -0,0 +1,369 @@
*{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px 0px 300px 0px;
line-height:1.2em;
font-family:"Helvetica neue", Arial, sans-serif;
background-color:#420909;
background-attachment:fixed;
background-size:cover;
background-position:center center;
color:white;
}
h1{
text-indent:-999em;
height:188px;
width:500px;
margin:20px auto 10px auto;
padding:20px;
background-image:url('/img/salon-katrin-logo.png');
background-repeat:no-repeat;
background-position:center center;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.7);
border-radius:188px;
}
h2, h3{
margin:15px 0px;
}
nav{
height:40px;
margin:0px;
padding:0px;
}
a:link, a:visited{
color:white;
text-decoration:none;
}
a:hover, a:active, a:focus{
text-decoration:underline;
}
abbr{
cursor:help;
border-bottom:1px dotted #999999;
}
p{
margin:15px 0px;
}
ol{
margin:15px 0px 0px 0px;
padding:0px 0px 0px 30px;
}
#nav_wrapper{
padding:10px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#nav_wrapper.sticky{
position:fixed;
top:0px;
left:0px;
right:0px;
background-repeat:no-repeat;
background-position:25px center;
background-color:#000000;
border-bottom:1px solid #666666;
}
@media (min-width: 1300px) {
#nav_wrapper.sticky{
background-image:url('/img/salon-katrin-logo-klein.png');
}
}
#nav{
list-style:none;
margin:0px auto;
padding:0px;
width:920px;
}
#nav li{
display:inline-block;
width:196px;
margin:5px;
padding:9px;
border:1px solid #FFFFFF;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5);
text-align:center;
border-radius:20px;
height:20px;
}
#nav li:hover{
border:1px solid #FF0000;
}
#offen{
position:fixed;
bottom:10px;
right:10px;
background-color:#420909;
border-radius:10px;
padding:10px;
width:300px;
border:1px solid #666666;
}
@media (max-width: 1000px) {
#offen{
position:relative;
width:900px;
margin:20px auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.7);
box-shadow:5px 5px 5px 0px rgba(0,0,0,0.4);
border:none;
border-bottom-left-radius:0px;
border-top-right-radius:0px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
right:0px;
bottom:0px;
}
}
#offen h2{
font-size:16px;
margin:0px;
padding:0px;
text-align:center;
}
#offen dl{
list-style:none;
margin:0px;
padding:0px;
font-size:14px;
}
#offen dt{
display:block;
width:140px;
text-align:right;
float:left;
}
#offen dt:after{
content:":";
}
#offen dd{
margin-left:150px;
}
#offen dd:after{
clear:left;
display:block;
content:" ";
}
#offen p{
font-weight:bolder;
margin:5px;
padding:0px;
text-align:center;
}
#salon ul{
list-style:none;
margin:0px auto;
padding:0px;
width:861px;
}
#salon ul:after{
clear:both;
display:block;
content:" ";
}
#salon li{
float:left;
width:267px;
height:200px;
margin:10px;
padding:0px;
}
#salon li a{
display:block;
width:257px;
height:190px;
margin:0px;
padding:5px;
border-radius:20px;
text-indent:-999em;
border:1px solid #FFFFFF;
outline:none !important;
}
.selected{
border:1px solid #000000 !important;
}
#salon .leute-annka{
background-image:url('/img/leute-annka-thumb.jpg');
}
#salon .leute-foehn-annette{
background-image:url('/img/leute-foehn-annette-thumb.jpg');
}
#salon .leute-warte{
background-image:url('/img/leute-warte-thumb.jpg');
}
#salon .leute-wasch{
background-image:url('/img/leute-wasch-thumb.jpg');
}
#salon .salon-vorne{
background-image:url('/img/salon-vorne-thumb.jpg');
}
#salon .salon-vorne-seite{
background-image:url('/img/salon-vorne-seite-thumb.jpg');
}
#salon .salon-vorne-warte{
background-image:url('/img/salon-vorne-warte-thumb.jpg');
}
#salon .theke{
background-image:url('/img/theke-thumb.jpg');
}
#salon .wasch{
background-image:url('/img/wasch-thumb.jpg');
}
#lightbox{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgb(100,100,100);
background-color:rgba(0,0,0,0.7);
display:none;
color:white;
text-align:center;
}
#lightbox img{
background-color:rgb(0,0,0);
padding:0px 10px 10px 10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border:1px solid #999999;
border-top:none;
}
#lightbox p{
padding:0px;
margin:5px 0px 0px 0px;
}
#lightbox p.helptext{
color:#CCCCCC;
font-size:12px;
line-height:1em;
}
#home{
margin-top:20px;
}
#kontakt object{
float:right;
width:400px;
height:300px;
}
#kontakt p{
margin-right:420px;
}
#imp_teil1{
width:440px;
float:left;
}
#imp_teil2{
width:440px;
float:right;
}
.main{
width:900px;
margin:50px auto 150px auto;
padding:10px;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.7);
box-shadow:5px 5px 5px 0px rgba(0,0,0,0.4);
border-top-left-radius:20px;
border-bottom-right-radius:20px;
}
.main dl{
list-style:none;
margin:0px;
padding:0px;
font-size:14px;
}
.main dt{
display:block;
width:240px;
text-align:right;
float:left;
font-weight:bolder;
}
.main dt:after{
content:":";
}
.main dd{
margin-left:250px;
}
.main dd:after{
clear:left;
display:block;
content:" ";
}
.main a:link, .main a:visited{
color:white;
text-decoration:none;
border-bottom:1px dotted #FFFFFF;
}
.main a:hover, .main a:active, .main a:focus{
border-bottom:1px solid #FFFFFF;
}
@media (orientation: landscape) {
body{
background-image:url('/img/salon-hintergrund.jpg');
}
}

85
static/scripts.js

@ -0,0 +1,85 @@
var numImgs = $('#salon li').length;
var prevImages = $('#salon li').prevAll().length;
var thisImage;
var imageClicked;
var nextImage;
var nextImage;
$(function() {
var sticky_navigation_offset_top = $('#home').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('#nav_wrapper').addClass('sticky');
} else {
$('#nav_wrapper').removeClass('sticky');
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
$('#nav li').click(function() {
id = $(this).data('id');
offset = ($('#'+id).offset().top-100);
if (offset < 300) {
offset = 0;
}
$('html,body').animate({scrollTop: offset}, 1000);
document.location.hash = id;
});
if(window.location.hash != ''){
id = window.location.hash.substring(1);
offset = ($('#'+id).offset().top-100);
if (offset < 300) {
offset = 0;
}
$('html,body').animate({scrollTop: offset}, 'slow');
}
$('#lightbox img').click(function(){
$('#lightbox').fadeOut(500);
$('.image-lightbox').removeClass('selected');
});
$('.image-lightbox').click(function(e){
e.preventDefault();
$('.image-lightbox').removeClass('selected');
$(this).addClass('selected');
$('#lightbox img').attr('src', $(this).attr('href'));
$('#lightbox').fadeIn(500);
});
$(document).keydown(function (event) {
if ($('.selected').length) {
if (event.which == 39) {
$('.image-lightbox.selected')
.parents('li')
.next('li')
.find('.image-lightbox')
.trigger('click');
} else if (event.which == 37) {
$('.image-lightbox.selected')
.parents('li')
.prev('li')
.find('.image-lightbox')
.trigger('click');
} else if (event.which == 27) {
$('#lightbox img').trigger('click');
}
}
});
});

1
static/touchSwipe.js

File diff suppressed because one or more lines are too long

372
static/v2.css

@ -0,0 +1,372 @@
*{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px 0px 300px 0px;
line-height:20px;
font-family:'Helvetica Neue', Helvetica, sans-serif;
background-color:#CCCCCC;
background-attachment:fixed;
background-size:cover;
background-position:center center;
color:black;
font-size: 16px;
}
h1{
text-indent:-999em;
height:75px;
width:200px;
margin:20px auto 10px auto;
padding:20px;
background-image:url('/img/salon-katrin-logo-200px.png');
background-repeat:no-repeat;
background-position:center center;
border-radius:188px;
}
h2, h3{
margin:15px 0px;
font-size: 24px;
line-height: 30px;
}
nav{
margin:0px;
padding:0px;
}
figure{
display: block;
}
figure img{
display: block;
}
figcaption{
display: block;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 14px;
}
a:link, a:visited{
color:white;
text-decoration:none;
}
a:hover, a:active, a:focus{
text-decoration:underline;
}
abbr{
cursor:help;
border-bottom:1px dotted #999999;
}
p{
margin:15px 0px;
line-height: 20px;
}
ol{
margin:15px 0px 0px 0px;
padding:0px 0px 0px 30px;
}
img{
vertical-align: middle;
}
#nav{
list-style:none;
margin: 0 20px 50px 20px;
padding:0px;
}
#nav li{
display:block;
margin:5px 0;
padding: 10px 0 10px 15px;
color: #420909;
cursor: pointer;
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.7);
}
#nav li:hover{
border-left: 10px solid #420909;
padding-left: 5px;
}
#facebook:link, #facebook:visited{
color: #420909;
background-image: url('/img/facebook.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 65px;
display: block;
}
#facebook:hover, #facebook:active, #facebook:focus{
text-decoration: none;
}
#home a{
font-weight: bolder;
}
#salon ul{
list-style:none;
margin:0px auto;
padding:0px;
width: 287px;
}
#salon ul:after{
clear:both;
display:block;
content:" ";
}
#salon li{
float:left;
width:267px;
height:200px;
margin:10px;
padding:0px;
}
#salon li a{
display:block;
width:257px;
height:190px;
margin:0px;
padding:5px;
border-radius:20px;
text-indent:-999em;
border:1px solid black;
outline:none !important;
}
.selected{
border:1px solid #FFFFFF !important;
}
#salon .leute-annka{
background-image:url('/img/leute-annka-thumb.jpg');
}
#salon .leute-foehn-annette{
background-image:url('/img/leute-foehn-annette-thumb.jpg');
}
#salon .leute-warte{
background-image:url('/img/leute-warte-thumb.jpg');
}
#salon .leute-wasch{
background-image:url('/img/leute-wasch-thumb.jpg');
}
#salon .salon-vorne{
background-image:url('/img/salon-vorne-thumb.jpg');
}
#salon .salon-vorne-seite{
background-image:url('/img/salon-vorne-seite-thumb.jpg');
}
#salon .salon-vorne-warte{
background-image:url('/img/salon-vorne-warte-thumb.jpg');
}
#salon .theke{
background-image:url('/img/theke-thumb.jpg');
}
#salon .wasch{
background-image:url('/img/wasch-thumb.jpg');
}
#lightbox{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgb(100,100,100);
background-color:rgba(0,0,0,0.7);
display:none;
color:white;
text-align:center;
overflow: auto;
}
#lightbox img{
background-color:rgb(0,0,0);
padding:0px 10px 10px 10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border:1px solid #999999;
border-top:none;
}
#lightbox p{
padding:0px;
margin:5px 0px 0px 0px;
}
#lightbox p.helptext{
color:#CCCCCC;
font-size:12px;
line-height:1em;
}
#kontakt object{
width: 100%;
}
#tmg{
font-size: 10px;
font-weight: normal;
margin:15px 0;
padding: 0px;
line-height: 10px;
}
#produkte div{
text-align: center;
}
.main{
padding:10px;
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.7);
box-shadow:5px 5px 5px 0px rgba(255,255,255,0.4);
border-top-left-radius:20px;
border-bottom-right-radius:20px;
margin:0px 20px 50px 20px;
}
.main dl{
list-style:none;
margin:0px;
padding:0px;
}
.main dt{
display:block;
width:160px;
text-align:right;
float:left;
font-weight:bolder;
}
.main dt:after{
content:":";
}
.main dd{
margin-left:170px;
}
.main dd:after{
clear:left;
display:block;
content:" ";
}
.main a:link, .main a:visited{
color:black;
text-decoration:none;
border-bottom:1px dotted black;
}
.main a:hover, .main a:active, .main a:focus{
border-bottom:1px solid black;
}
@media (min-width: 860px) {
body{
background-image:url('/img/salon-graustufen.png');
}
#salon ul{
width:574px;
}
#nav{
margin:5px 0;
}
.main {
width: 600px;
margin:0px 20px 150px 220px;
}
figure{
float: right;
}
#kontakt object{
float: right;
width: 300px;
height: 300px;
}
#kontakt p, #tmg{
margin-right:320px;
}
#produkte div{
line-height: 200px;
height: 200px;
}
#nav_wrapper{
position:fixed;
top:0px;
left:0px;
bottom:0px;
background-repeat:no-repeat;
background-position:center 25px;
border-bottom:1px solid #666666;
padding: 125px 0 0 0;
width: 200px;
}
h1{
background-image:url('/img/salon-katrin-logo.png');
height:188px;
width:500px;
}
#nav_wrapper.sticky{
background-image:url('/img/salon-katrin-logo-200px.png');
}
}
@media (min-width: 1150px) {
#salon ul{
width:861px;
}
.main {
width: 900px;
}
#kontakt object{
width:400px;
height: 400px;
}
#kontakt p, #tmg{
margin-right:420px;
}
}

120
v1.html

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<title>Salon Katrin in Pirmasens</title>
<link href="static/screen.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="static/jquery.js"></script>
<script type="text/javascript" src="static/touchSwipe.js"></script>
<script type="text/javascript" src="static/scripts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Salon Katrin</h1>
<nav>
<div id="nav_wrapper">
<ul id="nav">
<li data-id="home">Home</li>
<li data-id="kontakt">Kontakt / Anfahrt</li>
<li data-id="salon">Der Salon</li>
<li data-id="impressum">Impressum</li>
</ul>
</div>
</nav>
<div style="clear:both;">&nbsp;</div>
<div id="offen">
<h2>Öffnungszeiten</h2>
<dl>
<dt>Montag</dt>
<dd>Geschlossen</dd>
<dt>Dienstag bis Freitag</dt>
<dd>09:00 bis 12:00 Uhr</dd>
<dd>13:00 bis 18:00 Uhr
<dt>Samstag</dt>
<dd>08:00 bis 13:00 Uhr</dd>
</dl>
<p>Telefon: <a href="callto:0633144509">06331 44509</a></p>
</div>
<div class="main" id="home">
<h2>Herzlich willkommen im Salon Katrin</h2>
<p>Ich freue mich, Sie in meinem kleinen, familiären und mit viel Liebe gestalteten Friseursalon begrüßen zu dürfen. Gerne lade ich Sie ein, den Alltag für kurze Zeit zu vergessen und zu entspannen.</p>
<p>Möchten Sie Ihr Aussehen verändern, ihr Styling auffrischen oder einfach nur ganz klassisch zum Friseur gehen?</p>
<p>Dann sind Sie bei mir genau richtig. Ich biete Ihnen von der klassischen Frisur bis zur ausgefallenen Farb- und Styling-Idee jede Friseurdienstleistung an.</p>
<p>Ob klassische Angebote wie zum Beispiel Haarschnitt, Farbe, Dauerwelle oder ähnliches bis hin zur kompletten Typveränderung. Ich berate Sie auch gerne mit meiner fachlichen Kompetenz.</p>
<p>Um Ihre Frisur optimal zu unterstützen, biete ich Ihnen ein individuell gestaltetes Pflege- und Stylingprogramm direkt im Salon sowie zum Mitnehmen nach Hause.</p>
</div>
<div class="main" id="kontakt">
<h2>Kontakt</h2>
<object type="text/html" data="http://www.openstreetmap.org/export/embed.html?bbox=7.60151982307434%2C49.20201598196094%2C7.613493204116821%2C49.20542981046809&amp;layer=mapnik&amp;marker=49.203722925674185%2C7.607506513595581"></object>
<p>Meine Adresse ist <em>Herzogstraße 5, 66953 Pirmasens</em>. Wenn Sie der Herzogstraße von der Horebschule aus kommend folgen, befindet sich der Salon im vorletzten Haus auf der rechten Seite, kurz vor dem Robert-Schelp-Platz. Parkmöglichkeiten finden Sie auf dem drei Gehminuten entfernten Messegelände.</p>
<p>Ab dem zentralen Omnibusbahnhof am Exerzierplatz erreichen Sie den Salon bequem in <abbr title="circa">ca.</abbr> fünf Gehminuten.</p>
<p>Telefonisch erreichen Sie mich unter der Nummer <a href="callto:0633144509">44 50 9</a>.</p>
<div style="clear:both;">&nbsp;</div>
</div>
<div class="main" id="salon">
<h2>Der Salon</h2>
<ul>
<li><a href="img/leute-annka.jpg" class="image-lightbox leute-annka">Die Inhaberin des Salons beim Schneiden</a></li>
<li><a href="img/leute-foehn-annette.jpg" class="image-lightbox leute-foehn-annette">Beim Föhnen</a></li>
<li><a href="img/leute-warte.jpg" class="image-lightbox leute-warte">Wartende Kunden</a></li>
<li><a href="img/leute-wasch.jpg" class="image-lightbox leute-wasch">Die Haare eines Kunden werden gewaschen</a></li>
<li><a href="img/salon-vorne.jpg" class="image-lightbox salon-vorne">Bedienplätze im vorderen Salonbereich</a></li>
<li><a href="img/salon-vorne-seite.jpg" class="image-lightbox salon-vorne-seite">Bedienplätze im vorderen Salonbereich</a></li>
<li><a href="img/salon-vorne-warte.jpg" class="image-lightbox salon-vorne-warte">Wartebereich</a></li>
<li><a href="img/theke.jpg" class="image-lightbox theke">Die neu gestaltete Theke mit integrierter Kaffeebar, daneben das Produktregal</a></li>
<li><a href="img/wasch.jpg" class="image-lightbox wasch">Waschbecken und Arbeitsplatte</a></li>
</ul>
<div style="clear:both;">&nbsp;</div>
</div>
<div class="main" id="impressum">
<h2>Impressum</h2>
<div id="imp_teil1">
<h3>Angaben gemäß § 5 TMG</h3>
<p>Katrin Kunsmann<br>Salon Katrin<br>Herzogstraße 5<br>66953 Pirmasens</p>
<dl>
<dt>Telefon</dt>
<dd><a href="callto:0633144509">06331 44509</a></dd>
<dt>E-Mail</dt>
<dd><a href="mailto:info@salonkatrin.de">info@salonkatrin.de</a></dd>
</dl>
</div>
<div id="imp_teil2">
<h3>Quellenangaben für die verwendeten Bilder</h3>
<p>Alle auf dieser Seite gezeigten Fotos wurden von mir selbst erstellt.</p>
</div>
<div style="clear:both;">&nbsp;</div>
<h3>Datenschutzerklärung</h3>
<ol>
<li>
<h4>Erhebung und Verarbeitung von http-Protokolldaten</h4>
<p>Bei Besuch meiner Website und bei jedem Abruf einer Datei sammelt der Webserver über diese Vorgänge Protokollinformationen (z.B. Browsertyp, Datum und Uhrzeit des Abrufs). Dies sind keine personenbezogenen Daten. Es ist mir also nicht möglich, die erfassten Daten einer bestimmten natürlichen Person zuzuordnen.</p>
<p>Sämtliche dieser Angaben werden von mir ausschließlich zu statistischen Zwecken ausgewertet. Eine Weitergabe an Dritte erfolgt nicht. Eine Verknüpfung dieser Daten mit anderen Daten erfolgt durch mich nicht.</p>
</li>
<li>
<h4>Datenschutz</h4>
<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
<p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
</li>
<li>
<h4>Auskunftsrecht</h4>
<p>Sie haben das Recht jederzeit Auskunft über die zu Ihrer Person gespeicherten Daten zu erhalten, einschließlich Herkunft und Empfänger Ihrer Daten sowie den Zweck der Datenverarbeitung. Ihre Anfrage richten Sie bitte schriftlich oder per E-Mail an die oben genannten Adressen.</p>
<!--p>Diese Datenschutzerklärung gilt nur für Inhalte auf unseren Servern und umfasst nicht die auf unserer Seite verlinkten Webseiten.</p-->
</li>
</ol>
</div>
<div id="lightbox">
<img src="" alt="">
<p class="helptext">Benutzen Sie die Pfeiltasten, um die Bilder zu wechseln.<br>Klicken auf das Bild oder drücken der ESC-Taste blendet das Bild wieder aus.</p>
</div>
<div style="display:none;">
<a href="https://plus.google.com/107632517822882746074" rel="publisher">Google+</a>
</div>
</body>
</html>

382
v2.css

@ -0,0 +1,382 @@
*{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px 0px 300px 0px;
line-height:20px;
font-family:'Helvetica Neue', Helvetica, sans-serif;
background-color:#CCCCCC;
background-attachment:fixed;
background-size:cover;
background-position:center center;
color:black;
font-size: 16px;
}
h1{
text-indent:-999em;
height:75px;
width:200px;
margin:20px auto 10px auto;
padding:20px;
background-image:url('../img/salon-katrin-logo-200px.png');
background-repeat:no-repeat;
background-position:center center;
border-radius:188px;
}
h2, h3{
margin:15px 0px;
font-size: 24px;
line-height: 30px;
}
nav{
margin:0px;
padding:0px;
}
figure{
display: block;
}
figure img{
display: block;
}
figcaption{
display: block;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 14px;
}
a:link, a:visited{
color:white;
text-decoration:none;
}
a:hover, a:active, a:focus{
text-decoration:underline;
}
abbr{
cursor:help;
border-bottom:1px dotted #999999;
}
p{
margin:15px 0px;
line-height: 20px;
}
ol{
margin:15px 0px 0px 0px;
padding:0px 0px 0px 30px;
}
img{
vertical-align: middle;
}
#nav{
list-style:none;
margin: 0 20px 50px 20px;
padding:0px;
}
#nav li{
display:block;
margin:5px 0;
padding: 10px 0 10px 15px;
color: #420909;
cursor: pointer;
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.7);
}
#nav li:hover{
border-left: 10px solid #420909;
padding-left: 5px;
}
#facebook:link, #facebook:visited{
color: #420909;
background-image: url('../img/facebook.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 65px;
display: block;
}
#facebook:hover, #facebook:active, #facebook:focus{
text-decoration: none;
}
#home a{
font-weight: bolder;
}
#salon ul{
list-style:none;
margin:0px auto;
padding:0px;
width: 287px;
}
#salon ul:after{
clear:both;
display:block;
content:" ";
}
#salon li{
float:left;
width:267px;
height:200px;
margin:10px;
padding:0px;
}
#salon li a{
display:block;
width:257px;
height:190px;
margin:0px;
padding:5px;
border-radius:20px;
text-indent:-999em;
border:1px solid black;
outline:none !important;
}
.selected{
border:1px solid #FFFFFF !important;
}
#salon .leute-annka{
background-image:url('../img/leute-annka-thumb.jpg');
}
#salon .leute-foehn-annette{
background-image:url('../img/leute-foehn-annette-thumb.jpg');
}
#salon .leute-warte{
background-image:url('../img/leute-warte-thumb.jpg');
}
#salon .leute-wasch{
background-image:url('../img/leute-wasch-thumb.jpg');
}
#salon .salon-vorne{
background-image:url('../img/salon-vorne-thumb.jpg');
}
#salon .salon-vorne-seite{
background-image:url('../img/salon-vorne-seite-thumb.jpg');
}
#salon .salon-vorne-warte{
background-image:url('../img/salon-vorne-warte-thumb.jpg');
}
#salon .theke{
background-image:url('../img/theke-thumb.jpg');
}
#salon .wasch{
background-image:url('../img/wasch-thumb.jpg');
}
#lightbox{
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgb(100,100,100);
background-color:rgba(0,0,0,0.7);
display:none;
color:white;
text-align:center;
overflow: auto;
}
#lightbox img{
background-color:rgb(0,0,0);
padding:0px 10px 10px 10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border:1px solid #999999;
border-top:none;
}
#lightbox p{
padding:0px;
margin:5px 0px 0px 0px;
}
#lightbox p.helptext{
color:#CCCCCC;
font-size:12px;
line-height:1em;
}
#kontakt object{
width: 100%;
}
#tmg{
font-size: 10px;
font-weight: normal;
margin:15px 0;
padding: 0px;
line-height: 10px;
}
#produkte #img{
text-align: center;
}
#eslabondexx{
background-image: url('../img/eslabondexx-logo.jpg');
background-repeat: no-repeat;
padding: 2px 0px 0px 178px;
}
.main{
padding:10px;
background-color:rgb(255,255,255);
background-color:rgba(255,255,255,0.7);
box-shadow:5px 5px 5px 0px rgba(255,255,255,0.4);
border-top-left-radius:20px;
border-bottom-right-radius:20px;
margin:0px 20px 50px 20px;
}
.main dl{
list-style:none;
margin:0px;
padding:0px;
}
.main dt{
display:block;
width:160px;
text-align:right;
float:left;
font-weight:bolder;
}
.main dt:after{
content:":";
}
.main dd{
margin-left:170px;
}
.main dd:after{
clear:left;
display:block;
content:" ";
}
.main a:link, .main a:visited{
color:black;
text-decoration:none;
border-bottom:1px dotted black;
}
.main a:hover, .main a:active, .main a:focus{
border-bottom:1px solid black;
}
.main span{
text-transform: uppercase;
}
@media (min-width: 860px) {
body{
background-image:url('../img/background.jpg');
}
#salon ul{
width:574px;
}
#nav{
margin:5px 0;
}