1337gut/mettcalc.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS and HTML structure for improved readability and maintainability
Deploy Website / deploy (push) Successful in 23s
Details

Browse Source
This commit is contained in:
Florian Otto
2026-05-20 11:51:13 +02:00
parent b79c85bf9e
commit f1803146bf
5 changed files with 692 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
boilerplate.css
+334 -96
View File
@@ -16,15 +16,35 @@
* ==|== Normalisieren ====================================================== * ==|== Normalisieren ======================================================
*/ */
/* ============================================================================= /* =============================================================================
HTML5-Anzeigedefinitionen HTML5-Anzeigedefinitionen
========================================================================== */ ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } article,
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } aside,
audio:not([controls]) { display: none; } details,
[hidden] { display: none; } figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
}
/* ============================================================================= /* =============================================================================
Basis Basis
@@ -36,11 +56,27 @@ audio:not([controls]) { display: none; }
* 3. Verhindern der iOS-Textgrößenanpassung beim Ändern der Geräteausrichtung ohne den Benutzerzoom zu deaktivieren: h5bp.com/g * 3. Verhindern der iOS-Textgrößenanpassung beim Ändern der Geräteausrichtung ohne den Benutzerzoom zu deaktivieren: h5bp.com/g
*/ */
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body { margin: 0; font-size: 13px; line-height: 1.231; } body {
margin: 0;
font-size: 13px;
line-height: 1.231;
}
body, button, input, select, textarea { font-family: sans-serif; color: #222; } body,
button,
input,
select,
textarea {
font-family: sans-serif;
color: #222;
}
/* /*
* Textschatten in der Auswahlmarkierung entfernen: h5bp.com/i * Textschatten in der Auswahlmarkierung entfernen: h5bp.com/i
@@ -57,58 +93,132 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
Hyperlinks Hyperlinks
========================================================================== */ ========================================================================== */
a { color: #00e; } a {
a:visited { color: #551a8b; } color: #00e;
a:hover { color: #06e; } }
a:focus { outline: thin dotted; } a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
a:focus {
outline: thin dotted;
}
/* Verbessert in allen Browsern die Lesbarkeit von Hyperlinks, die über die Tabulatortaste fokussiert werden (focus) und von Hyperlinks, auf die der Mauszeiger gerichtet ist (hover): h5bp.com/h */ /* Verbessert in allen Browsern die Lesbarkeit von Hyperlinks, die über die Tabulatortaste fokussiert werden (focus) und von Hyperlinks, auf die der Mauszeiger gerichtet ist (hover): h5bp.com/h */
a:hover, a:active { outline: 0; } a:hover,
a:active {
outline: 0;
}
/* ============================================================================= /* =============================================================================
Typografie Typografie
========================================================================== */ ========================================================================== */
abbr[title] { border-bottom: 1px dotted; } abbr[title] {
border-bottom: 1px dotted;
}
b, strong { font-weight: bold; } b,
strong {
font-weight: bold;
}
blockquote { margin: 1em 40px; } blockquote {
margin: 1em 40px;
}
dfn { font-style: italic; } dfn {
font-style: italic;
}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
ins { background: #ff9; color: #000; text-decoration: none; } ins {
background: #ff9;
color: #000;
text-decoration: none;
}
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold;
}
/* Nichtproportionale Schriftfamilie neu deklarieren: h5bp.com/j */ /* Nichtproportionale Schriftfamilie neu deklarieren: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } pre,
code,
kbd,
samp {
font-family: monospace, monospace;
_font-family: "courier new", monospace;
font-size: 1em;
}
/* In allen Browsern die Lesbarkeit von vorformatiertem Text verbessern */ /* In allen Browsern die Lesbarkeit von vorformatiertem Text verbessern */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q { quotes: none; } q {
q:before, q:after { content: ""; content: none; } quotes: none;
}
q:before,
q:after {
content: "";
content: none;
}
small { font-size: 85%; } small {
font-size: 85%;
}
/* Text höher oder tiefer stellen ohne die Zeilenhöhe zu beeinflussen: h5bp.com/k */ /* Text höher oder tiefer stellen ohne die Zeilenhöhe zu beeinflussen: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub,
sup { top: -0.5em; } sup {
sub { bottom: -0.25em; } font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ============================================================================= /* =============================================================================
Listen Listen
========================================================================== */ ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; } ul,
dd { margin: 0 0 0 40px; } ol {
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } margin: 1em 0;
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
/* ============================================================================= /* =============================================================================
Eingebetteter Inhalt Eingebetteter Inhalt
@@ -119,38 +229,56 @@ nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0
* 2. Entfernen der Lücke zwischen Bildern und Rahmen in Bildcontainern: h5bp.com/e * 2. Entfernen der Lücke zwischen Bildern und Rahmen in Bildcontainern: h5bp.com/e
*/ */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
/* /*
* Korrekter Überlauf in IE9 nicht verborgen * Korrekter Überlauf in IE9 nicht verborgen
*/ */
svg:not(:root) { overflow: hidden; } svg:not(:root) {
overflow: hidden;
}
/* ============================================================================= /* =============================================================================
Abbildungen Abbildungen
========================================================================== */ ========================================================================== */
figure { margin: 0; } figure {
margin: 0;
}
/* ============================================================================= /* =============================================================================
Formulare Formulare
========================================================================== */ ========================================================================== */
form { margin: 0; } form {
fieldset { border: 0; margin: 0; padding: 0; } margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/* Festlegen, dass 'label' den Fokus auf das betreffende Forularelement setzt */ /* Festlegen, dass 'label' den Fokus auf das betreffende Forularelement setzt */
label { cursor: pointer; } label {
cursor: pointer;
}
/* /*
* 1. Korrekte Farbe wird in IE6/7/8/9 nicht vererbt * 1. Korrekte Farbe wird in IE6/7/8/9 nicht vererbt
* 2. Korrekte Ausrichtung wird in IE6/7 merkwürdig angezeigt * 2. Korrekte Ausrichtung wird in IE6/7 merkwürdig angezeigt
*/ */
legend { border: 0; *margin-left: -7px; padding: 0; } legend {
border: 0;
*margin-left: -7px;
padding: 0;
}
/* /*
* 1. Korrekte Schriftgröße wird in keinem der Browser vererbt * 1. Korrekte Schriftgröße wird in keinem der Browser vererbt
@@ -158,123 +286,233 @@ legend { border: 0; *margin-left: -7px; padding: 0; }
* 3. Definieren konsistenter vertikaler Ausrichtung für alle Browser * 3. Definieren konsistenter vertikaler Ausrichtung für alle Browser
*/ */
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
/* /*
* 1. Für eine Übereinstimmung mit FF3/4 die Zeilenhöhe als normal definieren (im UA-Stylesheet '!important' verwenden) * 1. Für eine Übereinstimmung mit FF3/4 die Zeilenhöhe als normal definieren (im UA-Stylesheet '!important' verwenden)
* 2. Korrekter innerer Abstand wird in IE6/7 merkwürdig angezeigt * 2. Korrekter innerer Abstand wird in IE6/7 merkwürdig angezeigt
*/ */
button, input { line-height: normal; *overflow: visible; } button,
input {
line-height: normal;
*overflow: visible;
}
/* /*
* In 'table' inneren Abstand wieder einführen, um Überlappungen zu vermeiden und IE6/7-Probleme mit Leerraum zu vermeiden. * In 'table' inneren Abstand wieder einführen, um Überlappungen zu vermeiden und IE6/7-Probleme mit Leerraum zu vermeiden.
*/ */
table button, table input { *overflow: auto; } table button,
table input {
*overflow: auto;
}
/* /*
* 1. Anzeigen des Handcursors bei klickbaren Formularelementen * 1. Anzeigen des Handcursors bei klickbaren Formularelementen
* 2. Gestaltung klickbarer Formularelemente in iOS ermöglichen * 2. Gestaltung klickbarer Formularelemente in iOS ermöglichen
*/ */
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
/* /*
* Konsistente Größe und Darstellung von Feldern * Konsistente Größe und Darstellung von Feldern
*/ */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="checkbox"],
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="radio"] {
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } box-sizing: border-box;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/* /*
* In FF3/4 innere Auffüllung und Rahmen entfernen: h5bp.com/l * In FF3/4 innere Auffüllung und Rahmen entfernen: h5bp.com/l
*/ */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* /*
* 1. In IE6/7/8/9 vertikale Standardbildlaufleiste entfernen * 1. In IE6/7/8/9 vertikale Standardbildlaufleiste entfernen
* 2. Größenänderung nur in der Vertikale zulassen * 2. Größenänderung nur in der Vertikale zulassen
*/ */
textarea { overflow: auto; vertical-align: top; resize: vertical; } textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
/* Farben für die Formularüberprüfung */ /* Farben für die Formularüberprüfung */
input:valid, textarea:valid { } input:valid,
input:invalid, textarea:invalid { background-color: #f0dddd; } textarea:valid {
}
input:invalid,
textarea:invalid {
background-color: #f0dddd;
}
/* ============================================================================= /* =============================================================================
Tabellen Tabellen
========================================================================== */ ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; } table {
td { vertical-align: top; } border-collapse: collapse;
border-spacing: 0;
}
td {
vertical-align: top;
}
/* ==|== Primärstile ======================================================== /* ==|== Primärstile ========================================================
Autor: Autor:
========================================================================== */ ========================================================================== */
/* ==|== nichtsemantische Helferklassen ======================================== /* ==|== nichtsemantische Helferklassen ========================================
Definieren Sie Ihre Stile vor dieser Auswahl Definieren Sie Ihre Stile vor dieser Auswahl
========================================================================== */ ========================================================================== */
/* Für den Austausch von Bildern */ /* Für den Austausch von Bildern */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir {
.ir br { display: none; } display: block;
border: 0;
text-indent: -999em;
overflow: hidden;
background-color: transparent;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
}
.ir br {
display: none;
}
/* Vor Bildschirmleseprogrammen und Browsern verbergen: h5bp.com/u */ /* Vor Bildschirmleseprogrammen und Browsern verbergen: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; } .hidden {
display: none !important;
visibility: hidden;
}
/* Nur visuell verbergen, aber für Bildschirmleseprogramme bereithalten: h5bp.com/v */ /* Nur visuell verbergen, aber für Bildschirmleseprogramme bereithalten: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* Erweitert die Klasse ".visuallyhidden" so, dass das Element bei der Tastaturnavigation den Fokus erhält: h5bp.com/p */ /* Erweitert die Klasse ".visuallyhidden" so, dass das Element bei der Tastaturnavigation den Fokus erhält: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* Visuell und vor Bildschirmleseprogrammen verbergen, aber das Layout beibehalten */ /* Visuell und vor Bildschirmleseprogrammen verbergen, aber das Layout beibehalten */
.invisible { visibility: hidden; } .invisible {
visibility: hidden;
}
/* Floats beinhalten: h5bp.com/q */ /* Floats beinhalten: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:before,
.clearfix:after { clear: both; } .clearfix:after {
.clearfix { zoom: 1; } content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* ==|== Druckstile ========================================================== /* ==|== Druckstile ==========================================================
Druckstile. Druckstile.
Innen, um die erforderliche HTTP-Verbindung zu vermeiden: h5bp.com/r Innen, um die erforderliche HTTP-Verbindung zu vermeiden: h5bp.com/r
========================================================================== */ ========================================================================== */
@media print { @media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Schwarz druckt schneller: h5bp.com/s */ * {
a, a:visited { text-decoration: underline; } background: transparent !important;
a[href]:after { content: " (" attr(href) ")"; } color: black !important;
abbr[title]:after { content: " (" attr(title) ")"; } text-shadow: none !important;
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Keine Bildverweise anzeigen und keine javascript/internal- Hyperlinks */ filter: none !important;
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } -ms-filter: none !important;
thead { display: table-header-group; } /* h5bp.com/t */ } /* Schwarz druckt schneller: h5bp.com/s */
tr, img { page-break-inside: avoid; } a,
img { max-width: 100% !important; } a:visited {
@page { margin: 0.5cm; } text-decoration: underline;
p, h2, h3 { orphans: 3; widows: 3; } }
h2, h3 { page-break-after: avoid; } a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
} /* Keine Bildverweise anzeigen und keine javascript/internal- Hyperlinks */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
} /* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
} }
impressum.php
+123 -51
View File
@@ -5,75 +5,147 @@
<!--[if gt IE 8]><!--> <!--[if gt IE 8]><!-->
<html class=""> <html class="">
<!--<![endif]--> <!--<![endif]-->
<head> <head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#b91d47"> <meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#CD7569"> <meta name="theme-color" content="#CD7569">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mettcalc - Dein Mettrechner</title> <title>Mettcalc - Dein Mettrechner</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css"> <link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css"> <style type="text/css">
body,td,th { body,
td,
th {
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
font-size: large; font-size: large;
color: #FFFAE8; color: #FFFAE8;
} }
a {
a {
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
color: #FFFAE8 color: #FFFAE8
} }
a.hover {
a.hover {
text-decoration: underline text-decoration: underline
} }
body {
body {
background-color: #CD7569; background-color: #CD7569;
margin-top: 30px; margin-top: 30px;
} }
span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev.email:before { content:"ed.clac" } span.rev {
span.rev.email:after { content:"@retsambew :liaM-E" } unicode-bidi: bidi-override;
span.rev.phone:before { content:"962 9119 " } direction: rtl
span.rev.phone:after { content:" 94+ :nofeleT" } }
span.rev.fax:before { content:"402 9119 " }
span.rev.fax:after { content:" 94+ :xaF" } span.rev.email:before {
</style> content: "ed.clac"
<script src="respond.min.js"></script> }
span.rev.email:after {
content: "@retsambew :liaM-E"
}
span.rev.phone:before {
content: "962 9119 "
}
span.rev.phone:after {
content: " 94+ :nofeleT"
}
span.rev.fax:before {
content: "402 9119 "
}
span.rev.fax:after {
content: " 94+ :xaF"
}
</style>
<script src="respond.min.js"></script>
</head> </head>
<body> <body>
<div class="gridContainer clearfix"> <div class="gridContainer clearfix">
<div id="LayoutDiv1"><form method="POST" action=""> <div id="LayoutDiv1">
<div class='impressum'><h1>Impressum</h1><p>Angaben gemäß § 5 TMG</p><p>Florian Otto <br> <form method="POST" action="">
Hammerweg 37<br> <div class='impressum'>
59929 Brilon-Wald<br> <h1>Impressum</h1>
</p><p> <strong>Vertreten durch: </strong><br> <p>Angaben gemäß § 5 TMG</p>
Florian Otto<br> <p>Florian Otto <br>
</p><p><strong>Kontakt:</strong> <br> Hammerweg 37<br>
<span class="rev email">ttem</span><br> 59929 Brilon-Wald<br>
<span class="rev phone">1692</span><br> </p>
<span class="rev fax">1692</span></br></p> <p> <strong>Vertreten durch: </strong><br>
<p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br> Florian Otto<br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br><br> </p>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br> <p><strong>Kontakt:</strong> <br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br> <span class="rev email">ttem</span><br>
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br> <span class="rev phone">1692</span><br>
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. <br> <span class="rev fax">1692</span></br>
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.<br> </p>
<p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als
Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den
allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch
nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach
Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur
Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben
hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis
einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden
Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für
Links</strong><br><br>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss
haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die
Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten
verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen
werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten,
nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber
erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter
als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam
werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen
werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich.
Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder
eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis.
Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
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. <br>
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.<br>
</div> </div>
</div> </div>
</div> </div>
<footer> <footer>
<nav><p align="center"> <nav>
<p align="center">
<a href="index.php">Zurück</a> <a href="index.php">Zurück</a>
</p> </p>
</nav> </nav>
</footer> </footer>
</body> </body>
</html> </html>
index.php
+59 -45
View File
@@ -5,45 +5,53 @@
<!--[if gt IE 8]><!--> <!--[if gt IE 8]><!-->
<html class=""> <html class="">
<!--<![endif]--> <!--<![endif]-->
<head> <head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#b91d47"> <meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#CD7569"> <meta name="theme-color" content="#CD7569">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mettcalc - Dein Mettrechner</title> <title>Mettcalc - Dein Mettrechner</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css"> <link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css"> <style type="text/css">
body,td,th { body,
td,
th {
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
font-size: large; font-size: large;
color: #FFFAE8; color: #FFFAE8;
} }
a {
a {
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
color: #FFFAE8 color: #FFFAE8
} }
a.hover {
a.hover {
text-decoration: underline text-decoration: underline
} }
body {
body {
background-color: #CD7569; background-color: #CD7569;
margin-top: 30px; margin-top: 30px;
} }
</style> </style>
<script src="respond.min.js"></script> <script src="respond.min.js"></script>
</head> </head>
<body> <body>
<div class="gridContainer clearfix"> <div class="gridContainer clearfix">
<div id="LayoutDiv1"><form method="POST" action=""> <div id="LayoutDiv1">
<h1 align="center">mettcalc.de</h1> <form method="POST" action="">
<p align="center"><b>Brötchenhälften:</b> <h1 align="center">mettcalc.de</h1>
<p align="center"><b>Brötchenhälften:</b>
<input name="bread" size=6><br> <input name="bread" size=6><br>
<b>Menge Mett:</b> <b>Menge Mett:</b>
<select name="menge"> <select name="menge">
@@ -56,38 +64,44 @@ body {
<br> <br>
<br /> <br />
<input type=submit name=submit value="Calc the Mett!"> <input type=submit name=submit value="Calc the Mett!">
</p> </p>
</form> </form>
<p align="center"> <p align="center">
<?php <?php
if (!empty($_POST["submit"])) if (!empty($_POST["submit"])) {
{
$_zahl1 = $_POST["bread"]; $_zahl1 = $_POST["bread"];
$_rz = $_POST["menge"]; $_rz = $_POST["menge"];
if($_rz == "normal") $c = $_zahl1 * 40; if ($_rz == "normal")
if($_rz == "viel") $c = $_zahl1 * 50; $c = $_zahl1 * 40;
if($_rz == "sviel") $c = $_zahl1 * 60; if ($_rz == "viel")
if($_rz == "wenig") $c = $_zahl1 * 30; $c = $_zahl1 * 50;
if($_rz == "vegan") $c = $_zahl1 * 0; if ($_rz == "sviel")
$c = $_zahl1 * 60;
if ($_rz == "wenig")
$c = $_zahl1 * 30;
if ($_rz == "vegan")
$c = $_zahl1 * 0;
echo "Für ". $_zahl1/2 . " Brötchen brauchst Du ". $c ."g Mett."; echo "Für " . $_zahl1 / 2 . " Brötchen brauchst Du " . $c . "g Mett.";
} }
?> ?>
</p> </p>
<!-- ACHTUNG: Nutellarechner ist aus markenrechtlichen Gründen nicht erlaubt! <p align="center"> <!-- ACHTUNG: Nutellarechner ist aus markenrechtlichen Gründen nicht erlaubt! <p align="center">
<br /> <br />
Ich will lieber <a href="https://nutellarechner.de" style="font-size:x-large;text-decoration:underline">Nutella</a>! Ich will lieber <a href="https://nutellarechner.de" style="font-size:x-large;text-decoration:underline">Nutella</a>!
<br /> <br />
</p> --> </p> -->
</div> </div>
</div> </div>
<footer> <footer>
<nav><p align="center"> <nav>
<p align="center">
<a href="impressum.php">Impressum</a> <a href="impressum.php">Impressum</a>
</p> </p>
</nav> </nav>
</footer> </footer>
</body> </body>
</html> </html>
mett.js
+41 -31
View File
@@ -1,61 +1,71 @@
!!(function() { !!(function () {
var aUnits = { var aUnits = {
'wenig': 30, wenig: 30,
'normal': 40, normal: 40,
'viel': 50, viel: 50,
'sehr viel': 60 "sehr viel": 60,
} };
var iHunger = 40; var iHunger = 40;
var iRolls = 1; var iRolls = 1;
var $oRolls = $('#halfRolls'); var $oRolls = $("#halfRolls");
var $oSelect = $('#hunger'); var $oSelect = $("#hunger");
var aMeasures = ['G', 'KG', 'T']; var aMeasures = ["G", "KG", "T"];
var inf = function(iIn) { var inf = function (iIn) {
var sIn = String(Math.round(iIn)); var sIn = String(Math.round(iIn));
var rGx = /(\d+)(\d{3})/; var rGx = /(\d+)(\d{3})/;
while(rGx.test(sIn)) sIn = sIn.replace(rGx, '$1.$2'); while (rGx.test(sIn)) sIn = sIn.replace(rGx, "$1.$2");
return sIn; return sIn;
} };
var nf = function(fIn) { var nf = function (fIn) {
var aIn = String(parseFloat(fIn).toFixed(2)).split('.'); var aIn = String(parseFloat(fIn).toFixed(2)).split(".");
var rGx = /(\d+)(\d{3})/; var rGx = /(\d+)(\d{3})/;
while(rGx.test(aIn[0])) aIn[0] = aIn[0].replace(rGx, '$1.$2'); while (rGx.test(aIn[0])) aIn[0] = aIn[0].replace(rGx, "$1.$2");
return aIn.join(','); return aIn.join(",");
} };
var calc = function() { var calc = function () {
var fHack = iRolls * iHunger; var fHack = iRolls * iHunger;
var sMeas = ''; var sMeas = "";
var bDiv = false; var bDiv = false;
for(var i in aMeasures) { for (var i in aMeasures) {
sMeas = aMeasures[i]; sMeas = aMeasures[i];
if(fHack < 1000) break; if (fHack < 1000) break;
fHack /= 1000; fHack /= 1000;
bDiv = true; bDiv = true;
} }
document.location.hash = 'r'+iRolls+'-m'+iHunger; document.location.hash = "r" + iRolls + "-m" + iHunger;
$('#out').text('Bestell '+(bDiv ? nf(fHack) : inf(fHack))+' '+sMeas+' Mett beim Metzger, bro.'); $("#out").text(
} "Bestell " +
(bDiv ? nf(fHack) : inf(fHack)) +
" " +
sMeas +
" Mett beim Metzger, bro.",
);
};
var aMatch = document.location.hash.match(/r(\d+)-m(\d+)/); var aMatch = document.location.hash.match(/r(\d+)-m(\d+)/);
if(aMatch) { if (aMatch) {
iRolls = parseInt(aMatch[1]); iRolls = parseInt(aMatch[1]);
iHunger = parseInt(aMatch[2]); iHunger = parseInt(aMatch[2]);
calc(); calc();
} }
$oRolls.val(iRolls).on('change', function() { $oRolls.val(iRolls).on("change", function () {
iRolls = parseInt($oRolls.val()); iRolls = parseInt($oRolls.val());
}); });
$.each(aUnits, function(name, e) { $.each(aUnits, function (name, e) {
$oSelect.append($('<option>').attr('value', e).prop('selected', e == iHunger).text(name)); $oSelect.append(
$("<option>")
.attr("value", e)
.prop("selected", e == iHunger)
.text(name),
);
}); });
$oSelect.on('change', function() { $oSelect.on("change", function () {
iHunger = $oSelect.val(); iHunger = $oSelect.val();
}); });
$('#calc').on('click', calc); $("#calc").on("click", calc);
})(); })();
style.css
+31 -28
View File
@@ -3,12 +3,15 @@
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
http://www.alistapart.com/articles/fluid-images/ http://www.alistapart.com/articles/fluid-images/
*/ */
img, object, embed, video { img,
object,
embed,
video {
max-width: 100%; max-width: 100%;
} }
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */ /* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img { .ie6 img {
width:100%; width: 100%;
} }
/* /*
@@ -51,60 +54,60 @@ footer {
} }
.zeroMargin_mobile { .zeroMargin_mobile {
margin-left: 0; margin-left: 0;
} }
.hide_mobile { .hide_mobile {
display: none; display: none;
} }
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */ /* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) { @media only screen and (min-width: 481px) {
.gridContainer { .gridContainer {
width: 90.675%; width: 90.675%;
padding-left: 1.1625%; padding-left: 1.1625%;
padding-right: 1.1625%; padding-right: 1.1625%;
} }
#LayoutDiv1 { #LayoutDiv1 {
clear: both; clear: both;
float: left; float: left;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
display: block; display: block;
} }
#footer { #footer {
} }
.hide_tablet { .hide_tablet {
display: none; display: none;
} }
.zeroMargin_tablet { .zeroMargin_tablet {
margin-left: 0; margin-left: 0;
} }
} }
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */ /* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) { @media only screen and (min-width: 769px) {
.gridContainer { .gridContainer {
width: 88.2%; width: 88.2%;
max-width: 1232px; max-width: 1232px;
padding-left: 0.9%; padding-left: 0.9%;
padding-right: 0.9%; padding-right: 0.9%;
margin: auto; margin: auto;
} }
#LayoutDiv1 { #LayoutDiv1 {
clear: both; clear: both;
float: left; float: left;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
display: block; display: block;
} }
#footer { #footer {
} }
.zeroMargin_desktop { .zeroMargin_desktop {
margin-left: 0; margin-left: 0;
} }
.hide_desktop { .hide_desktop {
display: none; display: none;
} }
} }