Adding the code

author: Unknown <Alee14498@gmail.com> 2017-10-01 00:24:20 -0400
committer: Unknown <Alee14498@gmail.com> 2017-10-01 00:24:20 -0400
commit: 78f3c0e9893d36e0ce039c2b79ede8a92ebe468a (patch)
tree: 8479930f9372a1e9998b6750651565cf52b81ca8 /apps/notes
parent: d8ba59582c137de474789690e777d8c029e08fe6 (diff)
download: windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.gz
windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.bz2
windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.zip
7 files changed, 453 insertions, 0 deletions
diff --git a/apps/notes/common.css b/apps/notes/common.css
new file mode 100644
index 0000000..703600b
--- /dev/null
+++ b/apps/notes/common.css
@@ -0,0 +1,169 @@
+body {
+	font-family:Segoe UI;
+	color:#FFFFFF;
+	margin:0px;
+	padding:0px;
+}
+img, a {
+	outline:none;
+	border:none;
+}
+#splashscreen {
+	position:fixed;
+	width:100%;
+	height:100%;
+	color:#FFFFFF;
+	background-image:url('splashscreen.png');
+	background-position:center;
+	background-color:#5B4C39;
+	background-repeat:no-repeat;
+	animation:splash 4s;
+	-ms-animation:splash 4s;
+	-webkit-animation:splash 4s;
+	-o-animation:splash 4s;
+	opacity:0;
+	z-index:-1;
+}
+@keyframes splash {
+	from {
+		z-index:2;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-webkit-keyframes splash {
+	from {
+		z-index:2;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-ms-keyframes splash {
+	from {
+		z-index:2;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-o-keyframes splash {
+	from {
+		z-index:2;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+#hoverarea {
+	position:fixed;
+	top:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#bottomhoverarea {
+	position:fixed;
+	bottom:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#starthoverarea {
+	position:fixed;
+	bottom:0px;
+	left:0px;
+	width:15px;
+	height:15px;
+}
+#charmsbar {
+	display:none;
+	background-color:#111111;
+	position:fixed;
+	padding:5% 0;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 86px;
+
+}
+#settingscharms {
+	padding : 40px;
+	display:none;
+	background-color:#3B66AD;
+	position:fixed;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 345px;
+
+}
+#startbutton {
+	display:none;
+	position:fixed;
+	left:0px;
+	bottom:0px;
+}
+#iconnetwork {
+	position:absolute;
+	top:35px;
+	left:25px;
+}
+#iconbattery {
+	position:absolute;
+	bottom:35px;
+	left:32px;
+}
+#datetime {
+	display:none;
+	position:fixed;
+	left:50px;
+	bottom:50px;
+	width:490px;
+	height:139px;
+	background-color: rgba(17,17,17,1);
+}
+#time {
+	position:absolute;
+	left:70px;
+	bottom:19px;
+	font-family: Segoe UI Light;
+	font-size: 64pt;
+}
+#date {
+	margin-top:20px;
+	margin-right:20px;
+	float:right;
+	font-size:24pt;
+	font-family: Segoe UI;
+	color:#FFFFFF;
+}
+iframe {
+	position:relative;
+	border:none;
+}
+\ No newline at end of file
diff --git a/apps/notes/index.html b/apps/notes/index.html
new file mode 100644
index 0000000..92ff034
--- /dev/null
+++ b/apps/notes/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
+       Remove this if you use the .htaccess -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>Notes</title>
+<!--[if lt IE 9]>
+<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+  <link rel="stylesheet" href="common.css"/>
+  <link rel="stylesheet" rev="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />
+
+  <script>
+function charms(){
+	document.getElementById('charmsbar').style.display='block';
+	document.getElementById('datetime').style.display='block';
+}
+function destroycharms() {
+	document.getElementById('charmsbar').style.display='none';
+	document.getElementById('datetime').style.display='none';
+}
+function start(){
+	document.getElementById('startbutton').style.display='block';
+}
+function destroystart() {
+	document.getElementById('startbutton').style.display='none';
+}
+</script>
+</head>
+<body>
+<div id="splashscreen">
+</div>
+    <button id="btn-addNote"/><img src="plus.png"/> Add note</button>
+<div id="board">
+
+
+</div>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
+  <script type="text/javascript" src="js/scripts.js"></script>
+
+
+</div>  
+<div id="hoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="charmsbar" onmouseover="charms()" onmouseout="destroycharms()">
+<img src="../../common/img/charmsbar/search.png" onmouseover="this.src='../../common/img/charmsbar/search-hover.png'" onmouseout="this.src='../../common/img/charmsbar/search.png'"/><br/>
+<img src="../../common/img/charmsbar/share.png" onmouseover="this.src='../../common/img/charmsbar/share-hover.png'" onmouseout="this.src='../../common/img/charmsbar/share.png'"/><br/>
+<a href="../../start/index.html"><img src="../../common/img/charmsbar/start.png" onmouseover="this.src='../../common/img/charmsbar/start-hover.png'" onmouseout="this.src='../../common/img/charmsbar/start.png'"/></a><br/>
+<img src="../../common/img/charmsbar/devices.png" onmouseover="this.src='../../common/img/charmsbar/devices-hover.png'" onmouseout="this.src='../../common/img/charmsbar/devices.png'"/><br/>
+<img src="../../common/img/charmsbar/settings.png" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'" onclick="settingsc()"/><br/>
+</div>
+<div id="datetime">
+<img src="../../common/img/network.png" id="iconnetwork" height="24px" width="24px"/>
+<img src="../../common/img/battery.png" id="iconbattery"/>
+<span id="time"></span>
+<script language="javascript" type="text/javascript">
+<!-- Begin
+function clock() {
+var digital = new Date();
+var hours = digital.getHours();
+var minutes = digital.getMinutes();
+var seconds = digital.getSeconds();
+var amOrPm = "AM";
+if (hours > 11) amOrPm = "PM";
+if (hours > 12) hours = hours - 12;
+if (hours == 0) hours = 12;
+if (minutes <= 9) minutes = "0" + minutes;
+if (seconds <= 9) seconds = "0" + seconds;
+dispTime = hours + ":" + minutes ;
+document.getElementById('time').innerHTML = dispTime;
+setTimeout("clock()", 1000);
+}
+window.onload=clock;
+//  End -->
+</script>
+<div id="date"><script language="Javascript">
+
+ var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
+
+ var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
+
+ var now = new Date
+
+ document.write("" + dayName[now.getDay()] + "<br/>" +"<span id=month>" + monName[now.getMonth()] + " "+now.getDate() +"")
+ </script>
+</div>
+</div>
+<div id="bottomhoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="starthoverarea" onmouseover="start()" class="hotcorner">
+</div>
+<div id="startbutton" onmouseout="destroystart()">
+<a href="../../start/index.html"><img src="../../common/img/start.png"/></a>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/apps/notes/js/scripts.js b/apps/notes/js/scripts.js
new file mode 100644
index 0000000..28963b2
--- /dev/null
+++ b/apps/notes/js/scripts.js
@@ -0,0 +1,103 @@
+(function ($, $S) {
+    //$ jQuery
+    //$S window.localStorage
+    //Variables Declaration
+    var $board = $('#board'),
+        //Board where the Posticks are sticked
+        Postick, //Singleton Object containing the Functions to work with the LocalStorage
+        len = 0,
+        //Length of Objects in the LocalStorage 
+        currentNotes = '',
+        //Storage the html construction of the posticks
+        o; //Actual Postick data in the localStorage
+   
+   
+   
+    //Manage the Posticks in the Local Storage
+	//Each postick is saved in the localStorage as an Object  
+    Postick = {
+        add: function (obj) {
+            obj.id = $S.length;
+            $S.setItem(obj.id, JSON.stringify(obj));
+        },
+
+        retrive: function (id) {
+            return JSON.parse($S.getItem(id));
+        },
+
+        remove: function (id) {
+            $S.removeItem(id);
+        },
+
+        removeAll: function () {
+            $S.clear();
+        }
+
+    };
+
+    //If exist any postick, Create it/them
+    len = $S.length;
+    if (len) {
+        for (var i = 0; i < len; i++) {
+            //Create all posticks saved in localStorage
+            var key = $S.key(i);
+            o = Postick.retrive(key);
+            currentNotes += '<div class="postick"';
+            currentNotes += ' style="left:' + o.left;
+            currentNotes += 'px; top:' + o.top;
+			//data-key is the attribute to know what item delete in the localStorage
+            currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="' + key;
+            currentNotes += '">x</span></div><div contenteditable="true" class="editable">';
+            currentNotes += o.text;
+            currentNotes += '</div></div>';
+        }
+
+        //Append all the posticks to the board
+        $board.html(currentNotes);
+    }
+
+    //When the document is ready, make all posticks Draggable
+    $(document).ready(function () {
+        $(".postick").draggable({
+            cancel: '.editable',
+			"zIndex": 3000,
+			"stack" : '.postick'
+        });
+    });
+
+    //Remove Postick
+    $('span.delete').live('click', function () {
+        if (confirm('Are you sure you want to delete this Note?')) {
+            var $this = $(this);
+			//data-key is the attribute to know what item delete in the localStorage
+            Postick.remove($this.attr('data-key'));
+            $this.closest('.postick').fadeOut('slow', function () {
+                $(this).remove();
+            });
+        }
+    });
+
+    //Create postick
+    $('#btn-addNote').click(function () {
+        $board.append('<div class="postick" style="left:20px;top:70px"><div class="toolbar"><span class="delete" title="Close">x</span></div><div contenteditable class="editable"></div></div>');
+        $(".postick").draggable({
+            cancel: '.editable'
+        });
+    });
+
+    //Save all the posticks when the user leaves the page
+    window.onbeforeunload = function () {
+        //Clean the localStorage
+        Postick.removeAll();
+        //Then insert each postick into the LocalStorage
+		//Saving their position on the page, in order to position them when the page is loaded again
+        $('.postick').each(function () {
+            var $this = $(this);
+            Postick.add({
+                top: parseInt($this.position().top),
+                left: parseInt($this.position().left),
+                text: $this.children('.editable').text()
+            });
+        });
+    }
+})(jQuery, window.localStorage);
+\ No newline at end of file
diff --git a/apps/notes/plus.png b/apps/notes/plus.png
new file mode 100644
index 0000000..19d9cf6
--- /dev/null
+++ b/apps/notes/plus.png
diff --git a/apps/notes/splashscreen.png b/apps/notes/splashscreen.png
new file mode 100644
index 0000000..0f9e360
--- /dev/null
+++ b/apps/notes/splashscreen.png
diff --git a/apps/notes/styles.css b/apps/notes/styles.css
new file mode 100644
index 0000000..55af607
--- /dev/null
+++ b/apps/notes/styles.css
@@ -0,0 +1,80 @@
+/************ Tags ************/
+body {
+	background-image:url('wood.png');
+	padding:0;
+	margin:0;
+	font-family: Segoe UI;
+}
+button {
+	color:white;
+	background:rgba(64,64,64,0.6);
+	float:left;
+	border: 0px;
+	height: 50px;
+	width: 150px;
+	margin-left: 5px;
+	margin-top: 5px;
+	font-family: Segoe UI Light;
+	font-size:18pt;
+}
+button:hover {
+	background:rgba(64,64,64,0.8);
+
+}
+button:active {
+	background:rgba(64,64,64,1);
+
+}
+button img {
+	vertical-align:middle;
+}
+button p {
+	vertical-align:middle;
+}
+/************ Classes ************/
+
+/* Postick's button "delete" */
+.delete {
+	cursor:pointer;
+	font-size:120%;
+	color:#000000;
+}
+
+
+.postick {
+	border:1px solid gray;
+	width:200px;
+	height:200px;
+	padding:4px;
+	font-size:85%;
+	background:#FFFC7F;
+	-moz-box-shadow:2px 2px 2px #999999;
+	-webkit-box-shadow:2px 2px 2px #999999;
+	box-shadow:2px 2px 2px #999999;
+	position:absolute;
+}
+
+.toolbar {
+	text-align:right;
+	font-weight:bold;
+}
+
+/* Content to be editable inside the postick */
+
+.editable {
+	cursor:pointer;
+	height:180px;
+	marging:0 auto;
+	width:100%;
+	overflow:hidden;
+	position:relative;
+	-moz-text-shadow: 1px 1px 0px white;
+	text-shadow: 1px 1px 0px white;
+	color:#000000;
+}
+
+.editable:hover {
+	border:1px dotted gray;
+}
+
+
diff --git a/apps/notes/wood.png b/apps/notes/wood.png
new file mode 100644
index 0000000..021643f
--- /dev/null
+++ b/apps/notes/wood.png
author	Unknown <Alee14498@gmail.com>	2017-10-01 00:24:20 -0400
committer	Unknown <Alee14498@gmail.com>	2017-10-01 00:24:20 -0400
commit	78f3c0e9893d36e0ce039c2b79ede8a92ebe468a (patch)
tree	8479930f9372a1e9998b6750651565cf52b81ca8 /apps/notes
parent	d8ba59582c137de474789690e777d8c029e08fe6 (diff)
download	windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.gz windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.tar.bz2 windows8online-78f3c0e9893d36e0ce039c2b79ede8a92ebe468a.zip