-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
154 lines (139 loc) · 7.15 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
147
148
149
150
151
152
153
154
<!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">
<meta name="description" content="Tim Goalen software engineer and tv composer website">
<meta name="keywords" content="tim goalen, software engineer, tv composer, london, uk">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
<title>Tim Goalen - Software Engineer & TV Composer</title>
</head>
<body>
<header>
<!-- Title and navigation -->
<nav class="navbar">
<div>
<a href="index.html">
<h1 id="logo">TIM GOALEN</h1>
</a>
</div>
<!-- Hamburger Icon -->
<button aria-label="toggle menu" id="nav-btn">
<i class="fa-solid fa-bars"></i>
</button>
<!-- Nav links -->
<div class="navbar-links">
<ul>
<li>
<a href="software-engineer.html" class="link">Software Engineer</a>
</li>
<li>
<a href="tv-composer.html" class="link">TV Composer</a>
</li>
<li>
<a href="contact.html" class="link" id="active-link">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!-- Contact form -->
<section id="contact-page">
<div class="h2-container">
<h2 class="contact-title">Contact</h2>
</div>
<form id="contact-form">
<label for="name">Name</label>
<input type="text" id="name" name="user_name" autocomplete="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="user_email" autocomplete="email" required>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="5" required></textarea>
<input type="submit" value="Send">
</form>
<div id="spinner-overlay" class="hidden">
<div id="sending-email-spinner"></div>
</div>
</section>
<!-- SVG Backgrounds -->
<div id="svg-background">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="dots" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="rgba(16, 118, 177, 0.21)" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dots)" />
</svg>
</div>
<div id="svg-top-mask">
<svg viewBox="0 0 320 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M320 67.8024L309.333 71.5692C298.667 75.336 277.333 82.8696 256 73.4526C234.667 64.0356 213.333 37.668 192 35.7846C170.667 33.9012 149.333 56.502 128 58.3854C106.667 60.2688 85.3333 41.4348 64 33.9012C42.6667 26.3676 21.3333 30.1344 10.6667 32.0178L-3.43728e-05 33.9012L-3.73366e-05 2.79753e-05L10.6666 2.70428e-05C21.3333 2.61103e-05 42.6666 2.42453e-05 64 2.23802e-05C85.3333 2.05152e-05 106.667 1.86502e-05 128 1.67852e-05C149.333 1.49202e-05 170.667 1.30551e-05 192 1.11901e-05C213.333 9.3251e-06 234.667 7.46008e-06 256 5.59506e-06C277.333 3.73004e-06 298.667 1.86502e-06 309.333 9.3251e-07L320 0L320 67.8024Z"
fill="url(#paint0_linear_7931_575)" />
<defs>
<linearGradient id="paint0_linear_7931_575" x1="160" y1="78" x2="160" y2="1.39876e-05"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FAF9F6" stop-opacity="0" />
<stop offset="1" stop-color="#FAF9F6" />
</linearGradient>
</defs>
</svg>
</div>
<div id="svg-bottom-mask">
<svg viewBox="0 0 320 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 10.1976L10.6667 6.43079C21.3333 2.66398 42.6667 -4.86962 64 4.54739C85.3333 13.9644 106.667 40.332 128 42.2154C149.333 44.0988 170.667 21.498 192 19.6146C213.333 17.7312 234.667 36.5652 256 44.0988C277.333 51.6324 298.667 47.8656 309.333 45.9822L320 44.0988V78H309.333C298.667 78 277.333 78 256 78C234.667 78 213.333 78 192 78C170.667 78 149.333 78 128 78C106.667 78 85.3333 78 64 78C42.6667 78 21.3333 78 10.6667 78H0V10.1976Z"
fill="url(#paint0_linear_7931_574)" />
<defs>
<linearGradient id="paint0_linear_7931_574" x1="160" y1="0" x2="160" y2="78"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FAF9F6" stop-opacity="0" />
<stop offset="1" stop-color="#FAF9F6" />
</linearGradient>
</defs>
</svg>
</div>
</main>
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/1898f2e833.js" crossorigin="anonymous"></script>
<!-- link to external javaScript file -->
<script src="assets/js/script.js"></script>
<!-- emailjs script -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script>
(function () {
emailjs.init("G7BPi3BMVxT9tP53B");
})();
window.onload = function () {
spinner = document.getElementById("spinner-overlay");
document.getElementById('contact-form').addEventListener('submit', function (event) {
event.preventDefault();
// Show the spinner when the form is submitted
spinner.classList.remove('hidden');
spinner.classList.add('show-flex');
// IDs from EmailJS account
emailjs.sendForm('default_service', 'contact_form', this)
.then(function () {
// Hide the spinner after the email is sent
spinner.classList.add('hidden');
spinner.classList.remove('show-flex');
// Redirect to message received page
window.location.href = "message-received.html";
}, function (error) {
// Hide the spinner in case of an error
spinner.classList.add('hidden');
spinner.classList.remove('show-flex');
alert('FAILED...', error);
});
});
}
</script>
</body>
</html>