Addition of icon, style change, code cleanup, copy, about and faq

jtomes123 · Jan 27, 2018 · 32b2a96 · 32b2a96
1 parent 8c62412
commit 32b2a96
Show file tree

Hide file tree

Showing 40 changed files with 489 additions and 20 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Backend/Dogtags.sol b/Backend/Dogtags.sol
@@ -36,12 +36,12 @@ contract Dogtags {
         dogtags[msg.sender].name = name;
     }
     function Verify(address adr) public returns(string) {
-        if(dogtags[msg.sender].canVerify) {
+        if (dogtags[msg.sender].canVerify) {
             dogtags[adr].verified = true;
         }
     }
     function UnVerify(address adr) public returns(string) {
-        if(dogtags[msg.sender].canVerify) {
+        if (dogtags[msg.sender].canVerify) {
             dogtags[adr].verified = false;
         }
     }

diff --git a/Frontend/.DS_Store b/Frontend/.DS_Store
diff --git a/Frontend/.meteor/packages b/Frontend/.meteor/packages
@@ -28,3 +28,4 @@ ethereum:accounts
 kadira:blaze-layout
 kadira:flow-router
 dschulz:jquery-qrcode
+zenorocha:clipboard
diff --git a/Frontend/.meteor/versions b/Frontend/.meteor/versions
@@ -88,3 +88,4 @@ underscore@1.0.10
 url@1.1.0
 webapp@1.4.0
 webapp-hashing@1.0.9
+zenorocha:clipboard@1.7.1
diff --git a/Frontend/client/favicons/android-chrome-192x192.png b/Frontend/client/favicons/android-chrome-192x192.png
diff --git a/Frontend/client/favicons/android-chrome-512x512.png b/Frontend/client/favicons/android-chrome-512x512.png
diff --git a/Frontend/client/favicons/apple-touch-icon.png b/Frontend/client/favicons/apple-touch-icon.png
diff --git a/Frontend/client/favicons/browserconfig.xml b/Frontend/client/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/Frontend/client/favicons/favicon-16x16.png b/Frontend/client/favicons/favicon-16x16.png
diff --git a/Frontend/client/favicons/favicon-32x32.png b/Frontend/client/favicons/favicon-32x32.png
diff --git a/Frontend/client/favicons/favicon.ico b/Frontend/client/favicons/favicon.ico
diff --git a/Frontend/client/favicons/manifest.json b/Frontend/client/favicons/manifest.json
@@ -0,0 +1,18 @@
+{
+    "name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/Frontend/client/favicons/mstile-144x144.png b/Frontend/client/favicons/mstile-144x144.png
diff --git a/Frontend/client/favicons/mstile-150x150.png b/Frontend/client/favicons/mstile-150x150.png
diff --git a/Frontend/client/favicons/mstile-310x150.png b/Frontend/client/favicons/mstile-310x150.png
diff --git a/Frontend/client/favicons/mstile-310x310.png b/Frontend/client/favicons/mstile-310x310.png
diff --git a/Frontend/client/favicons/mstile-70x70.png b/Frontend/client/favicons/mstile-70x70.png
diff --git a/Frontend/client/favicons/safari-pinned-tab.svg b/Frontend/client/favicons/safari-pinned-tab.svg
diff --git a/Frontend/client/main.html b/Frontend/client/main.html
@@ -1,11 +1,18 @@
 <head>
-  <title>DogTags</title>
+  <title>Ethtags</title>
+
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="theme-color" content="#ffffff">
 </head>
 
 <body>
   {{>App_Body}}
 </body>
-
+ 
 <template name="App_Body">
     {{> Template.dynamic template=main}}
 </template>
@@ -18,12 +25,10 @@ <h1>No web3 detected</h1><br>
 </template>
 
 <template name="main">
-  <header>
-    Welcome to DogTags<br><footer>also known as EthTags</footer>
-  </header>
+  {{>title}}
   <div class="edit">
     <form class="new-post">
-      <input type="text" name="name" placeholder="Your title" value="{{name}}"/><br>
+      <input type="text" name="name" placeholder="Your name" value="{{name}}"/><br>
       <textarea name="content" form="new-post" placeholder="Your dogtag...">{{content}}</textarea><br>
       <input type="submit" text="Submit"> 
     </form>
@@ -32,28 +37,83 @@ <h1>No web3 detected</h1><br>
         <h3>Your Dogtag</h3>
         <h4>Background color</h4>
         <input id="bgc" class="colorsel" type="color" name="bgc" value="#FFFFFF">
-        <br>
         <h4>Text color</h4>
         <input id="textc" class="colorsel" type="color" name="textc" value="#000000">
-        <br>
         <h4>Show address qrcode</h4>
         <input id="showqr" type="checkbox" checked name="showqr">
-        <h4><a href="{{link}}" target="_blank">Preview</a></h4>
+        <br>
+        <a href="{{link}}" target="_blank"><button class="previewbut">Preview</button></a>
       </form>
       <h4>Link:</h4>
-      <code>{{link}}</code>
+      <code id="linkc">{{link}}</code>
+      <button class="previewbut" id="copyLinkBut" data-clipboard-target="#linkc">Copy Link</button>
       <h4>iframe:</h4>
-      <code>{{iframe}}</code>
+      <code id="iframec">{{iframe}}</code>
+      <button class="previewbut" id="copyIframeBut" data-clipboard-target="#iframec">Copy IFrame</button>
     </div>
   </div>
 </template>
 
+<template name="about">
+  {{>title}}
+  <p>
+    Ethtags is a project which lets you create your own <b>dogtag</b> which is attached to your address. 
+    The dogtag is always attached to the address that invoked the contract, in other words your friends
+    can not change your dogtag, if they do not have full access to your wallet.
+  </p>
+  <p>
+    The dogtag itself is stored in the ethereum blockchain and the data can be accessed at any time as long as
+    you have access to the ethereum blockchain. The ethtags frontend provides a simple way to access your dogtag.
+    You can get a link to it which you can then send to anyone to check out your dogtag or you can embed it as an 
+    signature anywhere where they support iframe html tag.
+  </p>
+  <p>
+    There are future plans to allow you, to get the information, specifically the name, in your dogtag verified by a 
+    trusted third party, like the post office or some other third party which would be present almost anywhere. These 
+    verified dogtags would be very handy when you need to send a larger amount of currency to a someone else and you 
+    want to be sure that it is them.
+  </p>
+  <p>
+    Ethtags is currently maintained and developed by Jakub Tomeš a casual programmer and game developer that wanted to start
+    developing smart contracts.
+  </p>
+</template>
+
+<template name="donate">
+  {{> title}}
+  <p>If you want to support the development of ethtags and help run the project you can upvote my posts on <a href="#">steemit</a>
+  or donate to this ethereum address: ### every little bit helps.</p>
+</template>
+
+<template name="help">
+  <p>Still under construction.</p>
+</template>
+
+<template name="faq">
+  {{> title}}
+  <p>Still under construction.</p>
+</template>
+
 <template name="iframe">
   <canvas id="code" width="150" height="150"></canvas>
   <div class="info">
     <p><b>{{address}}</b></p>
     <p>{{content}}</p>
     <p><footer>{{signature}}</footer></p>
   </div>
-  <aside class="poweredby">Powered by <a href="http://heroku.ethtags.com">Dogtags</a>.</aside>
+  <aside class="poweredby">Powered by <a href="http://heroku.ethtags.com">Ethtags</a>.</aside>
+</template>
+
+<template name="title">
+  <div class="menu">
+    <img src="icon.svg" class="logo">
+    <ul>
+      <li><button class="but_home">Home</button></li>
+      <li><button class="but_about">About</button></li>
+      <li><button class="but_faq">FAQ</button></li>
+    </ul>
+  </div>
+  <header>
+    Welcome to Ethtags<br><footer>also known as Dogtags</footer>
+  </header>
 </template>
diff --git a/Frontend/client/main.js b/Frontend/client/main.js
@@ -12,8 +12,12 @@ Template.main.onCreated(function mainOnCreated() {
   EthAccounts.init();
   this.nameAsync = new ReactiveVar("Retrieving...");
   this.contentAsync = new ReactiveVar("Retrieving...");
-  this.address = new ReactiveVar("Address");
-  this.link = new ReactiveVar("#");
+  this.address = new ReactiveVar("0xc000a000a000aa00a00a0a00a00aa0000a000000");
+  this.link = new ReactiveVar("http://ethtags.herokuapp.com/0xc000a000a000aa00a00a0a00a00aa0000a000000/true/ffffff/000000");
+
+  new Clipboard('#copyLinkBut');
+  new Clipboard('#copyIframeBut');
+
   var DogtagsContract = web3.eth.contract([
       {
         "constant": true,
@@ -128,7 +132,7 @@ Template.main.onCreated(function mainOnCreated() {
     });
   } ,750);
   Meteor.setTimeout(function() {
-    lnk.set("http://ethtags.herokuapp.com" + "/iframe/" + adr.get());
+    lnk.set("http://ethtags.herokuapp.com" + "/iframe/" + adr.get() + "/true/ffffff/000000");
   }, 1000);
 });
 
@@ -165,6 +169,19 @@ Template.main.events({
     instance.link.set("http://ethtags.herokuapp.com" + "/iframe/" + instance.address.get() + "/" + $("#showqr").is(":checked") + "/" + $("#bgc").val().replace("#", "") + "/" + $("#textc").val().replace("#", ""));
   },
 });
+Template.title.events({
+  'click .but_home'(event, instance) {
+    FlowRouter.go('main');
+  },
+  'click .but_about'(event, instance) {
+    FlowRouter.go('about');
+  },
+  'click .but_faq'(event, instance) {
+    FlowRouter.go('faq');
+  },
+});
+
+
 
 Template.iframe.helpers({
   content(){
@@ -206,7 +223,9 @@ Template.iframe.onRendered(function () {
   }
 
   if(typeof(bgc) != 'undefined')
-    $('body').css('background-color', '#' + bgc);
+    $('body').css('background', '#' + bgc);
+  else
+    $('body').css('background', '#FFFFFF');
   if(typeof(textc) != 'undefined')
     $('body').css('color', '#' + textc);
 });
@@ -365,3 +384,16 @@ FlowRouter.route('/', {
     BlazeLayout.render('App_Body', {main: 'main'});
   }
 });
+FlowRouter.route('/about', {
+  name: 'about',
+  action() {
+    BlazeLayout.render('App_Body', {main: 'about'});
+  }
+});
+FlowRouter.route('/faq', {
+  name: 'faq',
+  action() {
+    BlazeLayout.render('App_Body', {main: 'faq'});
+  }
+});
+