first commit

.gitignore

@@ -0,0 +1 @@
+.vscode/sftp.json

.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>rundkopfschlitzschrauben</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>com.aptana.editor.php.aptanaPhpBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.editor.php.phpNature</nature>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+</projectDescription>

css/style.css

@@ -0,0 +1,88 @@
+body {
+	background-color: grey;
+}
+
+div.container {
+	background-color: white;
+  	width: 60%;
+  	margin: auto;
+  	padding: 30px 10%;
+}
+
+table.schrauben {
+  	text-align: center;
+  	margin: auto;
+  	margin-top: 20px;
+  	width: 100%;
+  	border: 1px solid black;
+  	table-layout: fixed;
+}
+
+td.right {
+	text-align: right;
+}
+td.left {
+	text-align: left;
+	padding: 0px 10px;
+}
+
+textarea {
+  	width: 100%;
+  	height: 100px;
+	margin: 10px 0px;
+}
+
+button {
+	margin: 10px 0px;
+}
+
+a {
+	color: black;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+.maintenance {
+	margin: auto;
+	padding: 10px;
+	text-align: center;
+	border: 2px solid red;
+	color: red;
+}
+
+input {
+	outline: none;
+	border: 1px solid grey;
+	padding: 3px;
+	border-radius: 2px;
+}
+input.error {
+	border-color: red;
+}
+&:valid {
+	border-style: auto;
+	border-color: inherit;
+}
+
+p.error_message {
+	color: red;
+	text-align: center;
+}
+
+.grid-container {
+	display: grid;
+	grid-template-columns: auto auto;
+	margin: auto;
+	gap: 5px;
+}
+.form_feedback {
+	grid-column-start: 1;
+	grid-column-end: 3;
+	text-align: right;
+	color: red;
+	display: none;
+	font-size: small;
+}

index.php

@@ -0,0 +1,345 @@
+<?php
+	/*
+	* Schrauben-Array
+	*/
+
+	$array['2 mm'][]		= array("2 x 2,5",	"Messing vernickelt");
+	$array['2 mm'][]		= array("2 x 10", "Stahl blank");
+	$array['2 mm'][]		= array("2,2 x 5", "Stahl blank");
+	$array['2 mm'][]		= array("2,3 x 12", "Messing");
+	$array['2 mm'][]		= array("2,5 x 10", "Verzinkt grau");
+	$array['2 mm'][]		= array("2,5 x 5", "Messing");
+
+	$array['3 mm'][]		= array("3 x 4",	"Stahl blank");
+	$array['3 mm'][]		= array("3 x 12",	"Verzinkt");
+	$array['3 mm'][]		= array("3 x 15",	"Vernickelt");
+	$array['3 mm'][]		= array("3 x 24",	"Stahl blank");
+	$array['3 mm'][]		= array("3 x 25",	"Stahl blank");
+	$array['3 mm'][]		= array("3 x 25",	"Vernickelt");
+	$array['3 mm'][]		= array("3 x 40",	"Vernickelt");
+
+	$array['3,5 mm'][]	= array("3,5 x 15",	"Messing");
+	$array['3,5 mm'][]	= array("3,5 x 25",	"Stahl blank"); 
+	$array['3,5 mm'][]	= array("3,5 x 40", "Messing");
+
+	$array['4 mm'][]		= array("4 x 5",	"Messing");
+	$array['4 mm'][]		= array("4 x 10",	"Vernickelt");
+	$array['4 mm'][]		= array("4 x 20",	"Vernickelt");
+	$array['4 mm'][]		= array("4 x 25",	"Stahl blank");
+	$array['4 mm'][]		= array("4 x 30",	"Stahl blank");
+
+	$array['5 mm'][]		= array("5 x 8",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 8",					"Gelb verzinkt, kadmiert");
+	$array['5 mm'][]		= array("5 x 10",					"Stahl blank");
+	$array['5 mm'][]		= array("5 x 10",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 15",					"Stahl blank");
+	$array['5 mm'][]		= array("5 x 15",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 20",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 25",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 30",					"Vernickelt");
+	$array['5 mm'][]		= array("5 x 40 (31 mm Gewinde)",	"Stahl blank");
+	$array['5 mm'][]		= array("5 x 45 (36 mm Gewinde)",	"Stahl blank");
+	$array['5 mm'][]		= array("5 x 45",					"Messing");
+	$array['5 mm'][]		= array("5 x 55",					"Messing");
+	$array['5 mm'][]		= array("5 x 65",					"Messing");
+	$array['5 mm'][]		= array("5 x 70",					"Messing");
+
+	$array['6 mm'][]		= array("6 x 6",	"Vernickelt");
+	$array['6 mm'][]		= array("6 x 15", 	"Stahl blank");
+	$array['6 mm'][]		= array("6 x 15",	"Vernickelt");
+	$array['6 mm'][]		= array("6 x 20",	"Stahl blank");
+	$array['6 mm'][]		= array("6 x 20",	"Vernickelt");
+	$array['6 mm'][]		= array("6 x 35",	"Stahl blank");
+	$array['6 mm'][]		= array("6 x 45",	"Stahl blank");
+	$array['6 mm'][]		= array("6 x 45",	"Vernickelt");
+	$array['6 mm'][]		= array("6 x 50",	"Messing");
+	$array['6 mm'][]		= array("6 x 55",	"Messing");
+	$array['6 mm'][]		= array("6 x 60",	"Messing");
+	$array['6 mm'][]		= array("6 x 65",	"Messing");
+
+	$array['8 mm'][]		= array("8 x 10",	"Verzinkt");
+	$array['8 mm'][] 		= array("8 x 10", 	"Stahl blank");
+	$array['8 mm'][] 		= array("8 x 20", 	"Verzinkt");
+	$array['8 mm'][] 		= array("8 x 20", 	"Messing");
+	$array['8 mm'][]		= array("8 x 30", 	"Stahl blank");
+
+	$array['10 mm'][] 	= array("10 x 15",	"Stahl blank");
+	$array['10 mm'][]	= array("10 x 20",	"Stahl blank");
+	$array['10 mm'][] 	= array("10 x 20", 	"Verzinkt");
+	$array['10 mm'][] 	= array("10 x 25", 	"Messing (angelaufen)");
+
+	$array['12 mm'][]	= array("12 x 30",	"Stahl blank");
+
+	/*
+	* Mail-Kram
+	*/
+
+	$mail_to = "jandop@yahoo.de";
+	//$mail_to = "sockenklaus@gmail.com";
+	$subject = "Rundkopfschlitzschrauben - Bestellformular";
+
+	/*
+	*
+	*	Must have:
+	*	mail_from
+	*	name
+	*	strasse
+	*	stadt
+	*	plz
+	*	mengen
+	*
+	*/
+	$mail_from 	= isset($_POST['email']) 		? $_POST['email'] 		: '';
+	$name 		= isset($_POST['name']) 		? $_POST['name'] 		: '';
+	$strasse 	= isset($_POST['strasse']) 		? $_POST['strasse'] 	: '';
+	$stadt		= isset($_POST['stadt']) 		? $_POST['stadt'] 		: '';
+	$plz 		= isset($_POST['plz']) 			? $_POST['plz'] 		: '';
+	$telefon 	= isset($_POST['telefon']) 		? $_POST['telefon'] 	: '';
+	$schrauben 	= isset($_POST['schrauben']) 	? $_POST['schrauben'] 	: '';
+	$notiz 		= isset($_POST['notiz']) 		? $_POST['notiz'] 		: '';
+	$sparpaket 	= isset($_POST['sparpaket'])	? $_POST['sparpaket']	: '';
+	$senden 	= isset($_POST['senden'])		? $_POST['senden']		: '';
+	$status = '';
+	$mengen = '';
+	$text = '';
+
+	$ok = true;
+
+	if ($senden == "ok") {
+		foreach ($schrauben as $key => $value) {
+			if ($value >= 10) {
+				$mengen .= "$key: $value\n";
+			}
+			elseif ($value > 0 && $value < 10) {
+				$status .= "Es müssen mindestens 10 Schrauben bestellt werden.<br />";
+				$ok = false;
+			}
+		}
+
+		if (empty($mail_from)) {
+			$status .= "Bitte Mailadresse angeben.<br />";
+			$ok = false;
+		}
+		if (empty($name)) {
+			$status .= "Bitte Name / Vorname angeben.<br />";
+			$ok = false;
+		}
+		if (empty($strasse)) {
+			$status .= "Bitte Straße und Hausnummer angeben.<br />";
+			$ok = false;
+		}
+		if (empty($stadt)) {
+			$status .= "Bitte Stadt angeben.<br />";
+			$ok = false;
+		}
+		if (empty($plz)) {
+			$status .= "Bitte Postleitzahl eingeben.<br />";
+			$ok = false;
+		}
+		if (empty($telefon)) {
+			$status .= "Bitte eine Telefonnummer angeben.<br />";
+			$ok = false;
+		}
+		if (empty($mengen)) {
+			$status .= "Es muss mindestens ein Schraubentyp bestellt werden.";
+			$ok = false;
+		}
+
+		if ($ok) {
+			$text .= "Name / Vorname: $name\n";
+			$text .= "E-Mail: $mail_from\n";
+			$text .= "Straße: $strasse\n";
+			$text .= "PLZ, Stadt: $plz $stadt\n";
+			$text .= "Telefon: $telefon\n";
+			$text .= "\n";
+			$text .= "Bestellte Schrauben:\n\n";
+			$text .= $mengen;
+			$text .= "\n";
+			$text .= "Nachricht:\n";
+			$text .= $notiz;
+
+			$headers = "From: \"Rundkopfschlitzschrauben.de\" <info@rundkopfschlitzschrauben.de>\r\n";
+			$headers .= "BCC: sockenklaus@gmail.com\r\n";
+			$headers .= "Reply-To: $mail_from\r\n";
+			$headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
+			$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
+			$headers .= "Return-Path: web1305@rundkopfschlitzschrauben.de\r\n";
+			$headers .= "MIME-Version: 1.0\r\n";
+			$headers .= "\r\n";
+
+			$mail_ok = mail($mail_to, $subject, $text, $headers);
+
+			if ($mail_ok) {
+				$status .= "Mail erfolgreich verschickt.<br />";
+				$name = "";
+				$strasse = "";
+				$plz = "";
+				$stadt = "";
+				$mail_from = "";
+				$telefon = "";
+				$notiz = "";
+			}
+			else $status .= "Beim Verschicken der Mail ist ein Fehler aufgetreten.<br />";
+		}
+	}
+?>
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8">
+		<title>DIN 86 Metrisch Rundkopf-Schlitzschrauben</title>
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
+		<script type="text/javascript" src="js/form_helper.js" defer></script>
+	</head>
+
+	<body>
+		<div class="container">
+			<div>
+				<a href="http://www.rundkopfschlitzschrauben.de"><h1>DIN 86 Metrisch Rundkopf-Schlitzschrauben</h1></a>
+				
+				<table>
+					<tr><td colspan="2" style="font-weight: bold;">Preise:</td></tr>
+					<tr><td>Stückpreis (2 mm bis 6 mm):</td><td>0,50 € + Versand</td></tr>
+					<tr><td>Stückpreis (8 mm bis 12 mm):</td><td>1,00 € + Versand</td></tr>
+					<tr><td>&nbsp</td></tr>
+					<tr><td colspan="2" style="font-weight: bold;">Stückpreis Messingschrauben:</td></tr>
+					<tr><td>2 - 5 mm</td><td>1,00 € + Versand</td></tr>
+					<tr><td>6 - 10 mm</td><td>2,00 € + Versand</td></tr>
+					<tr><td>&nbsp</td></tr>
+					<tr><td style="font-weight:bold;">Mindestmenge je Größe:</td><td>10 Stück</td></tr>
+				</table>
+
+				<p>
+					Ab 50 € versandkostenfrei innerhalb Deutschlands.<br />
+					Ab 100 € versandkostenfrei innerhalb Deutschlands abzüglich 10% Mengenrabatt.
+				</p>
+
+				<p style="font-weight: bold;">
+					Lieferbar nur solange der Vorrat reicht.
+				</p>
+
+				<p>
+					Da ich diese Schrauben ausschließlich privat verkaufe, übernehme ich keinerlei Gewährleistung oder Garantie.
+				</p>
+
+				<p>
+					Für eventuelle Rückfragen stehe ich Ihnen gerne telefonisch unter 0171 - 3358800 oder 0521 - 449004 zur Verfügung.
+				</p>
+
+				<p>
+					Bestellungen übersenden Sie bitte mit Anschrift und gewünschter Menge mit Hilfe des Kontaktformulars am Ende dieser Seite.
+				</p>
+
+				<p>
+					<strong style="color:red; text-decoration:underline;">Neu:</strong><br />
+					Linsenkopf-Senkschrauben mit Schlitz Metrisch in verschiedenen Größen und Ausführungen. <br />
+					Liste auf Anfrage.
+				</p>
+
+				<p>
+					Bilder zur Anschauung:<br />
+					<a href="img/schrauben.jpg" target="_blank"><img src="img/schrauben_thumb.jpg" alt="schrauben" /></a> <img src="img/karton.jpg" alt="karton" />
+				</p>
+			</div>
+
+			<form action="index.php#form" method="post">
+
+				<?php
+
+					foreach ($array as $key => $values) {
+						echo '
+							<table class="schrauben" rules="all">
+								<colgroup>
+									<col width="*" />
+									<col width="*" />
+									<col width="70px" />
+								</colgroup>
+								<tr>
+									<th>Schrauben in '.$key.' Größe</th>
+									<th>Ausführung</th>
+									<th>Menge</th>
+								</tr>
+						';
+
+						foreach($values as $value) {
+							echo '
+								<tr>
+									<td>'.$value[0].'</td>
+									<td>'.$value[1].'</td>
+									<td><input type="text" pattern="[0-9]+" size="4" maxlength="4" name="schrauben['.$value[0].' - '.$value[1].']" value="0" /></td>
+								</tr>
+							';
+						}
+
+						echo '
+							</table>
+						';
+					}
+
+				?>
+				<!--
+				<br />
+					<div class="maintenance">
+						Bedauerlicherweise besteht zurzeit ein Problem mit dem Bestell-Formular.<br />
+						<br />
+						Bis dieses Problem behoben ist, versucht öffnet ein Klick auf den "Abschicken"-Button in Ihrem E-Mail-Programm eine neue E-Mail mit Ihren Angaben zu verfassen.<br />
+						Dies funktioniert nicht auf allen Geräten und nur, wenn Ihr Gerät entsprechend konfiguriert.<br />
+						<br />
+						Sollten Sie Probleme haben, nehmen Sie bitte Kontakt per E-Mail auf.<br />
+						<br />
+						Bitte haben Sie Geduld, bis das Bestell-Formular wieder wie gewohnt funktioniert.
+
+					</div>
+				-->
+				<br />
+				<p class="error_message">
+					<?=$status;?>
+				</p>
+				<div class="grid-container">
+					<label for="name">Name / Vorname: *</label>
+					<input type="text" name="name" id="name" value="<?=$name;?>" required />
+					<div class="form_feedback">Name / Vorname erforderlich.</div>
+
+					<label for="strasse">Straße, Hausnummer: *</label>
+					<input type="text" name="strasse" id="strasse" value="<?=$strasse;?>" required />
+					<div class="form_feedback">Straße und Hausnummer erforderlich.</div>
+
+					<label for="plz">PLZ: *</label>
+					<input type="text" name="plz" id="plz" value="<?=$plz;?>" required />
+					<div class="form_feedback">Postleitzahl erforderlich.</div>
+
+					<label for="stadt">Stadt: *</label>
+					<input type="text" name="stadt" id="stadt" value="<?=$stadt?>" required />
+					<div class="form_feedback">Stadt erforderlich.</div>
+
+					<label for="email">Email: *</label>
+					<input type="email" name="email" id="email" value="<?=$mail_from;?>" required />
+					<div class="form_feedback">(Korrekte) E-Mail-Adresse erforderlich.</div>
+
+					<label for="telefon">Telefon: *</label>
+					<input type="tel" name="telefon" id="telefon" value="<?=$telefon;?>" required />
+					<div class="form_feedback">Bitte Telefonnummer eingeben.</div>
+
+				</div>
+				<p>Notiz:</p>
+				<textarea name="notiz"><?=$notiz;?></textarea>
+				<p>Mit Sternchen markierte Felder müssen ausgefüllt sein.</p>
+				<button type="submit" name="senden" value="ok">Abschicken</button>
+			</form>
+
+			<div>
+				<h2>Impressum</h2>
+				Jan Dopheide<br />
+				Schulstr. 40 b<br />
+				33647 Bielefeld<br />
+				Tel.: 0171 - 3358800<br />
+				<br />
+				oder tagsüber über den Geschäftsanschluss:<br />
+				Tel.: 0521 - 449004<br />
+				Fax.: 0521 - 443854<br />
+				<br />
+				Email: jandop@yahoo.de
+			</div>
+		</div>
+	</body>
+</html>

info.php

@@ -0,0 +1,3 @@
+<?php
+phpinfo()
+?>

js/form_helper.js

@@ -0,0 +1,26 @@
+const inputs = document.querySelectorAll("input")
+
+inputs.forEach(input => {
+    input.addEventListener(
+        "invalid",
+        () => {
+            input.classList.add("error")
+            input.nextElementSibling.style.display = "inline"
+        },
+        false
+    )
+
+    input.addEventListener(
+        "input",
+        event => checkValidityOnInput(event),
+        false
+    )
+})
+
+function checkValidityOnInput(e){
+    e.target.checkValidity()
+    if(e.target.validity.valid) {
+        e.target.classList.remove("error")
+        e.target.nextElementSibling.style.display = "none"
+    }
+}