[SampleApp] - Sample application for cordova-file
authorAndrzej Popowski <a.popowski@samsung.com>
Tue, 8 Dec 2015 10:35:10 +0000 (11:35 +0100)
committerAndrzej Popowski <a.popowski@samsung.com>
Tue, 8 Dec 2015 11:38:01 +0000 (12:38 +0100)
Change-Id: I8a535c5c0ee7210a39b834275f21ff6b1eccfbbc
Signed-off-by: Andrzej Popowski <a.popowski@samsung.com>
sample/index.html
sample/plugins/file/index.html [new file with mode: 0644]
sample/plugins/file/scripts/index.js [new file with mode: 0644]
sample/plugins/file/styles/main.css [new file with mode: 0644]

index ca4e730c4421eea146c50073e1b402e486ca9665..c108f3a8df380584d29016461f538b536cb198cd 100644 (file)
@@ -41,7 +41,7 @@
                 <a href="#" class="button dh"><p>Device Motion</p></a>
                 <a href="plugins/dialogs/index.html" class="button dh"><p>Dialogs</p></a>
                 <a href="plugins/events/index.html" class="button dh"><p>Events</p></a>
-                <a href="#" class="button dh"><p>File</p></a>
+                <a href="plugins/file/index.html" class="button dh"><p>File</p></a>
                 <a href="#" class="button dh"><p>FileTransfer</p></a>
                 <a href="#" class="button dh"><p>Globalization</p></a>
                 <a href="plugins/media/media.html" class="button dh"><p>Media</p></a>
diff --git a/sample/plugins/file/index.html b/sample/plugins/file/index.html
new file mode 100644 (file)
index 0000000..02e8097
--- /dev/null
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<!--
+/*
+ * Copyright (c) 2014-2015 Telerik AD
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+-->
+<html>
+  <head>
+    <title>File Sample</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta charset="utf-8">
+    <link href="styles/main.css" rel="stylesheet" type="text/css" />
+    <script type="text/javascript" src="../../lib/cordova.js"></script>
+    <script type="text/javascript" src="scripts/index.js"></script>
+  </head>
+  <body>
+    <header id="header_el" class="header">
+      <h1>File Sample</h1>
+    </header>
+
+    <!-- Main screen - File -->
+    <div id="content_file" class="content">
+      <div class="action-area ch60">
+        <button class="button" id="persistStor">Persistent Storage</button>
+        <button class="button" id="tmpStor">Temporary Storage</button>
+        <button class="button" id="createDir">Create Directory</button>
+        <button class="button" id="removeDir" disabled>Remove Directory</button>
+        <button class="button" id="writeToFile" disabled>Write File</button>
+        <button class="button" id="copyFile" disabled>Copy File</button>
+        <button class="button" id="moveFile" disabled>Move File</button>
+        <button class="button" id="readFile" disabled>Read File</button>
+        <button class="button" id="removeFile" disabled>Remove File</button>
+      </div>
+      <div class="result-area ch40">
+        <div class="results">
+          <div id="dirNameBlock" class="desc hidden">
+            <span>Directory: </span><span id="dirNameView">-</span>
+          </div>
+          <div id="fileNameBlock" class="desc hidden">
+            <span>File: </span><span class="fileNameView"></span>
+          </div>
+          <div id="copyNameBlock" class="desc hidden">
+            <span>Copy: </span><span class="copyNameView"></span>
+          </div>
+        </div>
+      </div>
+      <div class="separator"></div>
+    </div>
+
+    <!-- Create Directory screen -->
+    <div id="content_create_dir" class="content">
+      <div class="input-area ch100">
+        <input id="dir_name" class="inputBox" type="text" placeholder="Directory name" />
+        <div>
+          <button class="button" id="do_create_dir">Create</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Write File screen -->
+    <div id="content_write_file" class="content">
+      <div class="input-area ch100">
+        <input id="file_name" class="inputBox" type="text" placeholder="File name" />
+        <div></div>
+        <textarea id="file_content" class="inputBox" rows="4" placeholder="File content"></textarea>
+        <div>
+          <button class="button" id="do_write_file">Write</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Copy File screen -->
+    <div id="content_copy_file" class="content">
+      <div class="info-area ch100">
+        <div class="info">
+          <div class="desc">
+            <span>Source file: </span><span class="fileNameView"></span>
+          </div>
+        </div>
+        <input id="copy_name" class="inputBox" type="text" placeholder="Target file name" />
+        <div>
+          <button class="button" id="do_copy_file">Copy</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Move File screen -->
+    <div id="content_move_file" class="content">
+      <div class="info-area ch100">
+        <div class="info">
+          <div class="desc">
+            <span>Source file: </span><span class="fileNameView"></span>
+          </div>
+        </div>
+        <input id="move_name" class="inputBox" type="text" placeholder="Target file name" />
+        <div>
+          <button class="button" id="do_move_file">Move</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Read File screen -->
+    <div id="content_read_file" class="content">
+      <div class="info-area ch50">
+        <div class="info">
+          <div class="desc">
+            <span>File: </span><span class="fileNameView"></span>
+            <div id="file_content_view"></div>
+          </div>
+        </div>
+      </div>
+      <div class="info-area ch50">
+        <div id="file_copy_read" class="info hidden">
+          <div class="desc">
+            <span>File copy: </span><span class="copyNameView"></span>
+            <div id="copy_content_view"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="footer">
+      <div>Cordova API Samples</div>
+    </footer>
+  </body>
+</html>
diff --git a/sample/plugins/file/scripts/index.js b/sample/plugins/file/scripts/index.js
new file mode 100644 (file)
index 0000000..f07a73c
--- /dev/null
@@ -0,0 +1,408 @@
+/*
+ * Copyright (c) 2014-2015 Telerik AD
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var currentScreen = 'file';
+var dirName = null;
+var fileName = null;
+var copyName = null;
+
+var opr = {
+  DIR_CREATED: 1,
+  DIR_DELETED: 2,
+  FILE_CREATED: 3,
+  FILE_DELETED: 4
+};
+
+var onError = function(err) {
+  alert('Error: ' + err.message);
+};
+
+
+var changeScreen = function (screen) {
+  // Change content
+  document.getElementById('content_' + currentScreen).style.display = 'none';
+  document.getElementById('content_' + screen).style.display = 'block';
+
+  currentScreen = screen;
+
+  // Change header
+  if (screen === 'create_dir') {
+    document.getElementById('header_el').innerHTML = '<h1>File - create directory</h1>';
+  } else if (screen === 'write_file') {
+    document.getElementById('header_el').innerHTML = '<h1>File - write to file</h1>';
+  } else if (screen === 'read_file') {
+    document.getElementById('header_el').innerHTML = '<h1>File - read file</h1>';
+  } else if (screen === 'copy_file') {
+    document.getElementById('header_el').innerHTML = '<h1>File - copy file</h1>';
+  } else if (screen === 'move_file') {
+    document.getElementById('header_el').innerHTML = '<h1>File - move file</h1>';
+  } else if (screen === 'file') {
+    document.getElementById('header_el').innerHTML = '<h1>File Sample</h1>';
+  }
+};
+
+
+var updateButtons = function(oper) {
+  switch (oper) {
+    case opr.DIR_CREATED:
+      document.getElementById('createDir').disabled = true;
+      document.getElementById('removeDir').disabled = false;
+      document.getElementById('writeToFile').disabled = false;
+      document.getElementById('readFile').disabled = true;
+      document.getElementById('copyFile').disabled = true;
+      document.getElementById('moveFile').disabled = true;
+      document.getElementById('removeFile').disabled = true;
+      break;
+
+    case opr.DIR_DELETED:
+      document.getElementById('createDir').disabled = false;
+      document.getElementById('removeDir').disabled = true;
+      document.getElementById('writeToFile').disabled = true;
+      document.getElementById('readFile').disabled = true;
+      document.getElementById('copyFile').disabled = true;
+      document.getElementById('moveFile').disabled = true;
+      document.getElementById('removeFile').disabled = true;
+      break;
+
+    case opr.FILE_CREATED:
+      document.getElementById('writeToFile').disabled = true;
+      document.getElementById('readFile').disabled = false;
+      document.getElementById('copyFile').disabled = false;
+      document.getElementById('moveFile').disabled = false;
+      document.getElementById('removeFile').disabled = false;
+      break;
+
+    case opr.FILE_DELETED:
+      document.getElementById('writeToFile').disabled = false;
+      document.getElementById('readFile').disabled = true;
+      document.getElementById('copyFile').disabled = true;
+      document.getElementById('moveFile').disabled = true;
+      document.getElementById('removeFile').disabled = true;
+      break;
+  }
+};
+
+
+var setFileName = function(class_name, file_name) {
+  var elements = document.getElementsByClassName(class_name);
+  var i;
+  for (i = 0; i < elements.length; i++) {
+    elements[i].innerHTML = file_name;
+  }
+};
+
+
+var App = function() {
+}
+
+
+App.prototype = {
+  run: function() {
+    var that = this;
+    document.getElementById('persistStor').addEventListener('click', that.persistStor);
+    document.getElementById('tmpStor').addEventListener('click', that.tmpStor);
+    document.getElementById('createDir').addEventListener('click', function() {
+      changeScreen('create_dir');
+    });
+    document.getElementById('writeToFile').addEventListener('click', function() {
+      changeScreen('write_file');
+    });
+    document.getElementById('do_write_file').addEventListener('click', that.writeFile);
+    document.getElementById('readFile').addEventListener('click', function() {
+      that.readFile();
+      changeScreen('read_file');
+    });
+    document.getElementById('copyFile').addEventListener('click', function() {
+      changeScreen('copy_file');
+    });
+    document.getElementById('do_copy_file').addEventListener('click', that.copyFile);
+    document.getElementById('moveFile').addEventListener('click', function() {
+      changeScreen('move_file');
+    });
+    document.getElementById('do_move_file').addEventListener('click', that.moveFile);
+    document.getElementById('removeFile').addEventListener('click', that.removeFile);
+    document.getElementById('do_create_dir').addEventListener('click', that.createDir);
+    document.getElementById('removeDir').addEventListener('click', that.removeDir);
+  },
+  persistStor: function() {
+    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
+      function(fileSystem) {
+        alert('Requesting persistent file system succeded');
+      },
+      function(error) {
+        error.message = "Requesting persistent file system failed.";
+        onError.call(that, error);
+      });
+  },
+  tmpStor: function() {
+    window.requestFileSystem(LocalFileSystem.TEMPORARY, 0,
+      function(fileSystem) {
+        alert('Requesting temporary file system succeded');
+      },
+      function(error) {
+        error.message = "Requesting temporary file system failed.";
+        onError.call(that, error);
+      });
+  },
+  createDir: function() {
+    dirName = document.getElementById("dir_name").value;
+
+    if (dirName === '' || /[^A-Za-z0-9_\.]/.test(dirName)) {
+      dirName = null;
+      onError({ message: 'Wrong directory name !' });
+      return;
+    }
+
+    resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dataDirEntry) {
+      dataDirEntry.getDirectory(
+        dirName,
+        { create: true, exclusive: false },
+        function (dirEntry) {
+          alert('Directory ' + dirName + ' created');
+          updateButtons(opr.DIR_CREATED);
+          document.getElementById('dirNameView').innerHTML = dirName;
+          document.getElementById('dirNameBlock').style.display = 'block';
+          changeScreen('file');
+        }, function (e) {
+          onError({ message: 'Cannot create directory (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot create directory (' + e.code + ')' });
+    });
+  },
+  removeDir: function() {
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName, function (dirEntry) {
+      dirEntry.removeRecursively(
+        function () {
+          alert('Directory ' + dirName + ' deleted');
+          updateButtons(opr.DIR_DELETED);
+          document.getElementById('dirNameView').innerHTML = '';
+          setFileName('fileNameView', '');
+          setFileName('copyNameView', '');
+          document.getElementById('dirNameBlock').style.display = 'none';
+          document.getElementById('fileNameBlock').style.display = 'none';
+          document.getElementById('copyNameBlock').style.display = 'none';
+          dirName = null;
+          fileName = null;
+          copyName = null;
+          changeScreen('file');
+        }, function (e) {
+          onError({ message: 'Cannot create directory (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot delete directory (' + e.code + ')' });
+    });
+  },
+  writeFile: function() {
+    fileName = document.getElementById("file_name").value;
+
+    if (fileName === '' || /[^A-Za-z0-9_\.]/.test(fileName)) {
+      fileName = null;
+      onError({ message: 'Wrong file name !' });
+      return;
+    }
+
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName, function (dataDirEntry) {
+      dataDirEntry.getFile(
+        fileName,
+        { create: true, exclusive: false },
+        function (fileEntry) {
+          fileEntry.createWriter(
+            function (writer) {
+              writer.onwrite = function () {
+                alert('File ' + fileName + ' created');
+                updateButtons(opr.FILE_CREATED);
+                setFileName('fileNameView', fileName);
+                document.getElementById('fileNameBlock').style.display = 'block';
+                changeScreen('file');
+              };
+              writer.onerror = function() {
+                onError({ message: 'Failed to write data to a file' });
+              };
+              writer.write(document.getElementById('file_content').value);
+            }, function (e) {
+              onError({ message: 'Cannot create a file (' + e.code + ')' });
+            }
+          );
+        }, function (e) {
+          onError({ message: 'Cannot create a file (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot create directory (' + e.code + ')' });
+    });
+  },
+  copyFile: function() {
+    copyName = document.getElementById("copy_name").value;
+
+    if (copyName === '' || /[^A-Za-z0-9_\.]/.test(copyName)) {
+      copyName = null;
+      onError({ message: 'Wrong target file name !' });
+      return;
+    }
+
+    if (copyName === fileName) {
+      copyName = null;
+      onError({ message: 'Target file name has to differ from source file name !' });
+      return;
+    }
+
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) {
+      fileEntry.getParent(
+        function(parentEntry) {
+          fileEntry.copyTo(
+            parentEntry,
+            copyName,
+            function() {
+                alert('File ' + fileName + ' copied into ' + copyName);
+                setFileName('copyNameView', copyName);
+                document.getElementById('copyNameBlock').style.display = 'block';
+                changeScreen('file');
+            }, function (e) {
+              onError({ message: 'Cannot copy a file (' + e.code + ')' });
+            });
+        }, function (e) {
+          onError({ message: 'Cannot copy a file (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot copy a file (' + e.code + ')' });
+    });
+  },
+  moveFile: function() {
+    var newFileName = document.getElementById("move_name").value;
+
+    if (newFileName === '' || /[^A-Za-z0-9_\.]/.test(newFileName)) {
+      onError({ message: 'Wrong targer file name !' });
+      return;
+    }
+
+    if (newFileName === fileName) {
+      onError({ message: 'Target file name has to differ from source file name !' });
+      return;
+    }
+
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) {
+      fileEntry.getParent(
+        function(parentEntry) {
+          fileEntry.moveTo(
+            parentEntry,
+            newFileName,
+            function() {
+                alert('File ' + fileName + ' moved into ' + newFileName);
+                fileName = newFileName;
+                setFileName('fileNameView', fileName);
+                changeScreen('file');
+            }, function (e) {
+              onError({ message: 'Cannot move a file (' + e.code + ')' });
+            });
+        }, function (e) {
+          onError({ message: 'Cannot move a file (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot move a file (' + e.code + ')' });
+    });
+  },
+  readFile: function() {
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) {
+      fileEntry.file(
+        function (file) {
+          var reader = new FileReader();
+          reader.onloadend = function (evt) {
+            document.getElementById('file_content_view').innerHTML = evt.target.result;
+            if (copyName) {
+              document.getElementById('file_copy_read').style.display = 'block';
+              resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + copyName, function (fileEntry) {
+                fileEntry.file(
+                  function (file) {
+                    var reader = new FileReader();
+                    reader.onloadend = function (evt) {
+                      document.getElementById('copy_content_view').innerHTML = evt.target.result;
+                    };
+                    reader.readAsText(file);
+                  }, function (e) {
+                    onError({ message: 'Cannot read a file (' + e.code + ')' });
+                  });
+              }, function (e) {
+                onError({ message: 'Cannot read a file (' + e.code + ')' });
+              });
+            }
+          };
+          reader.readAsText(file);
+        }, function (e) {
+          onError({ message: 'Cannot read a file (' + e.code + ')' });
+        });
+    }, function (e) {
+      onError({ message: 'Cannot read a file (' + e.code + ')' });
+    });
+
+  },
+  removeFile: function() {
+    resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + fileName, function (fileEntry) {
+      fileEntry.remove(
+        function() {
+          updateButtons(opr.FILE_DELETED);
+          setFileName('fileNameView', '');
+          document.getElementById('fileNameBlock').style.display = 'none';
+          alert('File ' + fileName + ' deleted');
+          fileName = null;
+
+          if (copyName) {
+            resolveLocalFileSystemURL(cordova.file.dataDirectory + dirName + '/' + copyName, function (fileEntry) {
+              fileEntry.remove(
+                function() {
+                  setFileName('copyNameView', '');
+                  document.getElementById('copyNameBlock').style.display = 'none';
+                  alert('Copy file ' + copyName + ' deleted');
+                  copyName = null;
+                }, function(e) {
+                  onError({ message: 'Cannot delete a copy file (' + e.code + ')' });
+                }
+              );
+            }, function (e) {
+              onError({ message: 'Cannot delete a copy file (' + e.code + ')' });
+            });
+          }
+        }, function(e) {
+          onError({ message: 'Cannot delete a file (' + e.code + ')' });
+        }
+      );
+    }, function (e) {
+      onError({ message: 'Cannot delete a file (' + e.code + ')' });
+    });
+  }
+};
+
+
+// onDeviceReady callback
+function onDeviceReady() {
+  var app = new App();
+  app.run();
+  document.addEventListener('backbutton', function() {
+    if (currentScreen === 'file') {
+      window.history.back();
+    } else {
+      changeScreen('file');
+    }
+  });
+}
+
+
+//Initialize function
+var init = function () {
+  document.addEventListener('deviceready', onDeviceReady, false);
+};
+
+window.onload = init;
diff --git a/sample/plugins/file/styles/main.css b/sample/plugins/file/styles/main.css
new file mode 100644 (file)
index 0000000..6d2988e
--- /dev/null
@@ -0,0 +1,275 @@
+/* apply a natural box layout model to all elements */
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+html
+{
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    height:100%;
+}
+
+body
+{
+    font-family: sans-serif, Arial, Segoe UI;
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+    height:100%;
+    padding: 60px 0px 24px 0px;
+    overflow:hidden;
+}
+
+/*width, height*/
+.clear {clear:both;}
+
+.ch10 {height:10%;}
+.ch20 {height:20%;}
+.ch30 {height:30%;}
+.ch40 {height:40%;}
+.ch50 {height:50%;}
+.ch60 {height:60%;}
+.ch70 {height:70%;}
+.ch80 {height:80%;}
+.ch90 {height:90%;}
+.ch100 {height:100%;}
+
+.cw10 {width:10%;}
+.cw20 {width:20%;}
+.cw30 {width:30%;}
+.cw40 {width:40%;}
+.cw50 {width:50%;}
+.cw60 {width:60%;}
+.cw70 {width:70%;}
+.cw80 {width:80%;}
+.cw90 {width:90%;}
+.cw100 {width:100%;}
+
+/*header*/
+.header
+{
+    position:absolute;
+    top: 0px;
+    left:0px;
+    width:100%;
+    height: 60px;
+    border:none;
+    background: #dedfe1;
+    background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
+    background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
+    background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
+    box-shadow: 0px 1px 0px 0px #fff;
+    -webkit-box-shadow: 0px 1px 0px 0px #fff;
+    -moz-box-shadow: 0px 1px 0px 0px #fff;
+    border-bottom: 1px solid #9ca1a5;
+    color: #639ecd;
+}
+.header > h1
+{
+    font-size: 30px;
+    font-weight: normal;
+    border-bottom: 4px solid #639ecd;
+    display: inline-block;
+    margin: 0 0 0 12px;
+    position:absolute;
+    bottom:0;
+    text-shadow: 0 1px 0 #fff;
+}
+
+/*content*/
+.content
+{
+    background:#f0f0f0;
+    min-height:100%;
+    height:100%;
+    overflow:hidden;
+}
+
+#content_create_dir,
+#content_write_file,
+#content_read_file,
+#content_copy_file,
+#content_move_file {
+  display: none;
+}
+
+.content > .input-area,
+.content > .action-area,
+.content > .info-area,
+.content > .result-area {
+    width: 100%;
+    border-top: 1px solid #9ca1a5;
+    position:relative;
+}
+.content > .input-area,
+.content > .action-area,
+.content > .info-area {
+    border-top-color:#fff;
+}
+.content > .input-area.ch100,
+.content > .action-areach100,
+.content > .info-areach100,
+.content > .result-area.ch100 {
+    border-top-color:transparent;
+}
+
+.content > .input-area > .inputBox,
+.content > .info-area > .inputBox {
+    background-color: #fff;
+    font-size:20px;
+    color: #0c0c0c;
+    width: 290px;
+    padding: 7px 10px;
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(180, 180, 180);
+    border-bottom-color: rgb(255, 255, 255);
+    box-shadow: 0 -1px 0 #3C3C3C;
+    margin-left:12px;
+    margin-top:10px;
+}
+.content > .info-area,
+.content > .input-area {
+    background-color:#e4e4e4;
+}
+
+.content > .result-area > .results,
+.content > .info-area > .info {
+    margin:10px;
+}
+
+.content > .result-area > .results > .desc,
+.content > .info-area > .info > .desc {
+    font-size:12px;
+    color:#a7a9ad;
+    margin-top:6px;
+    text-align:left;
+}
+
+.content > .result-area > .results > .result-info > div:first-of-type {
+    color:#a7a9ad;
+    font-size:20px;
+    float:left;
+    text-align:right;
+    text-shadow: 0 1px 0 #fff;
+}
+.content > .result-area > .results > .result-info > div:first-of-type + div {
+    color:#414349;
+    font-size:20px;
+    margin-left:10px;
+    float:left;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.hidden {
+  display: none;
+}
+
+#dirNameView,
+.fileNameView,
+.copyNameView,
+#file_content_view,
+#copy_content_view {
+  color: black;
+}
+
+/*separator*/
+.content > .result-area > .separator
+{
+    height: 12px;
+    border: none;
+    background: -moz-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(227, 227, 227, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
+    background: -webkit-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -o-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: -ms-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    background: linear-gradient(to bottom, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    margin: 1px;
+}
+
+/*footer*/
+.footer
+{
+    position:fixed;
+    bottom: 0px;
+    left:0px;
+    width:100%;
+    height: 24px;
+    background:#5f626a;
+    border-top:1px solid #42444a;
+    box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+    -webkit-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+    -moz-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5);
+}
+
+.footer div
+{
+    position:absolute;
+    right:12px;
+    top:4px;;
+    color: #afb1b5;
+    font-size:14px;
+}
+
+/*button*/
+.button
+{
+    border: 1px solid #8d9096;
+    border-radius: 3px;
+    color: #4d5d6b;
+    background-color: white;
+    margin-left:12px;
+    margin-top:12px;
+    width: 140px;
+    height: 32px;
+    display: inline;
+    float: left;
+}
+
+.button:active
+{
+    border: 1px solid #639ecd;
+    background-image: none;
+    background-color: #639ecd;
+    color: #fff;
+    box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3);
+}
+
+.button:disabled,
+.button:disabled:hover,
+.button:disabled:active
+{
+    background: rgba(49, 52, 55, 0.1);
+    color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.button.dh {
+    height:60px;
+}
+.button.dw {
+    width:220px;
+}
+
+/* landscape */
+@media screen and (orientation:landscape) {
+    .button.dh {
+        height:32px;
+        width:220px;
+    }
+}
+
+/*specific*/
+.content > .result-area > .results  > .desc,
+.content > .info-area > .info  > .desc {
+    font-size:16px;
+    color:#639ecd;
+    word-wrap:break-word;
+}