<div id="contact">
	<form>
		<input id="name" type="text" name="name" placeholder="Name" autocomplete="name" required/>
		<input id="mail" type="email" name="mail" placeholder="Email" autocomplete="email" required/>
		<textarea id="text" name="text" placeholder="Message" required></textarea>
		<input type="hidden" name="proj" value="nicopr" />
		<input id="send" type="submit" value="Send"/>
	</form>
</div>

#contact {
	width: 100%;
	display: flex;
	justify-content: center;
}

form {
	width: 100%;
	max-width: 480px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#name, #mail, #text, #send {
	box-sizing: border-box;
	-webkit-appearance: none;
	outline: none;
	color: var(--text-color);
	border: none;
	border-radius: 0;
	width: 100%;
	font-size: 1.2em;
	line-height: 1.2em;
	font-family: inherit;
	background: transparent;
}

#name::placeholder, 
#mail::placeholder, 
#text::placeholder {
	opacity: .4;
}

#name, #mail {
	padding: .4rem 0;
	border-bottom: solid 1px var(--high-color);
}

#text {
	margin-top: 1.5rem;
	resize: none;
	border: solid 1px var(--high-color);
	height: 320px;
	padding: .4rem;
}

#send {
	padding: .4rem 0;
	cursor: pointer;
	font-size: 1.3em;
	background: none;
	width: auto;
	align-self: end;
}

window.addEventListener(
	"load", 
	() => {
		const nnm = document.querySelector("#name");
		const txt = document.querySelector("#text");
		const btn = document.querySelector("#send");
		const fra = navigator.language.startsWith("fr");
		if(fra) 
			nnm.placeholder = "Nom";
		const snd = fra ? "Envoyer" : "Send";
		btn.value = snd;
		const disp = msg => {
			btn.value = msg;
			setTimeout(() => {
				btn.value = snd;
			}, 3456);
		};
		document.querySelector("form")
		.addEventListener(
			"submit", 
			evt => {
				evt.preventDefault();

				fetch(atob("aHR0cHM6Ly92b2lkLm5pY29wci5mci9tc2c="), {
					method: "POST",
					headers: {
						"Content-Type": "application/json"
					},
					body: JSON.stringify(Object.fromEntries(new FormData(evt.target)))
				})
				.then(res => res.json())
				.then(res => {
					if(res.ok) {
						txt.value = "";
						disp((fra ? "Envoyé" : "Sent") + "!");
					}
					else {
						disp((fra ? "Erreur" : "Fail") + "!")
					}
				})
				return false;
			}
		);
	}
);