You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
6.2 KiB
112 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<title>Mietanfrage</title>
|
|
<meta charset="utf8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="./js/canvas.js"></script>
|
|
<script src="./js/validation.js"></script>
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="./css/custom.css"> <!-- Load custom css after w3 -->
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
</head>
|
|
|
|
<body onload="animateCheckmark('canvasCheckmark', 150, 200, 10);animateCross('canvasCross', 150, 200, 10);">
|
|
<header class="w3-container">
|
|
<h1>Mietanfrage Jonas Arnold Eventtechnik</h1>
|
|
<nav class="w3-bar navbar">
|
|
<a href="#Information" class="w3-bar-item w3-button w3-mobile">Information</a>
|
|
<a href="#Formular" class="w3-bar-item w3-button w3-mobile">Formular</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- INFORMATION / DESCRIPTION -->
|
|
<article class="w3-container">
|
|
<h2 id="Information">Information</h2>
|
|
<aside class="w3-container w3-col l6">
|
|
<img class="aside-image" src="./img/aside_image.jpg" alt="Zwei gestapelte Racks mit Mischpult und Stagebox">
|
|
</aside>
|
|
<section class="w3-container w3-col l6">
|
|
<h2>Beschreibung</h2>
|
|
<!-- information text -->
|
|
<p>Auf dieser Webseite können Sie, als registrierter Kunde, Material von Jonas Arnold Eventtechnik mieten. Sie erhalten direkt eine Bestätigung, ob das Material zum gewünschten Zeitpunkt noch verfügbar ist. <br/>
|
|
Sofern es verfügbar ist, wird es für Sie reserviert und wir nehmen im Anschluss Kontakt mit Ihnen auf. <br>
|
|
Wenn Sie mehrere Materialien mieten möchten, füllen Sie das untenstehende Formular mehrmals aus. Die Bestellnummer bleibt während einer Stunde dieselbe. <br/>
|
|
Zur Reservation benötigen sie die eindeutige Materialnummer. Die verfügbaren Mietartikel und deren Nummer finden Sie hier: </p>
|
|
<p class="article-spacing"></p>
|
|
<form action="https://jonasarnold.com/wp-content/uploads/2022/12/Mietpreisliste_2023-1.pdf" method="get" target="_blank">
|
|
<button class="w3-button" type="submit" alt="Weiterleitung zu PDF, welches Mietartikel auflistet">PDF Mietartikel</button>
|
|
</form>
|
|
<br/>
|
|
|
|
<h2>Bestätigung Reservation</h2>
|
|
<!-- flexbox -->
|
|
<div id="parent">
|
|
<div>
|
|
<p>Die Mietanfrage wird mit der Datenbank abgeglichen. Sofern das Material verfügbar ist, wird es für Sie reserviert. Ansonsten werden Sie darüber informiert, dass das Material bereits vermietet ist.<br/>
|
|
Folgende Symbole werden angezeigt, um die Reservation zu bestätigen oder abzulehnen. </p>
|
|
<p class="article-spacing"></p>
|
|
</div>
|
|
<div>
|
|
<h5>Erfolgreiche Reservation</h5><br/>
|
|
<canvas id="canvasCheckmark" width="200px" height="200px" aria-label="Grüner Haken zur Bestätigung der erfolgreichen Reservation">
|
|
Ihr Webbrowser unterstützt kein Canvas.
|
|
</canvas>
|
|
</div>
|
|
<div>
|
|
<h5>Reservation nicht möglich</h5><br/>
|
|
<canvas id="canvasCross" width="200px" height="200px" aria-label="Rotes Stop Symbol zum Ausdruck der fehlgeschlagenen Reservation">
|
|
Ihr Webbrowser unterstützt kein Canvas.
|
|
</canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<p class="between-spacing"></p>
|
|
|
|
<!-- FORM -->
|
|
<article class="w3-container">
|
|
<h2 id="Formular">Mietanfrage Formular</h2>
|
|
<!-- Error box, default hidden -->
|
|
<div class="w3-container">
|
|
<div class="w3-panel w3-pale-red w3-border" hidden="true" id="error-panel">
|
|
<h3>Eingabefehler</h3>
|
|
<p id="error-text"></p>
|
|
</div>
|
|
</div>
|
|
<form action="rental_action.php" method="post" onsubmit="return isValid();">
|
|
<div class="w3-container w3-col l6">
|
|
<fieldset>
|
|
<legend>Mietartikel</legend>
|
|
<label for="mietart_nr">Mietartikel Nummer</label>
|
|
<input class="w3-input" placeholder="z.B. T010301" type="text" id="mietart_nr" name="rental_article_nr" required>
|
|
<br/>
|
|
<label for="von">Von</label>
|
|
<input class="w3-input" type="date" id="von" name="start_date" required>
|
|
<label for="bis">Bis</label>
|
|
<input class="w3-input" type="date" id="bis" name="end_date" required>
|
|
<br/>
|
|
</fieldset>
|
|
</div>
|
|
<div class="w3-container w3-col l6">
|
|
<fieldset>
|
|
<legend>Kundenangaben</legend>
|
|
<label for="kunden_nr">Kundennummer</label>
|
|
<input class="w3-input" placeholder="z.B. 123456" type="number" id="kunden_nr" name="customer_nr" required>
|
|
<br/>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="submit">Mietanfrage senden</label>
|
|
<button class="w3-button w3-block" type="submit" id="submit">Senden</button>
|
|
</fieldset>
|
|
</div>
|
|
</form>
|
|
</article>
|
|
|
|
<p class="bottom-spacing"></p>
|
|
|
|
</main>
|
|
</body>
|
|
</html> |