2 files changed, 36 insertions, 4 deletions
diff --git a/index.html b/index.html
index d1b5958..6fb82c0 100644
--- a/index.html
+++ b/index.html
@@ -2,15 +2,20 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Direct link to your WhatsApp contacts | WhatZap.space</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
   <script src="vue.min.js"></script>
 </head>
 <body>
   <div id="app">
     <h1>Direct link to your WhatsApp contacts</h1>
-    <input v-model="number" type="number">
-    <br>
-    <a v-bind:href="href">+{{ number }}</a>
+    <div id="input">
+      <input v-model="number" pattern="\d*">
+    </div>
+    <div id="link">
+       <a v-bind:href="href">+{{ number }}</a>
+    </div>
   </div>
 
   <script>
@@ -23,8 +28,21 @@
         href: function () {
           return 'whatsapp://send?phone=+' + this.number + '&text=abc'
         }
+      },
+      methods: {
+        getLocation: function() {
+          var tag = document.createElement('script');
+          tag.src = "https://ipinfo.io/?callback=locationCallback";
+          document.querySelector('head').appendChild(tag);
+        }
+      },
+      beforeMount: function() {
+        this.getLocation();
       }
-    })
+    });
+    function locationCallback(res) {
+      console.log(res);
+    }
   </script>
 </body>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6129195
--- /dev/null
+++ b/style.css
@@ -0,0 +1,14 @@
+body {
+  background: #56ab2f;
+  background: -webkit-linear-gradient(to top, #56ab2f, #a8e063);
+  background: linear-gradient(to top, #56ab2f, #a8e063);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+div#app {
+    flex: 1;
+    height: 100vh;
+    text-align: center;
+}