diff --git a/static/js/main.js b/static/js/main.js
index f02088d..a322698 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,3 +1,24 @@
-function page_refresh() {
- location.reload();
-}
+var vue = new Vue({
+ el: '#dip_main_div',
+
+ data () {
+ return {
+ title: "Public IP Address service",
+ dip: {"ip": null,
+ "hostname": null,
+ "city": null,
+ "country": null},
+ }
+ },
+
+ mounted () {
+ axios.get("https://ip.paulbsd.com")
+ .then(response => {
+ this.dip = response.data
+ })
+ .catch(err => {
+ // Manage the state of the application if the request
+ // has failed
+ });
+ }
+});
\ No newline at end of file
diff --git a/templates/footer_js.html b/templates/footer_js.html
new file mode 100644
index 0000000..d96254a
--- /dev/null
+++ b/templates/footer_js.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/templates/head.html b/templates/head.html
index 42a1c14..62d8fc9 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -1,11 +1,15 @@
{{ .Title }}
+
+
-
+
+
+
diff --git a/templates/index.html b/templates/index.html
index 7462301..866e96a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,21 +7,21 @@
IP informations
| IP |
- {{ .IP.IP }} |
+ {{ "{{" }} dip.ip {{ "}}" }} |
| Reverse DNS |
- {{ .IP.Hostname }} |
+ {{ "{{" }} dip.hostname {{ "}}" }} |
| City |
- {{ .IP.City }} |
+ {{ "{{" }} dip.city {{ "}}" }} |
| Country |
- {{ .IP.Country }} |
+ {{ "{{" }} dip.country {{ "}}" }} |
-
+ {{ template "footer_js.html" .}}