Notes

From 78f3c0e9893d36e0ce039c2b79ede8a92ebe468a Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 1 Oct 2017 00:24:20 -0400 Subject: Adding the code --- apps/notes/common.css | 169 ++++++++++++++++++++++++++++++++++++++++++++ apps/notes/index.html | 101 ++++++++++++++++++++++++++ apps/notes/js/scripts.js | 103 +++++++++++++++++++++++++++ apps/notes/plus.png | Bin 0 -> 3597 bytes apps/notes/splashscreen.png | Bin 0 -> 29800 bytes apps/notes/styles.css | 80 +++++++++++++++++++++ apps/notes/wood.png | Bin 0 -> 1591879 bytes 7 files changed, 453 insertions(+) create mode 100644 apps/notes/common.css create mode 100644 apps/notes/index.html create mode 100644 apps/notes/js/scripts.js create mode 100644 apps/notes/plus.png create mode 100644 apps/notes/splashscreen.png create mode 100644 apps/notes/styles.css create mode 100644 apps/notes/wood.png (limited to 'apps/notes') 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 @@ + + + + + + + + Notes + + + + + + + + +

+ +

+ + +

+ + + + + + +

+ + +

+ + \ 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 += '

'); + $(".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 Binary files /dev/null and b/apps/notes/plus.png differ diff --git a/apps/notes/splashscreen.png b/apps/notes/splashscreen.png new file mode 100644 index 0000000..0f9e360 Binary files /dev/null and b/apps/notes/splashscreen.png differ 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 Binary files /dev/null and b/apps/notes/wood.png differ -- cgit v1.2.3