mpizza · XxBerZerk · Jul 22, 2014 · Jul 22, 2014 · Jul 23, 2014 · Jul 23, 2014
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory" : "vendor"
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-js/vars.js
+node_modules
diff --git a/.gitmodules b/.gitmodules
diff --git a/bower.json b/bower.json
@@ -0,0 +1,20 @@
+{
+  "name": "webapplate",
+  "description": "",
+  "homepage": "",
+  "keywords": [],
+  "author": "",
+  "license": "",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ],
+  "dependencies": {
+    "l20n": "1.0.0-rc",
+    "jquery": "2.1.1",
+    "wordfreq": "https://github.com/timdream/wordfreq.git",
+    "wordcloud2": "https://github.com/timdream/wordcloud2.js.git",
+    "color-thief": ""
+  }
+}
diff --git a/css/xd.css b/css/xd.css
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/images/banner.jpg b/images/banner.jpg
diff --git a/images/comment_arrow.png b/images/comment_arrow.png
diff --git a/images/comment_bg.png b/images/comment_bg.png
diff --git a/images/cover.png b/images/cover.png
diff --git a/images/firefox_logo-only_RGB.png b/images/firefox_logo-only_RGB.png
diff --git a/images/icon_account.png b/images/icon_account.png
diff --git a/images/icon_camera.png b/images/icon_camera.png
diff --git a/images/icon_camera_b.png b/images/icon_camera_b.png
diff --git a/images/icon_camera_s.png b/images/icon_camera_s.png
diff --git a/images/icon_change.png b/images/icon_change.png
diff --git a/images/icon_cloud.png b/images/icon_cloud.png
diff --git a/images/icon_fbLogin.png b/images/icon_fbLogin.png
diff --git a/images/icon_scroll.png b/images/icon_scroll.png
diff --git a/images/icon_spread.png b/images/icon_spread.png
diff --git a/images/icon_text.png b/images/icon_text.png
diff --git a/images/icon_text_b.png b/images/icon_text_b.png
diff --git a/images/icon_text_s.png b/images/icon_text_s.png
diff --git a/images/icon_uparrow.png b/images/icon_uparrow.png
diff --git a/images/pic01.jpg b/images/pic01.jpg
diff --git a/images/pic02.jpg b/images/pic02.jpg
diff --git a/images/pic03.jpg b/images/pic03.jpg
diff --git a/images/pic04.jpg b/images/pic04.jpg
diff --git a/images/sample.jpg b/images/sample.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE HTML>
+<!--
+	Twenty 1.0 by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>^____^</title>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+    <meta property="og:title" content="XD 分析儀" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="http://xddddd.github.io/xd/" />
+    <meta property="og:image" content="http://xddddd.github.io/xd/images/cover.png" />
+		<!--[if lte IE 8]><script src="style/ie/html5shiv.js"></script><![endif]-->
+		<script src="vendor/d3/d3.min.js"></script>
+		<script src="vendor/jquery/dist/jquery.min.js"></script>
+    <script src="vendor/wordfreq/src/wordfreq.js"></script>
+    <script src="vendor/wordcloud2/src/wordcloud2.js"></script>
+    <script src="vendor/color-thief/dist/color-thief.min.js"></script>
+    <script src="js/jquery.dropotron.min.js"></script>
+		<script src="js/skel.min.js"></script>
+		<script src="js/skel-layers.min.js"></script>
+		<script src="js/init.js"></script>
+		<script src="js/xd_calc.js"></script>
+		<script src="js/friendlist.js"></script>
+    <script src="js/vars.js"></script>
+    <script src="js/iii.js"></script>
+    <script src="js/fb.js"></script>
+    <noscript>
+			<link rel="stylesheet" href="style/skel.css" />
+			<link rel="stylesheet" href="style/style.css" />
+			<link rel="stylesheet" href="style/style-wide.css" />
+			<link rel="stylesheet" href="style/style-noscript.css" />
+		</noscript>
+		<!--[if lte IE 8]><link rel="stylesheet" href="style/ie/v8.css" /><![endif]-->
+		<!--[if lte IE 9]><link rel="stylesheet" href="style/ie/v9.css" /><![endif]-->
+    <link href="style/hackathon.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="style/friend-list.css" />
+    <link rel="stylesheet" type="text/css" href="style/xd.css" />
+  </head>
+	<body class="index loading">
+
+		<!-- Header -->
+			<header id="header" class="alt">
+				<h1 id="logo"><a href="index.html">^_____^</span></a></h1>
+				<nav id="nav">
+					Only tested on <img height="20px" src="images/firefox_logo-only_RGB.png" /> <strong>Firefox Browser</strong>.
+				</nav>
+			</header>
+
+		<!-- Banner -->
+			<section id="banner">
+
+				<!--
+					".inner" is set up as an inline-block so it automatically expands
+					in both directions to fit whatever's inside it. This means it won't
+					automatically wrap lines, so be sure to use line breaks where
+					appropriate (<br />).
+				-->
+				<div class="inner">
+					<section class="cube-container">
+						<div id="cube-outer">
+							<div id="cube">
+							  <figure class="front"></figure>
+							  <figure class="back"></figure>
+							  <figure class="right"></figure>
+							  <figure class="left"></figure>
+							  <figure class="top"></figure>
+							  <figure class="bottom"></figure>
+							</div>
+						</div>
+					</section>
+					<footer>
+
+						<ul class="buttons vertical">
+							<li><a id="tell-me-more" href="#friendlist-container" class="button fit scrolly">Tell Me More</a></li>
+							<li>
+								<a class="btn_fblogin" id="fblogin" title="button hideItem Fackbook Login">
+									<div></div>
+									<p>Login with Facebook</p>
+								</a>
+							</li>
+						</ul>
+						<a id="change-face" class="btn_faceChange" title="Change Face">
+							<div></div>
+							<p>Change Face</p>
+						</a>
+					</footer>
+
+				</div>
+
+			</section>
+
+		<!-- Main -->
+			<article id="main">
+
+				<header class="special container">
+					<!-- <span class="icon fa-bar-chart-o"></span> -->
+					<h2>Friend List</h2>
+				</header>
+				<!-- Friend List -->
+					<section class="wrapper style2 container special-alt">
+
+						<div class="row half">
+							<input id="friendSearch" type="text" value=""/>
+							<!-- <button class="button fit scrolly" type="button" id="searchFriendBT">Search</button> -->
+							<div id="friendlist-container">
+								<a id="back-to-banner" class="scrolly btn_back btn_uparrow" href="#banner" title="Back to account"></a>
+								<div id="friendlist">
+		    				</div>
+	    				</div>
+						</div>
+					</section>
+
+					<section id="wordcloud-break">
+					</section>
+
+				<!-- World Cloud -->
+					<section id="wordcloud" class="wrapper style2 container special-alt">
+
+						<div id="wordcloud-container" class="row half">
+							<a id="back-to-friend-list" class="scrolly btn_back btn_uparrow" href="#friendlist-container" title="Back to friend list"></a>
+							<button type="button" id="getBT" class="button hideItem"> go wordscloud </button>
+							<div id="feeds" class="hideItem"></div>
+    					<canvas height="700" width="1024" style="" id="wc-canvas-canvas" lang=""></canvas>
+    					<div id="wc-canvas-hover" hidden>
+    					  <span id="wc-canvas-hover-label"></span>
+    					</div>
+						</div>
+					</section>
+
+				<!-- Search Result -->
+        <section id="friendWrapper" class="wrapper style3 container special">
+
+          <header class="friendInfoBoxHeader">
+            <div id="friendInfoBox" class="avatar">
+              <div id="friendAvatar" class="avatar-image"></div>
+              <p id="friendName" class="avatar-name"></p>
+            </div>
+            <p class="fb_wording">
+            	<span id="fb_keyword"></span>
+            	<span>X <span id="fb_count"></span> msg</span>
+            </p>
+            <div id="related-ptt" class="related-ptt"></div>
+            <h2></h2>
+            <p></p>
+          </header>
+        </section>
+				<section class="wrapper style2 container special-alt">
+					<div class="row half">
+            <a id="back-to-wordcloud" class="scrolly btn_back btn_uparrow" href="#wordcloud" title="Back to wordcloud"></a>
+						<input id="xdSearch" type="text" style="display:none"/><br/>
+				    <button type="button" id="searchBT" class="button" style="display:none"> search </button>
+				    <div id="result">
+              <ul id="comment_wrap">
+              </ul>
+            </div>
+					</div>
+          <a id="back-to-friendWrapper" style="display:none;" class="scrolly btn_back btn_uparrow" href="#friendWrapper" title="Back to friend Wrapper"></a>
+        </section>
+
+			</article>
+
+		<!-- Footer -->
+			<footer id="footer">
+
+				<ul class="icons">
+					<!-- <li><a href="#" class="icon circle fa-twitter"><span class="label">Twitter</span></a></li>
+					<li><a href="#" class="icon circle fa-facebook"><span class="label">Facebook</span></a></li>
+					<li><a href="#" class="icon circle fa-google-plus"><span class="label">Google+</span></a></li>
+					-->
+          <li>
+            <a href="http://youtu.be/x9XohKDmtAA" class="icon circle fa-youtube" target="_blank">
+            <span class="label">Youtube</span></a>
+          </li>
+					<li>
+            <a href="https://github.com/XDDDDD/xd" class="icon circle fa-github" target="_blank">
+            <span class="label">Github</span></a>
+          </li>
+					<!-- <li><a href="#" class="icon circle fa-dribbble"><span class="label">Dribbble</span></a></li> -->
+				</ul>
+
+				<span class="copyright">&copy; Untitled. All rights reserved. Design: <a href="http://html5up.net">HTML5 UP</a>.</span>
+
+			</footer>
+
+	</body>
+</html>
diff --git a/js/app_installer.js b/js/app_installer.js
@@ -0,0 +1,41 @@
+(function() {
+  'use strict';
+  /**
+   * check if Firefox webapp is installed
+   *
+   * @class Installer
+   */
+  if (navigator.mozApps !== undefined) {
+    var appStat = navigator.mozApps.getSelf();
+    appStat.onsuccess = function() {
+      if (appStat.result) {
+        //instsalled
+        var installed = navigator.mozApps.getInstalled();
+        installed.onsuccess = function() {
+          if (installed.result.manifest.version !==
+              appStat.result.manifest.version) {
+            console.log('install update version');
+            navigator.mozApps.install();
+          }
+        };
+      } else {
+        // not installed
+        var manifestUrl = location.href.substring(0,
+          location.href.lastIndexOf('/')) + '/manifest.webapp';
+
+        var appInstall = navigator.mozApps.install(manifestUrl);
+        appInstall.onsuccess = function() {
+          console.log('successful installed');
+        };
+        appInstall.onerror = function() {
+          console.log('not installed');
+        };
+      }
+    };
+    appStat.onerror = function() {
+      alert('Error checking installation status: ' + this.error.message);
+    };
+  } else {
+    console.log('WebApp is not supported');
+  }
+}());
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,14 @@
+/**
+ * Only used in Chrome Apps
+ *
+ * @class Background
+ */
+chrome.app.runtime.onLaunched.addListener(function() {
+  'use strict';
+  chrome.app.window.create('../index.html', {
+    'bounds': {
+      'width': 320,
+      'height': 480
+    }
+  });
+});
diff --git a/js/fallback.js b/js/fallback.js
@@ -0,0 +1,11 @@
+(function() {
+  'use strict';
+
+  // Reload content
+  var reload = document.querySelector('#reload');
+  if (reload) {
+    reload.onclick = function() {
+      location.reload(true);
+    };
+  }
+}());