Add files via upload

This commit is contained in:
gelis07
2021-10-04 17:09:00 +03:00
committed by GitHub
commit 943504d74a
3 changed files with 211 additions and 0 deletions

24
index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Page discord</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div class="Contact">
<h1 id="ContactText">Contact</h1>
<label class="Name-Input">
<input maxlength=37 minlength="2" id="NameInput" type="text" required/>
<span class="placeholder">Name</span>
</label>
<textarea maxlength ="2000" id="InputField" placeholder="Your message here"></textarea>
<button onclick="send()" id="SendMessage">SendMessage</button>
<h3 id="MessageSent">Message sent!</h3>
<h3 id="MessageFailed">Message failed!</h3>
</div>
</body>
</html>

128
main.css Normal file
View File

@@ -0,0 +1,128 @@
body{
background-color: #481D24;
}
.Contact{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
margin-bottom: 100px;
}
#ContactTip{
font-family: rubik;
text-align: center;
color: #FF9480;
font-size: 1rem;
}
#ContactText{
font-family: rubik;
color: #C69C72;
font-size: 5vw;
}
#InputField{
width: 50%;
height: 400px;
border: none;
border-radius: 20px;
background-color: #C5283D;
font-size: 1em;
font-family: rubik;
padding: 20px;
border: none;
outline: none;
}
#SendMessage{
position: absolute;
width: 8%;
height: 50px;
bottom: -8%;
right: 23.5%;
font-size: 1em;
border: none;
border-radius: 20px;
background-color: #009FB7;
color: #023C40;
font-family: rubik;
cursor: pointer;
animation: Btn1, 1s;
font-size: 1vw;
transition: background-color 1s;
}
#MessageSent{
position: absolute;
width: 8%;
height: 50px;
bottom: -18%;
right: 23.5%;
font-size: 1em;
border: none;
border-radius: 20px;
color: #72C675;
opacity: 0;
font-family: rubik;
cursor: pointer;
transition: opacity 2s;
}
#MessageFailed{
position: absolute;
width: 8%;
height: 50px;
bottom: -18%;
right: 23.5%;
font-size: 1em;
border: none;
border-radius: 20px;
color: #C67272;
opacity: 0;
font-family: rubik;
cursor: pointer;
transition: opacity 2s;
}
#SendMessage:hover{
animation: HoverBtn1, 1s;
background-color: #A8B5D2;
}
.Name-Input input{
border: none;
appearance: none;
padding: 12px;
border-radius: 3px;
width: 120%;
outline: none;
background-color: #C5283D;
font-family: rubik;
color: #222;
}
.Name-Input{
position: relative;
font-size: 14px;
padding-top: 20px;
margin-bottom: 20px;
font-family: rubik;
margin-right: 35%;
}
.Name-Input .placeholder{
position: absolute;
left: 12px;
color: #222;
opacity: 0.7;
top: calc(50% + 10px);
transform: translateY(-50%);
font-family: rubik;
transition:
top 0.3s ease,
font-size 0.3s ease,
color 0.3s ease;
}
.Name-Input input:valid + .placeholder{
top: 10px;
font-size: 10px;
color: #222;
}
.Name-Input input:focus + .placeholder{
top: 10px;
font-size: 10px;
color: #222;
}

59
main.js Normal file
View File

@@ -0,0 +1,59 @@
window.addEventListener("load", function () {
const loader = document.querySelector(".loader-wrapper");
console.log(loader)
loader.className += " hidden"; // class "loader hidden"
});
/*
whurl variable should be equal to your webhooks link!
On discord you create a webhook by going to
the server settings and from there to the
integrations tab, then click on webhooks and
press new webhook. Then copy the link and paste it
in the whurl variable.
Make sure to hide this link using https://javascriptobfuscator.com/Javascript-Obfuscator.aspx
if someone takes this link they can send messages to you with this webhook so make sure to
hide this link!
*/
whurl = ""
var str= "";
var name= "";
function f1(){
name = document.getElementById("NameInput").value;
str = document.getElementById("InputField").value;
console.log(document.getElementById("InputField").value)
}
function send(){
f1();
const msg = {
"content": str,
"username": name
};
console.log(msg)
if(str == ""){
document.getElementById("Message1").style.opacity = 1;
setTimeout(function(){
document.getElementById("Message1").style.opacity = 0;
}, 4000)
console.log("ERROR")
return;
}
try{
fetch(whurl + "?wait=true", {"method":"POST", "headers": {"content-type": "application/json"}, "body": JSON.stringify(msg)});
document.getElementById("InputField").value = "";
document.getElementById("MessageSent").style.opacity = 1;
setTimeout(function(){
document.getElementById("MessageSent").style.opacity = 0;
}, 4000)
} catch(e){
document.getElementById("MessageFailed").style.opacity = 1;
setTimeout(function(){
document.getElementById("MessageFailed").style.opacity = 0;
}, 4000)
}
}