style: 修改了一些UI上的样式

shenlvmeng · Feb 6, 2018 · 44fb963 · 44fb963
1 parent 292beae
commit 44fb963
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,48 @@
+### https://raw.github.com/github/gitignore/abad92dac5a4306f72242dae3bca6e277bce3615/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
 node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+build
diff --git a/README.md b/README.md
@@ -5,8 +5,9 @@
 ## 如何使用
 
 - 输入你申请的百度地图ak秘钥
-- 导入gpx文件
+- 导入gpx文件（行者中，可以在轨迹详情页里找到“导出”选项）
 - 一键生成资源文件到`output`中
+- 将生成的文件放在服务器上即可
 
 ## 学习资源
 

diff --git a/index.html b/index.html
@@ -2,25 +2,26 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Hello World!</title>
+    <title>Traces - 你的运动轨迹整合工具</title>
+    <style>
+    *{margin:0;padding:0}body,html{height:100%}body{display:flex;justify-content:center;align-items:center;font-family:"Helvetica Neue","Microsoft Yahei",Arial,sans-serif}.wrapper div{width:350px;margin:30px auto}label{margin-right:10px;font-weight:100}input{font:14px/2 "Helvetica Neue","Microsoft Yahei",Arial,sans-serif}input[type=text]{width:240px;padding:0 5px;border:1px solid #aaa;border-radius:2px;color:#333}input[type=file]{display:inline-flex;font-weight:100;outline:0}#upload{width:120px;font-size:16px;line-height:2;text-align:center;color:#fff;background-color:#4bb505;border-radius:4px;cursor:pointer}
+    </style>
   </head>
   <body>
-    <input type="text" id="city" placeholder="请输入设置为中心的城市名">
-    <input type="text" id="title" placeholder="请输入想要的网页标题">
-    <input type="text" id="ak" placeholder="请输入ak秘钥">
-    <input type="file" multiple id="files" accept=".gpx">
-    <button id="upload">上传</button>
+    <div class="wrapper">
+      <h1>Traces</h1>
+      <div><label for="city">Step 1:</label><input type="text" id="city" placeholder="请输入设置为中心的城市名"></div>
+      <div><label for="title">Step 2:</label><input type="text" id="title" placeholder="请输入想要的网页标题"></div>
+      <div><label for="ak">Step 3:</label><input type="text" id="ak" placeholder="请输入百度地图ak秘钥，必填"></div>
+      <div><label>Step 4:</label><input type="file" multiple id="files" accept=".gpx"></div>
+      <div id="upload">Generate!</div>
+    </div>
     <script>
       // You can also require other files to run in this process
       require('./renderer.js')
     </script>
 <script type="text/template" id="template">
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><style>
-    body, html, #map {width: 100%; height: 100%; overflow: hidden; margin:0;}
-  </style><title><%=title%></title></head><body><div id="map"></div></body>
-&lt;script src="https://api.map.baidu.com/api?v=2.0&ak=<%=key%>">&lt;/script>
-&lt;script>!function(){var n=Array.apply(null,Array(<%=length%>)).map(function(n,a){return a+".json"});var a=new BMap.Map("map");a.centerAndZoom("<%=city%>"),a.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})),a.enableScrollWheelZoom(!0),function e(){var t,o,r;n.length&&(t=n.shift(),o=function(n){n&&e();try{var t=JSON.parse(n).map(function(n){return new BMap.Point(n.lng,n.lat)}),o=new BMap.Polyline(t);a.addOverlay(o)}catch(n){console.warn(n)}},(r=new XMLHttpRequest).open("GET",t,!0),r.onreadystatechange=function(){4===r.readyState&&200===r.status&&o(r.response)},r.send())}()}();
-&lt;/script></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><style>body, html, #map {width: 100%; height: 100%; overflow: hidden; margin:0;}</style><title><%=title%></title></head><body><div id="map"></div></body>&lt;script src="https://api.map.baidu.com/api?v=2.0&ak=<%=key%>">&lt;/script>&lt;script>!function(){var n=Array.apply(null,Array(<%=length%>)).map(function(n,a){return a+".json"});var a=new BMap.Map("map");a.centerAndZoom("<%=city%>"),a.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})),a.enableScrollWheelZoom(!0),function e(){var t,o,r;n.length&&(t=n.shift(),o=function(n){n&&e();try{var t=JSON.parse(n).map(function(n){return new BMap.Point(n.lng,n.lat)}),o=new BMap.Polyline(t);a.addOverlay(o)}catch(n){console.warn(n)}},(r=new XMLHttpRequest).open("GET",t,!0),r.onreadystatechange=function(){4===r.readyState&&200===r.status&&o(r.response)},r.send())}()}();&lt;/script></html>
 </script>
   </body>
 </html>
diff --git a/output/0.json b/output/0.json
diff --git a/output/1.json b/output/1.json
diff --git a/output/index.html b/output/index.html
diff --git a/renderer.js b/renderer.js
@@ -44,7 +44,7 @@ document.getElementById('upload').addEventListener('click', () => {
 
   remote.require('fs').mkdir(OUTPUT_PATH, 0o777, err => {
     if (err) {
-      alert('文件夹创建失败，文件夹已存在或权限不够')
+      alert('文件夹创建失败：\n文件夹已存在或权限不够')
       return
     }
     // 生成模板HTML文件
@@ -63,7 +63,7 @@ document.getElementById('upload').addEventListener('click', () => {
     Array.from(fileList).forEach(serialize)
     remote.require('fs').writeFile(path.join(OUTPUT_PATH, 'index.html'), tmpl(template)(data).replace(/&lt;/g, '<'),'utf8', err => {
       if (err) throw err
-      else alert('生成完毕！将output文件夹下所有文件上传到服务器即可查看效果！')
+      else alert('生成完毕！\n将output文件夹下所有文件上传到服务器即可查看效果！')
     })
   })
 })