<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<?php
if (!empty($_GET['q'])) {
switch ($_GET['q']) {
case 'info':
phpinfo();
exit;
break;
}
}
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<link rel="stylesheet" href="timepicker/jquery.timepicker.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container contact-form">
<div class="contact-image noselect">
<img src="https://www.festo-didactic.com/_resources/css/import/img/Logo_Festo.png" />
</div>
<form role="form" name="Form" method="POST" autocomplete="off" id="contact" action="" onsubmit=" return validateForm() " enctype="multipart/form-data">
<h3 class="noselect">Senden Sie eine Übersetzung</h3>
<div class="lang noselect">
<a href="index.php">DE</a>
<span>/</span>
<a href="indexEN.php">EN</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="Client" id="Client" list="suggestions" class="form-control autocomplete" placeholder="Kunde" value="" required/>
</div>
<div class="form-group">
<input type="text" name="CostCenter" id="CostCenter" class="form-control" placeholder="Kostenstelle" value="" required/>
</div>
<div class="form-group">
<input type="text" name="ProjectNumber" id="ProjectNumber" class="form-control" placeholder="Int. Projekt-Nr." value="" required/>
</div>
<div class="form-group">
<input type="text" name="ContactPerson" id="ContactPerson" class="form-control" placeholder="Kontaktperson" value="" required/>
</div>
<div class="form-group">
<select name="JobType" id="JobType" class="form-control" required>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<select name="SourceLanguage" id="SourceLanguage" class="form-control" required>
</select>
</div>
</div>
<div class="col-md-2 text-center ">
<i class="fa fa-arrow-right fa-2x noselects d-none d-md-block" style="color:#148DD1;" aria-hidden="true"></i>
</div>
<div class="col-md-5">
<div class="form-group">
<select name="TargetLanguage" id="TargetLanguage" class="form-control" required>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<select name="Lektorat" class="form-control" id="Lektorat" required>
<option value="" selected disabled>Lektorat in der Festo Ges. erwünscht?</option>
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select>
</div>
<div class="form-group" id="inputArea2"></div>
<div class="form-group datetimepicker">
<!--<input name="date" type="date" class="form-control datetimepicker" placeholder="Wunschdatum">-->
<input name="date" type="text" id="datepicker" class="form-control" placeholder="Wunschdatum">
<div class="text-center" id="result2"></div>
</div>
<div class="form-group">
<select name="Terms" class="form-control" id="Terms" required>
<option value="" selected disabled>Enthält Ihr Dokument nicht abgestimmte Terminologie?</option>
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select>
</div>
<div class="form-group">
<select name="Screens" class="form-control" id="Screens" required>
<option value="" selected disabled>Enthält Ihr Dokument nicht überschreibbare Grafiken oder Screenshots?</option>
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select>
</div>
<div class="form-group" id="inputArea"></div>
<div class="form-group">
<textarea name="Comment" class="form-control" placeholder="Kommentar..."></textarea>
</div>
<div class="form-group">
<div class=" form-group custom-file">
<input name="fileToUpload[]" type="file" class="custom-file-input" id="file" multiple/>
<label class="custom-file-label" for="fileToUpload">Anhänge</label>
<div class="text-center" id="result3"></div>
</div>
</div>
<!--<script>
$('#file').bind('change', function() {
if (this.files[0].size/1024/1024 > 5){
$('#result3').html("<div class='alert alert-danger'>File size is too large, please submit a form and send the files using...</div>");
$('#result3').show();
}else{
$('#result3').hide();
}
});
</script>-->
<div class="form-group">
<div class="text-center" id="result"></div>
</div>
<div class="text-center">
<img id="loading-image" src="ajax-loader.gif" style="display:none;" />
</div>
<div class="form-group text-center">
<input type="submit" name="btnSubmit" class="btnContact" value="Submit" onclick="testas()"/>
</div>
<script>
if (isset($_GET['status'])) {
$status = $_GET['status'];
if ($status == 1) {
echo "Thank you for your message";
} else if ($status == 0) {
echo "Unable to send message";
}
}
</script>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="timepicker/jquery.timepicker.js"></script>
<script type="text/javascript" src="code.js"></script>
<script type="text/javascript" src="scriptDE.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
body {
background: url("https://www.festo-didactic.com/_resources/css/import/img/Festo_Didactic_002.jpg") no-repeat scroll center top;
--darkreader-inline-bgcolor: #000000;
}
.contact-form {
background: #fff;
margin-top: 5%;
margin-bottom: 5%;
width: 70%;
border-radius: 1rem;
}
.contact-form .form-control {
border-radius: .3rem;
}
.contact-image {
text-align: center;
}
.contact-image img {
border-radius: 0rem;
width: 11%;
height: 20%;
margin-top: -8%;
}
.contact-form form {
padding: 14%;
margin-bottom: -7%;
}
.contact-form form .row {
margin-bottom: -14%;
}
.contact-form h3 {
margin-bottom: 2%;
margin-top: -15%;
text-align: center;
color: #999;
}
.contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #148DD1;
font-weight: 600;
color: #fff;
cursor: pointer;
}
.btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #148DD1;
border: none;
cursor: pointer;
}
.btnContact {
margin-top: 5%;
padding: 5%;
}
.lang {
margin-bottom: 2%;
text-align: center;
}
a {
color: #148DD1 !important;
font-weight: 600;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
h3 {
font-family: 'arial';
}
.custom-control {
margin-left: -7%;
}
::-webkit-input-placeholder {
/* Edge */
color: rgb(82, 81, 81) !important;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgb(82, 81, 81) !important;
}
::placeholder {
color: rgb(82, 81, 81) !important;
}
input[type="checkbox"] + label::before {
content: '';
position: relative;
display: inline-block;
margin-right: 10px;
width: 20px;
height: 20px;
border-radius: .3rem;
background: rgb(228, 228, 228);
}
input[type="checkbox"] {
position: absolute;
}
input[type="checkbox"] + label {
display: block;
position: relative;
padding: 0 1.5rem;
margin-left: -3%;
}
input[type="checkbox"]:checked + label::before {
background: #148DD1;
}
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
top: 3px;
left: 27px;
border-left: 2px solid rgb(255, 255, 255);
border-bottom: 2px solid white;
height: 6px;
width: 13px;
transform: rotate(-45deg);
}
input[type="checkbox"] {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.cursor {
color: transparent;
text-shadow: 0 0 0 red;
}
.cursor:focus {
outline: none;
}
//Target language fill
$("#TargetLanguage").load("Selects/DEtargetL.html");
//Source language fill
$("#SourceLanguage").load("Selects/DEsourceL.html");
//Filling job type
$("#JobType").load("Selects/DEjobtype.html");
//Multiple files and size
$('#file').on('change',function filesizes() {
var names = $(this);
var files = $('#file')[0].files;
var totalSize = 0;
for (var i = 0; i < files.length; i++) {
totalSize += files[i].size/1024/1024;
}
if (totalSize > 17) {
$('#result3').html("<div class='alert alert-danger'>Attachment size is too large, after submission you will be redirected to Festo datatransfer website where you can send us your files.</div>");
$('#result3').show();
}else{
$('#result3').hide();
}
label = files[0].name;
if (files.length > 1) {
label = label + " and " + String(files.length - 1) + " more files"
}
names.next('.custom-file-label').html(label);
getTotal(totalSize);
});
//Validating boxes
function validateForm() {
var Client = document.forms["Form"]["Client"].value;
var CostCenter = document.forms["Form"]["CostCenter"].value;
var ProjectNumber = document.forms["Form"]["ProjectNumber"].value;
var ContactPerson = document.forms["Form"]["ContactPerson"].value;
var JobType = document.forms["Form"]["JobType"].value;
var SourceLanguage = document.forms["Form"]["SourceLanguage"].value;
var TargetLanguage = document.forms["Form"]["TargetLanguage"].value;
if (Client == null || Client == "", CostCenter == null || CostCenter == "", ProjectNumber == null || ProjectNumber == "", ContactPerson == null || ContactPerson == "", JobType == null || JobType == "", SourceLanguage == null || SourceLanguage == "", TargetLanguage == null || TargetLanguage == "") {
alert("Please Fill All Required Field");
return false;
}
}
//function alert() {
//$('#result2').html("<div class='alert alert-warning'>Bei Eilaufträgen bitte unbedingt anrufen.</div>");
//$('#result2').show();
//setTimeout(function() {
//$('#result2').hide();
//}, 9000);
//}
$("#Screens").change(function() {
var numInputs = $(this).val();
if (numInputs == "Ja") {
$("#inputArea").append('<select name="Screens2" class="form-control" id="Screens2" required>');
$("#Screens2").append('<option value=""selected disabled>Wenn ja, muss diese übersetzt werden?</option>');
$("#Screens2").append('<option value="Ja">Ja</option>');
$("#Screens2").append('<option value="Nein">Nein</option>');
} else {
$("#Screens2").remove();
}
});
$("#Lektorat").change(function() {
var numInputs = $(this).val();
if (numInputs == "Ja") {
$("#inputArea2").append('<input type="text" name="Lektorat2" class="form-control" id="Lektorat2" placeholder="Bitte nennen Sie uns Ihren Kontakt in der Gesellschaft." required>');
} else {
$("#Lektorat2").remove();
}
});
$(function() {
$('#datepicker').datepicker({
minDate: 'today',
dateFormat: 'yy-mm-dd',
onSelect: function () {
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
var myDate = $('#datepicker').datepicker("getDate");
var days = (myDate - today) / (1000 * 60 * 60 * 24);
if (days < 3){
$('#result2').html("<div class='alert alert-warning'>Bei Eilaufträgen bitte unbedingt anrufen.</div>");
$('#result2').show();
}else{
$('#result2').hide();
}
}
});
});
$("#contact").submit(function(evt) {
evt.preventDefault();
var formData = new FormData($(this)[0]);
SendMail(formData);
return false;
});
function checkform(form) {
// get all the inputs within the submitted form
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
// only validate the inputs that have the required attribute
if (inputs[i].hasAttribute("required")) {
if (inputs[i].value == "") {
// found an empty field that is required
alert("Please fill all required fields");
return false;
}
}
}
return true;
}
function getTotal(s) {
sizeIS = s;
}
function SendMail(formData) {
$.ajax({
url: 'contact.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
beforeSend: function() {
$("#loading-image").show();
},
success: function() {
$("#loading-image").hide();
if (sizeIS > 17){
window.location.replace("https://wenet.festo.online/sites/default/files/Festo%20Data%20Transfer%20Handbuch.pdf", '_blank');
window.open("https://datatransfer.festo.company ");
}else{
$('#result').html("<div class='alert alert-success'>Erfolgreich!</div>");
$('#result').show();
setTimeout( function () {
location.reload();
}, 4000 );
}
}
})
}
