Pass the Pen - Computer Screen

FEATURED

In this example below you will see how to do a Pass the Pen - Computer Screen with some HTML / CSS and Javascript

Pass the Pen - Computer ScreenContributors:Dominic Duffin - Set up the base scene of monitor, display background and taskbar

Thumbnail
This awesome code was written by Kristopher Van Sant, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kristopher Van Sant ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pass the Pen - Computer Screen</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--Notes for contributors:
This pen is designed to use absolute positioning and to use the CSS z-index property to create layers for the screen display.

The screen is behind a layer of glass. Please give contributions to the screen display a z-index of between 3 and 99. This ensures that they will be shown beneath the glass and on top of the display background.

The screen is 1600px by 900px. The left edge is 120px from the left of the scene and the top edge is 120px from the top of the scene.

The taskbar has a z-index of 95 and is 50px wide.
-->

<!--Beginning of base scene -->

<div id="monitor"></div>
<div id="screen">
  <div id="top-bar">
    <div id="tb-left-side">
      <b></b>
      <span>Finder</span>File Edit View Go Window Help</div>
    <div id="tb-right-side">
      <!-- SVG created by Guilhem from the Noun Project  https://thenounproject.com/term/no-wifi/451998/  -->
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="60.8px" height="43.6px" viewBox="0 0 60.8 43.6" style="enable-background:new 0 0 60.8 43.6;"
        xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<path class="st0" d="M30.4,41.5l28.3-28.3C43.1-2.4,17.8-2.4,2.1,13.2L30.4,41.5z"/>
</svg>
      <span id="battery"></span>
      <span id="day-time"></span>
      <b>🔍</b>
    </div>
  </div>

  <!-- AOL Messenger -->
  <div class="aim-messenger">
    <div class="aim-header">
      <div class="aim-main-nav">
        <div class="hd-left">
          <div class="aim-logo">
            <div class="aim">AIM</div>
            <div class="aim-person">IM with Bakapancake</div>
          </div>
        </div>
        <div class="hd-right">
          <div class="buttons">
            _ | &#x1f5d6; | X
          </div>
        </div>
      </div>
      <hr />
      <div class="aim-nav">
        <a href="#">File</a>
        <a href="#">Edit</a>
        <a href="#">View</a>
        <a href="#">People</a>
        <a href="#">Actions</a>
        <a href="#">Help</a>
      </div>
    </div>
    <div class="aim-content">
      <div class="aim-status">
        <p class="status"><em>pandaiie is away</em></p>
        <p class="msg">방법이 없어 달리 달리~</p>
        <img class="prof" src="https://i-cdn.phonearena.com/images/article/96142-image/Google-says-goodbye-to-the-blob-emoji-in-a-weird-and-creative-way.jpg" />
        <hr />
      </div>
      <div class="aim-message">
        <p><span class="baka">Bakapancake:</span> yoyoyo~</p>
        <p><span class="panda">pandaiie:</span> ello!</p>
        <p><span class="baka">Bakapancake:</span> Did you try that new boba place?</p>
        <p><span class="panda">pandaiie:</span> which oneee? theres hella!</p>
        <p><span class="baka">Bakapancake:</span> 20oz!</p>
        <p><span class="panda">pandaiie:</span> no. lulz</p>
        <p><span class="panda">pandaiie:</span> hungry. brb.</p>
      </div>
    </div>
    <div class="aim-footer">
      <div class="aim-toolbar">
        <ul>
          <li>Arial </li>
          <li>&#x25be;</li>
          <li>10 </li>
          <li>&#x25be;</li>
          <li>&#x1d401;</li>
          <li>&#x1d470;</li>
          <li>&#x2381;</li>
          <li>&#x1d41a; </li>
          <li>&#x25be;</li>
          <li>&#x1d41a; </li>
          <li>&#x25be;</li>
          <li>&#x1f517;</li>
          <li>&#x1f600;</li>
        </ul>
      </div>
      <div class="aim-comment">|</div>
      <div class="aim-taskbar">
        <ul class="task">
          <li><a href="#">TXT Msg</a></li>
          <li><a href="#">Talk</a></li>
          <li><a href="#">Video</a></li>
          <li><a href="#">Pictures</a></li>
          <li><a href="#">Send Files &#x25be;</a></li>
        </ul>
        <div class="send">
          <a href="#">Send</a>
        </div>
      </div>
    </div>
  </div>
  <canvas id="canvas" width="1600" height="900"></canvas>

  <!--Taskbar-->
  <div id="taskbar"></div>

</div>
<!-- OneGrumpyBunny Contribution -->
<img id="BSOD-break-btn" src="https://image.flaticon.com/icons/svg/176/176495.svg">
<div id="bluescreen">
  <p>A problem has been detected and Windows has been shut down to prevent damage to your computer.</p>
  <p>The problem seems to be caused by the following file: ntoskrnl.exe</p>
  <p>DRIVER_POWER_STATE_FAILURE</p>
  <p>If this is the first time you've seen this stop error screen, restart your computer. If this screen appears again, follow these steps:</p>
  <p>Check to make sure any hardware or software is properly installed. If this is a new installation, ask your hardware or software manufacturer for any qindows updates you might need.</p>
  <p>If problems continue, disable or remove any newly installed hardware or software. Disable BIOS memory options such as caching or shadowing. If you need to use safe mode to remove or disable components, restart your computer, press F8 to select Advanced
    Startup Options, and then select Safe Mode.</p>
  <p>Technical Information:</p>
  <p>*** STOP: 0x0000009F (0x0000000000000003, 0xfffffz8007b4b060, 0xffffff80000b9e4d8, 0xffffffa80101fac10)</p>
  <p>*** ntoskrnl.exe - Address 0xffffff80003695640 base at 0xffffff8000361500 DateStamp 0x4ce7951a</p>

</div>
<!-- end bluescreen-->

<button id="BSOD-fix-btn">Quick! Call the computer guy!</button>
<div id="glass"></div>
<img id="window" width="200" height="auto" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/hqdefault.jpg">

<!---- BROWSER START -------------->

<div class="browser-container">

  <div class="browser">
    <div class="toolbar-tabs">
      <div class="tab tab-1">
        <nobr>Funny cats can haz cheezburger?</nobr>
      </div>
      <div class="tab tab-2 active-tab">
        <nobr>Google</nobr>
      </div>
      <div class="actions">
        _ &#9633; X
      </div>
    </div>
    <div class="top">
      <div class="address-bar">
        <div class="add-bar-buttons">
          <p>&larr; &rarr; &#8635;</p>
        </div>
        <input type="text" value="https://www.google.co.uk" class="address-bar-input" readonly />
      </div>
    </div>

    <div class="tab-1-stuff">
      <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/502px-Logo_of_YouTube_%282015-2017%29.svg.png" />
      <iframe width="280" height="152" class="video" src="https://www.youtube.com/embed/gWW_2YFjblc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      <p class="text-1">Funny cats can haz cheezburger?</p>
      <p class="text-2">69,404,666 views</p>
    </div>

    <div class="tab-2-stuff">
      <img class="logo-g" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" />
      <input class="input-g" type="text" />
      <p class="gs butt">Google Search</p>
      <p class="ifl butt">I'm Feeling Lucky</p>
    </div>

  </div>

</div>

<!---- BROWSER END ---------------->

<div id="stand-upright"></div>
<div id="stand-base"></div>
<!--End of base scene -->

<!--Junk Folder-->

<div id="junkFolder"></div>

<div id="folderMenu">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/Internet_Explorer_9_icon.svg.png" alt="IE9">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/Napster_Logo-1024x972.png" alt="Napster">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/Clippy.png" alt="Clippy">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/Screen%20Shot%202018-05-07%20at%209.35.16%20AM.png" alt="Encarta97">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/netscape.jpeg" alt="Netscape">
</div>

<!--End Junk Folder-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/KristopherVanSant/pass-the-pen-computer-screen-pVdVpe */
body {
  background-color: #000000;
}

/*Base scene */
#monitor {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 1800px;
  height: 1100px;
  border-radius: 100px;
  border-style: solid;
  border-color: #aaaaaa;
  border-width: 15px;
  background-color: #ffffff;
  z-index: 1;
}

#screen {
  position: relative;
  top: 110px;
  left: 110px;
  width: 1600px;
  height: 900px;
  border-style: inset;
  border-width: 3px;
  background-color: #6cf7c9;
  z-index: 2;
  overflow:hidden
}

#glass {
  position: absolute;
  top: 87px;
  left: 87px;
  width: 1666px;
  height: 966px;
  background-color: rgba(0,0,0,0.1);
  z-index: 2;
}

#window {
  position: absolute;
  top: 450px;
  left: 800px;
  width: 200px;
  height: auto;
  z-index: 999;
}

#stand-upright {
  position: absolute;
  top: 1120px;
  left: 840px;
  width: 160px;
  height: 200px;
  background-color: #aaaaaa;
  z-index: 1;
}

#stand-base {
  position: absolute;
  top: 1320px;
  left: 600px;
  width: 640px;
  height: 40px;
  background-color: #aaaaaa;
  border-radius: 20px;
  z-index: 1;
}
/*End of base scene */


/*Taskbar */
#taskbar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 904px;
  width: 50px;
  background-color: #222222;
  z-index: 95;
}

/* AOL Messenger */
.aim-messenger {
  height: 400px;
  width: 500px;
  border: 1px solid silver; 
  border-raidus: 5px;
  position: absolute; 
  background-color: white; 
  top: 40%;
  left: 60%;
  z-index: 10;
  font-family: "Arial", Arial, sans;
}

.aim-header {
  width: 99.8%; 
  position: absolute;
  top: 0px;
  border: 1px solid black;
  height: 55px;
  background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 60%,#111111 60%,#000000 65%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); 
}

.aim-header .aim-main-nav {
  height: 5px;
}

.aim-header .hd-left {
  float: left;
  width: 50%;
}

.aim-header .aim-logo .aim {
  background-color: orange;
  color: white;
  font-size: 12px;
  content-align: center;
  line-height: 18px;
  text-align: center;
  height: 20px;
  width: 32px;
  border-radius: 50%;
}

.aim-header .aim-person {
  color: white;
  position: absolute;
  left: 35px;
  top: 0px;
}

.aim-header .hd-right {
  float: right;
  border: 1px;
  height: 15px;
  width: 45px;
  border-radius: 0px 5px 0px 5px;
  background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 60%,#111111 60%,#000000 65%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); 
}

.aim-header .hd-right .buttons { 
  font-size: 10px;
  color: white;
  position: absolute;
  left: 460px;
  content-align: center; 
}

.aim-header hr {
  margin-top: 20px;
}

.aim-header .aim-nav a {
  font-size: 14px;
  text-decoration: none;
  float: left;
  color: white;
  padding: 0px 5px 0px 5px
}

.aim-header .aim-nav a::first-letter {
  text-decoration: underline;
}

.aim-content {
  border: 4px solid #666666;
  border-bottom: none;
  width: 98.6%;
  height: 250px;
  position: absolute;
  top: 55px;
}

.aim-content .aim-status .status {
  font-weight: 400;
  margin-left: 3px;
}

.aim-content .aim-status .msg {
  font-size: 10px;
  position: absolute;
  top: 30px;
  left: 10px;
}

.aim-content .aim-status .prof {
  position: absolute;
  top: 0px;
  left: 440px;
  height: 50px;
  width: 50px;
}
.aim-content .aim-message p {
  line-height: 10px;
}

.aim-message .baka {
  color: red;
}

.aim-message .panda {
  color: blue;
}

.aim-footer {
  border: 4px solid #666666;
  border-top: none;
  width: 98.6%;
  height: 87px;
  position: absolute;
  top: 309px;
}

.aim-footer .aim-toolbar {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 2px;

}

.aim-footer .aim-toolbar ul {
  list-style-type: none;
  display: inline;
  margin-left: -40px;
}

.aim-footer .aim-toolbar li { 
  display: inline;
  font-size: 11px;
  padding: 3px 3px;
  border: 1px solid gray;
}

.aim-footer .aim-taskbar {
  position: absolute;
  height: 20px;
  top: 59px;
}

.aim-footer .aim-taskbar .task {
  width: 450px;
  height: 15px;
  border-top: 1px solid gray;
  background: linear-gradient(to bottom, #fefefe 0%,#d1d1d1 46%,#dbdbdb 50%,#e2e2e2 100%);
}

.aim-footer .aim-taskbar ul {
  float: left;
  list-style-type: none;
  font-size: 12px;
}

.aim-footer .aim-taskbar li {
  display: inline;
}

.aim-footer .aim-taskbar a {
  text-decoration: none;
  color: black;
  padding: 0px 5px;
  border-right: 1px solid gray;
}

.aim-footer .aim-taskbar .send {
  position: absolute;
  left: 448px;
  top: 12px;
  border-top: 1px solid gray;
  border-radius-bottom-right: 45px;
  width: 45px;
  height: 15px;
  background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%);
}

.aim-footer .aim-taskbar .send a {
  color: #ff8100;
  margin-left: 7px;
  font-size: 11px;
  content-align: center;
  text-align: center;
  
}

/* One Grumpy Bunny Contribution BSOD */
#bluescreen {
	background: #000080;
    color: #fff;
    z-index: 9999;
    top: 120px;
    left: 120px;
    width: 1600px;
    height: 900px;
    position: absolute;
    font-family: 'courier';
	  border-radius:5px;
	  display:none;
}
#bluescreen > p {
  padding-left:15px;
  font-size: 30px;
}
.screenblur {
  animation: distort-screen 2s ease-in 1 forwards;
}

@keyframes distort-screen {
  100% {filter: blur(20px) hue-rotate(231deg);}
}

#BSOD-fix-btn {
    position: absolute;
    top:15%;
	  left:15%;
    padding: 10px 20px;
    animation: button-blink .7s ease-in infinite;
    cursor: pointer;
    z-index: 10000;
    width: 500px;
    display:none;
}
#BSOD-break-btn {
    position: absolute;
    left: 175px;
    padding: 10px 20px;
    width: 85px;
    height: 85px;
    cursor:pointer;
    z-index:101;
}

.buttonDepress {
	transform:scale(.9);
}
@keyframes button-blink {
  0% { color: #ddd;}
}
/* end One Grumpy Bunny contribution */

/* BROWSER STYLES */

.browser-container{
	width:404px;
	height:404px;
	position:absolute;
  top:150px;
  left:180px;
	z-index: 999;
  background-color: white;
}

.browser{
	width:400px;
	height:400px;
	border: 2px solid black;
	position:absolute;
	left:1px;
}

.toolbar-tabs{
	width:100%;
	height: 30px;
}

.tab{
	font-size:8pt;
	background-color: #cacaca;
	width:100px;
	height:20px;
	position:absolute;
	top:9px;
	border-top:1px solid grey;
	border-left:1px solid grey;
	border-right:1px solid grey;
	cursor:pointer;
	overflow:hidden;
}

.active-tab{
	background-color: #f0f0f0;
}

.tab-2{
	left:103px;
}

.actions{
	width:60px;
	position:absolute;
	left:345px;
	letter-spacing:3px;
}

.top{
	background-color: #f0f0f0;
	height:30px;
}

.address-bar{
	height:30px;
	position:relative;
}

.add-bar-buttons{
	width:60px;
	height:25px;
	position:relative;
}

.add-bar-buttons > p{
	position:absolute;
	top:-10px;
	left:7px;
}

.address-bar-input{
	width:300px;
	position:absolute;
	left:80px;
	top:4px;
}

.tab-1-stuff{
	width:400px;
	height:340px;
	position:relative;
	display:none;
}

.logo{
	width:50px;
	position:absolute;
	left:10px;
	top:10px;
}

.video{
	position:absolute;
	left:10px;
	top:40px;
}

.text-1{
	position:absolute;
	top:180px;
	left:10px;
}
.text-2{
	position:absolute;
	top:200px;
	left:10px;
	color:grey;
}

.tab-2-stuff{
	width:400px;
	height:340px;
	position:relative;
}

.logo-g{
	width:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;
	top:50px;
}

.input-g{
	width:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;
	top:120px;
}

.butt{
	width:120px;
	background-color:#f3f3f3;
	text-align:center;
	color:#737373;
	cursor:pointer;
	padding: 5px; 10px;
	position:absolute;
	top: 150px;
}

.butt:hover {
	background-color:#F1F1F1;
	color:black;
}

.gs{
	left:50px;
}

.ifl{
	left:200px;
}

/* END BROWSER STYLES */

/*Junk Folder*/
#junkFolder {
  height:150px;
  width:225px;
  background-color:#FFA000;
  border-radius:15px;
  position:absolute;
  left:750px;
  top:220px;
  z-index:3;  
}

#foldertab { 
  height:170px;
  width:110px;
  background-color:#FFA000;
  border-radius:15px;
  position:absolute;
  top:-25px;  
}

#tabcorner { 
  position:absolute;
  top:0;
  right:0px;
  border-top: 25px solid #61DEB5;
  border-left: 22px solid transparent;  
}

#folderfrontclosed {
  height:150px;
  width:225px;
  background-color:#FFCA28;
  border-radius:15px;
  position:absolute;
  z-index:3;
  
}

#folderfrontopen { 
  height:125px;
  width:225px;
  background-color:#FFCA28;
  border-radius:15px 15px 15px 0;
  position:absolute;
  top:26px;
  left:35px;
  z-index:4;
  -webkit-transform: skew(-15deg);  
}

#folderclick { 
  width:225px;
  height:175px;
  position:absolute;
  top:-25px;
  background-color:red;
  z-index:6;
  opacity:0;  
}

#label {
  font-size:200%;
  position:relative;
  left:80px;
  top:120px;  
}

#folderMenu {
  width:500px;
  height:800px;
  background-color:white;
  position:absolute;
  top:170px;
  left:1170px;
  z-index:0;  
}

#folderMenu img {
  height: 100px;
}


/*End Junk Folder*/


/* Top Bar */

#top-bar {
  position: absolute;
  z-index: 96;
  height: 20px;
  width: 100%;
  background-color: #f0f0f0;
  background-image: linear-gradient(#ffffff, #bfbfbf);
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: sans-serif;
  word-spacing: 15px;
  font-size: 14px; 
}


#tb-left-side {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

#top-bar b {
  margin: 0 15px;
  font-size: 18px;
}


#tb-left-side span {
  font-weight: bold;
  margin-right: 15px;
}

#tb-right-side {
  display: flex;
  flex-grow: 0;
  justify-self: flex-end;
  align-items: center;
}


#day-time {
  height: 100%;
  word-spacing: 0px;
}

#battery {
  margin-right: 15px;
  height: 10px;
  width: 19px;
  border: 1px solid black;
  border-radius: 2px;
  background-image: linear-gradient(to right, black 35%, transparent 35%);
  position: relative;
  box-shadow: inset 0px 0px 0px 1px #d8d8d8;
}

#battery:before {
  content:"";
  position: absolute;
  height: 4px;
  width: 2px;
  background-color: black;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  right: -4px;
  top: 3px;
}

#top-bar svg {
  height: 16px;
  margin-right: -5px;
}

/* End Top Bar Styles */

/*Downloaded from https://www.codeseek.co/KristopherVanSant/pass-the-pen-computer-screen-pVdVpe */
// Popup canvas
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var popup = document.getElementById("window");
var stop = document.getElementById("glass");
var globalID;
var numberOfCLicks = 0;

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function update() {
  var xPos = randomIntFromInterval(1, 1600);
  var yPos = randomIntFromInterval(1, 900);
  console.log(xPos);
  context.beginPath();
  context.drawImage(popup, xPos, yPos, 200, 150);

  globalID = requestAnimationFrame(update);
}
stop.onclick = function() {
  cancelAnimationFrame(globalID);
  numberOfCLicks++;
  console.log(numberOfCLicks);
  if (numberOfCLicks === 2) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    numberOfCLicks = 0;
  }
};
popup.onclick = function() {
  requestAnimationFrame(update);
};

//Browser Code

$(".tab-1").click(function() {
  $(".tab-1-stuff").css("display", "block");
  $(".tab-2-stuff").css("display", "none");
  $(".tab-1").addClass("active-tab");
  $(".tab-2").removeClass("active-tab");
  $(".address-bar-input").val("https://www.youtube.com/watch?v=gWW_2YFjblc");
});

$(".tab-2").click(function() {
  $(".tab-2-stuff").css("display", "block");
  $(".tab-1-stuff").css("display", "none");
  $(".tab-2").addClass("active-tab");
  $(".tab-1").removeClass("active-tab");
  $(".address-bar-input").val("https://www.google.co.uk");
});

$(".butt").click(function() {
  $(".input-g").val("");
});

/* OneGrumpyBunny */

$("#BSOD-break-btn").click(function() {
  $("BSOD-break-btn").addClass("buttonDepress");
  $("#screen").addClass("screenblur");
  $(".browser-container").addClass("screenblur");
  $(".aim-messenger").addClass("screenblur");
  $("#window").addClass("screenblur");
  $("#junkFolder").addClass("screenblur");
  setTimeout(function() {
    $("#bluescreen").css("display", "block");
  }, 3000);
  setTimeout(function() {
    $("#BSOD-fix-btn").css("display", "block");
  }, 5000);
});
$("#BSOD-fix-btn").click(function() {
  $("#screen").removeClass("screenblur");

  $(".browser-container").removeClass("screenblur");
  $("#window").removeClass("screenblur");
  $(".aim-messenger").removeClass("screenblur");
  $("#junkFolder").removeClass("screenblur");
  $("#BSOD-fix-btn").css("display", "none");
  $("#bluescreen").css("display", "none");
});

//Folder Code

$("#junkFolder")
  .prepend('<div id="foldertab"></div>')
  .prepend('<div id="folderclick" onClick="openOrClose()"></div>')
  .prepend('<p id="label">Junk</p>')
  .prepend('<div id="folderfrontopen"></div>')
  .prepend('<div id="folderfrontclosed"></div>');
$("#foldertab").prepend('<div id="tabcorner"></div>');

var ffc = document.getElementById("folderfrontclosed");
var ffo = document.getElementById("folderfrontopen");
ffo.style.visibility = "hidden";
ffc.style.visibility = "visible";
var menu = document.getElementById("folderMenu");

function openOrClose() {
  if (ffo.style.visibility === "hidden") openFolder();
  else closeFolder();
}

function openFolder() {
  ffc.style.visibility = "hidden";
  ffo.style.visibility = "visible";
  menu.style.zIndex = "99";
}

function closeFolder() {
  ffo.style.visibility = "hidden";
  ffc.style.visibility = "visible";
  menu.style.zIndex = "0";
}

//End Folder Code

// Top Bar Clock

  var date = new Date();
  var weekday = new Array(7);
  weekday[0] = "Sun";
  weekday[1] = "Mon";
  weekday[2] = "Tue";
  weekday[3] = "Wed";
  weekday[4] = "Thu";
  weekday[5] = "Fri";
  weekday[6] = "Sat";
  var day = weekday[date.getDay()];
  var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
  var am_pm = date.getHours() >= 12 ? "PM" : "AM";
  var hours = hours < 10 ? "0" + hours : hours;
  var minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var time = day + " " + hours + ":" + minutes + " " + am_pm;
  var today = document.getElementById("day-time");
  today.innerHTML = time;

// End Clock

Comments