forked from Mini-Sylar/Anime-Info-Platform
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
146 lines (145 loc) · 4.44 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php include 'contact-me.php';?>
<!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 | Anime Information Platform</title>
<link rel="stylesheet" href="../styles/style-contact.css" />
<link rel="icon" type="image/x-icon" href="./images/page-icon.png" />
<script
src="https://kit.fontawesome.com/df3ec59988.js"
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
></script>
<script type="text/javascript">
(function () {
emailjs.init("laUn5X52pMBQ3VyHw");
})();
</script>
<style>
@font-face {
font-family: DexaPro-Regular;
src: url(./fonts/DexaPro-Regular.ttf);
}
* {
font-family: DexaPro-Regular;
}
</style>
<script async src="https://cdn.splitbee.io/sb.js"></script>
</head>
<body>
<!-- Mobile Nav -->
<button type="button" class="hamburger">
<i class="fa-solid fa-bars"></i>
</button>
<div class="links-mobile">
<a href="/" class="links">Home</a>
<a href="./about.html" class="links">About</a>
<a href="./contact.html" class="links">Contact</a>
<!-- <a href="#" class="links">Subscription</a> -->
</div>
<!-- Nav Here -->
<nav class="navigation-desktop">
<div class="logo">LOGO</div>
<div class="links-desktop">
<a href="./" class="links">Home</a>
<a href="./about.html" class="links">About</a>
<a href="./contact.html" class="links">Contact</a>
<!-- <a href="#" class="links">Subscription</a> -->
</div>
</nav>
<!-- Main Body -->
<div class="mainpage">
<div class="contact-heading-container">
<h1
class="contact-heading"
style="font-weight: 800; text-align: center"
>
Contact
</h1>
<p>
Have any suggestions or complaints? or you just want to say hi? Feel
free to send me an email
</p>
</div>
<div class="main-body-container">
<form class="contact-me" id="contact_form">
<!-- Name -->
<label for="name">Full Name</label>
<input
type="text"
id="lname"
name="from_name"
placeholder="Your name.."
required
/>
<!-- Email Address -->
<label for="email_address">Email Address</label>
<input
type="email"
id="email"
name="reply_to"
placeholder="Enter your email"
required
/>
<!-- Subject -->
<label for="subject">What do you want to talk about</label>
<input
type="text"
id="subject"
name="subject"
placeholder="What are we talking about?"
required
/>
<!-- Message -->
<label for="message">Message</label>
<textarea
name="message"
placeholder="Your message goes in here..."
style="height: 20vh"
required
></textarea>
<input type="submit" name="Send" value="Message Me" class="submit" />
</form>
</div>
<div class="to-be-blurred"></div>
</div>
<script>
const mobile_nav = document.querySelector(".links-mobile");
const ham = document.querySelector(".hamburger");
ham.addEventListener("click", () => {
mobile_nav.classList.toggle("show-links");
if (mobile_nav.classList.contains("show-links")) {
document.body.style = `
overflow:hidden;
`;
} else {
document.body.style = `
overflow:scroll;
`;
}
});
</script>
<script>
const form = document.getElementById("contact_form");
form.addEventListener("submit", (e) => {
e.preventDefault();
emailjs.sendForm("service_email_sylar", "temp_email_sylar", form).then(
function () {
alert("Your message has been sent, expect a reply soon ☺");
form.reset();
window.location.reload();
},
function (error) {
alert("There was a problem sending your email, try again ☹");
}
);
});
</script>
</body>
</html>