diff --git a/README.md b/README.md index 65aec0f..8245d8a 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ ## About -This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management. As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB). -That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files. +This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management. +As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB). -You'll need to construct everything from the ground up. Good luck! +That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files. ## Instruction 1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation). 2. Open command prompt on your desire directory. -3. ``$> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template`` -4. ``$> cd ./[your-app-name]`` -5. ``$> wails dev`` +3. ``> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template`` +4. ``> cd ./[your-app-name]`` +5. ``> wails dev`` 6. Keep developing... ## Live Development @@ -34,7 +34,9 @@ To use ``UPX``, you need to download and at least put the path in the ``System E You don't have to rely on ``npm`` to add dependencies. If your application requires internet access, you can add dependencies via a ``CDN`` links. + If your application is used offline, simply download dependencies and save them in the ``src/libs`` folder, then import them in the index.html file. + E.g. ```html diff --git a/frontend/src/index.html b/frontend/src/index.html index f3de124..ca09cda 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -2,30 +2,30 @@ - - - - - - - + + + + + + + -
- -
-
- -
Please enter your name below 👇
-
- - -
-
- +
+ +
+
+ +
Please enter your name below 👇
+
+ + +
+
+ diff --git a/frontend/src/main.css b/frontend/src/main.css index 22e13d8..f417e5b 100644 --- a/frontend/src/main.css +++ b/frontend/src/main.css @@ -1,79 +1,76 @@ html { - background-color: rgba(27, 38, 54, 1); - text-align: center; - color: white; + background-color: rgba(27, 38, 54, 1); + text-align: center; + color: white; } body { - margin: 0; - color: white; - font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + margin: 0; + color: white; + font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } @font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 400; - src: local(""), - url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2"); + font-family: "Nunito"; + font-style: normal; + font-weight: 400; + src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2"); } #app main{ - height: 100vh; - text-align: center; + height: 100vh; + text-align: center; } .logo { - display: block; - width: 50%; - height: 50%; - margin: auto; - padding: 10% 0 0; - background-position: center; - background-repeat: no-repeat; - background-image: url("./assets/images/logo-universal.png"); - background-size: 100% 100%; - background-origin: content-box; + display: block; + width: 50%; + height: 50%; + margin: auto; + padding: 10% 0 0; + background-position: center; + background-repeat: no-repeat; + background-image: url("./assets/images/logo-universal.png"); + background-size: 100% 100%; + background-origin: content-box; } .result { - height: 20px; - line-height: 20px; - margin: 1.5rem auto; + height: 20px; + line-height: 20px; + margin: 1.5rem auto; } .input-box .btn { - width: 60px; - height: 30px; - line-height: 30px; - border-radius: 3px; - border: none; - margin: 0 0 0 20px; - padding: 0 8px; - cursor: pointer; + width: 60px; + height: 30px; + line-height: 30px; + border-radius: 3px; + border: none; + margin: 0 0 0 20px; + padding: 0 8px; + cursor: pointer; } .input-box .btn:hover { - background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); - color: #333333; + background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); + color: #333333; } .input-box .input { - border: none; - border-radius: 3px; - outline: none; - height: 30px; - line-height: 30px; - padding: 0 10px; - background-color: rgba(240, 240, 240, 1); - -webkit-font-smoothing: antialiased; + border: none; + border-radius: 3px; + outline: none; + height: 30px; + line-height: 30px; + padding: 0 10px; + background-color: rgba(240, 240, 240, 1); + -webkit-font-smoothing: antialiased; } .input-box .input:hover { - border: none; - background-color: rgba(255, 255, 255, 1); + border: none; + background-color: rgba(255, 255, 255, 1); } .input-box .input:focus { - border: none; - background-color: rgba(255, 255, 255, 1); + border: none; + background-color: rgba(255, 255, 255, 1); } diff --git a/frontend/src/main.js b/frontend/src/main.js index 0386874..110c9a0 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,15 +1,15 @@ //Global JS function for greeting function greet() { - //Get user input - let inputName = document.getElementById("name").value; + //Get user input + let inputName = document.getElementById("name").value; - //Call Go Greet function - window.go.main.App.Greet(inputName).then(result => { - //Display result from Go - document.getElementById("result").innerHTML = result; - }).catch(err => { - console.log(err); - }).finally(() => { - console.log("finished!") - }); + //Call Go Greet function + window.go.main.App.Greet(inputName).then(result => { + //Display result from Go + document.getElementById("result").innerHTML = result; + }).catch(err => { + console.log(err); + }).finally(() => { + console.log("finished!") + }); } \ No newline at end of file