Windows95WebsiteTemplate/index.html
2025-01-14 11:19:56 -07:00

437 lines
24 KiB
HTML

<!--<!DOCTYPE html>-->
<html>
<head>
<!--Title the page whatever you want-->
<title>Windows 95</title>
<!--Both the link and font face tag are required on every page if you want the styling to work correnctly-->
<link rel="stylesheet" href="scripts/styles.css">
<style>
@font-face {
font-family: wind95;
src: url(fonts/w95fa.woff);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=0.45">
</head>
<!--The wallpaper color, usefull if you want to change that-->
<body style="background-color:#008282;">
<!--Jquery initialization-->
<script src="scripts/jquery-3.7.1.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<!--This is the alert popup-->
<!--This is what appears when the user first loads the page-->
<div id="alert" class="appdiv" style="position: absolute; width: 28%; height: 22%; z-index: 30; left: 30%; top: 100px; max-height: 300px; min-height:200px; min-width: 400px;">
<div class="appdivheader"><div class="apptitle">Alert</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div style="display: inline-block; padding: 30px; margin-right:15px"><img src="images/alert.png" height="30%" class="pixeled"></div>
<!--In order for it to work right with the image, it must be 3 lines. If you need less a <br> can be used instead-->
<div style="display: inline-block;">Currently running v1.6<br>Updated 12/17/2024 with note:<br>Added a login screen and an editable notepad</div><br>
<br><div style="display: flex;justify-content: center;"><div style="border-style: outset;display: inline-block; cursor:pointer" class="frameclose">Accpet and Close</div></div>
</div>
<!--The My Computer app-->
<!--It is connected to the My Computer icon-->
<!--I'm using this for the version number and such-->
<!--This is the one thing I really ask you don't touch cause it's always cool when you give credit where credit is due-->
<div id="mycomputer" class="appdiv" style="position: absolute; width: 31%; height: 39%; z-index: 1; left: 80px; top: 60px; min-width: 600px; max-height: 420px; min-height: 385px;">
<div class="appdivheader"><div class="apptitle">My Computer</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div class="netmail">
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; View &nbsp; Help</div>
<br style="font-size: 3px;">
</div>
<div class="appcontent" style="width: 97%; height: 79.25%; max-height: 320px;">
<a target="_blank" href="https://github.com/Breebee-The-Yote/Windows95WebsiteTemplate">Windows 95 Website Template</a> by <a target="_blank" href="https://github.com/Breebee-The-Yote" style="text-decoration: none;color:black">Breebee</a><br>
Running version 1.6<br>
Added a login screen and an editable notepad
</div>
</div>
<!--The Recycle Bin app-->
<!--It is connected to the Recycle Bin icon-->
<div id="recycle" class="appdiv" style="position: absolute; width: 31%; height: 39%; z-index: 2; left: 80px; top: 250px; min-width: 600px; max-height: 420px; min-height: 385px;">
<div class="appdivheader"><div class="apptitle">Recycle Bin</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div class="netmail">
<br style="font-size: 2px;">
<div class="notepadheader" style="display: inline-block;margin-top:5px">&nbsp; File &nbsp; Edit &nbsp; View &nbsp; Help</div>
<div class="notepadheader" style="border-style:outset; cursor:pointer;float:right; margin-right:10px;padding:2px;margin-top: 1px;" onclick="recycle()"> Empty Recycle Bin</div>
<p style="font-size: 10px;"></p>
<div>
&nbsp;<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:13%">Name</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:23%">Original Location</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:17.5%">Date Deleted</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:17%">Type</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:17%">Size</div></div>
</div><br style="font-size: 2px;">
<div class="appcontent" style="width: 97%; height: 68%; max-height: 300px;">
<div id="bincontent">
share.ico &nbsp;&nbsp;
C:\WINDOWS\... &nbsp;&nbsp;&nbsp;
12/18/2024 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
ICO Image &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1,662KB<br>
UwU.gif &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
C:\WINDOWS\... &nbsp;&nbsp;&nbsp;
12/17/2024 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
GIF Image &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2,305KB<br>
OwO.gif &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
C:\WINDOWS\... &nbsp;&nbsp;&nbsp;
12/16/2024 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
GIF Image &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1,430KB<br>
</div>
</div>
<div id="recycleconfirm" class="appdiv" style="position: absolute; width: 35%; height: 60%; z-index: 29; left: 15%; top: 80px; max-height: 300px; min-height:200px; min-width: 400px;">
<div class="appdivheader"><div class="apptitle">Confirm File Delete</div></div>
<div style="display: inline-block; padding: 30px; margin-right:15px"><img src="images/alert.png" height="30%" class="pixeled"></div>
<div style="display: inline-block;">Are you sure you want to delete these files?<br>(this action is permanent)<br>&nbsp;</div><br>
<br><div style="display: flex;justify-content: center;"><div style="border-style: outset;display: inline-block; cursor:pointer; padding-left:20px; padding-right:20px" class="frameclose" onclick="emptybin()">Yes</div><span style="margin-right:30px"></span><div onclick="$('#recycleconfirm').hide()" style="border-style: outset;display: inline-block; cursor:pointer; padding-left:20px; padding-right:20px" class="frameclose">No</div></div>
</div>
</div>
<!--The Folder app-->
<!--It is connected to the Folder icon-->
<div id="folder" class="appdiv" style="position: absolute; width: 31%; height: 39%; z-index: 3; left: 80px; top: 420px; min-width: 600px; max-height: 420px; min-height: 385px;">
<div class="appdivheader"><div class="apptitle">Icons</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div class="netmail">
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; View &nbsp; Help</div>
<br style="font-size: 3px;">
</div>
<div class="appcontent" style="width: 97%; height: 79.25%; max-height: 320px;">
<div class="smolicon"><img src="images/icons/My Computer.ico" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">My Computer</span></div>
<div class="smolicon"><img src="images/icons/Recycle Bin with paper.ico" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Recycle Bin with paper</span></div>
<div class="smolicon"><img src="images/icons/Empty Recycle Bin.ico" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Empty Recycle Bin</span></div>
<div class="smolicon"><img src="images/icons/Folder.ico" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Folder</span></div>
<div class="smolicon"><img src="images/buttons/start.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Start</span></div>
<div class="smolicon"><img src="images/buttons/back.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Back</span></div>
<div class="smolicon"><img src="images/buttons/close.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Close</span></div>
<div class="smolicon"><img src="images/buttons/home.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Home</span></div>
<div class="smolicon"><img src="images/buttons/nextring.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Next Webring</span></div>
<div class="smolicon"><img src="images/buttons/random.gif" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Random</span></div>
<div class="smolicon"><img src="images/alert.png" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Alert</span></div>
<div class="smolicon"><img src="images/icons/Notepad.ico" class="pixeled" width="50px"><p style="font-size: 5px;"></p><span class="smolicontext">Notepad</span></div>
</div>
</div>
<!--The Internet Mail app-->
<!--It is connected to the About Me button-->
<div id="about" class="appdiv" style="position: absolute; width: 31%; height: 39%; z-index: 4; left: 10px; top: 100px; min-width: 600px; max-height: 420px; min-height: 385px;">
<div class="appdivheader"><div class="apptitle">Internet Mail</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div class="netmail">
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; View &nbsp; Mail &nbsp; Help</div>
<br style="font-size: 5px;">
<div class="notepadheader" style="line-height: 24px;">&nbsp; &nbsp; Folders<div class="locationdiv" style="width:86.5%;">Inbox</div></div>
<br style="font-size: 8px;">
<div>
&nbsp;<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:30.7%">From</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:30.7%">Subject</div>
<div class="notepadheader" style="display: inline-block;border-style: outset;padding:2px;width:30.7%">Recieved</div></div>
<br style="font-size: 3px;">
<!--This is the section with the username, title, and date-->
<!--The date is dynamically updated to the current one-->
<!--It may look like an absurd amout of &nbsp; but that's the amount of space it needed and I don't know how else to do it-->
<div class="appcontent" style="width: 97%; height: 6%">Username
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; About Me
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="date">current</span></div>
</div><br style="font-size: 2px;">
<!--The message content or in this case, the about me paragraph-->
<div class="appcontent" style="width: 97%; height: 51%; max-height: 195px;">
Generic about me page
</div>
</div>
<!--The Notepad app-->
<!--It is connected to the Archive button-->
<!--This example contains an iframe as the content to create a semi-dynamic app-->
<div id="archive" class="appdiv" style="position: absolute; width: 32%; height: 85%; z-index: 6; left: 33%; top: 3%; max-height: 1000px; min-width: 600px;">
<div class="appdivheader"><div class="apptitle">Archive - Notepad</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; Search &nbsp; Help</div>
<br style="font-size: 2px;">
<!--This is the iframe, change the src to whatever file you want to use-->
<iframe class="notepad" style="width: 98.5%; height: 91.6%" src="archive.html" id="notepad"></iframe>
</div>
<!--The Netscape app-->
<!--It is connected to the Outgoing button-->
<!--Includes an example to use multiple webrings without compromising the appearance-->
<!--With proper html/js knowledge, more webrings can be added-->
<div id="outgoing" class="appdiv" style="position: absolute; width: 31%; height: 43%; z-index: 5; right: 15px; top: 300px; min-width: 600px; max-height: 445px; min-height: 420px;">
<div class="appdivheader"><div class="apptitle">Netscape - [file:///C:|WINDOWS/DESKTOP/outlinks.txt]</div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; Go &nbsp; Bookmarks &nbsp; Options &nbsp; Directory &nbsp; Windows &nbsp; Help</div>
<br style="font-size: 5px;">
<div class="notepadheader" style="line-height: 25px;">&nbsp; &nbsp; Location:<div class="locationdiv" style="width:84%;">file:///C:|WINDOWS/DESKTOP/outlinks.txt</div></div>
<br style="font-size: 10px;">
<div class="webringouter">
<!--The first webring example includes a random button, the second does not but it can be added/removed if needed-->
<div id="genericwebring" class="webring">&nbsp;&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/back.gif" height="30px" class="pixeled">
<br>Previous
</div>&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/home.gif" height="30px" class="pixeled">
<br>Generic Webring
</div>&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/random.gif" height="30px" class="pixeled">
<br>Random
</div>&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/next.gif" height="30px" class="pixeled">
<br>Next
</div>&nbsp;
</div>
<!--The second webring example-->
<div id="secondwebring" class="webring">&nbsp;&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/back.gif" height="30px" class="pixeled">
<br>Previous
</div>&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/home.gif" height="30px" class="pixeled">
<br>Second Webring
</div>&nbsp;
<div class="webringinner" onclick="window.location.href='#'"><img src="images/buttons/next.gif" height="30px" class="pixeled">
<br>Next
</div>&nbsp;
</div>
<!--This is the button to cycle through the webrings so you probably shouldn't touch it unless you know what you're doing-->
<div id="nextwebring" class="webringinner" onclick="nextring()"><img src="images/buttons/nextring.gif" height="30px" class="pixeled"><br>Next Webring</div>
</div>
<br style="font-size: 5px;">
<!--This is the content section where you can put your links and such-->
<div class="appcontent" style="width: 97%; height: 56%; max-height: 240px;">
<a href="#">Generic outlink 1</a> <br>
<a href="#">Generic outlink 2</a> <br>
<a href="#">Generic outlink 3</a>
</div>
</div>
<!--The Imaging app-->
<!--It is connected to the the images in the Icons folder-->
<div id="imaging" class="appdiv" style="position: absolute; width: 600px; height: 400px; z-index: 7; left: 130px; top: 400px; max-height: 420px; min-height: 385px;">
<div class="appdivheader"><div class="apptitle"><span id="imagingtitle">untitled - Imaging</span></div><img src=images/buttons/close.gif width=32px class="appbutton frameclose"></div>
<div class="netmail">
<br style="font-size: 2px;">
<div class="notepadheader">&nbsp; File &nbsp; Edit &nbsp; View &nbsp; Page &nbsp; Zoom &nbsp; Annotation &nbsp; Help</div>
<br style="font-size: 3px;">
</div>
<div id="imagingimage" class="appcontent" style="width: 97%; height: 79.25%; max-height: 320px; padding:20px">
<img src="images/icons/My Computer.ico" class="pixeled" height="80%">
</div>
</div>
<!--The login screen-->
<!--Without this the startup sound effect won't autoplay and I want it to do that-->
<div id="loginscreen" style="position:absolute;width:100%;height:100%;z-index:32;background-color:#008282;;left:0px;top:0px;max-height: 1000px;">
<div class="appdiv" style="position:absolute;width:30%;height:27%;z-index:33;left:34%;top:15%">
<div class="appdivheader"><div class="apptitle">Login</div></div>
<br style="font-size: 15px;">
<center><div class="appcontent" style="width: 90%; height: 50%; max-height: 340px; padding-left:5px; padding-right:5px; padding-top: 15px;">
Note: This website was built on Firefox at 1920x1080 however it should work fine on most browsers and sizes<br>
This website also features audio. If you have an aversion to audio, please mute this tab
</div></center>
<br style="font-size: 10px;">
<div style="display: flex;justify-content: center;"><div style="border-style: outset;display: inline-block; cursor:pointer" onclick="startwindows()">Accpet and Close</div></div>
</div>
</div>
<!--The sidebar-->
<!--It is connected to the Start button-->
<!--I use it for blinkies but you could really put anything here-->
<div class="sidebar" id="sidebar" style="width: 200px; height: 400px; left: 10px; bottom: 80px; z-index: 0;">
<!--This first section is the Windows 95 logo-->
<div style="float: left;width:10%; height: 100%;">
<img src="images/sidebar.gif" height="100%" class="pixeled">
</div>
<!--This second section is the blinkies-->
<div style="float: right;width:85%; height: 100%;padding-top:6px">
<img src="images/blinkies/transyourgender.gif" class="pixeled" width="100%">
<p style="font-size: 7px;"></p>
<img src="images/blinkies/pepsi.gif" class="pixeled" width="100%">
<p style="font-size: 7px;"></p>
<img src="images/blinkies/color.gif" class="pixeled" width="100%">
<p style="font-size: 7px;"></p>
<img src="images/blinkies/cassette.gif" class="pixeled" width="100%">
<p style="font-size: 7px;"></p>
<img src="images/blinkies/madewithwindows95.gif" class="pixeled" width="100%">
<p style="font-size: 7px;"></p>
<img src="images/blinkies/poweredbythevoid.gif" class="pixeled" width="100%">
</div>
</div>
<div id="icons">
<div class="icon" onclick="$('#mycomputer').show()"><img src="images/icons/My Computer.ico" class="pixeled" width="100px"><p style="font-size: 7px;"></p><span class="icontext">My Computer</span></div>
<div class="icon" onclick="$('#recycle').show()" style="margin-left: 25px"><img id="recycleicon" src="images/icons/Recycle Bin with paper.ico" class="pixeled" width="100px"><p style="font-size: 7px;"></p><span class="icontext">Recycle Bin</span></div>
<div class="icon" onclick="$('#folder').show()" style="margin-left: 35px"><img src="images/icons/Folder.ico" class="pixeled" width="100px"><p style="font-size: 7px;"></p><span class="icontext">Icons</span></div>
<div class="icon" onclick="blanknotes()" style="margin-left: 30px"><img src="images/icons/Notepad.ico" class="pixeled" width="100px"><p style="font-size: 7px;"></p><span class="icontext">Notepad</span></div>
</div>
<!--The taskbar-->
<!--This is where all of the buttons are contained as well as the time div-->
<div class="taskbar" style="z-index: -1;" id="taskbar">
<div style="float:left"><img src="images/buttons/start.gif" height="66" class="pixeled" onclick="sidebar()" style="cursor:pointer"></div>
<div class="taskbutton" id="aboutbutton" onclick="about()"><span>About Me</span></div>
<div class="taskbutton" id="archivebutton" onclick="archive()"><span>Archive</span></div>
<div class="taskbutton" id="outgoingbutton" onclick="outgoing()"><span>Outgoing</span></div>
<div style="float:right;margin-right:16px">
<div class="timediv"><span id="datetime"></span><div>
</div>
</div>
<!--The jquery-ui code to make the apps draggable-->
<!--Important if you intend to add more-->
<script> $( function() { $( "#about" ).draggable(); }); </script>
<script> $( function() { $( "#archive" ).draggable(); }); </script>
<script> $( function() { $( "#outgoing" ).draggable(); }); </script>
<script> $( function() { $( "#alert" ).draggable(); }); </script>
<script> $( function() { $( "#recycle" ).draggable(); }); </script>
<script> $( function() { $( "#folder" ).draggable(); }); </script>
<script> $( function() { $( "#mycomputer" ).draggable(); }); </script>
<script> $( function() { $( "#imaging" ).draggable(); }); </script>
<script>
// Get current date and time every second and update the time/date divs. You probably don't need to touch this
function gettime(){
var now = new Date();
var datetime = now.toLocaleTimeString("en-US", { hour12: true, timeStyle: "short" });
document.getElementById("datetime").innerHTML = datetime;
n = new Date();
y = n.getFullYear();
m = n.getMonth() + 1;
d = n.getDate();
document.getElementById("date").innerHTML = m + "/" + d + "/" + y;
setTimeout(gettime, 1000);
}
gettime();
//hide all apps by default except for the alert popup
$('.frameClose').parent().parent().hide();
var chord = new Audio("audio/chord.wav");
//attach an onclick script to all the close buttons
$(document).ready(function () {
})
function startwindows(){
$('#loginscreen').hide();
var startup = new Audio("audio/startup.wav"); // buffers automatically when created
startup.play();
var $frame = $('.frameClose')
$frame.on('click', function () {
//this is for the taskbar, it makes the buttons look depressed when an app is closed
if($(this).parent().parent()[0].id == "about") {$('#aboutbutton').toggleClass('taskbutton');$('#aboutbutton').toggleClass('taskbutton-open');}
if($(this).parent().parent()[0].id == "outgoing") {$('#outgoingbutton').toggleClass('taskbutton');$('#outgoingbutton').toggleClass('taskbutton-open');}
if($(this).parent().parent()[0].id == "archive") {$('#archivebutton').toggleClass('taskbutton');$('#archivebutton').toggleClass('taskbutton-open');}
$(this).parent().parent().hide();
})
setTimeout(appear, 1000);
setTimeout(playchord, 5000);
var $smallicon = $('.smolicon');
$smallicon.on('click', function () {
$('#imaging').show();
$('#imaging').children('#imagingimage').first().children('img')[0].src = $(this).children('img')[0].src;
$('#imaging')[0].style.width= parseFloat($('#imaging').children('#imagingimage').first().children('img')[0].width.toString().replace('px','')) + 50 + 'px';
$('#imagingimage')[0].style.width = parseFloat($('#imaging')[0].style.width.toString().replace('px','')) - 47 + 'px';
$('#imagingimage')[0].style.height = parseFloat($('#imaging')[0].style.height.toString().replace('px','')) - 129 + 'px';
$('#imagingtitle')[0].innerHTML = $(this).children('span')[0].innerHTML + " - Imaging";
})
}
function playchord(){
chord.play();
$('#alert').show();
}
$('#taskbar').hide();
$('#icons').hide();
function appear(){
$('#taskbar').show();
$('#icons').show();
}
//show or hide the apps and make the taskbar buttons look pressed/depressed when an app is open/closed
function outgoing(){
$('#outgoing').toggle();
$('#outgoingbutton').toggleClass('taskbutton');
$('#outgoingbutton').toggleClass('taskbutton-open');
}
function about(){
$('#about').toggle();
$('#aboutbutton').toggleClass('taskbutton');
$('#aboutbutton').toggleClass('taskbutton-open');
}
function archive(){
$('#archive').children('iframe').eq(0).attr("src","archive.html");
$('#archive').toggle();
$('#archivebutton').toggleClass('taskbutton');
$('#archivebutton').toggleClass('taskbutton-open');
}
//hide the sidebar by default and toggle on click
function sidebar(){
$('#sidebar').toggle();
}
$('#sidebar').hide()
//hide the second webring by default and cycle on click. More webrings can be added/removed if needed
webrings = 2
webring = 0
$('#secondwebring').hide();
function nextring(){
webring = (webring + 1) % webrings
if(webring == 0){
$('#genericwebring').show();
$('#secondwebring').hide();
}
if(webring == 1){
$('#genericwebring').hide();
$('#secondwebring').show();
}
}
function recycle(){
$('#recycleconfirm').show();
chord.play();
}
function emptybin(){
$('#bincontent').html('');
$('#recycleicon')[0].src = "images/icons/Empty Recycle Bin.ico";
$('#recycleconfirm').hide();
}
function blanknotes(){
$('#notepad')[0].src = 'blank.html';
if(!$('#archive').is(':visible')){
$('#archive').show();
$('#archivebutton').toggleClass('taskbutton-open');
$('#archivebutton').toggleClass('taskbutton');
}
}
</script>
</body>
</html>