Ajout de la page de contact

2023-01-17 22:21:28 +01:00 · 2023-01-17 22:21:28 +01:00 · c15793f395
commit c15793f395
parent 3c9943bd47
3 changed files with 178 additions and 1 deletions
--- a/assets/css/contact.css
+++ b/assets/css/contact.css
@ -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;
+    }
+}
--- a/assets/js/contact.js
+++ b/assets/js/contact.js
@ -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';
+});
--- a/contact/index.php
+++ b/contact/index.php
@ -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>
 <html lang="fr">
    <head>
@ -6,6 +115,7 @@
        <title>Elite Solar</title>
        <link rel="stylesheet" href="../assets/css/style.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">
        <script src="../assets/js/header.js"></script>
    </head>
@ -21,7 +131,11 @@
                <li><a href="../faq">FAQ</a></li>
            </ul>
        </header>
-        <main></main>
+        <main>
+            <div>
+                <h1>Nous contacter</h1>
+                <?= select_profile() ?>
+        </main>
        <footer>
            <div id="social">
                <p>Suivez-Nous</p>
@ -53,5 +167,6 @@
            </div>
            <p id="copyright">© <?= date("Y") ?> Elite Solar. Créé par Lyanis Souidi, Tom Moguljak et Romain Journeau.</p>
        </footer>
+        <script src="../assets/js/contact.js"></script>
    </body>
 </html>