Adding the code

12 files changed, 510 insertions, 0 deletions

diff --git a/apps/firefox/css/charms.css b/apps/firefox/css/charms.css
new file mode 100644
index 0000000..a0b00bd
--- /dev/null
+++ b/apps/firefox/css/charms.css
@@ -0,0 +1,218 @@
+/* CSS Reset + Font */
+body {
+	font-family:Segoe UI;
+	margin:0px;
+	padding:0px;
+}
+img, a {
+	outline:none;
+	border:none;
+}
+/* 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 {
+	z-index:2;
+	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 */
+
+.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 */
+.closesettings {
+	float:right;
+	height:32px !important;
+	width:32px !important;
+	box-shadow:none !important;
+	background-image: url(images/charmsbar/settings/close.png);
+}
+/*.closesettings:hover {
+	background-image: url(images/charmsbar/settings/close-hover.png);
+}*/
+.closesettings:active {
+	background-image: url(images/charmsbar/settings/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/apps/firefox/css/style.css b/apps/firefox/css/style.css
new file mode 100644
index 0000000..1761aaa
--- /dev/null
+++ b/apps/firefox/css/style.css
@@ -0,0 +1,176 @@
+body {
+	margin:0;
+	padding:0;
+	background-color:#F8F8F8;
+}
+iframe {
+	position:absolute;
+	background-color:#FFF;
+	background-image: url('../img/firefox-watermark.png');
+	background-position: center;
+	background-repeat: no-repeat;
+}
+#navbar {
+	padding-top:10px;
+	padding-left:28px;
+	min-height:57px;
+	max-height:57px;
+}
+#back {
+	border-radius:100px;
+	display:inline-block;
+	background-image: url("../img/back.png");
+	width:48px;
+	height:48px;
+	cursor:pointer;
+}
+#forward {
+	display:inline-block;
+	width: 22px;
+	height: 25px;
+	background-image: url("../img/forward.png");
+	background-position:18px center;
+	background-repeat:no-repeat;
+	vertical-align: top;
+	margin-top: 5px;
+	margin-left:-14px;
+	border:2px solid #C0C6CC;
+	border-left:none;
+	padding: 5px 0px 5px 28px;
+	cursor:pointer;
+	z-index: -1;
+}
+#addressbar {
+	outline:none;
+	height:25px;
+	width:78%;
+	vertical-align: top;
+	margin-top: 5px;
+	margin-left:-4px;
+	padding:5px;
+	padding-left: 42px;
+	border:2px solid #C0C6CC;
+	border-left:none;
+	font-size:13pt;
+	font-family:Segoe UI;
+	background-image: url("../img/identity-icon.png");
+	background-position:10px center;
+	background-repeat:no-repeat;
+}
+#reload {
+	display:inline-block;
+	width: 23px;
+	height: 25px;
+	background-image: url("../img/reload.png");
+	background-position:0px center;
+	background-repeat:no-repeat;
+	vertical-align: top;
+	margin-top: 7px;
+	margin-left: 16px;
+	padding:5px;
+	cursor:pointer;
+}
+#go {
+	display:inline-block;
+	width: 23px;
+	height: 25px;
+	background-image: url("../img/forward.png");
+	background-position:center;
+	background-repeat:no-repeat;
+	vertical-align: top;
+	margin-top: 7px;
+	margin-left: 16px;
+	padding:5px;
+	cursor:pointer;
+}
+#newtab {
+	display:inline-block;
+	width:128px;
+	height:68px;
+	position: absolute;
+	top:-8px;
+	right:0;
+	background-image: url("../img/newtab.png"), url("../img/rightbg.png");
+	background-size:auto;
+	background-position:100px center, 40px center;
+	background-repeat:no-repeat;
+	padding:5px;
+	cursor:pointer;
+}
+#appbar {
+	position:fixed;
+	bottom:0;
+	height:66px;
+	width:100%;
+	background-color:#FF8000;
+	display:none;
+}
+#downloadbutton, #addonbutton, #bookmarkbutton, #settingsbutton, #pinbutton, #zoomin, #zoomout {
+	display:inline-block;
+	width:40px;
+	height:40px;
+	margin:13px;
+	background-image:url(../img/appbar-icons.png);
+	border:none;
+	outline:none;
+}
+#downloadbutton:hover {
+	background-position:0px -40px;
+}
+#downloadbutton:active {
+	background-position:0px -80px;
+}
+#addonbutton {
+	background-position:-40px 0px;
+}
+#addonbutton:hover {
+	background-position:-40px -40px;
+}
+#addonbutton:active {
+	background-position:-40px -80px;
+}
+#settingsbutton {
+	background-position:-160px 0px;
+}
+#settingsbutton:hover {
+	background-position:-160px -40px;
+}
+#settingsbutton:active {
+	background-position:-160px -80px;
+}
+#zoomin{
+	background-position:-80px 0px;
+}
+#zoomin:hover {
+	background-position:-80px -40px;
+}
+#zoomin:active {
+	background-position:-80px -80px;
+}
+#zoomout {
+	background-position:-120px 0px;
+}
+#zoomout:hover {
+	background-position:-120px -40px;
+}
+#zoomout:active {
+	background-position:-120px -80px;
+}
+#bookmarkbutton {
+	background-position:-320px 0px;
+}
+#bookmarkbutton:hover {
+	background-position:-320px -40px;
+}
+#bookmarkbutton:active {
+	background-position:-320px -80px;
+}
+#pinbutton {
+	background-position:-200px 0px;
+}
+#pinbutton:hover {
+	background-position:-200px -40px;
+}
+#pinbutton:active {
+	background-position:-200px -80px;
+}
\ No newline at end of file
diff --git a/apps/firefox/img/appbar-icons.png b/apps/firefox/img/appbar-icons.png
new file mode 100644
index 0000000..d33e18e
--- /dev/null
+++ b/apps/firefox/img/appbar-icons.png
diff --git a/apps/firefox/img/back.png b/apps/firefox/img/back.png
new file mode 100644
index 0000000..12b1906
--- /dev/null
+++ b/apps/firefox/img/back.png
diff --git a/apps/firefox/img/firefox-watermark.png b/apps/firefox/img/firefox-watermark.png
new file mode 100644
index 0000000..7e86268
--- /dev/null
+++ b/apps/firefox/img/firefox-watermark.png
diff --git a/apps/firefox/img/forward.png b/apps/firefox/img/forward.png
new file mode 100644
index 0000000..f811984
--- /dev/null
+++ b/apps/firefox/img/forward.png
diff --git a/apps/firefox/img/identity-icon.png b/apps/firefox/img/identity-icon.png
new file mode 100644
index 0000000..1ec7027
--- /dev/null
+++ b/apps/firefox/img/identity-icon.png
diff --git a/apps/firefox/img/newtab.png b/apps/firefox/img/newtab.png
new file mode 100644
index 0000000..3154764
--- /dev/null
+++ b/apps/firefox/img/newtab.png
diff --git a/apps/firefox/img/reload.png b/apps/firefox/img/reload.png
new file mode 100644
index 0000000..f3b89df
--- /dev/null
+++ b/apps/firefox/img/reload.png
diff --git a/apps/firefox/img/rightbg.png b/apps/firefox/img/rightbg.png
new file mode 100644
index 0000000..78ce96a
--- /dev/null
+++ b/apps/firefox/img/rightbg.png
diff --git a/apps/firefox/index.html b/apps/firefox/index.html
new file mode 100644
index 0000000..4edad75
--- /dev/null
+++ b/apps/firefox/index.html
@@ -0,0 +1,116 @@
+<!--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">
+    <!--Title of the app -->
+    <title>Firefox</title>
+
+    <!--Stylesheet that styles the charms bar and the startbutton -->
+    <link rel="stylesheet" href="css/charms.css"/>
+    <link rel="stylesheet" href="css/style.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>
+    <!--END Charm bar script-->
+    <script>
+    function hidereload() {
+        document.getElementById('reload').style.display='none';
+        document.getElementById('go').style.display='inline-block';
+    }
+    function showreload() {
+        document.getElementById('reload').style.display='inline-block';
+        document.getElementById('go').style.display='none';
+    }
+    </script>
+    <script>
+    var appbar = 'document.getElementById('appbar')';
+    </script>
+  </head>
+  <body oncontextmenu="appbar.style.display='inline-block';return false;" onclick="appbar.style.display='none';">
+    <div id="splashscreen"></div>
+    <!--PLACE YOUR CONTENT HERE -->
+    <div id="navbar">
+        <a id="back" onclick="content.history.back()"></a>
+        <a id="forward" onclick="content.history.forward()"></a>
+        <input id="addressbar" value="http://" class="frmUrlVal" id="URL1" onkeypress="return enableEnterKey(event)" type="text" onfocus="hidereload();" onblur="showreload();" >
+        <a id="go" onclick="document.getElementById('content').src='document.getElementById('addressbar').value;'" style="display:none;"></a>
+        <a id="reload" onclick="window.location.reload()"></a>
+        <a id="newtab"></a>
+    </div>
+    <iframe src="http://bing.com" id="content" name="content" frameborder="0" width="100%" height="90%" >Your browser doesn't support iframes.</iframe>
+    <div id="appbar">
+        <div style="float:left;">
+            <a id="downloadbutton"></a>
+            <a id="addonbutton"></a>
+        </div>
+        <div style="float:right">
+            <a id="settingsbutton"></a>
+            <a id="zoomin"></a>
+            <a id="zoomout"></a>
+            <a id="bookmarkbutton"></a>
+            <a id="pinbutton"></a>
+        </div>
+        </div>
+    </div>
+    <!-- CHARMS BAR CODE -->
+    <div id="charmsbar" onmouseover="doublevisibility('inline','charmsbar','datetime')" onmouseout="doublevisibility('none','charmsbar','datetime')" >
+    <img src="../../common/img/charmsbar/search.png" onclick="visibility('block','searchcharms')" 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" onclick="visibility('block','sharecharms')" 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" onclick="visibility('block','settingscharms')" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'"/><br/>
+    </div>
+    <div id="datetime">
+    <img src="../../common/img/charmsbar/network.png" id="iconnetwork" height="24px" width="24px"/>
+    <img src="../../common/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="../../common/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/apps/firefox/splashscreen.png b/apps/firefox/splashscreen.png
new file mode 100644
index 0000000..00ecb3b
--- /dev/null
+++ b/apps/firefox/splashscreen.png