added landing page

jplattel · Oct 8, 2020 · 28a2caa · 28a2caa
1 parent 3e52ea9
commit 28a2caa
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 5 deletions.
diff --git a/docs/clip.html b/docs/clip.html
@@ -0,0 +1,11 @@
+<script>
+    // Get params
+    const params = new URLSearchParams(window.location.search);
+
+    // Get vault & notes (with default)
+    const VAULT_NAME = params.get('vault') || 'obsidian'
+    const CLIPPING_NOTE_NAME = params.get('note') || 'Chrome Inbox'
+
+    // Redirect to open obsidian
+    window.location.href = `obsidian://vault/${VAULT_NAME}/${CLIPPING_NOTE_NAME}`
+</script>
diff --git a/docs/index.html b/docs/index.html
@@ -1,6 +1,29 @@
-<script>
-    const VAULT_NAME = 'obsidian'
-    const CLIPPING_NOTE_NAME = 'Chrome Inbox'
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Obsidian Clipper</title>
+        <link rel="stylesheet" href="style.css">
+        <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+    </head>
+    <body>
 
-    window.location.href = `obsidian://vault/${VAULT_NAME}/${CLIPPING_NOTE_NAME}`
-</script>
+        <main>
+
+            <h1>Obsidian Clipper</h1>
+            <hr>
+            <h2 class="subtitle">An unoffical clipper for Chrome</h2>
+
+            <p class="description">
+                This is an unofficial clipper for <a href="https://obsidian.md/">Obsidian</a> that allows you to easily clip a selection to a note in 
+                Obsidian. Made by <a href="http://jplattel.nl/">Joost Plattel</a>. 
+                This plugin is available as open-source on <a href="https://github.com/jplattel/obsidian-clipper">Github</a>.
+            </p>
+
+            <button onclick="window.location='http://github.com/jplattel/obsidian-clipper/'">
+                Download & use at Github    
+            </button>
+
+        </main>
+
+</body>
+</html>
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,73 @@
+body{
+    background-color: #202020;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+main{
+    margin: 0 auto;
+    display: block;
+    width: 900px;
+    color: white;
+    font-size: 20px;
+    text-align: center;
+}
+
+p.description{
+    text-align: left;
+    color: #999;
+    line-height: 140%;
+}
+a {
+    color: #7f6df2;
+    text-decoration: none;
+}
+a:hover {
+    color: #8875ff;
+    text-decoration: underline;
+}
+
+.form-group label{
+    margin-top: 20px;
+    text-align: left;
+    float: left;
+    margin-bottom: 10px;
+}
+
+input{
+    width:100%;
+    padding: 15px;
+    box-sizing: border-box;
+    border: 0px;
+    font-size: 18px;
+    margin-bottom: 20px;
+    border-radius: 3px;
+}
+
+h1 {
+    font-size: 70px;
+    line-height: 86px;
+    margin-bottom: 24px;
+    color: #f8f8f8;
+    font-family: 'Playfair', sans-serif;
+    font-weight: 800;
+}
+
+button{
+    margin-top: 20px;
+    font-size: 22px;
+    padding: 15px;
+    width: 100%;
+    border: 0px;
+    border-radius: 3px;
+}
+
+button:hover{
+    background-color: #483699;
+    color: white;
+    cursor: pointer;
+}
+
+#status{
+    padding-top: 20px;
+}