Ajout de la page de contact
This commit is contained in:
parent
3c9943bd47
commit
c15793f395
55
assets/css/contact.css
Normal file
55
assets/css/contact.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
input[type=text], input[type=email], select, textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 6px;
|
||||||
|
resize: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: var(--c-b-primary);
|
||||||
|
padding: 15px 50px;
|
||||||
|
margin-right: 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 0px;
|
||||||
|
color: var(--c-a-primary);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--c-a-secondary);
|
||||||
|
color: var(--c-b-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.active {
|
||||||
|
background-color: var(--c-a-secondary);
|
||||||
|
color: var(--c-b-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact-info a[href^="tel:"]::before {
|
||||||
|
content: "☎️ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact a[href^="mailto:"]::before {
|
||||||
|
content: "✉️ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
display: grid;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
.contact {
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
assets/js/contact.js
Normal file
7
assets/js/contact.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
textarea = document.getElementById('message');
|
||||||
|
|
||||||
|
textarea.setAttribute('style', 'height:' + (textarea.scrollHeight) + 'px;overflow-y:hidden;');
|
||||||
|
textarea.addEventListener("input", function () {
|
||||||
|
this.style.height = 'auto';
|
||||||
|
this.style.height = (this.scrollHeight) + 'px';
|
||||||
|
});
|
||||||
@ -1,3 +1,112 @@
|
|||||||
|
<?php
|
||||||
|
function contact_query($query_params) : string {
|
||||||
|
$url = parse_url($_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . ($_SERVER["SERVER_PORT"] != "80" || "443" ? ":" . $_SERVER["SERVER_PORT"] : "") . $_SERVER["REQUEST_URI"]);
|
||||||
|
|
||||||
|
isset($url['query']) ? parse_str($url['query'], $params) : $params = array();
|
||||||
|
$params = array_merge($params, $query_params);
|
||||||
|
|
||||||
|
if (isset($params['profile']) && $params['profile'] == 'business') {
|
||||||
|
if (isset($params['subject']) && $params['subject'] == 'warranty') {
|
||||||
|
unset($params['subject']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($params['profile']) && $params['profile'] == 'consumer') {
|
||||||
|
if (isset($params['subject']) && $params['subject'] == 'integration') {
|
||||||
|
unset($params['subject']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$url['query'] = http_build_query($params);
|
||||||
|
|
||||||
|
return $url['scheme'] . '://' . $url['host'] . $url['path'] . '?' . $url['query'];
|
||||||
|
}
|
||||||
|
|
||||||
|
function contact_form($profile, $subject) : string {
|
||||||
|
$text = '</div>
|
||||||
|
<div class="contact">
|
||||||
|
<div class="right" id="contact-info">
|
||||||
|
<h3>Elite Solar</h3>
|
||||||
|
<p><a href="https://www.google.com/maps/place/8FW49MXP%2B3P" target="_blank">Route forestière Hurtault, 77300 Fontainebleau</a></p>
|
||||||
|
<p><a href="tel:+33160746800">+33 1 60 74 68 00</a></p>
|
||||||
|
<p><a href="mailto:elitesolar.contact77@gmail.com">elitesolar.contact77@gmail.com</a></p>
|
||||||
|
</div>
|
||||||
|
<form class="left" method="post">
|
||||||
|
<h3>Formulaire de contact</h3>
|
||||||
|
<div class="field">
|
||||||
|
<label for="name">Nom</label><br>
|
||||||
|
<input type="text" id="name" name="name" placeholder="Votre nom.." required><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="email">Adresse électronique</label><br>
|
||||||
|
<input type="email" id="email" name="email" placeholder="Votre adresse électronique.." required><br>
|
||||||
|
</div>';
|
||||||
|
|
||||||
|
if ($profile == 'business') {
|
||||||
|
$text .= '<input type="radio" name="type" value="business" hidden checked>
|
||||||
|
<div class="field"">
|
||||||
|
<label for="entreprise">Entreprise</label><br>
|
||||||
|
<input type="text" id="entreprise" name="entreprise" placeholder="Nom de votre entreprise.." required><br>
|
||||||
|
</div>';
|
||||||
|
} else echo '<input type="radio" name="type" value="consumer" hidden checked>';
|
||||||
|
|
||||||
|
if ($subject == 'integration') {
|
||||||
|
$text .= '<input type="text" name="subject" value="integration" hidden>';
|
||||||
|
} else $text .= '<label for="subject">Sujet</label><br>
|
||||||
|
<input type="text" id="subject" name="subject" placeholder="Le sujet de votre demande.." required><br>';
|
||||||
|
|
||||||
|
$text .= '<div class="field">
|
||||||
|
<label for="message">Message</label><br>
|
||||||
|
<textarea id="message" name="message" placeholder="Votre message.."></textarea><br>
|
||||||
|
</div>
|
||||||
|
<input class="button" type="submit" value="Envoyer">
|
||||||
|
</form>
|
||||||
|
</div>';
|
||||||
|
|
||||||
|
return $text;
|
||||||
|
}
|
||||||
|
function select_subject($profile) : string {
|
||||||
|
$text = ' et votre demande concerne';
|
||||||
|
if (isset($_GET["subject"]) && $_GET["subject"] == 'warranty') {
|
||||||
|
$text .= " <a href='" . contact_query(array("subject" => "")) . "'>la garantie Solar Glass</a>.</h2>";
|
||||||
|
$text .= "<p>La <a href='https://www.service-public.fr/particuliers/vosdroits/F11094' target='_blank'>garantie légale de conformité</a>
|
||||||
|
est assuré par le fabricant intégrant la technologie Solar Glass dans ses appareils, en cas de problème concernant Solar Glass sur votre appareil,
|
||||||
|
merci donc de <b>contacter directement le fabricant de votre appareil</b>.</p>";
|
||||||
|
} elseif (isset($_GET["subject"]) && $_GET["subject"] == 'integration') {
|
||||||
|
$text .= " <a href='" . contact_query(array("subject" => "")) . "'>l'intégration de Solar Glass dans vos produits</a>.</h2>";
|
||||||
|
$text .= contact_form($profile, $_GET["subject"]);
|
||||||
|
} elseif (isset($_GET["subject"]) && $_GET["subject"] == 'other') {
|
||||||
|
$text .= " <a href='" . contact_query(array("subject" => "")) . "'>autre chose</a>.</h2>";
|
||||||
|
$text .= contact_form($profile, $_GET["subject"]);
|
||||||
|
} else {
|
||||||
|
$text .= "...</h2>";
|
||||||
|
if ($profile == 'business') $text .= "<a class='button' href='" . contact_query(array("subject" => "integration")) ."'>L'intégration de Solar Glass dans vos produits</a>";
|
||||||
|
|
||||||
|
if ($profile == 'consumer') $text .= "<a class='button' href='" . contact_query(array("subject" => "warranty")) . "'>La garantie Solar Glass</a>";
|
||||||
|
|
||||||
|
$text .= "<a class='button' href='" . contact_query(array("subject" => "other")) . "'>Autre chose</a></div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return $text;
|
||||||
|
}
|
||||||
|
function select_profile() : string {
|
||||||
|
$text = '';
|
||||||
|
$text .= "<h2>Vous êtes";
|
||||||
|
if (isset($_GET["profile"]) && $_GET["profile"] == 'business') {
|
||||||
|
$text .= " <a href='" . contact_query(array("profile" => "")) . "'>une entreprise</a>";
|
||||||
|
$text .= select_subject('business');
|
||||||
|
} else if (isset($_GET["profile"]) && $_GET["profile"] == 'consumer') {
|
||||||
|
$text .= " <a href='" . contact_query(array("profile" => "")) . "'>un particulier</a>";
|
||||||
|
$text .= select_subject('consumer');
|
||||||
|
} else $text .= "...</h2>
|
||||||
|
<a class='button' href=" . contact_query(array("profile" => "business")) . ">Une entreprise</a>
|
||||||
|
<a class='button' href=" . contact_query(array("profile" => "consumer")) . ">Un particulier</a></div>";
|
||||||
|
|
||||||
|
return $text;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
@ -6,6 +115,7 @@
|
|||||||
<title>Elite Solar</title>
|
<title>Elite Solar</title>
|
||||||
<link rel="stylesheet" href="../assets/css/style.css">
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
<link rel="stylesheet" href="../assets/css/header.css">
|
<link rel="stylesheet" href="../assets/css/header.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/contact.css">
|
||||||
<link rel="stylesheet" href="../assets/css/footer.css">
|
<link rel="stylesheet" href="../assets/css/footer.css">
|
||||||
<script src="../assets/js/header.js"></script>
|
<script src="../assets/js/header.js"></script>
|
||||||
</head>
|
</head>
|
||||||
@ -21,7 +131,11 @@
|
|||||||
<li><a href="../faq">FAQ</a></li>
|
<li><a href="../faq">FAQ</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
<main></main>
|
<main>
|
||||||
|
<div>
|
||||||
|
<h1>Nous contacter</h1>
|
||||||
|
<?= select_profile() ?>
|
||||||
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div id="social">
|
<div id="social">
|
||||||
<p>Suivez-Nous</p>
|
<p>Suivez-Nous</p>
|
||||||
@ -53,5 +167,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<p id="copyright">© <?= date("Y") ?> Elite Solar. Créé par Lyanis Souidi, Tom Moguljak et Romain Journeau.</p>
|
<p id="copyright">© <?= date("Y") ?> Elite Solar. Créé par Lyanis Souidi, Tom Moguljak et Romain Journeau.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="../assets/js/contact.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user