-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (138 loc) · 4.57 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>email oasis</title>
<link rel="stylesheet" href="/style.css" />
<style>
body {
width: 100%;
font-size: 14px;
}
.container {
width: 700px;
margin: 30px auto;
font-size: 14px;
}
.box {
border: 1px solid black;
display: flex;
}
img {
display: block;
margin-left: 10px;
height: 200px;
}
form {
margin: 10px 10px 10px 20px;
width: 100%;
}
input, textarea {
width: 100%;
font-size: 14px;
padding: 10px;
}
textarea{
height: 300px;
font-family: HK Grotesk;
border-radius: 4px;
border: 1px solid black;
}
button {
float: right;
}
a {
font-style: underline;
}
#youtube {
position: absolute;
bottom: 0;
left: 0;
}
#youtube p {
cursor: pointer;
}
iframe {
display: none;
}
#description {
display: none;
text-style: italic;
}
.show {
display: block;
}
.success {
font-size: 100px;
z-index: 99;
position: absolute;
top: 100px;
left: 0px;
transform: rotate(-90deg);
}
</style>
<script>
function emailFunction() {
console.log("thing has been clicked");
var to = document.getElementById('to').value;
var subject = document.getElementById('subject').value;
var body = document.getElementById('body').value;
console.log(subject);
console.log(body);
if (body.includes("hello")) {
window.alert("no! you can not use the word 'hello'! bad email manners. we have all already said hello in this plane of consciousness");
} else if (body.includes("thanks")) {
window.alert("no! you can not use the word 'thanks'! bad email manners. what you have done and what i have done need no justification");
} else if (body.includes(" I ")) {
window.alert("no! you can not use the word 'I'! bad email manners. who are you, and who is I?");
} else if (body.includes("you")) {
window.alert("no! you can not use the word 'you'! bad email manners. who are you, and who is I?");
} else {
const emailStuff = "mailto:" + to + "?subject=" + subject + "&body=" + body;
document.getElementById('send-email').href = emailStuff;
// var div = document.createElement('div');
// div.innerHTML = "<large>success</large>";
// // set style
// div.style.color = 'black';
// // better to use CSS though - just set class
// div.setAttribute('class', 'success'); // and make sure myclass has some styles in css
// document.body.appendChild(div);
}
}
function showYoutube() {
document.getElementById('embed').setAttribute("class", "show");
}
</script>
</head>
<body>
<div class="container">
<p>
<i>your email oasis</i>
</p>
<div class="box">
<img
src="https://cdn.glitch.global/20a45724-d89f-4469-aeef-79ed771d94c8/butterflyrockplant.gif?v=1716139433564"
/>
<form>
<label for="to">to:</label><br>
<input type="email" id="to" name="to"><br><br>
<label for="subject">subject:</label><br>
<input type="text" id="subject" name="subject"><br><br>
<label for="body">body:</label><br>
<textarea name="body" id="body"></textarea><br><br>
<button id="button">
<a id ="send-email" onclick="emailFunction()" target="_blank">send email</a>
</button>
</form>
</div>
</div>
<div id="youtube">
<p onclick="showYoutube()">
<i>would you like some background music?</i>
</p>
<iframe id="embed" width="190" height="150" src="https://www.youtube.com/embed/fNIfbdi41ho?si=VgCOfpYNVprv-jK-&controls=1&start=5&autoplay=1" title="Windows 95 startup sound slowed down x23" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body>
</html>
<!-- href="mailto:[email protected]?subject=This is an email&body=Hello! This is the body of my email. Thanks!" -->