page tweaks

michaelschade · Jul 17, 2019 · ed8fe90 · ed8fe90
1 parent 4b51886
commit ed8fe90
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
-  "name": "Remark Later",
+  "name": "Send to reMarkable",
   "version": "0.1",
-  "description": "Send documents to your Remarkable tablet",
+  "description": "The best way to send content to your reMarkable tablet. Print any website and pick it up immediately on your tablet.",
   "manifest_version": 2,
   "permissions": [
     "storage",

diff --git a/static/setup.css b/static/setup.css
@@ -238,25 +238,29 @@ body {
   text-decoration: underline;
 }
 
-p#error {
+p#status {
   font-weight: 400;
   font-size: 1em;
   padding: 0px 30px 0px 30px;
-  background-image: linear-gradient(127deg, rgba(255, 89, 89, 0.94), rgb(255, 106, 106));
+  background-image: linear-gradient(127deg, rgba(119, 119, 119, 0.94), rgb(132, 132, 132));
   -webkit-background-clip: text;
   color: transparent;
-  text-transform: lowercase;
   height: 0;
   transform: translateY(-11px);
-  padding-bottom: 15px;
+  padding-bottom: 18px;
   margin-top: -5px;
   margin-bottom: 0px;
 }
 
-p#error::first-letter {
+p#status.error::first-letter {
   text-transform: uppercase;
 }
 
+p#status.error {
+  background-image: linear-gradient(127deg, rgba(255, 89, 89, 0.94), rgb(255, 106, 106));
+  text-transform: lowercase;
+}
+
 .footer {
   position: absolute;
   left: 50%;
@@ -266,7 +270,7 @@ p#error::first-letter {
   color: rgba(69, 65, 76, 0.82);
   z-index: 0;
   text-align: center;
-  line-height: 0.6em
+  line-height: 1.3em;
 }
 
 .footer a, .footer a:visited {

diff --git a/static/setup.html b/static/setup.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Setup Remarklater</title>
+  <title>Set up Send to reMarkable</title>
   <link rel="stylesheet" type="text/css" href="/static/setup.css" />
   <script type="text/javascript" src="/vendor/chrome-extension-async.js"></script>
   <script type="text/javascript" src="/vendor/jszip.min.js"></script>
@@ -21,9 +21,9 @@
         <h1>Link your reMarkable</h1>
 
         <p>
-          Welcome to Remarklater, the best way to send any website to your
-          Remarkable tablet. To get started, link Chrome to your tablet with
-          a one-time code from Remarkable.
+          Welcome to Send to reMarkable, the best way to send any page to
+          your reMarkable tablet. To get started, link Chrome to your tablet
+          with a one-time code from reMarkable.
         </p>
 
         <p>
@@ -33,11 +33,11 @@ <h1>Link your reMarkable</h1>
       </div>
 
       <div class="content goto">
-        <a class="button" href="https://my.remarkable.com/generator-device" target="_blank">Copy one-time code from Remarkable</a>
+        <a class="button" href="https://my.remarkable.com/generator-device" target="_blank">Copy one-time code from reMarkable</a>
       </div>
 
       <div class="content sign-in hide">
-        <p id="error"></p>
+        <p id="status"></p>
         <form method='post'>
           <input name="code" type="text" placeholder="one-time code" maxlength="8" spellcheck="false" />
           <button type="submit" class="button" disabled="disabled">Link tablet</button>
@@ -50,27 +50,26 @@ <h1>Link your reMarkable</h1>
         <h1>Congrats, you're all set up!</h1>
 
         <p>
-          Now let's give Remarklater a whirl by sending this page to your Remarkable
+          Now let's give Send to reMarkable a whirl by sending this page to your reMarkable
           tablet. Press <code>&#8984;P</code> or go to the <code>File</code> menu and click
           <code>Print&hellip;</code>. In the printer dialog, select <code>Send
-          to Remarkable</code> as your destination.
+          to reMarkable</code> as your destination.
         </p>
 
         <p>
           Once the file has printed, you should see it appear on your
-          Remarkable tablet within a few moments. If you don't see the file
+          reMarkable tablet within a few moments. If you don't see the file
           show up, make sure your tablet is
           <a href="https://support.remarkable.com/hc/en-us/articles/115005335609" target="_blank">connected to WiFi</a>.
           If you're sure your tablet is connected and are still running into
-          issues, <a href="mailto:[email protected]">drop a line to
-          [email protected]</a>.
+          issues, <a href="mailto:[email protected]">drop a line to [email protected]</a>.
         </p>
       </div>
     </div>
   </div>
 
   <div class="footer">
-    <p>Created by <a href="https://twitter.com/sch" target="_blank">Michael Schade</a> and <a href="https://690labs.com/" target="_blank">690 Labs</a>.</p>
+    <p>Created by <a href="https://twitter.com/sch" target="_blank">Michael Schade</a></p>
     <p>This project is not affiliated with <a href="https://remarkable.com/" target="_blank">reMarkable</a>, who make this lovely tablet.</p>
   </div>
 </body>

diff --git a/static/setup.js b/static/setup.js
@@ -1,3 +1,9 @@
+$(document).ready(async function() {
+  if (await Remarkable.isDeviceRegistered()) {
+    console.log('registered');
+  }
+});
+
 $(document).ready(function() {
   $('.sign-in form input[name=code]').on('input', function() {
     $(this).next('button').attr('disabled', $(this).val().length !== 8);
@@ -9,12 +15,13 @@ $(document).ready(function() {
     try {
       let code = $('form input[name=code]').val();
       $(this).parents('.container').removeClass('error');
+      $('#status').removeClass('error').text('Authenticating with reMarkable\u2026');
       $('form > *').attr('disabled', 'disabled');
       await Remarkable.registerDevice(code);
       $(this).parents('.container').addClass('hide').next().addClass('show');
       $('.gradient-success').addClass('show');
     } catch(err) {
-      $('#error').text(err);
+      $('#status').addClass('error').text(err);
       $(this).parents('.container').addClass('error');
       $('form > *').attr('disabled', false);
     }