radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make a baller Help welcome screen

main
Isaiah Odhner 2018-06-29 21:42:39 -04:00
parent d1174a0837
commit 982716e56c
5 changed files with 94 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
help/cloud-mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
help/clouds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

42
help/default.html
View File

@ -5,22 +5,30 @@
<title>Welcome to Help</title>
<link href="nobgcolor.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="35" topmargin="80">
<br>
<p><font size="2"><b>Welcome to Help</b></font></p>
<p>Use the Help system to learn more about Windows 98.</p>
<ul>
<li>Find answers to your questions.</li>
<li>Browse the online version of the <i>Getting Started</i> book.</li>
<li>Connect to the Web to get software updates.</li>
<li>Troubleshoot your system.</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<p><a href="memcopy.html">©1998 Microsoft Corporation. All rights reserved.</a></p>
<body>
<div id="background-animation"></div>
<div id="foreground-contents">
<a href="https://98.js.org/" target="_blank">
<img src="../images/98.js.org.svg" alt="98.js.org" id="os-logo" height="100">
</a>
<br>
<p><font size="2"><b>Welcome to Help</b></font></p>
<p>Use the Help system to learn more about <a href="https://98.js.org/" target="_blank">98.js.org</a> and JS Paint.</p>
<ul>
<li>Find answers to your questions.</li>
<li><strike>Browse the online version of the <i>Getting Started</i> book.</strike></li>
<li><strike>Connect to the Web to get software updates.</strike></li>
<li><strike>Troubleshoot your system.</strike></li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<p><a href="memcopy.html">Original documentation © 1998 Microsoft Corporation, all rights reserved.</a></p>
</div>
<!-- <script src="../lib/jquery.min.js"></script> -->
<script src="vaporwave.js"></script>
</body>
</html>

29
help/nobgcolor.css
View File

@ -1,7 +1,8 @@
/* Cascading Style Sheet for IE4 build 1008+ */
body {
background: url("flag&clouds.gif") no-repeat;
/* background: url("clouds.jpg") repeat, url("cloud-mask.png") no-repeat;
background-blend-mode: normal, multiply; */
font-size: 70%;
font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
/* Chrome apps have text selection disabled by default */
@ -9,6 +10,32 @@ body {
cursor: auto;
}
html,
body {
margin: 0;
height: 100%;
}
#background-animation {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* background: url("clouds.jpg") repeat, url("cloud-mask.png") no-repeat; */
overflow: hidden;
}
#foreground-contents {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin-left: 35px;
margin-top: 10px;
overflow: auto;
}
a:link {
color: #0000CC;
}

41
help/vaporwave.js Normal file
View File

@ -0,0 +1,41 @@
var clouds_img = document.createElement("img");
clouds_img.src = "clouds.jpg";
var mask_img = document.createElement("img");
mask_img.src = "cloud-mask.png";
// var something_img = document.createElement("img");
// something_img.src = "p_paint.gif";
var canvas = document.createElement("canvas");
document.getElementById("background-animation").append(canvas);
var ctx = canvas.getContext("2d");
var animate = function () {
rAF_ID = requestAnimationFrame(animate);
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;
var clouds_scale = 1;
var clouds_width = clouds_img.width * clouds_scale;
var clouds_height = clouds_img.width * clouds_scale;
var x_extent = (clouds_width - canvas.width) / 2;
var y_extent = (clouds_height - canvas.height) / 2;
var x_interval_ms = 19000;
var y_interval_ms = 7000;
var now = performance.now();
ctx.drawImage(
clouds_img,
Math.sin(now / x_interval_ms) * x_extent - x_extent,
Math.cos(now / y_interval_ms) * y_extent - y_extent,
clouds_width,
clouds_height
);
ctx.globalCompositeOperation = "screen";
ctx.drawImage(mask_img, 0, 0);
ctx.fillStyle = "white";
ctx.fillRect(0, mask_img.naturalHeight, mask_img.naturalWidth, canvas.height);
ctx.fillRect(mask_img.naturalWidth, 0, 50, canvas.height); // for scrollbar
// ctx.globalCompositeOperation = "source-over";
// ctx.drawImage(something_img, Math.sin(now / 5000) * 501, Math.cos(now / 5000) * 510);
};
animate();