initial commit

2022-06-01 00:54:58 +03:00 · 2022-06-01 00:54:58 +03:00 · a9092ad6a1
commit a9092ad6a1
parent 8144b7d51a
3 changed files with 91 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to nginx!</title>
+		<link rel="stylesheet" href="./style.css" />
+	</head>
+	<body>
+		<h1>Welcome to <p class="rotating inline">nginx</p>!</h1>
+		<p>If you see this page, the nginx web server is successfully installed and
+		working. Further configuration is required.</p>
+
+		<p>For online documentation and support please refer to
+		<a href="http://nginx.org/" id="l1">nginx.org</a>.<br/>
+		Commercial support is available at
+		<a href="http://nginx.com/" id="l2">nginx.com</a>.</p>
+
+		<p id="thxText"><em>Thank you for using nginx.</em></p>
+		
+		<script src="./runAway.js"></script>
+		<script>
+			initRunning(document.getElementById('l1'));
+			initRunning(document.getElementById('l2'));
+			initRunning(document.getElementById('thxText'));
+			initColor(document.getElementById('thxText'));
+		</script>
+	</body>
+</html>
--- a/runAway.js
+++ b/runAway.js
@ -0,0 +1,19 @@
+const rnd = (min, max) => {
+	const r = min + Math.random() * (min - max + 1);
+	return Math.floor(r);
+}
+
+const initRunning = (obj) => {
+	obj.style.position = 'absolute';
+	obj.style.transition = '0.09s';
+	obj.addEventListener('mouseover', () => {
+		obj.style.left = `${rnd(30, 50)}%`;
+		obj.style.top = `${rnd(30, 50)}%`;
+	});
+};
+
+const initColor = (obj) => {
+	setInterval(() => {
+		obj.style.color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
+	}, 100);
+};
--- a/style.css
+++ b/style.css
@ -0,0 +1,45 @@
+body {
+	width: 35em;
+	margin: 0 auto;
+	font-family: Tahoma, Verdana, Arial, sans-serif;
+}
+
+.inline {
+	display: inline-block;
+}
+
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.rotating {
+  -webkit-animation: rotating 2s linear infinite;
+  -moz-animation: rotating 2s linear infinite;
+  -ms-animation: rotating 2s linear infinite;
+  -o-animation: rotating 2s linear infinite;
+  animation: rotating 2s linear infinite;
+}