HTML
<div onload="launch()" class="blurlaunch" style="z-index:300;">
<center>
<img id="profileimg" class="profileimg" src=""></img>
</head>
<center>
<h1 class="usernametext" id="usernametext" style="z-index:10;">Loading...</h1>
<div class="loaderborder">
<h1 class="usernametext" style="z-index:10;"> </h1>
<h1 class="usernametext" style="z-index:10;">⠀⠀⠀⠀⠀ </h1>
<h1 class="usernametext" style="z-index:10;">⠀⠀⠀⠀⠀ </h1>
<h1 class="usernametext" style="z-index:10;">⠀⠀⠀⠀⠀ </h1>
<h1 class="usernametext" style="z-index:10;">⠀⠀⠀⠀⠀ </h1>
<h1 class="usernametext" style="z-index:10;">⠀⠀⠀⠀⠀ </h1>
</center>
</div>
<title>Gi-OS 7</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://c.boylett.uk/libraries/Blob.js"></script>
<script src="http://c.boylett.uk/libraries/FileSaver.min.js"></script>
<script src="http://c.boylett.uk/libraries/canvas-toBlob.js"></script>
<!--Ur mum-->
<div class="menu-wrap" Style="position:relative; Float:right; left:-65px; top:-20px;">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<!--bar at the top-->
<div id="taskbar" style="">
<form method="get" action="https://www.google.com/search?q=" opacity="0.3" target="_blank">
<input name="q" placeholder="Search" class="searchbar" target="_blank">
</form>
<div class="infobar">
<center>
<div id="clockbox" style="font:32pt lato; color:#bcbcbc; font-weight:200; ">
<script type="text/javascript">
function GetClock() {
var d = new Date();
var nhour = d.getHours(),
nmin = d.getMinutes(),
ap;
if (nhour == 0) {
ap = " am";
nhour = 12;
} else if (nhour < 12) {
ap = " am";
} else if (nhour == 12) {
ap = " pm";
} else if (nhour > 12) {
ap = " pm";
nhour -= 12;
}
if (nmin <= 9) nmin = "0" + nmin;
document.getElementById("clockbox").innerHTML =
"" + nhour + ":" + nmin + ap + "";
}
window.onload = function() {
GetClock();
setInterval(GetClock, 1000);
};
</script>
</div>
</center>
<div id="status">
<svg id="charge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.29 176.83">
<rect id="charge-status" x="17" y="17" data-full="" width="0" height="142" fill="">
<animate id="charge-status-ani" attributeName="width" from="0" to="" dur="2s" repeatCount="1" />
</rect>
<g id="battery-path">
<path d="M443.2,310.95a17.69,17.69,0,0,1,17.68,17.68v53a17.69,17.69,0,0,1-17.68,17.68v22.1a22.17,22.17,0,0,1-22.1,22.1H164.69a22.17,22.17,0,0,1-22.1-22.1V288.85a22.17,22.17,0,0,1,22.1-22.1h256.4a22.17,22.17,0,0,1,22.1,22.1v22.1Zm-2.7,70.73v-53h-15V288.85a4.26,4.26,0,0,0-4.42-4.42H164.69a4.26,4.26,0,0,0-4.42,4.42V421.47a4.26,4.26,0,0,0,4.42,4.42h256.4a4.26,4.26,0,0,0,4.42-4.42V381.68h15Z" transform="translate(-142.59 -266.74)" fill="#bcbcbc"/>
</g>
<polygon class="hidden" id="charge-path" points="129.64 37.69 189.71 37.69 165.26 80.27 191.19 80.27 127.74 146.66 136.81 96.07 111.94 96.5 129.64 37.69" fill="#f1c40f">
<animate attributeName="fill" from="#f1c40f" to="#fcd536" dur="2s" repeatCount="indefinite" />
</polygon>
</svg>
<h1 class="username" id="username"></h1>
</div>
<div class="lowpowermode" id="lowpowermode">
<center>
<h1 class="lowpowertext"> low power mode is on.</h1>
</center>
</div>
</div>
<script src="main.js"></script>
</body>
</head>
<body>
<div class="appdrawer" id="appdrawer" onmouseover="hoverwrote()">
<div>
<div class="app wrote" id="showwrote"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">subject</i>
</div>
<h1></h1></div>
<div>
<div>
<div class="app music" onmouseover="hovermusic()" id="showmusic"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">music_note</i>
</div>
<h1></h1></div>
<div>
<div class="app wiki" onmouseover="hoverwiki()" id="showwiki"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">search</i>
</div>
<h1></h1></div>
<div>
<div class="app note" onmouseover="hovernote()" id="shownote"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">note</i>
</div>
<h1></h1></div>
<div>
<div class="app june" onmouseover="hoverjune()" id="showjune"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">keyboard_voice</i>
</div>
<h1></h1></div>
<div>
<div class="app calculatorapp" id="showcalculator"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">add</i>
</div>
<h1></h1></div>
<div onClick="draweropen()">
<div class="appo appdraweropenfull" id="showappdraweropenfull" onClick="draweropen()"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;" onClick="draweropen()">blur_on</i>
</div>
<h1></h1></div>
<!--BAR 2-->
<div>
<div class="appl2 app1" id="showapp1"> <i class="material-icons md-dark" style="left:5px; top:6.5px; position:relative; font-size:30px;">details</i>
</div>
<h1></h1></div>
<div>
<div class="appl2 app2" id="showapp2"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">crop_square</i>
</div>
<h1></h1></div>
<div>
<div class="appl2 app3" id="showapp3"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">panorama_fish_eye</i>
</div>
<h1></h1></div>
<div class="appl2 weather" id="showweather"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">filter_drama</i>
</div>
<h1></h1></div>
<div>
<div class="appl2 help" id="showhelp"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">help</i>
</div>
<h1></h1></div>
<div>
<div class="appl2 set" onmouseover="hoverset()" id="showset"> <i class="material-icons md-dark" style="left:5px; top:5px; position:relative; font-size:30px;">settings</i>
</div>
<h1></h1></div>
</div>
</div>
<!--waves in background-->
<div class="waves" id="waves">
<div class='wave -one' id="wave"></div>
<div class='wave -two' id="wave"></div>
<div class='wave -three' id="wave"></div>
</div>
<!--Wikipedia app-->
<div>
<div class="appboxwiki" style="position:relative; top:30em; left:42%;">
<script>
//hide app
$(document).ready(function() {
$("#hidewiki").click(function() {
$('div[class^="appboxwiki"]').hide();
});
//show app
$("#showwiki").click(function() {
$('div[class^="appboxwiki"]').show();
});
$('div[class^="appboxwiki"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablewiki {
width: 500px;
height: 60px;
}
</style>
<script>
$(function() {
$("#draggablewiki").draggable();
});
</script>
<center>
<div id="draggablewiki" class="appwindow wikiapp" style="position:absolute; width:500px; height:30px; border:none; ">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidewiki" id="hidewiki">
</button>
<div class="menubarhider" style="width:500px; position:absolute;"></div>
<!---->
<form method="get" action="https://en.wikipedia.org/w/index.php?title=" opacity="0.3" target="_blank">
<input placeholder=" Search Wikipedia." name="title" class="appwindow2" target="_blank" style="position:absolute; font-family:'lato'; font-size:20px; border:none; font-weight:200; top:16px; left:0px; width:500px; height:30px;">
</form>
</div>
</form>
</div>
</div>
<div class="appboxnote" style="position:relative; top:30em; left:38%;">
<script>
//hide app
$(document).ready(function() {
$("#hidenote").click(function() {
$('div[class^="appboxnote"]').hide();
});
//show app
$("#shownote").click(function() {
$('div[class^="appboxnote"]').show();
});
$('div[class^="appboxnote"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablenote {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablenote").draggable();
});
</script>
<center>
<div id="draggablenote" class="appwindow noteapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidenote" id="hidenote">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<!---->
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="530" class="musicplayer" src="https://codepen.io/gi-os/full/aLqYPp/" frameborder="0" allowfullscreen style="position:relative; top:-80px;"></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxmusic" style="position:relative; top:30em; left:34%;">
<script>
//hide app
$(document).ready(function() {
$("#hidemusic").click(function() {
$('div[class^="appboxmusic"]').hide();
});
//show app
$("#showmusic").click(function() {
$('div[class^="appboxmusic"]').show();
});
$('div[class^="appboxmusic"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablemusic {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablemusic").draggable();
});
</script>
<center>
<div id="draggablemusic" class="appwindow musicapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidemusic" id="hidemusic">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<!---->
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" src="https://www.youtube.com/embed/IEl015B-PK0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxwrote" style="position:relative; top:30em; left:30%;">
<script>
//hide app
$(document).ready(function() {
$("#hidewrote").click(function() {
$('div[class^="appboxwrote"]').hide();
});
//show app
$("#showwrote").click(function() {
$('div[class^="appboxwrote"]').show();
});
$('div[class^="appboxwrote"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablewrote {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablewrote").draggable();
});
</script>
<center>
<div id="draggablewrote" class="appwindow wroteapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidewrote" id="hidewrote">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" src="https://gi-os.github.io/Gi-OS-7/write.html" frameborder="0" allowfullscreen></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxset" style="position:relative; top:30em; left:26%;">
<script>
//hide app
$(document).ready(function() {
$("#hideset").click(function() {
$('div[class^="appboxset"]').hide();
});
//show app
$("#showset").click(function() {
$('div[class^="appboxset"]').show();
});
$('div[class^="appboxset"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggableset {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggableset").draggable();
});
</script>
<center>
</center>
<div id="draggableset" class="appwindow setapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hideset" id="hideset">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
Preferences.
<div>___________________________________________________________</div>
<div class="setboxarea">
<form id="backgroundselect2" method="get">Set Background:
<input type="text" name="fname" id="backgroundselect" class="bar" placeholder="Image Adress"><br>
<input type="button" value="Set" name="button" class="button" onClick="testResults(this.form)">
</form>
<form id="backgroundselect2" method="get">Set Profile Picture:
<input type="text" name="profpic" id="backgroundselect" class="bar" placeholder="Image Adress"><br>
<input type="button" value="Set" name="button" class="button" onClick="testrosalt(this.form)">
</form>
<form id="namewrite" method="get"> Set Name:
<input type="text" name="username" id="backgroundselect" class="bar" placeholder="Username"><br>
<input type="button" value="Set" name="button" class="button" onClick="testrasult(this.form)">
</form>
<form id="nameapp1" method="get"> Custom App 1:
<input type="text" name="app1link" id="backgroundselect" class="bar" placeholder="URL"><br>
<input type="button" value="Set" name="button" class="buttontoggle" onClick="app1(this.form)">
</form>
<form id="nameapp2" method="get"> Custom App 2:
<input type="text" name="app2link" id="backgroundselect" class="bar" placeholder="URL"><br>
<input type="button" value="Set" name="button" class="buttontoggle" onClick="app2(this.form)">
</form>
<form id="namewrite" method="get"> Custom App 3:
<input type="text" name="app3link" id="backgroundselect" class="bar" placeholder="URL"><br>
<input type="button" value="Set" name="button" class="buttontoggle" onClick="app3(this.form)">
</form>
</div>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
</div>
<div class="appboxjune" style="position:relative; top:30em; left:22%;">
<script>
//hide app
$(document).ready(function() {
$("#hidejune").click(function() {
$('div[class^="appboxjune"]').hide();
});
//show app
$("#showjune").click(function() {
$('div[class^="appboxjune"]').show();
});
$('div[class^="appboxjune"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablejune {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablejune").draggable();
});
</script>
<center>
<div id="draggablejune" class="appwindow juneapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidejune" id="hidejune">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<!---->
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" src="https://codepen.io/gi-os/full/GNKyvG/" frameborder="0" allowfullscreen style="position:relative; top:-80px; height:530px;"></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxcalculator" style="position:relative; top:30em; left:18%;">
<script>
//hide app
$(document).ready(function() {
$("#hidecalculator").click(function() {
$('div[class^="appboxcalculator"]').hide();
});
//show app
$("#showcalculator").click(function() {
$('div[class^="appboxcalculator"]').show();
});
$('div[class^="appboxcalculator"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablecalculator {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablecalculator").draggable();
});
</script>
<center>
<div id="draggablecalculator" class="appwindow calculatorapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidecalculator" id="hidecalculator">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<!---->
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" src="https://www.desmos.com/scientific" scrolling="no" frameborder="0" allowfullscreen style="position:relative; top:-80px; height:530px; overflow-x: hidden;
overflow-y: hidden;"></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxapp1" style="position:relative; top:30em; left:14%;">
<script>
//hide app
$(document).ready(function() {
$("#hideapp1").click(function() {
$('div[class^="appboxapp1"]').hide();
});
//show app
$("#showapp1").click(function() {
$('div[class^="appboxapp1"]').show();
});
$('div[class^="appboxapp1"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggableapp1 {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggableapp1").draggable();
});
</script>
<center>
<div id="draggableapp1" class="appwindow app1app" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hideapp1" id="hideapp1">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" id="app1page" frameborder="0" allowfullscreen></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxapp2" style="position:relative; top:30em; left:10%;">
<script>
//hide app
$(document).ready(function() {
$("#hideapp2").click(function() {
$('div[class^="appboxapp2"]').hide();
});
//show app
$("#showapp2").click(function() {
$('div[class^="appboxapp2"]').show();
});
$('div[class^="appboxapp2"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggableapp2 {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggableapp2").draggable();
});
</script>
<center>
<div id="draggableapp2" class="appwindow app2app" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hideapp2" id="hideapp2">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" id="app2page" frameborder="0" allowfullscreen></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxapp3" style="position:relative; top:30em; left:6%;">
<script>
//hide app
$(document).ready(function() {
$("#hideapp3").click(function() {
$('div[class^="appboxapp3"]').hide();
});
//show app
$("#showapp3").click(function() {
$('div[class^="appboxapp3"]').show();
});
$('div[class^="appboxapp3"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggableapp3 {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggableapp3").draggable();
});
</script>
<center>
<div id="draggableapp3" class="appwindow app3app" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hideapp3" id="hideapp3">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" id="app3page" frameborder="0" allowfullscreen></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
<div class="appboxhelp" style="position:relative; top:30em; left:2%;">
<script>
//hide app
$(document).ready(function() {
$("#hidehelp").click(function() {
$('div[class^="appboxhelp"]').hide();
});
//show app
$("#showhelp").click(function() {
$('div[class^="appboxhelp"]').show();
});
$('div[class^="appboxhelp"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggablehelp {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggablehelp").draggable();
});
</script>
<center>
</center>
<div id="draggablehelp" class="appwindow helpapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hidehelp" id="hidehelp">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
Help.
<div>___________________________________________________________</div>
<div class="setboxarea">
Customizability: By acessing the settings app you can customize multiple different things, like your background, profile picture, or username.
<div>___________________________________________________________</div>
How to use custom apps: First find a website you would like to use, second check if it is iframe compatible, if it isn't, the app will show a blank screen. Next get the url and type it into the settings app.
<div>___________________________________________________________</div>
(This window will stay infront of all others.)
</div>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
</div>
<div class="appboxweather" style="position:relative; top:40em; left:42%;">
<script>
//hide app
$(document).ready(function() {
$("#hideweather").click(function() {
$('div[class^="appboxweather"]').hide();
});
//show app
$("#showweather").click(function() {
$('div[class^="appboxweather"]').show();
});
$('div[class^="appboxweather"]').hide();
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggableweather {
width: 450px;
height: 400px;
}
</style>
<script>
$(function() {
$("#draggableweather").draggable();
});
</script>
<center>
<div id="draggableweather" class="appwindow weatherapp" style="position:absolute; width:500px;height:500px; border:none; background-color:none;">
<div class="menubar" style="width:500px; position:absolute; top:-12px; ">
<button class="hideweather" id="hideweather">
</button>
<div class="menubarhider" style="width:500px; position:absolute; "></div>
<!---->
<center>
<div class="frameOverlay"></div>
<div class="musicplayerborder">
<iframe width="450" height="450" class="musicplayer" src="https://codepen.io/gi-os/full/RLeQNV/" scrolling="no" frameborder="0" allowfullscreen style="position:relative; top:-80px; height:530px; overflow-x: hidden;
overflow-y: hidden;"></iframe>
</div>
</center>
</form>
</div>
</center>
</script>
</div>
</body>
<center>
<p1 id="Title">Gi-OS 7 | ????02</p1>
<div id="result"></div>
</center>
<center>
<h1 class="usernametext" id="usernametext" style="z-index:0;"></h1>
</center>
CSS
html{
autofocus: false;
}
#taskbar {
width: 100%;
height: 40px;
}
.lpm{
width:0px;
height:0px;
opacity:0;
}
html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-repeat:no-repeat;
background-size: 100% 100%;
max-width: 100%;
overflow-x: hidden;
}
.searchbar{
background-color: #f2f2f2;
width: 390px;
height: 45px;
position: absolute;
font-size: 28px;
font-weight: 200;
border-style: none;
color:#bcbcbc;
font-family:lato;
border-radius: 30px;
position: absolute;
top: 10px;
left: 10px;
border-radius: 30px;
padding:0px 0px 0px 5px;
opacity:.9;
}
.searchbar::placeholder{
color:#bcbcbc;
}
.lowpowertext{
font:13pt lato;
color:#bcbcbc;
font-weight:400;
position:relative;
top:-2px;
}
.lowpowermode{
background:inherit;
width: 200px;
height: 40px;
float:right;
position:absolute;
right:-400px;
top:100px;
border-radius: 30px;
overflow: hidden;
}
.slidein{
transition-duration: 2s;
right:0px;
}
.infobar{
background-color: #f2f2f2;
width: 200px;
height: 80px;
float:right;
position:absolute;
right:10px;
top:10px;
border-radius: 30px;
opacity:.9;
}
.wrap,
.wrap2 {
width: 230px;
height: auto;
margin: 70px 100px;
float: left;
}
.wrap2 {
width: 210px !important;
}
.appdrawer {
background-color: #f2f2f2;
width: 40px;
height: 410px;
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 27px;
padding:7px;
opacity:.9;
overflow-x: hidden;
overflow-y: hidden;
transition-duration: 1s;
z-index:1;
}
.full{
background-color: #f2f2f2;
height: 410px;
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 27px;
padding:7px;
opacity:.9;
overflow-x: hidden;
overflow-y: hidden;
transition-duration: 1s;
width: 100px;
opacity:1;
}
.app {
background-color: white;
width: 40px;
height: 40px;
border-radius: 30px;
user-select: none;
}
.appo {
background-color: rgba(0,0,0,0);
width: 40px;
height: 40px;
border-radius: 30px;
user-select: none;
transition-duration:1s;
}
.appo:hover {
background-color: white;
color:#30bdff;
width: 40px;
height: 40px;
border-radius: 30px;
user-select: none;
transition-duration:1s;
}
.appl2 {
background-color: white;
position:relative;
left:61px;
top:-430px;
width: 40px;
height: 40px;
border-radius: 30px;
user-select: none;
}
.appl3 {
background-color: white;
position:relative;
left:122px;
top:-430px;
width: 40px;
height: 40px;
border-radius: 30px;
user-select: none;
}
.musicplayer {
border-radius: 15px;
overflow: hidden;
width: 450px;
height: 450px;
color:#bcbcbc;
}
.loader {
border-radius: 15px;
overflow: hidden;
width: 450px;
height: 450px;
color:#bcbcbc;
}
.loaderborder {
position:relative;
top:20px;
border-radius: 15px;
overflow: hidden;
width: 450px;
height: 450px;
}
.musicplayerborder {
position: absolute;
top: 40px;
right: 24px;
border-radius: 15px;
overflow: hidden;
width: 450px;
height: 450px;
}
.appwindow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
font-family: "lato";
font-size: 20px;
border: none;
font-weight: 200;
left: 0px;
border-radius: 15px;
background-color: #f2f2f2;
bottom: 0px;
}
.blur {
-webkit-filter: url('#blur');
filter: url('#blur');
-webkit-filter: blur(1px);
filter: blur(1px);
}
.blurlaunch {
background-size: 150%;
background-image: linear-gradient(45deg, #ECDDFE 10%, #5CF0F8 50%, #ece0f9 100%);
transition-duration: 1s;
width:110%;
height:105%;
left:-5%;
top:-5%;
position:absolute;
}
.open {
transition-duration: 2s;
position:absolute;
top:-200%;
}
.load {
background-image: linear-gradient(45deg, #ECDDFE 0%, #5CF0F8 50%, #ece0f9 100%);
transition: 1s;
position:absolute;
background-position: 100% 0;
}
.usernametext {
transition-duration: 2s;
position:relative;
top:5em;
font-family: lato;
font-weight:300;
-webkit-font-smoothing: antialiased;
padding: 0.5rem;
font-size: 50px;
border: 0px solid #D9D9D9;
border-radius: 3px;
font-family: lato;
font-weight:200;
color:#ffffff;
}
.username{
position:absolute;
font-family: lato;
color: #bcbcbc;
top:34px;
left:10px;
Float:left;
font-size: 20px;
border-radius: 3px;
font-family: lato;
font-weight:400;
}
.opentext{
color:rgba(0,0,0,0);
user-select: none;
z-index:-10;
}
.appwindow2 {
position: absolute;
font-family: "lato";
font-size: 20px;
border: none;
font-weight: 200;
left: 0px;
border-radius: 15px;
background-color: #f2f2f2;
bottom: 0px;
}
.profileimg{
border-style:10px solid #30bdff;
border-radius: 100%;
z-index:2;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.login{
width:200px;
height:200px;
position:relative;
top:300px;
border-style:none;
border-radius:50%;
}
.writeboxarea{
position:relative;
top:30px;
float:left;
font-family: lato;
font-size: 100%;
font-weight:300;
color: #33383D;
-webkit-font-smoothing: antialiased;
padding: 0.5rem;
font-size: 1rem;
border: 0px solid #D9D9D9;
border-radius: 3px;
font-family: lato;
font-weight:400;
}
#result{
color:rgba(0,0,0,0);
}
.setboxarea{
}
.menubar {
background-color: #e5e5e5;
height: 35px;
position: absolute;
left: 0px;
top: -1px;
border-radius: 15px 15px 0px 0px;
}
.menubarhider {
background-color: #f2f2f2;
height: 35px;
position: absolute;
left: 0px;
top: 15px;
border-radius: 15px;
}
.wave {
opacity: 0.3;
position: absolute;
top: 3%;
left: 40%;
background: linear-gradient(45deg,#00ffbf,#30bdff);
width: 1900px;
height: 1900px;
margin-left: -250px;
margin-top: 500px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 20000ms infinite linear;
z-index: -1;
}
.wave.-three {
animation: drift 10000ms infinite linear;
z-index: -3;
}
.wave.-two {
animation: drift 10000ms infinite linear;
opacity: 0.2;
background: linear-gradient(45deg,#30bdff, #d580ff);
z-index: -2;
}
@keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
.hidewiki {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow app1app {
width: 468px;
height: 30px;
position: relative;
top: 0px;
}
.hideapp1 {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow app3app {
width: 468px;
height: 30px;
position: relative;
top: 0px;
}
.hideapp3 {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow helpapp {
width: 468px;
height: 30px;
position: relative;
top: 0px;
}
.appwindow weatherapp {
width: 468px;
height: 30px;
position: relative;
top: 0px;
}
.hideweather {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.hidehelp {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow wikiapp {
width: 468px;
height: 30px;
position: relative;
top: 0px;
}
.hidemusic {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow musicapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hidejune {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow juneapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hidewrote {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow wroteapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hidenote {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow noteapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hideset {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow setapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hidecalculator {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow calculatorapp {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.hideapp2 {
background-image: url("http://oi68.tinypic.com/sffgoi.jpg");
border: none;
background-size: 30px 30px;
height: 30px;
width: 30px;
float: right;
border-radius: 0px 15px 0px 0px;
}
.appwindow app2app {
width: 500px;
height: 500px;
position: relative;
top: 0px;
}
.body{
position: fixed;
}
a,
a:visited {
color: #08C;
text-decoration: none;
}
a:hover,
a:focus {
color: #69c773;
cursor: pointer;
}
a.delete-file,
a.delete-file:visited {
color: #30bdff;
margin-left: 0.5rem;
}
#file-form {
width: 80%;
float: left;
}
input,
textarea {
}
textarea {
min-height: 300px;
}
button:hover {
opacity: 0.75;
cursor: pointer;
}
#files {
width: 230px;
float: right;
}
#files ul {
margin: 0;
padding: 0.5rem 1rem;
height: 330px;
overflow-y: auto;
list-style: none;
background: #Fff;
border: 1px solid #D9D9D9;
border-radius: 3px;
}
#files li {
padding: 0.5rem 0;
}
#messages {
display: inline-block;
font-weight: bold;
color: #30bdff;
margin-left: 1rem;
}
/* Clearfix Utils */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.titlebox{
position:relative;
bottom: -50em;
left:-30px;
z-index:-1;
width:300px;
}
#Title {
position:absolute;
bottom:1%;
right:1%;
font-family: lato;
font-weight: 300;
font-size: 20px;
color: #fff;
}
#Title2 {
position:absolute;
bottom:1%;
font-family: lato;
font-weight: 400;
font-size: 20px;
color: #fff;
}
.frameOverlay {
height: 530px;
width: 500px;
background: rgba(0,0,0,0) ;
position: absolute;
top: 0;
left: 0;
display: none;
z-index:11;
}
#charge {
display:block;
width:25px;
height:20px;
padding:0 15px;
position:absolute;
right:-4px;
top:50px;
opacity:.9;
}
.hidden {display:none;}
.meta{
display:block;
position:absolute;
bottom:0;
width:98%;
padding:10px 1%;
margin:0;
}
#charge-status{
transition:.4s all;
opacity:1;
}
.bat-change{
opacity:.2;
}
a {
color:#f2f2f2;
}
@media screen and (max-width:800px){
#charge {
transform:rotate(-90deg);
}
.meta {
text-align:center;
width:96%;
padding:2%;
}
}
.button{
border-radius:15px;
border:none;
font-family:lato;
position:relative;
top:-24px;
float:right;
right:1px;
height:20px;
}
.waved{
width:0px;
height:0px;
position:absolute;
bottom:-300em;
}
.buttontoggle{
border-radius:15px;
border:none;
font-family:lato;
position:relative;
top:-24px;
float:right;
right:1px;
height:20px;
}
.bar{
border-radius:15px;
border:none;
font-family:lato;
height:20px;
float:right;
position:absolute;
right:35px;
}
JAVASCRIPT
$("#showappdraweropenfull").click(function() {
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
})
$(".appboxmusic").click(function() {
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxwiki").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxwrote").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxnote").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxset").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxjune").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxcalculator").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxapp1").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxapp2").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxapp3").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxweather"]').css("z-index", "0");
$('div[class^="appboxweather"]').animate({ opacity: 0.8 });
$('div[class^="appboxweather"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(".appboxweather").click(function() {
$('div[class^="appboxmusic"]').css("z-index", "0");
$('div[class^="appboxmusic"]').animate({ opacity: 0.8 });
$('div[class^="appboxmusic"]').addClass("blur");
$('div[class^="appboxwrote"]').css("z-index", "0");
$('div[class^="appboxwrote"]').animate({ opacity: 0.8 });
$('div[class^="appboxwrote"]').addClass("blur");
$('div[class^="appboxnote"]').css("z-index", "0");
$('div[class^="appboxnote"]').animate({ opacity: 0.8 });
$('div[class^="appboxnote"]').addClass("blur");
$('div[class^="appboxset"]').css("z-index", "0");
$('div[class^="appboxset"]').animate({ opacity: 0.8 });
$('div[class^="appboxset"]').addClass("blur");
$('div[class^="appboxwiki"]').css("z-index", "0");
$('div[class^="appboxwiki"]').animate({ opacity: 0.8 });
$('div[class^="appboxwiki"]').addClass("blur");
$('div[class^="appboxjune"]').css("z-index", "0");
$('div[class^="appboxjune"]').animate({ opacity: 0.8 });
$('div[class^="appboxjune"]').addClass("blur");
$('div[class^="appboxcalculator"]').css("z-index", "0");
$('div[class^="appboxcalculator"]').animate({ opacity: 0.8 });
$('div[class^="appboxcalculator"]').addClass("blur");
$('div[class^="appboxapp1"]').css("z-index", "0");
$('div[class^="appboxapp1"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp1"]').addClass("blur");
$('div[class^="appboxapp2"]').css("z-index", "0");
$('div[class^="appboxapp2"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp2"]').addClass("blur");
$('div[class^="appboxapp3"]').css("z-index", "0");
$('div[class^="appboxapp3"]').animate({ opacity: 0.8 });
$('div[class^="appboxapp3"]').addClass("blur");
$(this).removeClass("blur");
$(this).css("z-index", "10");
$(this).animate({ opacity: 1 });
});
$(function() {
$("#draggablemusic").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggablenote").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggablewiki").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggablewrote").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggableset").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggablejune").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggablecalculator").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggableapp1").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggableapp2").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggableapp3").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
$(function() {
$("#draggableweather").draggable({
start: function() {
$(".frameOverlay").fadeIn("fast");
},
stop: function() {
$(".frameOverlay").fadeOut("fast");
}
});
});
window.setTimeout(function() {
$(".blurlaunch").addClass("load");
}, 200);
window.setTimeout(function() {
$(".blurlaunch").addClass("open");
}, 4000);
window.setTimeout(function() {$(".blurlaunch").fadeOut("fast");
}, 5000);
window.setTimeout(function() {
$(".usernametext").addClass("opentext");
}, 5000);
// Check browser support
function testResults (form) {
// Store
var backimg = form.fname.value
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "Background Has been changed",
});
notification.onclick = function () {
};
}
localStorage.setItem("background", "url("+backimg+")")
// Retrieve
$('html').css("background-image", document.getElementById("result").innerHTML = localStorage.getItem("background"));
};
$('html').css("background-image", document.getElementById("result").innerHTML = localStorage.getItem("background"));
function testrosalt (form) {
// Store
var profimg = form.profpic.value
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "Profile Picture has been changed.",
});
notification.onclick = function () {
};
}
localStorage.setItem("profileimage", profimg)
// Retrieve
document.getElementById("profileimg").attr("src", localStorage.getItem("profileimage"));
$('profileimg').addClass("login");
};
function testrasult (form) {
// Store
var username = form.username.value
localStorage.setItem("usernametext", username);
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "Username has been changed",
});
notification.onclick = function () {
};
document.getElementById("usernametext").innerHTML = "Welcome home, "+username+". ";
};
function app1 (form) {
// Store
var link1 = form.app1link.value
localStorage.setItem("app1lik", link1);
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "App 1 Source has been changed",
});
notification.onclick = function () {
};
}
$("#app1page").attr("src", localStorage.getItem("app1lik"));
};
document.getElementById("app1page").src = localStorage.getItem("app1lik");
function app2 (form) {
// Store
var link2 = form.app2link.value
localStorage.setItem("app2lik", link2);
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "App 2 Source has been changed",
});
notification.onclick = function () {
};
$("#app2page").attr("src", localStorage.getItem("app2lik"));
};
document.getElementById("app2page").src = localStorage.getItem("app2lik");
function app3 (form) {
// Store
var link3 = form.app3link.value
localStorage.setItem("app3lik", link3);
var notification = new Notification('Setting Changed:', {
icon: 'http://i67.tinypic.com/w8vuit.jpg',
body: "App 3 link has been changed",
});
notification.onclick = function () {
};
$("#app3page").attr("src", localStorage.getItem("app3lik"));
};
document.getElementById("app3page").src = localStorage.getItem("app3lik");
$("#showappdraweropenfull").click(function() {
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
})
batStatus();
const cs = document.getElementById("charge-status");
const csa = document.getElementById("charge-status-ani");
const cp = document.getElementById('charge-path');
function batStatus(){
navigator.getBattery()
.then(function(battery){
const status = document.getElementById("status-info");
const chargePath = document.getElementById('charge-path');
let batLevel = battery.level * 100,
// something to do with the height of the battery? i think?
batPercent = battery.level * 281;
//set battery status color
batColors();
// full charge width = 281
cs.setAttribute('data-full', batPercent );
csa.setAttribute('to', batPercent);
cs.setAttribute('width', batPercent);
battery.charging ? chargePath.classList.toggle('hidden') : '';
// show hide the charging indicator
updateCharge();
function updateCharge(){
battery.charging ? cp.classList.remove('hidden') : cp.classList.add('hidden');
}
function levelChange(){
cs.setAttribute('width', batPercent);
cs.classList.add('bat-change');
setTimeout(function(){
cs.classList.remove('bat-change');
},300);
}
function batColors() {
switch( true ) {
case (batPercent <= 56):
cs.setAttribute('fill', '#c0392b');
break;
case (batPercent >= 56 && batPercent <= 125):
cs.setAttribute('fill', '#f39c12');
break;
case (batPercent > 125):
cs.setAttribute('fill', '#2ecc71');
}
}
//LOW POWER MODE
if(batPercent <= 125){
$('.waves').fadeOut("fast");
$(".lowpowermode").addClass("slidein");
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
$("#showappdraweropenfull").click(function() {
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
})
}
battery.addEventListener('chargingchange', updateCharge);
//battery.addEventListener('levelchange', levelChange);
}
);
}
$("#showappdraweropenfull").click(function() {
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
})
if(localStorage.getItem("usernametext") === null ){
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
document.getElementById("usernametext").innerHTML = "Please Open the Settings app to set up Gi-OS 7"
$('html').css("background-image", document.getElementById("result").innerHTML = localStorage.getItem("background"));
} else{
document.getElementById("usernametext").innerHTML = "Welcome home, "+
localStorage.getItem("usernametext") + ".";
$('#profileimg').addClass("login");
document.getElementById("username").innerHTML = localStorage.getItem("usernametext");
$("#profileimg").attr("src", localStorage.getItem("profileimage"));
document.getElementById("profileimg").attr("src", "http://www.bing.com/");
$('html').css("background-image", document.getElementById("result").innerHTML = localStorage.getItem("background"));
}
$("#showappdraweropenfull").click(function() {
var element = document.getElementById("appdrawer");
element.classList.toggle("full");
})
