Web-OS - An online operating system
HTML
<audio autoplay>
<source src="http://lanware.nl/codepen/start.wav">
</audio>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<desktop>
<bar>
<itm><a href="#2">WebOS</a></itm>
<itm><a href="#1">Files</a></itm>
<itm><a href="#3">Apps</a></itm>
<itm><a href="#4">Settings</a></itm>
<a href="#5"><time>Time</time></a>
<a href="#5"><date>Date</date></a>
</bar>
<div style="top: 80px; left: 70px" class="window">
<div class="header">Files</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget nisl eget diam iaculis facilisis. Pellentesque rhoncus nunc sed orci congue dictum. Etiam venenatis porta justo, a viverra purus bibendum eu. Pellentesque elit dui, commodo at dapibus ac, auctor quis nisi. Aliquam eu leo semper, condimentum lorem vitae, iaculis nunc. Nullam et purus enim. Nunc id risus consectetur dui dignissim semper ac ut sem. Nullam ut mattis sem, ut imperdiet neque. Integer eu blandit ligula. Aliquam eu laoreet orci, quis egestas nisi. Donec lacus lorem, facilisis ultricies lacus ut, volutpat dictum lorem. Maecenas convallis pulvinar faucibus. Phasellus at faucibus est.</p>
</div>
</div>
<div style="top: 130px; left: 650px" class="window2">
<div class="header2">WebOS</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget nisl eget diam iaculis facilisis. Pellentesque rhoncus nunc sed orci congue dictum. Etiam venenatis porta justo, a viverra purus bibendum eu. Pellentesque elit dui, commodo at dapibus ac, auctor quis nisi. Aliquam eu leo semper, condimentum lorem vitae, iaculis nunc. Nullam et purus enim. Nunc id risus consectetur dui dignissim semper ac ut sem. Nullam ut mattis sem, ut imperdiet neque. Integer eu blandit ligula. Aliquam eu laoreet orci, quis egestas nisi. Donec lacus lorem, facilisis ultricies lacus ut, volutpat dictum lorem. Maecenas convallis pulvinar faucibus. Phasellus at faucibus est.</p>
</div>
</div>
<div style="top: 400px; left: 120px" class="window3">
<div class="header3">Apps</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget nisl eget diam iaculis facilisis. Pellentesque rhoncus nunc sed orci congue dictum. Etiam venenatis porta justo, a viverra purus bibendum eu. Pellentesque elit dui, commodo at dapibus ac, auctor quis nisi. Aliquam eu leo semper, condimentum lorem vitae, iaculis nunc. Nullam et purus enim. Nunc id risus consectetur dui dignissim semper ac ut sem. Nullam ut mattis sem, ut imperdiet neque. Integer eu blandit ligula. Aliquam eu laoreet orci, quis egestas nisi. Donec lacus lorem, facilisis ultricies lacus ut, volutpat dictum lorem. Maecenas convallis pulvinar faucibus. Phasellus at faucibus est.</p>
</div>
</div>
<div style="top: 420px; left: 700px" class="window4">
<div class="header4">Settings</div>
<div class="content">
<p><div class="holder">
<table width="100%">
<tr>
<td>Include me in the public list</td>
<td>
<div>
<input type="checkbox" />
<span></span>
</div>
</td>
</tr>
<tr>
<td>Let my friends see my phone number</td>
<td>
<div>
<input type="checkbox" />
<span></span>
</div>
</td>
</tr>
<tr>
<td>Let my friends see my email address</td>
<td>
<div>
<input type="checkbox" checked="" />
<span></span>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save Settings" >
</td>
</tr>
</table>
</div></p>
</div>
</div>
<ul class='context-menu'>
<li><a href="#">New Folder</a></li>
<li><a href="#">New File</a></li>
<li><a href="#">New Link</a></li>
<li><a href="#"></a></li>
<li><a href="javascript:history.go(0);">Refresh</a></li>
<li><a href="#4">Settings</a></li>
</ul>
<notification>
<table>
<tr>
<td rowspan="2"><img src="http://cdn.flaticon.com/png/256/24559.png" width="48" height="48"></td>
<td><b class="NTitle">Welcome!</b></td>
</tr>
<tr>
<td Class="NContent">Welcome to WebOS, the best online operating system.
To open an app or folder click on an item on the menu, and double-click on the titlebar of the windows to close it.
<b>Click here to close this notification.</b></td>
</tr>
</table>
</notification>
<div class="logo">
Web<b>OS</b>
</div>
</desktop>
CSS
html, body {
background: url("http://erinsschoolofdance.com/wp-content/uploads/2013/09/ios7_style.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;
}
bar {
background-color: #D1D1D1;
width:100%;
box-shadow: 0px 1px 40px #000;
position:fixed;
opacity:0.7;
font-family:'Lato', sans-serif;
font-size: 17px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
bar itm {
float: left;
}
bar itm a:link, a:visited {
color: #000;
display: block;
text-align: center;
padding: 5px;
text-decoration: none;
}
bar itm a:hover, a:active {
cursor:default;
opacity:1;
background-color: #FFF;
}
bar time, date {
float: right;
color: #000;
display: block;
text-align: center;
padding: 5px;
text-decoration: none;
}
bar time:hover, date:hover {
opacity:1;
background-color: #FFF;
}
.window, .window2, .window3, .window4 {
background-color: #D1D1D1;
box-shadow: 0px 1px 40px #000;
position: fixed;
opacity:0.7;
font-family:'Lato', sans-serif;
font-size: 17px;
resize: both;
overflow: auto;
width: 500px;
min-width: 200px;
max-width: 1000px;
}
.window .header, .window2 .header2, .window3 .header3, .window4 .header4 {
cursor:default;
opacity:1;
background-color: #FFF;
font-size: 24px;
text-align:center;
}
.context-menu {
position: absolute;
display: none;
width: 100px;
background: #333;
font-size: 14px;
background-color: #D1D1D1;
box-shadow: 0px 1px 40px #000;
opacity:0.7;
font-family:'Lato', sans-serif;
color: #000;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.context-menu li {
margin: 3px;
padding: 3px;
cursor:default;
}
.context-menu li a:hover, a:active {
opacity:1;
background-color: #FFF;
cursor:default;
}
.context-menu li a:link, a:visited {
color: #000;
display: block;
padding: 3px;
text-decoration: none;
}
desktop {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
}
.logo {
position: fixed;
right: 10px;
bottom: 10px;
font-family:'Lato', sans-serif;
font-size: 30px;
color: #000;
}
.logo:hover, .logo:focus .logo:active {
text-shadow:2px 2px 30px #2E5CE6;
font-size: 35px;
}
notification {
width: 300px;
position: fixed;
Left: 10px;
bottom: 10px;
color: #000;
margin: 3px;
padding: 3px;
background: #333;
font-size: 14px;
background-color: #D1D1D1;
box-shadow: 0px 1px 40px #000;
opacity:0.7;
font-family:'Lato', sans-serif;
overflow: hidden;
max-width: 300px;
}
JAVASCRIPT
function setTime(ts) {
var date = new Date(ts);
$('time').text(date.toLocaleString(navigator.language, {
hour: '2-digit',
minute: '2-digit'
})).attr('datetime', date.getHours() + ':' + date.getMinutes());
$('date').text(date.toLocaleString(navigator.language, {
year: 'numeric',
month: 'long',
day: 'numeric'
})).attr('datetime', date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
setTimeout(function () {
setTime(Date.now());
}, 1000);
}
setTime(Date.now());
$( document ).ready(function() {
$('.window').hide();
});
$( document ).ready(function() {
$('.window2').hide();
});
$( document ).ready(function() {
$('.window3').hide();
});
$( document ).ready(function() {
$('.window4').hide();
});
$( document ).ready(function() {
$('notification').hide().delay(2000).fadeIn("slow");
});
$('.window').draggable({
handle: '.header'
});
$('.window2').draggable({
handle: '.header2'
});
$('.window3').draggable({
handle: '.header3'
});
$('.window4').draggable({
handle: '.header4'
});
$(".header").dblclick(function() {
$('.window').fadeOut("fast");
});
$(".header2").dblclick(function() {
$('.window2').fadeOut("fast");
});
$(".header3").dblclick(function() {
$('.window3').fadeOut("fast");
});
$(".header4").dblclick(function() {
$('.window4').fadeOut("fast");
});
$(document).ready(function(){
$('a[href="#1"]').click(function(){
$('.window').fadeIn("fast");
});
});
$(document).ready(function(){
$('a[href="#2"]').click(function(){
$('.window2').fadeIn("fast");
});
});
$(document).ready(function(){
$('a[href="#3"]').click(function(){
$('.window3').fadeIn("fast");
});
});
$(document).ready(function(){
$('a[href="#4"]').click(function(){
$('.window4').fadeIn("fast");
$('.context-menu').fadeOut("fast")();
});
});
$(document).ready(function(){
$('a[href="#5"]').click(function(){
$('notification').fadeIn("slow");
});
});
$('desktop').bind('contextmenu', function(e){
$('.context-menu').css('left', e.pageX + 'px');
$('.context-menu').css('top', e.pageY + 'px');
$('.context-menu').fadeIn("fast");
e.preventDefault();
return false;
});
$('desktop').click(function(e){
$('.context-menu').fadeOut("fast")();
});
$('.context-menu').click(function(e){
e.stopPropagation();
});
$(window).resize(function() {
$('.context-menu').fadeOut("fast")();
});
$('notification').click(function(e){
$('notification').fadeOut("slow")();
});
