diff index.html @ 14:8f0b52a3cb69

add module on front page
author Paper <mrpapersonic@gmail.com>
date Mon, 31 May 2021 11:55:12 -0400
parents e7ca289b45ec
children 7bfa77838f33
line wrap: on
line diff
--- a/index.html	Mon May 31 11:21:27 2021 -0400
+++ b/index.html	Mon May 31 11:55:12 2021 -0400
@@ -1,98 +1,140 @@
-<!DOCTYPE html>
-<!-- i spent way too long making this look decent -->
-<head>
-	<title>Paper's website</title>
-	<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-	<link rel="manifest" href="icons/site.webmanifest">
-	<link rel="shortcut icon" href="icons/favicon.ico">
-	<meta name="msapplication-TileColor" content="#da532c">
-	<meta name="msapplication-config" content="icons/browserconfig.xml">
-	<meta name="theme-color" content="#ffffff">
-	<meta property="og:title" content="Paper's website">
-	<meta property="og:type" content="website">
-	<meta property="og:image" content="https://mrpapersonic.github.io/icons/android-chrome-512x512.png">
-	<meta property="og:url" content="https://mrpapersonic.github.io">
-	<meta property="og:description" content="hey!">
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<style>
-		.wrapper { 
-			height: 100%;
-			width: 100%;
-			left:0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			position: absolute;
-			background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
-			background-size: 1800% 1800%;
-			-webkit-animation: rainbow 18s ease infinite;
-			-z-animation: rainbow 18s ease infinite;
-			-o-animation: rainbow 18s ease infinite;
-			animation: rainbow 18s ease infinite;
-			z-index: -1;
-		}
-		@-webkit-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@-moz-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@-o-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@keyframes rainbow { 
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		div.box {
-			padding: 10px;
-			border: 2px solid black;
-			margin: auto;
-			width: 300px;
-			height: 200px;
-			background-color: white;
-			color: black;
-			text-shadow: none;
-			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-		}
-		div.disclaimer {
-			left: 5px;
-			bottom: 5px;
-			position: absolute;
-		}
-	</style>
-	<link rel="stylesheet" href="style.css">
-</head>
-<body>
-	<div class="wrapper"></div>
-	<h1>Heys!</h1>
-	<h2>welcome to MY AWESOME WEBSITE</h2>
-	<div class="box">
-		<h2>ABOUT ME!!!</h2>
-		<p>most people know me from <a style="color:blue;" href="https://youtube.com/c/paperytpmv">ytpmv</a>, but i also make <a style="color:blue;" href="https://modarchive.org/index.php?request=view_profile&query=92603">modules</a></p>
-		<p>member (owner?) of <a style="color:red;" href="https://1123.best">1123</a></p>
-	</div>
-	<p style="font-size:16px;"><a style="color:skyblue;" href="https://twitter.com/intent/user?user_id=858179488970100736">Twitter</a>  <a style="color:gray" href="https://steamcommunity.com/id/nikolaicube/">Steam</a>  <a style="color:red;" href="https://youtube.com/paperytpmv">YouTube</a></p>
-	<p style="line-height:10px;"> 
-		<a href="https://7-zip.org/"><img src="https://www.7-zip.org/logos/7zlogo01.png" width="88" height="31"></a> 
-		<a href="https://openmpt.org/"><img src="https://openmpt.org/img/openmpt-button-1.png" width="88" height="31"></a>
-		<a href="https://www.foobar2000.org/"><img src="https://www.foobar2000.org/button.png" width="88" height="31"></a><br><br>
-		<a href="https://modarchive.org/"><img src="img/modarchive.gif" width="88" height="31"></a>
-		<img src="img/brow.gif" width="88" height="31">
-		<a href="https://1123.best"><img src="https://1123.best/img/1123button.gif" width="88" height="31"></a><br><br>
-		<img src="img/1080p.gif" width="88" height="31">
-		<a href="https://cock.li"><img src="img/cockli.png" width="88" height="31"></a>
-		<img src="img/h-free-anim.gif" width="88" height="31">
-	</p>
-	<p><a href="cool.html">cool shit</a></p>
-	<div class="disclaimer">rainbow css stolen from <a href="https://codepen.io/nohoid/pen/kIfto">here</a></div>
-</body>
+<!DOCTYPE html>
+<!-- i spent way too long making this look decent -->
+<head>
+	<title>Paper's website</title>
+	<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+	<link rel="manifest" href="icons/site.webmanifest">
+	<link rel="shortcut icon" href="icons/favicon.ico">
+	<meta name="msapplication-TileColor" content="#da532c">
+	<meta name="msapplication-config" content="icons/browserconfig.xml">
+	<meta name="theme-color" content="#ffffff">
+	<meta property="og:title" content="Paper's website">
+	<meta property="og:type" content="website">
+	<meta property="og:image" content="https://mrpapersonic.github.io/icons/android-chrome-512x512.png">
+	<meta property="og:url" content="https://mrpapersonic.github.io">
+	<meta property="og:description" content="hey!">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		.wrapper { 
+			height: 100%;
+			width: 100%;
+			left:0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			position: absolute;
+			background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
+			background-size: 1800% 1800%;
+			-webkit-animation: rainbow 18s ease infinite;
+			-z-animation: rainbow 18s ease infinite;
+			-o-animation: rainbow 18s ease infinite;
+			animation: rainbow 18s ease infinite;
+			z-index: -1;
+		}
+		@-webkit-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@-moz-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@-o-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@keyframes rainbow { 
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		div.box {
+			padding: 10px;
+			border: 2px solid black;
+			margin: auto;
+			width: 300px;
+			height: 200px;
+			background-color: white;
+			color: black;
+			text-shadow: none;
+			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
+		}
+		div.disclaimer {
+			left: 5px;
+			bottom: 5px;
+			position: absolute;
+		}
+	</style>
+	<script>
+		window['libopenmpt'] = {};
+		libopenmpt.locateFile = function (filename) {
+			return filename;
+		};
+		libopenmpt.onRuntimeInitialized = function () {
+			var player;
+			if (document.referrer) {
+				init();
+				path = "overoff-f.mod";
+				if (player != undefined) {
+					player.load(path, afterLoad.bind(this, path));
+				}
+			}
+			else {
+				document.getElementById('button').style.visibility = "visible";
+			}
+			function init() {
+				if (player == undefined) {
+					player = new ChiptuneJsPlayer(new ChiptuneJsConfig(-1));
+				}
+				else {
+					player.stop();
+					player = undefined;
+				}
+			};
+			function afterLoad(path, buffer) {
+				player.play(buffer);
+			};
+			document.getElementById('button').onclick = function() {
+				init();
+				path = "overoff-f.mod";
+				if (player != undefined) {
+					player.load(path, afterLoad.bind(this, path));
+				}
+				document.getElementById('button').style.visibility = "hidden";
+			};
+		}
+	</script>
+	<script src="libopenmpt.js"></script>
+	<script src="chiptune2.js"></script>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="wrapper"></div>
+	<h1>Heys!</h1>
+	<h2>welcome to MY AWESOME WEBSITE</h2>
+	<div class="box">
+		<h2>ABOUT ME!!!</h2>
+		<p>most people know me from <a style="color:blue;" href="https://youtube.com/c/paperytpmv">ytpmv</a>, but i also make <a style="color:blue;" href="https://modarchive.org/index.php?request=view_profile&query=92603">modules</a></p>
+		<p>member (owner?) of <a style="color:red;" href="https://1123.best">1123</a></p>
+	</div>
+	<p style="font-size:16px;"><a style="color:skyblue;" href="https://twitter.com/intent/user?user_id=858179488970100736">Twitter</a>  <a style="color:gray" href="https://steamcommunity.com/id/nikolaicube/">Steam</a>  <a style="color:red;" href="https://youtube.com/paperytpmv">YouTube</a></p>
+	<p style="line-height:10px;"> 
+		<a href="https://7-zip.org/"><img src="https://www.7-zip.org/logos/7zlogo01.png" width="88" height="31"></a> 
+		<a href="https://openmpt.org/"><img src="https://openmpt.org/img/openmpt-button-1.png" width="88" height="31"></a>
+		<a href="https://www.foobar2000.org/"><img src="https://www.foobar2000.org/button.png" width="88" height="31"></a><br><br>
+		<a href="https://modarchive.org/"><img src="img/modarchive.gif" width="88" height="31"></a>
+		<img src="img/brow.gif" width="88" height="31">
+		<a href="https://1123.best"><img src="https://1123.best/img/1123button.gif" width="88" height="31"></a><br><br>
+		<img src="img/1080p.gif" width="88" height="31">
+		<a href="https://cock.li"><img src="img/cockli.png" width="88" height="31"></a>
+		<img src="img/h-free-anim.gif" width="88" height="31">
+	</p>
+	<p><a href="cool.html">cool shit</a></p>
+	<input id="button" type="submit" name="button" value="music" style="visibility: hidden;">
+	<div class="disclaimer">rainbow css stolen from <a href="https://codepen.io/nohoid/pen/kIfto">here</a></div>
+</body>