update test file and added demo link to readme

aharen · Oct 17, 2019 · 9eb3073 · 9eb3073
1 parent 88512b8
commit 9eb3073
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # thaana-keyboard
-Thaana keyboard replaces latin text to thaana unicode characters
+Thaana keyboard replaces latin text to thaana unicode characters using JavaScript. 
+
+Demo: [https://thaana-keyboard.khusaam.com](https://thaana-keyboard.khusaam.com)
 
 ## Installation & Usage
 

diff --git a/test/index.html b/test/index.html
@@ -4,11 +4,81 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<meta name="keyword" content="thaana,keyboard,javascript,dhivehi">
+    <meta name="description" content="Thaana keyboard replaces latin text to thaana unicode characters, written in JavaScript">
+
+    <title>Thaana Keyboard (thaana-keyboard.js)</title>
+
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+
+	<style>
+		.thaana-keyboard {
+			direction: rtl;
+		}
+	</style>
 </head>
-<body>
-	<input type="text"
-		class="thaana-keyboard"
-		style="direction: rtl; padding: 5px; font-size: 18px; width: 80vw;">
+<body class="bg-gray-200">
+	<div class="mx-auto w-full lg:w-2/3 xl:w-2/5 p-8">
+
+		<div class="w-full text-center">
+            <p class="text-2xl sm:text-3xl font-normal text-gray-700">Thaana Keyboard</p>
+            <p class="text-sm text-gray-700 mb-5">Replaces latin text to thaana unicode characters</p>
+
+            <div class="flex flex-wrap justify-center my-5">
+            	<div class="m-1">
+            		<a class="github-button" 
+            			data-size="large"
+            			href="https://github.com/aharen/thaana-keyboard"  
+            			data-show-count="true" 
+            			aria-label="Star aharen/thaana-keyboard on GitHub">Star</a>
+            	</div>
+            	<div class="m-1">
+            		<a class="github-button" 
+            			href="https://github.com/aharen/thaana-keyboard/issues" 
+            			data-size="large" 
+            			data-show-count="true" 
+            			aria-label="Issue aharen/thaana-keyboard on GitHub">Issue</a>
+            	</div>
+            	<div class="m-1">
+            		<a class="github-button" 
+            			href="https://github.com/aharen/thaana-keyboard/archive/master.zip" 
+            			data-size="large" 
+            			aria-label="Download aharen/thaana-keyboard on GitHub">Download</a>
+            	</div>
+            	<div class="m-1">
+            		<a class="github-button" 
+            			data-size="large"
+            			href="https://github.com/aharen" 
+            			aria-label="Follow @aharen on GitHub">Follow @aharen</a>
+            	</div>
+            </div>
+        </div>
+
+        <div class="my-10 bg-gray-300">
+			<input type="text" 
+				class="thaana-keyboard p-3 w-full border border-gray-100 rounded outline-none border-gray-300 focus:outline-none focus:border-gray-400 focus:shadow"
+				placeholder="ލިޔެލާ..." />
+		</div>
+
+        <div class="flex flex-no-wrap w-full">
+			<iframe
+				class="flex-1 w-full h-screen sm:h-64"
+				src="https://carbon.now.sh/embed/?bg=rgba(237%2C242%2C247%2C1)&t=one-dark&wt=none&l=htmlmixed&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=true&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%252F%252F%2520use%2520the%2520class%2520'thaana-keyboard'%2520on%2520element%250A%253Cinput%2520type%253D%2522text%2522%2520class%253D%2522thaana-keyboard%2522%2520%252F%253E%250A%252F%252F%2520import%2520the%2520file%250A%253Cscript%2520src%253D%2522thaana-keyboard.min.js%2522%253E%253C%252Fscript%253E"
+				style="border:0; overflow:hidden;"
+				sandbox="allow-scripts allow-same-origin">
+			</iframe>
+        </div>
+	</div>
 	<script src="thaana-keyboard.min.js"></script>
+	<script async defer src="https://buttons.github.io/buttons.js"></script>
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1461244-14"></script>
+	<script>
+	  window.dataLayer = window.dataLayer || [];
+	  function gtag(){dataLayer.push(arguments);}
+	  gtag('js', new Date());
+
+	  gtag('config', 'UA-1461244-14');
+	</script>
 </body>
 </html>