<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Keyon/pen/BKbMdE?q=os&limit=all&order=popularity&depth=everything&show_forks=false" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css'>
<style class="cp-pen-styles">html {
background: url(http://wallpapercave.com/wp/NNo5yub.jpg);
background-size: cover;
height: 100vh;
widht: 100vw;
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
}
body {
background: transparent;
}
.TB {
position: absolute;
bottom: 0px;
width: 75%;
height: 50px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border-radius: 3px;
background: rgba(0, 0, 0, 0.9);
z-index: 999;
}
.Icon {
width: 65px;
height: 75px;
background: rgba(0, 0, 0, 0.0);
margin: 5px;
padding: 2px;
border-radius: 3px;
transition: all 0.15s ease-in-out;
border: 1px solid transparent;
}
.Icon:Hover {
background: rgba(66, 165, 245, 0.15);
border: 1px solid #90CAF9;
cursor: pointer;
}
.Icon:Active {
border: 1px solid #90CAF9;
background: rgba(66, 165, 245, 0.5);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.TBStart {
border-radius: 50px;
background: #fff;
width: 40px;
height: 40px;
position: fixed;
bottom: 5px;
left: calc(50% - 20px);
transition: all 0.3s ease-in-out;
}
.TBStart:hover {
transform: scale(1.15);
cursor: pointer;
}
.ILabel {
width: 100%;
position: absolute;
top: 40px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
font-family: Roboto;
font-size: 13px;
color: #fff;
text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5), 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5);
}
.LabelFolder {
height: 10px;
padding: 0em;
text-align: center;
font-family: Roboto;
font-size: 13px;
}
/*Window*/
#draggable {
width: 1024px;
height: 200px;
background: #4DB6AC;
border-radius: 3px;
margin-left: calc(50% - 512px);
margin-top: 30px;
}
#draggable2 {
width: 1024px;
height: 200px;
background: #FFB300;
border-radius: 3px;
margin-left: calc(50% - 512px);
margin-top: 30px;
}
#ComWin {
position: fixed;
left: calc(50% - 512px);
top: 5%;
}
#NoteWin {
position: fixed;
left: calc(50% - 512px);
top: 5%;
}
iframe {
width: 100%;
height: 300px;
border: 0px;
}
.tb {
width: 1000px;
transition: all 0.5s ease-in-out;
}
.ctrlbar {
width: 100%;
height: 30px;
background: rgba(0, 0, 0, 0.1);
}
.filler {
height: 90px;
}
.ct {
background: #fff;
}
.Title {
color: #fff;
font-size: 35px;
font-family: Roboto;
font-weight: 300;
position: absolute;
top: 45px;
left: 35px;
}
.ui-widget-content {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.btn1 {
height: 30px;
width: 27px;
padding: 0px 0px 0px 0px;
margin-top: -7px;
}
.bf {
width: 990px;
opacity: 0;
cursor: default;
}
.mtm {
margin-top: -15px;
}
.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.95) rotateX(25deg);
transition: all 0.3s ease-on-out;
}
.cpos {
position: absolute;
margin-top: 10px;
right: 10px;
}
.ContentText {
width: 970px;
height: 400px;
border-radius: 3px;
background: #ECEFF1;
position: absolute;
left: calc(50% - 485px);
max-height: 700px;
max-width: 970px;
}
.TArea {
border: 0px;
height: 375px;
resize: none;
background: transparent;
outline: none;
}
.AvatarStart {
position: absolute;
left: 10px;
top: 10px;
width:75px;
border-radius: 100px;
}
.Pp {
position: absolute;
left: 95px;
top: 5px;
font-size: 21px;
}
.InfoA {
position: absolute;
left: 95px;
top: 50px;
font-size: 15px;
color: #212121;
}
.ExitA {
position: absolute;
right: 10px;
top: 60px;
}
.FTD {
width:100px;
}
.svgIHD {
position: absolute;
margin-top:-2px;
right: 25px;
}
#ErrorWS {
position: absolute;
top: 5px;
right: 15px;
text-align: right;
color: red;
}</style></head><body>
<div class="TB">
<a class="TBStart waves-effect waves-dark modal-trigger" href="#Start">
<img style="width:100%; padding:3px; border-radius:100px;" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/531144/LogoKeyon.png" />
</a>
</div>
<!-- Modal Structure -->
<div id="modal-start" class="modal bottom-sheet">
<div class="modal-content">
<div align="center">
<img style="width:100px;" src="https://www.seeklogo.net/wp-content/uploads/2015/09/new-google-favicon-logo.png" />
</div>
<form style="width:500px; margin:0 auto;">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Search on web or device</label>
</div>
<div align="center">
<a style="width:150px;" class="waves-effect waves-light blue lighten-1 btn">Search</a>
<a style="width:150px;" href="#!" class="waves-effect waves-red modal-close grey grey-text lighten-5 btn">Close</a
</div>
</div>
</div>
</form>
</div>
</div>
<div id="Start" class="modal modal-fixed-footer">
<div class="modal-content">
<div style="height:80px;" >
<img class="AvatarStart z-depth-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/531144/LogoKeyon.png" >
<p class="Pp">Keyon</p>
<a onclick="FNA()" class="InfoA tooltipped waves-effect waves-default" data-position="right" data-delay="50" data-tooltip="Info / Change">Plan: 1TB 9,99$/month</a>
<a onclick="FNA()" class="waves-effect waves-red btn-flat red-text text-lighten-2 ExitA">Log out</a>
</div>
<table>
<tbody>
<tr>
<td class="FTD">Storage</td>
<td>550 GB used on 1 TB <a class="btn-flat waves-effect waves-default" onclick="FNA()">Upgrade</a></td>
</tr>
<tr>
<td class="FTD">Something</td>
<td>Activate something <div class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
</td>
</tr>
<tr>
<td class="FTD">Lorem</td>
<td>Ipsum dolor sit amet!</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Close</a>
<a href="#!" class="modal-action modal-close waves-effect waves-default blue-text btn-flat ">Save and Close</a>
</div>
</div>
<div id="InfoHD" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>(C:) Files</h4>
<p>
Files (30%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#2196f3 " d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>
</p>
<div class="progress blue lighten-3">
<div class="determinate blue" style="width: 30%"></div>
</div>
<p>Images (20%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#4caf50 " d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" />
</svg>
</p>
<div class="progress green lighten-3">
<div class="determinate green" style="width: 20%"></div>
</div>
<p>Video (3%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#f44336" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M17,19V13L14,15.2V13H7V19H14V16.8L17,19Z" />
</svg>
</p>
<div class="progress red lighten-3">
<div class="determinate red" style="width: 3%"></div>
</div>
<p>Recycle Bin (0%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#607d8b " d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg>
</p>
<div class="progress blue-grey lighten-3">
<div class="determinate blue-grey" style="width: 0%"></div>
</div>
<p>Used (53%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#673ab7 " d="M16.18,19.6L14.17,16.12C15.15,15.4 15.83,14.28 15.97,13H20C19.83,15.76 18.35,18.16 16.18,19.6M13,7.03V3C17.3,3.26 20.74,6.7 21,11H16.97C16.74,8.91 15.09,7.26 13,7.03M7,12.5C7,13.14 7.13,13.75 7.38,14.3L3.9,16.31C3.32,15.16 3,13.87 3,12.5C3,7.97 6.54,4.27 11,4V8.03C8.75,8.28 7,10.18 7,12.5M11.5,21C8.53,21 5.92,19.5 4.4,17.18L7.88,15.17C8.7,16.28 10,17 11.5,17C12.14,17 12.75,16.87 13.3,16.62L15.31,20.1C14.16,20.68 12.87,21 11.5,21Z" />
</svg>
</p>
<div class="progress deep-purple lighten-3">
<div class="determinate deep-purple" style="width: 53%"></div>
</div>
<p>Available (47%)
<svg style="width:24px;height:24px;" class="svgIHD" viewBox="0 0 24 24">
<path fill="#673ab7" d="M16.18,19.6L14.17,16.12C15.15,15.4 15.83,14.28 15.97,13H20C19.83,15.76 18.35,18.16 16.18,19.6M13,7.03V3C17.3,3.26 20.74,6.7 21,11H16.97C16.74,8.91 15.09,7.26 13,7.03M7,12.5C7,13.14 7.13,13.75 7.38,14.3L3.9,16.31C3.32,15.16 3,13.87 3,12.5C3,7.97 6.54,4.27 11,4V8.03C8.75,8.28 7,10.18 7,12.5M11.5,21C8.53,21 5.92,19.5 4.4,17.18L7.88,15.17C8.7,16.28 10,17 11.5,17C12.14,17 12.75,16.87 13.3,16.62L15.31,20.1C14.16,20.68 12.87,21 11.5,21Z" />
</svg>
</p>
<div class="progress deep-purple lighten-3">
<div class="determinate deep-purple" style="width: 47%"></div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Close</a>
</div>
</div>
<div id="Icon1" class="Icon">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M3,4H21A1,1 0 0,1 22,5V16A1,1 0 0,1 21,17H22L24,20V21H0V20L2,17H3A1,1 0 0,1 2,16V5A1,1 0 0,1 3,4M4,6V15H20V6H4Z" />
</svg>
<p class="ILabel">Computer</p>
</div>
<div id="Icon2" class="Icon">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#FFB300" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z" />
</svg>
<p class="ILabel">Readme.txt</p>
</div>
<!--Window-->
<div id="set">
<div id="ComWin" class="ui-widget-content hidden">
<div class="z-depth-1" id="draggable">
<div class="content">
<div class="ctrlbar" id="ctrlbar">
<a class="btn bf"></a>
<a id="ClsBtn" class="waves-effect waves-light btn btn1 transparent z-depth-0">X</a>
</div>
<div class="filler">
<p class="Title">Computer</p>
</div>
<div class="row tb">
<div class="row">
<div class="col s12 m4 l5">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Local Disk (C:)</span>
<p>550 GB available on 1 TB</p>
<div class="progress">
<div class="determinate" style="width: 56%"></div>
</div>
</div>
<div class="card-action">
<a href="#" onclick="Materialize.toast('Alreay opened', 4000)">Open</a>
<a href="#InfoHD" class="modal-trigger">Info</a>
</div>
</div>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">DVD RW Drive (D:)</span>
<p>No disk inside.</p>
</div>
<div class="card-action">
<a href="#">Open tray</a>
</div>
</div>
</div>
<div class="col s12 m4 l7">
<div class="card blue-grey lighten-5">
<div class="card-content blue-grey-text">
<span class="card-title">Local Disk (C:)</span>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">airplay</i>Local</div>
<div class="collapsible-body">
<div class="row">
<div class="Icon col s2 ">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M3,3H9V7H3V3M15,10H21V14H15V10M15,17H21V21H15V17M13,13H7V18H13V20H7L5,20V9H7V11H13V13Z" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">System</p>
</div>
<div class="Icon col s2">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M19,17H11V16C11,14.67 13.67,14 15,14C16.33,14 19,14.67 19,16M15,9A2,2 0 0,1 17,11A2,2 0 0,1 15,13A2,2 0 0,1 13,11C13,9.89 13.9,9 15,9M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">User</p>
</div>
<div class="Icon col s2 ">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H20M19.25,13H16V9H14V13H10.75L15,17.25" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">Download</p>
</div>
<div class="Icon col s2 ">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M5,17L9.5,11L13,15.5L15.5,12.5L19,17M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6Z" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">Media</p>
</div>
<div class="Icon col s2 ">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">Empty</p>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Cloud</div>
<div class="collapsible-body">
<div class="row">
<div class="Icon col s2 ">
<svg style="margin:5px;" viewBox="0 0 24 24">
<path fill="#37474F" d="M13.75,9H16.14L19,14H16.05L13.5,9.46M18.3,17H12.75L14.15,14.5H19.27L19.53,14.96M11.5,17L10.4,14.86L13.24,9.9L14.74,12.56L12.25,17M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
<p style="padding:0em; margin-top:-15px;" class="LabelFolder">Drive</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="NoteWin" class="ui-widget-content hidden">
<div class="z-depth-1" id="draggable2">
<div class="content">
<div class="ctrlbar" id="ctrlbar2">
<a class="btn bf"></a>
<a id="ClsBtn1" class="waves-effect waves-light btn btn1 transparent z-depth-0">X</a>
</div>
<div class="filler">
<p class="Title">Note</p>
</div>
<div class="fixed-action-btn horizontal right click-to-toggle" style="position:absolute; bottom:100px;">
<a class="btn-floating btn-large yellow darken-2">
<i class="material-icons">menu</i>
</a>
<ul>
<li>
<a style="text-align:center;" class="btn-floating blue">
<svg style="width:24px;height:24px; margin-top:5px;" viewBox="0 0 24 24">
<path fill="#fff" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>
</a>
</li>
<li>
<a style="text-align:center;" class="btn-floating blue">
<svg style="width:24px;height:24px; margin-top:5px;" viewBox="0 0 24 24">
<path fill="#fff" d="M17,7V3H7V7H17M14,17A3,3 0 0,0 17,14A3,3 0 0,0 14,11A3,3 0 0,0 11,14A3,3 0 0,0 14,17M19,1L23,5V17A2,2 0 0,1 21,19H7C5.89,19 5,18.1 5,17V3A2,2 0 0,1 7,1H19M1,7H3V21H17V23H3A2,2 0 0,1 1,21V7Z" />
</svg>
</a>
</li>
</ul>
</div>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a style="text-align:center; font-weight:bold;" class="btn-floating green">B</a></li>
<li><a style="text-align:center;" class="btn-floating blue">A<span style="font-size:11px;">A</span></a></li>
</ul>
</div>
<div class="row ContentText z-depth-2">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="TArea">
If you ask yourself "Why should I need this?" the answer is:
'Cause this can be cool at Cloud Storage, imagine to enter your Google Drive or DropBox and have a mini computer,
with desktop, windows and other.
It isn't more difficult to use, so why not?
Anyway, this is only a preview to show my skill level (19/05/16), maybe someone who want to create an OS can use
this for an idea.
Hope you like it! :)
</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="ErrorWS" class="hidden">
<p>
Screen size is under 1024 x 768 <br/> Please use minimum 1024 x 768 <br /> Recommended resolution: 1920 x 1080 or scaled
</p>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js'></script>
<script >$(function() {
$("#Icon1").draggable({
grid: [80, 80]
});
});
$(function() {
$("#Icon2").draggable({
grid: [80, 80]
});
});
$("#Icon1").dblclick(function() {
$('#ComWin').removeClass('hidden');
});
$("#ClsBtn").click(function() {
$('#ComWin').addClass('hidden');
});
$("#Icon2").dblclick(function() {
$('#NoteWin').removeClass('hidden');
});
$("#ClsBtn1").click(function() {
$('#NoteWin').addClass('hidden');
});
$(function() {
$("#ComWin").draggable({
handle: "#ctrlbar"
});
});
$(function() {
$("#NoteWin").draggable({
handle: "#ctrlbar2"
});
});
Materialize.toast('Double click on icons to open', 4000)
$(document).ready(function() {
$('input#input_text, textarea#textarea1').characterCounter();
});
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
function FNA() {
Materialize.toast('Function not available', 4000)
}
if ($(window).width() <= 1023) {
$('#ErrorWS').removeClass('hidden');
}
//# sourceURL=pen.js
</script>
</body></html>
