No commit message

philffm · Jul 7, 2024 · 2588879 · 2588879
1 parent dad49d6
commit 2588879
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/bookmarklet-generator/icon48.png b/bookmarklet-generator/icon48.png
diff --git a/bookmarklet-generator/index.html b/bookmarklet-generator/index.html
@@ -8,7 +8,8 @@
 </head>
 <body>
   <div class="container">
-    <h1>AI Summary Helper</h1>
+
+    <div id="header"><img src="icon48.png"><h1>AI Summary Helper</h1></div>
     <!-- <h2>Bookmarklet Generator</h2> -->
     <label for="apiKey">API Key <a href="https://platform.openai.com/api-keys" target="_blank"> (get your API key)</a></label>
     <input type="text" id="apiKey" placeholder="Enter your OpenAI API Key">
@@ -22,7 +23,7 @@ <h3> Related book and media recommendations.
         <h3> Answer additional questions in a serious and engaging way.
         Add emojis, hashtags, use HTML, highlight interesting parts, max 1000 words.
     </textarea>
-    <label class="light" for="apiKey">🔒 The API key is stored locally and does not leave your device. Do not share the bookmarklet with others, since it contains the API key.</label>
+    <label class="light" for="apiKey">🔒 The API key is stored locally in your browser. Do not share the bookmarklet with others, since it contains the API key.</label>
     <button onclick="generateBookmarklet()">Generate Bookmarklet</button>
     <div class="output" id="output"></div>
   </div>

diff --git a/bookmarklet-generator/styles.css b/bookmarklet-generator/styles.css
@@ -11,15 +11,16 @@ body {
   }
   .container {
     background: #fff;
-    border-radius: 12px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     padding: 24px;
     max-width: 500px;
     width: 100%;
   }
   h1 {
     color: #007bff;
     text-align: center;
+    margin: 16px 0;
   }
   label {
     display: block;
@@ -34,10 +35,10 @@ body {
   input, textarea {
     /* width: 100%; */
     width: -webkit-fill-available;
-    padding: 10px;
+    padding: 16px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
-    border-radius: 8px;
+    border-radius: 16px;
     font-size: 16px;
   }
   textarea {
@@ -49,7 +50,7 @@ body {
     background-color: #007bff;
     color: #fff;
     border: none;
-    border-radius: 12px;
+    border-radius: 16px;
     font-size: 18px;
     cursor: pointer;
   }
@@ -59,10 +60,22 @@ body {
   .output {
     margin-top: 20px;
     word-wrap: break-word;
+    text-align: center;
     background: #e9ecef;
-    padding: 10px;
-    border-radius: 4px;
+    padding: 16px;
+    border-radius: 12px;
     border: 1px solid #ccc;
   }
-
-
+  .output a {
+    background-color: #f0f0f0;
+    padding: 12px;
+    border-radius: 8px;
+    border-color: dimgrey;
+    border-style: dotted;
+  }
+
+  #header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }