-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (291 loc) · 13.8 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='description' content='I Hate School. | Note: This webpage is not character enhancement. I am not hard-working. If that sentence makes you feel less shameful for not learning how to make webpages.'>
<title>I Hate School</title>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<style>
body {
font-family: aptos, sans-serif;
background-image: url('Yorkshire_pigs_at_animal_sanctuary.jpg');
background-size: cover;
background-position: center;
background-color: #28231f;
text-align: center;
margin: 0;
padding: 0;
}
.content {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
margin: 0px auto;
max-width: 93%;
width: 1000px;
}
table {
width: 100%;
border-spacing: 10px;
margin: 20px auto;
}
th, td {
font-size: 1.2em;
color: #000;
}
a {
font-size: 1em;
color: #000;
text-decoration: underline;
overflow-wrap: break-word;
}
li {
text-align: left;
}
p {
font-size: 1.2em;
color: #000;
}
.note {
font-weight: lighter;
}
th.above {
text-align: center;
}
th.left {
text-align: right;
padding-right: 10px;
}
.qr-section {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 20px auto;
}
.qr-section img {
width: 40%;
max-width: 200px;
height: auto;
margin: 10px;
}
.qr-section p {
margin: 10px;
text-align: left;
}
hr {
border: none;
border-bottom: solid 5px;
}
.image-to-hover {
position: relative;
text-decoration: underline;
}
.image-to-hover img {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
max-width: 50vw;
max-height: 50vh;
width: auto;
height: auto;
}
.image-to-hover:hover img {
display: block;
bottom: 100%;
}
@media (max-width: 600px) {
.content {
padding: 10px;
}
th, td {
font-size: 1em;
}
p {
font-size: 1em;
}
.qr-section {
flex-direction: column;
}
.qr-section img {
width: 60%;
margin: 10px auto;
}
}
#connect-with-me {
background-color: #f9f9f9; /* Light grey background */
padding: 20px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
border: 1px solid #ddd; /* Light border */
}
#connect-with-me form {
display: flex;
flex-direction: column;
}
#connect-with-me label {
font-size: 1em;
margin-bottom: 5px;
color: #333; /* Dark text for readability */
}
#connect-with-me input[type="text"],
#connect-with-me input[type="email"],
#connect-with-me textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
font-size: 1em;
box-sizing: border-box;
}
#connect-with-me textarea {
resize: vertical; /* Allow vertical resizing only */
}
#connect-with-me button {
background-color: #28231f; /* Modern blue color */
color: #fff; /* White text */
border: none;
padding: 10px 15px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
#connect-with-me button:hover {
background-color: #000000; /* Darker blue for hover effect */
}
</style>
</head>
<body>
<div class="content">
<h1>Porkifiable</h1>
<table>
<tr>
<th class="left"><a href="https://discord.com/channels/@me" target="_blank">Discord</a> username</th>
<td>search for my Discord name "<strong>Porkifiable</strong>" in the "Add Friend" page in Discord</td>
</tr>
<tr>
<th class="left">Email</th>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<th class="left">Medium (where I post)</th>
<td><a href="https://medium.com/@porkifiableoinking" target="_blank">https://medium.com/@porkifiableoinking</a></td>
</tr>
<tr>
<th class="left">OneDrive</th>
<td><a href="https://1drv.ms/f/s!AoS3CwuJesEcjGGxQgc2T_GJ55el" target="_blank">text files</a></td>
</tr>
<tr>
<th class="left">vCard</th>
<td><a href="https://me-qr.com/entry/vcard/Wr2h6tBO" target="_blank">Oinking Pork</a></td>
</tr>
<tr>
<th class="left">DeviantArt</th>
<td><a href="https://www.deviantart.com/tzyrebj" target="_blank">TZYrebj</a></td>
</tr>
<tr>
<th class="left">YouTube</th>
<td><a href="https://www.youtube.com/@poi-cd8yo" target="_blank">https://www.youtube.com/@poi-cd8yo</a></td>
</tr>
<tr>
<th class="left">Amazon books<br><div class="note">some texts from the links above as short books</div></th>
<td>
<ul>
<li><a href="https://www.amazon.com/Glimpses-Rebelliousness-Shame-Porkifiable/dp/B0D5BCY74N" target="_blank">Glimpses of Rebelliousness and Shame</a></li>
<li><a href="https://www.amazon.com/Shame-Rebelliousness-Porkifiable-ebook/dp/B0D5DK4FJR" target="_blank">Shame and Rebelliousness</a></li>
</ul>
</td>
</tr>
</table>
<p>Feel free to reach out and connect with me, if you want to talk about something, discuss your current situation, or if you wish your words to appear next to mine, or if you are seeking friendship, seeking <strong>any kind of help in a non-disciplinary sense</strong>.</p>
<div class="qr-section">
<img src="poipoipoipoipoipoipoipoipoi.github.io.png" alt="Porkifiable page QR code linked to https://poipoipoipoipoipoipoipoipoi.github.io/bio">
<p>Scan <a href="poipoipoipoipoipoipoipoipoi.github.io Porkifiable.png" download target="_blank">the QR code</a> to visit this page<br><a href="https://poipoipoipoipoipoipoipoipoi.github.io/bio">poipoipoipoipoipoipoipoipoi.github.io/bio</a></p>
</div>
<h2>Files<br><div class="note">(CC BY-ND 4.0)</div></h2>
<table>
<th class="above">
<th>Plain text</th>
<th>Office Open XML</th>
<th>PDF</th>
<th>eBook</th>
</th>
<tr>
<th class="left">Glimpses of Rebelliousness and Shame</th>
<td><a href="Glimpses of Rebelliousness and Shame.txt" download target="_blank">txt</a></td>
<td></td>
<td><a href="Glimpses of Rebelliousness and Shame.pdf" download target="_blank">pdf</a></td>
<td><a href="Glimpses of Rebelliousness and Shame.epub" download target="_blank">epub</a></td>
</tr>
<tr>
<th class="left">Shame and Rebelliousness</th>
<td><a href="Shame and Rebelliousness.txt" download target="_blank">txt</a></td>
<td><a href="Shame and Rebelliousness.docx" download target="_blank">docx</a></td>
<td><a href="Shame and Rebelliousness.pdf" download target="_blank">pdf</a></td>
<td><a href="Shame and Rebelliousness.epub" download target="_blank">epub</a></td>
</tr>
<tr>
<th class="left">He Kidnapped Himself</th>
<td><a href="He Kidnapped Himself.txt" download target="_blank">txt</a></td>
<td><a href="He Kidnapped Himself.docx" download target="_blank">docx</a></td>
<td></td>
<td><a href="He Kidnapped Himself.epub" download target="_blank">epub</a></td>
</tr>
</table>
<h2>Visitors and others can fill out the form.<br><div class="note">This form can be used to talk to me. Discord or email is a more immediate way to reach me.</div></h2>
<p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdXOl_tWBHZpBX8aH4SQm0UdMhZFlvlOQJUI7A-UbMXcPOz9Q/viewform">https://docs.google.com/forms/d/e/1FAIpQLSdXOl_tWBHZpBX8aH4SQm0UdMhZFlvlOQJUI7A-UbMXcPOz9Q/viewform</a></p>
<h2>Unclear or unimportant things</h2>
<p>
<a href="pig_File_Viewer/index.html" target="_blank">.pig file viewer</a> <a href="pig_File_Viewer/test.pig" download target="_blank">test.pig</a> |
<a href="poetic.txt" download target="_blank">poetic.txt</a> |
<a href="https://character.ai/chat/JuIbXXY87aKGLVaR1PS431Jn2eVazrm85Ygr2dKKKaM" target="_blank">my bot on character.ai</a> |
<a href="piggy Jeopardy.pptx" download target="_blank">piggy Jeopardy.pptx</a> |
<a href="https://hosted.weblate.org/user/Discord-Porkifiable" target="_blank">Hosted Weblate</a> |
<a href="Multi-point_Gradient_Canvas/index.html" target="_blank">multi-point gradient canvas</a> |
<a href="Image_Color_Reduction_Tool/index.html" target="_blank">image color reduction tool</a> |
<a href="https://namemc.com/profile/the_PIGGY_one.1" target="_blank">Minecraft name (NameMC): the_PIGGY_one</a> |
<a href="7-Segment_Display_Converter/7-Segment_Display_Converter.html" target="_blank">7-segment display converter</a> |
<a href="darts.exe" download target="_blank">darts.exe</a> <a href="darts.cpp" download target="_blank">darts.cpp</a> |
<a href="chinese.lng" download target="_blank">translation</a> for <a href="https://www.copyhandler.com" target="_blank">Copy Handler</a> |
<a href="Equivalent_Unit_Price_Calculator/index.html" target="_blank">equivalent unit price calculator</a> |
<a href="Minecraft_Thingy_Link_List/index.html" target="_blank">Minecraft thingy link list</a> |
<a href="Is_a_pig_in_Minecraft_hard_or_soft/index.html" target="_blank">Is a pig in Minecraft hard or soft?</a> |
<a href="Unicode_Ligature_and_Digraph_Splitter/index.html" target="_blank">Unicode ligature and digraph splitter</a> |
<a href="Symbol_Degenerator/index.html" target="_blank">symbol degenerator</a> |
<a href="Masturbation/index.html" target="_blank">Masturbation</a> |
<a href="me hugging.jpg" class="image-to-hover" download target="_blank">
me hugging
<img src="me hugging.jpg" alt="me hugging">
</a> |
<a href="https://www.whatbeatsrock.com/user/porkifiableoinkingmedium/custom" target="_blank">custom mode on "what beats rock"</a>. I'm in <a href="https://discord.gg/cDqSkABVjw" target="_blank">the Discord server for online game "what beats rock"</a> and am called "Porkifiable" in the server. <strong>This is a way you can add me as your Discord friend.</strong>
</p>
<hr>
<p><a href="https://discord.com/channels/@me" target="_blank">Discord</a> Username: Porkifiable<br>Email address: <a href="mailto:[email protected]">[email protected]</a></p>
<section id="connect-with-me">
<form action="https://api.emailjs.com/api/v1.0/email/send" method="post">
<label for="message">Message me. Include your contact information.</label>
<textarea id="message" name="message" rows="5" placeholder="Include your contact information. (Email. If you put things like Discord username here, make sure it is set to be searchable (generally, not only in-server) and it is allowed that others friend you through name search.)"></textarea>
<button type="submit">submit</button>
</form>
</section>
<p>I look forward to hearing from you. <strong>If you need anything in any sense, please contact me immediately.</strong></p>
</div>
<script>
emailjs.init("9TeE9aIdcgv6Gf6i0"); // 初始化 EmailJS
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认表单提交
emailjs.sendForm("service_ysfqgk9", "template_a0a41zm", this)
.then(function(response) {
console.log("Sent successfully", response);
alert("Message sent successfully!");
}, function(error) {
console.log("Failed to send", error);
alert("Failed to send message.");
});
});
</script>
</body>
</html>