diff options
Diffstat (limited to 'App API')
20 files changed, 360 insertions, 0 deletions
diff --git a/App API/README.txt b/App API/README.txt new file mode 100644 index 0000000..8a01a68 --- /dev/null +++ b/App API/README.txt @@ -0,0 +1,14 @@ +Online Windows 8 App API by ntim007 +*********************************** +How to ? +******** +- Make your app using the API +- Send a note to ntim007 or/and to link6155 on deviantART + +Things you should do before submitting your app : +************************************************* +- Make sure there's no pornographic/mature content because we won't accept it. +- Fill in another txt file called about.txt +- Please make sure that there is a splash screen and a 250x250 tile + + diff --git a/App API/about.txt b/App API/about.txt new file mode 100644 index 0000000..dba43f6 --- /dev/null +++ b/App API/about.txt @@ -0,0 +1,13 @@ + + APP NAME : + + CREATED BY : + + DESCRIPTION : + + + + + + + HOW CAN WE CONTACT YOU (deviantART username or email): diff --git a/App API/css/appbase.css b/App API/css/appbase.css new file mode 100644 index 0000000..75a53ff --- /dev/null +++ b/App API/css/appbase.css @@ -0,0 +1,229 @@ +/* CSS Reset + Font */ +body { + font-family:Segoe UI; + margin:0px; + padding:0px; +} +img, a { + border:none; + outline:none; +} +/* App bar */ +#appbar { + position:fixed; + bottom:0; + background-color:#111; + width:100%; + height:32px; + display:none; + padding:10px; +} +/* Splashscreen */ +#splashscreen { + position:fixed; + width:100%; + height:100%; + color:#2974AE; + background-image:url('../splashscreen.png') , radial-gradient(#3285C9 0%, #1F5C88 840px); + background-position:center; + background-color:#2974AE; + 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; + } +} +/* Charms */ +/* Hover areas */ +#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; +} +/* Charms bar */ +#charmsbar { + display:none; + background-color:#111111; + position:fixed; + padding:5% 0; + top:0px; + right:0px; + height:100%; + width: 86px; + +} +/* Start button */ +#startbutton { + display:none; + position:fixed; + left:0px; + bottom:0px; + margin:0; + padding:0; +} +/* Date and time on charms */ +#datetime { + display:none; + position:fixed; + left:50px; + bottom:50px; + width:490px; + height:139px; + background-color: rgba(17,17,17,0.96); + color:#FFFFFF; +} +#ctime { + 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; +} +#iconnetwork { + position:absolute; + top:35px; + left:25px; +} +#iconbattery { + position:absolute; + bottom:35px; + left:32px; +} + +/* Text styling on Settings, share charms */ +.charms span { + line-height:40px; +} +.ch1 { + font-family:Segoe UI Semilight; + font-size:28px; + margin-bottom:25px; +} +.ch2 { + font-size:11pt; + margin-bottom:25px; +} +.ch2d { + font-size:11pt; + color:#A8A8A8; + margin-bottom:25px; +} +.sharing { + font-size:14pt; +} +/* Close button on settings, share charms */ +.closecharms { + float:right; + height:32px !important; + width:32px !important; + box-shadow:none !important; + background-image: url(../img/charmsbar/close.png); +} +/*.closecharms:hover { + background-image: url(../img/charmsbar/close-hover.png); +}*/ +.closecharms:active { + background-image: url(../img/charmsbar/close-active.png); +} +/* Charms */ +.charms { + z-index:2; + background-color:#001E4E; + padding : 40px; + position:fixed; + top:0px; + right:0px; + height:100%; + width: 345px; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display:none; + color:#FFF; +} +/* Settings charms */ +#settingscharms { + +}
\ No newline at end of file diff --git a/App API/img/charmsbar/battery.png b/App API/img/charmsbar/battery.png Binary files differnew file mode 100644 index 0000000..07b1b4d --- /dev/null +++ b/App API/img/charmsbar/battery.png diff --git a/App API/img/charmsbar/close-active.png b/App API/img/charmsbar/close-active.png Binary files differnew file mode 100644 index 0000000..eafc8fb --- /dev/null +++ b/App API/img/charmsbar/close-active.png diff --git a/App API/img/charmsbar/close.png b/App API/img/charmsbar/close.png Binary files differnew file mode 100644 index 0000000..7173f58 --- /dev/null +++ b/App API/img/charmsbar/close.png diff --git a/App API/img/charmsbar/devices-hover.png b/App API/img/charmsbar/devices-hover.png Binary files differnew file mode 100644 index 0000000..ad3fa8e --- /dev/null +++ b/App API/img/charmsbar/devices-hover.png diff --git a/App API/img/charmsbar/devices.png b/App API/img/charmsbar/devices.png Binary files differnew file mode 100644 index 0000000..1a81a90 --- /dev/null +++ b/App API/img/charmsbar/devices.png diff --git a/App API/img/charmsbar/network.png b/App API/img/charmsbar/network.png Binary files differnew file mode 100644 index 0000000..5dc5ef7 --- /dev/null +++ b/App API/img/charmsbar/network.png diff --git a/App API/img/charmsbar/search-hover.png b/App API/img/charmsbar/search-hover.png Binary files differnew file mode 100644 index 0000000..16a48f9 --- /dev/null +++ b/App API/img/charmsbar/search-hover.png diff --git a/App API/img/charmsbar/search.png b/App API/img/charmsbar/search.png Binary files differnew file mode 100644 index 0000000..d5cea8e --- /dev/null +++ b/App API/img/charmsbar/search.png diff --git a/App API/img/charmsbar/settings-hover.png b/App API/img/charmsbar/settings-hover.png Binary files differnew file mode 100644 index 0000000..c8f9820 --- /dev/null +++ b/App API/img/charmsbar/settings-hover.png diff --git a/App API/img/charmsbar/settings.png b/App API/img/charmsbar/settings.png Binary files differnew file mode 100644 index 0000000..b63fbc3 --- /dev/null +++ b/App API/img/charmsbar/settings.png diff --git a/App API/img/charmsbar/share-hover.png b/App API/img/charmsbar/share-hover.png Binary files differnew file mode 100644 index 0000000..bd3a423 --- /dev/null +++ b/App API/img/charmsbar/share-hover.png diff --git a/App API/img/charmsbar/share.png b/App API/img/charmsbar/share.png Binary files differnew file mode 100644 index 0000000..b743bf0 --- /dev/null +++ b/App API/img/charmsbar/share.png diff --git a/App API/img/charmsbar/start-hover.png b/App API/img/charmsbar/start-hover.png Binary files differnew file mode 100644 index 0000000..6cc3144 --- /dev/null +++ b/App API/img/charmsbar/start-hover.png diff --git a/App API/img/charmsbar/start.png b/App API/img/charmsbar/start.png Binary files differnew file mode 100644 index 0000000..6cf722c --- /dev/null +++ b/App API/img/charmsbar/start.png diff --git a/App API/img/charmsbar/startbutton.png b/App API/img/charmsbar/startbutton.png Binary files differnew file mode 100644 index 0000000..db9726d --- /dev/null +++ b/App API/img/charmsbar/startbutton.png diff --git a/App API/index.html b/App API/index.html new file mode 100644 index 0000000..84a1ef2 --- /dev/null +++ b/App API/index.html @@ -0,0 +1,104 @@ +<!--DO NOT REMOVE THE CODE GIVEN HERE, THAT CODE POWERS THE CHARMS AND START MENU !!! --> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <!--Title of the app --> + <title></title> + + <!--Stylesheet that styles the charms bar and the startbutton --> + <link rel="stylesheet" href="css/appbase.css"/> + + <!--Script that powers the charms bar--> + <script> + function visibility(visibility , target) { + document.getElementById(target).style.display=visibility; + } + </script> + <script> + function doublevisibility(visibility , target , target2) { + document.getElementById(target).style.display=visibility; + document.getElementById(target2).style.display=visibility; + } + </script> + </head> + <body oncontextmenu="visibility('block','appbar')" onclick="visibility('none','appbar')"> + <div id="splashscreen"></div> + <!--PLACE YOUR CONTENT HERE --> +<p>Things to do : +<br/>- Customize the settings charms +<br/>- Customize the share charms +<br/>- Customize splashscreen +<br/>- Customize appbar +<br/>- Add some content to the app +<br/>- Read README.txt +<br/>- Fill in the about.txt +<br/>- Make a tile for your app (250x250) +</p> + <!-- App bar --> + <div id="appbar"></div> + <!-- Settings charms --> + <div id="settingscharms" class="charms"> <a href="#" onclick="settingscharms.style.display='none';" class="closecharms"/></a> + <span class="ch1">Settings</span><br/> + </div> + <!-- Share charms --> + <div id="sharecharms" class="charms"> <a href="#" onclick="sharecharms.style.display='none';" class="closecharms"/></a> + <span class="ch1">Share</span><br/> + <span class="sharing">You are sharing : Online Windows 8</span><br/> + <span>Send</span><br/> + <span>Recommend</span><br/> + <div class="g-plusone" data-href="http://onlinewindows8.koding.com"></div> + <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://onlinewindows8.koding.com" data-text="Online Windows 8" data-via="ntim007">Tweet</a> + <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> + </div> + <!-- CHARMS BAR CODE --> + <div id="charmsbar" onmouseover="doublevisibility('inline','charmsbar','datetime')" onmouseout="doublevisibility('none','charmsbar','datetime')" > + <img src="img/charmsbar/search.png" onclick="visibility('block','searchcharms')" onmouseover="this.src='img/charmsbar/search-hover.png'" onmouseout="this.src='img/charmsbar/search.png'"/><br/> + <img src="img/charmsbar/share.png" onclick="visibility('block','sharecharms')" onmouseover="this.src='img/charmsbar/share-hover.png'" onmouseout="this.src='img/charmsbar/share.png'"/><br/> + <a href="../start/index.html"><img src="img/charmsbar/start.png" onmouseover="this.src='img/charmsbar/start-hover.png'" onmouseout="this.src='img/charmsbar/start.png'"/></a><br/> + <img src="img/charmsbar/devices.png" onmouseover="this.src='img/charmsbar/devices-hover.png'" onmouseout="this.src='img/charmsbar/devices.png'"/><br/> + <img src="img/charmsbar/settings.png" onclick="visibility('block','settingscharms')" onmouseover="this.src='img/charmsbar/settings-hover.png'" onmouseout="this.src='img/charmsbar/settings.png'"/><br/> + </div> + <div id="datetime"> + <img src="img/charmsbar/network.png" id="iconnetwork" height="24px" width="24px"/> + <img src="img/charmsbar/battery.png" id="iconbattery"/> + <span id="ctime"></span> + <script> + 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('ctime').innerHTML = dispTime; + setTimeout("clock()", 1000); + } + window.onload=clock; + </script> + <div id="date"> + <script> + + 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="startbutton" onmouseout="visibility('none','startbutton')"> + <a href="../start/index.html"><img src="img/charmsbar/startbutton.png"/></a> + </div> + <div id="hoverarea" onmouseover="doublevisibility('inline','charmsbar','datetime')" class="hotcorner"></div> + <div id="bottomhoverarea" onmouseover="doublevisibility('inline','charmsbar','datetime')" class="hotcorner"></div> + <div id="starthoverarea" onmouseover="visibility('inline','startbutton')" class="hotcorner"></div> + </body> +</html> diff --git a/App API/splashscreen.png b/App API/splashscreen.png Binary files differnew file mode 100644 index 0000000..1285e80 --- /dev/null +++ b/App API/splashscreen.png |
