diff --git a/index.php b/index.php index 98eb3c5..5423d21 100644 --- a/index.php +++ b/index.php @@ -1,7 +1,7 @@ + +
+
+
+
+

Contact

+

Moussu Esteban

+

esteban.moussu@ik.me

+

20 Grande rue

+

52500 Broncourt

+
+ + +
+ +
+ + +
+ + + + + + +
+
+
+
+ + + \ No newline at end of file +require_once("../elements/footer.php"); +?> \ No newline at end of file diff --git a/scripts/sendMessage.php b/scripts/sendMessage.php new file mode 100644 index 0000000..2f8cb7b --- /dev/null +++ b/scripts/sendMessage.php @@ -0,0 +1,61 @@ + notifier +$pingOurs1 = "<@471304822016966667>"; + +// On récupère les valeurs dans le formulaires et on les mets en variables locales +$subject = $_POST["subject"]; +$name = $_POST["name"]; +$mail = $_POST["mail"]; +$message = $_POST["message"]; + +// Si les champs sont vides +if ($subject == "" || $name == "" || $mail == "" || $message == "") { + echo "Tous les champs doivent être remplis."; +} else { // Sinon on envoi via Webhook (j'ai recupéré l'envoi de webhook sur github je n'ai rien fais moi même) + $contenuMessage = $pingOurs1 . "\n\n"; + $contenuMessage .= "**Nouveau message depuis le formulaire de contact du portfolio**\n\n"; + $contenuMessage .= "**Sujet :** " . $subject . "\n"; + $contenuMessage .= "**Nom :** " . $name . "\n"; + $contenuMessage .= "**Mail :** " . $mail . "\n"; + $contenuMessage .= "**Message :**\n" . $message; + + $data = [ + "content" => $contenuMessage + ]; + + $dataJson = json_encode($data); + + $ch = curl_init($webhook); // On démarre une ressource curl + curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]); + curl_setopt($ch, CURLOPT_POST, 1); + curl_setopt($ch, CURLOPT_POSTFIELDS, $dataJson); + curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); + + $resultat = curl_exec($ch); + $codeHttp = curl_getinfo($ch, CURLINFO_HTTP_CODE); + + if ($codeHttp == 204) { // Si ça renvoi 204 alors le message a été correctement envoyé + curl_close($ch); // Fermer la ressource curl lancée + header("Location: ../pages/contact.php?success=1"); + exit(); + } else { // Sinon c'est que ça n'a pas été envoyé (discord down / webhook expiré / etcc...) + curl_close($ch); // Fermer la ressource curl lancée + echo "Le message n'a pas pu être envoyé sur Discord."; + } +} +?> \ No newline at end of file diff --git a/styles/primary_css.css b/styles/primary_css.css index 8fef10d..a23a317 100644 --- a/styles/primary_css.css +++ b/styles/primary_css.css @@ -387,4 +387,162 @@ main { .footer-links { justify-content: center; } +} + +/* ---- PAGE CONTACT ---- */ + +.contact-page { + width: 100%; + padding: 60px 20px 80px; + box-sizing: border-box; +} + +.contact-wrapper { + max-width: 1100px; + margin: 0 auto; +} + +.contact-card { + display: grid; + grid-template-columns: 320px 1fr; + gap: 32px; + background-color: #111116; + border: 1px solid #2a2a3e; + border-radius: 20px; + padding: 32px; + box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); +} + +.contact-info { + background: linear-gradient(180deg, #161622 0%, #111116 100%); + border: 1px solid #2a2a3e; + border-radius: 16px; + padding: 28px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.contact-title { + margin: 0 0 10px; + font-size: 32px; + font-weight: bold; + color: white; +} + +.contact-name { + margin: 0 0 18px; + font-size: 18px; + font-weight: 600; + color: #cfcfff; +} + +.contact-line { + margin: 0 0 10px; + font-size: 15px; + color: #aaaaaa; + line-height: 1.6; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} + +.contact-form input[type="text"], +.contact-form input[type="email"], +.contact-form textarea { + width: 100%; + background-color: #1a1a24; + border: 1px solid #2a2a3e; + border-radius: 10px; + color: white; + padding: 14px 16px; + font-size: 15px; + box-sizing: border-box; + transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; +} + +.contact-form textarea { + min-height: 180px; + resize: vertical; + font-family: Arial, sans-serif; +} + +.contact-form input::placeholder, +.contact-form textarea::placeholder { + color: #8f8fa8; +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: #6c63ff; + box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18); + background-color: #202030; +} + +.contact-form input[type="submit"] { + width: fit-content; + min-width: 220px; + background-color: #6c63ff; + color: white; + border: none; + border-radius: 10px; + padding: 14px 24px; + font-size: 15px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s ease, transform 0.2s ease; +} + +.contact-form input[type="submit"]:hover { + background-color: #5a52e0; + transform: translateY(-1px); +} + +.contact-form input[type="submit"]:active { + transform: translateY(0); +} + +@media (max-width: 860px) { + .contact-card { + grid-template-columns: 1fr; + } + + .contact-info { + padding: 24px; + } +} + +@media (max-width: 560px) { + .contact-page { + padding: 30px 14px 50px; + } + + .contact-card { + padding: 18px; + gap: 18px; + border-radius: 16px; + } + + .contact-grid { + grid-template-columns: 1fr; + } + + .contact-title { + font-size: 26px; + } + + .contact-form input[type="submit"] { + width: 100%; + min-width: 0; + } } \ No newline at end of file