Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
453 lines (407 sloc) 16.3 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HAVE TO CLEAN THE CODE
=> seperate the css
=> seperate the js
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paradigm</title>
<link href="jquery.ui.resizable.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
<style>
#bgimg{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.top-bar{
position:fixed;
top:0px;
width:100%;
height: 21px;
border-bottom: 1px solid #444444;
box-shadow: 0 0 10px #141414;
height: 21px;
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-image: -moz-linear-gradient(top, #E9E9E9 0%, #BBBABB 100%);
z-index:3;
}
</style>
<!-- for blurring the img
<svg id="svg-image-blur" style="position:fixed">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
-->
<style>
.draggable{
width: 90%; height: 80%; padding: 0.5em; float: left; margin: 0 10px 10px 0; border:1px solid gray;
background: -webkit-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px);
background: -moz-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px);
border-radius: 5px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 11px 35px 2px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
text-align: left;
position:absolute;
z-index:0;
}
nav.control-window a.close {
background: #FD4E4E;
}
nav.control-window:hover a.close {
background: #FD4E4E url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) 1px 1px no-repeat;
}
nav.control-window a.close:active {
background: #c72f2b url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) 1px 1px no-repeat;
}
nav.control-window a.minimize {
background: #F3BB55;
}
nav.control-window:hover a.minimize {
background: #F3BB55 url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) -9px 1px no-repeat;
}
nav.control-window a.minimize:active {
background: #c7862c url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) -9px 1px no-repeat;
}
nav.control-window a.maximize {
background: #96D16F;
}
nav.control-window:hover a.maximize {
background: #96D16F url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) -19px 1px no-repeat;
}
nav.control-window a.maximize:active {
background: #4a8e33 url(http://alessioatzeni.bluxart.netdna-cdn.com/mac-osx-lion-css3/res/img/buttons-hover.png) -19px 1px no-repeat;
}
nav.control-window a.deactivate {
background: #b5b5b5;
}
nav.control-window {
position:absolute;
left:6px;
top:3px;
z-index:10;
height:19px;
}
nav.control-window a {
display: inline-block;
margin: 2px 0px 3px 1px;
width: 12px;
height: 12px;
border-radius: 100%;
box-shadow: 0px 1px 0px rgba(255,255,255,.5);
text-indent: -9999px;
position: relative;
}
nav.control-window a:before {
content: '';
display: block;
position: absolute;
border-radius: 100%;
box-shadow:inset 0 1px 4px rgba(0, 0, 0, .8);
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
nav.control-window a:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 2px;
bottom: 1px;
right: 1px;
border-radius: 100%;
background: -webkit-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: -moz-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
}
.draggable h1.titleInside {
position:relative;
bottom:17px;
z-index:2 ;
color:#3c3c3c;
font-size:13px;
line-height:21px;
text-decoration:none;
text-shadow: 0 1px 1px #e7e7e7;
text-align:center;
text-transform:capitalize;
cursor: move;
}
</style>
<script>
var totalWin=0;
var wins={'home':0,'prog':0,'sql':0,'googly':0,'paper':0,'web':0,'treasure':0,'dumbc':0,'pentathalon':0};
$(document).ready(function(){
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
//myHeight-=50;
initDragRes=function(){
$(function() {
$( "#set div" ).draggable({
stack:"#set div",
handle:$(this).find(".titleInside"),
drag: function(event,ui){
if(parseInt($(this).css('top'))<22){
$(this).css('top','22px');
return false;
}
if((myHeight - parseInt($(this).css('top')))<150){
$(this).css('top',(myHeight-150)+"px");
return false;
}
},
stop: function(event,ui){
}
});
});
$(function() {
$(".draggable").resizable({
maxHeight: myHeight-100,
maxWidth: myWidth-50,
minHeight: 250,
minWidth: 250,
create: function(event,ui){
x=$(this).height();
x-=40;
y=$(this).find(".eventPage").height();
m=$(this).width();
m-=2;
n=$(this).find(".eventPage").width();
if(x<y || m<n){
$(this).css('overflow','auto');
/*$(this).find("nav.control-window").css('top','8px');
$(this).find("nav.control-window").css('left','8px');
$(this).find("h1.titleInside").css('bottom','10px');*/
}
else{
$(this).css('overflow','visible');
/*$(this).find("nav.control-window").css('top','3px');
$(this).find("nav.control-window").css('left','3px');
$(this).find("h1.titleInside").css('bottom','17px');*/
}
},
resize: function(event,ui){
x=$(this).height();
x-=40;
y=$(this).find(".eventPage").height();
m=$(this).width();
m-=2;
n=$(this).find(".eventPage").width();
if(x<y || m<n){
$(this).css('overflow','auto');
//$(this).find("nav.control-window").css('top','5px');
//$(this).find("nav.control-window").css('left','6px');
//$(this).find("h1.titleInside").css('bottom','10px');
}
else{
$(this).css('overflow','visible');
//$(this).find("nav.control-window").css('top','3px');
//$(this).find("nav.control-window").css('left','3px');
//$(this).find("h1.titleInside").css('bottom','15px');
}
}
});
});
}
initDragRes();
topWin=function(x){
$(x).parent().parent().find('.draggable .control-window a').attr('class','deactivate');
$(x).parent().find('.control-window a:first').attr('class','close');
$(x).parent().find('.control-window a:nth-child(2)').attr('class','minimize');
$(x).parent().find('.control-window a:nth-child(3)').attr('class','maximize');
}
maxi=function(a){
$(a).parent().parent().css({'top':'32px','height':(myHeight-100)+'px','left':'10px','width':(myWidth-30)+'px'});
}
popUp=function(str){
checkVis=function(){
if($('#popup').is(':visible'))
$('#popup').slideUp('fast');
}
checkVis();
$('#popupVal').html(str);
$('#popup').slideDown('slow');
setTimeout("checkVis();",5000);
}
popUp("<br><h2>>>> f-11 (fullscreen) for better view<<<</h2>");
/*$(".draggable").bind("resize", function() {
alert( $(".draggable").height() );
});*/
closeFun=function(x){
ind=$(x).parent().parent().find(".titleInside").html();
wins[ind]=0;
$(x).parent().parent().remove();
return false;
}
openPage=function(str){
if(wins[str]==1)
popUp("The window is already present");
/*
draggable
-nav
-a
-a
-a
-titleInside
-eventPage
*/
if(wins[str]==0){
newWindow='<div class="draggable" style="top:32px;height:'+(myHeight-100)+'px;left:10px;width:'+(myWidth-30)+'px;"><nav class="control-window"><a href="#" onclick="closeFun(this);" class="close">deactivate</a><a href="#" class="minimize">deactivate</a><a href="#" onclick="maxi(this)" class="maximize">deactivate</a></nav><h1 id="header" class="titleInside" onclick="topWin(this);">'+str+'</h1><div class="eventPage" id="'+str+'" style="border:1px dotted lightgrey; word-wrap:break-word"><h1>'+str+'</h1><br/><br/><div style="font-size:12px">The contents of the event should be added here<br/><br/>*you can drag the window by clicking (only) on the title. <br/>*you can resize it through the left, bottom edge and left bottom edge corner. <br/>*there is a dashboard with a trigger in the left bottom corner of screen, move your mouse over and check it out. <br/>*minimize wont work, try the rest<br>*the icons are silly (ya i know ;p ) ideas and help are welcome </div></div><div style="background:grey;position:absolute;width:10px;height:10px;right:0px;bottom:0;"></div></div>';
$("#set").append(newWindow);
initDragRes();
totalWin+=1;
wins[str]=1;
}
}
function DisplayClock()
{
var days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat');
// var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var now = new Date();
now.setTime(now.getTime());
var clockDate = days[now.getDay()];// + ', ' + now.getDate() + ' ' + months[now.getMonth()] + ' ' + now.getFullYear();
var hour = now.getHours();
var am_pm;
if (hour > 11)
am_pm = 'PM';
else
am_pm = 'AM';
if(hour == 0)
hour = '12';
else if (hour >12)
hour = hour -12;
var minute = now.getMinutes();
if(minute <10)
minute = '0' + minute;
var second = now.getSeconds();
if(second <10)
second = '0' + second;
var clockTime = hour + ':' + minute;// + ':' + second + ' ' + am_pm;
var fullClock = clockDate + ' ' + clockTime;
document.getElementById('date-time').innerHTML = fullClock;
setTimeout("DisplayClock()",30000);
}
DisplayClock();
});
</script>
</head>
<body>
<!-- dashboard-->
<div id="dashboard" style="position:fixed;width:100%;height:100%;background:black;z-index:1000;opacity:0.4;display:none">
</div>
<div id="dash_cont" style="position:fixed;width:100%;height:100%;z-index:1001;display:none">
<span id="dash_title" style="position:relative;left:40%;top:-15%;background:lightgrey;font-size:50px"> Dash Board </span>
<img src="images/LOGO.png" style="position:relative;top:20%;left:15%" align="center"/>
</div>
<div style="position:fixed;width:20px;height:20px;bottom:0px;left:0px;background:white;z-index:1002;opacity:0;" onmouseover="dashh();">
</div>
<!--bg image(seperate) for svg img blur--
<img id="bgimg" src="images/wall2.jpg" style="z-index:-1"/>-->
<!--top bar-->
<div class="top-bar" style="z-index:500">
<span id="left-text" style="text-decoration:none;position:absolute;left:15px;top:-2px;color:#3c3c3c;text-shadow: 0 2px 2px #e7e7e7;font-size:15px;"> <img src="images/wikip.png" style="height:18px;position:relative;top:4px;"/> &nbsp Paradigm - File - Edit - View - Go - Windows - Help</span>
<!-- use twitter bootstrap for the drop downs -->
<span id="right-text" style="text-decoration:none;position:absolute;right:15px;top:2px;color:#3c3c3c;text-shadow: 0 2px 2px #e7e7e7;font-size:15px;"> <img src="images/wireless-on.png"/> &nbsp <img src="images/batteryb2.png" style="height:15px;"/><span style="position:relative;top:-5px;font-size:10px"><b>(75%)</b></span> &nbsp <img src="images/speaker.png" style="height:16px"/> &nbsp <span id="date-time"></span> &nbsp <b>Guest User</b></span>
</div>
<!--pop up-->
<div id="popup" style="background:#ededed;display:none;position:fixed;left:35%;top:-2px;width:25%;height:200px;z-index:750;border:2px solid grey;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 11px 35px 2px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);">
<div style="height:180px">
<h3 id="popupVal" style="text-align:center"></h3><div> &nbsp *have to minimize the rest of the windows during this action(bug fix)</div>
<button onclick="$('#popup').slideUp();" style="position:absolute;bottom:20px;right:20px">Close</button>
</div>
</div>
<!--windows-->
<div id="set">
</div>
<!--bottom dock -->
<div class="dock" id="dock2" style="z-index:500">
<div class="dock-container2">
<img src="images/left.png" style="position:absolute;left:-24px;"/>
<a class="dock-item2" href="#" onclick="openPage('home')"><span>Home</span><img src="images/FinderIcon.png" alt="home"/></a>
<a class="dock-item2" id="seperator" href="#" style="cursor:default"><span></span><img src="images/seperator.png"/></a>
<a class="dock-item2" href="#" onclick="openPage('prog')"><span>prog & debug</span><img src="images/prog.png" alt="contact" /></a>
<a class="dock-item2" href="#" onclick="openPage('sql')"><span>sequel</span><img src="images/sequel.png" alt="portfolio" /></a>
<a class="dock-item2" href="#" onclick="openPage('paper')"><span>paper presentation</span><img src="images/paper.png" alt="music" /></a>
<a class="dock-item2" href="#" onclick="openPage('googly')"><span>googly</span><img src="images/googly.jpg" alt="video" /></a>
<a class="dock-item2" href="#" onclick="openPage('web')"><span>web design</span><img src="images/web.png" alt="history" /></a>
<a class="dock-item2" href="#" onclick="openPage('treasure')"><span>treasure hunt</span><img src="images/piracy.png" alt="calendar" /></a>
<a class="dock-item2" href="#" onclick="openPage('dumbc')"><span>dumb c</span><img src="images/dumbc.png" alt="rss" /></a>
<a class="dock-item2" href="#" onclick="openPage('pentathalon')"><span>pentathalom</span><img src="images/pentathalon.png" alt="rss" /></a>
<a class="dock-item2" id="seperator" href="#" style="cursor:default"><span></span><img src="images/seperator.png"/></a>
<a class="dock-item2" href="http://fb.com/groups/294849513946639/" onclick="openPage('fb')"><span>facebook</span><img src="images/fb.png" alt="rss" /></a>
<a class="dock-item2" href="http://twitter.com/paradigm2k12" onclick="openPage('tw')"><span>twitter</span><img src="images/twit.png" alt="rss" /></a>
<img src="images/right.png" style="position:absolute;right:-24px;"//>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".dock-item2").click(function(){
if($(this).attr('id')!="seperator")
for(i=0;i<3;i++){$(this).animate({bottom:40},"slow");
$(this).animate({bottom:10},"slow");}
});
});
dashh=function(){
$('#dashboard').toggle();
$('#dash_cont').toggle();
/* if($('#dashboard').css('display')=='none'){
$('#bgimg').css('-webkit-filter','');
$('#bgimg').css('filter', '');}
else{
$('#bgimg').css('-webkit-filter','blur(3px)');
$('#bgimg').css('filter', 'url(#blur-effect-1)');}*/
}
</script>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 100,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 60,
proximity: 150,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</body>
</html>