API tools faq
paste
Spaceface14dev

Spaceface14 OS

Spaceface14dev
Feb 26th, 2018
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.92 KB | None | 0 0
raw download clone embed print report
  1. index.html:
  2. __________________________________________
  3.  
  4. <!DOCTYPE html>
  5. <html>
  6. <head><meta name="data-remix-projectId" content="337642">
  7. <meta name="data-remix-projectTitle" content="Spaceface14 OS">
  8. <meta name="data-remix-projectAuthor" content="spaceface14">
  9. <meta name="data-remix-dateUpdated" content="2018-01-26T17:55:37.906Z">
  10. <meta name="data-remix-host" content="https://thimble.mozilla.org">
  11. <meta name="data-remix-readonly" content="null">
  12.  
  13. <meta charset="utf-8">
  14. <meta name="viewport" content="width=device-width, initial-scale=1">
  15. <title>Spaceface14 OS</title>
  16. <link rel="stylesheet" href="style.css">
  17. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  18. <link rel="stylesheet" href="/resources/demos/style.css">
  19. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  20. <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  21. <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  22. <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
  23. <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
  25. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  26. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  27. <link rel="icon" href="Spaceface14_Logo.png" type="image/x-icon" sizes="32x32">
  28. <style>
  29. </style>
  30. <script src="https://thimble.mozilla.org/resources/remix/index.js" type="text/javascript"></script>
  31. </head>
  32. <body onload="setTime();">
  33. <div id="applications" style="background-color: black; z-index: 300; position: absolute; margin-top: -8px; margin-left: -10px; opacity: 0.5;">
  34. <div class="closeapp">
  35. <div class="closeLapp"></div>
  36. <div class="closeRapp"></div>
  37. </div>
  38. </div>
  39. <div id="os">
  40. <div id="top">
  41. <div id="topOrg">
  42. <div id="topLogo" onclick="topLogoInfo = 1;" onmouseout="topLogoInfo = 0;">
  43. <img src="Spaceface14_Logo.png" id="logo">
  44. <h3 id="topCon">Spaceface14</h3>
  45. </div>
  46. <div id="topApp" onclick="topAppInfo = 1;" onmouseout="topAppInfo = 0;">
  47. <h3 id="topCon">Application</h3>
  48. </div>
  49. <div id="topClock">
  50. <h3 id="topCon"><span id="clock" style="margin-left: -20px;">Time</span></h3>
  51. </div>
  52. </div>
  53. </div>
  54. <div id="topLogoInfo" onmouseout="topLogoInfo = 0;" onmouseover="topLogoInfo = 1;" >
  55. <div id="topLogoInfo1">
  56. <h4 style="margin-bottom: 2px; margin-top: 2px">Spaceface 14 is a web based operating system created by Spaceface14 as a porsonal development portfolio</h4>
  57. </div>
  58. <div id="topLogoInfo2" onclick="$('.elem3').show();">
  59. <h4 style="margin-bottom: 2px; margin-top: 2px">Version 1.0</h4>
  60. </div>
  61. <div id="topLogoInfo3" onclick="$('.elem7').show();">
  62. <h4 style="margin-bottom: 2px; margin-top: 2px">Instructions</h4>
  63. </div>
  64. <div id="topLogoInfo4">
  65. <h4 style="margin-bottom: 2px; margin-top: 2px">This operating system is based around both Mac OS and the MrCrayFish Device Mod</h4>
  66. </div>
  67. </div>
  68.  
  69. <div id="topAppInfo" onmouseout="topAppInfo = 0;" onmouseover="topAppInfo = 1;" >
  70. <!--<div id="topAppInfo1" onclick="$('.elem6').show();">
  71. <h4 style="margin-bottom: 2px; margin-top: 10px">Googol</h4>
  72. </div>-->
  73. <div style="text-align:center;">
  74. <h2 style="opacity: 0.4;">Coming <br>Soon</h2>
  75. </div>
  76. </div>
  77.  
  78. <div id='container' style="top:40px; left: 0px;">
  79. <!-- Folder 1 -->
  80. <div class="elem" onmousedown='mydragg2.startMoving(this,"container",event);' onmouseup='mydragg2.stopMoving("container");' style="width: 69px; height: 119px;">
  81. <!--<div class="txt"></div>-->
  82. <img class="txt_file" src="images/text.png" draggable="false">
  83. <div class="fileName">README.txt</div>
  84. </div>
  85. <div class="elem2" onmousedown='mydragg2.startMoving(this,"container",event);' onmouseup='mydragg2.stopMoving("container");' style="width: 102px; height: 102px;">
  86. <!--<div class="file"></div>-->
  87. <img class="folder_file" src="images/folderI.png" draggable="false">
  88. <div class="fileName">Projects</div>
  89. </div>
  90.  
  91. <!--<div class="elem1" onmousedown='mydragg2.startMoving(this,"container",event);' onmouseup='mydragg2.stopMoving("container");' style="width: 102px; height: 116px;">
  92. <!--<div class="txt"></div>-->
  93. <!--<img class="googol" src="images/googol.png" draggable="false">
  94. <div class="fileName">Googol</div>
  95. </div>-->
  96.  
  97. <div class="elem3" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 300px; height: 190px;">
  98. <div id="elem3top">
  99. <h1 class="winTop">Versions: </h1>
  100. <div class="close3">
  101. <div class="closeL3" onclick="closeVer();"></div>
  102. <div class="closeR3" onclick="closeVer();"></div>
  103. </div>
  104. </div>
  105. <div id="V1" style="color: black; margin-top: -2px; opacity: 0.4; font-size: 10; margin-left: 4px;">
  106. <h3 id="V1Text">Version 1.0</h3>
  107. <ul style="margin-top: -14px;">
  108. <li>Basic Window Functionality</li>
  109. <li>Top Bar Functionality</li>
  110. <li>Procedural Layering</li>
  111. <li>Added README.txt and Projects files</li>
  112. <li>Dynamic for most Computer Resolutions</li>
  113. <!--<li>Added Googol Application</li>-->
  114. </ul>
  115. </div>
  116. </div>
  117.  
  118. <!-- Folder Window 1 -->
  119. <div class="elem4" onmousedown='mydragg.startMoving(this,"container",event); winUp(".elem4", ".elem5");' onmouseup='mydragg.stopMoving("container");' style="width: 450px; height: 550px;">
  120. <div id="elem4top">
  121. <h1 class="winTop">About Me: </h1>
  122. <div class="minus4" onclick="closeAbout();"></div>
  123. <div class="enlarge4" onclick="maxAbout();"></div>
  124. <div class="close4">
  125. <div class="closeL4" onclick="reallyCloseAbout();"></div>
  126. <div class="closeR4" onclick="reallyCloseAbout();"></div>
  127. </div>
  128. </div>
  129. <div id="elem4con">
  130. <div class="txtEdit">
  131. <div id="elem4stuff">
  132. <select class="font" name="fonts" onChange="elem4font(this.value);">
  133. <option value="vt323" selected>VT323</option>
  134. <option value="pressstart2p">Press Start 2P</option>
  135. <option value="comfortaa">Comfortaa</option>
  136. <option value="pacifico">Pacifico</option>
  137. <option value="gloria">Gloria Hallelujah</option>
  138. </select>
  139. <input type="color" name="color" id="elem4cp">
  140. <input type="text" name="fontsize" id="elem4fs" value="18.7">
  141. </div>
  142. </div>
  143. <h3 class="winT4">Hello, my name is Spaceface14 and this is my online development portfolio. The whole concept of this portfolio is to present my creations as if one was on my computer. You've seen files, windows, and more come together to form a custom OS for you to explore and have fun in. Yet, who am I in the first place? As of current, I am a young developer exploring the world of programming. Playing around with languages such as HTML, CSS, Javascript, PHP, Java, Python, C#, and so on. </h3>
  144. <img src="Spaceface14_Logo.png">
  145. <!--<a href="https://spaceface14.itch.io/">spaceface14.itch.io</a>-->
  146. </div>
  147. </div>
  148.  
  149.  
  150. <div class="elem5" onmousedown='mydragg.startMoving(this,"container",event); winUp(".elem5", ".elem4");' onmouseup='mydragg.stopMoving("container");' style="width: 450px; height: 300px;">
  151. <div id="elem5top">
  152. <h1 class="winTop">Projects: </h1>
  153. <div class="minus5" onclick="closePro();"></div>
  154. <div class="enlarge5" onclick="maxPro();"></div>
  155. <div class="close5">
  156. <div class="closeL5" onclick="reallyClosePro();"></div>
  157. <div class="closeR5" onclick="reallyClosePro();"></div>
  158. </div>
  159. </div>
  160. <div id="elem5con">
  161. <h3 class="winT5">Projects</h3>
  162. </div>
  163. </div>
  164.  
  165.  
  166. <!--
  167. <div class="elem6" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 700px; height: 430px;">
  168. <div id="elem6top">
  169. <h1 class="winTop">Googol: </h1>
  170. <div class="minus6" onclick="closeGoo();"></div>
  171. <div class="enlarge6" onclick="maxGoo();"></div>
  172. <div class="close6">
  173. <div class="closeL6"></div>
  174. <div class="closeR6"></div>
  175. </div>
  176. </div>
  177. <div id="googolTabs">
  178. <div id="NewTab">New Tab</div>
  179. <div id="NewTabPlus" onclick="addNewTab()"><span id="plusTab">+</span></div>
  180. </div>
  181. <div id="elem6con">
  182. <h3 class="winT6"></h3>
  183. <iframe src="" height="340" width="695"></iframe>
  184. </div>
  185. </div>
  186. -->
  187. <div class="elem7" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 300px; height: 350px;">
  188. <div id="elem7top">
  189. <h1 class="winTop">Instructions: </h1>
  190. <div class="close3">
  191. <div class="closeL3" onclick="closeIns();"></div>
  192. <div class="closeR3" onclick="closeIns();"></div>
  193. </div>
  194. </div>
  195. <div id="" style="color: black; margin-top: -2px; opacity: 0.4; margin-left: 4px;">
  196. <h3 id="">To open a file or application visible on the computer double click the file or application. Any applications not visible on the computer can be found using the application dropdown on the top bar. (This feature is not yet implemented) <br> <br>You can drag windows around the screen, click the minus to make the window invisible but open back up in the same state, click the square to enlarge the window, and click the X to close the window and send it back to its default state.</h3>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201.  
  202. <div id="versionTitle">Version 1.0</div>
  203.  
  204. <script>
  205. //$(".elem2").css("left",700+"px");
  206. //$(".elem2").css("top",30+"px");
  207.  
  208. $(".elem4").hide();
  209. $(".elem5").hide();
  210. $(".elem3").hide();
  211. $(".elem6").hide();
  212. $(".elem7").hide();
  213. $("#topLogoInfo").hide();
  214. $("#applications").hide();
  215. var maxzin = 200;
  216. var maxzin2 = -999999;
  217.  
  218. var topLogoInfo = 0;
  219.  
  220. setInterval(function() {
  221. if (topLogoInfo == 1) {
  222. $('#topLogoInfo').show();
  223. } else {
  224. $('#topLogoInfo').hide();
  225. }
  226. },200);
  227.  
  228. var topAppInfo = 0;
  229.  
  230. setInterval(function() {
  231. if (topAppInfo == 1) {
  232. $('#topAppInfo').show();
  233. } else {
  234. $('#topAppInfo').hide();
  235. }
  236. },200);
  237.  
  238.  
  239. var mydragg = function(){
  240. return {
  241. move : function(divid,xpos,ypos, item){
  242. divid.style.left = xpos + 'px';
  243. divid.style.top = ypos + 'px';
  244. },
  245. startMoving : function(divid,container,evt){
  246. maxzin++;
  247. $(divid).css("z-index", maxzin);
  248. evt = evt || window.event;
  249.  
  250. var posX = evt.clientX,
  251. posY = evt.clientY,
  252. divTop = divid.style.top,
  253. divLeft = divid.style.left,
  254. eWi = parseInt(divid.style.width),
  255. eHe = parseInt(divid.style.height),
  256. cWi = parseInt(document.getElementById(container).style.width),
  257. cHe = parseInt(document.getElementById(container).style.height);
  258. document.getElementById(container).style.cursor='default';
  259. divTop = divTop.replace('px','');
  260. divLeft = divLeft.replace('px','');
  261. var diffX = posX - divLeft,
  262. diffY = posY - divTop;
  263. document.onmousemove = function(evt){
  264. evt = evt || window.event;
  265. var posX = evt.clientX,
  266. posY = evt.clientY,
  267. aX = posX - diffX,
  268. aY = posY - diffY;
  269. if (aX < 0) aX = 0;
  270. if (aY < 0) aY = 0;
  271. if (aX + eWi > cWi) aX = cWi - eWi;
  272. if (aY + eHe > cHe) aY = cHe -eHe;
  273. mydragg.move(divid,aX,aY);
  274. }
  275. },
  276. stopMoving : function(container){
  277. var a = document.createElement('script');
  278. document.getElementById(container).style.cursor='default';
  279. document.onmousemove = function(){}
  280. },
  281. focus : function(container){
  282. document.getElementById(container).style.cursor='default';
  283.  
  284. },
  285. }
  286. }();
  287.  
  288. var mydragg2 = function(){
  289. return {
  290. move : function(divid,xpos,ypos, item){
  291. divid.style.left = xpos + 'px';
  292. divid.style.top = ypos + 'px';
  293. },
  294. startMoving : function(divid,container,evt){
  295. maxzin2++;
  296. $(divid).css("z-index", maxzin2);
  297. evt = evt || window.event;
  298.  
  299. var posX = evt.clientX,
  300. posY = evt.clientY,
  301. divTop = divid.style.top,
  302. divLeft = divid.style.left,
  303. eWi = parseInt(divid.style.width),
  304. eHe = parseInt(divid.style.height),
  305. cWi = parseInt(document.getElementById(container).style.width),
  306. cHe = parseInt(document.getElementById(container).style.height);
  307. document.getElementById(container).style.cursor='default';
  308. divTop = divTop.replace('px','');
  309. divLeft = divLeft.replace('px','');
  310. var diffX = posX - divLeft,
  311. diffY = posY - divTop;
  312. document.onmousemove = function(evt){
  313. evt = evt || window.event;
  314. var posX = evt.clientX,
  315. posY = evt.clientY,
  316. aX = posX - diffX,
  317. aY = posY - diffY;
  318. if (aX < 0) aX = 0;
  319. if (aY < 0) aY = 0;
  320. if (aX + eWi > cWi) aX = cWi - eWi;
  321. if (aY + eHe > cHe) aY = cHe -eHe;
  322. mydragg.move(divid,aX,aY);
  323. }
  324. },
  325. stopMoving : function(container){
  326. var a = document.createElement('script');
  327. document.getElementById(container).style.cursor='default';
  328. document.onmousemove = function(){}
  329. },
  330. focus : function(container){
  331. document.getElementById(container).style.cursor='default';
  332.  
  333. },
  334. }
  335. }();
  336.  
  337. var divdbl = $( ".elem:first" );
  338. divdbl.dblclick(function() {
  339. // divdbl.toggleClass( "dbl" );
  340. $(".elem4").show();
  341. });
  342.  
  343. var divdbl2 = $( ".elem2:first" );
  344. divdbl2.dblclick(function() {
  345. // divdbl.toggleClass( "dbl" );
  346. $(".elem5").show();
  347. });
  348.  
  349. var divdbl3 = $( ".elem1:first" );
  350. divdbl3.dblclick(function() {
  351. //divdbl.toggleClass( "dbl" );
  352. $(".elem6").show();
  353. });
  354.  
  355.  
  356. function closeAbout() {
  357. $(".elem4").hide();
  358. }
  359.  
  360. function closePro() {
  361. $(".elem5").hide();
  362. }
  363.  
  364. function closeVer() {
  365. $(".elem3").hide();
  366. $(".elem3").css("left",w/6+"px");
  367. $(".elem3").css("top",h/14+"px");
  368. }
  369.  
  370. function closeIns() {
  371. $('.elem7').hide();
  372. $(".elem7").css("left",w/3+"px");
  373. $(".elem7").css("top",h/3+"px");
  374. }
  375.  
  376. function closeGoo() {
  377. $(".elem6").hide();
  378. }
  379.  
  380. var clickedAbout = false;
  381.  
  382. function maxAbout() {
  383. if (!clickedAbout) {
  384. $(".elem4").css("width",w+"px");
  385. $(".elem4").css("height",h-40+"px");
  386. $(".minus4").css("left",w-107+"px");
  387. $(".enlarge4").css("left",w-67+"px");
  388. $(".closeL4").css("left",w-20+"px");
  389. $(".closeR4").css("left",w-20+"px");
  390. $("#elem4fs").css("width",w/6+"px");
  391. $("#elem4con").css("height",h-80+"px");
  392. clickedAbout = true;
  393. } else {
  394. $(".elem4").css("width","450px");
  395. $(".elem4").css("height","550px");
  396. $(".minus4").css("left","343px");
  397. $(".enlarge4").css("left","383px");
  398. $(".closeL4").css("left","430px");
  399. $(".closeR4").css("left","430px");
  400. $("#elem4fs").css("width","190");
  401. $("#elem4con").css("height","510");
  402. clickedAbout = false;
  403. }
  404. }
  405.  
  406. var clickedPro = false;
  407.  
  408. function maxPro() {
  409. if (!clickedPro) {
  410. $(".elem5").css("width",w+"px");
  411. $(".elem5").css("height",h-40+"px");
  412. $(".minus5").css("left",w-107+"px");
  413. $(".enlarge5").css("left",w-67+"px");
  414. $(".closeL5").css("left",w-20+"px");
  415. $(".closeR5").css("left",w-20+"px");
  416. clickedPro = true;
  417. } else {
  418. $(".elem5").css("width","450px");
  419. $(".elem5").css("height","300px");
  420. $(".minus5").css("left","343px");
  421. $(".enlarge5").css("left","383px");
  422. $(".closeL5").css("left","430px");
  423. $(".closeR5").css("left","430px");
  424. clickedPro = false;
  425. }
  426. }
  427.  
  428. var clickedGoo = false;
  429.  
  430. function maxGoo() {
  431. if (!clickedGoo) {
  432. $(".elem6").css("width",w+"px");
  433. $(".elem6").css("height",h-40+"px");
  434. $(".minus6").css("left",w-107+"px");
  435. $(".enlarge6").css("left",w-67+"px");
  436. $(".closeL6").css("left",w-20+"px");
  437. $(".closeR6").css("left",w-20+"px");
  438. clickedGoo = true;
  439. } else {
  440. $(".elem6").css("width","700px");
  441. $(".elem6").css("height","430px");
  442. $(".minus6").css("left","600px");
  443. $(".enlarge6").css("left","637px");
  444. $(".closeL6").css("left","680px");
  445. $(".closeR6").css("left","680px");
  446. clickedGoo = false;
  447. }
  448. }
  449.  
  450. function fileUp(id, id2) {
  451. $(id).css("z-index","1");
  452. $(id2).css("z-index","0");
  453. }
  454.  
  455. //function winUp(id, id2) {
  456. //$(id).css("z-index","30");
  457. //$(id2).css("z-index","10");
  458. //}
  459.  
  460. var uniwin = {
  461. width: window.innerWidth || document.documentElement.clientWidth
  462. || document.body.offsetWidth,
  463. height: window.innerHeight || document.documentElement.clientHeight
  464. || document.body.offsetHeight
  465. };
  466.  
  467. var w = uniwin.width;
  468. var h = uniwin.height;
  469.  
  470. setInterval(function() {
  471. document.getElementById("container").style.width = w+"px";
  472. document.getElementById("container").style.height = h-40+"px";
  473. document.getElementById("top").style.width = w+"px";
  474. document.getElementById("topClock").style.marginLeft = w/1.5+"px";
  475. document.getElementById("clock").style.marginLeft = (w/1.5)/50+"px";
  476. document.getElementById("applications").style.width = w*2+"px";
  477. document.getElementById("applications").style.height = h*2+"px";
  478. document.getElementById("versionTitle").style.top = h/1.15+"px";
  479. document.getElementById("versionTitle").style.marginLeft = 60+"px";
  480. },1);
  481.  
  482. $(".elem").css("left",w/1.1+"px");
  483. $(".elem").css("top",h/6+"px");
  484.  
  485. $(".elem2").css("left",w/1.2+"px");
  486. $(".elem2").css("top",h/2+"px");
  487.  
  488. $(".elem4").css("left",w/16+"px");
  489. $(".elem4").css("top",h/24+"px");
  490.  
  491. $(".elem5").css("left",w/2+"px");
  492. $(".elem5").css("top",h/16+"px");
  493.  
  494. $(".elem3").css("left",w/6+"px");
  495. $(".elem3").css("top",h/14+"px");
  496.  
  497. $(".elem7").css("left",w/3+"px");
  498. $(".elem7").css("top",h/3+"px");
  499.  
  500. //$(".elem").css("left",w/1.1+"px");
  501. //$(".elem").css("top",h/5+"px");
  502.  
  503. //$(".elem2").css("left",w/1.2+"px");
  504. //$(".elem2").css("top",400+"px");
  505.  
  506. //$(".elem4").css("left",700+"px");
  507. //$(".elem4").css("top",30+"px");
  508. //window.onresize = function () {
  509. //location.reload();
  510. //}
  511.  
  512. function reallyClosePro() {
  513. $(".elem5").hide();
  514. $(".elem5").css("left",w/2+"px");
  515. $(".elem5").css("top",h/16+"px");
  516. $(".elem5").css("width","450px");
  517. $(".elem5").css("height","300px");
  518. $(".minus5").css("left","343px");
  519. $(".enlarge5").css("left","383px");
  520. $(".closeL5").css("left","430px");
  521. $(".closeR5").css("left","430px");
  522. clickedPro = false;
  523. }
  524.  
  525. function reallyCloseAbout() {
  526. $(".elem4").hide();
  527. $(".elem4").css("left",w/16+"px");
  528. $(".elem4").css("top",h/24+"px");
  529. document.getElementById("elem4cp").value= "#000000";
  530. document.getElementById("elem4fs").value= "18.7";
  531. $(".font").val('vt323');
  532. $(".winT4").css("font-family", "'VT323', monospace");
  533. $(".elem4").css("width","450px");
  534. $(".elem4").css("height","550px");
  535. $(".minus4").css("left","343px");
  536. $(".enlarge4").css("left","383px");
  537. $(".closeL4").css("left","430px");
  538. $(".closeR4").css("left","430px");
  539. $("#elem4fs").css("width","190");
  540. $("#elem4con").css("height","510");
  541. clickedAbout = false;
  542. }
  543.  
  544. document.addEventListener('contextmenu', event => event.preventDefault());
  545.  
  546.  
  547. function elem4font(f) {
  548. if (f == 'vt323') {
  549. $(".winT4").css("font-family", "'VT323', monospace");
  550. } else if (f == 'pressstart2p') {
  551. $(".winT4").css("font-family", "'Press Start 2P', cursive");
  552. } else if (f == 'comfortaa') {
  553. $(".winT4").css("font-family", "'Comfortaa', cursive");
  554. } else if (f == 'gloria') {
  555. $(".winT4").css("font-family", "'Gloria Hallelujah', cursive");
  556. } else {
  557. $(".winT4").css("font-family", "'Pacifico', cursive");
  558. }
  559. }
  560.  
  561.  
  562. setInterval(function elem4c() {
  563. var color4 = document.getElementById("elem4cp");
  564. var color42 = color4.value;
  565. $(".winT4").css("color", color42);
  566. var font4 = document.getElementById("elem4fs");
  567. var font42 = font4.value;
  568. $(".winT4").css("font-size", font42 + "px");
  569. }, 10);
  570.  
  571.  
  572. // $(".elem4cp").change(function(){
  573. // $(".winT").css('color', $(this).val());
  574. //});
  575.  
  576. //$( function() {
  577. //$( ".elem4" ).resizable();
  578. //} );
  579.  
  580. //$(".elem4").css({
  581. //"max-width": w-40+"px",
  582. //"max-height": h-80+"px",
  583. //"min-width": "200",
  584. //"min-height": "200",
  585. //});
  586.  
  587. //document.body.onclick = function (e) {
  588. //var isRightMB;
  589. //e = e || window.event;
  590.  
  591. //if ("which" in e) {// Gecko (Firefox), WebKit (Safari/Chrome) & Opera
  592. // isRightMB = e.which == 3;
  593. //} else if ("button" in e) {} // IE, Opera
  594. //isRightMB = e.button == 2;
  595. //}
  596. //alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
  597. //}
  598.  
  599.  
  600. function setTime() {
  601. var today = new Date();
  602. var d = today.getDay();
  603. var weekday = new Array(7);
  604. weekday[0] = "Sunday";
  605. weekday[1] = "Monday";
  606. weekday[2] = "Tuesday";
  607. weekday[3] = "Wednesday";
  608. weekday[4] = "Thursday";
  609. weekday[5] = "Friday";
  610. weekday[6] = "Saturday";
  611. var n = weekday[today.getDay()];
  612. var mo = today.getMonth();
  613. var moL;
  614. if (mo == 0) {
  615. moL = "January";
  616. } else if (mo == 1) {
  617. moL = "Febuary";
  618. } else if (mo == 2) {
  619. moL = "March";
  620. } else if (mo == 3) {
  621. moL = "April";
  622. } else if (mo == 4) {
  623. moL = "May";
  624. } else if (mo == 5) {
  625. moL = "June";
  626. } else if (mo == 6) {
  627. moL = "July";
  628. } else if (mo == 7) {
  629. moL = "August";
  630. } else if (mo == 8) {
  631. moL = "September";
  632. } else if (mo == 9) {
  633. moL = "October";
  634. } else if (mo == 10) {
  635. moL = "November";
  636. } else {
  637. moL = "December";
  638. }
  639. var h = today.getHours();
  640. var m = today.getMinutes();
  641. var s = today.getSeconds();
  642. var y = today.getFullYear();
  643. var md = today.getDate();
  644. m = checkTime(m);
  645. s = checkTime(s);
  646. document.getElementById('clock').innerHTML =
  647. n + ", " + moL + " " + md + ", " + y + " " + h + ":" + m + ":" + s;
  648. }
  649.  
  650. function checkTime(i) {
  651. if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
  652. return i;
  653. }
  654.  
  655. setInterval(function(){
  656. setTime();
  657. }, 1000);
  658.  
  659. function addNewTab() {
  660. var $content = $('#googolTabs');
  661. var a = $('#NewTab');
  662. //$content.append(a.clone());
  663. $content.append(a.clone());
  664. }
  665. </script>
  666. </div>
  667. </body>
  668. </html>
  669.  
  670.  
  671. style.css:
  672. __________________________________________
  673.  
  674. body {
  675. background-color: #ECECEC;
  676. overflow: hidden;
  677. user-select: none;
  678. font-family: 'VT323', monospace;
  679. /* font-family: 'Press Start 2P', cursive; */
  680. /* font-family: 'Comfortaa', cursive; */
  681. /* font-family: 'Pacifico', cursive; */
  682. }
  683.  
  684. #os {
  685. /*cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;*/
  686. }
  687.  
  688. #logo {
  689. width: 30px;
  690. position: absolute;
  691. margin-left: 20px;
  692. top: 3px;
  693. }
  694.  
  695. #topCon {
  696. margin-left: 60px;
  697. position: absolute;
  698. margin-top: 9px;
  699. }
  700.  
  701. #topLogo {
  702. width: 160px;
  703. height: 36px;
  704. border-right: 3px solid rgba(0,0,0,0.4);
  705. }
  706.  
  707. #topApp {
  708. width: 220px;
  709. height: 36px;
  710. border-right: 3px solid rgba(0,0,0,0.4);
  711. margin-top: -36px;
  712. margin-left: 160px;
  713. }
  714.  
  715. #topClock {
  716. width: 240px;
  717. height: 36px;
  718. border-left: 3px solid rgba(0,0,0,0.4);
  719. margin-top: -36px;
  720. }
  721.  
  722. #versionTitle {
  723. position: absolute;
  724. z-index: 0;
  725. font-size: 70px;
  726. color: #ECECEC;
  727. text-shadow: 2px 2px 20px black;
  728. }
  729.  
  730. #topLogoInfo {
  731. width: 160px;
  732. height: 200px;
  733. background-color: #ECECEC;
  734. position: absolute;
  735. z-index: 200;
  736. margin-left: -7px;
  737. margin-top: 32px;
  738. }
  739.  
  740. #topAppInfo {
  741. width: 220px;
  742. height: 200px;
  743. background-color: #ECECEC;
  744. position: absolute;
  745. z-index: 200;
  746. margin-left: 154px;
  747. margin-top: 32px;
  748. box-shadow: 3.5px 2px 15px rgba(0,0,0,0.4);
  749. }
  750.  
  751.  
  752. #topLogoInfo1 {
  753. position: absolute;
  754. margin-left: -7px;
  755. margin-top: 0px;
  756. opacity: 0.5;
  757. border-bottom: 3px solid rgba(0,0,0,0.4);
  758. width: 160px;
  759. margin-left: 0px;
  760. }
  761.  
  762. #topAppInfo1 {
  763. position: absolute;
  764. margin-left: -7px;
  765. margin-top: 0px;
  766. opacity: 0.5;
  767. border-bottom: 3px solid rgba(0,0,0,0.4);
  768. width: 220px;
  769. margin-left: 0px;
  770. text-align: center;
  771. height: 40px;
  772. }
  773.  
  774. #topAppInfo1:hover {
  775. background-color: rgba(0,0,0,0.3);
  776. }
  777.  
  778. #topLogoInfo2 {
  779. position: absolute;
  780. margin-left: -7px;
  781. margin-top: 0px;
  782. opacity: 0.5;
  783. border-bottom: 3px solid rgba(0,0,0,0.4);
  784. width: 160px;
  785. margin-left: 0px;
  786. margin-top: 86px;
  787. }
  788.  
  789. #topLogoInfo3 {
  790. position: absolute;
  791. margin-left: -7px;
  792. margin-top: 0px;
  793. opacity: 0.5;
  794. border-bottom: 3px solid rgba(0,0,0,0.4);
  795. width: 160px;
  796. margin-left: 0px;
  797. margin-top: 107px;
  798. }
  799.  
  800. #topLogoInfo2:hover {
  801. background-color: rgba(0,0,0,0.3);
  802. }
  803.  
  804. #topLogoInfo3:hover {
  805. background-color: rgba(0,0,0,0.3);
  806. }
  807.  
  808. #topLogo:hover {
  809. background-color: rgba(0,0,0,0.3);
  810. }
  811.  
  812. #topApp:hover {
  813. background-color: rgba(0,0,0,0.3);
  814. }
  815.  
  816. #topLogoInfo4 {
  817. position: absolute;
  818. margin-left: -7px;
  819. margin-top: 0px;
  820. opacity: 0.5;
  821. width: 158px;
  822. margin-left: 0px;
  823. margin-top: 130px;
  824. }
  825.  
  826. #winTlogo {
  827. width: 350px;
  828. margin-top: -57px;
  829. }
  830.  
  831. #elem4fs {
  832. width: 190px;
  833. }
  834.  
  835. .txtEdit {
  836. margin-top: 3px;
  837. opacity: 0.4;
  838. width: 450px;
  839. height: 20px;
  840. z-index: 20;
  841. }
  842.  
  843. .winT4 {
  844. opacity: 0.4;
  845. font-size: 10;
  846. }
  847.  
  848. .winT5 {
  849. opacity: 0.4;
  850. }
  851.  
  852. .winTop {
  853. position: absolute;
  854. top: -18px;
  855. }
  856.  
  857. .closeL5 {
  858. position: absolute;
  859. left: 430px;
  860. top: 3px;
  861. height: 30px;
  862. width: 3px;
  863. transform: rotate(40deg);
  864. background-color: black;
  865. /*border-radius: 1px 1px 1px 1px;*/
  866. }
  867.  
  868. .closeR5 {
  869. position: absolute;
  870. left: 430px;
  871. top: 3px;
  872. height: 30px;
  873. width: 3px;
  874. transform: rotate(-40deg);
  875. background-color: black;
  876. /*border-radius: 1px 1px 1px 1px;*/
  877. }
  878.  
  879. .closeL5:hover {
  880. background-color: red;
  881. }
  882.  
  883. .closeR5:hover {
  884. background-color: red;
  885. }
  886.  
  887. .enlarge5 {
  888. position: absolute;
  889. left: 383px;
  890. top: 5.2px;
  891. height: 20px;
  892. width: 20px;
  893. background-color: #ECECEC;
  894. border: solid 3px rgba(0,0,0,1);
  895. }
  896.  
  897. .enlarge5:hover {
  898. border: solid 3px #58D68D;
  899. }
  900.  
  901. .minus5 {
  902. position: absolute;
  903. left: 343px;
  904. top: 8px;
  905. height: 20px;
  906. width: 28px;
  907. background-color: #ECECEC;
  908. border-bottom: solid 3px rgba(0,0,0,1);
  909. }
  910.  
  911. .minus5:hover {
  912. border-bottom: solid 3px yellow;
  913. }
  914.  
  915. .closeL4 {
  916. position: absolute;
  917. left: 430px;
  918. top: 3px;
  919. height: 30px;
  920. width: 3px;
  921. transform: rotate(40deg);
  922. background-color: black;
  923. /*border-radius: 1px 1px 1px 1px;*/
  924. }
  925.  
  926. .closeR4 {
  927. position: absolute;
  928. left: 430px;
  929. top: 3px;
  930. height: 30px;
  931. width: 3px;
  932. transform: rotate(-40deg);
  933. /*border-radius: 1px 1px 1px 1px;*/
  934. background-color: black;
  935. }
  936.  
  937. .closeL4:hover {
  938. background-color: red;
  939. }
  940.  
  941. .closeR4:hover {
  942. background-color: red;
  943. }
  944.  
  945. .enlarge4 {
  946. position: absolute;
  947. left: 383px;
  948. top: 5.2px;
  949. height: 20px;
  950. width: 20px;
  951. background-color: #ECECEC;
  952. border: solid 3px rgba(0,0,0,1);
  953. }
  954.  
  955. .enlarge4:hover {
  956. border: solid 3px #58D68D;
  957. }
  958.  
  959. .minus4 {
  960. position: absolute;
  961. left: 343px;
  962. top: 8px;
  963. height: 20px;
  964. width: 28px;
  965. background-color: #ECECEC;
  966. border-bottom: solid 3px rgba(0,0,0,1);
  967. }
  968.  
  969. .minus4:hover {
  970. border-bottom: solid 3px yellow;
  971. }
  972.  
  973. .txt {
  974. height: 80px;
  975. width: 50px;
  976. background: #ECECEC;
  977. border-radius: 1px 10px 1px 1px;
  978. border-bottom: solid 10px rgba(0,0,0,0);
  979. border-right: solid 10px rgba(0,0,0,0);
  980. /*box-shadow: 3.5px 2px 5px black;*/
  981. }
  982.  
  983. .file {
  984. height: 60px;
  985. width: 110px;
  986. background: #ECECEC;
  987. border-radius: 1px 10px 1px 1px;
  988. border-bottom: solid 10px rgba(0,0,0,0);
  989. border-right: solid 10px rgba(0,0,0,0);
  990. /*box-shadow: 3.5px 2px 5px black;*/
  991. }
  992.  
  993. .folder1 {
  994. height: 50px;
  995. width: 140px;
  996. background: rgb(97, 106, 107);
  997. border-radius: 0px 0px 0px 0px;
  998. border-bottom: solid 4px rgba(0,0,0,0.1);
  999. box-shadow: 3.5px 2px 5px black;
  1000. }
  1001.  
  1002. .folder2 {
  1003. height: 130px;
  1004. width: 300px;
  1005. background: rgb(97, 106, 107);
  1006. border-radius: 0px 0px 0px 0px;
  1007. border-bottom: solid 4px rgba(0,0,0,0.1);
  1008. box-shadow: 3.5px 2px 5px black;
  1009. }
  1010.  
  1011. #container {
  1012. position:absolute;
  1013. background-color: #58D68D;
  1014. min-height: 100%;
  1015. z-index: -5;
  1016. }
  1017.  
  1018. .elem{
  1019. position: absolute;
  1020. /*background-color: red;*/
  1021. z-index: -999999;
  1022. }
  1023.  
  1024. .elem1{
  1025. position: absolute;
  1026. z-index: -999999;
  1027. text-align: center;
  1028. }
  1029.  
  1030. .elem8{
  1031. position: absolute;
  1032. z-index: -999999;
  1033. text-align: center;
  1034. }
  1035.  
  1036. .elem2{
  1037. position: absolute;
  1038. /*background-color: green;*/
  1039. z-index: -999999;
  1040. }
  1041.  
  1042. .elem3{
  1043. position: absolute;
  1044. background-color: #ECECEC;
  1045. z-index: 20;
  1046. box-shadow: 3.5px 2px 15px black;
  1047. }
  1048.  
  1049. #elem3top {
  1050. background-color: #ECECEC;
  1051. margin-top: 0px;
  1052. margin-left: 0px;
  1053. height: 36px;
  1054. border-bottom: 4px solid black;
  1055. opacity: 0.4;
  1056. }
  1057.  
  1058. .closeL3 {
  1059. position: absolute;
  1060. left: 280px;
  1061. top: 3px;
  1062. height: 30px;
  1063. width: 3px;
  1064. transform: rotate(40deg);
  1065. background-color: black;
  1066. /*border-radius: 1px 1px 1px 1px;*/
  1067. }
  1068.  
  1069. .closeR3 {
  1070. position: absolute;
  1071. left: 280px;
  1072. top: 3px;
  1073. height: 30px;
  1074. width: 3px;
  1075. transform: rotate(-40deg);
  1076. /*border-radius: 1px 1px 1px 1px;*/
  1077. background-color: black;
  1078. }
  1079.  
  1080. .closeL3:hover {
  1081. background-color: red;
  1082. }
  1083.  
  1084. .closeR3:hover {
  1085. background-color: red;
  1086. }
  1087.  
  1088. .elem4{
  1089. position: absolute;
  1090. background-color: #ECECEC;
  1091. z-index: 10;
  1092. box-shadow: 3.5px 2px 15px black;
  1093. }
  1094.  
  1095. #elem5top {
  1096. background-color: #ECECEC;
  1097. margin-top: 0px;
  1098. margin-left: 0px;
  1099. height: 36px;
  1100. border-bottom: 4px solid black;
  1101. opacity: 0.4;
  1102. }
  1103.  
  1104. .elem5{
  1105. position: absolute;
  1106. background-color: #ECECEC;
  1107. z-index: 10;
  1108. box-shadow: 3.5px 2px 15px black;
  1109. }
  1110.  
  1111. #elem4top {
  1112. background-color: #ECECEC;
  1113. margin-top: 0px;
  1114. margin-left: 0px;
  1115. height: 36px;
  1116. border-bottom: 4px solid black;
  1117. opacity: 0.4;
  1118. }
  1119.  
  1120. #elem4con {
  1121. background-color: #ECECEC;
  1122. margin-top: 0px;
  1123. margin-left: 0px;
  1124. height: 510px;
  1125. overflow: scroll;
  1126. }
  1127.  
  1128. #top {
  1129. background-color: #ECECEC;
  1130. position:absolute;
  1131. margin-top: -8px;
  1132. margin-left: -8px;
  1133. height: 36px;
  1134. border-bottom: 4px solid black;
  1135. opacity: 0.5;
  1136. box-shadow: 3.5px 2px 15px black;
  1137. position: absolute;
  1138. z-index: 70;
  1139. }
  1140.  
  1141. .txt_file {
  1142. margin-left: -41px;
  1143. margin-top: -32px;
  1144. margin-bottom: -29px;
  1145. width: 160px;
  1146. }
  1147.  
  1148. .folder_file {
  1149. margin-left: -19px;
  1150. margin-top: -29px;
  1151. margin-bottom: -38px;
  1152. width: 150px;
  1153. }
  1154.  
  1155. .googol {
  1156. margin-left: 0px;
  1157. margin-top: 0px;
  1158. margin-bottom: -10px;
  1159. width: 100px;
  1160. }
  1161.  
  1162. .virusucks {
  1163. margin-left: 0px;
  1164. margin-top: 0px;
  1165. margin-bottom: -10px;
  1166. width: 100px;
  1167. }
  1168.  
  1169. /*#left_panel {
  1170. position: absolute;
  1171. left: 0;
  1172. top: 0;
  1173. bottom: 0;
  1174. right: 100px;
  1175. background: grey;
  1176. }
  1177.  
  1178. #right_panel {
  1179. position: absolute;
  1180. right: 0;
  1181. top: 0;
  1182. bottom: 0;
  1183. width: 200px;
  1184. color:#fff;
  1185. }
  1186. #drag {
  1187. position: absolute;
  1188. left: -4px;
  1189. top: 0;
  1190. bottom: 0;
  1191. width: 8px;
  1192. cursor: w-resize;
  1193. }*/
  1194.  
  1195. .elem6{
  1196. position: absolute;
  1197. background-color: #ECECEC;
  1198. z-index: 10;
  1199. box-shadow: 3.5px 2px 15px black;
  1200. }
  1201.  
  1202. #elem6top {
  1203. background-color: #ECECEC;
  1204. margin-top: 0px;
  1205. margin-left: 0px;
  1206. height: 36px;
  1207. border-bottom: 4px solid black;
  1208. opacity: 0.4;
  1209. }
  1210.  
  1211. #googolTabs {
  1212. background-color: rgba(0,0,0,0.2);
  1213. margin-top: 0px;
  1214. margin-left: 0px;
  1215. height: 32px;
  1216. }
  1217.  
  1218. #NewTab {
  1219. background-color: #58D68D;
  1220. width: 170px;
  1221. height: 28px;
  1222. border: 2px solid #58D68D;
  1223. border-radius: 0 15px 0 0;
  1224. box-shadow: 3.5px 2px 15px black;
  1225. position: absolute;
  1226. top: 40px;
  1227. z-index: 12;
  1228. }
  1229.  
  1230. #NewTab:hover {
  1231. background-color: rgba(0,0,0,0.5);
  1232. }
  1233.  
  1234. #NewTabPlus {
  1235. background-color: #ECECEC;
  1236. width: 30px;
  1237. height: 28px;
  1238. border: 2px solid #ECECEC;
  1239. border-radius: 0 15px 0 0;
  1240. box-shadow: 3.5px 2px 15px black;
  1241. position: absolute;
  1242. top: 40px;
  1243. left: 165px;
  1244. z-index: 11;
  1245. text-align: right;
  1246. }
  1247.  
  1248. #NewTabPlus:hover {
  1249. background-color: rgba(0,0,0,0.5);
  1250. }
  1251.  
  1252. #plusTab {
  1253. font-size: 20px;
  1254. margin-right: 8px;
  1255. margin-top: 60px;
  1256. }
  1257.  
  1258. .closeL6 {
  1259. position: absolute;
  1260. left: 680px;
  1261. top: 3px;
  1262. height: 30px;
  1263. width: 3px;
  1264. transform: rotate(40deg);
  1265. background-color: black;
  1266. /*border-radius: 1px 1px 1px 1px;*/
  1267. }
  1268.  
  1269. .closeR6 {
  1270. position: absolute;
  1271. left: 680px;
  1272. top: 3px;
  1273. height: 30px;
  1274. width: 3px;
  1275. transform: rotate(-40deg);
  1276. /*border-radius: 1px 1px 1px 1px;*/
  1277. background-color: black;
  1278. }
  1279.  
  1280. .closeL6:hover {
  1281. background-color: red;
  1282. }
  1283.  
  1284. .closeR6:hover {
  1285. background-color: red;
  1286. }
  1287.  
  1288. .enlarge6 {
  1289. position: absolute;
  1290. left: 637px;
  1291. top: 5.2px;
  1292. height: 20px;
  1293. width: 20px;
  1294. background-color: #ECECEC;
  1295. border: solid 3px rgba(0,0,0,1);
  1296. }
  1297.  
  1298. .enlarge6:hover {
  1299. border: solid 3px #58D68D;
  1300. }
  1301.  
  1302. .minus6 {
  1303. position: absolute;
  1304. left: 600px;
  1305. top: 8px;
  1306. height: 20px;
  1307. width: 28px;
  1308. background-color: #ECECEC;
  1309. border-bottom: solid 3px rgba(0,0,0,1);
  1310. }
  1311.  
  1312. .minus6:hover {
  1313. border-bottom: solid 3px yellow;
  1314. }
  1315.  
  1316. .elem7{
  1317. position: absolute;
  1318. background-color: #ECECEC;
  1319. z-index: 20;
  1320. box-shadow: 3.5px 2px 15px black;
  1321. }
  1322.  
  1323. #elem7top {
  1324. background-color: #ECECEC;
  1325. margin-top: 0px;
  1326. margin-left: 0px;
  1327. height: 36px;
  1328. border-bottom: 4px solid black;
  1329. opacity: 0.4;
  1330. }
  1331.  
  1332. .closeLapp {
  1333. height: 30px;
  1334. width: 3px;
  1335. transform: rotate(40deg);
  1336. background-color: #ECECEC;
  1337. /*border-radius: 1px 1px 1px 1px;*/
  1338. position: absolute;
  1339. z-index: 320;
  1340. top: 3px;
  1341. }
  1342.  
  1343. .closeRapp {
  1344. height: 30px;
  1345. width: 3px;
  1346. transform: rotate(-40deg);
  1347. background-color: #ECECEC;
  1348. /*border-radius: 1px 1px 1px 1px;*/
  1349. position: absolute;
  1350. z-index: 320;
  1351. top: 3px;
  1352. }
  1353.  
  1354. .closeLapp:hover {
  1355. background-color: red;
  1356. }
  1357.  
  1358. .closeRapp:hover {
  1359. background-color: red;
  1360. }
  1361.  
  1362. #V1 {
  1363. color: #ECECEC;
  1364. margin-top: -10px;
  1365. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!