Skip to content

Commit

Permalink
Page contact
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sydywiizox
Sydywiizox committed Nov 5, 2024
1 parent 361476e commit 4a6c104
Show file tree
Hide file tree
Showing 6 changed files with 427 additions and 4 deletions.
158 changes: 158 additions & 0 deletions contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FFLeague</title>
<link rel="shortcut icon" href="image/FFL.png" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<script src="https://code.jquery.com/jquery-3.6.3.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js" defer></script>
<script src="script/contact.js" defer></script>


<link
href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap"
rel="stylesheet"
/>
<link
rel="preload"
href="style/style.css"
as="style"
onload="this.rel='stylesheet'"
/>
<script
src="https://kit.fontawesome.com/3a1761a339.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header class="header">
<nav class="header-nav">
<ul class="header-nav-side">
<a href="index.html"
><li class="header-nav-item">Accueil</li></a
>
<a href=""
><li class="header-nav-item">Nos Jeux</li></a
>
<a href=""><li class="header-nav-item">Planning</li></a>
</ul>
<img
src="image/FFL.svg"
alt="Logo FFleague"
class="header-logo"
/>
<ul class="header-nav-side">
<a href=""><li class="header-nav-item">L'équipe</li></a>
<a href=""><li class="header-nav-item">FAQ</li></a>
<a href="contact.html"><li class="header-nav-item active">Contact</li></a>
</ul>
</nav>
</header>
<main class="main contact">
<section class="contact-us" id="contact-section">
<form id="contactForm" action="">
<div class="section-heading">
<h2>Contactez nous</h2>
</div>

<div class="inputField">
<input
type="text"
name="pseudo"
id="pseudo"
placeholder="Pseudo discord"
required
/>
<span class="valid_info_name"></span>
</div>

<div class="inputField">
<input
type="text"
name="structure"
id="structure"
placeholder="Ton équipe / Structure (facultatif)"
required
/>
<span class="valid_info_name"></span>
</div>

<div class="inputField">
<input
type="Email"
name="email"
id="email"
placeholder="Ton email"
required=""
/>
<span class="valid_info_email"></span>
</div>

<div class="inputField">
<textarea
name="message"
id="message"
placeholder="Ton message"
></textarea>
<span class="valid_info_message"></span>
</div>

<div class="inputField btn">
<button type="submit" id="form-submit" class="main-gradient-button">
Envoyez un message
</button>
</div>
</form>
</section>
<div class="tooltips"></div>
</main>
<footer class="footer">
<nav class="footer-nav">
<ul class="footer-nav-list">
<li class="footer-nav-item">
<a
target="_blank"
href="https://www.instagram.com/ffleaguettv/"
><i class="fa-brands fa-instagram"></i
></a>
</li>
<li class="footer-nav-item">
<a
target="_blank"
href="https://www.youtube.com/channel/UCFWNJbxg7pC6BGyZCAp9waQ"
><i class="fa-brands fa-youtube"></i
></a>
</li>
<li class="footer-nav-item">
<a
target="_blank"
href="https://www.tiktok.com/@ffleaguettv"
><i class="fa-brands fa-tiktok"></i
></a>
</li>
<li class="footer-nav-item">
<a target="_blank" href="https://discord.gg/cJ7BSsT7"
><i class="fa-brands fa-discord"></i
></a>
</li>
<li class="footer-nav-item">
<a
target="_blank"
href="https://www.twitch.tv/ffleaguettv"
><i class="fa-brands fa-twitch"></i
></a>
</li>
<li class="footer-nav-item">
<a target="_blank" href="https://x.com/FFLeagueTTV"
><i class="fa-brands fa-x-twitter"></i
></a>
</li>
</ul>
</nav>
<p class="copyright">© 2024 FF LEAGUE. Tous droits réservés.</p>
</footer>
</body>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<ul class="header-nav-side">
<a href=""><li class="header-nav-item">L'équipe</li></a>
<a href=""><li class="header-nav-item">FAQ</li></a>
<a href=""><li class="header-nav-item">Contact</li></a>
<a href="contact.html"><li class="header-nav-item">Contact</li></a>
</ul>
</nav>
</header>
Expand Down
4 changes: 2 additions & 2 deletions rl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
><li class="header-nav-item">Accueil</li></a
>
<a href=""
><li class="header-nav-item active">Nos Jeux</li></a
><li class="header-nav-item">Nos Jeux</li></a
>
<a href=""><li class="header-nav-item">Planning</li></a>
</ul>
Expand All @@ -42,7 +42,7 @@
<ul class="header-nav-side">
<a href=""><li class="header-nav-item">L'équipe</li></a>
<a href=""><li class="header-nav-item">FAQ</li></a>
<a href=""><li class="header-nav-item">Contact</li></a>
<a href="contact.html"><li class="header-nav-item active">Contact</li></a>
</ul>
</nav>
</header>
Expand Down
26 changes: 26 additions & 0 deletions script/contact.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
emailjs.init("cUlZmP9K1lZ5iTdHB"); // Remplacez par votre USER_ID d'EmailJS

document.getElementById("contactForm").addEventListener("submit", function (event) {
event.preventDefault(); // Empêche le rechargement de la page

const pseudo = document.getElementById("pseudo").value;
const structure = document.getElementById("structure").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;

emailjs.send("service_x1fim3c", "template_8dop4qm", {
pseudo: pseudo,
structure: structure,
email: email,
message: message,
}).then(
function (response) {
alert("Message envoyé avec succès !");
document.getElementById("message").value = "";
},
function (error) {
console.error("Erreur:", error); // Affiche l'erreur dans la console
alert("Échec de l'envoi du message. Vérifiez la console pour plus de détails.");
}
);
});
143 changes: 142 additions & 1 deletion style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ body::after {
*/

main {
min-height: calc(100vh - (min(126px,calc(126/1536*100*1vw)) + min(93px,calc(93/1920*100*1vw)) + min(42px,calc(42/1920*100*1vw)) * 2));
min-height: calc(100vh - (min(126px,calc(126/1536*100*1vw)) + min(93px,calc(93/1920*100*1vw)) + min(42px,calc(42/1920*100*1vw))));
}

/* HEADER */
Expand Down Expand Up @@ -453,3 +453,144 @@ main {
margin-left: 20px;
list-style-type: disc;
}

/* Contact */

.main.contact {
display: flex;
align-items: center;
justify-content: center;
}

section {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
margin-block: min(120px,calc(120/1920*100*1vw))
}

section.contact-us #contactForm {
position: relative;
display: block;
width: min(590px,calc(590/1920*100*1vw));
height: auto;
text-align: center;
}

.section-heading h2 {
font-size: min(40px,calc(40/1920*100*1vw));
font-weight: 700;
color: var(--pink);
margin-bottom: min(30px,calc(30/1920*100*1vw));
}

input,
textarea {
width: 100%;
position: relative;
display: block;
background-color: transparent;
font-size: min(20px,calc(20/1920*100*1vw));
font-weight: 700;
font-family: "Unbounded", sans-serif;
border: 2px solid var(--pink);
box-shadow: none;
color: #fff;
outline-color: #9e9e9e;
padding: 15px;
}

input {
height: 40px;
}

input::placeholder,
textarea::placeholder {
color: #ffffffb9;
}

textarea {
height: 300px;
padding: 15px;
resize: none;
}

.contact-us span {
font-size: 12px;
margin-bottom: 20px;
}

.valid_info_name,
.valid_info_email,
.valid_info_message {
display: inline-block;
font-size: 13px;
margin: 5px 2px;
}

.valid {
border: 2px solid green;
outline-color: green;
}

.invalid {
border: 2px solid red;
outline-color: red;
}

.btn {
display: inline-flex;
width: 100%;
justify-content: center;
}

#form-submit {
position: relative;
float: right;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
color: #212121;
background: var(--pink);
padding: 12px 20px;
border: none;
outline: none;
cursor: pointer;
transition: all 0.3s;
transition: all 0.3s;
font-weight: 700;
font-family: "Unbounded", sans-serif;
}

#form-submit:disabled {
border: 1px solid #9e9e9e;
background: transparent;
color: #9e9e9e;
transition: none;
transform: none;
cursor: default;
}

#form-submit:hover:disabled {
border: 1px solid #9e9e9e;
color: #9e9e9e;
background: transparent;
transition: none;
transform: none;
cursor: default;
}

button:active {
transform: scale(0.95);
}

button:focus {
outline: none;
}

button.ghost {
background-color: transparent;
border-color: #fff;
}
Loading

0 comments on commit 4a6c104

Please sign in to comment.