-
Notifications
You must be signed in to change notification settings - Fork 1
/
contact.html
136 lines (114 loc) · 4.4 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
<!DOCTYPE html>
<head>
<title>contact us</title>
<link rel="stylesheet" href="./css/top-vibration.css" >
<link rel="stylesheet" href="./css/bubble.css" >
<script src="https://cdn.jsdelivr.net/npm/[email protected]" ></script>
<link rel="stylesheet" href="./css/retro-navbar.css" />
<link rel="stylesheet" href="./css/contact-form.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="https:https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_dTEgy7iI0xPUvE7OaVaMe");
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = Math.random() * 100000 | 0;
// these IDs from the previous steps
emailjs.sendForm('contact_service', 'contact_form', this)
.then(function() {
console.log('SUCCESS!');
}, function(error) {
console.log('FAILED...', error);
});
});
}
</script>
</head>
<body>
<nav class="top-right open">
<a class="disc l3" href="./music.html">
<div>music & videos</div>
</a>
<a class="disc l4" href="https://www.utblifestyle.store/" target="_blank">
<div>store |> </div>
</a>
<a class="disc l5 toggle">
<img src="./img/utb.png" width="110px" height="110px">
</a>
</nav>
<div class="styled-txt" style="padding-left:20px; padding-top: 12px;">
<a href="./index.html" style="cursor: pointer;">
<img src="./img/utb.png" width="110px" height="110px">
</a>
</div>
<div class="background">
<div class="container">
<div class="screen">
<div class="screen-header">
<div class="screen-header-left">
<div class="screen-header-button close"></div>
<div class="screen-header-button maximize"></div>
<div class="screen-header-button minimize"></div>
</div>
<div class="screen-header-right">
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
<div class="screen-header-ellipsis"></div>
</div>
</div>
<div class="screen-body">
<div class="screen-body-item left">
<div class="app-title">
<span>contact</span>
<span>us</span>
</div>
<!-- <div class="app-contact">CONTACT INFO : +62 81 314 928 595</div> -->
</div>
<div class="screen-body-item">
<div class="app-form" id="contact-form">
<div class="app-form-group">
<input class="app-form-control" placeholder="name" name="sender_name" >
</div>
<div class="app-form-group">
<input class="app-form-control" placeholder="email" name="sender_email">
</div>
<!-- <div class="app-form-group">
<input class="app-form-control" placeholder="CONTACT NO">
</div> -->
<div class="app-form-group message">
<textarea class="app-form-control" placeholder="message" name="sender_message"></textarea>
</div>
<div class="app-form-group buttons">
<button type="submit" class="app-form-button">send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'hey!';
toggle_close_text = '<img src="./img/utb.png" width="112px" height="112px">';
toggle.addEventListener('click', function() {
nav.classList.toggle('open');
if (nav.classList.contains('open')) {
toggle.innerHTML = toggle_close_text;
} else {
toggle.innerHTML = toggle_open_text;
}
}, false);
setTimeout(function(){
nav.classList.toggle('open');
}, 800);
</script>
</body>
</html>