feat: update README and some other improvements

RodrigoWebDev · RodrigoWebDev · commit c4adf8ca1e3e · 2025-01-10T17:02:15.000-03:00
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# 📴 HTML Standalone Lesspass
+
+Go to the [🌐 website](https://lesspass-standalone-html.netlify.app/).
+
+This is a lightweight, standalone HTML version of the [Lesspass](https://www.lesspass.com/#/) password manager. In this version, you can download the single HTML file from this page and have your favorite password manager with you forever, without depending on the website, repository, internet connection and without the need to install any app on your OS. Your system only needs a modern browser. You can also back up this file wherever you want.
+
+## 📜 How to use this version
+
+It's simple. Go to the [🌐 website](https://lesspass-standalone-html.netlify.app/), click "⬇️ Download it here." and open the file in your favorite browser(I recommend chrome but other browsers should work)
+
+## 🤔 How it works
+
+You can know how it work [here](https://blog.lesspass.com/2016-10-19/how-does-it-work).
+
+## Development
+
+To install the project in your machine you will need:
+
+- [Git](https://git-scm.com/) to clone this repo
+- [Node](https://nodejs.org/) (I'm using v20.15.1)
+
+To run the project:
+
+- `npm i` to install (only necessary the first time)
+- `npm run dev` to run the local server
+- `npm run build` to generate the HTML file for production
+- `npm run preview` to preview the build file
+
+This project use:
+
+- [Lesspass](https://www.npmjs.com/package/lesspass) package
+- [water.css](https://watercss.kognise.dev/) with some custom styles
+- [Vite](https://vite.dev/) build tool
+- [Vanilla JS](http://vanilla-js.com/)
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <title>HTML Standalone Lesspass</title>
   </head>
   <body>
-    <main class="md:d-f md:g-16px">
+    <main class="md:d-f md:g-24px">
       <div class="md:w-50%">
         <h1>📴 HTML Standalone Lesspass</h1>
 
@@ -66,10 +66,12 @@ <h1>📴 HTML Standalone Lesspass</h1>
       </div>
 
       <div class="md:w-50%">
-        <br />
-        <br />
-        <hr />
-        <br />
+        <div class="md:d-n">
+          <br />
+          <br />
+          <hr />
+          <br />
+        </div>
 
         <h2>💬 About</h2>
 
@@ -79,15 +81,15 @@ <h2>💬 About</h2>
           password manager. In this version, you can download the single HTML
           file from this page and have your favorite password manager with you
           forever, without depending on the website, repository, internet
-          connection and without the need to install any app on your phone. Your
+          connection and without the need to install any app on your OS. Your
           system only needs a modern browser. You can also back up this file
           wherever you want.
         </p>
 
         <h2>📜 How to use this version</h2>
 
         <p>
-          It's simple. Just download this page in <a href="index.html" download="lesspass_standalon.html">⬇️ this link</a> and open in your
+          It's simple. Just download this page in <a href="index.html" download="lesspass_standalon.html">⬇️ this link</a> and open the file in your
           favorite browser(I recommend chrome but other browsers should work)
         </p>
 
@@ -111,7 +113,7 @@ <h2>🤔 How it works</h2>
     <footer>
       <hr>
       <br>
-      <a href="https://github.com/RodrigoWebDev/lessPass-standalone-html" target="_blank">&lt;/&gt; Source code 🐱</a> 
+      <a href="https://github.com/RodrigoWebDev/lessPass-standalone-html" target="_blank">&lt;/&gt; Source code 🐱</a> developed by <a href="https://github.com/RodrigoWebDev" target="_blank">👨🏻‍💻 Rodrigo Queiroz</a>
       <br>
     </footer>
 
diff --git a/src/index.js b/src/index.js
@@ -49,15 +49,3 @@ myForm.addEventListener("submit", async (e) => {
   }
 });
 
-downloadLink.addEventListener("click", () => {
-  save()
-});
-
-function save() {
-  const data = "<!DOCTYPE html>\n"+document.documentElement.outerHTML; // See sources below for why this gets the entire page content.
-  const link = document.createElement('a');
-  link.setAttribute('download', 'default_download_name.html');
-  link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
-  link.click(); // In my tests, there was no need to add the element to the document for this to work.
-}
-
diff --git a/src/styles.css b/src/styles.css
@@ -422,13 +422,17 @@ a:hover {
     display: flex;
   }
   
-  .md\:g-16px {
-    gap: 16px;
+  .md\:g-24px {
+    gap: 24px;
   }
   
   .md\:w-50\%{
     width: 50%;
   }
+
+  .md\:d-n {
+    display: none;
+  }
 }
 
 * {

Original file line number	Diff line number	Diff line change
`@@ -422,13 +422,17 @@ a:hover {`
`422`	`422`	`display: flex;`
`423`	`423`	`}`
`424`	`424`
`425`		`- .md\:g-16px {`
`426`		`- gap: 16px;`
	`425`	`+ .md\:g-24px {`
	`426`	`+ gap: 24px;`
`427`	`427`	`}`
`428`	`428`
`429`	`429`	`.md\:w-50\%{`
`430`	`430`	`width: 50%;`
`431`	`431`	`}`
	`432`	`+`
	`433`	`+ .md\:d-n {`
	`434`	`+ display: none;`
	`435`	`+ }`
`432`	`436`	`}`
`433`	`437`
`434`	`438`	`* {`