github_aid_ts/src/html/seppuku.html at main · omar-azmi/github_aid_ts · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Seppuku Aid</title>
	<script src="./seppuku.js" type="module"></script>
	<link rel="stylesheet" href="../css/modern-normalize.min.css">
	<style>
		#seppuku-div {
			--width: 75vmin;
			--text-rotation: 15deg;
			--text-left-percent: 50;
			--text-width: calc(var(--width) * (1.0 - var(--text-left-percent) / 100));
			position: relative;
			overflow: hidden;
		}

		@media screen and (max-width: 640px) {
			#seppuku-div {
				--width: 100vmin;
			}
		}

		#seppuku-div>img {
			width: var(--width);
			cursor: pointer;
		}

		@keyframes seppuku-text-animation {
			50% {
				transform: rotate(var(--text-rotation)) scale(1.05);
			}

			0%,
			100% {
				transform: rotate(var(--text-rotation)) scale(0.95);
			}
		}

		#seppuku-div>span {
			position: absolute;
			left: calc(var(--width) * var(--text-left-percent) / 100 * cos(var(--text-rotation)));
			top: calc(var(--text-width) / 2 * sin(var(--text-rotation)));
			width: var(--text-width);
			animation: seppuku-text-animation 2s cubic-bezier(0.5, 0, 1, 0.5) infinite;
			font-family: monospace;
			font-size: large;
			font-weight: bold;
			text-align: center;
			color: yellow;
			pointer-events: none;
			padding: 1rem 0;
		}
	</style>
</head>

<body>
	<div id="seppuku-div">
		<img alt="how to seppuku" />
		<span>insert weabooness here</span>
	</div>
</body>

</html>